用户界面大量使用扁平化设计?小心为妙!

  很高兴 iOS 7 终于把手电筒和系统功能快捷开关加上去了,但是大量滥用的扁平化设计深深刺痛了我这个果粉的心,我相信老乔此刻也在九泉之下吐血。我不是扁平化设计的反对者,也不是拟物化设计的拥护者,只是认为,在不同场合、不同需求的情况下,应该用不同的设计手法,比如用户界面就不适宜大量使用扁平化设计

  从用户体验的角度

  先说我女儿。在她两岁的时候,我就分别把 iPad 和 Nexus 7 给她玩。她会很主动地伸手去点 iPad 界面上突出来的按钮,她能够区分清楚什么是能够点击的,哪些区域是不会有反应的;换了 Nexus 7 她就变得不知道该怎么做了,对什么地方都乱摁一通。她的认知水平还搞不清楚某些文字+色块其实就是一个按钮,经过多次尝试后才知道哪些能够点击,哪些区域点击无效。一旦换了另一个 App,她对扁平化界面的响应区域又要重新探索,如此反复。

  再说我老爸,70岁,数独迷,不会玩电脑,不会上网。我不玩数独,不知道哪些数独游戏好,于是就在 iPad 上装了 n 个数独游戏,让他老人家自己选,不好玩的我再删掉。大家不用猜,拟物化取胜,扁平化都被删了,因为老人家知道哪些方块可以移动,哪些地方可以把数字填进去,铅笔、木纹、纸张、橡皮擦,对他来说也很亲切,引用原话就是“跟玩真的一样”。

  反驳者会说:“懂科技的年轻人才是智能手机的主流用户,并且教育用户的时期已经过去了,人们已经接受并会用扁平化设计的界面。”那么,请做一个实验,同一个 App 设计拟物化和扁平化两套界面,让熟悉科技产品的年轻人分成两组,让他们完成一系列指定操作,看看哪个组别完成操作的反应时间更快?

  人类有寻求平衡的原始意识,看见凹进去的表面就想往里面填东西,看见凸出来的表面就想把它摁平,这就是为什么让用户填的表单要做成凹进去的效果,而提交表单的按钮要做成凸出来让用户去点击,这里面都含有心理暗示。


  目前很多人都认同的理解是 :拟物化设计是对真实事物的模仿,用户对界面的理解源于对真实世界的经验和认知,大大降低用户心理接受门槛和学习成本。

  还有一个观点是我专门针对 iOS 说的: iPhone、iPad 的产品设计都是扁平化的,拿着冰冷的金属边框,在一块平滑的玻璃上点击一个不凸出的按钮是非常不带感的。如何把真实世界的感觉呈现出来,有生活气色,让人们不会对生冷的科技产生抗拒?亲切的、有温度的拟物化设计就是答案。

  这就是老乔为什么坚持在 iOS 上用拟物化设计的原因。

  从设计语言的角度

  扁平化设计是 2D 的,只有 X 轴、Y 轴、颜色、形状、布局;拟物化设计是有深度的,多出一个 Z 轴,还多出一个纹理和质感。丰富的设计语言给予设计师丰富的表达能力,扁平化设计就像是说话时不允许使用比喻一样乏味,于是有些地方要让人“意会”就非常难以表达。对于用户交互界面来说,丰富的表达能力尤为重要。

  有人说精简后的设计语言如何作出表达是能力问题,那请问世间有几个人是设计大师?如果你雇得起,那就请大胆使用扁平化设计界面!

  less is more 新解 :前面偷懒,后面的麻烦就越多。

  有人把扁平化设计放到艺术的角度,去反问“画得像才是画得好吗?”在艺术界,即使没人知道你画的是一棵树,也没有问题;但在用户界面,用户不知道你设计的是一棵树,就有很大问题!用户界面设计需要多一点实用主义,用普通用户的心态去做设计,而不是用大师的心态去傲视凡人。

  缝纫线、真皮纹理、铆钉、裂痕……去掉多余的拟物细节就可以,iOS 6 的拟物化过于累赘,而 iOS 7 的扁平化则显得激进,过犹不及。个人认为 MIUI 就在拟物化和扁平化之间找到了平衡点。


  从市场营销的角度

  拟物化之于应用和角色化之于游戏在市场营销上都有异曲同工之处:赋予真实感和灵魂。

  给大家说一个真实的案例。一个朋友打算开发棋牌类游戏,于是在各大应用市场做调查,研究了不下百个棋牌类游戏,发现一个规律:游戏里面只有棋牌的应用下载量寥寥无几;而有虚拟角色的、有对白的下载量往往是前者的数十倍乃至数百倍。朋友的结论是,有角色和情景模拟才能让玩家置身其中。

  回到 iOS 7 的系统应用图标设计,以前精致的细节没有了,经过抽象简化成几何形状和大胆的撞色。这不是 Ive 的作品,这是时装设计师的作品,在 T 台上被模特演绎得非常养眼,但你老婆却不会穿它们上街。(Ive 正在忙 iPhone 6 和大屏 iPhone,他真的没时间管那么多细节。)

  设计师把每个应用图标都当成一个品牌的 logo 来设计,于是它们更抽象,都更像 logo 了,但同时问题也来了:用户对应用图标和里面的功能按钮分不清楚,因为两者都是由简单的几何图形构成的。为什么会有这种怪怪的感觉?因为对用户来说,应用程序是一个产品而不是一个品牌

  品牌是无形的,logo 负责传递品牌的价值和理念,所以 logo 的设计适合高度抽象和简化;产品是有形的,产品的外形需要帮助用户去理解和使用,用户从图标打开一个应用再看见具体界面,这个过程是连续的,跟你伸手拉开冰箱门再看见里面的蔬果饮料的感觉是一样的。说白了,应用图标是产品的一部分,是产品的外形和入口,在应用设计方面,应用图标的具象反而成了提高产品识别度的方法。


  用户有为应用归类的习惯,试想一下,如果 Music 文件夹里都是一堆不同颜色的音符,你能快速区分 QQ 音乐 和 Spotify 吗?如果 Camera 文件夹里都是一堆不同大小的圆圈(被拍扁的镜头),你能快速区分 Instagram 和 Oggl 吗?

  再说 Windows Phone 的界面,它是扁平化设计的极致。一旦开发者跟随了微软这套设计标准,你就会发现无论什么应用,从入口(图标)到具体界面的识别度都被弱化了。随便拿两个 WP 应用截屏,遮挡应用名称,你就无法从视觉上直接区分两个应用。说得禅一点,没有设计就是最好的设计,内容都被变成了设计的一部分。

  说得黑一点,这是微软的阴谋,让所有第三方应用都弱化成 Windows 系统的一部分,用户会有 Windows 的功能很丰富和强大的错觉。第三方应用在 VI 上被统一,没有了个性和灵魂,识别度低,非常不利于传播。


  如今,只要把 iOS7 的图标去掉圆角放进 Android 系统里显得非常和谐,这是一个非常危险的信号。


  最后,跟大家打个赌,一旦大量第三方应用都追随扁平化设计,App Store 的应用销量将会出现负增长。

时间: 2024-08-07 05:25:52

用户界面大量使用扁平化设计?小心为妙!的相关文章

谈谈用户界面中扁平化设计

扁平化设计在当下的用户界面设计界是很有争议的,微软的Metro风最早将其介绍给大众,之后有了很多人跟风,比如LayerVault.The Next Web以及更多.许多设计师从最开始就不看好这类设计,主要是因为在稍微复杂一点的界面中,扁平化设计会带来很多困扰. 扁平化设计既漂亮又清新,设计起来快,也更容易响应.如果只是绘画上的设计趋向可能会被广为接受,但是网页设计者总是对易用性持有很高的关注度,因此总会觉得扁平化设计天然的就有缺陷. 下面这张图从左往右分别是苹果.Google和微软的设计美学展示

扁平化设计终极指南

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

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

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

扁平化设计和MATERIAL DESIGN有什么不一样?

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

做好扁平化设计-视觉篇

  1.去掉特效 先来看一组对比图片 同样是镜头的设计,在扁平化中去祛除了渐变,阴影,质感,等各种修饰手法,仅用简单的形体来表达,显的干净利落. 做减法,这第一步应该是最容易的. 2.简化提取 首先我们来看看做简化和提取的一个典型例子 毕加索画的牛 一头牛从最初的写实到最后仅仅只用几根线条来表示,整个简化的过程也经历了好几个步骤,当然这里对设计师观察和提炼能力要求很高,要充分了解对象物的本质,懂得巧妙的取舍,用极简的要素,在没有更多特效装饰的情况下表达清楚内容,在界线与轮廓的高对比下,表现出物体

扁平化设计美学:以Facebook为例的设计趋势

最近一个在网页和UI设计上逐渐增长的趋势是"扁平化设计"的使用,而且现在已经是一个非常热门的话题了.满大街的现场讨论会以及大量的教程.我常常被吸引到极简主义设计中,所以扁平化设计是一种很自然的给我启发的设计美学,特别是在最近的一个项目的重新设计中. 在本文中,我将讨论下什么是扁平化设计.回顾其它设计方式,并提供如何在你自己的设计中实现的一些技巧. 什么是扁平化设计? 实际上,扁平化设计意味着在设计中不使用常用的渐变.像素完美的阴影,然后通常是近年来蔓延的用来实现看起来"平面&

扁平化设计:你在这趋势中收获了什么?

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

让扁平化设计也爆发视觉冲击力

扁平化设计无疑是当前讨论最多,最火的设计形式,自ios7面世以来更是将扁平化设计的讨论推向风口浪尖. 在这里我不想分析拟物设计和扁平化设计的优劣,更不想说谁更好!在形式服从内容的今天,我只能说哪种设计风格更适合你的产品,就像你问我水和酒哪个好喝一样,我没有办法回答,只能看此时你最需要什么. 首先我们来看看为什么会出现扁平化设计,有人说是对拟物设计审美疲劳了,有人说是一群高级设计师为寻求突破做出来的设计潮流,有人说,是从平面设计中演化而来- 我认为这些都对,扁平化设计是设计发展的必然规律. 举例:

扁平化设计进修

摘要: 这篇文章将展示很多很酷的范例,甚至还提供了一个免费的用户界面工具包供你下载和使用.但如果是你自己的话,你打算怎么做?给点提示,色彩是扁平化趋势中最重要的一部分. 扁 这篇文章将展示很多很酷的范例,甚至还提供了一个免费的用户界面工具包供你下载和使用.但如果是你自己的话,你打算怎么做?给点提示,色彩是扁平化趋势中最重要的一部分. 扁平化设计进修 扁平化设计你可以通俗的理解为:使用简单特效,或者无特效来创建的设计方案,它不包含三维属性.诸如投影.斜面.浮雕.渐变等特效都不要在设计中使用. 扁平