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

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

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

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

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

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

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

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

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

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

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

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

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

B. 當(dāng)?shù)匚幕L(fēng)俗。如中國(guó)把紅色作為喜慶的顏色，而歐洲大部分卻把紅色作為殺戮的象征。

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

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

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

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

在頁(yè)頭上最重要的就是Logo，在現(xiàn)代網(wǎng)站的設(shè)計(jì)中，Logo起到兩個(gè)作用，一個(gè)是標(biāo)識(shí)，一個(gè)是讓用戶回到首頁(yè)。

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