網(wǎng)頁美工設(shè)計(jì)

網(wǎng)頁設(shè)計(jì)師必須要學(xué)習(xí)的視覺層級技巧

編輯：時間：2018-03-09 08:42:09

　　5、使用黃金比例

　　我們最新的文章中專門有一篇是介紹黃金比例在設(shè)計(jì)中的運(yùn)用。不同尺寸的元素有一個精確的比例在審美上被認(rèn)為是看起來最舒服的，這個比例是1:1.618，經(jīng)常被繪制成一個貝殼形的螺旋，你可能看到過。

　　設(shè)計(jì)師在繪制草稿階段就經(jīng)常使用黃金比例，這有助于規(guī)劃排版架構(gòu)，以適合的比例縮放用戶界面元素，使用戶看起來舒適。

　　6、使用網(wǎng)格

　　網(wǎng)格是個用于設(shè)計(jì)不同階段的關(guān)鍵工具，也包括建立視覺層級的階段。網(wǎng)格有助于組織組件，使它們以合適的尺寸和比例呈現(xiàn)，而且能幫助設(shè)計(jì)師有效處理負(fù)形，因?yàn)榫W(wǎng)格展示了元素是否按比例放置。

　　7、添加一些顏色

　　顏色的選擇和組合對視覺層級來說很有必要，因?yàn)樗鼈兡軒椭脩糇R別核心元素。顏色有它們自己的層級，在用戶心里具有影響力。有像紅色、橙色這樣很強(qiáng)的顏色，也有像白色、米色這樣很弱的顏色。強(qiáng)烈的顏色很容易被注意到，所以設(shè)計(jì)師經(jīng)常用來突出元素，增強(qiáng)對比。

　　把一種顏色運(yùn)用到幾個元素上，你會發(fā)現(xiàn)它們在某種程度上是有聯(lián)系的。比如，如果你選擇了一個紅色購買按鈕，當(dāng)用戶需要的時候，能憑直覺找到。

　　8、注意字體

　　視覺層級包括一個核心分支叫做排版層級。通過修改和組合文字，排版層級旨在形成起最有意義、最突出文字信息和普通文字信息之間對比。通過調(diào)節(jié)字體大小、顏色、字重和對齊關(guān)系來實(shí)現(xiàn)字體的轉(zhuǎn)換。不同的字體能將文字信息分割成不同的層級，以便用戶可以逐漸感知信息。不過，字體盡量控制在3種以內(nèi)，因?yàn)槭褂锰嘧煮w會顯得頁面很雜亂，設(shè)計(jì)不協(xié)調(diào)。

　　9、Web三層級和移動兩層級

　　如上所說，不同的字體形成了排版的優(yōu)先級，排版層級由標(biāo)題、次標(biāo)題、文本、按鈕和說明文字等構(gòu)成。有3個排版優(yōu)先級：第一、第二和第三層級。第一級包含最大的類型，旨在把用戶注意力吸引到屏幕的核心信息。第二級提供容易瀏覽的文本元素，幫助用戶引導(dǎo)到內(nèi)容上。第三級適用于正文文本，通過相對小的類型展示一些額外的數(shù)據(jù)。

　　很多情況下，web產(chǎn)品包括3個層級，因?yàn)槟苷故靖嗟男畔ⅰＡ硪环矫妫谝苿佣嗽O(shè)計(jì)上建議設(shè)計(jì)師保留2個層級。小屏不能為3個層級提供足夠空間，所以像次標(biāo)題這種第2層級的元素要放在一邊，讓頁面設(shè)計(jì)更加簡潔。

2/3 首頁上一頁 1 2 3 下一頁尾頁

<< 上一篇：響應(yīng)式網(wǎng)頁設(shè)計(jì)的9項(xiàng)基本原則

>> 下一篇：網(wǎng)頁設(shè)計(jì)中的css用法特點(diǎn)注意事項(xiàng)

推薦資訊