图标设计之道

图标设计之道

在Atomicdust,我们’越来越多的图标工作:应用程序的图标,移动网站的触摸图标以及品牌的社交媒体配置文件都需要不同程度的肖像。就像任何设计专业一样,图标设计也有规则和最佳实践,并且遵循这些规则和最佳实践可以带来更好的设计,更强大的品牌。

规则一:保持简单

图标与徽标共享多个设计目标。它们必须立即被识别出来,与竞争对手不同,但要具有足够的通用性,以适应没有布局的布局。’根据您的品牌专门设计’牢记图形标准。

那’并不是说徽标将是选择图标或头像的最佳方向。它可以与简单的徽标一起很好地工作,但是复杂的徽标在放置到图标中时通常会失去可读性’的大小限制。在这种情况下,请尝试使用徽标的最简单本质作为图标的基础。许多徽标由文字标记和标志符号组成,因此仅使用标志符号是可能的。 (它’图标很可能会在移动设备或社交网络上伴随其他一些系统文本,因此包含品牌名称是多余的信息,会分散图标的注意力’s focus.)

一个简单的,在概念上相关且易于识别的字形在传达您的应用程序/站点/社交帐户的全部内容方面有很长的路要走。

Start designing icons in black and white. 那’不要说颜色和纹理不应该’不能用来增强品牌-下一节将对此进行更多讨论-但图标(以其最原始的形式)应在没有图标的情况下起作用。

规则二:拥有它

自信是吸引人和有效图标的关键。太多的品牌在其图标设计上要求徽标,最终产品因无效而怯。而是使用其他设计元素将图标连接到特定品牌。颜色,纹理,色调和其他元素可以极大地促进品牌形象的发展。

举个例子,这有点容易谈论。雅虎最近发布了一款出色的移动天气应用,名为— you guessed it —雅虎!天气。尽管有一些有趣且美观的交互设计,但该应用’的图标(因此,第一印象)可能会有所改进。 (我不’意味着选择Yahoo。他们’现在正在做出色的工作,而将这个帖子放在一起的时候,他们的气象应用简直是最重要的事情。)

这里’s 雅虎! Weather’s在iOS上的当前图标:

雅虎! Weather App 设计

字形很好。它’与其他天气应用字形的区别足够大,它’既友好又简单。不过,它看起来有点像库存图标包中的某物’有待改进。光滑的紫色渐变尖叫“Yahoo!”而且设计的整体扁平风格与Yahoo一致’s other properties.

尽管如此,底部的徽标仍然使整个过程陷入混乱。它使这件作品感觉便宜,并且使Yahoo看起来不安全。

如果我们删除它,而将重点放在寻找更独特的Yahoo风格上,将会发生什么?

雅虎! Icon 设计 Revised

经过一些小的修订,该图标真正开始崭露头角。雅虎最强的地方’风格调整时,强调s品牌(颜色,友好的形状)—投射阴影的形状,淡淡的质感—使它既更加考虑又明显“Yahoo!”.

规则三:计划生育

设计图标时’重要的是要考虑一个品牌是否需要一种设计语言的多种扩展。继续我们的示例,雅虎在iOS上拥有多个应用程序—尽管有些人遵循大致相似的图标设计原则,“Chat”应用程序图标的形式完全不同“Mail” icon.

让’取自我们先前示例的样式,并将其应用于其他Yahoo属性。

图标家庭设计

真好修改后的图标共享元素—紫色,友好的形状,微妙的质感—并与品牌完美融合。他们 ’仍然很容易识别,并且很容易在设备屏幕上找到。

这种执行方式自然可以建立品牌。而不是将徽标强制显示在用户面前’每次他们寻找您的应用时都会面对’可以在您的图标样式和良好的体验(或有用的信息)之间建立积极的联系。在这种情况下,使用Yahoo!会获得很好的体验。天气可能会导致更多人尝试Yahoo!邮件或聊天,因为他们’从同一块布上清楚地切下。

结论

规则是规则,直到它们成为障碍。许多伟大的图标设计师都违反了这些规则,’如果他们帮助最终产品就可以了。不过,我在美术学校学到的东西在这里适用:’最好在开始违反规则之前先了解它们。如果你’重新开始为您的品牌创建图标,或者您’重新尝试将您的产品紧密联系在一起,这是一个很好的起点。

杰森·斯托夫(Jason Stoff)

贾森·斯托夫(Jason Stoff)是位于美国密苏里州圣路易斯的花式裤子设计师,摄影师和流氓。并且在Atomicdust拥有“高级设计师”的头衔。

杰森·斯托夫(Jason Stoff)的更多帖子