大话“扁平化设计”

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


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

极简主义


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

“准”扁平化设计


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


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


目录
相关文章
|
人工智能 计算机视觉
教程 |【阿里云.人脸识别】Access Key ID 和 Access Key Secret 查看方法
本章主要介绍阿里云.人脸识别 Access Key ID 和 Access Key Secret 查看方法。
|
7月前
|
存储 数据管理 关系型数据库
数据库分库分表的原因?
分库分表通过减少单库单表负担来提升查询性能。垂直切分按业务耦合度将表或列分布于不同库或表中,减少数据量,优化性能。水平切分则按数据逻辑关系将表分散至多库多表,减小单表数据量,实现分布式处理。选择方式需根据具体需求决定。
124 19
|
7月前
|
Java Linux 数据库
探索安卓开发:打造你的第一款应用
在数字时代的浪潮中,每个人都有机会成为创意的实现者。本文将带你走进安卓开发的奇妙世界,通过浅显易懂的语言和实际代码示例,引导你从零开始构建自己的第一款安卓应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇门,让你的创意和技术一起飞扬。
145 13
|
7月前
|
算法 安全 数据安全/隐私保护
散列值数据完整性验证
散列值数据完整性验证
249 11
|
7月前
|
监控 Java 数据处理
Spring Batch 是如何工作的?
Spring Batch 是如何工作的?
317 2
|
8月前
|
存储 自然语言处理 搜索推荐
智能语音识别技术在医疗健康领域的深度应用与前景####
本文深入探讨了智能语音识别技术在医疗健康领域的多维度应用,从电子病历的高效录入到远程诊疗的无缝对接,再到患者教育与健康管理的个性化服务,展现了该技术如何显著提升医疗服务效率与质量。通过分析典型应用场景、挑战及解决方案,本文揭示了智能语音识别技术在推动医疗行业智能化转型中的关键作用,并展望了其未来发展趋势与广阔前景。 ####
|
7月前
|
机器学习/深度学习 人工智能 前端开发
【AI系统】图算 IR
本文全面介绍了计算图的概念及其在AI框架中的应用,涵盖计算图的基本构成、与自动微分的关系、静态图与动态图的生成及特点,以及计算图对AI编译器的重要作用。文章详细解析了计算图的结构,包括张量和算子的角色,探讨了AI框架如何通过计算图实现自动微分,同时对比了静态图和动态图的优缺点,指出了计算图在优化AI编译器性能方面的关键作用。
206 0
|
Java Android开发 Windows
IDEA相关配置(特别完整)看完此篇就将所有的IDEA的相关配置都配置好了、设置鼠标滚轮修改字体大小、设置鼠标悬浮提示、设置主题、设置窗体及菜单的字体及字体大小、设置编辑区主题、通过插件更换主题
设置自动导包功能、设置显示行号和方法间的分隔符、忽略大小写提示、置取消单行显示 tabs 的操作、设置默认的字体、字体大小、字体行间距、修改当前主题的字体、字体大小、字体行间距、修改当前主题的控制台输出的字体及字体大小、修改代码中注释的字体颜色、设置超过指定 import 个数,改为* 、修改类头的文档注释信息、设置项目文件编码、设置当前源文件的编码、设置自动编译、设置为省电模式、设置代码水平或垂直显示.........
593 1
IDEA相关配置(特别完整)看完此篇就将所有的IDEA的相关配置都配置好了、设置鼠标滚轮修改字体大小、设置鼠标悬浮提示、设置主题、设置窗体及菜单的字体及字体大小、设置编辑区主题、通过插件更换主题
|
小程序 数据管理 大数据
《数字化与碳中和(园区篇)》报告正式发布,助力加快推进国家“双碳”战略实施
2022年9月3日,由阿里云与施耐德联合信通院、工信部国际合作中心等单位共同编制的《数字化与碳中和(园区篇)》正式发布。报告基于实地调研及各单位实践经验,深入分析双碳园区发展现状及面临形式,提出从OT到IT进行服务能力整合的思路,制定“园区管理端、企业应用端、生态服务端”三端协同的园区碳中和服务平台解决方案,阐述碳中和服务平台的总体架构、核心场景以及建设运营等内容,并分享不同类型园区的实践案例。该报告为园区管理者、建设者、运营方以及相关入住企业提供了有价值的参考,助力加快推进国家“双碳”战略实施。
《数字化与碳中和(园区篇)》报告正式发布,助力加快推进国家“双碳”战略实施