第二节:ICON图标的易用性

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
1714 0 1 2018-12-07

图标和LOGO,两者在概念上有哪些区别,在功能上有哪些异同呢?

品牌和营销专家通常认为,LOGO 是一种影响和促进用户行为的一种手段,同时也是一种特定的沟通方式。

1. LOGO和图标的差别


图标和LOGO,两者在概念上有哪些区别,在功能上有哪些异同呢?

品牌和营销专家通常认为,LOGO 是一种影响和促进用户行为的一种手段,同时也是一种特定的沟通方式。

许多企业将LOGO视作为品牌的视觉代表以及品牌和用户之间情感联系的纽带。

但是,不管你信不信,LOGO和图标是两回事。LOGO 是品牌设计的一部分,然而图标则是作为快捷方式和入口而存在的。

想要完全理解两者的差别,我们得从品牌设计和业务的运作规律上出发。

Image title

最早的LOGO设计可以追溯到古希腊时期,当时的最高统治者会将法律和功绩铭刻在硬币上,作为一种社会身份的象征。

可以说,在这个阶段,LOGO设计是一种原始的社会组织的方式,而今天的奢侈品品牌设计师依然沿用着类似的方法来建立自己的品牌帝国。LV,CK,这些品牌LOGO 被用户们穿在身上,作为自己身份的象征。

Image title

在此之后,LOGO设计进入了下一个阶段。类似于今天LOGO的设计在13世纪的时候出现了,当时一位金饰匠人

将他的个人标志作为LOGO 铭刻到他的作品上。到了维多利亚时期,各种各样的LOGO 设计开始大行其道,

对于商业机构而言,品牌也变得越来越重要,他们也越来越期待使用独特的字体让自家的品牌脱颖而出。

现如今,市场中哪个成功的品牌没有LOGO?想成为一个成功的品牌,一个高度可识别的品牌是必不可少的,

所以企业会需要真正专业的LOGO设计。

Image title

优秀的LOGO设计应当给用户以熟悉的感觉,并且能够唤起情感联系。真正专业的咨询机构和LOGO设计专家会使用一整套专业的方法来设计LOGO,而不是单纯的给企业一个单纯好看的标识。

Image title

想想那些真正成功的LOGO都有是怎么做的,在成功的案例中寻求灵感吧。成功的企业需要一个专业的、精心打磨的LOGO设计。这可能需要在不断的摸索和调整中达到最佳,但是对于那些已经达到完美状态的品牌而言,就没有太大调整的必要了,比如可口可乐。

让我们向最顶尖的商业品牌学习吧。在福布斯2015年最有价值的品牌排行榜上,苹果公司位居榜首。尽管苹果曾经有过若干个不同版本的LOGO,但是目前他们所采用的,是最简单最扁平,也是最贴合苹果设计风格的版本。这样的设计使得这个LOGO能够最大程度的运用到各个不同的场合,从平面印刷到电子版,无论大小,用户总能毫无障碍地识别它,也不容易因为失真而误读。所以,请尽量确保你的LOGO独一无二,让你的品牌和竞争对手区别开来。苹果的LOGO 至少证明了一点,你的品牌和你的业务并不需要真正保持着内在关联,否则苹果在若干年前就得设计一个电脑LOGO,而现在还得设计一个手机的LOGO,想想就觉得特别尴尬。对此,我们可以这样解释:

“让你的LOGO设计独特并不是意味着它必须是突破性的设计。你可以尝试将思路放在同其他品牌去分开上来,甚至可以将你所喜欢的元素适当的融入其中。”

Image title

图标这个词,严格意义上是进入数字化时代之后才广泛运用的词汇,尽管它的实际使用时间已经有好几百年了。

最突出的例子就是古代文献中的宗教符号,它们也是图标。

只不过在现如今,这个词更多指的是我们在各种数字化设备中看到的那些大大小小的应用快捷方式。

图标的伟大之处在于它确确实实让我们的生活更便捷了,而它的主要功能是以可视化的方式,令信息更易于我们理解和获取。与LOGO不同,图标的概念随着电脑和手机的普及,在用户的频繁使用下,开始大规模流行。图标体积小巧,而它的设计要求更加精确,需要让它所代表的应用以更加一目了然的形式,呈现在用户面前。可以说,它比起LOGO而言功能性更加直接。 

Image title

这回还是拿苹果的例子来对比LOGO和图标。苹果的iTunes 图标采用了经典的双八分音符作为主要形象,无需解释,用户扫一眼就知道这是一个音乐播放器。这个图标的全部目的,就是帮助用户识别、找到特定功能、应用的一个视觉引导。

 

Image title

图标不仅仅可以用作可点击的按钮,也能作为品牌的文本信息的视觉说明而存在。专业的图标设计不仅可以让网站或者APP的风格浑然一体,同时也能够协助用户浏览页面,并且让他们更好的理解产品和业务。

简单总结一下LOGO和图标的差别:

图标通过视觉设计提供信息和引导,而LOGO则是品牌信息的展示

并不是每一个企业都需要图标,但是每个企业都需要LOGO 图标是品牌LOGO的伴生产物,并且作为视觉而存在 LOGO可以缩放,而图标通常是像素精准的(不可缩放),图标需要制作成特定尺寸大小的,缩放会导致信息丢失 图标是用来丰富并简化用户体验的一种导航工具 。

Image title

数字技术正在模糊不同设计领域之间的界限,这也是混淆的源头。比如 Twitter 现在差不多也是这样了。

而上图这家公司则通过这次设计,在Twitter 上声明了两者之间的差异,并强调新的图标“并非新的LOGO”,新的图标中就是一个字母 N 只是基于现有LOGO的一个创新设计,而他本来的 LOGO 依然不变。

当然,LOGO 和图标的差异是相当明显的。基于不同的目的,不同的场合,两者的差别其实并不难分辨。


2. 图标的易用性


在很多时候,图标其实会对界面的清晰性易用性产生负面影响。作为设计师,务必留意我们所习惯的图标使用方式,并尽可能的多测试,案例分析在这儿。

Image title

图标是界面的基本组成部分之一,然而在很多时候,图标本身也在破坏着界面的清晰性。

象形图出现在人类早期,我们可以将其视为最初的文字形式。如今,在某些文明群体中,象形图依然是人们进行沟通的主要媒介。

Image title

在很多公共城所,图形时常被用于导航,特别是在譬如机场这样的多文化环境,仅凭文字传达信息显然是不够的。

    Image title

而在计算设备上,图标随着GUI时代的发展而迅速流行。看看最早的桌面计算机GUI,

设计师在其中使用了图标以及桌面隐喻的理念

当然,我们都知道为什么图标可以迅速流行起来并发展成为UI的重要组成部分,直到如今更是如此 – 图标能给UI带来图形化的愉悦性,当我们设计的正确的时候,它们不仅能清晰的传达信息,而且能给界面带来个性与气质。

很多时候,一个简单的图标可以代替一段很长的描述性文字 – 对于手机甚至是手表这样的小屏设备来说,这样的特性无疑是非常有用的。不过这里也存在着设计上的陷阱 – 我们同样知道,如今很多图标在表意上其实是难以做到清晰准确的,它们需要人们思考,会提升体验过程中的认知负荷。如果无法快速而准确的传达信息,特别是对于移动设备而言 – 界面再漂亮,动效再炫酷,又有什么用呢?

其实原则很简单:只有当图标能够100%准确清晰的表达含义时,才去使用。别妥协。

Image title

说到表意模糊的图标,我想起最近在Twitter上看到的一张图片。

Image title

我们总会听到(或说出)这样的话:“人们每天都会用我们的软件,他们很快就能理解并记住这些图标的含义”。

不能说没道理,但我有时还是怀疑这种看法的准确性。我自己每天都会多次用到Mac上的邮件应用,但每次我要写邮件的时候仍然会对那两个图标产生片刻的迟疑:

Image title

另外还有个坏消息:用户通常会下意识的回避掉那些他们无法即刻理解的界面元素 – 对未知事物的不信任,

这是我们的天性。我猜Google在决定将其他app隐藏到一个表意模糊的图标后面之后,客服会收到不少类似的询问:

“我的Google日历跑哪去了?”

Image title

经过重设计之后的Twitter,很多新用户无法快速了解他们在界面当中应当做些什么 – 应该是发推,但是从哪里开始?是那个蓝色的图标吗?它是什么意思,羽毛代表着一根笔吗?

Image title

再次改版后的Twitter增加了置顶的编辑框,使事情变得明了了很多

Image title

界面的上下文环境也是我们在设计图标时必须考虑到的重要因素,很多看上去含义清晰的图标

在某些界面环境下很可能产生歧义。打开网页端的Gmail,你会看到这样的例子 –

看到那两个非常相似的图标没?它们出现在同一个界面中,却有着非常不同的含义:

这两个图标对于各自所代表的功能其实都算恰当,一个是返回,一个是回复,但这个界面环境却使它们

产生了潜在的冲突;虽然特定的布局方式可以在一定程度上起到引导提示的作用,但问题仍然存在。

Image title

再举个正面的例子,这里当中的图标虽然对有些人来说表意不够清晰,但在“Twitter应用”

这个大的环境下,多数目标用户 – Twitter的用户是可以理解的,因为这些图标的用法与Twitter是保持一致的,

这还算OK

多图标只有在音乐app这个特定的产品类型当中才能表达出准确的含义

Image title

不过上图,同一界面里两个地方使用了相同的扩音器图标,一个表示音量调节功能,一个表示当前播放的歌曲。

所以,说到这里我还是要重复一下:除非确定图标形式可以在当前界面环境中100%准确的表达含义,否则不要去用它。如果作为设计师,你都会产生片刻的迟疑,那么就干掉它好了 – 使用最简单的文字来替代,这是最清晰的表达方式。

当然,图形化的表达方式所具有的优点同样不可忽视,所以我们不妨在空间允许的情况下将图标与文字结合起来

同时利用两者的优点。

Image title

iOS默认的tab栏,以及苹果的很多其他产品当中都在使用着这样的模式,例如Mac上的App Store导航栏。

这些图标单独拿出来的话未必能准确的表达含义,但搭配文字之后就清晰多了

Image title

再比如网页版Twitter的导航

Image title

另外一个尽人皆知的例子,就是Facebook在改版中干掉了“经典”的汉堡包菜单,回归到最传统的iOS tab栏模式。


小结


作为最基本也是最广泛运用的设计元素,图标——在很多时候其实会对界面的清晰性易用性产生负面影响。

作为设计师,务必留意我们所习惯的图标使用方式,并尽可能的多测试。

最后再絮叨一遍:不要使用那些难以清晰表意的ICON图标;尝试使用更准确的文字标签,或将两者结合使用。


来源于:UI设计网 www.uisjw.com












全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票