平面设计如何影响交互的未来

百度无线MUX团队在《2012年移动应用十大设计趋势》中提到了“平面化的视觉风格”这一趋势，同时微软在Windows 8平板中引入了Metro风格。所以，平面设计渐渐地印象着我们。

文章作者Mike Kruzeniski目前是Windows Phone设计工作室的创意总监，主要领导Windows Phone App team。该内容主要是其在2011年3月12日SXSW交互大会上的发言，PPT内容可见于Slideshare——How
print design is the future of interaction。

简介

这次讲演我提到了三个方面。第一，UI的可视化语言是如何进化并形成我们当今所熟悉的界面形态；第二，我将讨论：我为何认为受平面设计影响的可视化界面设计新方法正在涌现且是必须的；第三，我为何认为平面设计将对下一代UI的演变产生重要的影响，同时我们（作为UI设计师和交互设计师）能向平面设计法则学习什么。

提及“平面”，我并不是对纸质媒体到显示器的文字转换问题感兴趣，例如，就像我们所看到的一些应用尝试着重现报纸的准确纹理和布局结构。而我所感兴趣的是过去近一百年里平面设计的丰富经验积累和重新定义的设计与信息沟通的种种原则。这些是我所认为的拥有巨大关联性且对交互和UI设计产生重要影响的基本设计原则。

交互设计简史

追溯现代用户界面的历史，起源于Vannevar Bush的Memex机器。在1945年寄给

《The Atlantic Monthly》编辑的一封信中，Bush描述了一款嵌入桌子的机器——它允许所有者进行存储、注释和链接文件及媒体。桌子的界面分为两个显示屏：一个显示信息，另一个可以记录笔记、注释或链接其他材料。这款机器能帮助人们组织大量的知识集，所以被一些人认为是现代网络的原始蓝图之一。

无论如何，Memex为斯坦福大学研究院（SRI）和施乐帕洛阿尔托研究中心（Xerox PARC）联合研制的第一台电脑的相关设计孕育了很多灵感。1973年，第一个图形用户界面（GUI）在施乐帕洛阿图研究中心诞生，并引入了“桌面”的称呼。UI包括了窗体（Windows）、图标（icons）、菜单（menus）、文件管理（file management）和工具栏（tool
palettes）。回首第一款GUI设计的截图，直到现在还是如此的熟悉。1974年，施乐帕洛阿图研究中心开发出了一款所见即所得（What-You-See-Is-What-You-Get）的复制和剪切界面，同时1975年他们展示了首款弹出式菜单（pop-up menus）。而桌面概念直至1981年才在商务型的Xerox Star PC界面中正式推出——这对微软（Microsoft）、苹果（Apple）、NeXT和Sun Microsystems的PC用户界面形成产生了深远的影响。在八十至九十年代，这样的概念被成功推广应用至更多的领域，其中包括实物和相关环境，例如，办公室、书架、门、走廊、人、动物甚至是Magic
Cap和Microsoft BOB中的街景。

注：PARC背景http://finance.sina.com.cn/roll/20120109/144711158944.shtml

再来看数十年后的现代PC界面，你会发现那些早期的概念和设计模式都得到了落实和巩固。16位到32位色UI的变革促生了更多细节化的成果。众多的概念也被规范为一些术语——斜角（bevels）、光晕（glows）、阴影（shadows）、反射（reflections）和光泽度（gloss）。一些控件术语也应运而生，如旋钮（knobs）、开关（switches）、表盘（dials）、工具（tools）和更具真实感及对比度的三维按钮（three-dimensional buttons）。

虽然对于界面元素的渲染已经变得愈加复杂，但大家热情不减。媒体，例如图书、照片和音乐，都在通过一些细节、阴影或纹理来为用户呈现实物的外观和感觉。当一些主流的用户界面依赖纹理、阴影和灯光效果来呈现2D平面效果，一些Bumptop（一款极酷的3D桌面效果软件）等界面使得桌面概念向更深方向发展——譬如，设计了3D桌面效果，将实物像引入到icon让桌面移动操作更具真实感。而Web
2.0设计优化或抛弃了桌面的一些缺陷，保留了概念性和结构性的东西。随着电脑性能日益提高，视觉设计的关注点主要在修正一些概念而不是探索其他的方法：更多的细节、光泽度、质感、深度、阴影和透明度——这俨然是在电脑中重构我们的现实世界。与30年前相比，这种方式现在已经没有意义了。

由于带宽的约束和渲染技术的限制,桌面端和Web端的UI发展截然不同了。第一代Web站点以文本和链接构成的表格形式呈现，关注点在于传递最基础的信息。一段时间后，网页加入了更多的内容，例如照片、视频，网页设计的关注点转移到了如何提高内容的组织性和互动性。Web着力于信息架构，而不是去重新构建或修正物理控件隐喻（physical control metaphors）。

产品和信息

第一个界面构建的基础是沟通需求。他们类似于一张桌子。他们完全是新的，所以直接展示的方式很合适。为了让人理解单词“OK”是一种新的动作，通过按钮的纹理和阴影处理来清楚地表示它是可按的。时至今日，大多数屏幕内容都是可交互的。文字辅助功能可见性（the literal analog affordance）不再需要了，然而它却是许多交互体验默认的方法。我们不再需要让电子书变得跟一本书一般来让人理解如何使用。书脱离了封面和装订的概念，图片和文字直接构成了故事。类似，电影也不必看起来像架子上的DVD，混音器不必成为依赖线缆和旋钮的工具，记事本也不需要皮革和螺线装订的修饰。在交互设计的早期，软件的概念需要通过强烈的手控隐喻（heavy
handed metaphors）来很好地解释，这些造型和纹理熟悉度是很合适的。然而，产品的渲染表现已经超越了本身的可用性来作为UI设计的绝对方法。作为设计师，我们需要批判性认识：肤浅、无意义、经常性分散信息注意力。

“皮革式按钮…感觉就像真的：俗气。这感觉起来是错的，而且它就是错的。如此的粗制滥造。如果样式大于功能导致产品的四不像，那么你就不是一名产品设计师，是个幻想家。”——Oliver Reichenstei

“铬元素起因于恋物癖特征的慢性病人。现实世界里，我们喜欢与实物进行交互，以此类推，如果电脑中的软件也塑造成实物来与之交互，我们应该更加愉悦。但是为什么会有这样推理呢？”——Steven Poole

功能上讲，相似物隐喻（analog metaphors）说得好听点是限制，讲的难听点是误导。与物理的无连接内容相比，我期待数字网络内容能拥有新颖、出彩的功能表现。新的界面需要支持新兴的交互，并适当稀释相似物隐喻的使用。对于如此多的数字内容，不再需要好的隐喻进行渲染——内容仅仅是信息、文字和图片——所以迫切需要新的可视化UI设计方法。这个年代里，我们的交互是基于信息而不是面向工具，用于产品的可视化交流语言不再是相关的。界面的价值是其需要展示的信息，不是信息所属的物理通道。

“…数字交互式的《道德经》（the Tao Te Ching）本质上与我书架上的没有区别。当你放弃了有形东西的同时，你会得到非凡的新能力——塞翁失马，焉知非福？难道不是界面反映了这一切？”——Adam Greenfield

改变的价值在于改变本身。机械式界面不再需要被阐述或加强。作为交互设计师，我们的角色已经从让UI如工具般熟悉转移到让大量连接信息产生交流。表单和功能的天平已经把关注点从事物如何工作向如何传达信息和意思倾斜。UI的可视化质量很重要，但是比起早期信息设计领域的领军人物，如Paul Rand、Massimo Vignelli，在当前数字设备的外观和体验设计方面，当代的我们亏欠早期斯坦福、施乐的工程师们太多。

向平面印刷学习

作为工艺，纸质媒体设计拥有丰富的历史背景。数代设计师已经把它的边界扩张至各个方向。经过数百年地塑造，它已经成为一个功能和美学兼具的学科，拥有深厚的原则、实战、理论和专业对话等基础。它经历了许多阶段，受技术、政治和文化运动等发展的影响。国际主义平面设计风格（International Typographic Style，原文为：International
Style）运动，也称“瑞士平面设计风格（Swiss Style）”运动，建立了一套与当代交互设计面临的挑战相关的思维方式。

相关资料（译者注）:

International Typographic Style Posters, 1950-1971
SWISS DESIGN http://www.designishistory.com/home/swiss/
The Evolution of the International Typographic Style: From Print to Web
The International Typographic Style

“国际主义平面设计风格”抵制1950年代前平面设计常见的纹饰、点缀、插画和装饰效果滥用。功能上，“国际主义平面设计风格”创建了一个平台去思考那些对UI设计非常有用的信息：组织信息的精确网格、紧凑的结构、可识别和记忆的图解、杂乱过后的简单和明晰、真实性、透过摄影的客观性以及一颗关注细节的敏锐的心。既然平面设计已经继续着变革，那么作为当代印刷设计实践的基础，这些设计原则也沿用了下来。

1999年，Jakob Nielsen认为：“一个优秀的平面设计很可能变成一个差劲的网页设计。这两种媒介截然不同，必须采取不同的设计方法达到扬长避短的效果。”我不同意。历史锤炼而成的平面设计相关原则同样适用于交互。它们都是使得交流更加清晰，系统更加简单。我相信我们能向平面设计学习并应用于交互体验：

1. 网格的层次和结构





“优质的网格系统能够是你的设计不仅更加美观可读，而且更可用。”——Mark Boulton

大多数交互设计皆关注于降低复杂度。网格系统在逻辑、一致且有意义的框架里组织信息，设计师和开发者都能够参与其中。网格为视野提供了参照系，提高了可读性。几何式的布局创建了一个视觉层次，从而让用户轻松地浏览和挖掘信息。

2. 充分利用负空间（Negative space）





“当设计到了不是没什么东西可以加了，而是没有什么东西可以砍掉了的时候，就完美了！”——Antoine de Saint-Exupery

UI设计的共同目标是尽可能的在给定的屏幕上展现更多的信息。然而，适当的留白可以突出重点，让沟通更加清晰，创造影响力。一个协调的页面能让突出的信息更加易消化。

3. 精简元素





“少即是多。”——Robert Browning

“任何事情都应该尽可能做到简单，但不要过于简单。”——爱因斯坦（Albert Einstein）

UI元素使所包含的内容更加杂乱。设计师的角色就是通过编辑寻找平衡。将界面减少至最基础的元素意味着注意力转移到用户界面最主要的任务。降低信息密度，塑造的UI会很轻巧、精致、快速和自响应。

4. 通过图像构建客观性（Objectivity through Imagery）




谈到“瑞士风格平面设计”，印象最深的是排版技术，其实摄影也是该风格很重要的部分。与插画相比，照片是一种传达信息更准确的方法。类似的，用户想要的是内容，不是浏览的界面。使用图像代替图标和插画降低了意图转达的必要性，利用内容促进了直接的交互。

5. 强调版式




强调排版并不是把界面减成只有文字。好的样式能通过大小和粗细的调节，达到效果，明确层次、方向和节奏。Diogo Terror在《Lessons from Swiss Style Graphic》一文中很好地阐述了版式对UI的强大作用。

“字体大小是影响可读性、效果和节奏的工具。不同的字体不仅营造不同的效果，同时向读者暗示了所展现数据的层次性。大的文字是内容信息架构及页面层次的入口和顶层元素。页面是内容的入口，通过页面引导读者的视线是一种极为有效的方法。 ”

6. 比例和节奏




平面设计中，元素的比例决定了一个故事呈现的节奏。它决定了内容阅读的方向，赋予了内容相关的特征。

7. 通用的图解（Universal Iconography）




“国际主义平面设计风格”追求图解的标准和简单性，那样全球的人都能够理解图标的含义。当代图标的使用已经变得愈加奔放且没有节制，以致于我们抛弃了常识。图解虽作为装饰元素被频繁使用，但正在失去很多的沟通价值。

源于平面的设计灵感

已经有很多设计师运用平面设计的灵感来处理用户界面。几年前Dustin Curtis就提出了一个对美国航空（American Airlines）首页重新设计的方案，颇受欢迎。尽管他没有明确表示平面是其灵感的源头，但是干净、逼真且具有很强结构性的设计效果总让人感觉很熟悉。闲暇时候，我利用平面的原则娱乐性地重新设计了facebook.com。在今年的IxDA会议上，来自Adobe的设计师们引用了平面作为新Photoshop.com的设计灵感之一。在微软，平面设计已经成了很多项目的设计灵感，远可追溯到Encarta
95、Media Center，近可看看Zune和Windows Phone 7的重新设计。最近其他的一些案例包括Nike Betterworld微站点、Edition
29、Flipboard以及BERG London设计的Popular Science杂志应用。

无为的设计（The Undesigning）

在十一月份的《The Atlantic》论文中，Dylan Tweeney尝试着剖析Flipboard和Readability等新内容阅读器背后的设计趋势。他将内容从原格式中分离提取出干净、极简且易读的设计方法定义为“The Undesigned Web”。用户并不想要过多的设计，愿意使用一些简单、“无设计”的工具，比如Instapaper。很不幸的是，“设计”似乎已经变成了噪音、过度图片化、过重修饰和花哨体验的代名词。这些问题，在Andrei
Herasimchuk的《The Culture of Fugly》一文中得到了很好地阐述：

“Paul Rand曾写下著名的一段话：相比好的设计，大众更加熟悉什么是差的设计。实际上人们更习惯于坏的设计，因为这就是与之伴随的生活。新事物总是让人惶恐，而经典的东西总是让人历久弥新。在互联网和高科技产品设计中，Mr. Rand的观察可谓是非常好的注解。”——Andrei Herasimchuk

考虑到这些因素，我相信UI设计需要向平面设计寻找灵感，并将其作为我们工作的基准。不管平面印刷是否已死，但平面设计依然活着。我们需要将平面设计的思维、审美和质量标准应用于数字界面。同时我们需要经验丰富的平面设计师将他们的敏感性带入用户界面设计。所谓Web的“无设计”需要被公认为当今最好的设计案例，而非缺乏的案例。

“我认为，平面是新黑色（the new black意味为黑色赋予更丰富的质感与色泽）；2 D是新的前卫派；一个界面不需以成为一个界面为耻。”——Steve Poole

类似Flipboard等产品是非常吸引人的，因为他们是以突出内容为核心设计点，而不是以提供工具式的体验来哗众取宠。这些体验设计正在被交互设计的新思维驱动，其中视觉设计是体验的核心，而不是狗尾续貂。一旦脱离了传统的UI元素，设计师能够将精力投入到内容的设计中，结果它会看起来跟印刷平面一样。如果我们将视觉设计置于产品创造的前端，我们就能够释放自身存在的那些不好的设计习惯。作为交互设计师，我们能够停止修正我们的图标，而把精力集中于内置内容和风格的沟通。回报很简单：产品更精致，更易用且提供具有更多自我展现空间的优质品牌体验。

原文章地址：http://mkruzeniski.posterous.com/how-print-design-is-the-future-of-interaction#!/

注：由于原文章无法正常浏览，还有一些样例图片可点击此处浏览。