《網頁界面設計藝術教程》摘錄2

第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。黃金矩形去掉短邊爲邊長的正方形時,剩下的矩形仍爲黃金矩形。

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

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

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

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

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

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

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

http://static.flickr.com/55/109102299_1a226c1182_o.jpg

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

(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)元素之間的過渡與變形。將一幅圖象的部分或整體毫無痕跡地融入另一幅圖象中。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章