iOS app icon 通用设计规则

作者：Hindy

原文首发于微信公众号：UIcircle

转载无限欢迎，但请注明「作者」和「原文出处」。感谢您对作者版权的尊重。

前言

之前看到了这个问题：为什么很多 App 图标使用白色，而不是用 Brand colors 做底色？。于是我乘此机会研究了 iOS 下的 App Icon，总结出下面几条设计规则。虽说是规则，也并非绝对，只是一个可以简单套用的设计技巧而已。我将在本文列举一些优秀的 App 图标加以佐证。

总结出的 3 条设计「规则」：

1. 如果品牌 LOGO 在「颜色」上的展示诉求大于「造型」的话，可用白色背景加品牌 LOGO；

2. 如果品牌 LOGO 「造型」足够独特具有高识别度，或对「颜色」诉求相对较小的话，则可用品牌色做背景；

3. 如果产品拥有具象的形象物或场景的话，可设计「拟物化」或「 场景化」的图标（游戏图标居多）。

先让我们来看下适用于第一条规则的。 

如果品牌 LOGO 在「颜色」上的展示诉求大于「造型」的话，可用白色背景加品牌 LOGO。

怎么理解这句话。

首先我们第一眼可以感觉到这些图标里的 LOGO 颜色都是较为丰富的。

其次，像「Google」、「Bubble Chat」、「Hyperlapse」等都是造型非常简单的，「Hyperlapse」甚至就只是一个圈。这些 LOGO 比起形状，颜色会给人更深的印象。

另外像「Google」、「Medium」将带色彩的 LOGO 作为主要形象充满 VI 系统中，被人们所熟知。因此使用白色背景，用形象的 LOGO 更将有辨识度，被人所接受。

再来看下第二条规则。

如果品牌 LOGO 「造型」足够独特具有高识别度，或对「颜色」诉求相对较小的话，则可用品牌色做背景。

理解了第一条的话，这条比较好说了。上面这组图标中，除了「Memoir」外，大家可以发现图标中的 LOGO 图形都是比较有独特性、高识别度的。并且这些 LOGO 图形自身对颜色的诉求也并不大，因此可直接使用品牌颜色做背景，上面放个 LOGO 形状。

当然出于差异化或美观，可以让 LOGO 多些细节，如「Airbnb」的阴影和「美拍」的渐变色。 

再来看下第三条。 

如果产品拥有具象的形象物或场景的话，可设计「拟物化」或「 场景化」的图标。

相信这个很好理解。游戏图标自然不用说，比如「Monument Valley」、「Hearthstone」。像 「Dueling」和「Twitterrific」这类自身有形象物的产品，也可以用形象物直接作为图标。「Sooshi」和「Wunderlist」也类似，只是「Wunderlist」的这枚图标直接作为 LOGO 使用，被人所知。

最后要说的是，图标不是独立存在的，一定要结合产品本身设计。 

举例来说 iOS 9 的「音乐」图标相较 iOS 7 就有很大不同。为什么要改？这是因为产品本身发生了巨变。

iOS 7 时期，系统自带的「音乐」App 更偏向一个工具，同步 iTunes 上的音乐，然后作为播放器播放。而 iOS 9 的「音乐」它自身带有大量内容，做了流媒体服务。人们可以通过这款 App 去浏览发现音乐，而不单单是个音乐播放器了。并且，「音乐」App 中的界面搭配了大量色彩配色，从界面本身展示给人这是款「多彩」的 App。

因此，当软件发生了这样的巨变后，自然不能使用单调的 iOS 7 图标了。当然，这次改变更重要的作用就是告诉人们「俺已经变身啦！」

公众号：UIcircle

↓欢迎点赞↓