第5章 網頁介面中文字的編排設計

以語言進行資訊傳達時，語氣、語調以及面部表情、姿態手勢是語言的輔助和補充，而在介面設計中，文字的字型、規格及其編排形式，就相當於文字的輔助資訊傳達手段。

宋體字型結構方中有圓，剛柔相濟，既典雅莊重，又不失韻昧靈氣，從視覺角度來說，宋體閱讀最省目力，不易造成視覺疲勞，具有很好的易讀性和識別性。

楷體字型柔和悅目，間架結構舒張有度，可讀性和識別性均較好，適用於較長的文字段落，也可用於標題。

仿宋體筆畫粗細均勻，秀麗挺拔，有輕快、易讀的特點，適用於文字段落。因其字型娟秀，力度感差，故不宜用作標題。

黑體不僅莊重醒目，而且極富現代感，因其形體粗壯，在較小字型級數時宜彩等線體（即細黑），否則不易識別。

圓體視覺衝擊力不如黑體，但在視覺心理上給人以明亮清新、輕鬆愉快的感覺，但其識別性弱，故只適宜作標題性文字。

手寫體分為兩種，一種來源於傳統書法，如隸書體，行書體，另一種是以現代風格創造的自由手寫體，如廣告體，POP體。手寫體只適用於標題和廣告性文字，長篇文字段落和小字型級數時不宜使用，應儘量避免在同一頁面中使用兩種不同的手寫體，因為手寫體形態特徵鮮明顯著，很難形成統一風格，不同手寫體易造成介面雜亂的視覺形象，手寫體與黑體宋體等規範的字型相配合，則會產生動靜相宜，相得宜彰的效果。

美術體是在宋體、黑體等規範字體基礎上變化而成的各種字型，如綜藝體、琥珀體。美術體具有鮮明的風格特徵，不適於文字段落，也不宜混雜使用，多用於字型級數較大的標題，發揮引人注目，活躍介面氣氛的作用。

拉丁字母依據其基本結構可以分為三種類型：

（1）飾線體（Serif）：此類字型在筆畫末端帶有裝飾性部分，筆畫精細對比明顯，與中文的宋體具有近似形態特徵，飾線體在閱讀時具有較好的易讀性，適於用作長篇幅文字段落。代表字型是新羅馬體（Times New Roman）。
（2）無飾線體（Sans Serif）：筆畫的粗細對比不明顯，筆畫末端沒有裝飾性部分，字型形態與中文的黑體相類似。由於其筆畫粗細均勻，故在遠距離易於辨認，具有很好的識別性，多用於標題和指示性文字。無飾線體具有簡潔規整的形態特徵，符合現代的審美標準。代表字型是赫爾維梯卡體（Helvetica）。
（3）裝飾體（Decorative，也稱Display）：即通常所說的“花”體，由於此類字型信箋於形式的裝飾意味，閱讀時較為費力，易讀性較差，只適合於標題或較短文字，類似於中文的美術體和手寫體。代表字型是草體（Script）。

在某些特殊場合，如廣告或展示性的短語中，拉丁字母全部使用小寫字母，能夠造成一種平易近人的親切感。

拉丁字母字型大都包含字幅（正、長、扁）、黑度（細、粗、超粗）、直斜的變化，因而由一種基本字型可以變化出多種具有相似特徵的同族字型，這些字型統稱為“字族”。

同一頁面中字型應儘量在同一字族中選用，以保證介面具有明確、統一的風格特徵。

在計算機字型檔中，有關字型特徵的表示大多彩縮略語，如Cn(Condensed，長體)，Ex(Expanded，扁體)，Lt(Light，細)，Med(Medium，中粗)，DemBol或Dm(Demi Bold，半粗)，Bd(Bold，粗)，XBd(Extra Bold，特粗)，It(Italic，斜體)等。

中文正文的字元數每行以20-35個為宜，西文則約40-70個字元最易閱讀，因此較寬的文字幅面應考慮採用分欄的排布方式。

通常設定行距為字高的150-200%，西文的行距通常小於中文行距。

粗細對比是剛與柔的對比，也有人稱之為男性性格與女性性格的對比。在同一行文字中使用粗細對比的效果最為強烈。粗字少細字多易取得平衡，給人以明快新穎的感覺，細字少粗字多，則不易平衡，但往往會產生具有幽默感的特殊效果。

介面中文字編排要求視覺上產生類似於天平平衡的印象，失去平衡的文字編排設計，將得不到瀏覽者的信賴，並給人以粗劣的印象。

可能通過左右延伸的水平線，上下延伸的垂直線，動感的弧線和斜線，穿插的圖形來誘導視線依照設計師安排好的結構形式順序瀏覽。

在介面的四角配置文字或符號，介面的勢力範圍就明確地確定下來，介面中即使存在讓人感覺動盪不定的元素也會因此而穩定下來。在四角中，左上和右下具有特殊的吸引力，是處理的重點，處理得好，可以使介面左右均衡，同時還會形成從左上到右下沿對角線流動的視覺過程，給人以自然穩定的感覺。

非規律性造型形式的錯落變化，應出現在周圍有較充分的留白空間的場所，效果較為顯著。如在介面中央或正上方表現效果較好，標題性文字往往使用此手法處理。

分欄式結構中，文字群體通常只出現在一欄中，每行的字元數相對較少，易於瀏覽。分欄中如果都排布文字群體，介面會顯得十分擁擠，故不宜採用。其他欄中可設定目錄、標題、導航等簡潔的文字資訊，整體形式繁簡對比，疏密得當。國內使用較多的是三分欄，國外四分欄式結構則較為普遍。

第6章 網頁介面中版式的構成與設計

網頁介面中除了點、線面這些實體造型元素，其餘的空間就是“空白”，空白不一定是“白”，它可以是與背景色相同的表示“虛”的空間範圍。空白能使實體在視覺上產生動態，獲得張力。在中國傳統繪畫中，空白的表現力豐富，同時又使筆墨生支靈妙，無怪乎古人所說“形得之於形外”，“計白守黑”。頁面中巧妙地留白，講究空白之美，有助於更好地烘托主題，渲染氣氛，集中視線，加強空間層次，使版面疏密有序，佈局清晰。

黃金之比所以有如此神聖和不可思議的力量，乃是因為黃金比是含有無理數 的數字，用公式表示為Φ=（1+ ）/2約=1.618。黃金矩形去掉短邊為邊長的正方形時，剩下的矩形仍為黃金矩形。

以正方形的對角線為長邊，所得矩形為 矩形，再以 矩形的對角線為長邊，所得矩形為 矩形，以此類推，可以得到任意自然數的 矩形。 矩形對摺成半時，面積雖然只剩一半，但形狀不變，仍是 矩形。

網頁介面的版式設計中，其比例關係一般體現在：頁面所限定空間的長寬比，實體內容與虛空間（空白）的面積比，頁面被分割的比例，圖文的關係比以及各造型元素內部的比例等形式上的數量關係。

對稱的版式設計穩定、莊嚴、整齊、秩序、安寧、沉靜，如同中國古代宮殿一樣莊重、嚴肅，體現了一種古典主義的風格。為避免對稱產生的單調和呆板，要在對稱中略帶變化。

視覺藝術中的節奏和韻律來自音樂的概念，節奏較多地強調“節拍”，韻律較多地強調“變化”，如果說韻律感不夠，是指缺少變化，過於呆板；如果說節奏感不強，是指變化缺乏條理規則。

對比是指因多種元素相異的特點相比較而更加鮮明強烈的緊張感。對比有形的對比（大小、方圓、長短、曲直、寬窄），色的對比（色相、明度、純度、冷暖），質的對比（剛柔、粗細、強弱、乾溼、輕重、軟硬、虛實），勢的對比（疾緩、疏密、動靜、抑揚、進退）等。對比關係越清晰，視覺效果就越強烈，在一個頁面中，通常是多種對比關係同時並存，以產生多姿多彩的表現效果。

人眼的視線沿水平方向運動比沿垂直方向運動快而且不易疲勞。視線的變化習慣於從左到右，從上到下和順時針方向運動。

調查顯示，視區內上部比下部注目程度高，左側比右側更引人注意。

欲使網頁在傳遞視覺資訊時順暢高效，頁面須具備清晰的條理性和組織性，產生一定的主從關係。常採取的方式有：

（1）加強主從物件的大小對比。
（2）加大主體形象周圍的空白。
（3）加強主從物件之間的色彩對比。
（4）將主體形象在頁面反覆出現，強化與視線的接觸頻率，這種強化方式尤其適合於以產品為主體形象的網頁介面。
（5）加強主從物件在形態上“勢”的對比。一般來說，網頁的版面中水平或垂直的形態居多，如果主體形象運用適當的斜線和曲線，就會從水平、垂直線構成的環境中突顯出來。

通過視覺流程，設計師運用視覺移動規律，將多種視覺資訊進行有序組織，誘導瀏者的視線依設計師的意圖進行流動，從而使瀏覽者清晰、流暢、快捷地接受最佳資訊。視覺流程的幾種表現方式：

（1）單向視覺流程：橫向，豎向，斜向。
（2）曲線視覺流程。
（3）導向視覺流程：藉助誘導因素來實現。
　　　①線形導向：以線、文字等線形元素來引導觀者的視線。
　　　②形象導向：以圖片中人或物的朝向來引導觀者的視線，如人物的目光方向，一個座椅的朝向等。
　　　③指示導向：通過指示性的箭頭、手指或具有透視感的線條來引導視線。
（4）重心視覺流程：視覺會沿著形象方向與力度的伸展來變換、運動，如表現向心力或重力的視線運動。
（5）反覆視覺流程：其運動雖不如單向、曲線、重心視覺流程運動感強烈，但更富於節奏和秩序美。
（6）散點視覺流程：沒有固定的視覺流動線，強調一種感性、自由性、隨意性、偶然性。

對於欄目設定比較複雜的網站，如果顯示所有與該頁相關的導航，頁面勢必變得相當龐大，影響了版面的整體佈局。最好的辦法是將此頁面做成彈出視窗，不影響原有頁面的導航資訊，同時只設置與該頁關係最近的導航連結和首頁連結。

在視覺習慣上，頁面的垂直均勻分割，當左右兩部分形成強烈對比時，會造成視覺心理的不平衡。這時，可將分割線作部分或全部的弱化處理，或在分割處加入其他元素，使左右部分的過渡自然而和諧。

第7章 網頁介面中的動畫設計

週期、關鍵幀和行為被稱為動畫的三個屬性。

使用簡單的GIF動畫生成的廣告圖形，點選率會上升10%-25%，而動畫廣告的面積平均比靜態廣告小5%-25%。

動畫由於在資訊的方向性誘導方面的優勢，除了能夠加強視線在視覺傳達領域的注意外，在引導視線方面能夠發揮更大的能動性，引導視線完全按照設計師的意圖去瀏覽，以最快捷的途徑，最有效的感知方式獲取視覺資訊，使設計師能夠更有效地影響瀏覽者的視線運動軌跡。

當人們面對平面上一些靜止的物體時，會在它們之間平分其注意力，如果其中一個物體突然動起來，所有的注意力在1/5秒後都將轉向它。

人的正常視覺容量約為每秒25位元，即大約每秒4個漢字，每分鐘約250個字左右。

動畫表達追求的是資訊的準確傳達，意念的清晰易懂。而做到這一點取決於兩個方面：一是動畫本身有好的表現手法和設計，使每一個畫面或主要變化以最清楚和最有效的方式呈現出來；二是好的時間掌握。畫面轉換的時間要恰到好處，太慢則感覺節奏緩慢，在裡面尋找不到興奮點，視覺心理就會感覺空洞、單調，使注意力分散；太快則瀏覽者還沒看清要傳達的資訊，動作已經結束，創意沒有意義，設計也就失敗了。

一般一個頁面有1-2個動畫區域是比較適度的。如果在頁面上必須出現不止一個動畫，也應給予較大的區別，如採用面積的大小對比，或使動畫的演示有時間差別等。

常見的動畫設計效果：

（1）色彩迴圈動畫
（2）元素沿直線或曲線的滾動
（3）元素的跳動與閃動。在跳動後保持5-10秒的靜止，這樣跳動吸引瀏覽者的視線，靜止則使瀏覽者能看清影象。
（4）元素的淡入與淡出。
（5）元素飛入畫面。
（6）元素的緩慢旋轉，通常旋轉幾周後就停頓一會兒。
（7）元素的爆炸與組合。
（8）閃爍和燈光效果。
（9）元素之間的過渡與變形。將一幅圖象的部分或整體毫無痕跡地融入另一幅圖象中。