|
摘要：2012左右，扁平化设计开始成一种流行的网页设计风格。至今，它仍然被广泛使用，但同时也导致了一些严重的易用性问题。其中一个最大的问题就是扁平化设计导致了可点击元素的信号缺失。扁平化2.0也许能提供更好选择。 扁平化设计是一种流行的设计，它的定义是：不在网页的图形元素中使用平滑或3D的视觉效果。许多设计师就此认为它其实是极简主义网页设计的一个分支。 要为扁平化设计下个定义的话，我们就必须先定义：什么不是扁平化设计。扁平化设计通常被解读成一种反3D效果、反拟物化和反写实主义设计风格的运动。一个完全的扁平化设计是不会运用以上任何一种风格的。 3D效果 3D效果会在交互界面上制造出深度的错觉，而这可以帮助用户了解界面的视觉层级及哪些元素是可交互的。 · 那些凸出的元素看起来是可以按下（用鼠标点击）的。这种手法经常被用作于按键的提示信号。 · 那些下沉或凹陷的元素看起来则是可以被填充的。这种手法通常被用于输入框的提示信号，例如搜索框。 从图形界面的出现初期起，我们的界面上就经常出现模拟3D效果（阴影、渐变、高光），用以帮助用户在一瞥之下就能了解可使用的交互行为。然而，这些模拟3D效果在早期的图形界面上显得过分且富有侵略性，容易使用户分心。 这个Win 95 的对话框使用了很深的阴影和高光来制造3D效果。注意那些按钮是如何表现出凸出效果，而输入框是如何表现出凹陷效果的。它也很清晰的表明了3个tab中，哪一个是位于另两个之上的。然而，深重的阴影也很容易使界面看起来毫无吸引力。 拟物化 在设计中，拟物化设计完全是一种不必要的、纯粹观赏性的、模仿现实存在物品的特征。拟物化设计本身是希望能帮助用户在对现实存在物品的了解基础上，学会如何使用一种新的交互界面。 在早期的亚马逊 Kindle平板上，安卓系统使用了拟物化的书架设计，完全使用了3D效果的“架子”和木质纹理。书架的隐喻是为了帮助用户将过去对书架（作为一个存储并管理实体媒介的地方）的认知转移到数字环境下。这个有着木质纹理的“架子”和系统功能完全不相干，但也许会加强隐喻的效果。亚马逊之后就从UI 中移除了这个拟物化的书架设计。 写实主义 写实主义是一种出于美学原因，模仿物理物品或纹理的设计。 人们常常混淆拟物化设计和写实主义设计。在网页设计中，这两种设计往往同时出现。它们最主要的区别就在于：写实主义设计是纯粹出于美学目的的一种视觉风格，它使用设计元素和纹理去模仿物理的现实世界；而拟物化是出于隐喻的目的，期望能帮助用户理解交互界面。 例如早期的Kindle平板，Sprouts grocery chain的网页使用了3D木材纹理。然而，这个写实主义的设计纯粹只是为了美学目的。它并不包含任何隐喻，也不能帮助用户理解如何使用这个交互界面。 微软的Metro设计语言和Win 8 在2011年的发布对于扁平化设计的普及做出了特别大的影响和推动。微软的设计文档称呼这种新的风格为“真实的数字”——这个短语准确的抓住了扁平化设计的特点。和拟物化设计不同的是，扁平化设计被看作是探索数字媒介的一种方式，而不再是对于物理世界存在的复制。 而苹果的主页则为扁平化设计日益增长的普及趋势提供了有效的标杆。拟物化和写实主义设计在很长一段时间内一直是苹果设计的标志，苹果的主页直到2013年仍然还坚持使用非扁平化的设计。 2007年苹果的主页。导航栏仍然的是光滑3D效果的tab。 2012年苹果的主页。标签栏的隐喻已经消失了，但是导航栏仍然是光滑球面型的（这是个很好的写实主义设计的例子，而非拟物化）。新的搜索栏加入了阴影使得它看起来是凹陷的（看起来是个比17年前Windows的输入框优雅得多的视觉效果，但从概念上而言是一样的）。下方右侧的可视icons都太光滑了，这对于用户去理解它们到底是什么是一种非常大的干扰。这些按钮看起来不仅是凸出的，而几乎就是在发光。 2015年的苹果主页。整个导航栏包括logo，都彻底的扁平化了——没有可见的阴影、纹理、或者高光。完全没有3D、写实主义、或者拟物化效果。用户了解导航栏中的选项是可点击的唯一途径就是约定俗成的规则：一条带有强烈色彩，贯穿网页顶部的带状纹往往就是导航栏（除非它其实是个广告，但这个又太细）。 自从2011年扁平化设计出现以来，Nielsen Norman组织已经多次批评它与生俱来的易用性问题了。其对扁平化设计的主要异议之处就在于，扁平化设计试图牺牲用户的需求去满足时尚美学。 多年来，用户已经接受了传统的可点击信号。例如带有蓝色下划线的链接和带3D效果的按钮。当设计趋势变换时，用户会逐渐接受新的设计样式，用户直观识别链接元素的能力也已经逐步进化。但用户能较好地发现链接元素并不代表他们就完全不需要被给予线索。事实上，我们也发现扁平化设计的长期过度使用正缓慢地降低用户的使用效率，因为他们需要区分哪些元素是可点击的，而哪些不能。 当我们在问询一位22岁的加拿大被试时，她说她知道在网页上是可以进行点击的，她也给了我们以下的回答。“当它（指可点击元素）是蓝色而且还有下划线时，你就会知道如何开始。即使（那些元素）是单词或其他的一些东西。说真的，那真是很有效（的提示），尤其当它有下划线时。又或者当它是一个按钮时，不需要提示用户‘点这里’，只要写‘立即购买’或者‘加入购物车’就好。” 以下例子清楚的阐明了几种用户用来判断何处可点击的线索类型： · 传统的、外表一致的信号（例如带蓝色下划线的文本，凸出的按钮） · 一些怀旧的信号（例如带有下划线的其它颜色文本，带有外框的文本） · 上下文线索（例如可操作的文本、页面顶部的布局） Trader Joe的主页展示了多种可点击信号。（1）带有下划线的蓝色文本”View All“是传统的信号。（2）扁平带红色背景的”Find“是怀旧的按钮，即使它毫无3D或写实的视觉效果。（3）黑色的主导航栏链接只通过布局和文本传达出它们可点击的信号。（请注意，大多数扁平化设计网页不会使用任何拟物化的元素——好比放置着推荐产品的木质架子。） 近来，设计师们开始认识到扁平化设计的易用性问题。因此，一种更成熟、更平衡的扁平化设计应运而生。设计师们发现他们可以”返璞归真“，在不影响易用性的同时，不断探索各种可能性。 这种设计有时被称为’半扁平‘、’似扁平化设计‘、或‘扁平化2.0’。这种设计风格几乎是扁平化的，但同时也使用微妙的阴影、高光、或者用图层来创造一些UI上的层级深度。 带有长阴影的扁平化设计，这种设计风格风靡了2013年。带有长阴影设计只是扁平化2.0的错误之一——3D效果仅只是纯粹的美学展示而并不带有任何有意义的信息。谢天谢地，这种设计的流行已经衰退了，但是带有长阴影的图标设计仍被用于一些扁平化的界面。 Google的Material design语言是一个比较好的例子，它展现了扁平化2.0设计正确的层级：它使用了与物理世界一致的隐喻和规则来帮助用户理解交互界面，同时在内容中区分视觉层级。 安卓上的印象笔记是一个扁平化2.0的好例子。尽管它在页面主要使用了扁平化UI，这款App依然在导航栏里设计了一些微妙的阴影和漂浮的新增按钮。它也使用了卡片的隐喻以展现3D控件中的扁平层级效果。 与任何设计趋势一样，我们建议（扁平化设计）应该保持平衡和适度。别为了流行而牺牲易用性。永远不要忘记——除非你是在为其他的设计师做设计——你其实并不是用户。你对于可点击信号的选择和理解能力并不等同于你的用户，因为你知道每个设计中的元素是用来干什么的（而你的用户并不清楚）。 早期的虚拟3D图形界面和Steve-Job式的拟物化设计总是制造出沉重、笨拙的用户界面。适度缩减这些行为对于易用性而言才是有益的。但去除视觉区别以创造不带有任何信号的完全扁平化设计也会走向另一个糟糕的极端。而扁平化2.0提供了一个妥协的机会——（使用）简洁的视觉信号。 这篇文章是上下两篇扁平化设计文章中的上篇。明天更新下篇， 扁平化设计的长期过度使用是如何缓慢降低用户效率的 |
|
|
