技術(shù)資訊
網(wǎng)站的視覺路徑和版式設(shè)計
2008-04-14 15:45:00
cooper談到用戶的視覺路徑一般是:從上到下,從左到右。
好的視覺設(shè)計路徑應(yīng)該是順應(yīng)這樣的用戶習慣,糟糕的設(shè)計會讓用戶無所適從,焦點到處都是。
當然,上圖的視覺路徑圖并非絕對的,瀏覽習慣因人而異。
網(wǎng)站中方塊
因為人們從接觸信息以來,信息的呈現(xiàn)就是以方塊式存在:報紙、書,單個字成點,一行字成線,一段字成面,而這個面當然是以方形呈現(xiàn)的效率最高。網(wǎng)站的視覺設(shè)計大部分其實都是在拼方塊。
網(wǎng)站中的方塊能很好地引導(dǎo)用戶的視覺路徑,用戶可以通過區(qū)塊來分辨這個區(qū)域的信息是否是自己需要的,從而可以迅速縮小范圍細致尋找或者瀏覽下一個區(qū)塊,比如yahoo的首頁,從大塊上來看,用戶很容易分辨出4個大區(qū)塊,每個區(qū)塊里面又有小的區(qū)塊。
1 方塊感越強越能給用戶方向感。
2 方塊越少越好。
3 盡量用留白做視覺區(qū)分。
對齊和間距
視覺設(shè)計最簡單,也是最容易忽略的就是對齊。檢查的方法就是查看每個方塊中的邊線,方塊與方塊之間的邊線,尤其是縱向維度。
間距的一般規(guī)律:字距小于行距,行距小于段距,段距小于塊距。檢查的方法可以嘗試將網(wǎng)站的背景圖案、線條全部去掉,看是否還能保持想要的區(qū)塊感。
拿淘寶的新首頁舉個細節(jié)的例子(右邊是我調(diào)整后的)。有時候我們不需要花心思做多么漂亮的圖標和顏色搭配,用心地調(diào)整好網(wǎng)站的每一個像素或許也能讓它煥然一新。
主次關(guān)系
怎么對用戶引導(dǎo)的關(guān)鍵就在于怎么處理主次關(guān)系。說白了就是對比,從視覺的角度上看:形狀的大小,顏色,擺放的位置都會影響信息的重要與否。
從大的區(qū)塊來看,不要平均分割頁面,三欄的設(shè)計應(yīng)該讓其中一欄明顯短一些。
從局部來看,也要把握信息呈現(xiàn)的節(jié)奏,比如yahoo中間新聞欄的設(shè)計,大圖帶大標題是第一要點,小圖帶字是第二要點,純文本第三,節(jié)奏感、主次關(guān)系非常強。
常見問題
1 視覺設(shè)計師不懂代碼,前端設(shè)計師在視覺方面又不專業(yè)。常常是實現(xiàn)出來的產(chǎn)品跟視覺設(shè)計出來的圖片有所偏差。建議視覺設(shè)計師跟進調(diào)整。
2 廣告圖片破壞視覺效果。如果網(wǎng)站足夠牛的話,可以讓廣告方遵循視覺規(guī)范。如果不行的話,起碼設(shè)計師還能決定廣告的尺寸,位置等等。
寫這篇文章剛剛趕上4月份新浪、騰訊、淘寶的首頁改版。單純從視覺設(shè)計的角度上看,騰訊非常清爽,很用心。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2015-03-26 16:49:53] 服務(wù)器不支持中文圖片名字或者中文路徑的解決辦法
- [2012-12-19 22:10:42] 網(wǎng)站設(shè)計頁面的視覺路徑引導(dǎo)
- [2013-01-26 15:07:29] dede圖集大圖絕對路徑
- [2008-03-18 16:24:00] 從名片設(shè)計說網(wǎng)頁版式的細節(jié)
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
集團性網(wǎng)站 H5 搜索引擎 GOOGLE 外貿(mào)網(wǎng)站建設(shè) 交互設(shè)計 青島IT資訊 營銷策略 SEO優(yōu)化 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) 力圖數(shù)字科技 營銷型網(wǎng)站 青島做網(wǎng)站多少錢 網(wǎng)站品牌 青島網(wǎng)頁設(shè)計 中小型企業(yè)網(wǎng)站建設(shè) 青島網(wǎng)站優(yōu)化 網(wǎng)站制作 青島網(wǎng)絡(luò)公司 青島網(wǎng)站營銷 搜索引擎蜘蛛 英文網(wǎng)站建設(shè) 微信營銷的優(yōu)勢 手機網(wǎng)站建設(shè) 視覺靈感 青島網(wǎng)站SEO 程序開發(fā) 網(wǎng)站的速度 集團官網(wǎng) 版面布局