- 设计理论 -

做应用图标前,不得不了解这三方面知识

作者:风筝 原文出处:海盐社
2018-07-13

WechatIMG52.jpeg

应用图标相当于我们品牌的logo,是用户进入APP的第一入口,他设计的好坏,传达信息的不同会直接影响到用户对应用的第一印象,并以此来判断应用的品质、作用以及可靠性。可见应用图标的重要性。

今天主要给大家分析一下,做应用图标前,不得不了解这三方面知识,第一应用图标栅格系统;第二应用图标类型分析;第三竞品图标分析。

第一,应用图标栅格系统

在应用图标设计时,我们一般是需要遵循图标设计规范,了解这些规范之后,你才能知道你设计的图标应该放置多大,该如何放置。我们所熟知的就是IOS的系统图标栅格系统,平时设计我们也多以它为基准。

WechatIMG2.jpeg

以上运用了《秩序之美》中的黄金分割,√2和三分法。其中应用图标的栅格设计,主要是从IOS7开始的,也就是我们现在看到的这个栅格系统。

它以64px为一个单位,即a=64px。那么大正方形的边长的一半=8a,大圆半径=7a,中圆半径=4.25a,小圆半径=3a

8a/(8a-3a)=1.6 小圆与大正方形接近黄金比

7a/4.25a≈1.647 中圆与大圆接近黄金比

4.25a/3a≈1.417 中圆与小圆比例接近√2

整个栅格系统中的尺寸都是通过比例互相联系的。

WechatIMG3.jpeg

由于iOS的应用图标是放在手机屏幕上的,IOS上的图标都需要切圆角,因此在设计时,图标不能超出大圆区域。

如下图:

WechatIMG4.jpeg

第二,应用图标类型分析

在设计图标前,还需要确定你设计的方向是什么,怎么确定方向,现在应用市场里面图标那么多,多去借鉴,去参考一些优秀的设计。这里我通过对比归类,总结了两个方向,即表现形式和设计形式两种。

表现形式主要有哪些?

类似Logo设计中是采用文字设计还是图形设计,或者采用文字+图形设计。应用图标和Logo设计类似,主要有:中文图标、英文图标、吉祥物图标、产品相关图标、功能传递图标。只有了解了这些图标的优缺点之后我们才能够知道自己的产品适合哪一种类型。

1、中文图标

文字图标是最直接的表现方式,一般用产品的名称首字或者核心文字来进行设计,采用这种方式的优势是具有较强的识别性,用户看到名字就能够一眼识别出来是哪个APP。不过其针对知名APP有效,不知名APP识别性就很低。

WechatIMG5.jpeg

以上知乎、支付宝、脉脉、房天下、淘宝均是采用品牌名首字母进行设计,唯独喜马拉雅用了一个听,也就是该产品的核心文字,体现产品音频的特质,但是如果不是对他较为熟悉,你也很难将他和喜马拉雅练习起来。

另外除了单个中文的设计,也有很多APP采用多个文字设计,其优势是直接给用户展示的就是产品名,识别度更高,避免单个产品出现撞车的情况。比如:闲鱼、美团、尚品、头条、小时光、小红书等。

注意:由于文字多给人的视觉冲击也相对较小,因此一般设计时将文字控制在2到3个字适宜。

WechatIMG6.jpeg

当然我们设计时可不单单只设计文字,我们还可以加入一些几何元素配合使用,这样比较容易吸引眼球,比如头条,通过底部新闻报纸样式和形状文字的组合,给我们传达出他的产品特性,一看就知道是做新闻的。相较于其他图标更具识别性。

2、英文图标

英文字母图标也是设计中最为常见的一种表现形式,他往往取产品名的首字母或者核心字母,一个或者多个,这种图标设计手法简洁明了很容易被用户记忆和识别。同时英文本身就自带气场,给人传递一种高端的视觉印象。比如:饿了么、抖音、滴滴、WPS、Nice、in等。

WechatIMG7.jpeg

上图可以看出饿了么、抖音、滴滴,虽然都用了品牌拼音的首字母,但是通过对字母进行处理,同时取了一个低视觉,传递出速度感,让整个图标更具张力。第二个抖音,通过故障风格的处理,一看就知道是娱乐性的APP,也拉开了和其他图标的差异。

3、动物(吉祥物)类图标

动物天然给人亲切感,较为活泼,同时也能够让人快速识别,此外,对后续公司做物料、吉祥物、品牌形象的延伸能降低成本。因此我们看到很多大的公司都比较喜欢用这一的图标。比如:天猫、京东、苏宁、菜鸟裹裹、蚂蚁短租、美团外卖等。

注意:设计时,要用大众化的动物,如果用异形奇怪的比如(蛇、昆虫······)很难让用户记忆。

WechatIMG8.jpeg

5、功能传递图标

以功能为切入点,一般结合产品特点表达一定的含义,比如相机类APP往往有个镜头、视频类往往有个三角、金融类往往会有货币符号等,这样的图标直接和我们平时的认知一致,同样能够给用户较强的识别性,同时能够较准确的知道是什么类型的APP。比如:腾讯、优酷、12306、嘀嗒番茄钟、秒拍、鲨鱼记账等。

WechatIMG9.jpeg

功能性图标优势是可以给用户传递产品信息,同时识别性又较强,因此较为推荐这种设计方式。

设计形式主要有哪些?

类似平面设计中的表现手法点线面的构成、渐变、重复、近似、对比等,在应用图标上其实也类似,主要有:线性图标、渐变图标、正负形组合等,大家在设计时也可以借鉴平面构成的手法进行设计,下面来具体说说。

1、线性图标

线性图标设计会传递给人轻快简洁的视觉印象,通常采用比较纤细的线条作为主要元素,搭配色彩比较艳丽的背景色。从而构造出清新简洁的设计风格。这种图标比较适用于突出小清新气质的产品图标。比如:良仓、轻芒阅读、片刻、YY、爱彼迎、乐动力等。

WechatIMG10.jpeg

2、渐变图标

绚丽的色彩渐变营造出超强的视觉冲击力,能够在第一时间抓住用户的眼球。同时也是目前较为流行的设计趋势,不过对于设计的把控有一定的要求,在用色的时候色彩的对比要经过精心选择已达到最好的色彩对比效果。比如:美图秀秀、百度糯米、玩图等。

WechatIMG11.jpeg

3、正负形组合图标

正负形的设计在logo图形设计中是比较常见的表现手法,运用在图标设计中,以正形为底突出负形特征,以负形表达产品属性。利用正负形进行设计,图形设计感较强,正形与负形可以更加充分的表达产品特征与服务。比如:百度外卖、行程助手、兴趣部落等。

WechatIMG12.jpeg

相对于前两种还停留在视觉层面,正负形的图标更能传递产品的属性,因此这也是我比较推荐的设计方式,但是这样的设计需要有一些想法,目前我们看到的很多应用图标,还仍然停留在前两种的设计上,因为我们要的是快嘛。

第三,竞品图标分析

竞品分析大家都知道其重要性,这个会让我们更明确自身产品的优缺点,从而在竞品的基础上在优化自己,图标设计也是一样。

只有通过分析,我们在设计时才能够有目标性,才能进行差异化设计,下面我就以常见的电商行业和旅游行业为例。

1、电商:天猫、京东、苏宁、红人美妆海淘、蘑菇街、折800、莴笋、聚美、国美

WechatIMG13.jpeg

他们的共同特点就是为了提高产品的识别性,均采用了文字说明,其中天猫、京东采用文字+吉祥物的设计,不仅识别性高,同时品牌特性也传递了出来,相对来说苏宁的狮子就温顺了很多,活动特性的418也并没有体现出打折的热闹来。

再来看字母M的Logo,你知道他是干什么的吗,他是红人美妆一个海淘平台,可见单单一个字母设计,虽然有一定的识别性,但是其并没有传递出品牌特性,因此我们在设计时也尽量考虑到这个因素。

2、旅游:途牛、携程、马蜂窝、同程、驴妈妈、玩途

WechatIMG14.jpeg

旅游的我们可以看出,大多采用吉祥物的设计,部分采用图标的设计方式,这两个方式也不能说谁好谁不好,玩途的降落伞自然能够让我们联想到旅游,而途牛、携程、同程、驴妈妈由于其品牌形象已经深入人心,因此他直接采用吉祥物识别性依然很高。对于一些小品牌还是慎重采用吉祥物的形式,可以尝试使用天猫和京东的方式,吉祥物加文字,更具识别性。

总结

1、在设计应用图标前,需要提前了解应用图标栅格化系统;

2、在确定设计类型时,通过对应用图标表现形式的分析,我们可以判断自身产品是否有产品相关的元素、是否有吉祥物、进而排除在中文图标、英文图标、功能性图标中进行选择。

3、竞品分析其作用是可以让我们更好的了解对手,从而更好的设计自己的产品。

参考

https://mp.weixin.qq.com/s?__biz=MzIxNTQ3NTQzNg==&mid=2247484136&idx=1&sn=b999c66b03d0afc1fcd70ca2844c60c1&chksm=9796f76ba0e17e7d12b820e932960237bde7c961e5079fcfc66a3723d92e77f7c897cdba6771&mpshare=1新手福利!8类应用图标设计解析

WechatIMG15.jpeg

海盐社.jpeg

喜欢就分享
精选评论