大话“扁平化设计”

扁平化设计在当下的用户界面设计界是很有争议的,微软的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种颜色。

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

极简主义

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

“准”扁平化设计

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

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

时间: 2024-11-02 18:08:24

大话“扁平化设计”的相关文章

扁平化设计终极指南

  苹果iOS 7将扁平化设计风格推向了一个顶点.目前,扁平化设计是当下最流行的设计风格.不少设计师或许都想要尝试一下扁平化设计,但却不知道该要如何开始.这里,我们就为大家搜集了一些扁平化资源,从UI套件到调色工具,再到字体选择和WP主题,从理论文章再到创意图库.我们将为大家呈现出体系化的扁平化资源,一起来看看: 不收藏都不好意思的扁平化设计终极指南 扁平化设计 对于设计师来说,扁平化设计是一种实打实的设计风格,不要花招,不要粉饰.从整体的角度来讲,扁平化设计是一种极简主义美学,附以明亮柔和的色

扁平化设计技巧:中空的图标用户体验

文章描述:扁平化设计反思:"中空图标"很难被理解吗? 随着IOS7的发布,苹果的界面做出了有史以来最大的改变.IOS7的设计语言强调了高光.极简,包括所有的按键以及app图标. 这个改变使苹果的操作系统更加时尚.简单,同时也影响了人们对扁平化的理解.当然有人欢喜有人愁,一些人对此颇有微词,认为这一改变并没有使IOS系统向好的方面发展. 使用IOS7的用户都知道,这款操作系统中所有的图标都是简单的线条构成,也正是这种"过于简单化"的设计引起了重大争议.尽管现在这些图标

扁平化设计:扁平化UI套件推荐

文章描述:浅谈扁平化设计-– keep it simple. 2013可以说是扁平化设计的一年. 扁平化时代之前,设计师的作品往往非常的写实,非常的有立体感!但是现在即便是拟物设计的引领者苹果,也不得不转变设计思路,在iOS 7上开始着手扁平化设计的探索. 什么是扁平化设计? 对于设计师来说,扁平化设计是一种实打实的设计风格,不要花招,不要粉饰.从整体的角度来讲,扁平化设计是一种极简主义美学,附以明亮柔和的色彩,最后配上粗重醒目,而风格又复古的字体.扁平化设计简化了诸如按钮.图标一类的界面元素.

扁平化设计资源:适合扁平化设计的圆形图标

文章描述:Codrops 出品的 9款适合扁平化设计的圆形图标悬浮(Hover)效果,原demo效果在此.从这些效果中可以看到,即使在扁平化设计中,魔鬼依旧藏在细节里. Codrops 出品的 9款适合扁平化设计的圆形图标悬浮(Hover)效果,原demo效果在此.从这些效果中可以看到,即使在扁平化设计中,魔鬼依旧藏在细节里. 1. 填充色变换 2. 填充色收缩 3. 填充色闪换 4. 描边由实变虚 5. 图标飞入效果 6. 图标内部旋转 7. 描边阴影闪现 8. 边界呼吸效果 9. 描边扩展下

web设计发展趋势:深入学习扁平化设计

文章描述:扁平设计是根据平面的样式来定义的:通过移除额外的元素比如阴影,斜边,纹理和创建3D样式的梯度等等来简化界面. 扁平化设计或者说扁平化的UI风格,是今年最受关注的一个web和平面设计的发展趋势.而经常被拿来与扁平化做比较的是拟物化设计,两者的设计原则和设计风格完全相反. 设计师们或许会有疑惑,这究竟是一种能持续下去的设计趋势呢?还是只能是风行一时,昙花一现.暂且不谈未来和不管这些反对的声音,大多数设计师还是很想在自己的工作中尝试使用这一设计趋势.在这里,我们将深入了解什么是扁平化风格,追

网页扁平化设计的五个最典型的特征

文章描述:如今设计界最炙手可热的明星大概就是扁平化设计了吧,关于它的讨论至今都没有冷却的迹象.诸多设计师分成了泾渭分明的两个阵营,一边努力把扁平化做到极致,一面对其不屑一顾. Kryptoners:如今设计界最炙手可热的明星大概就是扁平化设计了吧,关于它的讨论至今都没有冷却的迹象.诸多设计师分成了泾渭分明的两个阵营,一边努力把扁平化做到极致,一面对其不屑一顾. 我是个骑墙派,不支持也不反对,在我看来,优秀的设计的定义就是好用,只要能设计出优秀的产品,我可以采用任何方式,扁平化也是其中之一.但是必

什么是扁平化设计?扁平化设计方案突出简洁

文章描述:扁平化设计:你在这趋势中收获了什么? 扁平化设计-这个早在多年前非常流行的设计领域-又再一次卷土重来了.许多新网站以及需要重新设计的网站都纷纷采用了扁平化设计的方案,这种趋势无论是在网页设计或者移动端的设计方面都已经蔓延开了. 随着融汇了扁平化设计美学的windows8以及新版谷歌的推出,以及其他人气网站纷纷采用这种扁平化的主题设计,这种扁平化的趋势将很有可能受到更加多的亲睐. 你是否考虑过?你能够把它运用到你的项目当中吗?这种设计方案是否能够给你带来更加轻松的工作体验? 扁平化设计具

PPT扁平化设计的8个实用小技巧

PPT扁平化设计的8个实用小技巧   扁平化是目前的主流设计风格,本文总结了扁平化设计的8个小技巧,字体.图标.排版.配色等都有提及,教程深入浅出,非常适合新手,学会可以直接拿来作海报和PPT设计. 最近帮一个师兄做一个PPT,用了几乎每个人都听说过的扁平化风格.于是趁热打铁,找了一些扁平化的作品和文章看了,自己对扁平化做一个总结,希望对你ppt抑或海报设计有所帮助. 注:此处所谈的扁平化指的是一个大的概念,将后面衍生出来所谓的"似扁平化"也包含进来. Tip 1:关于高光.渐变和投影

扁平化设计与质感设计: 他们有什么不同?

  两种相似的设计风格,一个基于另一个.一个是新热事物,另一个,有人猜测,已经以自己的方式成为一种时尚.一个是自发的-适应设计的趋势,另一个却是有目标-专用的设计指导规范. 你可能明白了扁平化与质感设计之间的冲突了. 但是,他们之间不同是什么呢,本质上是一个比另一个更好?在某些用途上更好?实际上,一些人想知道它们之间的差别有多大,让我们从最基本的开始:拟物化设计的身影出现在每一个身上. 拟物化设计, 在这个背景下,设计是为了模拟真实的物理世界.通常,这需要设计的在线应用的形式看起来像他们的真实世