内容简介

朱宏

微软 （中国） 用户体验布道师

新浪微博 @MLikeasong

负责大中华地区微软设计风格的普及、设计团体交流合作、基于Windows 8和Windows Phone的产品设计顾问及合作。设计师出身，十余年职业生涯中历任过UI/UX设计师、IT媒体记者、评测工程师、多家企业的用户体验设计团队管理者。对互联网、移动互联网和移动终端设备交互行为及用户心理有深入的了解和实际经验。数码产品发烧者，专栏作者，歌词研习者，文具收藏爱好者。

亓光宇

微软 （中国） 开发技术资深顾问

新浪微博 @万宝路牌亓光宇

曾就职于多家知名IT企业并担任技术和管理职务，积累了丰富的互联网/移动互联网、IT系统实施及开发管理经验。目前主要精力集中在研究微软的下一代消费者产品应用、互联网技术及云计算技术，致力于拓展微软和国内外包括互联网在内的企业的技术合作与交流工作，并提供针对消费类应用、互联网及网络应用平台、Windows Phone 7.5/8、HTML5、Windows 8的顾问和技术合作工作。

李孟晓 （Genny）

加州艺术中心设计学院在读硕士

在中国期间曾就职于淘宝网及新浪网，担任交互设计师，后赴美国继续攻读媒体设计硕士学位。

个人网站：http://www.gennylee.com

作品目录

第1章　认识Windows UI.................................................................... 1

1.1　关于Windows UI...................................................................................... 1

1.1.1　Windows UI 的发展历程.................................................................................. 2

1.1.2　Windows UI的设计理念..............................................................................................4

1.1.3　Windows UI的应用展示..............................................................................................9

1.2　Windows UI与自然用户界面...................................................................... 11

1.2.1　自然用户界面............................................................................................................... 11

1.2.2　Windows UI和NUI.................................................................................................... 12

第2章　Windows 8，为应用和触摸重塑的Windows............................................ 14

2.1　应用为王...................................................................................................... 14

2.2　Windows 商店应用特征.................................................................. 15

2.2.1　Windows UI 设计准则.............................................................................................. 15

2.2.2 合约.................................................................................................................................. 15

2.2.3　快速且流畅................................................................................................................... 17

2.2.4　多种输入形式............................................................................................................... 18

2.2.5　可实时连接的动态磁贴.............................................................................................. 18

2.3　利用现有的知识构建应用....................................................................... 19

2.4　强大的开发者工具....................................................................................... 21

2.5　Windows应用商店....................................................................... 22

第3章　Windows UI设计原则.............................................................................. 26

3.1　从开始菜单到开始界面.............................................................. 26

3.2　Windows UI 风格应用的基本要素......................................................... 27

3.2.1　横向流动和C模型布局................................................................................................ 27

3.2.2　为界面做减法............................................................................................................... 28

3.2.3　清晰的信息层次结构................................................................................................... 28

3.2.4　充分利用边缘............................................................................................................... 29

3.3　Windows UI风格设计原则...................................................... 29

3.3.1　为出色的技能感到自豪.............................................................................................. 29

3.3.2　保持迅速和流畅........................................................................................................... 30

3.3.3　实现真正意义上的数字化.......................................................................................... 30

3.3.4　实现以较少投入取得极大成绩.................................................................................. 30

3.3.5　合作共赢....................................................................................................................... 31

3.4　Windows UI 风格应用的用户体验设计模式........................................... 31

3.4.1　导航设计模式............................................................................................................... 31

3.4.2　命令设计模式............................................................................................................... 36

3.4.3　触控交互设计指南....................................................................................................... 42

3.4.4　文本和版式设计指南................................................................................................... 51

3.4.5　视觉反馈....................................................................................................................... 59

3.5　视觉缩放和大小调整........................................................................... 60

3.5.1　灵活的布局................................................................................................................... 60

3.5.2　语义缩放....................................................................................................................... 63

3.5.3　贴靠视图和主视图....................................................................................................... 68

3.5.4　按比例缩放屏幕 .......................................................................................................... 73

3.5.5　按比例缩放像素密度................................................................................................... 83

3.6　合约................................................................................................. 86

3.6.1　搜索合约....................................................................................................................... 87

3.6.2　共享合约....................................................................................................................... 95

3.6.3　设置合约....................................................................................................................... 99

3.6.4　文件选取器..........................................................................................102

3.7　磁贴和通知...........................................................................................107

3.7.1　活动磁贴.....................................................................................................................107

3.7.2　二级磁贴.....................................................................................................................114

3.7.3　通知..............................................................................................................................115

3.8　漫游到云........................................................................................117

第4章　设计出色的新闻类应用.......................................................................... 120

4.1　新闻应用中的布局和导航...................................................................................120

4.2　命令......................................................................127

4.3　新闻应用中的版式..........................................................................128

4.4　内容的新鲜感.......................................................................129

4.5　合约..................................................................................................131

4.6　已连接且处于活动状态.............................................................135

第5章　设计出色的工具型应用.......................................................................... 138

5.1　全屏........................................................................................138

5.2　工具型应用中的布局和导航......................................................138

5.3　命令.....................................................................................................145

5.4　工具型应用中的数据输入....................................................................150

5.5　文本选择.......................................................................................152

5.6　工具型应用中的版式...............................................................153

第6章　从网站设计到Windows UI设计.............................................................. 164

6.1　布局和导航.............................................................................165

6.2　命令和操作....................................................................................................170

6.3　合约.................................................................................................171

6.4　触摸...............................................................................................179

6.5　缩放和视图.................................................................................182

6.6　通知......................................................................................183

6.7　总结......................................................................................186

第7章　从iPad应用设计到Windows UI设计....................................................... 188

7.1　布局和导航....................................................................................189

7.2　命令和操作 ............................................................................................193

7.3　合约.........................................................................................................194

7.4　方向和视图.................................................................................................201

7.5　通知........................................................................................................202

第8章　Windows 商店应用开发实践................................................................. 204

8.1　开发 Windows 商店应用...................................................................................204

8.1.1　选择编程语言................................................................................................204

8.1.2　获取 Windows 8及工具.................................................................................205

8.2　走近 Windows 商店应用..................................................................................205

8.2.1　用 JavaScript 写出 Hello World..........................................................................205

8.2.2　用 XAML 写出 Hello World..................................................................................206

8.3　使用 JavaScript 创建 Windows 商店应用.......................................................................207

8.3.1　目标..............................................................................................................................207

8.3.2　走近基于 JavaScript 的 Windows 商店应用......................................................208

8.3.3　开发工具——Microsoft Visual Studio..............................................................208

8.3.4　使用Windows Libraries for JavaScript扩展你的应用.....................................210

8.4　使用C#或Visual Basic创建Windows商店应用...............................................................216

8.4.1　目标..............................................................................................................................216

8.4.2　走近基于 C# 或 Visual Basic 的 Windows 商店应用......................................216

8.4.3　创建基于 C# 或 Visual Basic 的 Windows UI 风格项目.................................218

8.4.4　指定应用功能.............................................................................................................220

8.4.5　将数据获取到应用.....................................................................................................222

8.4.6　在XAML中定义应用布局.........................................................................................236

8.4.7　添加控件和内容.........................................................................................................240

8.4.8　显示数据.....................................................................................................................241

8.4.9　添加页面和导航.........................................................................................................254

8.4.10　添加应用栏...............................................................................................................265

8.4.11　添加动画和过渡......................................................................................................267

8.4.12　使用样式创建统一外观..........................................................................................269

8.4.13　适应不同的布局......................................................................................................277

8.4.14　添加初始屏幕和图标..............................................................................................283

8.5　使用C++创建你的第一个Windows商店应用..................................................................284

8.5.1　目标..............................................................................................................................285

8.5.2　一般 C++ 桌面应用与 Windows 商店应用对比................................................285

8.5.3　创建基于 C++ 的 Windows 商店应用................................................................286

8.5.4　指定应用功能.............................................................................................................291

8.5.5　将数据导入应用.........................................................................................................291

8.5.6　在 XAML 中定义 UI.................................................................................................297

8.5.7　添加页面和导航.........................................................................................................314

8.5.8　添加应用栏.................................................................................................................330

8.5.9　添加动画和过渡.........................................................................................................331

8.5.10　使用样式创建统一外观..........................................................................................333

8.5.11　适应不同的布局......................................................................................................342

8.6　使用 DirectX 创建 Windows 商店应用..............................................348

8.6.1　先决条件.....................................................................................................................349

8.6.2　准备开发环境.............................................................................................................350

8.6.3　设置应用以显示 DirectX 视图................................................................................353