首页 > 网页教程 > 设计分享 > 分析用户界面中扁平化设计的优缺点

分析用户界面中扁平化设计的优缺点

时间:2013-01-28    来源:产品中国

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

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

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

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

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

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

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

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

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

网友点评:

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

相关推荐
另眼观看用户界面扁平化设计的不足之外
iOS7用户界面设计的10个准则分享
用Adobe案例教你掌握Nielsen大师的十条用户界面指南
30+优秀的用户界面UI设计案例欣赏
扁平化风格的网页设计案例欣赏
什么是扁平设计?如何创建扁平化设计风格?
21个扁平化设计的动态创意链接交互样式欣赏
换汤不换药?看应用们如何“为iOS 7设计”
网页设计中如何运用圆形的搭配 让网页更出彩
界面设计教程:如何做好扁平化设计之交互篇
扁平化设计的前世今生:灵感或来自瑞士风格
扁平化:回归真实的设计
网页设计分享:如何预知未来的大势所趋?
设计完美极简风格网站的六个步骤分享
年度最佳!20个最优秀的网页设计案例欣赏
网页设计师必看:2015全球网站设计趋势推荐
扁平化设计与Material Design区别在哪里?
关于扁平化设计的五个要素
网页教程:扁平化设计的步骤和要点
扁平化设计的六点优势分析
进化中的扁平化设计还能玩出什么花样?
24款响应式和扁平化设计的后台管理界面欣赏
网页交互设计的一些理解
深挖交互设计的细节提升用户满意度
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何杜绝网页设计中视噪对用户的影响
电子商务网站如何设计高效易用的网站左侧导航树
网页视觉设计如何针对用户有效表达信息
交互设计之浅谈下意识设计
前瞻:2012年Web设计和开发的15个最新趋势
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解
给不完整视觉信息寻找最简单直接的解读办法
移动应用开发:无线终端用户理解工作方法分享

精彩推荐

热门教程