扁平化UI

**

1、什么叫UI扁平化

**
扁平化设计的英文名为“flat design”,是指摒弃高光、纹理、材质、阴影等能造成透视感的效果，通过抽象、简化、符号化的设计元素来表现。界面上极简抽象、矩形色块、大字体、光滑、现代感十足，让你去体会这是什么，其交互核心在于功能本身的使用，所有去掉了冗余的界面和交互。
与扁平化的风格对应的称为拟物化，英文名为“skeuomrphism design”（拟物化设计）。
模拟现实中物品的造型和质感，通过叠加高光、纹理、材质、阴影等效果对实物进行再现，造型立体且符合透视，也可适当变形和夸张，界面模拟真实物体，拟物设计会让你第一眼就认出这是什么东西。交互方式也模拟现实生活的交互方式。
扁平化是在2009年后期开始流行起来的一种UI设计风格，早期可见于微软METRO风格的winphone7界面设计中，至2010年后，Android4.0以后的手机系统中也开始广泛应用扁平化的控件和图标。之后的两年里，拟物和扁平的支持者各为一半，但是，在追波等设计网站上，一些优秀的扁平化界面和图标已经开始慢慢呈现。因为早期iOS系统推崇高写实拟物风格界面，所以很多设计师在观望苹果的动向。
一直到乔布斯去世，2013年iOS7的发布会，连iOS7也变成扁平化后，业界才正式掀起了扁平化UI设计风潮。
**

2、为什么要用UI扁平化

**
扁平化设计产生的契机如下
01、设计界的流行趋势，屏幕越来越大，绘画面积增大。
02、大量写实拟物标，在视觉审美上产生疲劳。
03、大量的纹理和高光阴影细节对基本功能进行干扰。
04、写实的图标很难表现出一个抽象和通用的概念。
05、移动互联网APP设计需求井喷，更多的平面及网页设计师转行来做UI。
06、原研哉、包豪斯等简约主义设计对UI设计的影响。
扁平化的优势和特点如下
层级、布局、跳转、操作区域、功能提示、区块化、视觉引导线、文字、图形寓意、反馈/交互响应……
减弱或摒弃装饰元素：立体、渐变、阴影、对比度、色彩、厚度、纹理、材质、元素风格、时代背景、光影、透视、反射、透明度……
**

3、其他类型的UI设计

**
对于扁平化风格的极简来说，其实拟物的风格可以有时代背景。
对材质、纹理、光影、透视等各个元素进行重组和变化，会丰富很多。
举些例子，铅笔风格画的图标、中国水墨笔触的图标、青花瓷风格图标、长得想水果的图标、蒸汽朋克风格图标、发着荧光灯管扭曲成的图标、拼布图标、乐高积木风格图标……。如果列举下去，真实无际无边，收不住，但有一点就是这些图标都带有强烈的特色，会导致某一些受众群狂热喜欢，而相反也有一些人极其讨厌。而扁平风格因剔除了很多个性化的元素，反而受众群接受度更广一些。
**

4、UI扁平化未必适合所有产品

**
扁平化的确在风格新颖、色彩鲜明和突出信息上有优势，但是也不是所有的产品都适合用扁平化设计。
UI设计师还是要以产品的目标用户的角度来设计符合产品定义的界面。举个例子，如果我们给一群7~10岁的学生设计一款电子书软件，如果用扁平化界面，估计目标用户本身的心智能力并不能太好地理解和识别扁平化抽象的图标，或者说，我们设计了一款RPG的网络游戏，官网设计成冷冰冰的扁平化风格，估计玩家一看就没有玩的欲望。还有就是要注意地域和流行的时间差，流行这个东西是慢慢影响和波及的。
比如两年前，上海这边的UI设计，扁平化已经流行起来，上海这边的客户，他们都能接受扁平化；但是，如果我做二三线城市的客户的项目，他们还是会比较趋向喜欢有质感的拟物化风格的设计。他们给的理由是，扁平化看起来很单薄，感觉像没有设计过一样，看起来很廉价。这时候你不能吐槽用户审美观落后，因为他们一定有这么认为的理由，他们更了解目标用户的喜好。
这种情况一直到今年上半年才改善，二三线城市的客户像发现新大陆一样对我说，来点扁平化的设计吧！我心想终于时机成熟了！
我做项目十个有九个成功的原因在于，我只合理引导客户，给他们展示合适他们的几种风格，比如非常合适他们的、当前流行的，超越他们竞争对手的，但是不会强迫客户教授与他们目前情况相违背的设计，而是设身处地考虑他们的利益，所以大家都会合作愉快。
要做一个上善若水的设计师，你的目的是提升产品，创造商业价值，展现自我是其次，客户和你合作得了利下次还会来。所以扁平化也不是适合所有的产品界面，还是要按照产品来设计。当然那种大众可以接受扁平化，并受众群欢迎扁平化界面的产品，必须赶走一下时髦，否则就OUT了！
设计师在设计扁平化的界面时，容易犯如下错误
01、同类功能的图标风格不统一，用色不统一。
02、功能块零碎，导致简洁的画面变得零碎。
03、可操作的按钮等和背景区分不开（太平了，导致不知道能不能点击）。
04、操作后没有交互提示，层级跳转混乱（各个层级的界面外观差不多，找不到北）。
05、布局看起来很死板，图形没有亲和力，很简陋。
06、用户群体的定位错误（比如RPG游戏的官方网做的像WIN8）。
07、图形过于抽象化，导致识别性太低。