网站设计分析：用扁平化界面设计吸引用户.pdf

网站设计分析：用扁平化的界面设计吸引用户 在传统的网页开发乃至现在针对移动设备所做的设计，复杂炫目的效果对产品而言未必 是一个好的选择。 尤其在移动设备上，过于复杂的效果非但很少能为应用吸引用户，反而时常让用户在视 觉上产生疲劳，对产品界面中最基本的功能产生认知上的障碍。因此我们在设计中就需要参 考“扁平化” 的美学。 什么是扁平化设计 在实际当中，“扁平化设计”一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等 拟真视觉效果，从而打造出一种看上去更“平” 的界面。 Layervault 的设计师Allen Grinshtein 曾经在HackerNews 的一篇文章当中说： “长久以来，网站的界面风格似乎都在遵从着同一种设计美学，大家都在用斜面、渐变、 阴影一类的效果来突出界面元素的质感。对于设计师们来说，制作这类‘可爱’的元素简直变 成了行规甚至是荣誉。不过对于我们，以及为数不多的其他一些设计师来说，这种惯用的方 式并非一定正确。” 去Layervault 看上几眼，四处转转，你会发现他们所追求的这种于简约当中体现出的视 觉美感。看到我们一直以来习惯了的那些视觉风格正在越来越多的网站和移动应用产品中被 潜移默化的颠覆着，也是蛮有意思的事情。下面是其他一些例子： Squarespace 新版的Squarespace 几乎完全采用了扁平化的视觉风格，只在一些细节当中使用了相对 传统的方式突出了重要的交互元素。试用一下你就会发现，其实他们的产品在功能逻辑上还 是蛮复杂的，但这一切都隐含在简约直白的界面背后，你真的可以从中隐约感受到其设计团 队付出的心血。 相关阅读：简洁至上的Web 设计 – 创意要素及设计技巧 Facebook 另外一个大家所熟悉的例子就是Facebook 了。 “Facebook 是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的 斜面效果以外，其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样 的特色，至少我们可以说这种设计风格对于Facebook 来说是完全适用的。” - Ian Storm Taylor(Segment.io) Rdio Rdio 最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格，你 很难找到使用了阴影、渐变等效果的界面元素。 相关阅读：最小化可用性设计 Nest 我曾经作为前端工程师参与过Nest 的网站开发，现在依然记得他们的设计师对扁平风 格的热情追求。在他们的网站中，实际的产品及相关的应用环境照片作为“真实”元素融入到 扁平风格的媒介载体( 网站本身) 当中，虚实结合，让访问者可以很容易的将注意力聚焦在产 品上，而不会被网站界面上的视觉元素所干扰。 Beforweb 译者小站乱入…译者@C7210 注 对拟物化的逆袭 正如20 世纪建筑界当中的极简主义运动，扁平化设计风格的逐渐兴起也可以被看作是 对多年以来过度设计、过度雕琢的界面风格的逆袭;尤其是最近一段时间，苹果一直以来的 拟物风格被诟病的蛮犀利的。 Wikipedia 对拟物化(“仿制品”、“Skeuomorph”) 的定义是： 原有物件中某些必需的形式在新的设计中已不再必要，但新设计仍模仿旧有形式，以使 新的外观让人感觉熟悉和亲切。 举个例子，我们通常会为界面当中的按钮添加渐变和投影效果，因为现实当中的按钮就 是具有这些视觉特征的，即使这些效果对于界面元素的功能来说没有任何实际意义。又譬如 有些天气方面的应用会使用温度计的形式来展示气温;在现实世界中，这种实体的存在是必 需的，而在应用软件当中，温度计的形象则纯粹是装饰性的。 日历应用当中皮革质地的设计元素是必需的吗?如果按钮上不使用3D 质感，用户是否 还知道它们可以被点击?有多少装饰性的元素是真正必要的? “在现实生活中，当按钮被按下时，你可以清楚的感受到它的弹性，但在桌面设备或移 动设备的显示屏上，你无法感觉到这种物理回馈。看上去是实体的东西却无法让人感受到实 体本该具有的反馈效应，至少对我来说这是一种很蹩脚的、不符合预期的体验。” – Allan Yu (svpply / eBay) 形式服务于功能 20 世纪建筑界的极简主义运动当中提出了一些著名的口号，包括“形式服务于功能(form follows function)”