首页
业务
关于
客户
服务
联系
13520390899
资 深 的 互 联 网 开 发 服 务 商
专注于 网站开发 / 小程序开发 / APP开发 / 软件开发
网十科技 > 动态

北京小程序开发教大家: APP中图标设计的小技巧

在早期的计算机图形学领域内,图标只能在有限的范围内被使用。从人机交互的角度来说,使用图标比使用文本更具有优势,原因如下:

简单、醒目、而且友好,可以取代一段冗长枯燥的描述;

随着屏幕尺寸变的越来越小,使用图标可以节省空间,这点是很受欢迎的;

使用图标看起来很舒服,并能增加设计的艺术感染力;

最后,在大多数应用中使用图标,是一种为用户熟知的设计模式。

尽管图标有这些潜在的优点,但如果设计时不考虑其潜在的负面影响,也会常常导致可用性问题这篇文章致力于总结UI中与图标相关的一系列主要问题,并提出一套对这些问题的解决方法。您可以在图标设计中使用这些技巧作为起步,来更好地完成工作。

1.图标应传达含义

设计师们有时会过于注重形式,忽略了本身的功能,导致图标难以识别,这打破了它最重要的图形意象属性图标的传达含义功能必须放在首位。按照定义,图标是一个对象或动作的视觉体现。如果对于用户而言,这个对象或行动不明确,该图标就立刻失去它的实用价值,并成为一个视觉干扰。

以下是一些在用户心中享有普遍共识的图标。。

容易辨识的图标

但除了这些例子,对用户而言大部分图标的意思仍旧模棱两可,以为它们还具有不同的含义。例如游戏中心图标,是一组色彩鲜艳玻璃感的圆圈。这代表了什么含义?它与游戏有什么关系?

游戏中心图标无法传达游戏的概念

看看另一个例子︰当谷歌决定简化Gmail用户界面,把所有功能隐藏在一个抽象的图标之下,他们得到的是一大堆用户的帮助请求,比如我的谷歌日历在哪里?

桌面端的GMAIL界面

无论你能理解多少这个图标的含义和代表的功能,对初次看到这个图标的用户来说体验仍旧可能完全不同。假定用户都熟悉这些抽象的图形是一个普遍的错误。

图标的首要任务是引导用户去他们需要去的地方,所以请确保他们能够实现这个目标︰

使用5秒钟规则︰如果花了你超过5秒考虑一个合适的图标。这个图标不太可能有效地传达含义。

选择熟悉的图标:用户对图标的理解往往基于以前的经验。让自己熟悉竞品所使用的图标和常用的目标平台上的图标,那些是用户最容易辨认的。

2.保持图标的简单和示意

在大多数情况中,设计图标无需发挥创意。别误会,并不是说创新图标是不好的,但基本功能太花哨的图标可能会对用户体验产生负面影响。如果你想展示你的设计技能,你可以依靠其他设计元素传达你的产品信息,同时保持系统图标的设计简单、现代、友好。

图标设计理念的本质是减到最简形态简化图标是出于降低学习曲线的需要。设计应确保即使图标在小尺寸更具有可读性和清晰度,所以精心设计的图标应该能够快速辨认,一目了然。

3.包含清晰可见的文本标签

良好的用户体验可以定义在很多方面,但衡量标准之一是减少了多少用户思考的成本。清晰是一个好界面的最重要特征。图标的设计应该帮助用户毫不费力知晓他们要做什么。但是,图标的问题在于用户会基于之前的经验对每个图标联想出不同的含义。假定用户会为了探索每个图标的功能而一一试用是另一个常见的误解。

苹果邮箱的标准化屏幕。你能准确的定义每个图标表达的含义吗?

事实上,用户面对不熟悉的界面常常有不安全感,而且并不会到他们的舒适区域之外探索。在一些特殊的上下文环境里,为避免几乎所有图标都可能会产生的歧义,应该在图标周围设计一个文本标签用于清晰表达其含义。为用户在点击前设定清楚的预期。

同样的设计中加入了文本标签的图标,文本标签解释了图标的含义,并提高了可用性

UserTesting进行了一系列关于是否是要标签的测试,结果发现:

对于带有标签的图标,88%的情况下,用户轻点图标时可以准确地预测接下来会发生什么。

对于没有标签的图标,这个数字下降到60%。对于那些特殊的图标,这个数字只有34%。

这里有三个重要的情境需要考虑:

对于更多复杂且抽象的功能来说,图形化的表达具有局限性。所以他们应该使用合适的文本标签来展示。

7x24
售后服务支持
10
故障时长赔付
16
16年行业服务经验
20
售后服务人员
70
设计、开发团队
10
国内顶尖技术专家
1000
大型及上市企业
版权所有 © 北京网十互动科技有限公司 网站 APP 小程序 软件 备案号:京ICP备16050073号-2

电话咨询