超越想象

章节摘录

版权页：   插图：    2.专为Internet Explorer 10而开发 Windows Internet Explorer□10 Release Preview是体验Web的全新方式，并针对Windows 8触控设备进行了充分优化。开发者可使用相同的HTML5标记来构建丰富、交互式的网站，并让该网站可在Windows 8的两种体验中出色运行。 3.更多Web标准 Internet Explorer拥有一个基础平台，其中包含对诸如HTML5和CSS3等Web标准的大量支持。这可让开发者编写出能在所有不需要插件的现代浏览器中良好运行的代码。微软对Web标准的承诺现已突破浏览器而延伸至Windows 8。开发者可使用基于与IE相同标准的平台而构建出的Windows商店应用。 4.为Window 8中的触控设备而构建 Internet Explorer将为用户提供触摸至上的直观浏览UI，而且这些UI是专为你的手指而精心设计的。你可自然地平移、缩放和导航。借助MSPointer事件，你只需进行一次部署，即可支持多触摸输入、手写笔和鼠标交互，进而节省大量宝贵时间。你可以将你的网站固定至Windows 8开始屏幕，而让它看上去更像是本地的应用。或者为你的网站构建一个附带的Windows商店应用，让用户在浏览网页时单击一次即可发现你的网站。 5.更好的开发者工具 F12开发人员工具是一组功能强大的客户端、跨浏览器调试工具。可使用这些工具监控实时性能并通过一次单击检查HTML和CSS元素。同时可在基于标准的渲染引擎和可简化许多IT版本测试的较旧引擎间进行变更。 6.云连接 开发者可以充分利用微软所提供的服务，因此，连接到云的应用将大放异彩。当开发者使用Live SDK将应用连接到云时，应用将充分享受到单点登录所提供的优势，从而帮助用户更加轻松地存储数据并与好友和家人沟通，进而提供更加深入的沉浸式体验。

前言

　　创新，从用户体验开始　　简单、雅致、自然——Windows UI创造新视窗体验　　微软全球资深副总裁兼微软亚太研发集团主席 张亚勤　　让一个个应用图标（Apps icon）堆满你的电脑和手机屏幕，还是以更加有序（Sleek）、迅捷（Quick）、摩登（ Modern）的方式来组织你的程序和资源，让人机界面更简单、雅致、自然？自从微软认识到个人计算模式将由“PC+互联网”逐步进化至“多元终端+云”的那一刻起，我们便一直在寻求新趋势下响应甚至引领亿万用户需求的可能性。而今，我们迎来了微软继Windows 3.x（首个在世界范围内获得成功的包含图形化界面设计的微软操作系统）、Windows 95（引入了诸多全新的视觉效果及界面设计元素）之后又一次重大的人机界面创新，这就是Windows UI。　　虽然仍在向着既定目标跋涉的路上，但Windows Phone此前已然吸引了一批忠实用户——许多人对微软新移动平台的界面设计给予了肯定。的确，视觉风格方面，Windows UI提供了类似于精美杂志般的体验，由于设计语言原本便是由平面设计衍生而来的，它给人的感觉是既延续了传统、又不落后于潮流，动态磁贴（Live Title）的引入简化了用户操作的步骤，可以即时展现程序和内容的更新，而且用户可以通过点击直观又简单的色块与图示来随时获得更具深度的互动体验。之前已升级到Windows UI风格的Xbox 360系统及Windows 8均在Windows Phone的UI基础上有了更多的改进，而且我相信未来微软多元化产品界面统一化的步伐还会进一步加速。　　事实上，从Windows 7开始，微软的产品设计思路较以往已出现了很大的变化——过去我们可能更多的是“做加法”，试图将研发团队开发的各种各样的新功能融入产品中，而在Windows 7的开发过程中，我们转移了视角，变“工程师思维”为“用户思维”，致力于让整个系统更加紧凑、更有效率、更加简单。市场反响证明了这种转型是正确的。因此，在设计Windows Phone和Windows 8的界面和功能时，微软产品团队进一步通过“做减法”，把复杂的系统功能藏在背后，让用户获得更简单、雅致、自然的体验——这种体验对技术的要求更高，简洁的UI背后亦蕴含丰富的创新理念和创意价值。　　通过系统级的众多创新，我们希望以Windows UI为起点，帮助应用和系统之间、应用和应用之间搭建起互动桥梁，并最大程度地展现微软对云端计算的理解和积淀——基于Windows UI的微软操作系统均紧密地结合了“云服务”，使“云”与“端”的连接、互动更加安全和简便。由于微软所有的系统和平台均采用了同样的开发工具（Visual Studio），开发人员因而能有效地缩短开发时间、降低成本，并基于熟悉的Windows开发环境及统一的编程模型，孵化出新的应用和服务，为用户创造价值。用户无论是在接入“云”时，还是在使用Windows　PC、Windows平板电脑、Windows Phone、Xbox 360等各种“端”的过程中，都能获得延续的、一致的、熟悉的体验。　　此外，Windows UI还体现了微软应对移动互联时代不断变化的用户需求的努力。而今，中国网民数量已经超过了5亿，而其中手机网民数已近4亿，从这个角度来说中国的移动互联网市场已经趋于成熟。随着新技术的投入使用，普通网民的移动上网方式也早已经有原来的WAP上网变成了依赖于终端原生应用的上网方式——统一的、跨平台的Windows UI能帮助移动应用开发者使用最简洁的设计语言来高效完成应用的用户体验设计，把更多的资源投入产品模式的创新及研究中。我们也相信，简洁的Windows UI风格会因为它的返璞归真而逐渐受到广大用户的欢迎和真正认可，它的快速灵活和内容优先才是帮助工作繁忙、生活紧张的用户摆脱设备绑架的明智选择。　　作为一种新涌现的UI设计方向，Windows UI并不完美，也需要一段时间来让用户感受其亮点和指出可以改进的空间，不断将它优化和完善。但我深信这种基于自然用户界面（NUI）理念的计算机视觉语言会比之前任何的人机界面都更容易获得用户和开发者的认同。随着诺基亚、三星等一批搭载了Windows Phone的新手机在中国正式发布，全新的Windows UI体验让广大用户和合作伙伴看到了新的惊喜，而Windows 8的发布亦将把全球亿万用户的操作体验和视觉体验推向一个新的巅峰——我们共同期待。

内容概要

朱宏

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

新浪微博 @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

编辑推荐

《超越想象:Windows 8应用设计与开发》是第一本Window 8设计开发的著作，由微软官方写作，内容清晰详尽。相信对《超越想象:Windows 8应用设计与开发》的深入理解和运用，能帮助读者用代码创造神奇，用应用创造财富！ Windows 8的到来为应用开发者打开了一扇新的大门，在这扇门后，充满了挑战，但更多是机遇。在“内容重于形式”的设计理念已经被用户广泛接受的今天，应用开发者更应该抓住Windows 8这个全新平台所提供的机遇，用代码创造神奇，用应用创造财富。

作者简介

《超越想象:Windows 8应用设计与开发》内容简介：Windows 8的亮相，给用户和开发者均带来了全新的体验和新鲜的机遇！它的开发视角从以往的“工程师思维”转移到了“用户思维”，并基于微软“云+端”的理念，不仅提供了跨设备的用户体验，也提供了跨设备的开发体验。统一、跨平台的Windows UI将帮助开发者用最简洁的设计高效完成用户体验设计，将更多的精力和资源投入到产品创新和研究上。

图书封面

---

 超越想象下载 更多精彩书评

---