扁平化设计是否代表了用户界面设计的未来?美国设计师Luke Clum对时下这股愈演愈烈的设计风潮进行了审视,看看你能从当中学到点什么吧。

文:Luke Clum1

过去,网页设计师喜欢通过在站点中植入大量花里胡哨的插图和动画来炫技,他们认为这能引起访问者的惊叹。此后业界又兴起了所谓的「拟物化设计」2,其宗旨是运用仿真纹理、阴影和真实事物的特性令屏幕上的元素显得更逼真。

如今,所有这一切都开始为「扁平化设计」3让道,这一设计思路与此前的「人造真实」技术截然相反,转而推崇更简约、更经典也更符合数字审美的表现形式。如果你正在寻找一种以用户为中心的设计风格,那么这种「扁平化潮流」或许就是你需要的……

何为扁平化设计?

Windows 8处在扁平化设计的前沿

用一句话来概括:扁平化设计就是一种强调实用性的极简主义设计方案,干净敞亮的空间、干脆利落的边缘、明亮的色彩和二维(扁平化)插图是它最显著的特点。

微软是最早将这种设计风格运用到用户界面中的开发者之一,它的这一行为在当时被视作对苹果iOS界面中备受欢迎的拟物设计所作的一种还击。与把现实生活中的物件——例如日历——转化成一幅微型的写实插图不同,扁平化设计提倡通过一些简单的图标式图像来识别应用。

这种设计方式在科技和可以接触到的物体之间划出了一道清晰的界线,而不是一味将现实生活中的物体样貌带入界面。

极简主义不等于乏味

在扁平化设计中,装饰元素被视作一种非必要的乱象。一个没有实际功能的视觉元素会分散用户的注意力。这就是扁平化设计采用极简主义本质的原因。

然而,缺少花里胡哨的设计并不意味着这种风格会令人感到乏味。鲜亮、高对比度的色彩将令插图和按钮从背景中脱颖而出,很容易引起人们的注意并对用户的视线起到指引作用。简化图像的用意也是为了突出扁平化设计的功能性特点。

快速领会信息内容

简单的图像在传递信息的时候要比复杂的插图更为迅捷。类似图标这样的图像可以代表常见动作或用途,因此每个人都能轻松读懂它们。

我们很容易发现拟物化设计和扁平化设计之间的区别。大面积的实心色块更容易吸引注意力,图标的含义也能很快被察觉。

Xero的云计算指南用扁平化设计令信息变得更容易被接受

Xero公司在互联网上发布的这份《云计算指南》就用到了扁平化插图和图标的组合,来阐述用「云」工作有哪些好处。简洁的图像使人们很容易获取其中的信息,省去了发表长篇大论的麻烦。

你可以从中学到什么?

扁平化设计令设计回到了「为功能服务」的本源。网站将再次以「运作得怎样」得到设计和评判,而不是「看上去怎样」。

这种剔除雕琢的功能性迫使网站将注意力集中在用户体验方面,因此能够成功运用此类设计风格的网站很可能得到「对用户友好」这样的积极反馈。

如何做到

要设计一个极富效率的扁平化网站,所有设计元素必须以简约为中心。

鲜艳的实心色块可以把原本需要分散在各部分的说明性细节融入一处,并起到强调的作用;无衬线字体则能为插图提供一个整洁、直接的补充说明;简洁的文本要直击要领;类似按钮、链接这样图形界面元素必须清晰而明显。

在设计时,每个元素都应当实现同一目的,这样才能设计出一个视觉性和功能性相结合的网页。

扁平化设计实例

色彩和图标能帮助这些简单的界面传递信息

这个由印度尼西亚用户界面设计师Bady设计的旅行策划应用界面令基于预算和行李状况而进行的机票预订变得相当简单。界面中的一切都整洁而易于理解,同时大部分设计也需要用色彩和图标来传递含义。这个界面非常简洁,其功能性目标也很明确:帮助用户搜索到一个理想的航班。

LayerVault网站告诉你如何将动画植入扁平化设计方案

LayerVault是一个对用户很友好的在线设计和文件存储工具。这个网站的整体设计和制作就很好地体现了扁平化设计的目标。所有插图、色彩、文字和界面元素都反映了扁平化设计的思路,突出了该网站对易用性的保证。LayerVault上还有一些简单的动画,告诉人们扁平化设计还能利用不同的设计方法再进一步,同时又不会令访问者分心。

扁平化设计不一定要依靠鲜艳的色彩

这个天气应用界面告诉我们,扁平化设计即便不用鲜艳的色彩也能取得成功。干脆的图标设计和宽大的字体将人们的注意都集中到重要的天气信息上,而这正是用户在寻找的。

在自己的作品中运用扁平化设计的时候,请确保每个细节都能符合极简主义和贴近用户的要求,以此获得一个风格统一的界面。一旦你成功做到了这一点,你的用户会更用心地去欣赏网站在功能方面的亮点。

点击看原文



  1. Luke Clum是定居西雅图的设计师和网络开发者。  

  2. skeuomorphic design,指一种对事物特性进行模仿的设计方式,译成「拟物化设计」并不确切,但目前并没有更好的译法。  

  3. flat design。