扁平和简约的兴起

扁平和简约的兴起

编辑注记:本文编译自 Flat And Thin Are In,梳理了设计风格由 3D、拟物到扁平、简约的变化原因,同时也讲述了一些设计要点。

正在发生的转变

人们的观念是如何从对物质纹理、倾斜的光影、下拉阴影的喜爱转变到扁平色彩和简单排版上来的?其中有许多因素,但显然这几点是主要的。

信息过载

我们现在几乎无时无刻不在互联网上,随时随地接受大量信息,需要我们去评估其价值,过滤不重要的,或者创造新的内容。这些都给我们造成大量负荷。尤其是现在小屏幕设备流行,致使我们更需要减少过度繁杂元素的交互界面设计。

免于杂乱:Geckoboard的可视化的设计使关键数据一目了然容易解释。

简单是一种趋势

现在许多颠覆性的网页应用和服务都专注在少量的功能和特性上,这一趋势也使一些传统上提供大而全功能的开发者也开始专注于功能简单的“轻应用”上。简单的应用也就意味着简单的交互界面。

美丽和简约,来自Oak的天气应用The Blue

又一次,内容为王

大量新的设备和技术涌入市场,我们也开始热衷于思考科技能为我们带来什么,我们又能怎样推进它的发展。这就导致了人们对内容本身的关注的回归。媒体资源的消费,无论是文字、音乐还是视频,很显然是我们面对数码设备的主要活动内容,当你专注于其中时,肯定不希望被无关的界面元素打扰。

科技素养的提高

智能手机和平板提高了人们操作科技产品的能力,过去,如果屏幕少了个按钮,人们就会束手无策。但现在,人们更愿意去尝试各种微妙的交互方式。触控操作正在流行,过度的视觉指示也显得没那么必要了。

Fitbit的仪表板明亮,大胆,视觉识别和操作简单易上手。

技术本身的影响

许多软件都受其运行平台的限制。屏幕尺寸、像素密度也受到设备硬件条件的影响。一个简约的界面需要有限的设计元素,这意味着每一个元素都要发挥作用。排版布局和字体粗细在一定程度上决定了扁平设计的美观和易用性。

随着屏幕尺寸和像素密度在不断增加,更细、更小的样式也能有更佳的清晰度。当然, 对 @font-face 的支持也为注重排版的简约设计提供便利。

Wallmob销售信息监测界面:可从任何设备的浏览器跟踪记录。

响应式设计

随着各种像素密度的联网设备的普及,交互界面变得更需要强调适应其变化,响应式设计也就孕育而出。虽然响应式设计并没有风格上的固定的要求,但扁平的交互界面显然比其它样式要更容易处理。

 OnSite的响应式设计:缩小窗口会减少元素

最佳实践

好了,停止理论上的唠叨,让我们看看实践上的操作吧。设计一个有效的简约风格并不容易。当你丢掉那些花哨的元素,就会意识到剩下的元素有多重要。

开始之前

开始之前先确定扁平设计风格符合目标用户的认知需求,适应目标平台、设备和应用类型。切忌不要跟风。

流程

下面几个要点对简约设计至关重要。

  • 设计简约界面时,我常常会从个人电脑兴起之前的设计中寻找灵感。
  • 放松,暂时停止工作一会也会有帮助。扁平和简约设计关乎到细微的差异,短暂的休息会给你全新的眼光。
  • 对比不同的版本同样有帮助。那怕 20 分钟前将一个线条下移 5 个像素,对比两个版本能很快看出好坏。
  • 由于物件之间的大小关联非常重要,要及早在不同的目标设备上测试。
  • 整个过程中不断问自己“真的需要吗?”。添加一些有趣的元素、样式会很吸引人,但必须始终记住简约的需求。剔除不必要的元素,留下最需要的。

Global Closet:National Geographic Education by The Workshop设计的交互游戏

网格

如果你想使设计有序、易用,网格会起到很大的帮助。

  • 网格可以定义内容和功能。简单的对齐和间距就能帮助用户理解界面结构。
  • 可以打破网格的结构,突出重要的元素来吸引用户注意力。告别虚假的 3D 元素后,物件大小和布局就是展现视觉层次的关键。
  • 尝试一下你不习惯的更密集的网格设计。当你减少这些元素时,又会发现它可以承载更复杂的结构,也不显得凌乱。

Rossul Design设计的iPad应用Live School

颜色

颜色在简约设计中扮演重要角色。

  • 考虑一个更广泛的配色方案。
  • 设置配色方案时,测试色调值有个很宽的频谱,确保有更亮的和更暗的版本。
  • 越早的实验配色方案,可以确保你无论是微妙变化和高对比度元素都有足够的选择空间。

TriplAgent的视觉设计使用了令人惊喜的配色方案。

文字排版

文字排版是扁平设计中的英雄。

  • 衬线是一种选择,无衬线则会显得更干净。
  • 更广泛的字体选择最会有好处,你会发现字体也可以定义出层次,而有些字体会更适合某些元素。
  • 不要害怕将差异显著的字体放在一起,可以尝试下用超大、超细的字体作标题,而中等粗细的小号字体作正文。
  • 确保字体易于阅读。

Siteleaf的简介易读的文字排版方式

交互

在扁平设计中,要让人意识到这是可以交互的元素会显得比较棘手。这里有几个好方法。

  • 活用对比法。如果布局是白色,你可以给交互元素一点彩色;如果是文字为主,可以使用图标;如果标题是大号小写字母,链接可以小号大写字母。就是这个意思。
  • 传统的布局也会有帮助。就是说无论你怎么设计返回按钮,还是要把它放在大家习惯的地方。
  • 交互应该尽可能直观。虽然在功能较多的页面把每个交互元素都设计成按钮没意义,但如果某种交互特别复杂或者出乎意料,还是需要容易理解的方式。
  • 下拉框、弹出窗、侧滑栏以及其它层级元素在扁平设计中会引起麻烦。而对鲜明的对比、边框、着色的处理,也能区分出交互层级。

Taasky:简单布局和醒目的对比方式展示设计元素

总结

设计没有硬性的教条。扁平就不需要渐变和阴影吗?当然不是。另外。简约的设计虽然也不是每件事的最佳选择,但也能给我们带来易用和愉快的数字生活体验。

扁平设计设计风格响应式设计产品设计
下载极客公园客户端
iOS下载
反馈