第1章 Metro风格概述 2
1.1 Metro的渊源 3
1.1.1 地铁与城市 3
1.1.2 包豪斯建筑 4
1.1.3 瑞士平面设计 6
1.2 Metro风格的原则 6
1.2.1 Metro UI的特点 7
1.2.2 Metro UI的识别 8
1.2.3 Metro哲学 9
1.3 Metro风格应用程序的演进 10
1.3.1 初露端倪 11
1.3.2 蓬勃发展 12
1.3.3 引领未来 16
第2章 Metro风格应用实例 18
2.1 Windows 8 Metro界面赏析 19
2.2 Windows Phone Metro界面赏析 28
2.3 Android和iOS中Metro风格应用界面赏析 30
2.4 Metro风格网站设计赏析 32
2.5 其他Metro设计风格的产品赏析 36
第3章 定义Metro风格的应用程序 40
3.1 设计Metro应用 41
3.1.1 明确应用的定位 41
3.1.2 设计产品的交互方式 43
3.1.3 定义产品使用的平台特性 45
3.1.4 盈利模式 48
3.2 设计令人印象深刻的Metro UI 49
3.2.1 最适合产品的UI 49
3.2.2 一眼就爱上它 53
3.3 使用原型验证Metro UI 54
3.3.1 开发原型产品 54
3.3.2 倾听用户的声音 60
第4章 Metro风格设计指南 64
4.1 Metro页面的布局与配色 65
4.1.1 Metro的精髓——Tile 66
4.1.2 简单却华丽的配色 72
4.1.3 字体样式 74
4.2 导航与页面切换 76
4.2.1 应用内容的组织与导航 76
4.2.2 借助平台的特有导航操作 82
4.3 Metro的触摸操作 86
4.3.1 触摸行为的定义 86
4.3.2 触摸的目标 88
4.3.3 触摸屏幕的合理操作区域 92
4.3.4 设定使用场景 95
4.4 Metro控件设计准则 96
4.4.1 启动界面设计准则 96
4.4.2 消息通知设计准则 97
4.4.3 锁屏设计准则 101
4.4.4 页面内控件的设计原则 103
第5章 多种类型应用的Metro设计指南 110
5.1 游戏 111
5.1.1 布局和导航 111
5.1.2 游戏内控件 114
5.1.3 触摸交互 116
5.1.4 设置和选项 116
5.1.5 暂停游戏 117
5.1.6 状态管理与保存 118
5.1.7 游戏账户 118
5.1.8 改变视图方向和窗口大小 119
5.1.9 启动画面和载入提示 120
5.1.10 漫游 120
5.1.11 合约 120
5.1.12 Windows Phone中的游戏 122
5.2 娱乐类应用 122
5.2.1 多媒体应用的布局和导航 122
5.2.2 在HUB页面中点击项目 126
5.2.3 播放体验 127
5.2.4 剧集或视频的前后章节导航 129
5.2.5 命令 129
5.2.6 等级与评论 132
5.2.7 字体与版式 132
5.2.8 合约 133
5.2.9 告诉用户应用是有活力的 135
5.2.10 方向和视图 135
5.2.11 应用启动 136
5.2.12 Windows Phone中的娱乐应用 137
5.3 新闻类应用 138
5.3.1 布局和导航 138
5.3.2 命令 145
5.3.3 新闻应用中的版式 146
5.3.4 内容的新鲜感 146
5.3.5 告诉用户应用是有活力的 148
5.3.6 方向和视图 148
5.3.7 应用启动 150
5.4 工具类应用 151
5.4.1 概述 151
5.4.2 全屏模式 152
5.4.3 工具类应用的布局和导航 152
5.4.4 命令 158
5.4.5 工具类应用中的数据输入 162
5.4.6 文本选择 165
5.4.7 工具类应用中的版式 165
5.4.8 合约 166
5.4.9 告诉用户应用是有活力的 171
5.4.10 方向和视图 171
5.4.11 Windows Phone中的工具应用 173
第6章 移植为Metro风格的应用 176
6.1 将iPad应用移植成Metro风格 177
6.1.1 布局和导航 178
6.1.2 命令和操作 181
6.1.3 合约 182
6.1.4 触摸 186
6.1.5 方向和视图 188
6.1.6 通知 190
6.2 将iPhone应用移植为Metro应用 191
6.2.1 布局和导航 192
6.2.2 命令和操作 193
6.2.3 方向和视图 194
6.2.4 通知 195
6.3 将网页移植成Metro应用 197
6.3.1 布局 198
6.3.2 导航 200
6.3.3 操作 202
6.3.4 触摸操作 203
第7章 Metro的未来 206
7.1 Metro风格是微软未来全线产品的风格 207
7.2 来自未来的风格 208
7.3 从Metro到Modern的转变 211
7.4 白璧微瑕 213