網(wǎng)頁(yè)界面設(shè)計(jì)與制作第5章-網(wǎng)頁(yè)界面中文字的編排設(shè)課件

第5章網(wǎng)頁(yè)界面中文字的編排設(shè)計(jì)

課堂學(xué)習(xí)目標(biāo)：

了解字體在網(wǎng)頁(yè)界面設(shè)計(jì)中的作用

熟悉常用字體的特征

掌握文字編排設(shè)計(jì)的規(guī)律和手法

掌握文字群體的編排·

在網(wǎng)頁(yè)界面設(shè)計(jì)領(lǐng)域，文字既是信息傳達(dá)的重要媒介，也是具有直觀訴求力的視覺(jué)傳達(dá)要素?！?/p>

文字在界面中的組織、安排及其藝術(shù)處理也越來(lái)越多地得到設(shè)計(jì)師們的重視。文字的編排設(shè)計(jì)5.4文字在網(wǎng)頁(yè)界面設(shè)計(jì)中的作用5.1關(guān)于字體5.2字體編排5.3案例——MODELSAGENCY首頁(yè)界面設(shè)計(jì)5.5課后思考與練習(xí)5.65.1文字在網(wǎng)頁(yè)界面設(shè)計(jì)中的作用·

在平面設(shè)計(jì)的構(gòu)成要素中有兩大基本元素，一個(gè)是圖形，另一個(gè)就是文字?！?/p>

只通過(guò)圖形來(lái)傳遞信息常常不能達(dá)到最佳的傳達(dá)效果，須借助文字才能進(jìn)行最有效的說(shuō)明?！?/p>

在網(wǎng)頁(yè)界面中也是如此。·

眾多構(gòu)成要素中文字具有最佳的直觀傳達(dá)作用以及最高的明確性?！?/p>

圖形圖像、色彩、版式、動(dòng)畫等要素都可以傳達(dá)信息，但有時(shí)會(huì)產(chǎn)生信息傳遞不明確甚至引發(fā)歧義的現(xiàn)象，而通過(guò)文字的傳達(dá)則可以在很大程度上避免這種情況，從而使瀏覽者能夠順利、方便、愉快地接受信息，不致因信息不明確而失去主題的傳達(dá)目的?！?/p>

文字作為圖形符號(hào)，在處理文字造型時(shí)也適用圖形設(shè)計(jì)的基本原理，這些原理在文字的形態(tài)構(gòu)成、空間分布、色彩配置等多方面都具有指導(dǎo)性的作用?！?/p>

通過(guò)設(shè)計(jì)與編排，文字的存在價(jià)值在界面中應(yīng)體現(xiàn)為提高信息的明確程度與可讀性，加強(qiáng)界面的藝術(shù)性與視覺(jué)感染力，從而獲得良好的視覺(jué)傳達(dá)效果?！?/p>

具體來(lái)說(shuō)，文字在網(wǎng)頁(yè)界面中的作用可以通過(guò)以下幾點(diǎn)在優(yōu)秀設(shè)計(jì)作品中體現(xiàn)出的文字的特性來(lái)體現(xiàn)。1．適合性·

文字與具體文字內(nèi)容以及界面主題相適應(yīng)?！?/p>

根據(jù)主題內(nèi)容、欲傳達(dá)的信息含義和文字所處環(huán)境來(lái)確定文字的字體、色彩、形態(tài)和表現(xiàn)形式是保證適合性的必要條件，如圖5-2所示。2．明確性·

文字的主要功能在于傳達(dá)外形特征以便瀏覽者識(shí)別，保證信息的準(zhǔn)確傳遞?！?/p>

文字的點(diǎn)劃、橫豎、圓弧等結(jié)構(gòu)要素造成文字本身的不可變異，因而在選擇時(shí)須格外注意，在特別強(qiáng)調(diào)信息嚴(yán)格準(zhǔn)確的情況下應(yīng)優(yōu)先選取易于識(shí)別的文字，在進(jìn)行字體創(chuàng)作時(shí)也應(yīng)保證形態(tài)的明確性，如圖5-3所示。3．易讀性·

文字的形態(tài)及編排設(shè)計(jì)能夠提高界面的易讀程度?！?/p>

一般情況下，人的視覺(jué)對(duì)于過(guò)粗、過(guò)細(xì)的文字形態(tài)需花費(fèi)更多的時(shí)間去識(shí)別，不易順暢瀏覽?！?/p>

在版式布局中，合理的文字排列與分布會(huì)使瀏覽變得極為愉快，對(duì)視覺(jué)適宜的文字色彩配置也能夠加強(qiáng)界面的易讀性，如圖5-4所示。4．美觀性·

文字可以通過(guò)自身形象的個(gè)性與風(fēng)格給人以美的感受，使界面更加美觀?！?/p>

文字形態(tài)的變化與統(tǒng)一、文字編排的節(jié)奏與韻律、文字體量的對(duì)比與和諧，都是達(dá)成美觀性的表現(xiàn)手法，如圖5-5所示。5．創(chuàng)新性·

文字與界面信息主題需求相配合并進(jìn)行形態(tài)變化，將文字進(jìn)行創(chuàng)意發(fā)揮，產(chǎn)生創(chuàng)造的美感，進(jìn)而加強(qiáng)界面整體設(shè)計(jì)效果的創(chuàng)新性，給瀏覽者耳目一新的感受，如圖5-6所示。5.2關(guān)于字體·

字體，又稱文字的“體式”?！?/p>

文字作為視覺(jué)形式的信息傳達(dá)符號(hào)，同一文字體系中包含有多種不同的字體?！?/p>

在達(dá)成利于閱讀和傳遞特定信息的功能第一性的同時(shí)，文字可以通過(guò)不同字體所特有的藝術(shù)風(fēng)格特征來(lái)傳達(dá)更多的信息，并形成各具特色的視覺(jué)效果?！?/p>

網(wǎng)頁(yè)界面中使用的字體，分為中文字體和外文字體兩大類，在設(shè)計(jì)中常常要交替使用?！?/p>

中文和外文字體都是在標(biāo)準(zhǔn)印刷字體，即中文的宋體、黑體以及拉丁字的新羅馬體與無(wú)飾線體的基礎(chǔ)上不斷演化、發(fā)展而來(lái)的。·

以常用的字庫(kù)來(lái)看，僅中文字庫(kù)就有漢儀、漢鼎、文鼎、方正、金山、華文等多種，每一種字庫(kù)又包含有宋體、黑體、楷體、隸書體、行書體、圓體、新藝體、綜藝體、廣告體、魏碑體、舒同體、勘亭流體、古印體、手寫體……，從幾十種到上百種不一而足，英文字體的種類則更加繁復(fù)?！?/p>

字體中最常用的還可以依據(jù)其各行、其筆劃的粗細(xì)細(xì)分為細(xì)、中、粗、特、特超等，而新的字體仍在不斷開發(fā)中?！?/p>

設(shè)計(jì)師在字體上的選擇范圍是非常廣闊的，并且這個(gè)范圍還在不斷擴(kuò)大。5.2.1中文字體·

網(wǎng)頁(yè)界面中使用的中文字體主要是漢字字體。·

蒙古文、藏文等少數(shù)民族文字雖然也屬于中文范疇，但因在網(wǎng)頁(yè)界面中極少見到，故不在本書討論范圍之內(nèi)?！?/p>

漢字的形態(tài)、風(fēng)格是字體的特有屬性，不同的字體會(huì)給瀏覽者造成不同的心理印象。·

在選用時(shí)要注意不同字體的不同用途，充分理解與掌握，恰當(dāng)運(yùn)用?！?/p>

也就是說(shuō)，字體的選擇要以文字信息的內(nèi)涵和設(shè)計(jì)意圖為依據(jù)，使字體的形態(tài)、心理效應(yīng)與在設(shè)計(jì)中要傳達(dá)的主題信息相一致，即文字的內(nèi)容與形式達(dá)到高度統(tǒng)一?！?/p>

下面就幾種常用字體做簡(jiǎn)要的說(shuō)明和分析：

（1）宋體（2）楷體（3）仿宋體（4）黑體

（5）圓體（6）手寫體（7）美術(shù)體5.2.2外文字體·

網(wǎng)頁(yè)界面中使用的外文字體主要指由拉丁字母構(gòu)成的文字體系?！?/p>

拉丁字母是世界上使用地域最為廣泛的文字，全世界約有60多個(gè)國(guó)家以拉丁字母作為表意交流的傳媒符號(hào)，英文就是最具代表性的由拉丁字母構(gòu)成的語(yǔ)言文字系統(tǒng)?！?/p>

拉丁字母雖然只有26個(gè)，但拉丁字母字體卻有數(shù)百種之多?！?/p>

計(jì)算機(jī)的普及應(yīng)用更是為新字體誕生創(chuàng)造了有利的條件?！?/p>

字體造型不僅表現(xiàn)出時(shí)代的文化形式，更能顯示出設(shè)計(jì)者不同的審美口味和趣向?！?/p>

從字型結(jié)構(gòu)來(lái)看，拉丁字母包含矩形、圓形和三角形3種基本形，并通過(guò)基本形進(jìn)行組合變化，字高相對(duì)統(tǒng)一，而字符寬度則因字而異，這與中文的方形字型具有較大的差異?！?/p>

拉丁字母依據(jù)其基本結(jié)構(gòu)可以歸納為3種類型：

（1）飾線體（Serif）（2）無(wú)飾線體（SansSerif）（3）裝飾體（Decorative，也稱disp1ay）5.3字體編排

5.3.1字號(hào)級(jí)數(shù)·

在界面中文字主要分為兩種類型：一種是具有提示和引導(dǎo)功能的文字，如頁(yè)面中的標(biāo)題、廣告和欄目名稱等；另一種是篇幅較長(zhǎng)的閱讀性材料和說(shuō)明性文字，如網(wǎng)絡(luò)文章的正文、主題內(nèi)容的詳細(xì)說(shuō)明等?！?/p>

從文字功能來(lái)看，前者的主要功能在于誘發(fā)視覺(jué)的關(guān)注，而后者則對(duì)易讀性有較高的要求?！?/p>

現(xiàn)有的字庫(kù)為網(wǎng)頁(yè)界面設(shè)計(jì)師提供了豐富的字體選擇空間，在處理標(biāo)題性文字和說(shuō)明性文字時(shí)可以不同類型的字體加以區(qū)分?！?/p>

除了字體之外，字號(hào)級(jí)數(shù)在界面中也具有不可忽視的作用，它同樣可以達(dá)到區(qū)分文字功能的目的?！?/p>

適當(dāng)?shù)淖痔?hào)級(jí)數(shù)是保證文字的識(shí)別性和易讀性的重要條件?！?/p>

通常，人在計(jì)算機(jī)前眼睛距離屏幕為50～80公分，這就要求界面中所用的字符規(guī)格應(yīng)該限制在一定范圍之內(nèi)，過(guò)小或過(guò)大的字號(hào)級(jí)數(shù)都不便瀏覽?！?/p>

計(jì)算機(jī)對(duì)字符的級(jí)數(shù)作了詳細(xì)的劃分，并通過(guò)軟件可以達(dá)到字符級(jí)數(shù)的無(wú)極縮放功能（如在CorelDRAW中拖動(dòng)字符可隨意改變大?。??！oint，即常說(shuō)的“磅”數(shù)，是字符規(guī)格的基本單位，常用的規(guī)格有6P、7P、8P、9P、10P、12P、14P、18P、20P、24P、30P、36P、42P、48P、60P、72P等?！ぁ銇?lái)說(shuō)，屏幕上10P～14P的字符適用于說(shuō)明性文字，18P以上的字符適用于標(biāo)題性文字，小于9P的文字在屏幕上不易閱讀?！?/p>

標(biāo)題文字通常大于正文文字，這是平面設(shè)計(jì)中的一般規(guī)律?！?/p>

但這一點(diǎn)并非絕對(duì)的規(guī)定，應(yīng)根據(jù)具體情況靈活掌握?！?/p>

有時(shí)將這一規(guī)律反轉(zhuǎn)應(yīng)用，反而能夠獲得新穎獨(dú)特的界面效果?！?/p>

不同字號(hào)級(jí)數(shù)配合上相同的字體，會(huì)給人造成不同的心理印象，相同字號(hào)級(jí)數(shù)的不同字體也會(huì)產(chǎn)生不同的心理效果，在設(shè)計(jì)中需要依靠設(shè)計(jì)師的經(jīng)驗(yàn)去加以把握，如圖5-19所示。5.3.2字符間距·

中國(guó)書法藝術(shù)講布白、求行氣，字里行間形成的黑白對(duì)比關(guān)系是體現(xiàn)書法藝術(shù)美感的重要表現(xiàn)因素。·

界面設(shè)計(jì)中文字依靠行距字間的寬窄程度處理，可以產(chǎn)生空間指引作用并達(dá)到類似于書法藝術(shù)中文字布局的藝術(shù)美感?！?/p>

字符的字距和行距是決定文字易讀性的重要因素，通常所說(shuō)的讀竄了行，就是由于行距過(guò)窄或文字過(guò)密造成的。·

界面中正文的字距通常采用“密距”，即設(shè)定字符間隔為0，而標(biāo)題和指示性文字的間距可以根據(jù)需要自行設(shè)定，沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)?！?/p>

從閱讀習(xí)慣來(lái)看，界面中中文正文的字符數(shù)每行為20～35個(gè)較為適宜，西文則約40～70個(gè)字符最容易閱讀?！?/p>

每行少于此數(shù)會(huì)造成瀏覽者視線頻繁移行，多于此數(shù)則會(huì)使人目光作長(zhǎng)距離水平移動(dòng)而感到疲倦，因此較寬的文字幅面可考慮采用分欄的排布方式?！?/p>

中文正文的行距一般在半個(gè)字高（半方）和一個(gè)字高（全方）之間?！?/p>

計(jì)算方式為從上一行文字頂端到下一行文字頂端?！?/p>

所以設(shè)定時(shí)行距通常定為字高的150%～200%，除非特殊需要，一般最大不超過(guò)200%?！?/p>

西文的行距通常小于中文行距?！?/p>

標(biāo)題和篇幅較短的文本可以采取較為自由的形式?！?/p>

不同的字符間距在視覺(jué)上給人以不同的心理印象，設(shè)計(jì)時(shí)要加以注意，針對(duì)不同需求而設(shè)定或松或緊的差異性效果，同時(shí)應(yīng)當(dāng)避免因過(guò)度擁擠而影響瀏覽者的閱讀興趣，如圖5-20所示。5.4文字的編排設(shè)計(jì)·

以文字表現(xiàn)為中心的編排設(shè)計(jì)，是網(wǎng)頁(yè)界面達(dá)成視覺(jué)信息傳達(dá)功能的重要手段?！?/p>

文字編排設(shè)計(jì)以傳播效率為首要目的，要求做到易看易懂，一目了然地傳達(dá)信息是設(shè)計(jì)的根本原則?！?/p>

文字編排設(shè)計(jì)除了傳達(dá)功能外，還可以像一般藝術(shù)創(chuàng)作那樣具有表現(xiàn)情感的能力?！?/p>

在現(xiàn)代繪畫中，勃拉克和畢加索最早把文字作為藝術(shù)材料應(yīng)用于繪畫作品中，他們認(rèn)為：“詞句和文章不應(yīng)僅僅用于閱讀，只要順便地反射到觀眾的眼睛里，一瞥而過(guò)就行了?！薄?/p>

文字的實(shí)體字群與留白虛空間的對(duì)比，以及文字在界面上產(chǎn)生的灰色值，能夠給人心理上和情感上造成愉快或壓抑的不同反應(yīng)?！?/p>

這種反應(yīng)如果與文字內(nèi)容所傳播的信息相一致，會(huì)起到增強(qiáng)作品感染力的作用?！?/p>

以文字為創(chuàng)作元素的平面設(shè)計(jì)作品十分常見，圖5-21所示即為幾幅設(shè)計(jì)名家的作品。5.4.1文字編排的規(guī)律·

文字編排應(yīng)當(dāng)注重界面上下、左右空間和面積的經(jīng)營(yíng)，易于瀏覽并創(chuàng)造形式美感?！?/p>

通常應(yīng)根據(jù)設(shè)計(jì)的目的選擇適當(dāng)?shù)淖煮w，運(yùn)用對(duì)比、協(xié)調(diào)、節(jié)奏、韻律、比例、平衡、對(duì)稱等形式創(chuàng)造法則，構(gòu)造特定的表現(xiàn)形式，以達(dá)到更具感染力的傳播信息的目的。1．對(duì)比·

界面的空間排布美感是在對(duì)比中產(chǎn)生的?！?/p>

通過(guò)對(duì)比可以突出主要成分，使界面主要信息一目了然?！?/p>

主要的手法有以下幾種：

（1）大小對(duì)比（2）粗細(xì)對(duì)比（3）明暗對(duì)比（4）疏密對(duì)比（5）主從對(duì)比（6）綜合對(duì)比2．統(tǒng)一與協(xié)調(diào)·

在網(wǎng)頁(yè)界面設(shè)計(jì)中，統(tǒng)一與協(xié)調(diào)也是創(chuàng)造形式美感的重要法則。·

優(yōu)秀設(shè)計(jì)作品中的文字編排，都給人以完整協(xié)調(diào)的視覺(jué)印象?！?/p>

尤其是在使用對(duì)比手法時(shí)，過(guò)分強(qiáng)調(diào)對(duì)比關(guān)系、空間對(duì)比過(guò)大或各種對(duì)比元素混用，會(huì)導(dǎo)致界面的混亂。·

為了使界面中各種元素協(xié)調(diào)起來(lái)，通常采用的手法是選取同類的造型因素?！?/p>

有相同形態(tài)特征的造型因素在界面中反復(fù)出現(xiàn)，就會(huì)形成統(tǒng)一的調(diào)子，使整個(gè)界面具有整體感，從而達(dá)到協(xié)調(diào)的目的。·

如字體選用同一字族的不同字體，以相同的字距和行距，選用近似色彩和字號(hào)級(jí)數(shù)，控制近似面積等都是實(shí)現(xiàn)界面統(tǒng)一和協(xié)調(diào)的常用方法。·

如果造型因素本身帶有動(dòng)感，可以將各因素的運(yùn)動(dòng)方向設(shè)定為相同方向，或添加輔助元素來(lái)形成統(tǒng)一的視覺(jué)印象?！?/p>

圖5-28所示的界面設(shè)計(jì)作品為對(duì)比中求得統(tǒng)一的具有協(xié)調(diào)和整體感的設(shè)計(jì)實(shí)例。3．平衡

·

平衡指在界面中合理地安排各個(gè)文字群及視覺(jué)現(xiàn)象，使瀏覽者產(chǎn)生穩(wěn)定可靠的感覺(jué)?！?/p>

界面中文字編排要求視覺(jué)上產(chǎn)生類似于天平平衡的印象?！?/p>

失去平衡的文字編排設(shè)計(jì)，將得不到瀏覽者的信賴，并給人以粗劣的印象?！?/p>

對(duì)稱的文字編排形式是獲得平衡最基本的手段，但對(duì)稱的形式顯得平淡乏味，沒(méi)有生命力和趣味感，通常不宜采用。·

界面中的平衡是要求動(dòng)勢(shì)中的平衡，利用巧妙的手法加強(qiáng)布局中較弱的一方，是界面中求取平衡的最佳手法?！?/p>

圖5-29所示為變化中獲得平衡的設(shè)計(jì)實(shí)例。

4．節(jié)奏與韻律·

節(jié)奏與韻律由于具有活躍的運(yùn)動(dòng)感，是形成輕松活潑的形式美感的重要方法?！?/p>

界面中反復(fù)出現(xiàn)有特征的文字造型并按照一定的規(guī)律排列，就會(huì)產(chǎn)生強(qiáng)烈的節(jié)奏和韻律?！?/p>

節(jié)奏和韻律也是界面條理性的表現(xiàn)，強(qiáng)調(diào)文字的節(jié)奏感與韻律感，有利于界面形式的協(xié)調(diào)統(tǒng)一?！?/p>

同一特征的文字造型多次連接排列，或相同造型由大到小、由密而疏有秩序地出現(xiàn)，都會(huì)形成節(jié)奏與韻律?！?/p>

即使不同的造型因素，只要按一定規(guī)律來(lái)排布，甚至特征明顯的文字造型僅僅出現(xiàn)兩次，都可以產(chǎn)生節(jié)奏與韻律?！?/p>

圖5-30所示為富有節(jié)奏與韻律感的網(wǎng)頁(yè)界面設(shè)計(jì)作品。5．視覺(jué)誘導(dǎo)·

在界面的文字編排中，必須遵循視覺(jué)運(yùn)動(dòng)的法則，使一部分文字首先接觸瀏覽者的視線，然后誘導(dǎo)視線依照設(shè)計(jì)師安排好的結(jié)構(gòu)形式順序?yàn)g覽，從而達(dá)到順暢傳遞信息的目的。·

視覺(jué)誘導(dǎo)主要可以通過(guò)以下幾種方式實(shí)現(xiàn)：

（1）線的引導(dǎo)（2）圖形的引導(dǎo)5.4.2文字編排設(shè)計(jì)的手法·

對(duì)于網(wǎng)頁(yè)界面整體而言，文字編排有若干相對(duì)規(guī)律性的設(shè)計(jì)手法?！?/p>

不同面積、不同份量的文字群體在界面中合理配置，形成字與留白、字與字、群與群以及字與背景和圖形的相互映襯，從而構(gòu)成穩(wěn)定、完整而具有活力的界面形式。·

常用的手法有以下幾種：1．控制界面四角與對(duì)角線·

界面的四角具有潛在的重要性?！?/p>

四角是表示界面邊界的四個(gè)點(diǎn)?！?/p>

在四角配置文字或符號(hào)，界面的勢(shì)力范圍就明確地確定下來(lái)，界面中即使存在讓人感覺(jué)動(dòng)蕩不定的元素也會(huì)因此而穩(wěn)定下來(lái)。·

把界面四角連接起來(lái)的是對(duì)角線，對(duì)角線的交叉點(diǎn)是界面的中心點(diǎn)，這個(gè)中心點(diǎn)是潛在于界面之中的基本點(diǎn)和視覺(jué)中心。·

以控制界面的四角和對(duì)角線作為界面文字編排的基本手法，會(huì)使瀏覽者產(chǎn)生一種穩(wěn)定、可靠的視覺(jué)感受。2．將文字以線或面的形式加以構(gòu)成·

界面中的文字往往不是以單個(gè)字符的形式出現(xiàn)，而是以字群方式存在?！?/p>

把若干文字排列起來(lái)，就形成了線或面，可以按照平面構(gòu)成的方式進(jìn)行編排處理?！?/p>

按事先設(shè)定的幾何圖形的輪廓來(lái)編排文字的構(gòu)成，可以使界面形式顯得新穎活潑，如圖5-34所示。3．文字造型參差錯(cuò)落·

為使界面產(chǎn)生活潑、有趣味的微妙效果，可以在完整的文字編排形式中安排部分非規(guī)律性造型以形成錯(cuò)落變化?！?/p>

使用這一手法時(shí)應(yīng)當(dāng)注意，錯(cuò)落的程度或在界面中所占面積如果過(guò)大反而會(huì)減弱效果，使造型顯得混亂，因而必須謹(jǐn)慎選擇錯(cuò)落出現(xiàn)的位置和幅度。·

一般而言，錯(cuò)落應(yīng)出現(xiàn)在周圍有較充分的留白空間的場(chǎng)所，效果較為顯著，如在界面中央或正上方表現(xiàn)效果較好?！?/p>

標(biāo)題性文字往往多用此手法處理，在框線中加入文字以及文字位置錯(cuò)落均較為常見，如圖5-35所示。4．文字中加入雜音·

所謂文字中加入雜音，即指將文字符號(hào)與其他構(gòu)成元素疊加使用，往往會(huì)產(chǎn)生意料之外的趣味感，使界面達(dá)到令人耳目一新的視覺(jué)效果?！?/p>

加入雜音的手法有下列幾種：

（1）圖形與文字的疊加（2）文字與文字的疊加（3）文字邊緣的處理（4）文字的缺損與破裂5．分離排列·

將屬于一個(gè)文字群體的字符獨(dú)立出來(lái)加以排列，也是一種引人注目的編排方法，可以使界面活潑而富有情趣。·

分離排列出現(xiàn)于70年代的后半期，在平面設(shè)計(jì)作品中較為常見，是具有現(xiàn)代裝飾美感的文字編排手法，如圖5-37所示。5.4.3文字群體的編排·

文字群體的主體是說(shuō)明性文字，也就是常說(shuō)的正文。·