書籍簡介
導航是網站/APP的核心功能之一，導航設計的成功與否，直接關係到用戶體驗是否良好。隨著上網設備的多元化及瀏覽器性能的高速發展，網站設計需要兼容多種設備和螢幕。傳統桌面網站的導航設計相對比較成熟了，但隨著比如HTML5等新技術的不斷升級，導航設計可以做到更多功能和視覺效果。而在目前移動網站和移動套用並存的時期，移動界面導航設計也有了其自身的特點。
本書是一本全面闡述網站及移動套用的導航設計理論、方法和案例分析的專業書籍。主要內容包括：認識導航，導航的設計理論及原則，導航系統分類，導航的基石，導航的核心，導航的焦點，導航評價，移動APP和Web導航策略。
本書作者為江南大學博士（產品設計理論與技術專業），北京印刷學院副教授（數字媒體藝術專業），長期從事教學科研及設計實踐工作。本書力求將國內外導航設計方面的知識體系融會貫通，從貼近實戰的角度出發，結合案例式教學的方法經驗，做到“有用、能用、好用”。
本書適合從事網站及移動APP設計人員以及大專院校、培訓機構相關專業師生閱讀，特別適合希望掌握界面導航設計方法技巧的讀者作為參考。
前 言
關於筆者
王愉，北京印刷學院數字媒體藝術專業副教授，江南大學博士（產品設計理論與技術專業），師從辛向陽導師。對於網頁視覺設計，我已經從事教學科研及設計實踐工作達十年之久。網頁視覺設計越來越接近一門“藝術”，其設計和功能的趨勢雖不能說瞬息萬變，但也還是在技術的支撐下高速發展，所以我必須不斷通過大量的研究與實踐來保證我有足夠的經驗來教授學生，確保他們在大學可以學習到真正實用的技能以應對嚴峻的就業形勢。
在多年的教學和實踐中，我非常了解大家的需求，無論是我的學生或者是項目客戶，以及實際崗位上的網頁設計師。
這也是我創作這樣一本界面導航圖書的信心來源。
創作背景
當下，界面設計已經成為了一個綜合性的工作，必須考慮包括視覺設計、信息設計、互動設計、體驗設計等等細節，在綜合考慮所有因素之後，才能逐漸完善出一個產品。
導航作為網站/APP 的核心功能之一，設計得成功與否，直接關係到用戶體驗是否良好。隨著上網設備的多元化及瀏覽器性能的高速發展，網站設計需要兼容多種設備和螢幕。傳統桌面網站的導航設計相對比較成熟了，但隨著比如HTML5 等新技術的不斷升級，導航設計可以做到更多功能和實現更優質的視覺效果。而在目前移動網站和移動套用並存的時期，移動界面導航設計也有了其自身的特點。
在我的教學和實踐中，我經常發現，導航設計雖然如此重要，但經常成為第一個被忽視的細節。因為導航設計在商業設計中，比起絢麗的配色、靈活的動效設計，是一個相對“低調”的設計點，好多同學寧願把精力放在配色、結構和自認為的“體驗”等方面，而不願意過多關注導航這個默默無聞但其實至關重要的設計。
於是，這成為了我創作這本書的源動力，集結之前發表的一系列與導航設計相關的論文以及目前最新的設計案例，成為了本書的雛形。之後，在編輯欒大成的鼓勵下，咬牙堅持了2 年多，期間大規模改版兩次，修訂了4 次，直到交稿半年依然不顧出版社的相關規定繼續更新內容，在大成的網開一面下變成了目前這個版本，雖然不甚完美，但確實能力至此了。
本書內容
本書是一本全面闡述網站及移動套用的導航設計理論、方法和案例分析的專業書籍。分為七章。
第1 章 導航的設計理論及原則。介紹導航的需求和導航的定義，講解以用戶為中心、用戶體驗要素、情感化設計、最小努力、降低不確定感、重複性等設計理論。
第2 章 導航系統的分類。講解結構性導航系統、關聯性導航系統、實用性導航系統。
第3 章 Web導航的基石。講解結構層，信息構架方法、互動設計。
第4 章 Web導航的核心。講解框架層，導航要素設計、信息設計、界面設計、線框圖及原型。
第5 章Web 導航的焦點。講解表現層，視覺設計概述、風格設計、互動的視覺呈現、格式塔效應、視覺影響、導航布局。
第6 章 Web導航評價。講解導航評價方法、導航測試、優秀導航案例。
第7 章移動APP/Web 的導航策略。移動導航模式分類、移動導航視覺元素設計、移動導航互動設計原則，以及對未來的展望等。
本書特色
新案例：隨著互動設計理論的不斷完善、企業對用戶研究的深入，網站或移動套用產品的導航形式也隨之更新。網站改版、設計趨勢改變等諸多原因，促使本書在撰寫過程中不斷替換舊的實例或選擇新舊兩種形態進行對比，使讀者能夠更加深入地了解行業趨勢和主流產品。
理論既是實踐的基石也是實踐的結晶：在網際網路和互動設計領域，理論並不是一成不變、永遠正確的。本書在闡明理論時輔以大量案例參考，有助於提高讀者的理解力。設計實踐需要理論的指導，同時，也需要推動理論的發展。實踐使理論生動，理論使實踐紮實。
關於本書
本書出版獲得北京市教委人才強教創新團隊項目（北京印刷學院田忠利，06040109001）；國家社會科學基金藝術學一般項目“基於國際前沿視野的互動設計方法論研究”，（江南大學辛向陽，12BG055）資助。
本書主要由王愉撰寫，參與本書撰寫工作的有：北京印刷學院王愉、微軟公司李文博、北京印刷學院楊樂、隋涌、付震蓬、羅慧、魯藝、連環、趙一飛、王菲，研究生黃婷、徐曉彤、郁涯、張曉蒙、張晨蕾、張伶、初月、易娟、王熙瑤、周斌等。
本書由王愉、黃婷審校，田忠利、楊虹、史民峰、嚴晨監製。
關於讀者
本書適用於網站設計師、移動媒體視覺設計師、新媒體互動設計師，大中專院校設計專業師生、平面設計愛好者、培訓機構相關專業師生等。本書涉及諸多設計理論，建議讀者溯本求源，深入或擴展閱讀信息源。
關於案例
由於網際網路行業設計產品更新較快，本書採用的案例讀者未必還可以搜尋到，建議讀者以發展的心態來學習和研究這個領域的相關知識。另外，本書極個別案例來自網際網路，並無法查明出處，如果本書用到了您的作品，煩請告知，將在下一版予以更正。在此也感謝這些卓越的設計師讓我們的網際網路生活多姿多彩。
目錄
第1章 界面導航的設計理論及原則
1.1 導航需求……………………………………………………………………………………………………2
1.2 導航定義……………………………………………………………………………………………………3
1.3 以用戶為中心………………………………………………………………………………………………3
1.3.1 需求層次理論 ………………………………………………………………………………………3
1.3.2 基於UCD的導航設計 ………………………………………………………………………………4
1.4 用戶體驗要素………………………………………………………………………………………………8
1.5 情感化設計………………………………………………………………………………………………11
1.6 最小努力…………………………………………………………………………………………………16
1.7 降低不確定感……………………………………………………………………………………………18
1.8 藝術性原則………………………………………………………………………………………………21
1.9 隱喻………………………………………………………………………………………………………26
1.10 設計模式 ……………………………………………………………………………………………… 30
第2 章 界面導航系統的分類
2.1 結構性導航系統…………………………………………………………………………………………34
2.1.1 全局導航 …………………………………………………………………………………………34
2.1.2 局部導航 …………………………………………………………………………………………35
2.2 關聯性導航系統…………………………………………………………………………………………36
2.2.1 上下文導航 ………………………………………………………………………………………36
2.2.2 麵包屑導航 ………………………………………………………………………………………38
2.2.3 步驟導航 …………………………………………………………………………………………38
2.2.4 輔助導航 …………………………………………………………………………………………40
2.2.5 頁腳導航 …………………………………………………………………………………………40
2.2.6 頁碼導航 …………………………………………………………………………………………41
2.2.7 快速連結 …………………………………………………………………………………………42
2.2.8 友情連結 …………………………………………………………………………………………43
2.2.9 錨點連結 …………………………………………………………………………………………45
2.2.10 標籤雲 ………………………………………………………………………………………… 46
2.3 實用性導航………………………………………………………………………………………………46
2.3.1 標識連結 …………………………………………………………………………………………46
2.3.2 語種或地域導航 …………………………………………………………………………………48
2.3.3 搜尋引擎 …………………………………………………………………………………………49
2.3.4 網站地圖 …………………………………………………………………………………………51
第3 章 導航的基石——結構層
3.1 信息構架…………………………………………………………………………………………………54
3.1.1 信息結構圖示 ……………………………………………………………………………………54
3.1.2 卡片分類法 ………………………………………………………………………………………56
3.1.3 信息構架案例 ……………………………………………………………………………………58
3.2 互動設計…………………………………………………………………………………………………61
第4章 導航的核心——框架層
4.1 導航要素設計……………………………………………………………………………………………66
4.1.1 選單 ………………………………………………………………………………………………66
4.1.2 連結文本 …………………………………………………………………………………………67
4.1.3 按鈕 ………………………………………………………………………………………………67
4.1.4 麵包屑 ……………………………………………………………………………………………69
4.1.5 標籤和卡片堆 ……………………………………………………………………………………71
4.1.6 顏色編碼 …………………………………………………………………………………………73
4.1.7 圖片與圖示 ………………………………………………………………………………………76
4.2 信息設計…………………………………………………………………………………………………77
4.2.1 位置 ………………………………………………………………………………………………78
4.2.2 字母表 ……………………………………………………………………………………………79
4.2.3 時間 ………………………………………………………………………………………………81
4.2.4 類別 ………………………………………………………………………………………………82
4.2.5 層級 ………………………………………………………………………………………………83
4.3 界面設計…………………………………………………………………………………………………84
4.4 線框圖……………………………………………………………………………………………………86
4.5 原型………………………………………………………………………………………………………88
第5章 導航的焦點——表現層
5.1 視覺設計概述……………………………………………………………………………………………92
5.2 風格設計…………………………………………………………………………………………………93
5.2.1 選單、標籤、按鈕、圖示 ………………………………………………………………………94
5.2.2 文字和數字 ………………………………………………………………………………………97
5.2.3 空間 ……………………………………………………………………………………………… 100
5.2.4 最小化或無導航 ………………………………………………………………………………… 102
5.2.5 圖像導航 ………………………………………………………………………………………… 105
5.2.6 模擬紙製品 ……………………………………………………………………………………… 106
5.2.7 封面頁 …………………………………………………………………………………………… 109
5.2.8 第一屏 …………………………………………………………………………………………… 111
5.3 互動的視覺呈現…………………………………………………………………………………………112
5.3.1 導航選單的互動視覺效果 ……………………………………………………………………… 113
5.3.2 Ajax技術的套用 ………………………………………………………………………………… 115
5.3.3 Flash技術的保全方案 …………………………………………………………………………… 116
5.3.4 連結文本的四種狀態 …………………………………………………………………………… 117
5.3.5 連結的回響區域 ………………………………………………………………………………… 118
5.3.6 Material Design互動動效 ……………………………………………………………………… 119
5.4 格式塔效應………………………………………………………………………………………………120
5.4.1 接近性 …………………………………………………………………………………………… 120
5.4.2 相似性 …………………………………………………………………………………………… 120
5.4.3 連續性 …………………………………………………………………………………………… 120
5.4.4 對稱性 …………………………………………………………………………………………… 120
5.4.5 完整和閉合傾向 ………………………………………………………………………………… 120
5.4.6 共同方向運動 …………………………………………………………………………………… 120
5.4.7 主體背景法則 …………………………………………………………………………………… 121
5.5 視覺影響…………………………………………………………………………………………………122
5.5.1 分組及對齊 ……………………………………………………………………………………… 122
5.5.2 視覺層次 ………………………………………………………………………………………… 124
5.5.3 視線流 …………………………………………………………………………………………… 125
5.6 導航布局…………………………………………………………………………………………………125
5.6.1 橫向頂部 ………………………………………………………………………………………… 126
5.6.2 縱向左側 ………………………………………………………………………………………… 126
5.6.3 橫向底部 ………………………………………………………………………………………… 127
5.6.4 縱向居中 ………………………………………………………………………………………… 127
5.6.5 隨意布局 ………………………………………………………………………………………… 128
5.6.6 浮動布局 ………………………………………………………………………………………… 129
第6章 導航評價
6.1 導航評價方法……………………………………………………………………………………………132
6.1.1 符合用戶目標 …………………………………………………………………………………… 132
6.1.2 與網站類型相稱 ………………………………………………………………………………… 134
6.1.3 廣度與深度的平衡 ……………………………………………………………………………… 144
6.1.4 視覺清晰 ………………………………………………………………………………………… 145
6.1.5 統一性 …………………………………………………………………………………………… 145
6.1.6 良好的反饋 ……………………………………………………………………………………… 148
6.1.7 有效率、有效果 ………………………………………………………………………………… 149
6.1.8 易學易用 ………………………………………………………………………………………… 150
6.2 導航測試…………………………………………………………………………………………………151
6.2.1 測試方法與內容 ………………………………………………………………………………… 151
6.2.2 眼動追蹤技術 …………………………………………………………………………………… 152
6.2.3 導航測試分析 …………………………………………………………………………………… 154
6.3 優秀導航案例……………………………………………………………………………………………156
第7章 移動APP和移動Web的導航策略
7.1 移動APP和Web的導航模式分類 ……………………………………………………………………… 168
7.1.1 選單欄模式 ……………………………………………………………………………………… 168
7.1.2 標籤模式 ………………………………………………………………………………………… 170
7.1.3 抽屜模式 ………………………………………………………………………………………… 170
7.1.4 樹狀模式 ………………………………………………………………………………………… 171
7.1.5 平鋪頁面模式 …………………………………………………………………………………… 172
7.1.6 組合模式 ………………………………………………………………………………………… 173
7.1.7 模態視圖模式 …………………………………………………………………………………… 174
7.1.8 沉浸模式 ………………………………………………………………………………………… 175
7.1.9 旋轉木馬模式 …………………………………………………………………………………… 176
7.1.10 卡片瀑布流模式 ……………………………………………………………………………… 177
7.1.11 導航模式案例 ………………………………………………………………………………… 178
7.2 移動APP/Web的導航視覺元素設計 ………………………………………………………………… 179
7.2.1 導航結構 ………………………………………………………………………………………… 180
7.2.2 導航布局 ………………………………………………………………………………………… 182
7.2.3 導航顏色 ………………………………………………………………………………………… 184
7.2.4 導航文字 ………………………………………………………………………………………… 185
7.2.5 導航圖示 ………………………………………………………………………………………… 187
7.2.6 “使能”的設計 ………………………………………………………………………………… 188
7.2.7 扁平化設計 ……………………………………………………………………………………… 189
7.2.8 Google Material Design ……………………………………………………………………… 193
7.3 移動APP/Web導航互動設計原則 …………………………………………………………………… 195
7.3.1 布局合理 ………………………………………………………………………………………… 196
7.3.2 界面簡潔 ………………………………………………………………………………………… 197
7.3.3 細化場景 ………………………………………………………………………………………… 198
7.3.4 減少輸入 ………………………………………………………………………………………… 199
7.3.5 積極反饋 ………………………………………………………………………………………… 200
7.4 展望………………………………………………………………………………………………………201
參考文獻
