APP的图标作为启动产品的入口,一直是一个重要的视觉符号,为了让用户更好的记忆,其设计通常使用与产品的功能和内容相关,让人看到图标就能联想到产品的功能使用场景等。用户也是通过图标来寻找、识别和打开产品的,可以说图标承载了产品与用户的第一次连接,有着非常重要的作用。例如很多电商APP在节日促销活动的时候,会把活动名称放在启动图标上,来提醒用户当前活动进行中,吸引用户进入。
图标一般可以分成主图形和底色色块两层。
颜色和形状是人们视觉感知最直接的要素,图标也是通过颜色和形状来表达产品的特点。主图形也就是形状,一般是对产品的功能、内容的表达,而颜色更多的是情感气氛的表达。
春节前后的这段时间,相信大家也一定注意到了有的APP图标也发生了一些变化,不少APP的图标换成了特别设计的春节版本,以此来增加节日气氛来与新春呼应。
以春节图标为例分析,我们可以通过以下5种方式来展开设计,分别是:变换色彩,丰富背景,增加前景,添加文字,添加新元素和多种手法叠加,下面就逐一来看看它们各自的特点吧。
1.变换色彩
色彩是一种有效的情绪传染方式,有研究表明人们在观察物体时的第一感受,色彩影响的占比为80%,形状形态占比为20%,这个影响值在20秒后会逐步下降发生变化,2分钟后色彩和形状的占比会变成60%和40%,5分钟后趋平各占50%。所以说色彩对视觉感受有这非常大的影响力,尤其在短时间的视觉接触中尤为明显。
不同的色彩可以引发不同的心理联想,经过长期的生活实践,色彩开始被人们赋予特定的情感定义,下图是几种常见颜色给人的感觉。
不过使用色彩的时候,也需要注意不同文化下色彩代表的不同含义,比如红色、黄色在中国代表喜庆,可以说是中国农历新年的固定搭配,绿色择因为美元纸币是绿色的,在美国有金钱的含义。
我们可以来看看变换色彩的例子,下图中看准的图标,在春节期间就更换了颜色,看准是直接完全改变了图标的颜色,变为代表春节的红色和金色,这样做的优点是可以最大限度的贴近节日气氛,缺点是与常态图标的差别较大,对于用户来说可能会觉得有点陌生。
再来看看幻影猫,在常态下LOGO是蓝色,圣诞时选择了紫色做背景,到了春节期间又换成了符合中国农历新年的红色。相对看准的底色和图形的颜色全变,幻影猫的做法是只改变底色,主形状部分保持不变,留下了辨识度高的白色猫咪,以减少因为颜色改变带来的陌生感。
2.丰富背景
背景渲染气氛也是一种常用的方式,常态下图标背景一般会使用比较简单渐变或者纯色,所以节日的时候通过对背景的丰富,设计与节日相关的背景图这样既不会影响主体层级,也可以很好的烘托气氛,是非常不错的选择。设计的时候我们可以利用情绪版来帮助我们完成背景图的构思。
搜狐视频的图标,常态下是白色底色,春节时改为淡粉色为主点缀紫藤花和灯笼的背景图,体现新春家庭温情、春色暖人的感觉。
天猫的背景图也延续了常态下红色渐变的颜色,左右增加了两匹打卡的红色洒金的大门,迎来圆形的福字图案,开门红,迎金福,是符合新年的吉祥喜庆寓意。
3.添加文字
在原有图标两层元素的基础上增加一层文字,以文字内容来表达主题。文字本身就具备强悍的内容传达功能,相比图形来说也并不弱,而且非常直接,适合有强烈愿望或者主题的表达。主要围绕文字的内容、字体、大小以及颜色进行设计,必要时可以增加一些背景的小元素比如烫金碎,小烟花等来烘托气氛让画面更加丰富。
比如今日头条的“发财中国年”,过年见面的寒暄吉祥话有不少是从一句“新年好,恭喜发财”开始的,这样的文字内容不仅用户喜欢接受程度高,也符合春节时期的气氛,有谁不喜欢发财呢。
另外还有新年数字,比如网易严选的“2019”,再没有具体的内容的时候,用新年数字来表示也是一种常见直接的方式。
腾讯视频在创造101节目播出期间,在APP图标上也加上了“创造101”的文字,文字背景择采取了舞台的形式与节目呼应,让人在看见启动图标的同时就马上想到了节目,以此加大推广力度宣传节目。
同样的还有双十一、双十二系列的图标,大多都是采取了以文字为主的设计。
4.添加新元素
添加元素是在原图标的基础上,加入与节日或者活动相关的元素,通过这些元素来烘托气氛。常见的有春节时期的生肖元素、云纹烟花、金福等,圣诞时期的圣诞树、圣诞帽、雪花和礼物等。在设计过程中可以先发散,用脑图列出相关元素然后从中选取。
比如美颜相机选择的生肖元素,猪年在图标上添加的一只小粉猪;闲鱼加入的是春节传统的鞭炮,映客选择的是春节期间舞狮活动的狮子服饰,ABCmouse择让吉祥物拿着红包,带上了传统喜庆的小帽子,产品本身是儿童教育类,红包压岁钱的场景也与用户贴合。
Facetune和美图选择的是节日元素某一点特征,提取为代表,比如Facetune的圣诞帽,美图的麋鹿角,简约但是特征明显,让人一眼就能知道是圣诞主题。
定位是年轻人潮流购物中心的有货则设计了更加有趣戏剧的一幕,选取的是圣诞老人钻烟囱倒栽葱的场景,既与圣诞的节日结合也保留了自己产品的调性个性。
360camera加入了圣诞树、圣诞老人以及飘落的雪花,营造了非常强的整体氛围。
另外除了增加新元素,也可以把相关元素与原有图标进行结合,比如搜狗春节图标就是把主图形做了剪纸化设计,通过剪纸、窗花的元素体现春节的气氛。
5.多种手法叠加
叠加上面两种以上的设计手法,多层次表达主题。比如全民K歌的春节图标就使用了多种设计手法的叠加,在常态图标的基础上丰富了背景图加入了中国传统元素的花纹和富有春节气氛的烟花,添加了“抢麦”的主题文字,同时还加上了麦克风的元素来突出。
多种手法叠加可以让图标气氛的表达更加充分,不过也要注意避免设计过度让图标显得过于繁琐。