網(wǎng)頁(yè)設計技巧:用戶(hù)體驗設計和UI設計發(fā)布者：本站     時(shí)間：2020-05-23 11:05:34

1、常規的頁(yè)面布局

常規上來(lái)說(shuō)，我們把網(wǎng)頁(yè)布局按照分欄的多少分為一欄式，二欄式和三欄式。

對于一欄式頁(yè)面布局來(lái)說(shuō)，一般在頁(yè)面上放置一個(gè)具有沖擊力的圖片或者Flash來(lái)給用戶(hù)留下深刻的印象，但是，這樣的頁(yè)面所能夠容納的信息量非常有限。所以常用于企業(yè)網(wǎng)站，以及一些小網(wǎng)站的首頁(yè)，用于讓用戶(hù)記住你的站。此外，對于功能性比較單一的頁(yè)面，也一般用一欄式布局，比如搜索引擎，注冊和登錄頁(yè)面等等。

二欄式布局是最為常見(jiàn)的布局方式，二欄式又分為左寬右窄和左窄右寬式。這兩種模式的選擇是由于網(wǎng)站的性質(zhì)所決定的。對于用戶(hù)來(lái)說(shuō)，他的瀏覽關(guān)注順序是從左到右，那么窄的部分一般來(lái)說(shuō)都是導航欄，而寬的部分則是主體內容部分，那么用哪一種方式將取決于你的站是內容占主體還是導航占主體，換句話(huà)說(shuō)，是內容驅動(dòng)導航還是導航來(lái)驅動(dòng)內容。

舉個(gè)例子，拿當當網(wǎng)來(lái)說(shuō)，一般用戶(hù)來(lái)買(mǎi)東西是有著(zhù)明確目的的，他知道自己要買(mǎi)的東西是哪個(gè)類(lèi)別，而對于主站的內容只是給用戶(hù)的一個(gè)推薦。但是對于cnblogs來(lái)說(shuō)，顯然內容應該是大于導航的。所以其實(shí)在我看來(lái)，博客園的設計其實(shí)是并不合理的。

2、頁(yè)面的通透性

頁(yè)面的通透性是指盡量使整個(gè)頁(yè)面的模塊比例統一，同時(shí)通過(guò)線(xiàn)條，顏色等視覺(jué)元素增加各模塊間的區分度，使得用戶(hù)的視線(xiàn)軌跡可以有規則地通過(guò)各個(gè)模塊，而不會(huì )被模塊之間不規則的交叉所打斷。

此外，根據“F”原則，也應該盡量將重要地，用戶(hù)所關(guān)系地內容放在頁(yè)面的左上角位置。

3、頁(yè)面的配色方案

每個(gè)網(wǎng)站都要有自己的主色調，主色調指的就是頁(yè)面色彩的主要色調，總趨勢，其他配色的綜合不能超過(guò)主色調的50%（白色背景除外）。

在選擇顏色的時(shí)候，不僅僅要考慮顏色本身所代表的含義，如安全，浪漫等，還有考慮以下幾種因素。

A. 目標用戶(hù)群體。不同的用戶(hù)群體對于顏色的審美愛(ài)好以及理解都不同，其中包括性別，年齡，職業(yè)等。

B. 當地文化風(fēng)俗。如中國把紅色作為喜慶的顏色，而歐洲大部分卻把紅色作為殺戮的象征。

C. 網(wǎng)站的類(lèi)型。如電子商務(wù)站一般用暖色調來(lái)刺激用戶(hù)購買(mǎi)，而SNS站則營(yíng)造一個(gè)輕松的氛圍。而垂直類(lèi)網(wǎng)站一般都與自己的領(lǐng)域特色相關(guān)。

D. 品牌形象。我總結一句話(huà)就是根據自己的Logo以及企業(yè)形象來(lái)選擇色調。比如IBM就一定會(huì )選擇藍色作為主色調。

4、頁(yè)頭和頁(yè)尾

頁(yè)頭分為設計型頭部和簡(jiǎn)約型頭部。一般的大型網(wǎng)站，由于已經(jīng)有著(zhù)一定的網(wǎng)站知名度，所以無(wú)需在通過(guò)渲染頭部來(lái)提高網(wǎng)站對用戶(hù)的吸引力，加深印象。所以一般采用比較簡(jiǎn)單的簡(jiǎn)約型頭部，比如新浪，騰訊，都是這樣的效果。對于一些小網(wǎng)站來(lái)說(shuō)，采用設計性頭部給用戶(hù)留下深刻印象，創(chuàng )造品牌效應，但是當設計性頭部過(guò)于繁雜時(shí)，卻使得內容的容納量變小，從而造成一種頭重腳輕的感覺(jué)。所以這個(gè)需要設計師的一種折中。

在頁(yè)頭上最重要的就是Logo，在現代網(wǎng)站的設計中，Logo起到兩個(gè)作用，一個(gè)是標識，一個(gè)是讓用戶(hù)回到首頁(yè)。

頁(yè)尾一般來(lái)說(shuō)并不重要，用戶(hù)可到達的機會(huì )也少，所以盡量地去簡(jiǎn)化它，避免它占用內容所占據的位置。