網頁導航設計
一、什麼是導航系統
回憶一下，黃金週你去某個不熟悉的國家度假，有沒有找不到路的情況？
回憶一下，你去逛盧浮宮，裡邊的道路很多，你很難到哪一條是你來時的路
很多時候我們需要生活中的這些導視系統，或者導航才能找到正確的方向
在國外的朋友突然給我發來一條鏈接，讓我幫他看看買哪款手機比較合適
我在哪個頁面？我怎麼查看其他的手機在哪？回到主頁後怎麼再找到這個頁面？
導航系統
是如何通過導航信息來瀏覽或者操作網站的系統
是讓用戶知道自己在哪、可以去哪的系統
組織系統和導航系統的關係是什麼？
我收藏了這首歌，我想去“我的音樂“看看是否成功
導航讓信息跨越組織結構，人們可以在整個網站中自由穿梭
導航設計需要兼顧靈活性和避免混亂
二、網頁導航
1.全局導航
網頁中的導航 每一頁都會顯示全域導航系統
2.局部導航
局部導航系統和其內容 被稱為“子網站”或“網站中的網站”
3.全局導航+局部導航
很多網站會把全局導航和局部導航 結合使用 ——巨型菜單
4.情景導航
有節制地使⽤情景式導航可以增加靈活性來彌補現有導航系統的不足
它提供了了交叉銷售、提升銷售、打造品牌和提供顧客價值的真正機會
5.輔助導航
不屬於網站的層級結構，但是可以提供查找內容和完成任務的輔助方法
1.站點地圖
https://www.adidas-group.com/en/service/sitemap/
- 顯示信息結構的前幾層
- 對於只有2-3層的產品來說，站點地圖是多餘的
- 它適用於大型內容的網站
2.索引
聯合國的⽹站，全網關鍵信息頁面的字⺟索引，幫助⽬標清晰的用戶找到所要的信息。
http://www.un.org/en/sections/about-website/z-site-index/index.html
lynda的網站，所有課程的的字母索引，幫助⽬標清晰的用戶找到所要的信息。
https://www.lynda.com/subject/all
6.其他導航
1.指南
導遊、教程、針對特定用戶、主題或任務走查；
為新手介紹有關網站內容和功能的工具
2.個性化
我們才用戶想要什麼
3.有好導航
提供用戶不常用的鏈接，以便在需要的時候提供便利，比如法律信息、反饋等
4.自定義
用戶告訴我們他們想要什麼
三、如何設計網頁導航？
蘋果官網的組織系統
用站點地圖的方式來組織內容信息
工具網址：https://slickplan.com/
頁面的組織方式一：
頁面的組織方式二：
命題
我們要為城市白領設計一個音樂APP
用用戶故事檢查功能是否完成
用信息框架靈活設計頁面
四、幾種組織架構和導航設計
1.單頁面 FlatSingle page
所有內容信息的頁面站點都放在同一個頁面，一個頁面分成好幾個部分
網址：https://getobachan.com/
2.線性層級 sequence site
一般是任務型的網站，以完成任務為目標
網址：www.teambition.com
3.扁平層級 Flat
十個⻚面以內，⼗個⻚面都是可以相互交叉訪問的，只有一層導航，⼀般是個人或小型機構的網站，
這類⽹站需要保證內容不會有⼤幅度增長
網址：http://www.momentomultimedia.com/
網址：https://www.superduper.wtf/#stuff_we_did
4.絕對層級 Strict hierarchy
每個⼦網站的⻚面只能通過⽗級網頁訪問，不能交叉訪問
5.多維層級 Multidimensional hierarchy
打破父子級關係，任何兩個界面之間都有可能有交集，一個頁面也可以和多個頁面有交集
推薦
推薦書籍
《信息架構-超越web設計》《⽤用戶體驗設計要素》
推薦線框圖工具
Balsamiq：
https://balsamiq.com/
超快速原型繪製工具，裡面有很多組件可以直接使用，但是靈活度不夠
Axure：
https://www.axure.com/
是一個專業的快速原型設計工具， 讓負責定義需求和規格、設計功能 和界面的專家能夠快速創建應用軟 件或Web網站的線框圖、流程圖、 原型和規格說明文檔
Omnigraffle:
https://www.omnigroup.com/omnigraffle
OmniGraffle可以用來繪製圖表， 流程圖，組織結構圖以及插圖， 也可以用來來組織頭腦中思考的 信息，組織頭腦風暴的結果，繪 制心智圖，作為樣式管理器，或 設計網頁或PDF文檔的原型
推薦線框圖工具
Sketch
https://www.sketchapp.com/
專業的界面設計軟件，功能強大，插件更新速度快，操作體驗不錯
閱讀更多 理論塢 的文章
