第五章 版式設(shè)計(jì)應(yīng)用

PART05版式設(shè)計(jì)應(yīng)用第一節(jié)名片版式設(shè)計(jì)第二節(jié)ＤＭ廣告版式設(shè)計(jì)第三節(jié)報(bào)紙版式設(shè)計(jì)第四節(jié)招貼廣告版式設(shè)計(jì)第五節(jié)書籍版式設(shè)計(jì)第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)第七節(jié)UI版式設(shè)計(jì)第一節(jié)名片版式設(shè)計(jì)第一節(jié)名片版式設(shè)計(jì)一、名片的概念名片又稱卡片，是標(biāo)示姓名，所屬組織、公司（單位）和聯(lián)系方法的紙片。雖然通過交換名片建立聯(lián)系的形式已逐步被用社交軟件聯(lián)系的形式取代，但是在部分場(chǎng)合，互換名片仍然是人與人之間互相認(rèn)識(shí)最快、最有效的方法。名片的版面組成一般包括企業(yè)名稱、地址、郵箱、姓名、職務(wù)、聯(lián)系方式等，如圖5-1-1所示。第一節(jié)名片版式設(shè)計(jì)第一節(jié)名片版式設(shè)計(jì)二、名片的尺寸名片按外形分類可分為標(biāo)準(zhǔn)名片、窄形名片、折疊名片、異形名片四大類，其中最常用的是標(biāo)準(zhǔn)名片和折疊名片。各類名片的尺寸如下：標(biāo)準(zhǔn)名片：方角名片尺寸為90mm×55mm（見圖5-1-2）；圓角名片尺寸為85mm×54mm。窄形名片：90mm×50mm、90mm×45mm。折疊名片：90mm×95mm、145mm×50mm。異形名片：形狀不固定，根據(jù)需要設(shè)計(jì)尺寸（見圖5-1-3）。在名片版式設(shè)計(jì)過程中，為了保證名片印刷成品的質(zhì)量，名片四周需要加上3mm的出血。第一節(jié)名片版式設(shè)計(jì)第一節(jié)名片版式設(shè)計(jì)第一節(jié)名片版式設(shè)計(jì)三、名片版式設(shè)計(jì)的程序1.確定持有者（1）了解名片持有者的身份、職業(yè)。（2）了解名片持有者所屬的企業(yè)及企業(yè)性質(zhì)、職能。（3）了解名片持有者及其所屬企業(yè)的業(yè)務(wù)范疇。第一節(jié)名片版式設(shè)計(jì)2.明確設(shè)計(jì)要求（1）具有視覺沖擊力和可識(shí)別性。（2）能顯示名片持有者的工作性質(zhì)和身份。

3.設(shè)計(jì)版面（1）設(shè)計(jì)名片版面構(gòu)圖。（2）設(shè)計(jì)名片版面標(biāo)題字體、正文字體等。（3）選擇名片版面色彩。第一節(jié)名片版式設(shè)計(jì)四、名片的版式名片的版面構(gòu)成元素相對(duì)簡(jiǎn)單，其版式設(shè)計(jì)的主要目的是將名片持有者的姓名、職務(wù)、企業(yè)名稱及地址、聯(lián)系方式等信息清晰準(zhǔn)確地展示出來。名片的版式一般以橫版式及豎版式為主。橫版式是最常見、最穩(wěn)妥的名片的版式，采用這種版式會(huì)使人的視線從左向右移動(dòng)，如圖5-1-4所示。第一節(jié)名片版式設(shè)計(jì)采用豎版式的名片也比較常見，采用這種版式容易集中人的視線，同時(shí)也方便人的視線從上向下移動(dòng)，如圖5-1-5所示。圖5-1-5采用豎版式的名片版式分析：采用豎版式的名片，文字基本中央對(duì)齊，這張名片的字體顏色比較淡雅，降低了版面色彩對(duì)比度，顯得很和諧。第一節(jié)名片版式設(shè)計(jì)1.穩(wěn)定型構(gòu)圖穩(wěn)定型構(gòu)圖的特點(diǎn)是版面的主題及標(biāo)志在版面的中上部分，版面的下部分是輔助圖形或說明，標(biāo)志、主題、輔助圖形或說明各占一部分區(qū)域，如圖5-1-6和圖5-1-7所示。第一節(jié)名片版式設(shè)計(jì)圖5-1-7采用穩(wěn)定型構(gòu)圖的名片2版式分析：無論是采用橫版式的名片還是采用豎版式的名片，采用穩(wěn)定型構(gòu)圖都能使版面飽滿，給人穩(wěn)固的感覺。第一節(jié)名片版式設(shè)計(jì)2.中軸線型構(gòu)圖中軸線型構(gòu)圖是在版面中央設(shè)置一條中軸線，名片的主題、標(biāo)志、輔助說明以版面中軸線為基準(zhǔn)居中排列，如圖5-1-8和圖5-1-9所示。第一節(jié)名片版式設(shè)計(jì)第一節(jié)名片版式設(shè)計(jì)3.左右對(duì)分型構(gòu)圖左右對(duì)分型構(gòu)圖是一種標(biāo)志、文案左右對(duì)分的版面構(gòu)圖形式，這種版式設(shè)計(jì)方式可使標(biāo)志、文案被明顯區(qū)分開，如圖5-1-10所示。第二節(jié)ＤＭ廣告版式設(shè)計(jì)第二節(jié)ＤＭ廣告版式設(shè)計(jì)一、DM廣告的概念DM廣告直譯為“直接郵寄廣告”，即通過郵寄、贈(zèng)送等形式，將宣傳品送到消費(fèi)者手中。DM廣告本身不僅是廣告，也是媒體，是集廣告、媒體功能于一身的獨(dú)立廣告。不同類型的DM廣告如圖5-2-1所示。第二節(jié)ＤＭ廣告版式設(shè)計(jì)二、DM廣告的開本和尺寸DM廣告的開本、尺寸不定，一般最常用的開本是16開，單頁的尺寸通常是210mm×285mm，折頁的尺寸通常是210mm×190mm，其他大小的DM廣告的尺寸和外形在此基礎(chǔ)上變化。不同開本、尺寸的DM廣告如圖5-2-2所示。第二節(jié)ＤＭ廣告版式設(shè)計(jì)三、DM廣告版式設(shè)計(jì)的程序1.市場(chǎng)分析（1）徹底了解商品。（2）分析消費(fèi)者的心理和習(xí)慣。（3）總結(jié)出消費(fèi)者更容易接受的DM廣告的形式。第二節(jié)ＤＭ廣告版式設(shè)計(jì)2.確定創(chuàng)意（1）收集資料，獲取內(nèi)部及外部素材。（2）集思廣益，選擇別致、新穎的創(chuàng)意，確保DM廣告有足夠的吸引力和保存價(jià)值，以使消費(fèi)者不舍得丟棄。（3）確定形式，DM廣告一般沒有固定的形式，可根據(jù)需要靈活設(shè)計(jì)。第二節(jié)ＤＭ廣告版式設(shè)計(jì)3.設(shè)計(jì)構(gòu)思（1）確定DM廣告的開本、尺寸。（2）選擇合理的折疊方式。（3）為DM廣告構(gòu)思一個(gè)具有感染力的主題口號(hào)。4.組織素材并進(jìn)行設(shè)計(jì)（1）選擇圖片并進(jìn)行搭配。（2）選擇合適的色彩，色彩選擇應(yīng)符合DM廣告主題，遵循色彩搭配的基本原則。第二節(jié)ＤＭ廣告版式設(shè)計(jì)四、DM廣告的版式1.滿版式滿版式是指圖片充滿版面的版式，采用這類版式的版面有較強(qiáng)、較鮮明的視覺沖擊力。進(jìn)行滿版式DM廣告設(shè)計(jì)時(shí)，可以規(guī)則地網(wǎng)格式劃分版面，也可以不規(guī)則地劃分版面，如圖5-2-3所示。第二節(jié)ＤＭ廣告版式設(shè)計(jì)2.產(chǎn)品中心式DM廣告不像其他平面類產(chǎn)品有嚴(yán)格的設(shè)計(jì)規(guī)則，DM廣告設(shè)計(jì)的重點(diǎn)在于如何將產(chǎn)品的廣告效果最大化，以達(dá)到促進(jìn)產(chǎn)品銷售的目的，因此有很多DM廣告是用大幅面的照片充滿版面，并將產(chǎn)品居中放在版面的中心位置，以有的放矢地刺激目標(biāo)消費(fèi)者，如圖5-2-4所示。第二節(jié)ＤＭ廣告版式設(shè)計(jì)3.視覺引導(dǎo)式視覺引導(dǎo)式強(qiáng)調(diào)均衡設(shè)計(jì)，視覺引導(dǎo)是其基本特征。視覺引導(dǎo)式版式通過引導(dǎo)瀏覽者的閱讀方向，傳遞重點(diǎn)的信息，區(qū)分版面的輕重信息，使瀏覽者能夠準(zhǔn)確關(guān)注版面重點(diǎn)信息，如圖5-2-5所示。第二節(jié)ＤＭ廣告版式設(shè)計(jì)4.組合式組合式是將圖片與文字進(jìn)行有效組合，從而表現(xiàn)出創(chuàng)意和強(qiáng)烈的視覺沖擊力的版式。圖片與文字組合的形式具有多樣性，如圖5-2-6所示。第二節(jié)ＤＭ廣告版式設(shè)計(jì)5.自由式自由式就是設(shè)計(jì)時(shí)根據(jù)版面的圖像與文字內(nèi)容以及版面需要，以美觀、醒目、主題突出為原則，靈活設(shè)計(jì)的版式，如圖5-2-7、圖5-2-8所示。第二節(jié)ＤＭ廣告版式設(shè)計(jì)第三節(jié)報(bào)紙版式設(shè)計(jì)第三節(jié)報(bào)紙版式設(shè)計(jì)報(bào)紙是一種平面媒體，報(bào)紙版式設(shè)計(jì)的目標(biāo)是使瀏覽者能夠在最短的時(shí)間內(nèi)獲得最多信息，形式必須服從于功能。簡(jiǎn)潔體現(xiàn)了現(xiàn)代報(bào)紙版式設(shè)計(jì)的外在特點(diǎn)，它符合現(xiàn)代社會(huì)的生活節(jié)奏和現(xiàn)代的審美觀念；易懂體現(xiàn)了現(xiàn)代報(bào)紙版式設(shè)計(jì)的內(nèi)在特點(diǎn)，即從瀏覽者的角度出發(fā)，為瀏覽者服務(wù)，體現(xiàn)人性化。如圖5-3-1所示，這兩個(gè)版面簡(jiǎn)潔、易懂的視覺化版式設(shè)計(jì)，符合瀏覽者的閱讀習(xí)慣，信息傳播效果顯著。一、報(bào)紙版式設(shè)計(jì)的概念第三節(jié)報(bào)紙版式設(shè)計(jì)第三節(jié)報(bào)紙版式設(shè)計(jì)報(bào)紙的開本主要有2開、4開兩種。我國(guó)2開報(bào)紙尺寸一般為780mm×550mm，其版心尺寸一般為350mm×490mm×2；它通常分為8個(gè)基本欄，采用橫排版與豎排版的內(nèi)容所占版面的比例約為8∶2。4開報(bào)紙的尺寸一般為540mm×390mm，其版心尺寸一般為490mm×350mm。二、報(bào)紙的開本第三節(jié)報(bào)紙版式設(shè)計(jì)報(bào)紙的生產(chǎn)由多道工序組成，包括策劃、編稿和組版三部分。策劃是指報(bào)紙形式和報(bào)紙內(nèi)容的策劃；編稿是指分析與選擇稿件、修改稿件和制作標(biāo)題；組版是指配置版面內(nèi)容和設(shè)計(jì)報(bào)紙版式。報(bào)紙的版式設(shè)計(jì)就屬于組版的范疇。1.安排稿件（1）確定稿件的內(nèi)容和字?jǐn)?shù)，判斷稿件新聞的重要程度。（2）分別確定稿件排版后所占版面面積、圖片的大小并分配好稿件和圖片的位置。（3）勾畫版面的草圖。三、報(bào)紙版式設(shè)計(jì)的程序第三節(jié)報(bào)紙版式設(shè)計(jì)2.美化版面（1）通過題文、圖文配合，以及長(zhǎng)短塊、大小標(biāo)題、橫豎排列等設(shè)計(jì)進(jìn)行版面調(diào)整。（2）變化字體、字號(hào)、線條，使用花框、底紋、題花等進(jìn)行點(diǎn)綴。（3）運(yùn)用色彩搭配和留白等設(shè)計(jì)方法對(duì)版面進(jìn)行外觀美化和修飾。第三節(jié)報(bào)紙版式設(shè)計(jì)報(bào)紙的版式設(shè)計(jì)一定要遵循“主次分明、條理清楚，既有變化，又有統(tǒng)一”的原則，要恰當(dāng)?shù)亓舭资睾冢`活地運(yùn)用灰色，通過對(duì)黑、白、灰的巧妙安排（主要指照片、題圖、插圖、底紋之間的色調(diào)搭配），打造張弛有度、疏密有致、有輕有重的版面節(jié)奏。四、報(bào)紙的版式第三節(jié)報(bào)紙版式設(shè)計(jì)1.長(zhǎng)欄長(zhǎng)欄是將基本欄整數(shù)倍合并的欄，如二合一、三合一等，如圖5-3-2和圖5-3-3所示。第三節(jié)報(bào)紙版式設(shè)計(jì)2.破欄破欄是在欄數(shù)有二欄以上的版面上，文字或圖表排列的寬度是一排整倍數(shù)于基本欄的欄，如五破三、三破二等，如圖5-3-4和圖5-3-5所示。第四節(jié)招貼廣告版式設(shè)計(jì)第四節(jié)招貼廣告版式設(shè)計(jì)招貼廣告又稱海報(bào)、宣傳畫，是現(xiàn)代廣告中使用最頻繁、最廣泛、最便利、最快捷和最經(jīng)濟(jì)的傳播手段之一，現(xiàn)代的招貼廣告不但具有使用價(jià)值——傳播信息，還具有極高的藝術(shù)欣賞價(jià)值和收藏價(jià)值?，F(xiàn)代招貼廣告最主要的特征是能在瞬間吸引瀏覽者并引起其心理上的共鳴，將信息迅速、準(zhǔn)確地傳遞給瀏覽者。創(chuàng)意是招貼廣告的生命和靈魂，是其核心所在，它能使招貼廣告主題突出并具有深刻的內(nèi)涵。一、招貼廣告的概念第四節(jié)招貼廣告版式設(shè)計(jì)招貼廣告按內(nèi)容主要分為商業(yè)招貼廣告和文化招貼廣告兩大類。商業(yè)招貼廣告主要以促銷商品信息、滿足消費(fèi)者需要的產(chǎn)品信息等內(nèi)容為題材，應(yīng)用廣泛，如圖5-4-1所示。文化招貼廣告多以社會(huì)公益性話題為題材，如環(huán)保、戒煙等話題，如圖5-4-2所示。第四節(jié)招貼廣告版式設(shè)計(jì)按英制標(biāo)準(zhǔn)，招貼廣告最基本的尺寸是30in×20in（508mm×762mm），現(xiàn)在在這一基本尺寸基礎(chǔ)上，招貼廣告又發(fā)展出其他尺寸：30in×40in、60in×40in、60in×120in、10in×6.8in和10in×20in。二、招貼廣告的尺寸第四節(jié)招貼廣告版式設(shè)計(jì)大尺寸招貼廣告是由多張紙拼貼而成的，如最大標(biāo)準(zhǔn)尺寸10in×20in的招貼廣告是由48張30in×20in的紙拼貼而成的，其大小相當(dāng)于我國(guó)標(biāo)準(zhǔn)中24張全開紙拼接起來的大小。戶外大型招貼廣告一般貼在商業(yè)區(qū)、公共汽車候車亭和高速公路等區(qū)域的廣告牌上，其尺寸大多為60in×40in，如圖5-4-3所示。而室內(nèi)中型招貼廣告一般貼在公共信息墻上或?qū)ｉT張貼廣告信息的區(qū)域，其尺寸以30in×20in和30in×40in為主，如圖5-4-4所示。第四節(jié)招貼廣告版式設(shè)計(jì)第四節(jié)招貼廣告版式設(shè)計(jì)1.分析規(guī)劃（1）確定招貼廣告類別和主題內(nèi)容。（2）進(jìn)行同類招貼廣告社會(huì)調(diào)查與市場(chǎng)調(diào)研。（3）制訂招貼廣告版式設(shè)計(jì)計(jì)劃。三、招貼廣告版式設(shè)計(jì)的程序第四節(jié)招貼廣告版式設(shè)計(jì)2.確定方案（1）構(gòu)思招貼廣告的版式設(shè)計(jì)。（2）選擇合適的版式設(shè)計(jì)元素、符號(hào)。（3）確定版式設(shè)計(jì)方案。3.制作與完善制作招貼廣告，并在制作過程中進(jìn)一步完善版式設(shè)計(jì)。第四節(jié)招貼廣告版式設(shè)計(jì)1.線條形采用線條形版式的版面，水平的線條形版式給人開闊、平靜的感覺；垂直的線條形版式給人嚴(yán)肅、莊重、靜寂的感覺。采用橫線形版式和豎線形版式的招貼廣告分別如圖5-4-5、圖5-4-6所示。四、招貼廣告的版式第四節(jié)招貼廣告版式設(shè)計(jì)第四節(jié)招貼廣告版式設(shè)計(jì)2.三角形三角形給人以堅(jiān)實(shí)、穩(wěn)定的感覺，在三角形版式的基礎(chǔ)上進(jìn)行延展，還有梯形版式等，這類版式都可以起到支撐版面的作用。采用三角形版式的招貼廣告如圖5-4-7所示，采用梯形版式的招貼廣告如圖5-4-8所示。第四節(jié)招貼廣告版式設(shè)計(jì)第四節(jié)招貼廣告版式設(shè)計(jì)3.圓形圓形版式給人以時(shí)尚、內(nèi)向、親切、圓滿甚至神秘的感覺。采用圓形版式的招貼廣告如圖5-4-9、圖5-4-10所示。第四節(jié)招貼廣告版式設(shè)計(jì)4.曲線形曲線形版式給人以不穩(wěn)定感，采用曲線形版式的版面生動(dòng)活潑，曲線還能很好地引導(dǎo)瀏覽者的視線，如圖5-4-11和圖5-4-12所示。第五節(jié)書籍版式設(shè)計(jì)第五節(jié)書籍版式設(shè)計(jì)一、書籍版式設(shè)計(jì)的概念及組成在書籍設(shè)計(jì)領(lǐng)域，從書籍文稿到書籍出版的整個(gè)設(shè)計(jì)過程稱為書籍裝幀設(shè)計(jì)，也是完成書籍形式從平面化到立體化的過程，它是包含了藝術(shù)思維、構(gòu)思創(chuàng)意和技術(shù)手法的系統(tǒng)設(shè)計(jì)。書籍封面、內(nèi)頁等部分版式設(shè)計(jì)的過程，稱為書籍版式設(shè)計(jì)，如圖5-5-1、圖5-5-2所示。第五節(jié)書籍版式設(shè)計(jì)二、書籍的開本書籍的開本根據(jù)書籍的特征及用途決定。著作等政治理論類書籍嚴(yán)肅端莊，篇幅較多，一般都放在桌子上閱讀，多為32開；文學(xué)類書籍為方便瀏覽者閱讀多為32開；詩集、散文集一般開本較小，常使用42開、36開等；工具書如百科全書、《辭?！返容^為厚重，一般用大開本，常用16開；小字典、手冊(cè)之類小型書可用較小開本，如64開。平時(shí)常見的圖書大多為16開以下的。書籍常見開本及其尺寸見表5-5-1。第五節(jié)書籍版式設(shè)計(jì)第五節(jié)書籍版式設(shè)計(jì)三、書籍版式設(shè)計(jì)的程序書籍版式設(shè)計(jì)是一項(xiàng)相對(duì)較為復(fù)雜的工作，其程序大致分為以下幾個(gè)步驟。1.確定版式設(shè)計(jì)方案（1）確定書籍主題和風(fēng)格。（2）確定符號(hào)和形式，設(shè)計(jì)貫穿全書的視覺信息符號(hào)，包括圖片、文字、色彩、結(jié)構(gòu)等，并按照不同的內(nèi)容賦予其合適的外觀。第五節(jié)書籍版式設(shè)計(jì)2.設(shè)計(jì)封面、內(nèi)頁等的版式（1）書籍的封面設(shè)計(jì)包括封面版式設(shè)計(jì)，設(shè)計(jì)者需要根據(jù)書籍裝幀方式進(jìn)行書籍封面設(shè)計(jì)（包括封底），如果是精裝書籍還要對(duì)書籍的書脊、扉頁、護(hù)封、腰封等進(jìn)行設(shè)計(jì)。（2）對(duì)書籍內(nèi)頁進(jìn)行版式設(shè)計(jì)，在設(shè)定版心后，對(duì)文字、插圖、裝飾圖案等元素進(jìn)行編排設(shè)計(jì)。第五節(jié)書籍版式設(shè)計(jì)四、書籍的版式書籍不是一般的商品，而是一種精神文化產(chǎn)品，不同種類的書籍承載著不同的文化。因此，在書籍版式設(shè)計(jì)中，一根線、一行字、一個(gè)抽象符號(hào)或一兩塊色彩，都要體現(xiàn)一定的設(shè)計(jì)思想，既要有內(nèi)容，又要有美感，以充分體現(xiàn)書籍的文化內(nèi)涵。書籍版式要以切合書籍主題為前提進(jìn)行設(shè)計(jì)。下面就以幾本書籍版式設(shè)計(jì)作品為例，講解其設(shè)計(jì)要點(diǎn)。第五節(jié)書籍版式設(shè)計(jì)1.文化創(chuàng)意類——《看戲》版式設(shè)計(jì)《看戲》是一本介紹京劇文化的書，以“一戲一文一圖”的形式，從說戲、說角、雜說、戲詞等幾個(gè)角度通俗易懂、圖文并茂地介紹了一百出經(jīng)典京劇曲目，如圖5-5-3至圖5-5-7所示。第五節(jié)書籍版式設(shè)計(jì)第五節(jié)書籍版式設(shè)計(jì)第五節(jié)書籍版式設(shè)計(jì)第五節(jié)書籍版式設(shè)計(jì)2.文化類——《鄉(xiāng)愁·中國(guó)》叢書版式設(shè)計(jì)《鄉(xiāng)愁·中國(guó)》是一套文學(xué)類叢書，共分10冊(cè)，其封面、裝幀、內(nèi)頁設(shè)計(jì)如圖5-5-8至圖5-5-10所示。第五節(jié)書籍版式設(shè)計(jì)第五節(jié)書籍版式設(shè)計(jì)3.商業(yè)類——《世界媒體峰會(huì)全紀(jì)錄》版式設(shè)計(jì)《世界媒體峰會(huì)全紀(jì)錄》的封套、封面等的版式設(shè)計(jì)，如圖5-5-11所示。第五節(jié)書籍版式設(shè)計(jì)4.兒童類——《斑馬生活在城市》封面版式設(shè)計(jì)兒童類書籍有時(shí)會(huì)采用特殊開本，為體現(xiàn)充滿童趣的版面氛圍，在設(shè)計(jì)時(shí)封面多采用兒童插圖，文字設(shè)計(jì)可采用活潑、稚拙的字體，以吸引兒童，如圖5-5-12所示。第五節(jié)書籍版式設(shè)計(jì)5.畫冊(cè)類——某企業(yè)宣傳畫冊(cè)封面版式設(shè)計(jì)畫冊(cè)類書籍開本常用12開、24開等，書籍形狀多為正方形，以便于編排圖片，如圖5-5-13所示。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)一、網(wǎng)頁界面版式設(shè)計(jì)的概念網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地講，網(wǎng)站就是由網(wǎng)頁組成的。網(wǎng)頁界面版式設(shè)計(jì)是指對(duì)網(wǎng)頁中的文字、圖片、動(dòng)畫、音頻、視頻等按照一定的規(guī)律和藝術(shù)化處理方式進(jìn)行編排和布局，以增強(qiáng)用戶體驗(yàn)，達(dá)到有效傳遞信息的目的，如圖5-6-1所示。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)二、網(wǎng)頁界面的尺寸網(wǎng)頁界面不像印刷品一樣，它沒有固定的尺寸，它的大小與顯示器的大小及分辨率有關(guān)。常見的電腦顯示器的分辨率及各分辨率電腦顯示器的市場(chǎng)占有率如圖5-6-2所示；移動(dòng)端網(wǎng)頁的尺寸則會(huì)因手機(jī)屏幕的不同而改變，H5頁面的版式設(shè)計(jì)稿一般寬度為640px，高度為1136px，移動(dòng)端的網(wǎng)頁界面如圖5-6-3所示。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)三、網(wǎng)頁界面版式設(shè)計(jì)的程序1.分析定位根據(jù)網(wǎng)站用戶需求以及具體網(wǎng)頁的性質(zhì)和內(nèi)容來確定版式設(shè)計(jì)的風(fēng)格，最終形成初步的版式設(shè)計(jì)思路。2.設(shè)計(jì)構(gòu)思（1）設(shè)計(jì)網(wǎng)站的進(jìn)入界面、首界面以及二級(jí)界面、三級(jí)界面。（2）對(duì)網(wǎng)頁界面的圖片、文字、視頻等內(nèi)容進(jìn)行初步編排，確定網(wǎng)頁界面的結(jié)構(gòu)。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)3.確定方案制定版式設(shè)計(jì)方案，綜合考慮版面色彩、結(jié)構(gòu)等，制作出平面設(shè)計(jì)稿。4.網(wǎng)頁切割確定版式設(shè)計(jì)方案后，對(duì)版面中的圖片進(jìn)行合理切割，以保證網(wǎng)頁信息加載的速度。5.網(wǎng)頁后臺(tái)制作當(dāng)所有的設(shè)計(jì)程序完成后，進(jìn)行圖片鏈接及交互設(shè)計(jì)，可開展網(wǎng)頁測(cè)試來確定網(wǎng)頁界面流程是否合理、用戶體驗(yàn)是否良好，最終完成網(wǎng)頁界面設(shè)計(jì)。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)四、網(wǎng)頁界面版式1.“國(guó)”字型版式“國(guó)”字型版式也可以稱為“同”字型版式，其特點(diǎn)是網(wǎng)頁界面的最上面是網(wǎng)站的標(biāo)志、橫幅廣告和導(dǎo)航欄，中間是網(wǎng)頁的主體內(nèi)容，最下面是網(wǎng)頁的版權(quán)聲明等信息，如圖5-6-4所示。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)2.拐角型版式拐角型版式與“國(guó)”字型版式類似，網(wǎng)頁界面頂部都是網(wǎng)站的標(biāo)志、導(dǎo)航欄和橫幅廣告。拐角型版式適用于購(gòu)物類、門戶類網(wǎng)站網(wǎng)頁界面的設(shè)計(jì)，如圖5-6-5所示。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)3.左右框架型版式左右框架型版式常用于一些大型論壇和企業(yè)網(wǎng)站的網(wǎng)頁界面，網(wǎng)頁界面左側(cè)一般為導(dǎo)航欄鏈接，右側(cè)為網(wǎng)頁的主體內(nèi)容，如圖5-6-6所示。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)4.海報(bào)型版式采用海報(bào)型版式的網(wǎng)頁界面，看起來就像平時(shí)見到的海報(bào)一樣，中間是一幅很醒目、設(shè)計(jì)精美的圖片，圖片周圍設(shè)計(jì)有文字信息和鏈接。海報(bào)型版式常用于時(shí)尚類網(wǎng)站的首頁，其優(yōu)點(diǎn)是版面美觀，有視覺沖擊力，缺點(diǎn)是網(wǎng)頁打開速度慢，如圖5-6-7所示。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)5.斜線分割型版式斜線或者斜著的物體，其本身似乎自帶張力，將其用在網(wǎng)頁界面的版式設(shè)計(jì)中，可增強(qiáng)版面的視覺張力。當(dāng)網(wǎng)頁界面設(shè)計(jì)過于中規(guī)中矩、無亮點(diǎn)時(shí)，打破這種中規(guī)中矩就尤為重要。打破中規(guī)中矩的方法有很多，而使用斜線分割版面就是其中一種常用的方法，如圖5-6-8所示。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)6.個(gè)性化版式個(gè)性化版式適用于一些專題性網(wǎng)站的網(wǎng)頁界面，它是在基礎(chǔ)網(wǎng)頁界面版式的基礎(chǔ)上增加一些獨(dú)特、另類的元素，以實(shí)現(xiàn)與眾不同的網(wǎng)頁界面設(shè)計(jì)效果，如圖5-6-9至圖5-6-11所示。第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)第六節(jié)網(wǎng)頁界面版式設(shè)計(jì)第七節(jié)UI版式設(shè)計(jì)第七節(jié)UI版式設(shè)計(jì)UI是userinterface（用戶界面）的簡(jiǎn)稱，本節(jié)我們主要介紹應(yīng)用軟件的UI版式設(shè)計(jì)。此處我們講的UI版式設(shè)計(jì)是指對(duì)應(yīng)用軟件的操作邏輯、界面的版式設(shè)計(jì)。好的UI版式設(shè)計(jì)不僅讓應(yīng)用軟件變得有個(gè)性、有品位，還讓應(yīng)用軟件操作起來簡(jiǎn)單、方便，可充分提升軟件用戶的體驗(yàn)，如圖5