应用图标篇 | 全面解析,助力设计出更优质的应用图标!

来源:大漠飞鹰CYSJ / 2022-09-24 / 740 / 10 / 0
2022年小目标,输出文章第24篇,已完成10篇。

前言

如果一个人的脸、衣着是陌生人的第一印象,那么APP应用图标的风格和气质是留给新用户的第一印象,关系到用户是否对这一点有关APP感兴趣,是否会打开应用程序介绍,是否会点击下载按钮起着决定性的作用。一个好的应用程序图标有无限的可能性,实际上对用户有很强的吸引力,并有理解的冲动,图形本身可以充分发挥想象力,这就是为什么无论哪个应用程序市场首先看到的是应用程序图标,而不是应用程序名称。
在一部手机可以解决很多问题的互联网时代,相信每个人都下载了几十上百个问题APP,有各种各样的列表,应用程序图标能否在第一时间吸引用户的注意力(目标明确或铁粉除外)非常重要。一个视觉传达清晰、吸引人的图标可以提高用户的点击率。即使用户只使用一次,印象也会更深刻。
本文根据作者对大量应用图标的分析和设计标准的总结,希望帮助您避免设计过程中的一些常见问题。欢迎一起讨论,互相学习,共同进步。

分享目录

一、四大设计原则
二、色彩的表现形式
三、主图形分类
四、背景图案和元素
五、主体图形的表现手法
六、应用图标设计流程
七、总结

一、四大设计原则

应用图标代表产品的外部形象。设计的精致程度决定了用户的第一印象。开放的欲望与当前图标的视觉传达的内涵有最直接的关系。虽然应用程序图标与设计不同LOGO,表达方式也在变化,但必须遵守自己的设计准则,利用设计手段最大限度地发挥视觉传播的价值。

1.可识别性

首先,应用程序图标需要尽可能简单。过于复杂的图标会增加用户的理解成本,甚至误导用户,但如果过于追求简单,缺乏细节、个性化和必要的隐喻信息,也会过于单调,导致。简单并不简单,设计师需要通过专业知识合理简化,提高应用图标的设计质量,方便用户在不同场景中清晰识别。
其次,要清晰易懂。应用图标代表产品的行业属性、功能或独特优势,让用户一眼就能识别出所代表的含义,贴近用户的心理预期。
简单易识别是应用图标的基本属性之一,这就是为什么大多数产品都会使用logo作为应用图标主视觉的原因,因为logo设计考虑了各个方面和后续延伸,即使有些问题logo更为复杂,通过提取局部元素、吉祥物、主色等方式加强应用图标属性,为用户形成独特的记忆,提高应用程序的下载量和利用率。

2.关联性

应用图标应与产品属性和品牌有很强的相关性。通过品牌延伸赋予产品更强的活力,让用户从第一眼接触应用图标到后续使用,整个过程始终保持清晰统一的品牌认知,通过和谐统一的视觉效果带来更好的用户体验。应用图标必须与品牌高度一致,重点体现在以下几点:


1)LOGO
毫无疑问,用品牌logo作为主图是最佳选择,结合品牌色彩搭配,可以达到产品核心理念、品牌形象的传播效果,在主图中APP在应用市场上,你会发现大多数产品都在使用logo主视觉图形作为应用图标。

2)品牌色
品牌色即主色,将贯穿主色APP所有页面的元素组件。众所周知,每种颜色都有其特定的含义,可以传达给用户不同的心理感受。以主色为应用图标的背景色,可以衬托出产品的情感氛围,呼应进入应用后的主色,以最小的视觉跳跃关系前后,增强用户对产品的记忆感知。

3)IP/吉祥物
吉祥物属于品牌logo部分延伸, 也是产品的灵魂logo由于移动设备应用图标位置空间有限,logo细节不能在短时间内被用户捕捉,不适合展示,使用时,IP替代吉祥物或其局部元素也是不错的选择。


4)产品名称
如果说logo是产品的面孔,通过暗示和隐喻给用户无限的遐想,让用户记住它的外观,然后名称的出现相当于产品主动介绍自己,让用户知道如何称呼它。
仔细使用产品名称作为应用图标:首先,文本传达的信息量有限:其次,用户对图形的理解效率优于文本;此外,应用图标将显示相应的产品名称(应用市场在右边,桌面在下面),有些信息重复。因此,我们看到的应用图标主体只有两种情况:产品名称。一是产品本身将名称设计成字体logo,比如美团、懒饭;二是以产品名称为产品名称;logo辅助信息提示,如丰富多彩的生活。

以上是应用图标与品牌属性关联最常见的四种方式。它们可以在设计中灵活搭配。两种以上的组合可以最大限度地发挥品牌传播的方式。

3.差异化

当我上小学的时候,我曾经在一次彩铅画作业中得到了老师的真诚赞扬,但我的心却受到了打击。老师对我画的桃子说:这个西红柿太像了。。举这个例子似乎不合适,但结果惊人地相似。作者想陈述的一个观点是,不要让你的设计成为别人的婚纱,让用户误以为这是其他企业的XXX..”产品。
目前,应用市场APP数量巨大,仍处于增长趋势,同行业图标设计同质化相当严重。为了使自己的产品应用图标脱颖而出,有必要在设计前做好竞争产品分析,借鉴竞争产品的优势,在突出自身产品核心特征和属性的基础上,突出其差异,给用户留下独特印象,避免同质化。

4.可用性

应用图标在设计完成后(测试组)和在线后(用户反馈)进行可用性测试,主要是为了进一步优化图标对用户的吸引力和识别,以确保用户能够清晰地识别和提高图标在不同场景中的印象。虽然可用性测试已经设计好了,但这个链接非常重要,它决定了产品的下载量和利用率。

二、图标颜色的表现形式

1.单色图标

单色图标通常以品牌色为背景色,logo以反白的形式呈现,不仅可以突出品牌色彩,还可以用来衬托主体图形,但这种方式只适合色值单一的logo,多色值可能与背景色融合或色彩对比过大,影响视觉传达效果。此外,如果是这样的话。logo视觉重量大,也可以使用白色背景 原品牌色logo,这样会更直观。
虽然单色应用图标颜色相对单一,表达形式有限,但视觉清晰、简单、识别强,如果能使用其他设计技术丰富图标细节就更好了。

2.多色图标

多色图标采用两种以上的颜色,更多的是直接使原来的多色logo图形 白色背景,无需任何加工,控制尺寸规范。如果是春节、618、双11等运营推广活动所需要的,应用图标会有其他颜色、装饰元素或标签等,颜色会更多,但一般有及时性,活动过期即恢复图标。
多色图标的细节和层次更加丰富,确保设计中各种颜色的搭配和协调。一旦颜色过多造成视觉混乱,收益大于损失。

3.渐变图标

无论是单色还是多色,添加渐变都会使应用图标更加精致和耐用。渐变表达技术应用广泛,简单的渐变可以丰富图标细节,但也有空间感和微三维感。
设计渐变色图标时,要注意图形连接处的对比度。花哨的渐变色会降低质感,保证色彩的和谐,使图标视觉清晰,易于识别。

4.颜色叠加

单色、多色或渐变可以通过调整不透明度和图层叠加来丰富图标细节的应用。与纯渐变相比,立体感和空间感更强。
使用色彩叠加时要注意色彩对比和明暗关系,否则会衍生出脏乱的色彩。

5.色环的应用

环形构图主要由多个元素复制,从统一的中心点和旋转角度衍生出一个主图形。该应用图标的设计构图饱满,色彩丰富,能给用户带来轻松愉快的视觉体验。
需要注意的是,由于颜色较多,至少有三种颜色或三种以上,否则不能构成色环的主图形(幻觉)。如果没有超强的配色技巧,最好按照色环的顺序依次取色。即使没有太大的优势,至少也不会出错。

三、主体图形的分类

一个好的应用图标应该是多元素、多信息的结合,以达到更好的效果。虽然大多数主图形都使用了logo,但不影响设计师拆解,提取局部元素、颜色、名称等信息进行二次创作,原则上是在线logo的设计。
应用图标种类繁多,千万不要盲目跟风。经过仔细的分析和研究,最重要的是找到最适合自己产品的,每种类型都不是独立的,在条件允许的情况下可以跨类型灵活搭配组合。

1.中文字体

1)单中文字体
仅次于图形logo表达方式通常从产品名称中提取代表性文本,重新设计笔画和结构。基于中国文化的优势和对汉字的敏感性,不仅可以降低用户对应用图标的认知成本,还可以根据产品特点设计差异化的视觉效果。
但由于文字和笔画的原因,很难提取单个文字,以避免信息传输错误或影响识别。建议选择笔画少、特色/代表性强的文字。如果不符合条件,最好选择其他表达方式。


2)多中文字体
使用两个或两个以上的汉字,大多直接在图片中使用产品名称,使用户更容易记住,有利于品牌推广。与单字体相比,设计感觉会有一定的局限性,不应该做太夸张的表达方式,因为文设计必须注意文本的协调和可读性。
多字图标建议将字数控制在2~6范围内,一行显示在3字以内,即两行显示,最多不超过两行,否则会影响图标的识别效果。


3)中文、图形组合
适当添加具有产品特点的辅助图形,以引导或方向强调文本,图标细节将更加详细

声明:本站所有文章,如无特殊说明或者标注,均为本站原创发布。任何个人或组织,在未征得本站同意,禁止复制、盗用、采集、发布内容到任何网站、书籍等各类媒体平台,如若本站内容侵犯了原著作的合法权益,可以联系我们进行处理。本文链接http://www.xue-ui.com/article/63