互联网产品（Web/移动Web/APP）视觉设计 导航篇PDF电子书下载

第1章 界面导航的设计理论及原则 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章 界面导航系统的分类 33

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章 导航的基石——结构层 53

3.1 信息构架 54

3.1.1 信息结构图示 54

3.1.2 卡片分类法 56

3.1.3 信息构架案例 58

3.2 交互设计 61

第4章 导航的核心——框架层 65

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章 导航的焦点——表现层 91

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章 导航评价 131

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的导航策略 167

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

参考文献 205