扁平化来了

-翻译渣这种事写出来就是求喷的，喷喷才有进步。
-从这篇开始来源什么的写到最后了。

在过去的几年间，我们见证过软件和应用界面设计的快速变化，从3-D、拟物化(skeuomorphic)到扁平、简约。尽管这个趋势已近乎无处不在，我们还是花点时间考虑我们怎么跟随它，它总体来说又是怎么影响界面设计。此外，我会分享一些关于设计扁平界面的提示和注意事项。

Interfaces on a Windows Phone 8 and Apple’s iOS 7.
Windows Phone 8和Apple’s iOS 7的界面

发生什么了？

集体意识怎么从喜爱有纹理、有斜面、有阴影的东西，到向往扁平的颜色、简约的排版呢？很多因素推动这次转变，但是有些因素特别突出。

信息过载

在不断联网的文化下，我们要处理不停流动的信息，其中一些事有用的，大部分都是没用的。我们不断地进化、过滤，当然还会制造新内容，这些都会让人筋疲力尽。此外，我们消耗的大部分内容都转移到小屏设备上，加剧信息过载的感觉。很容易就变得不堪重负，在UI上减少杂乱创造一丝视觉禅意。

Geckoboard
去除杂乱：Geckoboard的视觉设计使关键数据在扫视中也能容易理解

简单是金

在类似的趋势下，很多颠覆性的Web应用和服务都以有限的功能去提供高度专注的工具。然而传统的软件开发者尝试以过量的功能来评定高昂的价格。这个转变趋向专注型的微型应用喜欢简洁而不是功能。简洁应用意味着简洁界面。

Blue weather app
好看并简约：天气应用——Blue by Oak.

内容为王，再次强调

通常事情会这样发生：当一个新设备、技术进入市场，我们对“它能做什么、交互会怎么发展”都很着迷。界面热潮通常伴随专注内容。媒体消费，无论是文字、音频、视频，都可能是我们在手机上最常参与的活动，鉴于这样的用例，我们只想让界面消失。

技术素养

智能手机、平板已快速渗透到所有用户，关注显而易见的控制的人已经减少。然而，我们一度担心如果按钮没有突出屏幕，用户可能会漏掉这个按钮。我们现在更愿意去探索微妙的交互。Window 8和Android 上的Chrome已经支持触摸指令去使用屏幕，且没有提供任何视觉上的提示。

Fitbit
Fitbit的仪表板明亮的、黑体的、平易近人的视觉识别(VI)。

科技的影响

大部分软件受限于运行的平台。屏幕大小、像素密度都是硬件限制的因素。简约设计只需要少量的颜色，这就意味着每一个元素都需要被赞颂。排版比例、字体粗细很大程度上决定扁平设计的美学和可用性。

如果你的目标设备不能处理细微的差别，那你就不幸咯。移动设备的屏幕尺寸、像素密度会继续提升，更细更小的字体能被清晰地使用。当然，支持@font-face会促进简约专注排版的设计。

Wallmob
用Wallmob做日常的销售监控：持续从任意有浏览器的设备上跟踪数据

响应式设计

随着联网设备的尺寸增多，UI有必要变得更流动性，响应式设计的运动已经开始。响应式设计不是指某种特别的美学，有一点必须承认，扁平UI比起其他风格更适应响应式。简约设计的其他优点包括减低页面重量(page weight)（这里译成「权重」的话算是优点吗？）和加载时间。

onsite
轻量化：OnSite

最好的实践

OK，理论到此为止。我们开始进行实际性的考量。创造一个高效的简约设计是一个很大的挑战。当你远离一般的UI技巧（阴影、斜面、纹理），你很快就意识到剩下的元素有多重要。下面一些提示是最普遍适用的，特别是在扁平UI上。

开始之前

就像其他项目那样，第一部是确保你选择的风格是适用的。在你跳进扁平设计这个坑之前，先确保它匹配你目标用户的感官和你的目标平台、设备、应用类型。如果这不是好的项目方案，跟随潮流是没意义的。

过程

不管你选择什么样的风格，过程很重要。当你的目标是简单化，这些想法一定要记在你脑海。

• 设计简约界面的时候，我通常从pre-PC时代中会寻找灵感。在那个时候，设计师和艺术用更少的东西来表达更多的含义(did more with less)。这是一个很好的机会去再次拜访设计大师，如：Josef Müller-Brockmann 和 Wim Crouwel。我也会看简约的绘画，如Ellsworth Kelly；建筑师，如：Mies van der Rohe；工业设计师，如：Dieter Rams。
• 离开工作也是很重要。扁平、简约的设计都是些席位的差别。休息一下再回来，新的视角比不断锤炼更有效。
• 比较不同的版本。在用20分钟上下移动5像素以后，我会保存两个版本，然后比较它们。最佳选择很快就是浮现。
• 由于项目比例是很关键的一点，尽早在不同的目标设备上检验你的设计概念。
• 边做边问自己“我真得需要这些东西吗？”重点关注某个元素是很容易，但是我们要关注所有的元素，去除或简化。如果你花大量时间在上面，你就很难舍弃它，但是内容才是决定性的。
  Global Closet
  Global Closet：一个设计给「国家地理」教育频道的互动游戏 by The Workshop

网格

网格在很多设计中都扮演一个重要的角色，这里也不是例外。当你尝试用有限的视觉元素去建立秩序和可用性交互时，网格就有很大帮助。

• 网格建立不只是视觉秩序。使用它去规范内容，功能群组。你不需要经常用线、框来为元素分组。简单的对齐，留白就可以让用户理解界面的结构。
• 尝试用特殊的元素去打破网格，可以吸引用户注意。没有了伪3-D的技巧，基本的图层规则（如：比例、布局）就是最好的元素，这些可以提升视觉的层级关系。
• 试验用比平常更密集的网格。当你减少颜色时，你就会发现这个设计结构比想象中复杂，但又不显凌乱。看下哪些信息你可以通过布局来承载。
  Live School
  Live School，iPad应用 by Rossul Design

颜色

很明显，颜色是视觉设计的关键组成。简约设计中，它就更重要。

• 用更大的调色板。如果你像我那样，你就会觉得小的调色板通常会导致更多功能的界面。一个大彩虹就能终结它。这是你伸展的好机会，专注少量的元素，你会觉得拓展调色板是很好的一件事。
• 当你设定调色板的时候，在不同光线的环境下试验你选择的色相，确保在光亮、黑暗的情况下它都适用。
• 你可能想要试验同系色搭配、或是用明亮的颜色系。尽早用你的调色板去做试验，以确保有足够的色域来应付微小的差别和高反差的元素。
  TriplAgent
  TriplAgent的视觉设计很好地使用调色板

排版

扁平化、内容驱动的网站，排版就是关键。

• 有衬线字体是个选择，无衬线字体通常都会让人觉得很干净。
• 选择一款包含不同重量、样式的字体。你不一定要全部都用，但是更多的选择可以帮你更好地定义层级关系，你甚至会发现，特定的字重适合特定的环境。
• 注意字体的易读性。我知道这听起来很傻，但是你在要多关心你选择的字体，确保它们在各种比例下都具有易读性。
  Siteleaf
  Siteleaf上清晰易读的排版。

交互

在扁平设计中，表示一个元素可以交互有点难度。我依仗于下面的一些方法

• 内容是关键。如果图层的主色调是白，你就需要给可交互的元素一点颜色。如果设计是以文字为主导，你就用简单的图标。如果标题用大号的小写，你可以把链接弄成小号的大写。你懂的~
• 常规布局也是挺好的。如果你用超细的字形作为后退箭头，把它放在左上角，用户希望在那里找到后退按钮。
• 当你放更多的功能在页面上的时候，让每个可交互的元素看起来像按钮是行不通的。界面应该更直觉性。但以防交互特别复杂或出乎意料，让它变得容易从错误中恢复过来。（译得有点生硬，就是「容错」。如：Gmail经常都有「撤销」提示。）
  Taasky
  简单的图层、绝佳的对比：Taasky

总结

我不相信设计有难用的、快速规则。设计师对创造简约的UI感兴趣是一件令人兴奋的事。扁平设计是不是就意味着不能用渐变和阴影？当然不是。最近我做的一些工作，就要平衡扁平和多维，智能地提供内容的同时保持交互的直观。

在高度连接、信息富裕、全能的电子世界里面，简约设计的复苏吸引眼球。这并不是所有问题的最佳解决方案，经过深思熟虑、适当的运用之后，它会造就一个更好用、愉悦的电子体验。

---

来源：smashingmagazine / Sep 3rd, 2013
作者：Adrian Taylor
翻译：lyzhie