我也来说说扁平化设计

最近由于iOS7 beta版本的推出，导致了扁平化设计又被推上了一个热潮，所以我也凑个热闹，随便说一说。

到底什么是扁平化设计呢？

扁平化完全属于二次元，这个概念最核心的地方就是放弃一切装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落，没有任何羽化，渐变，或者阴影。尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。

像以前我们看到的苹果的一些设计，包括iOS6.x之前的，Mac OS等上面的特效，阴影，镜面效果等，都觉得非常炫，以前iOS的设计叫气泡设计，都带着一个高光的上方气泡，看着的确是很有质感，而且很多UI设计都在模仿它。不过天天吃肉也会腻的，自从iOS从2007年推出之后，iOS老的的风格用的太久了，从而使用户产生了一种厌恶感。

扁平化的优点在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸，创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计，你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约，条理清晰，最重要的一点是，更好的适应性。

微软当初设计Win8的时候，MetroUI(后改名为Win8 UI)刚进入大家视野的时候，不知道多少人批评MS的UI风格，“大色块的设计简直糟糕透了，让我感觉像个孩子在涂鸦，而我是专业人士”，而MS大胆的用户体验现在却得到了大部分用户以及设计师的认可。

再看看当年google还是多色纹理logo的时候，也是显得很突兀，不过现在也改成平面的了，看起来更像一家高科技互联网公司了。现在的chrome和google plus等也是用了扁平化设计。

firefox22版本的Logo也从原来的立体狐狸改为了更平面化，也就意味着火狐也在逐渐调整自己的UI，让用户慢慢接受。

苹果现在的iOS7也采用了扁平化的设计，图标更加平面，色彩更加简单，纹理、倒影也去掉了，当然了，这种设计肯定是参誉过半，用户都有一个适应过程，就像win8一样的。

从我个人角度来说，我是非常喜欢这种简约化的设计，因为UI越复杂证明操作难度或者对性能影响越大，但是据说iOS7的UI虽然看起来简单，但是却蕴含了很多实时计算的东西，这个等以后我了解过了再说吧。

而如今google在android的UI设计上也慢慢做出了要求，待以后慢慢看过再说。

扁平化设计在手机设计上现在见着的还不是很多，不过在网站UI上确实用到很多，确实美观大方了不少。

同样扁平化设计也是一个双刃剑，文字、图标、底图的位置、色彩等搭配不好，还是显得比较难看的，今天看到同事买了台lumia920，实话说，里面的UI风格不能细看，文字和图标什么位置都有，乱七八糟的。

 

引用一段设计原则来结束本文吧。

无论采用怎样的风格，优秀的界面设计都需要遵从一些共通的设计原则：

一致性
通过具有一致性的设计模式及视觉风格，为用户建立起完整一致的心智模型，使产品更加易用，提升整体体验。

对比
通过对配色、尺寸和布局的调整，使可点击的界面元素在视觉上与其他元素形成鲜明的对比。

布局
可以尝试使用960gs一类的网格布局为界面设定视觉规范，使用户的视线可以跟随内容本身所界定出的路径自然的移动，增强界面的视觉平衡。

层级化
最重要的东西要比相对次要的东西更容易被看到。关于这个话题我可以写一整篇文章出来，简单的说，就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素，而将其他操作元素置于次要位置，这可以使界面得到最有针对性的优化和简化。

目标用户
不同类型的用户所青睐的界面风格也有所不同。建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格，而其他更加“普通”的用户则更容易接受相对传统的拟物化界面。

反馈
当点击行为发生时，要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式，例如在用户执行操作后，使用旋转图标提示用户系统正在进行响应。

降低“摩擦力”
无论采用怎样的视觉风格，都要使界面尽量简化，减少用户完成目标所需执行的操作，打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本，增加功能的复杂度，进而降低转化率。

鼓励探索
了解目标用户有可能对产品进行哪些方面的探索。一旦他们习惯了产品的界面与基础功能，并开始向“高级用户”的阶段进发时，要为他们的探索和学习行为进行必要的指引与“奖励”回馈。

原型
无论风格如何，界面形式都取决于实际的功能。好的设计方案离不开产品前期的规划工作，特别是通过草图或线框原型进行的探索。识别出最核心的用例需求，使用原型不断尝试和验证，为接下来的界面设计工作打下坚实的基础。