網站的視覺設計路徑應順應使用者習慣

來源:互聯網
上載者:User

cooper談到使用者的視覺路徑一般是:從上到下,從左至右。
好的視覺設計路徑應該是順應這樣的使用者習慣,糟糕的設計會讓使用者無所適從,焦點到處都是。
當然,上圖的視覺路徑圖並非絕對的,瀏覽習慣因人而異。

網站中方塊

因為人們從接觸資訊以來,資訊的呈現就是以方塊式存在:報紙、書,單個字成點,一行字成線,一段字成面,而這個面當然是以方形呈現的效率最高。網站的視覺設計大部分其實都是在拼方塊。
網站中的方塊能很好地引導使用者的視覺路徑,使用者可以通過區塊來分辨這個地區的資訊是否是自己需要的,從而可以迅速縮小範圍細緻尋找或者瀏覽下一個區塊,比如yahoo的首頁,從大塊上來看,使用者很容易分辨出4個大區塊,每個區塊裡面又有小的區塊。

  1. 方塊感越強越能給使用者方向感。
  2. 方塊越少越好。
  3. 盡量用留白做視覺區分。

對齊和間距

視覺設計最簡單,也是最容易忽略的就是對齊。檢查的方法就是查看每個方塊中的邊線,方塊與方塊之間的邊線,尤其是縱向維度。
間距的一般規律:字距小於行距,行距小於段距,段距小於塊距。檢查的方法可以嘗試將網站的背景圖案、線條全部去掉,看是否還能保持想要的區塊感。

拿淘寶的新首頁舉個細節的例子(右邊是我調整後的)。有時候我們不需要花心思做多麼漂亮的表徵圖和顏色搭配,用心地調整好網站的每一個像素或許也能讓它煥然一新。

主次關係

怎麼對使用者引導的關鍵就在於怎麼處理主次關係。說白了就是對比,從視覺的角度上看:形狀的大小,顏色,擺放的位置都會影響資訊的重要與否。
從大的區塊來看,不要平均分割頁面,三欄的設計應該讓其中一欄明顯短一些。
從局部來看,也要把握資訊呈現的節奏,比如yahoo中間新聞欄的設計,大圖帶大標題是第一要點,小圖帶字是第二要點,純文字第三,節奏感、主次關係非常強。

常見問題

  1. 視覺設計師不懂代碼,前端設計師在視覺方面又不專業。常常是實現出來的產品跟視覺設計出來的圖片有所偏差。建議視覺設計師跟進調整。
  2. 廣告圖片破壞視覺效果。如果網站足夠牛的話,可以讓廣告方遵循視覺規範。如果不行的話,起碼設計師還能決定廣告的尺寸,位置等等。

寫這篇文章剛剛趕上4月份新浪、騰訊、淘寶的首頁改版。單純從視覺設計的角度上看,騰訊非常清爽,很用心。

 

點擊這裡返回 網頁製作 欄目



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。