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

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

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

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

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

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

2、頁面的通透性

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

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

3、頁面的配色方案

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

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

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

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

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

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

4、頁頭和頁尾

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

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

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