优秀的图标,少不了这7个底层设计原则

访客4年前关于黑客接单1314

对设计师来说,要设计出一套高质量的图标体系需要深思熟虑的要领,一双像素眼,不绝迭代和大量的实践操练。本文将通过7个原则和案例来说明一个优秀图标的特点,目标是找到好图标的要害属性,从而设计出高质量的图标。

优秀的图标,少不了这7个底层设计原则

关于图标这方面的设计文章我发过许多几何篇了,但从找我资助看作品集的伴侣那看到,图标问题依然长短常多。

各人不能只是看了,还要去用呀。

大概又有人会说,到底怎么用呢?就好比说本日这篇文章,你就比较着本身设计的图标,一条一条的去查对,是否都切合这些原则。其实,最后岂论是否切合这些原则,多次比较后,才大概真正内化为本身的本领,设计的时候才气自然地设计出好的图标了。

本日要先容的图标原则共有7条:清晰,易读,均衡,简捷,一致性,本性,易用性。

01 清晰

图标的主要方针是快速表达一个观念。

优秀的图标,少不了这7个底层设计原则

图片来历:Prius Prime instrument cluster (Source: 2020 Manual)

在这陆续串的图标中,哪些对你来说是清晰易懂的?跟着时间的推移,老司机们大概会认识这些图标,但个中一些图标并不直观,需要一本手册才气读懂它们的意思。

以下是用户测试的功效:

优秀的图标,少不了这7个底层设计原则

当一个图标利用了一个不熟悉的隐喻,它很难被领略。安详带上的提示灯(左起3号)是很字面的,我们可以很快地把握它。电动助力转向系统(最右边)则很是恍惚,很难记得住它的意思。

我碰着过的一些最不清晰的图标是在摄影应用VSCO中。你能猜出它们的意思吗?

优秀的图标,少不了这7个底层设计原则

从左到右,这些导航图标暗示:Feed、Discover、Studio、Profile和Members。夹杂VSCO的价钱很低,因为它只需要点击几下就能弄清楚每个图标代表什么。

图标成长汗青中,抽象的标记被重复利用,从而逐渐尺度化,目标是成立配合的领略。1984年,Susan Kare受命为苹果键盘上的“成果”键设计一个图标。她从北欧的地名标记中得到灵感,设计了这个抽象的标记。

优秀的图标,少不了这7个底层设计原则

由Kare设计的mac 成果键图标

这个图标已经成为一个经典,代表了我们所说的苹果键盘上的呼吁标记。(彩云注:这个成果键的作者也分享了她的创作进程https://vimeo.com/97583369)

Susan Kare 可以或许发现这个标记是因为其时还没有一个名目标尺度。在设计图标时,思量是否存在一个现有的隐喻,好比配置的齿轮,可能从头发现一个全新的符合的图标。

下面是一些让人感受更熟悉的图标——点赞、告诫、音乐和前进偏向的图标:

优秀的图标,少不了这7个底层设计原则

来自 Phosphor Carbon 图标体系的熟悉隐喻

箭头图标的浸染很是强大,凡是用于寻路。

优秀的图标,少不了这7个底层设计原则

图片来历:纽约地铁符号 (Source: Standards Manual)

图标被设计最乐成的环境是不只对一群人来说很容易领略,并且在差异文化,年数和配景下都是通用的。思量方针用户,利用能引起他们共识的隐喻和颜色。

02 易读

一旦设计好了容易领略的图标,然后就是确保它是可读的。

优秀的图标,少不了这7个底层设计原则

应用 Amtrak中的图标

之一个图标由于细节太多,以至于很难快速辨认出它是什么。

Transit应用有雷同的问题。他们的剪贴板图标负空间太小,导致无法阅读。

优秀的图标,少不了这7个底层设计原则

细微的调解会带来很大的改进:

优秀的图标,少不了这7个底层设计原则

调解后的剪贴板图标

当设计多个形状时,在他们之间留出足够的空间。更细或更多的图形会使得图标变得越发难以阅读。

谷歌舆图做了一个很好的设计,他们所设计的图标在很是小的尺寸时也很是易读。

优秀的图标,少不了这7个底层设计原则

03 均衡

为了确保每个图标视觉均衡,需要在视觉上对齐它的元素。

优秀的图标,少不了这7个底层设计原则

不服衡的游戏图标

相关文章

如何利用微交互改善移动应用设计?

如何利用微交互改善移动应用设计?

出色的用户体验不仅仅在于可用性,产品的视觉呈现和状态也与用户体验息息相关。文章目录如下: 一、微交互定义 用户在使用产品时,会进行一系列的手势操作,这些操作带来的界面反馈就是微交互。这些微小的动作...

商品管理系统设计(三):商品管理

商品管理系统设计(三):商品管理

前面两篇文章别离先容了商品打点系统中的类目设计和属性库搭建,它们只是为商品打点起到帮助的浸染,而商品打点真正的焦点在于商品,所谓无商品不电商。 01 什么是商品系统 商品打点系统属于电商产物中最基本...

客户成功、客户体验、客户服务,有什么区别?

客户成功、客户体验、客户服务,有什么区别?

编辑导读:B2B 和 SaaS 产物越来越多,客户对其的要求也就越来越严格。越来越频繁呈现的词:客户乐成、客户体验、客户处事,这些术语和观念令人疑惑。它们有什么差异呢?本文将从三个方面展开阐明,但愿对...

关于你想知道的情绪化设计

关于你想知道的情绪化设计

编辑导语:什么是情绪化设计?它呈现的一定是什么?情绪化设计有什么意义?如何界说设计是否优秀?环绕这四个问题,本文作者对情绪化设计展开了深入的阐明。 “人类的生命,不能以时间是非来权衡,心中布满爱时刹...

移动营销时代的“动态矩阵”:媒体、创意、活动

移动营销时代的“动态矩阵”:媒体、创意、活动

全链路营销是一条单链,办理左支右绌的问题最好的步伐是让一条条单链构成一个雷同于“巴克球”的矩阵,但这个矩阵并不是一成稳定的,而是一个动态的矩阵。这个动态矩阵是由三个矩阵构成的:营销渠道矩阵(媒体矩阵)...

竞品分析:浅谈SHEIN和Zaful在产品层面的异同

竞品分析:浅谈SHEIN和Zaful在产品层面的异同

编辑导语:连年来,跨境电商在糊口中到处可见,可是与海内电商差异,跨境电商要越发具有专业性和品牌调性,在网站设计、社区运营等方面要越发重视,才气在跨境规模站稳脚跟。本文作者具体阐明白跨境电商竞品在产物层...