互聯網產品(Web/移動Web/APP)視覺設計：導航篇

第1章 界面導航的設計理論及原則
1.1 導航需求
1.2 導航定義
1.3 以用戶為中心
1.3.1 需求層次理論
1.3.2 基於UCD的導航設計
1.4 用戶體驗要素
1.5 情感化設計
1.6 最小努力
1.7 降低不確定感
1.8 藝術性原則
1.9 隱喻
1.10 設計模式

第2章 界面導航系統的分類
2.1 結構性導航系統
2.1.1 全局導航
2.1.2 局部導航
2.2 關聯性導航系統
2.2.1 上下文導航
2.2.2 面包屑導航
2.2.3 步驟導航
2.2.4 輔助導航
2.2.5 頁腳導航
2.2.6 頁碼導航
2.2.7 快速鏈接
2.2.8 友情鏈接
2.2.9 錨點鏈接
2.2.10 標簽雲
2.3 實用性導航
2.3.1 標識鏈接
2.3.2 語種或地域導航
2.3.3 搜索引擎
2.3.4 網站地圖

第3章 導航的基石——結構層
3.1 信息構架
3.1.1 信息結構圖示
3.1.2 卡片分類法
3.1.3 信息構架案例
3.2 交互設計

第4章 導航的核心——框架層
4.1 導航要素設計
4.1.1 菜單
4.1.2 鏈接文本
4.1.3 按鈕
4.1.4 面包屑
4.1.5 標簽和卡片堆
4.1.6 顏色編碼
4.1.7 圖片與圖標
4.2 信息設計
4.2.1 位置
4.2.2 字母表
4.2.3 時間
4.2.4 類別
4.2.5 層級
4.3 界面設計
4.4 線框圖
4.5 原型

第5章 導航的焦點——表現層
5.1 視覺設計概述
5.2 風格設計
5.2.1 菜單、標簽、按鈕、圖標
5.2.2 文字和數字
5.2.3 空間
5.2.4 最小化或無導航
5.2.5 圖像導航
5.2.6 模擬紙制品
5.2.7 封面頁
5.2.8 第一屏
5.3 交互的視覺呈現
5.3.1 導航菜單的交互視覺效果
5.3.2 Ajax技術的應用
5.3.3 Flash技術的保全方案
5.3.4 鏈接文本的四種狀態
5.3.5 鏈接的響應區域
5.3.6 Material Design交互動效
5.4 格式塔效應
5.4.1 接近性
5.4.2 相似性
5.4.3 連續性
5.4.4 對稱性
5.4.5 完整和閉合傾向
5.4.6 共同方向運動
5.4.7 主體背景法則
5.5 視覺影響
5.5.1 分組及對齊
5.5.2 視覺層次
5.5.3 視線流
5.6 導航布局
5.6.1 橫向頂部
5.6.2 縱向左側
5.6.3 橫向底部
5.6.4 縱向居中
5.6.5 隨意布局
5.6.6 浮動布局

第6章 導航評價
6.1 導航評價方法
6.1.1 符合用戶目標
6.1.2 與網站類型相稱
6.1.3 廣度與深度的平衡
6.1.4 視覺清晰
6.1.5 統一性
6.1.6 良好的反饋
6.1.7 有效率、有效果
6.1.8 易學易用
6.2 導航測試
6.2.1 測試方法與內容
6.2.2 眼動追蹤技術
6.2.3 導航測試分析
6.3 優秀導航案例

第7章 移動APP和移動Web的導航策略
7.1 移動APP和Web的導航模式分類
7.1.1 菜單欄模式
7.1.2 標簽模式
7.1.3 抽屜模式
7.1.4 樹狀模式
7.1.5 平鋪頁面模式
7.1.6 組合模式
7.1.7 模態視圖模式
7.1.8 沉浸模式
7.1.9 旋轉木馬模式
7.1.10 卡片瀑布流模式
7.1.11 導航模式案例
7.2 移動APP/Web的導航視覺元素設計
7.2.1 導航結構
7.2.2 導航布局
7.2.3 導航顏色
7.2.4 導航文字
7.2.5 導航圖標
7.2.6 「使能」的設計
7.2.7 扁平化設計
7.2.8 Google Material Design
7.3 移動APP/Web導航交互設計原則
7.3.1 布局合理
7.3.2 界面簡潔
7.3.3 細化場景
7.3.4 減少輸入
7.3.5 積極反饋
7.4 展望

參考文獻