大话“扁平化设计”

简介: 扁平化设计在当下的用户界面设计界是很有争议的,微软的Metro风最早将其介绍给大众,之后有了很多人跟风,比如LayerVault、The Next Web以及更多。

扁平化设计在当下的用户界面设计界是很有争议的,微软的Metro风最早将其介绍给大众,之后有了很多人跟风,比如LayerVault、The Next Web以及更多。许多设计师从最开始就不看好这类设计,主要是因为在稍微复杂一点的界面中,扁平化设计会带来很多困扰。

扁平化设计既漂亮又清新,设计起来快,也更容易响应。如果只是绘画上的设计趋向可能会被广为接受,但是网页设计者总是对易用性持有很高的关注度,因此总会觉得扁平化设计天然的就有缺陷。

下面这张图从左往右分别是苹果、Google和微软的设计美学展示,三家走了非常不同的路线。

中庸之道是解决复杂争端的最好办法。妥协对观点鲜明的人来说很难,但是最终受益的还是大众。在这一例中,受益的大众就是产品的用户。

有一个办法,那就是把扁平化设计的优势都抽出来,应用到高度复杂的用户界面中去。至于具体怎么做,可以参考Google现行的界面设计语言。Gmail(web+iOS),Google Maps(iOS)和Google+(iOS)都是非常好的准扁平化设计的例子。

大多数情况下,这些界面都遵循扁平化设计的原则:扁平色块,没有阴影,利用颜色鼓励用户去进行交互(比如Gmail中的红色按钮“写邮件”)。但是仔细看时,你会发现这个红色按钮其实是有很小的弧度的。这道弧度就像是“嘿,快点我!”而不是“哇哦,我看起来诱人的就像糖果一样!对了你还可以点我的。”这类微妙的功能可见性是准扁平化设计的重要组分之一,也是其优于真正的扁平化设计的一大特点。

准扁平化设计自然也不会忽略深度的概念。相反的,适度加入深度的元素可以促进用户对界面的理解。但是就像弧度一样,深度元素的融入也需要仔细斟酌,才能让信息从平面中跳离出来,但又不会破坏扁平化设计的氛围。

准扁平化设计的例子不单有Google,新版MySpace也采用了这种看起来扁平,但是当你把鼠标移过去就会出现“快点我”的弧度。Letterpress,这款大师之作的游戏,虽然有些人说是扁平化设计,但是也采用了阴影设计来改进交互体验。还有自最开始就一直不怎么用弧度设计的Facebook,也用阴影来分隔覆盖图和其余页面。

iOS的未来应该会同繁复的拟物化设计渐行渐远,微软的Metro在易用性也有硬伤,设计的未来可能属于准扁平化设计这类兼具易用性和高效率的设计语言。

网友点评:

黑白:对于平铺的大量内容,阴影渐变是很有效的组织秩序的方式,通过颜色组织秩序只在视野中央有效,视野周边几乎没有颜色感知细胞,这也就决定了难以产生整体稳定的秩序感。想想我们周围的世界如果只有颜色纹理形状,而没有阴影渐变会是多么难以辨认,ios 反对的似乎是对实物诸如纹理特征等与视觉心理无关的模仿,并不等于扁平化~而且阴影渐变形式还有很多潜力可挖呢~


Cousins表示他虽然对扁平化设计的感觉非常强烈,但并没有特别热爱或者特别讨厌扁平化设计。他认为好的设计不应当局限于某种设计风格,而需要更注重可用性、有用性。如果因为时尚的缘故,那就顺其自然吧。但该趋势并不适合一切项目,所以不能强求所有应用都遵从这一风格。

拒绝特效


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


扁平化设计中的层次和其它的一一对应,但各个位面间没有交叉,不会明确区分背景图片、前景图片、按钮、文本、导航,等等。

那如何做好扁平化设计?扁平化设计依赖于清晰的层次结构和元素布局,优秀的扁平化设计应该能帮助用户理解产品以及交互。

现在,越来越多的网站开始应用扁平化设计,在App和移动设计中这一趋势更为明显。在小屏幕中,按钮和选项更少,也让扁平化设计如鱼得水。

仅使用简单的元素


扁平设计中使用到很多简单的UI元素,比如按钮和图标。设计师更常用矩形、圆形、方形等简单的形状。元素独立。正角、直角、圆弧都非常常见。

UI元素应该在保持高可用性的前提下尽可能的简单,保证应用或网站直观、易用,无需引导。为了同时达到简单但直观的效果,你可以尝试为按钮填充深色,以鼓励用户点击。


记住,简单的元素并不意味着设计起来很简单,恰恰相反,扁平化设计理念的复杂度可以与任何其他设计风格相提并论。

注重排版


因为扁平化设计要求元素更简单,排版的重要性就更为突出了。字体的大小应该匹配整体设计,高度美化的字体会与极简设计原则相冲突。字形上可以应该使用粗体,文案要求精简、干练,最终保证产品在视觉上和措辞上的一致性。

字体选择上可以使用简单的无衬线字体,通过字体大小和比重来区分元素。同时你也可以使用新奇的字体作为点缀,但一定要记得不能过火。

排版的目的在于帮助用户理解设计。标签按钮等其它元素更注重增强易用性和交互性。

关注色彩


色彩的使用对于扁平化设计来说非常重要。你可能已经发现了,扁平化设计的网站、应用色彩明显要更加鲜艳、明亮。此外扁平化设计的项目也拥有更多的色调。一般的网站很少会使用3种以上的色调,但是在扁平化设计中,平均会使用6-8种颜色。


扁平化设计的色调偏通常更有活力——色彩更纯。其主要、次要颜色通常都是非常大众化的颜色,然后再配以几种其它颜色。扁平化设计的另一个趋势在于复古颜色的使用——浅澄色、紫色、绿色、蓝色——都极为流行。

极简主义


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

“准”扁平化设计


最近,越来越多的设计师开始赞同准扁平化的设计。在准扁平化设计中,基调仍然是扁平风格的,但会在设计方案中添加一种,且仅添加一种特效,无论是阴影也好、梯度也好……


这种设计风格比严肃的扁平化更加灵活。设计师们喜欢它,因为可以添加深度和纹理;用户喜欢它,因为它能有助于直观的交互。但反过来,也有设计师不喜欢它,因为“准”扁平风格是另两种风格的混合体,缺乏明确的定义,所以更难用好。


目录
相关文章
|
4月前
首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板 | 苹果CMSV10主题
首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板 | 苹果CMSV10主题 我们的简约风格,以纯洁的白色和深邃的紫色为主色调,为您提供了一种清新、时尚的浏览体验。在这个简洁而美丽的界面中,您可以轻松畅享各种精彩短视频。我们专注于简单的设计,使用户能够轻松找到他们喜欢的内容,而不受繁杂的界面干扰。紫色的调性为网页增添了一抹神秘和优雅,让您在欣赏视频的同时感受到一份宁静和舒适。清晰的布局和直观的操作,让您可以更专注于视频内容,而不被复杂的功能所困扰
49 1
|
11月前
|
安全 iOS开发
让人惊艳的高级配色,让你的色彩灵感爆棚!
让人惊艳的高级配色,让你的色彩灵感爆棚!
77 0
|
人工智能 前端开发 JavaScript
前端自给自足UI设计稿?(Midjourney+MasterGo)
前言 最近在自己做一个可能有意思的项目。对于公司的项目,一般都是有对应的UI设计稿作为参照开发的,而对于自己之前的一些小项目,更多则是套用模板,想到哪写到哪这种方式写的前端页面。 后者这种方式肯定是不对的,就好比我们写代码要先写技术文档,再来写代码一样。
317 0