義烏網(wǎng)站設(shè)計(jì)之網(wǎng)頁設(shè)計(jì)的視覺路徑和版式設(shè)計(jì)

2012-01-23　瀏覽：150
義烏網(wǎng)站設(shè)計(jì)之網(wǎng)頁設(shè)計(jì)的視覺路徑和版式設(shè)計(jì)

用戶瀏覽網(wǎng)站的視覺路徑一般是：從上到下，從左到右。好的視覺設(shè)計(jì)路徑應(yīng)該是順應(yīng)這樣的用戶習(xí)慣，糟糕的設(shè)計(jì)會讓用戶無所適從，焦點(diǎn)到處都是。

網(wǎng)站中方塊
    因?yàn)槿藗儚慕佑|信息以來，信息的呈現(xiàn)就是以方塊式存在：報(bào)紙、書，單個(gè)字成點(diǎn)，一行字成線，一段字成面，而這個(gè)面當(dāng)然是以方形呈現(xiàn)的效率最高。網(wǎng)站的視覺設(shè)計(jì)大部分其實(shí)都是在拼方塊。
網(wǎng)站中的方塊能很好地引導(dǎo)用戶的視覺路徑，用戶可以通過區(qū)塊來分辨這個(gè)區(qū)域的信息是否是自己需要的，從而可以迅速縮小范圍細(xì)致尋找或者瀏覽下一個(gè)區(qū)塊，比如yahoo的首頁，從大塊上來看，用戶很容易分辨出4個(gè)大區(qū)塊，每個(gè)區(qū)塊里面又有小的區(qū)塊。
1 方塊感越強(qiáng)越能給用戶方向感。
2 方塊越少越好。
3 盡量用留白做視覺區(qū)分。

對齊和間距
    視覺設(shè)計(jì)最簡單，也是最容易忽略的就是對齊。檢查的方法就是查看每個(gè)方塊中的邊線，方塊與方塊之間的邊線，尤其是縱向維度。
間距的一般規(guī)律：字距小于行距，行距小于段距，段距小于塊距。檢查的方法可以嘗試將網(wǎng)站的背景圖案、線條全部去掉，看是否還能保持想要的區(qū)塊感。
shijue3.jpg
拿淘寶的新首頁舉個(gè)細(xì)節(jié)的例子(右邊是我調(diào)整后的)。有時(shí)候我們不需要花心思做多么漂亮的圖標(biāo)和顏色搭配，用心地調(diào)整好網(wǎng)站的每一個(gè)像素或許也能讓它煥然一新。

主次關(guān)系
    怎么對用戶引導(dǎo)的關(guān)鍵就在于怎么處理主次關(guān)系。說白了就是對比，從視覺的角度上看：形狀的大小，顏色，擺放的位置都會影響信息的重要與否。
從大的區(qū)塊來看，不要平均分割頁面，三欄的設(shè)計(jì)應(yīng)該讓其中一欄明顯短一些。
從局部來看，也要把握信息呈現(xiàn)的節(jié)奏，比如yahoo中間新聞欄的設(shè)計(jì)，大圖帶大標(biāo)題是第一要點(diǎn)，小圖帶字是第二要點(diǎn)，純文本第三，節(jié)奏感、主次關(guān)系非常強(qiáng)。

常見問題

1 視覺設(shè)計(jì)師不懂代碼，前端設(shè)計(jì)師在視覺方面又不專業(yè)。常常是實(shí)現(xiàn)出來的產(chǎn)品跟視覺設(shè)計(jì)出來的圖片有所偏差。建議視覺設(shè)計(jì)師跟進(jìn)調(diào)整。
2 廣告圖片破壞視覺效果。如果網(wǎng)站足夠牛的話，可以讓廣告方遵循視覺規(guī)范。如果不行的話，起碼設(shè)計(jì)師還能決定廣告的尺寸，位置等等。

上一條: 義烏做網(wǎng)站三個(gè)方面決定網(wǎng)站是否發(fā)揮作用
下一條: 義烏網(wǎng)頁設(shè)計(jì)體驗(yàn)式網(wǎng)頁設(shè)計(jì)的關(guān)鍵點(diǎn)

新聞資訊

相關(guān)資訊