良好位置感的設計_網(wǎng)頁設計教程
推薦:網(wǎng)頁設計中的版式原理--統(tǒng)一作者:http://www.seowebcn.cn/網(wǎng)頁頁面構成的要素除抽象形外,還應包含有具象的形(字體、標志、圖形、色彩)。假如在一個網(wǎng)頁中,存在著多種字體、字號;或存
好的設計和不好的設計,就像是一塊硬幣的正反面。之前我們看到的都是硬幣的反面,只要翻轉一下,就可以看到正面了。
上次我評論了上網(wǎng)四大郁悶事,很大原因是導航混亂、位置感不強造成的。有一次參與朋友公司的討論時我說道,網(wǎng)站就像是一個信息群島,島嶼和島嶼間是相連的,差別在于你是用獨木橋還是高速公路,橋邊(路邊)是美女的誘惑還是指示牌。良好位置感的設計,主要解決三個問題:我從哪里來(為什么我在這里)?我在哪里(這里是哪里)?我將去哪里(下一步怎么走)?就像是一個迷宮,你所處位置正面有三條路,背面有三條路,你可能一下子就迷失了,忘了從哪條路來,也不知道下一步該走哪條路。
在不同的情境中,這三個問題的主次不同。但大部分情況下,第二個問題(我在哪里)更重要一些。
一種設計是在國外被叫做 Breadcrumb 的東西(延伸閱讀:Breadcrumb Navigation: Further Investigation of Usage),就是童話里利用面包屑找到回家路的聰明小孩的故事。這個設計不僅僅用在資訊類網(wǎng)站的分類層級導航,也經(jīng)常被延伸到那些“下一步、下一步”的交互過程中。比如:


假如你對 Breadcrumb 使用率有疑問的話,推薦你閱讀上面給出的延伸閱讀文章。
我曾經(jīng)想設計一種記錄用戶在站內(nèi)訪問路徑的 Breadcrumb,這個和一般的“您的位置”有些區(qū)別,類似于訪問歷史。后來我發(fā)現(xiàn)實際上 Taobao 或者其他購物網(wǎng)站的商品瀏覽歷史(站內(nèi)訪問歷史)可以算是一種變體。
然后還有一種設計似乎是亞馬遜獨創(chuàng)的動態(tài) Tab 設計(延伸閱讀:亞馬遜網(wǎng)站導航欄的變遷史),即當前所在的分類作為當前的 Tab,突出顯示(動態(tài) Tab 設計的創(chuàng)意應該來自于利用 headings 級別文字表示當前頁面,這一點 Amazon 仍然在使用):


插一句話,怎么樣設計算是突出呢?W3 有一個對比度標準算法:亮度差異大于125,色彩差異大于500。起碼得做到這一點吧。
利用 Tab 作位置導航有很大的優(yōu)勢,結合 Breadcrumb 和 Tab 還產(chǎn)生了一種 變體 ,在 Yahoo! 的一些頻道中已有運用:

另一個問題是,對于資訊類網(wǎng)站,用戶(訪客)可能并不是從首頁進入的,可能通過搜索引擎或者外部鏈接。這種情況下如何是好呢?除了以上方式的綜合運用,我曾看到過在頁面上給出搜索框,并給出來路的要害詞,提示用戶可以再次進行站內(nèi)搜索的。比如:

以上可能更多側重于信息架構方面,舉的例子也估計是見多不怪,但我想說的是創(chuàng)新永遠不會是憑空產(chǎn)生的。所以我們可以通過追根溯源的方式去學習,來增強我們的思考能力。我贊同一個觀點:設計師應該是發(fā)明家。在產(chǎn)品設計上,你應該比他人想的更前,也要比他人想的更后。
歡迎針對本話題進行補充,談談你所見過的優(yōu)秀的導航、信息指引方面的設計 。
分享:網(wǎng)頁設計中的版式原理--分割作者:http://www.seowebcn.cn/網(wǎng)頁制作中的分割是一種最基本的,隨處可見的版式原理。分割有兩種:1、橫向分耕,2、縱向分割。(網(wǎng)頁設計師聯(lián)盟http://68des
- 中國互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬 5分鐘1起網(wǎng)絡入侵
- 馬云最后的發(fā)布會:打假,打出阿里的新未來
- 實踐分享:ACCESS數(shù)據(jù)庫導入mysql數(shù)據(jù)庫
- ACCESS數(shù)據(jù)庫轉ORACLE數(shù)據(jù)庫分享
- CDN.net免費CDN申請使用教程:100GB流量香港日本新加坡節(jié)點
- WordPress 教程:為插件自定義數(shù)據(jù)表
- 如何使用查找我的iPhone教程
- 微信公眾平臺教程(二) 消息管理與群發(fā)
- 中國IPv4地址今年將告罄 IPv6期待打破政策局
- 移動廣告野蠻成長:75%投放在iOS平臺
- 災難面前,互聯(lián)網(wǎng)公司可以如何做的更好?
- 富士康500萬部iPhone遭蘋果退貨 損失10億元
- 相關鏈接:
- 教程說明:
網(wǎng)頁設計教程-良好位置感的設計
。