
( 圖示出自: Apple.com)
8.動態菜單 (Dynamic menus)也叫浮出菜單,下拉菜單或者彈出菜單。用戶須與其產生交互行為,菜單才能顯示。常用的交互是鼠標懸停或點擊。

( 圖示出自: Amazon.com)
9.下拉框導航 (Drop-down menus)利用下拉菜單的特性,當選定某一項或多個選項,即將用戶帶到新的頁面。

( 圖示出自: Dell.com)
10.標簽云 (Tag clouds)所列鏈接按字母排序,按照標簽熱門程度確定字體的大小和顏色。標簽云的設計者是交互設計師Stewart Butterfield。首先使用標簽云的是Flickr。

( 圖示出自: Flickr.com)
03 導航設計之視覺設計
Apple常常成為設計界追隨的風向標,他們的每次視覺的更新或者迭代都會引發互聯網的爭相模仿。這里,收集了Apple從1997年以來視覺層面更新比較關鍵的截圖,不仿從apple.com中歷年的變化來看看導航及網站的視覺體系的迭代。
Apple 1997:
從下面的截圖,視覺層面上大家有些難以辨別出它出自蘋果。當時界面主要是些文字鏈組成,導航只有簡單的垂直菜單。

Apple 1998:
導航的系統logo的顏色換成了灰色,玻璃質感的漸變也做了不少的調整。還有值得注意的是iSync面板的金屬拉絲質感。

Apple 2004:
導航系統的視覺設計仍然保持微調的狀態中。整體依然沒有太大的變化。

Apple 2007:
2007的導航徹底改變。采用灰色系的質感表現。apple logo細致的質感替代了原有的單色處理手法。去除了tab式二級導航。
首頁運用全屏banner突出介紹新產品。apple的文案也是被人津津樂道的經典。

Apple 2010:

Apple 2011:

Apple 2012:

縱觀2010-2012的導航,以產品的維度劃分導航結構。用產品的本身的名稱命名,用戶進入網站能直入自己想要了解的產品。
從尺寸大小,到標簽的命名,甚至是順序都沒有做變化。主要變化的導航的視覺層面和search框。
視覺上:1)主體導航從灰色單一漸變到深灰色質感漸變到暗灰色的質感漸變。
2)相反的是Apple logo 質感一路從簡,從富質感的到簡單的灰白漸變。
3)標簽字體和搜索icon反白處理,逐漸和深色的背景拉開層次。
search框:1)將search框和導航從視覺層面上結合在一起,整體設計。不再簡單的白底處理。
2)只保留搜索icon,去除“Search”
3)tab寬度增加,壓縮search框寬度。鼠標click后,搜索框自動展開,區別出搜索框default和輸入的使用狀態。
每次以普通用戶的角度去使用apple.com,都有一種快速高效的感覺,能第一時間讓你感受到它想告訴你什么,它最近又哪些變化剛好是你想知道的。想找一個記憶中的東西并不難,search是最后一個利器。每一個配色,每一個像素的把控,每個文案的精彩都值得設計細細的 品味。
以上是我在設計導航時遇到一些盲點和發現積累。在這次誠信中國改版的項目中被討論最多的就是導航,從結構組織到信息層次,從交互形式到視覺樣式。討論到最后大家對導航的概念已經模糊,常常在每次的討論ending中自問:到底什么是導航?為什么要導航?導航只能長這樣么?。在做設計的過程中,要經常對交互控件的基本概念究一究來源,會讓自己清晰的多。這里只是把我在設計導航的過程中遇到疑惑和想法小結一下,希望對大家在設計導航時有些許的幫助。
一個好的導航的關鍵是,能否解決問題。切忌“冥想”導航,讓你的導航更扎實,更清晰,更有意義。
參考資料:
1. 部分圖文參考了《Web 導航設計》 作者: James Kalbach 譯者: 李曦琳
2. 卡片分類法–維基百科
移步查看—->Blog鏈接 http://blog.163.com/lan_lan_321/blog/static/13787885720124915148408/
來源:http://www.aliued.cn