看似平淡无奇的Icons,到底什么才是它的正确使用方式?

了解食材是厨师的基本功课之一,了解器材是摄影师的基本功课之一,了解城管的时间表是卖热干面大叔大妈的基本功课之一,了解各个组件的设计模式和属性是交互设计师的基本功课之一。


了解食材是厨师的基本功课之一,了解器材是摄影师的基本功课之一,了解城管的时间表是卖热干面大叔大妈的基本功课之一,了解各个组件的设计模式和属性是交互设计师的基本功课之一。

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

一个按钮,一个导航栏,一个文本框,一处icon的使用,平淡无奇,稀松平常,但其实用好它们也是有一番学问的。只有当各个组件都被交互设计师以一种正确且入流的形态摆放在适当的位置,我们才能在产品的可用性或者是说易用性上得到基础的保证。

自有计算机图形化操作界面那天起,人类就开始使用icon了,icon这东西妥妥的比一些90后设计师(比如我)还要大。icon在人机交互范畴内来讲较单纯只使用文字主要有以下几点优势:

  • 简单、醒目又友好,icon可以以一张图的形式表达很多东西。
  • 并且因此节省了大量空间,屏幕越小,它越显得重要。
  • 悦目,漂亮的图片能为你的产品增色不少。
  • 目前的潮流,大家伙都在用,用户已经习惯了这种设计模式。(详情参见Windows Phone由7.0至10.0的版本更迭,R.I.P)

好处很多,但是一切来得并没有那么容易,假如用不好的话会带来非常不要的影响。这篇文章主要就是来跟大家说说在“使用icon”这件小事上普遍存在的问题,并给出一些与我们息息相关的案例,然后与大家分享一些解决问题的思路。

1. Icon本身要正确地传达想要传达的含义

这个问题比大家想象中更为普遍地存在,设计师经常会出于“不想抄袭”,“看起来更加特别一些”等理由,设计出一些实际上真的很难懂的icon。撇开一张图片的其他属性,一个icon,最最首要的任务是传达正确的含义。由定义来看,icon代表的是某个物体或某个动作,所以对于用户来说,如果一枚icon并不能够很清晰的传达到正确的含义的话,它将变成一个视觉上的噪讯,会产生各种各样的负面影响。

举个例子,下面是几个全宇宙都在使用的icon,(房子代表首页,打印机代表打印,放大镜代表搜索或放大),我猜我不说你也应该能知道。

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

当然了,这几款全人类已经达成共识的icon,大家用起来不会产生什么错误,然而问题是我们还有更多其他功能和物体需要用到icon来表示。来黑一黑苹果(开玩笑啦),它的Game Center的icon看起来就没能和“Game”产生很具体的联系,如果把下面的“Game Center”去掉换成“App Store”,好像也并不是不行,这样模棱两可的icon是我们应该尽量避免的。

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

另外一个例子,你们可能没见过以前的Gmail的界面,当时它并没有把所有其他应用都放到这个“抽象”的icon里面去,或许你经验老道,这个icon你看多很多次,它代表菜单,但是用户不是你。自以为别人和你一样对某样东西很熟悉,是产生这类问题的根源。

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

Icon首先要做到的是清晰地表达某个意思,设计师们要确保这一点:

  • 5秒原则:假如一个icon需要花费超过五秒钟的时间去思考它到底想表达什么,那么我们可以认为这个icon的效率不够高。
  • 选择大家都熟悉的样式:就像上面举的第一个例子一样,用户对于一个事物的理解很大程度建立在以往的经验纸上。多使用大家都熟悉、或者是对应平台上建议使用的icon,这样用户就能复用以往的知识,降低用户的认知负担,提高效率。

2. 由内至外的简单

老实说,icon并不是一个太适合设计师挥洒创意的地方。注意,我并不是说一定要循规蹈矩,照搬别人,但是一些基本又常见的功能,我们还是不要使用太时髦太超前的设计,这很容易发生错误。Icon不仅要看起来简单,它的含义也应该和它看起来一样简单,比如:刷新的icon就只能用作刷新操作,没有别的意思。我们以此来降低用户的学习成本,也提高了用户的使用效率。

3. 带上文字标识

好的用户体验能够以许多不同的维度加以解释,但无论从什么维度出发,减少用户的思考时间都是所谓好的体验必然存在的一个原因,这也就是我们常挂在嘴边的清晰度。Clarity(清晰度),在最近发布的iOS10人机界面设计指南中被提到了前所未有的高度,因此而改变设计思路的产品应该会陆续到来,足以看到以往的好些设计对清晰度在某种程度上的忽视。

回到icon上面来,上文说到的用大家都在用的样式的icon可以保证不出现离谱的问题,但是现实中我们并没有那么走运。一来,已经被大众所接受的样式其实并不多。二来,我们的产品又何止这几个常见的功能。所以设计出一个表意清晰的icon是及其困难的事情,而且不要以为用户会试着去把每个icon都点一下看看会发生什么事情,记住记住,他们不是热爱学习的你。

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

我们的用户宝宝们,在实际生活中,每天面对着无数多的好的坏的界面(interface),他们并没有多少探索精神。Icon带来的问题比你想象中的更加泛滥和严重,模棱两可,不知所云的icon是非常多的。那怎么办呢?

请在条件允许的情况下为icon加上文字的描述吧,不要在这些点上过于严苛地追求简洁。

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

UserTesting关于“icon带不带文字描述”做了一项调查,发现:

  • 带文字描述的icon,88%的用户能够在点击之前成功的预测到这枚icon意味着什么。
  • 不带文字描述的icon,这个数字降到了60%,而对于那些代表着这个app独有功能的icon,也就是说用户可能以前从来没有见过类似的icon,这个数字锐减到34%。

关于这个点,再说三件事:

  • 注意我并没有试图把“使用icon”这件事情说得非常简单。对于一些确实比较难以进行抽象化处理的功能或者说动作,我们真的很难用一个小小的icon就说清楚。使用图像传递信息有自己的局限性,这是无法突破的。所以如果可以的话,我建议大家尽量多为图标加上文字描述。
  • icon的说明文字应该一直就在那放着,很多视觉设计师觉得过多的文字会让界面看起来不美观,他们会更多的选择在用户首次打开app的时候给用户一个引导,但是你造吗?大多数精心设计的引导都会被无情的跳过,即便是认认真真的看了一遍,他们也会迅速忘记所有东西。
  • 有图有文总是最好的,假如你只能选择一种,那么就用文字吧,在追求清晰度的前提下,文字是更好的选择。

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

4. 好操作的icon(移动端产品)

在移动端产品上,用户的操作基本是用自己的手指来点击触摸屏完成,所以界面元素一定要足够大以让用户能够轻易地进行操作。下面给出一张图,大家看看人类的指头(食指)的宽度,人类指头宽度的均值是11mm,婴儿的指头宽度通常是8mm左右,而一些篮球运动员的指头宽度能达到19mm!

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

由上述数据得出,触摸屏上的可触控面积的物理尺寸最好在7-10mm左右。下面是苹果的iOS人机界面设计指南和谷歌的MD设计指南中推荐的可触控物件的尺寸。

  • 水果家说,最小不能小于高44px,宽44px。(或许就是因为这个,iPhone上的产品的按钮普遍要比Andriod上来的要小很多,必经iPhone的屏幕也越来越大了,期望在iOS10中会有所改进。)
  • 谷歌家推荐的最小尺寸为48dp X 48dp,在大部分安卓设备上,48dp X 48dp的物理尺寸大约表现为9mm。即便你的icon看起来并没有那么大,但是点起来也要有那么大。

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

另外一点也需要考虑:

  • 两个可触控区域之间的距离应该在2mm以上,以避免用户的误操作。

看似平淡无奇的Icons,到底什么才是它的正确使用方式?

5. 上手测试一下你的icon

Icon是那种最容易出现“看起来没问题”的现象的东西,所以,如果有需要,正儿八经地测试一下它的可用性吧。当然,别拿你自己来测,这是你设计的东西,你已经熟悉每一粒像素了,咱不能耍流氓。找个以往没用过的人来测试一下,这才是有价值的测试。

  • 是否很好懂。在使用之前让你的测试对象预测一下点击这个icon将会发生什么事情,如果猜对了,你和他都奖一颗糖,如果猜对了,请不要强行说人家笨,自己看看问题出在哪儿。
  • 是否很好点。这时候那些五花八门的可交互原型制作软件就能很好地排上用场了。把你想象中的东西做出来,看看在实际操作中表现的是不是那么一回事。

结论

Icon设计是ui设计里的重头戏,它可以很好,也可以很差。正如其他组件一样,icon首先应该做到它最该做到的事情,当一切都被正确地设计,icon带来的收益是巨大的。

 

原文地址:http://babich.biz/tips-for-using-icons-in-your-app/

译者:朱宇轩,一枚交互设计师,知乎专栏:DesignCoder

本文由 @朱宇轩 翻译发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24434/

(0)
CatherineCatherine
上一篇 2017-05-08 15:43
下一篇 2017-05-08 17:48

相关推荐

  • 用户所说,非其所做

    当用户反馈问题时,这真的是他们遇到的问题吗?当用户讲述需求时,这真的是他们的实际需求吗?可能未必真实。例如,一家公司曾做过一个研究,他们通过调查问卷询问用户对手机颜色的偏好,当询问用户是否愿意购买一个红色的手机时,许多用户都回答愿意;然而在问卷调查之后,研究者告诉用户,“你可以在一个红色和一个黑色的手机中选择一个作为礼物带走。”结果却发现,大多数用户仍然选择了黑色的手机作为礼物,即便是那些回答更愿意购买红色的用户也是如此。

    2017-05-26
  • 情绪板的制作方法:写给设计师的全方位使用指南

    在设计上图片比其他要素更容易让人理解,所以我们可以利用情绪板(英: Mood Board),来使设计工作更加流畅,缩短制作的时间、改善工作流程。

    2017-05-11
  • iOS 9人机界面指南(一):UI设计基础

    译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。

    2017-06-02
  • 【设计竞赛】第二届“衲田杯”等你来挑战!

    📌编辑 | Cassi.W编者按:第二届“衲田杯”可持续设计国际竞赛报名正式启动!中国城市规划设计研究院院长、全国工程勘察设计大师杨保军担任本次竞赛评委会主席。别犹豫啦,招呼你和你的小伙伴,快来报名参赛吧!不知大家是否记得宿迁那片迷人的多彩衲田花海?又是否还记得2017年这些在衲田花海绽放的一大波创意?▼▼▼点击图片了解更多 ↑↑↑没错!就是2017年国际设计竞赛的一匹黑马:“衲田杯”可持续设计国际竞赛第一届“衲田杯”可持续设计国际竞赛...

    2018-03-22
  • 【媒体观察】“爆款”G一代,好品质给用户体验“上保险”

    春夏交替的四川地级市资阳,天气多变。但降温和阴雨,还是没能阻挡住中国西南最活跃经济区域,吊装用户的热情与期待。2018年4月23日,将近400位用户,来到了“徐工G能大咖&新产品交接仪式”现场。到场用户的业务范围、规模、设备不尽相同。其中既有已经开始“公司化”运营者,也有依靠零散数台吊车积累第一桶金的“拼搏者”;既有跟随上一轮热潮涌入的新手,也有从业十几年甚至几十年的“老司机”。虽然对市场的理解,对未来的规划各有所取,但谈及徐工G一代产...

    2018-04-29
  • 网页设计的五个实际应用的趋势

    无一例外,每当我高兴的点击类似名为“今年网页设计趋势”的链接后都会感到失望。如果你写了一个2016年设计趋势列表,其中包括了全屏视频背景那你应该回去看看一些网站之前的各个版本。总之,闲话少说,下面列出五个今年上班年的实际趋势。

    2016-08-17
  • 通知:本站为了更好为广大的交互师服务, 现在更名为www.iamue.com

    通知:本站为了更好为广大的交互师服务, 现在更名为www.iamue.com 中文站名:我是UE 同时我们也启用了woshiue.com 广大交互师可加入交互设计学堂群参与交互原型设计讨论 群号:156360020 加群暗号:iamue  

    交互设计 2015-03-18
  • 沃尔沃自主驾驶概念交互设计欣赏

    沃尔沃自主驾驶的概念交互设计来自设计师Keke Le用户调研 |  HMI设计 |  UE/UI设计 |  HMI培训  |  HMI评测  | 体验咨询

    2018-03-21
  • 一个精美的手机的原型怎么产生的第一集

    阿西录了下视屏尝试下最直接的方式 ,你看着我怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-1 在线播放! 第一集: 第一集下载地址:点我点我 第二集下载地址:点我点我

    交互设计 2014-09-05
  • 我们都在交互稿中放了些什么?

    作为一名交互设计师,在输出交互稿件之时,要考虑的不仅是如何将需求转为具体页面,而且还要清晰的将其中的思想传达给对方。

    2017-05-08