扁平化的UI设计美了美了

扁平化的UI设计美学时至今日，扁平化设计已被广泛地运用在数字化设备中。它大胆的用色，简洁明快的界面风格一度让...

时至今日，扁平化设计已被广泛地运用在数字化设备中。它大胆的用色，简洁明快的界面风格一度让大家耳目一新。即便是拟物设计的引领者苹果，也不得不转变设计思路，在IOS 7上着手扁平化设计的探索。



IOS&Android



Microsoft- Metro Design

顾名思义，扁平化设计仅仅采用二维元素。所有元素都不加修饰——阴影、斜面、突起、渐变这样会带来深度变化的设计都是不应该的。从图片框到按钮，再到导航栏都干脆有力，需要极力避免羽化、阴影这样的特效。现实主义、3D、拟物化更是扁平化设计的大敌。

扁平设计中使用到很多简单的UI元素，比如按钮和图标。设计师常用矩形、圆形、方形等简单的形状。UI元素应该在保持高可用性的前提下尽可能的简单，保证应用于界面中直观、易用，无需引导。为了这种效果，开发者会为按钮填充深色，以鼓励用户点击。



色彩的使用对于扁平化设计来说非常重要。你可能已经发现，扁平化设计的网站、应用色彩明显要更加鲜艳明亮，而且更纯更有活力。此外扁平化设计的项目也拥有更多的色调，平均为6-8种。其主要、次要颜色通常都是非常大众化的颜色，然后再配以几种其它颜色。扁平化的另一个趋势在于复古颜色的使用——浅澄色、紫色、绿色、蓝色，都极为流行。



扁平化设计生而简单，整体上趋近极简主义设计理念。设计中应该驱除任何无关元素，尽可能地仅使用简单的颜色与文本。如果一定需要视觉元素，可以添加简单的图形。

“

2016年，扁平化设计进入2.0时代。为了消除交互不够明显、按钮难以找到等弊端和避免纯粹的扁平化设计，一些细微的效果逐渐被运用其中。这不是指一个幽灵形状的按钮。恰恰相反，这类按钮的形状非常简单，仅仅是一个矩形或一个圆角矩形的边框，内部为透明。看上去若有若无，类似于幽灵的出没方式。它们通常会设计得比普通的按钮略大，浮动于大图背景、视频的上方。你可以在饱览整张图片或整个视频的同时也能看到它的存在，为了让它获得聚焦，通常它位于比较显眼的位置，例如屏幕的中间。

谈到避免极端的扁平主义，渐变的运用就有回暖之势。而新的渐变不同以往，它往往是以更为低调的姿态出现的，比如只用于背景色或氛围色，不再喧宾夺主，并且只在两种颜色之间渐变过渡。下面是双色渐变的实例。

除了模拟现实环境里纸质重叠的微投影，扁平化2.0更加强调圆的运用。可以说圆形在移动端的优势是特别明显的。由于圆形很好的模拟了手指印，因此一个圆的存在看似就是一个可触的地方。这对于唤起用户的操作发挥了极大的作用。

早期的扁平化配色是非常鲜艳大胆的，它可以在高饱和度中挑选六到七种颜色进行搭配。如今，扁平化设计的配色选择虽然仍然朝明亮大胆的方向走，但只局限于有限的颜色选择，双色调配色是目前逐渐流行起来的另一种配色方向。

更多的视频和动画特效的运用，使得扁平化更加生动活泼。然而这些让网页看起来更生动的手段，无一独立于整体页面的风格而独立存在。它们依然是简洁的，符合网站整体的审美方向的。

    关注 网页艺术爱明磊