赞助商
立即赞助

好图标什么样?这有一份大神总结的检查清单!

UI设计3年前 (2021)更新 流光
2K 0 0

图标设计,即icon设,界面设中占很重的置,一好的图标,可户「一秒即懂」,如何设计优秀的图标,这篇章给你解答。

图形交互界面(GUI)中,图标(icon)一种常使用的设元素之一。

怎样设计个优秀图标呢?在这篇文章,我会分享个简单使用单,帮助你把图标更好地展示你用户。

易识别

晰度是优秀界最要特征,不幸是,图标往往不够晰。

图标必须第一间传达最重要的息。当图标不能够立刻表达出所代表的含义,它就会变成一种「视觉噪音」,失去了图标存在的义。

优的图标不用阅读标签或文字提示,就以被认理。

几个简单的规则,可帮助你避免使传达含义的图标。

  1. 尝试使用用户熟悉的icon

用户对于图标的理解,一基于其使用认知的经验。这就是为何使用用户熟悉的图标效果会比使用独的图标要好。

依靠通用型图标。就像屋子、打印、玩游戏和搜索等等,不需要进行任何释的图标。

好图标什么样?这有一份大神总结的检查清单!

△ 通俗易懂的图标

调查研究,检查你的竞争对手的图标。

  2. 不要使用有歧义的icon

应该避免使用有多重含义的图标。举例来说,「心形」图标和「星星」图标都可以作为「喜欢」或将内容「收藏」起来。当一起使用可能给用户造成干扰。

好图标什么样?这有一份大神总结的检查清单!

△ 心形和星星图标有歧义

  3. 测试icon含义表

不听从一些类似「人们每天都用我们的产品(APP),他们肯能理解图标的意思」的话。

请测试你图标!

「5秒钟则」是一种测图标的有效方法。问问用户希望这个图标代表什?

果需要花费5秒钟以上去思考个图标,么个图标就不能有效地传达其意义。

  4. 测icon的可拓展性

测试你icon在类似15x15px尺寸下是否依旧晰。

好图标什么样?这有一份大神总结的检查清单!

△ 音乐图标缩放晰

  5. 给陌的icon标签文字

如果你还是想要使特殊的图标,可考虑在旁边给图标附上字标签。

好图标什么样?这有一份大神总结的检查清单!

△ 图标+字

  6. 不要重新定义icon的含义

通过更改图标的含义来混淆用户相当容易。当图标的功能预期认知不同,会造成用户混淆。

不要重新发轮!

即使义上的细别,也会妨碍用户理解图标的能力。

很长一段时间,Google Docs 使用的图标看来就像一个汉堡包。大数界面使用类似的图标来表示主导航菜单,但Google 重新定义它的含义并将其用「退/返回」操。当用户点击此图标时,他们被重新引导到 Google 文档主页。

好图标什么样?这有一份大神总结的检查清单!

视觉舒适

可以通过插画、颜色以及图标传达品牌个性。如果做得好,图标肯定可以增计的美。

  1. 减少图形细节数量

KISS原则用于所UI元素,包括图标icons。保持图标的简洁性,并且遵循以下两条原则,避免必的复杂性:

  • 限制颜色使数量,使超过3或4种颜色,保持设计简洁。
  • 通过聚焦于对象的基本特征,减少图形设细节的数。尽保持设的概性 ,使图标不同的界面分辨率都可以行转换。

好图标什么样?这有一份大神总结的检查清单!

△ 请勿花俏,避免设计的图标上包含太的视细节

  2. 通过添加动画效果创造愉悦体验

动画效可以表晰功能目,并可以创造用户愉悦体验。

对于形改变的情况,使用动画效果可以创造更好的动体验。

合适尺寸

图标应该好地作为用户的目标点。

设计师常见的错误之一,是在手机上为图标留下太小的空间。当你为触摸进行设计时,确图标能够够大,方便手指的点击。

参考:目标在屏幕中点击范围为7-10mm。并且,请确保在目标对象之间添填充,防止准确的点击。

好图标什么样?这有一份大神总结的检查清单!

△ 实际目标尺寸=视觉目标尺寸+填充 图片:Microsoft

一致性

  • 一致性是计中的关键则;
  • 一致设计是一种直观设计。

当使用相似的素且有一致的外观和功能,可以让可用性和可学习性都得提升改善。

  1. 内部致性

图标设应该保持视觉统一,决用于产品的图标,应该保持统一样式。

理想情况下,它们看起来应该是位设计师设计。以下是你需要遵循关于创造统性几条原则:

  • 使用相同颜色或者颜色组合的图标;
  • 使用相形状和其他样属性(例如边框大小)。

好图标什么样?这有一份大神总结的检查清单!

△ 没有凝聚的图标看起来很糟糕

  2. 与平台持一致

确保你的目标风格一致,它会让用户更容易理解。

好图标什么样?这有一份大神总结的检查清单!

△ 苹果iOS 和Google 安卓图标

  3. 与品系列保持致

如果拥整产品系列,确保一致的图标风格(或至少类似)应用所的产品中。

总结

通常,的项目寻找一合的图标并不易。这就什么我分享这资源列表让这任务变得简单。

我会定期更新列表,以便你可以找到更有用资。

文链:《Checklist for Using Icons In UI》  Nick Babich

译者微信号:JJ865477301

注译者的微信公众号:「JAYGO」

好图标什么样?这有一份大神总结的检查清单!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

目前我主要深耕于B端设计中,深知B端图标设计与C端有很大的不同,无论是应用的场景、设计的理念,都有非常大的差异,而现在网...
B端产品
@菜心设计铺 :前几天做了《暴风影音 App 重设计》,不过还没做完,所以今天主要讲讲我寻找改版切入点的方法——品牌探索。 到...
ICON
如果要设计产品或开发界面,我们通常会需要风格相同的图标,若无法自行绘制或不希望付费购买也有很多替代方案,本文要推荐的...
图标素材
iOS14 发布之后,在 iOS 系统中已经悄咪咪发展了好几年的「快捷指令」,终于拥有了更多的权限,更强大的能力——在它的帮助下甚...
iOS14
在《从零开始画图标系列:超全面的基础知识》中我们知道了,工具图标的三种设计类型,以及对应的不同风格。本篇文章,内容主...
图标设计
@菜心设计铺 :最近在做图标的优化调整,虽然改动不大,但在复盘的时候还是总结出很多心得,在这里和大家分享一下。 图标是...
ICON
作为一枚设计民工,不仅要面对甲爸们的百般刁难,遇到难搞的数据图表时更是苦不堪言:一份合格的数据图表,在有创意、让信息...
UI
@Daidai丶呆 :有读者说,面试的时候面试官提到了一个问题,但不知道怎么回答。 这个问题是:实心图标和空心图标的区别是什...
图标设计