第1章 认识Windows UI

1.1 关于Windows UI

整本书会围绕着Windows UI这个词展开，这里要说的Windows UI是一种基于排版的设计语言（Typography-based Design Language）。Windows UI的设计风格最早来源于瑞士平面设计，当然它起初并不是以Windows来命名的，不光是平面设计，在建筑、时装、书籍排版设计等各处都能看到这种基于排版的设计语言的影子。

而近年在微软最新的各系列产品设计中都大量使用了这样一种风格来进行UI设计，它最终被命名为Windows UI。计算机应用设计中的Windows UI来源于美国华盛顿州金县都会交通局（King County Metro）的标识设计，这种风格大量采用硕大突兀的字体和醒目整齐的色块来吸引人们的注意，如图1-1所示。

1.1.1 Windows UI 的发展历程

1. 设计背景 （见图1-2）

Windows UI最早出现在微软电子百科全书95，随后在Windows XP的Windows Media Center中有所体现，它有利于以文字为主的界面导航。2006年著名的Zune播放器开始使用类似Windows UI的设计风格，Zune的桌面客户端程序的清爽排版和设计给用户带来了耳目一新的冲击（见图1-3和图1-4）。微软的设计师计划重新设计现有用户界面，采用更清爽的排版和较少的重点，以便于用户使用。当前，Windows UI已经应用在Windows Phone、Windows 8、Office和Xbox 360等产品中。

2. 设计灵感

机场和地铁的指示牌给了微软设计团队灵感，微软认为Windows UI的设计主题应该是“光滑、快、现代”。生活中人们行色匆匆，我们更需要提供快速、简洁、直接、明确的设计，使人们即使在急于奔波的时候，也能一眼获得他们需要的信息（见图1-5）。

Windows UI的设计灵感来源有三个重要影响：第一是减少元素，以显现本质，摆脱束缚的现代设计理念；第二是清晰真实、美观的平面设计风格；还有就是让动画“活”起来的动态设计思想。

1.1.2 Windows UI的设计理念

Windows UI的设计理念由最核心的五个原则组成，它们是：

简洁与快速（clean, light, open, fast）

注重排版和布局（celebrate typography）

内容重于形式（content before chrome）

生动而有灵魂（alive& in motion）

返璞归真（authentically digital）

当然以上这些设计理念在不同的软件产品中会有一些不同的具体表现形式，根据产品特性不同、应用场景不同而表现出不同的侧重点及具体特性。但是核心的理念特征却一直保持统一，那就是“内容重于形式”。

1. 简洁与快速

20世纪50年代期间，一种崭新的平面设计风格在联邦德国与瑞士形成，被称为“瑞士平面设计风格”（见图1-6），由于这种风格简单明确，传达功能准确，因此流行于全世界，成为二战后影响最大、国际最流行的设计风格，并被称为“国际主义平面设计风格”。

瑞士平面设计风格稳健，四平八稳地传达设计，给人印象深刻。不少人认为瑞士风格是一个统一的、单一的风格，瑞士设计家大部分不同意这种看法，他们往往强调瑞士国家虽然小，但是设计风格变化多端，极为丰富。直到现在，瑞士的平面设计依然具有强烈的整洁、严谨、工整、理性化的特征，一丝不苟，传达准确，形式单调乏味。

正如微软的一位设计总监所说：“Windows UI的哲学是‘化繁为简’（do a lot with a little），富有创意地进行排版、去掉装饰物，让版面自己说话，这样才能让内容成为主角。”事实上这一设计的基本元素在生活中随处可见：地铁站、机场或路旁的各类指示牌上。它们保证人们即使在步履匆匆的时候，也能从这些平面中获取足够的信息。而微软也把这种理念迁移至用户界面上，不论你使用的社交网络信息流动有多快，都可以通过这种平面设计获得支持，不仅可以快速浏览到自己关注的重要信息，还可以高效地完成更多日程安排。

2. 注重排版与布局

为了达到干净、清爽与快速的准则，在进行Windows UI风格设计时需要重点考虑到的设计元素有如下这些：对齐、间距、列表、文本、标题、按键、图标。其中对齐和间距决定着整个系统界面的整齐和可阅读性；列表是文本、标题和对齐、间距的统一组合表现，这些元素的作用在列表中是最一目了然的；另外按键和图标的简洁易懂也能帮助整个界面更加扁平化及高效化（见图1-7～图1-9）。

3. 内容重于形式

让内容跳出框架的点缀来突出自己的重要性，并且在时间碎片中找寻更多的信息，这就是Windows UI为Windows所定制的设计理念。这是一个效率化的现代社会，虽然当今主流手机的众多花哨功能让大家应接不暇，但是并不是所有用户都有足够的时间来被设备绑架。很多设备有着华丽的桌面，有着好玩的解锁交互，甚至连分类程序、删除文件都有着很华丽的过程，但是这些是不是我们使用这台设备时真正需要的呢？

从Windows UI的角度出发，用户使用一个应用，找到它并且打开它，为的是获取它的最新内容并做出响应，这些动作完成之后则退出应用或者停止使用设备。用户的使用并不是为了体验这个应用设计得如何出色、如何华丽——当然，也许在某种意义上这些也是不可缺少的——用户在乎的是内容，并不是形式，尽管形式有时候更容易吸引人（见图1-10）。

4. 生动而有灵魂

当灵动性被忽略时，你所看到的界面更接近于UNIX Shell的体验，这不会对用户产生太大的吸引力。在Windows UI上开发者很容易做出简洁而突出内容的界面，但是“Windows UI不是停止界面设计的借口”，你需要考虑配色、动画和小细节，突出应用的风格。

比如说Windows 8和Windows Phone上都用到了“Live Tile”活动动态磁贴的设计，就是Windows UI生动而有灵魂的最好体现。动态磁贴是一个等级严密的结构，由内容概要开始，逐级深入，级别越深，内容越详细。在如图1-11和图1-12所示样例中，动态磁贴用来显示当前的天气状况和股票信息。如果用户只想了解当前天气的基本状况，那么他们并不需要去打开应用，因为基本信息已经完全显示了。但如果他们希望了解今后几天的天气预报或者其他细节，那么再去打开应用也不迟。

5. 返璞归真

当Windows UI设计的各项要素一一在界面上得到贯彻时，整个应用界面自然就有了一种返璞归真的感觉（见图1-13）。因为这时屏幕上只留下了用户当前最关注的内容，摒弃了各种无关紧要的花哨点缀，这也是我们所说的Windows UI的设计精髓“内容重于形式”的终极体现。在多年的计算机人机交互界面的设计上，我们花费过多的时间来进行仿真的视觉设计和交互设计，致力于在原本平面的屏幕画板上营造出立体层次效果，殊不知这样的结果往往是更多的精力被用在和内容本身无关的工作上。而Windows UI要带给设计师和用户的只有内容的表现形式，用内容本身来表现自己的形式，我们也称为“沉浸式”的体验，屏幕上只留下内容，命令和导航都默认隐藏起来，这正是一种设计语言上的返璞归真。这种返璞归真我们也可以理解成是由GUI（图形用户界面）向NUI（自然用户界面）的逐步演变过程。

1.1.3 Windows UI的应用展示

Windows Phone应用设计（见图1-14～图1-18）

沉浸式的Windows 8应用设计（见图1-19～图1-23）