干货!7个设计师必知的图标设计原理,收藏了

清晰度,可读性,一致性,简洁性,一致性,个性,易用性。


干货!7个设计师必知的图标设计原理,收藏了


创建高质量的图标套组需要合适的方法,训练有素的眼睛,一些迭代和大量实践。下面,我将通过7个原则和大量实际示例来说明。最终目标是让你了解设计出优质图标的关键细节。


001.明晰

图标的主要目标是快速传达概念。

干货!7个设计师必知的图标设计原理,收藏了

普锐斯Prime仪表盘上的图标(来源:2020年手册)

在这一系列符号中,哪些是你看起来最清晰的呢?驾驶员可能会随着时间的流逝学习它们,但是其中一些图标并不直观。您需要一本手册来解释其含义。

这大致就是用户了解图标的过程,从简单到复杂:

干货!7个设计师必知的图标设计原理,收藏了

当图标使用不熟悉的隐喻时,用户就会很难理解。安全带“提醒灯”(左起第3个)非常直观,我们可以快速掌握。“电动助力转向系统警告灯”(最右边)更加难以理解。

通常,不清楚的图标只会令人心生沮丧。对于驾驶员来说,误解警告指示器可能会造成危险。

以下是一些较熟悉的图标-爱心,警告,音乐和上/下方向的符号:

干货!7个设计师必知的图标设计原理,收藏了

Phosphor Carbon图标家族的熟悉隐喻


箭头是在寻路中使用的强大符号:


干货!7个设计师必知的图标设计原理,收藏了


纽约市地铁标志(来源:《纽约市交通管理局图形标准手册》


最理想的状态是,图标不仅对于一组人来说易于理解,而且在不同的文化,年龄和背景下都是通用的。考虑一下您的用户,并使用与之产生共鸣的隐喻和色彩。

请记住,如果所表示的想法过于抽象,则独立图标可能不是最清晰的解决方案。在这种情况下,请将图标与文本标签配搭配使用。

002.可读性

图标不仅要易于理解,更要便于阅读。


干货!7个设计师必知的图标设计原理,收藏了


Amtrak移动应用程序中的图标


由于细节太复杂,用户很难有更好的可读性。

下面这款交通应用也有类似的问题。剪贴板图标一团黑,与上方的图标风格完全不匹配。


干货!7个设计师必知的图标设计原理,收藏了

Transit移动应用中的图标


稍作调整将带来很大的改进:

干货!7个设计师必知的图标设计原理,收藏了

调整后的剪贴板图标

处理多个形状时,请在它们之间留出足够的空间。更细更多的笔触,将使图标更复杂,更难以阅读。

Google Maps的图标非常出色-可读性很棒:


干货!7个设计师必知的图标设计原理,收藏了


Google Map图标


003.对齐

为确保每个图标感觉平衡,请精确的将他们对齐。


干货!7个设计师必知的图标设计原理,收藏了

在此播放图标中,尽管三角形按看起来放置在圆的中心,但我们的眼睛却误认为是不对齐的。三角形的较宽部分感觉比左侧“重”,所以我们要手工进行一些调整。

就像排版人员进行细微调整以在字体中创造平衡的视觉效果一样(请注意“ i”和“ j”上的偏心点,以及“ O”上的过冲点),


干货!7个设计师必知的图标设计原理,收藏了


-设计师会进行类似的调整以平衡图标。要更正上面的示例,请稍微移动元素:

干货!7个设计师必知的图标设计原理,收藏了


所以,请不要仅仅相信数据,也要相信你的眼睛。


004.简洁

谷歌的Material Design在其系统图标指南中很好地说明了,下面的图明显过于复杂了:

干货!7个设计师必知的图标设计原理,收藏了

过于复杂的船形图标(来源:Material)


下图就是很好的表现方式:

干货!7个设计师必知的图标设计原理,收藏了

简洁的船形图标(来源:Material)


简洁很适合图标设计,因为我们经常在小画布上工作。为图标使用适当的细节量,不要使用过多的内容。

在用户界面中,简洁风格可以理解并为内容腾出空间。Telegram的图标简洁有趣:

干货!7个设计师必知的图标设计原理,收藏了

电报图标

有时,UI图标会采用更具象的表现形式。这些Yelp图标是用来为用户展示热门食物搜索的一种令人愉快的方式。泰国食品图标中的虾非常精致:


干货!7个设计师必知的图标设计原理,收藏了

Yelp图标


使用代表移动,平板电脑和桌面应用程序的应用程序图标,适当的细节量可能意味着更多的深度和色彩。由于观众可以在移动主屏幕,码头和应用商店中了解其背景,因此图标可以更体现品牌和产品。


干货!7个设计师必知的图标设计原理,收藏了

苹果应用程序图标


005.一致性

为了使图标家族达到和谐,请始终保持相同的样式规则。

在iOS 13之前,Apple的图标具有各种笔触,填充和大小:

干货!7个设计师必知的图标设计原理,收藏了

iOS 13之前的苹果图标

任何给定的图标都具有一定的视觉权重,该视觉权重由诸如填充,笔触厚度,大小和形状之类的参数确定。在一个集合中保持这些参数相同可以建立一致性。

干货!7个设计师必知的图标设计原理,收藏了


苹果公司最近推出了SF Symbols,它拥有9种权重和3种比例的图形图标风格(也许有点复杂)。在不同的图标之间,以及在填充和轮廓变体之间,它们都感觉更加和谐。


干货!7个设计师必知的图标设计原理,收藏了

苹果SF Symbols中的图标


对于大型图标家族来说,保持一致性并不是一件容易的事,尤其是涉及多个设计师时。遵循明确的原则和规则至关重要。

Phosphor的图标套组将700+图标通过相同的一般准则和严格的测试,以保证每个图标一致。尽管每个图标都有不同的形状,但它们重量相同,并且可以很好地相互搭配使用。

干货!7个设计师必知的图标设计原理,收藏了


006.个性

每个图标集都有其独特的风格。是什么让它与众不同?它对品牌有何影响?它会让用户产生什么心情?我们都需要反复考究。

干货!7个设计师必知的图标设计原理,收藏了


Waze图标

Waze为什么受欢迎,在很大程度上取决于其图像设计。这些色彩斑斓的图标对用户说:“我们很古怪!”

Twitter的图标柔软,明亮,清晰:


干货!7个设计师必知的图标设计原理,收藏了

Twitter图标


Sketch的图标精致而通透:

干货!7个设计师必知的图标设计原理,收藏了


Freemoji的图标则非常可爱:

干货!7个设计师必知的图标设计原理,收藏了


Android图标则抽象,多彩,亦或具有霓虹灯风格。

干货!7个设计师必知的图标设计原理,收藏了



007.使用方便

完美绘制你的图标集并不代表你的工作完成了。它需要进行进一步的测试和准备,以确保后续设计师易于制作新图标,并在多种设计中使用它们(用于屏幕,印刷等),以及工程师将其编码到产品中。


008.有组织的

保持文件整洁,为图标资源命名并合理放置它们,以便于查找。考虑最好的分类方法。是按字母顺序?按大小?按类型?

干货!7个设计师必知的图标设计原理,收藏了


009.总结下图标设计的原则:


•清晰度。首先要清楚,使图标可识别和可读。切勿牺牲图标代表的清晰度。
•简洁。使用尽可能少的细节。每笔动作都要简洁明了,以传达所要表达的本质。
•风格。要独特,添加一些独特的细节可以让人觉得图标很有人情味。
010.其它可参考技术细节:
•使用48x48px的画布
•使用1.5像素居中笔画
•使用圆润的边角
•使用连续的笔触,除非折断的片段有助于理解
•尽可能使用直线段,完美的弧度和15°的角度增量
•必要时调整曲线以保持设计原则
•尽可能使用整数,偶数增量进行测量;必要时可使用至1px和.5px


011.测试你的图标

检查一致性。确保图标在UI界面中工作良好,确保它们与较大的视觉系统协调工作。

将图标彼此并排放置有助于证明我们的上述原则(清晰度,可读性,对齐方式,简洁性,一致性和个性):

干货!7个设计师必知的图标设计原理,收藏了

Phosphor的质量检查流程中使用的测试表


原文地址:https://medium.com/@minoraxis/7-principles-of-icon-design-e7187539e4a2

翻译:静电@静Design


分享到:


相關文章: