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

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

課堂學習目標：

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

熟悉常用字體的特征

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

掌握文字群體的編排·

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

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

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

只通過圖形來傳遞信息常常不能達到最佳的傳達效果，須借助文字才能進行最有效的說明。·

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

眾多構(gòu)成要素中文字具有最佳的直觀傳達作用以及最高的明確性。·

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

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

通過設計與編排，文字的存在價值在界面中應體現(xiàn)為提高信息的明確程度與可讀性，加強界面的藝術(shù)性與視覺感染力，從而獲得良好的視覺傳達效果。·

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

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

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

文字的主要功能在于傳達外形特征以便瀏覽者識別，保證信息的準確傳遞?！?/p>

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

文字的形態(tài)及編排設計能夠提高界面的易讀程度。·

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

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

文字可以通過自身形象的個性與風格給人以美的感受，使界面更加美觀?！?/p>

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

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

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

文字作為視覺形式的信息傳達符號，同一文字體系中包含有多種不同的字體?！?/p>

在達成利于閱讀和傳遞特定信息的功能第一性的同時，文字可以通過不同字體所特有的藝術(shù)風格特征來傳達更多的信息，并形成各具特色的視覺效果。·

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

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

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

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

設計師在字體上的選擇范圍是非常廣闊的，并且這個范圍還在不斷擴大。5.2.1中文字體·

網(wǎng)頁界面中使用的中文字體主要是漢字字體?！?/p>

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

漢字的形態(tài)、風格是字體的特有屬性，不同的字體會給瀏覽者造成不同的心理印象?！?/p>

在選用時要注意不同字體的不同用途，充分理解與掌握，恰當運用?！?/p>

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

下面就幾種常用字體做簡要的說明和分析：

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

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

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

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

拉丁字母雖然只有26個，但拉丁字母字體卻有數(shù)百種之多。·

計算機的普及應用更是為新字體誕生創(chuàng)造了有利的條件。·

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

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

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

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

5.3.1字號級數(shù)·

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

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

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

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

適當?shù)淖痔柤墧?shù)是保證文字的識別性和易讀性的重要條件?！?/p>

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

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

標題文字通常大于正文文字，這是平面設計中的一般規(guī)律。·

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

有時將這一規(guī)律反轉(zhuǎn)應用，反而能夠獲得新穎獨特的界面效果。·

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

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

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

字符的字距和行距是決定文字易讀性的重要因素，通常所說的讀竄了行，就是由于行距過窄或文字過密造成的?！?/p>

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

從閱讀習慣來看，界面中中文正文的字符數(shù)每行為20～35個較為適宜，西文則約40～70個字符最容易閱讀。·

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

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

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

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

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

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

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

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

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

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

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

文字的實體字群與留白虛空間的對比，以及文字在界面上產(chǎn)生的灰色值，能夠給人心理上和情感上造成愉快或壓抑的不同反應。·

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

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

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

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

界面的空間排布美感是在對比中產(chǎn)生的。·

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

主要的手法有以下幾種：

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

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

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

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

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

有相同形態(tài)特征的造型因素在界面中反復出現(xiàn)，就會形成統(tǒng)一的調(diào)子，使整個界面具有整體感，從而達到協(xié)調(diào)的目的?！?/p>

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

如果造型因素本身帶有動感，可以將各因素的運動方向設定為相同方向，或添加輔助元素來形成統(tǒng)一的視覺印象。·

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

·

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

界面中文字編排要求視覺上產(chǎn)生類似于天平平衡的印象。·

失去平衡的文字編排設計，將得不到瀏覽者的信賴，并給人以粗劣的印象。·

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

界面中的平衡是要求動勢中的平衡，利用巧妙的手法加強布局中較弱的一方，是界面中求取平衡的最佳手法?！?/p>

圖5-29所示為變化中獲得平衡的設計實例。

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

節(jié)奏與韻律由于具有活躍的運動感，是形成輕松活潑的形式美感的重要方法。·

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

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

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

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

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

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

視覺誘導主要可以通過以下幾種方式實現(xiàn)：

（1）線的引導（2）圖形的引導5.4.2文字編排設計的手法·

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

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

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

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

四角是表示界面邊界的四個點?！?/p>

在四角配置文字或符號，界面的勢力范圍就明確地確定下來，界面中即使存在讓人感覺動蕩不定的元素也會因此而穩(wěn)定下來?！?/p>

把界面四角連接起來的是對角線，對角線的交叉點是界面的中心點，這個中心點是潛在于界面之中的基本點和視覺中心。·

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

界面中的文字往往不是以單個字符的形式出現(xiàn)，而是以字群方式存在。·

把若干文字排列起來，就形成了線或面，可以按照平面構(gòu)成的方式進行編排處理。·

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

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

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

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

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

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

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

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

將屬于一個文字群體的字符獨立出來加以排列，也是一種引人注目的編排方法，可以使界面活潑而富有情趣?！?/p>

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

文字群體的主體是說明性文字，也就是常說的正文?！?/p>