[

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图1

](https://medium.com/@stefanomalachi?source=post_page——-f2fe7d920d0————————————————)

w ^ 帽子是图标吗?对我来说,图标是一种真正的通用语言,它会产生细微差别,而这些细微差别可能会在印刷文字或翻译中丢失。例如,如今比起简单地写 “道路工程”,下面的第一个红色标志更容易理解。另一个示例,第二个红色标志比简单地写“可能会过马路的脆弱(或盲人或残疾人,如果显示)行人” 更容易理解。

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图2

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图3

不使用图片就不可能教授语言。世界上一些当代书写系统不是字母的,而是逻辑的和表意的,代表的是对象和思想,而不是词语的发音。例如,Chineasy使非汉语讲者更容易学习汉语写作。

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图4

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图5

对我而言,图标的字面意思是颜色,符号,象形图,表情符号,按钮,徽标或代表创意或图片的任何视觉效果。

另一个流行的例子是表情符号。表情符号很有用,不可忽视,更能表达人的思想和感受。由威廉 · 范 · 兰克Willem Van Lancker)出品的著名苹果表情符号,最初是为在日本推出的 iPhone 设计的,如今已在全球所有苹果设备和操作系统中使用。要了解有关 Apple 如何成功实现其表情符号的更多信息,请阅读此处

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图6

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图7

弥尔顿 · 格拉瑟(Milton Glaser)将 “我爱纽约” 设计成通用图标,只需将 “爱” 一词替换为心脏图像即可。

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图8

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图9

我发现这些技巧对于在全球范围内为网站和移动应用程序设计数字图标时的第一个想法很有用:

简单易读

首先,该图标必须以至少 24 像素的黑白模式显示;否则它将失败。

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图10

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图11

一致性至关重要

图标必须具有相同的线宽和相同的几何形状。形状应完全在小圆圈和矩形上定义。当图标基于相同的常规元素时,它们看起来就像属于同一家族。

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图12

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图13

单色

最好每个图标只使用一种颜色,而没有阴影,阴影,渐变或其他会损害其轮廓的细节。

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图14

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图15

坚持对称或相同的不对称性。

倾斜图标是使它们在其他设置中脱颖而出的好方法。但是,如果要这样做,则将它们全部倾斜相同的角度,以增强它们属于同一家族的地位。使用相同的角度,例如 90°,45°,30°。

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图16

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图17

专一

图标必须采用一种尺寸或平面形式。

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图18

系统图标的UI设计技巧。 什么是图标? 对我来说,图标是... | | 由Stefano Malachi | Muzli-设计灵感 - 图19

有没有免费的图标设计模板?

好消息是!要获取更多关于图标的见解和详细信息,您始终可以参考Apple System 图标材质图标。对于免费的图标模板,只需从此处下载即可。

希望本文对您有所帮助!如果您这样做,请喜欢并分享此帖子,以帮助其他人更多地了解 UI 设计!

#SharingIsCaring

Holla 在TwitterLinkedInDribble上向我致意

免责声明:这些是我的个人观点和意见,与我的雇主或这篇文章中的任何其他参考文献无关。我也不认可这篇文章中提到的任何公司或服务。
https://medium.muz.li/ui-design-tips-for-system-icons-f2fe7d920d0