( 圖示出自： Apple.com)
8.動(dòng)態(tài)菜單 (Dynamic menus)也叫浮出菜單，下拉菜單或者彈出菜單。用戶須與其產(chǎn)生交互行為，菜單才能顯示。常用的交互是鼠標(biāo)懸停或點(diǎn)擊。
( 圖示出自： Amazon.com)
9.下拉框?qū)Ш?(Drop-down menus)利用下拉菜單的特性，當(dāng)選定某一項(xiàng)或多個(gè)選項(xiàng)，即將用戶帶到新的頁(yè)面。
( 圖示出自： Dell.com)
10.標(biāo)簽云 (Tag clouds)所列鏈接按字母排序，按照標(biāo)簽熱門程度確定字體的大小和顏色。標(biāo)簽云的設(shè)計(jì)者是交互設(shè)計(jì)師Stewart Butterfield。首先使用標(biāo)簽云的是Flickr。
( 圖示出自： Flickr.com)
03 導(dǎo)航設(shè)計(jì)之視覺(jué)設(shè)計(jì)
Apple常常成為設(shè)計(jì)界追隨的風(fēng)向標(biāo)，他們的每次視覺(jué)的更新或者迭代都會(huì)引發(fā)互聯(lián)網(wǎng)的爭(zhēng)相模仿。這里，收集了Apple從1997年以來(lái)視覺(jué)層面更新比較關(guān)鍵的截圖，不仿從apple.com中歷年的變化來(lái)看看導(dǎo)航及網(wǎng)站的視覺(jué)體系的迭代。
Apple 1997:
從下面的截圖，視覺(jué)層面上大家有些難以辨別出它出自蘋果。當(dāng)時(shí)界面主要是些文字鏈組成，導(dǎo)航只有簡(jiǎn)單的垂直菜單。
Apple 1998:
導(dǎo)航的系統(tǒng)logo的顏色換成了灰色，玻璃質(zhì)感的漸變也做了不少的調(diào)整。還有值得注意的是iSync面板的金屬拉絲質(zhì)感。
Apple 2004:
導(dǎo)航系統(tǒng)的視覺(jué)設(shè)計(jì)仍然保持微調(diào)的狀態(tài)中。整體依然沒(méi)有太大的變化。
Apple 2007:
2007的導(dǎo)航徹底改變。采用灰色系的質(zhì)感表現(xiàn)。apple logo細(xì)致的質(zhì)感替代了原有的單色處理手法。去除了tab式二級(jí)導(dǎo)航。
首頁(yè)運(yùn)用全屏banner突出介紹新產(chǎn)品。apple的文案也是被人津津樂(lè)道的經(jīng)典。
Apple 2010:
Apple 2011:
Apple 2012:
縱觀2010-2012的導(dǎo)航，以產(chǎn)品的維度劃分導(dǎo)航結(jié)構(gòu)。用產(chǎn)品的本身的名稱命名，用戶進(jìn)入網(wǎng)站能直入自己想要了解的產(chǎn)品。
從尺寸大小，到標(biāo)簽的命名，甚至是順序都沒(méi)有做變化。主要變化的導(dǎo)航的視覺(jué)層面和search框。
視覺(jué)上：1)主體導(dǎo)航從灰色單一漸變到深灰色質(zhì)感漸變到暗灰色的質(zhì)感漸變。
2)相反的是Apple logo 質(zhì)感一路從簡(jiǎn)，從富質(zhì)感的到簡(jiǎn)單的灰白漸變。
3)標(biāo)簽字體和搜索icon反白處理，逐漸和深色的背景拉開層次。
search框：1)將search框和導(dǎo)航從視覺(jué)層面上結(jié)合在一起，整體設(shè)計(jì)。不再簡(jiǎn)單的白底處理。
2)只保留搜索icon，去除“Search”
3)tab寬度增加，壓縮search框?qū)挾取Ｊ髽?biāo)click后，搜索框自動(dòng)展開，區(qū)別出搜索框default和輸入的使用狀態(tài)。
每次以普通用戶的角度去使用apple.com，都有一種快速高效的感覺(jué)，能第一時(shí)間讓你感受到它想告訴你什么，它最近又哪些變化剛好是你想知道的。想找一個(gè)記憶中的東西并不難，search是最后一個(gè)利器。每一個(gè)配色，每一個(gè)像素的把控，每個(gè)文案的精彩都值得設(shè)計(jì)細(xì)細(xì)的 品味。
以上是我在設(shè)計(jì)導(dǎo)航時(shí)遇到一些盲點(diǎn)和發(fā)現(xiàn)積累。在這次誠(chéng)信中國(guó)改版的項(xiàng)目中被討論最多的就是導(dǎo)航，從結(jié)構(gòu)組織到信息層次，從交互形式到視覺(jué)樣式。討論到最后大家對(duì)導(dǎo)航的概念已經(jīng)模糊，常常在每次的討論ending中自問(wèn)：到底什么是導(dǎo)航?為什么要導(dǎo)航?導(dǎo)航只能長(zhǎng)這樣么?。在做設(shè)計(jì)的過(guò)程中，要經(jīng)常對(duì)交互控件的基本概念究一究來(lái)源，會(huì)讓自己清晰的多。這里只是把我在設(shè)計(jì)導(dǎo)航的過(guò)程中遇到疑惑和想法小結(jié)一下，希望對(duì)大家在設(shè)計(jì)導(dǎo)航時(shí)有些許的幫助。
一個(gè)好的導(dǎo)航的關(guān)鍵是，能否解決問(wèn)題。切忌“冥想”導(dǎo)航，讓你的導(dǎo)航更扎實(shí)，更清晰，更有意義。
參考資料：
1. 部分圖文參考了《Web 導(dǎo)航設(shè)計(jì)》 作者: James Kalbach 譯者: 李曦琳
2. 卡片分類法–維基百科
移步查看—->Blog鏈接 http://blog.163.com/lan_lan_321/blog/static/13787885720124915148408/
來(lái)源：http://www.aliued.cn
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示