应用图标设计原则及分类经验/观点

应用图标在UI设计体系中是最重要的组成部分之一,是应用软件的主要入口,代表着一个产品的视觉形象,是一个产品内涵的最直接的传达。对于APP的点击率(CTR)来说,起着非常重要的作用,能直接引导用户下载并使用应用程序,是任何App都不可或缺的元素。如同相亲一样,第一印象往往始于外表,应用图标的美感与吸引力,决定了用户对产品的第一印象,但是图标的风格气质和目标受众是否一致,应用的属性和功能能否让用户一眼就能够感知也非常重要,一个传达清晰且有吸引力的App应用图标,可以给用户留下更好的第一印象,促使用户更加愿意去了解你。

应用图标代表着一个产品的视觉形象,是一个产品内涵的最直接的传达。那么作为App软件的门面担当,App图标应该如何设计呢?那我们先来说说应用图标设计的一些原则。

识别性是一个应用图标应该具备的最基本的特性,这里的可识别性主要从两个方面来讲:一是图标要易于理解,应用图标代表的是一个产品的属性和功能作用。优秀的应用图标应该能够让用户一眼就能够感知到这个应用的属性和功能,很好的传达出产品的定位。因为用户喜欢通过最简单的方式来获取他们想要的App。因此,简单且易于理解的的图标往往会比复杂的图标有更多的转换率。

二是图标是否简洁易辨认,因为APP在手机上显示时,图标相对较小,能否清晰辨认显得尤为重要,虽然简洁的图形设计形式可以提升图标的设计品质,但是过于缺乏细节又会显得非常单调,缺乏个性,所以在设计过程中要注意把控。另外应用图标除了在应用市场使用,还会被使用在其它很多地方,比如官网、宣传物料等。所以应用图标不要太过于复杂,要能让用户很容易识别和记忆,在不同的应用场景下都能够清晰的识别。

移动互联网经过多年发展,目前在应用市场上的应用图标数量巨大,同类图标造型十分相近、同质化。所有这些图标都在争夺用户的注意力,要想在数百万的应用图标中脱颖而出,在设计过程中,要对竞争对手进行分析,从视觉和表意的准确性上进行客观的分析,借鉴优点,同时突出产品的核心特征和属性,强调应用图标的差异性和独特性。通过差异化的设计打造应用图标的独特性,才会让应用图标在众多的应用图标中脱颖而出,让用户形成深刻的印象。

应用图标要与名称有关联性;与产品的功能属性有关联性;品牌深厚的企业进军移动互联网或进入新的领域时,与原有品牌有关联性,让品牌的积淀继续发挥作用,并且让品牌形象延续从而赋予品牌更强的生命力。通过这些关联性,让用户对产品有更好的认知,降低认知成本,可以提高用户下载意愿,提高转化。

在设计应用图标时,我们可以运用图标栅格网格作为设计参考,它可以帮助我们更好的统一应用图标的大小,帮助我们设计的图标更加统一,保证用户手机屏幕上应用图标的一致性,让手机屏幕更有秩序,营出造良好的用户体验。当然,这个也不是一成不变的,相比突出属性、功能和差异性,统一性的重要性可以不那么突出。有些图标为了更好的突出应用的属性和功能,而放弃了统一性,也有些图标为了更加有差异性,而放弃了统一性,这些在实际设计中都可以根据实际情况,进行权衡和取舍。下面第一排图标采用了统一性的设计原则,整体视觉非常统一和谐,而第二排的图标虽然为了差异性或突出属性功能,放弃了统一性,但是反而在统一的图标中更具独特性。

当图标设计完成后,我们应该通过不同的人进行测试,让他们反馈这个应用图标是否有吸引力,是否有认知困难等,通过反馈意见决定是否要对图标进行进一步的优化。同时在测试图标时,也要考虑到应用图标的展示场景,避免图标展示出现问题,在不同尺寸下适当添加或删减细节,大尺寸场景下添加一些细节,来保证图标的品质感,小尺寸场景下适当删减细节,来保证图标可以清晰的识别。

除了要注意上面的设计原则以外,启动图标的主体图形设计本身就是一个LOGO设计。所以,这里我按照自己的理解将应用图标进行了一个多维度的分类,比如主体是否可拆分,颜色分类,设计元素分类、设计手法分类等,每个维度并不是独立的,而是可以跨纬度进行组合,一个好的应用图标设计,必定是多种元素结合运用,才能呈现最完美的效果。

首先,整个启动图标可以分为:可以拆分的应用图标和整体设计的应用图标。可拆分应用图标可以先对主体图形进行设计,确定主体图形后,再与背景进行协调组合;而不可拆分的应用图标,则需要在设计之初就考虑好如何将图标作为一个完整的整体进行设计,并最终展现出来。

单色图标通常会以品牌色为主,背景有颜色,或图形有颜色,可以很好地突出品牌色,同时便于主体图形的视觉突出。虽然图标很简洁且识别性强,但是单色图标容易单调,可以运用其他设计手法使主体图形更丰富,更有细节。

多色图标通常运用了两种及以上的颜色,主色通常会大面积使用,其他颜色作为辅色用了点缀,当然,也有应用图标会有多个颜色比较均衡的情况出现。多色图标相比较单色图标而言,整体视觉层次更加丰富,更有细节。当使用应用图标使用多个颜色时,要注意整体的协调性,避免颜色过多造成的混乱。

相较于单色应用图标,添加了简单渐变的应用图标具有空间感,细节丰富,质感更好,并且应用比较广泛。在设计过程中要注意结构转换的地方、背景交接的地方对比拉开,保证图标清晰和识别。

通常有两种及以上的颜色渐变,多色渐变应用图标可以营造出更强的空间感,更加立体,颜色更加丰富,图标细节细腻。多色渐变图标要注意对比度,一是图形衔接处的对比度,另外和背景的对比度。颜色的应用上要和谐,过多的颜色如果使用不当会导致图标花哨,拉低品质感。

单色或多色均可叠加,通过更改透明度或叠加图层样式等方式制作,叠加颜色后的图标非常通透,有空间感,细节丰富,品质感强。合理选择叠加图层样式,避免叠加后出现很脏或者很亮的颜色。

主体图形大多以某个元素复制绕转形成一个环形图形,这样的图标设计构图饱满,色彩丰富,给用户传递轻松、愉快、热情的心理感受。由于图标包含颜色过多,所以一般图标背景颜色会选择白色或浅色。

国内比较常见的一种图标设计形式,通常提取应用名称的某一个字或几个字进行字体设计,通过对字体的笔画,结构等进行调整,达到差异性的设计。由于中文字体笔画较多,在使用中文字体作为应用图标时,要注意文字不能过多,过多的文字会使应用图标变得复杂,并且影响识别性,一般一行最多3个字,中文字最多不超过两行。

通过添加简单的图形,突出文字内容,让应用图标的层次感更加丰富,增加图标的形式感。添加的图形不宜太过复杂,以免喧宾夺主,盖过字体的风头。

一般为单个字体,并且字体不会特别复杂,这种设计方式适用范围较窄,需要结合实际需求去看适不适合采用这种形式,结合的好的话非常有特点,并且非常巧妙。设计时需要注意在保证图形化的同时文字的识别性也要有,如果最后看不出是什么字了,那就背离了初衷。

这种形式主要由应用名称提取的字体和IP形象组成,添加了IP形象的应用图标,在保证识别性的前提下增加了亲和力和趣味性,拉近与用户之间的距离,更有点击欲望。想设计这种形式的应用图标首先得有一个品牌IP。

国内产品通常选取产品名称拼音的某一部分进行设计,例如首字母(饿了么的e)、首字母组合(米家的mj)、拼音全称(爱奇艺的iqiyi)、拼音里面具有代表性的某一拼音(百度读书的du);国外产品通常使用单词、单词缩写、单词首字母的组合,也有些产品会使用全部名称。英文字母造型简单,像图形一样,可扩展性强,可以结合产品属性加入创意,可以达到识别性、创意性、美感兼具。在进行字母设计的时候同样需要注意识别性,内容越多,越拥挤,自然识别性效果。另外不同英文字体所占宽度不一样,设计时可以根据实际效果决定一行展示几个字母,或根实际情况选择字体样式进行设计。

通过添加简单的图形,突出英文字母,让应用图标的层次感更加丰富,增加图标的形式感。添加的图形不宜太过复杂,以免喧宾夺主,盖过英文字母的风头。

因为英文字母本身比较简洁,并且和图形很贴近,可以巧妙的将英文字母设计成图形,通过对字母进行演变或者给字母添加一些其他的元素组合成新的图形。图形化后的英文字母更加有特点,并可以结合行业属性进行设计,更加有差异性和记忆点。在做英文字母图形化设计时一定要保证其识别性。

数字的特点是便于记忆,并且识别性好,由于数字字形特别简单,所以会感觉单调,通常在使用数字作为应用图标时,会对数字进行一些设计,增加细节、丰富层次,使其图形化,这样会更有特点,增加差异性。

常用的符号分类主要有:星座符号,货币符号,和常用英文符号及一些有特殊含义的符号,因为每个符号都代表了不同的含义,所以在使用符号作为应用图标时,一定要先理解所要使用的符号代表什么含义,是否能体现出要表达的意思,并且一般符号结构较为简单,所以很少直接拿来使用,会对符号进行设计,增加细节、丰富层次,使其图形化,这样会更有特点,增加差异性。

几何图形简单、现代、表现形式也非常丰富,通过不同的设计形式可以给用户带来不同的心理感受,单个图形简约有个性,多个图形,可以营造出丰富,热闹的心理感受,通过对图形切割或划分还可以营造出空间感,运用几何图形进行图标设计运用范围特别广,可以通过多个几何图形合并、分割得出更多形式的图形。

将生活中复杂的事物简单化,去掉无关紧要的细节,通过刻画事物的主要特征来增加辨识度,这样做出来的图标非常醒目,识别性好,因为细节较少,即使缩放到很小依然可以辨认。同时,因为剪影图形细节少,所以对形体的把控非常重要,以优美的图形为基础才能够展现出剪影图形的美感。

不同的线性图形能给人不同的心理感受,直线简洁、大方,给人专业、诚信、正直等心理感受;斜线代表运动、速度,有张力,视觉上看起来很活跃;曲线格局灵活性,有流动性,时尚感、飘逸感、柔软感。设计过程中可以根据不同的产品定位选择不同的线的形式。

动物可爱、亲民接地气、好识别、是人类的好朋友。这种情感化的设计会拉近和用户之间的距离,让产品更有温度。我们识别动物比识别品牌或者公司要容易得多,而且容易记住,有助于表达企业想传达的价值观与自身的品牌含义。

具有通俗、直观,易于理解和记忆的特质。它们有的是活泼可爱,有的是沉稳内敛的,可以体现出的生命力、亲和力、可辨识性和时代表征,对产品的“性格”塑造和推广起到了很好的效果。在画卡通形象时候,我们往往很容易陷入容易画得偏低幼、低龄化;如果不是儿童类的应用一定要注意这个。

产品的功能服务提取元素图形化,功能图形的提取要求设计师对信息进行分析归纳,形成明确的目的。设计师在设计的过程中可以从生活里提取素材并图形化,这样会让用户备感亲切,降低认知成本,能很好地传达出产品的信息。图形提取过程必须控制,图形太复杂或者太简单,识别度都会降低。

图标背景除了常用的单色,渐变等比较常规的形式外,还有背景添加图形与图标主体图形相呼应的方式,颜色丰富的炫彩背景等方式,因为单色和渐变背景比较常见,所以下面主要展示一下背景与主体呼应的方式和颜色更加丰富的炫彩背景的方式。

通过添加背景图形营造氛围感,可以突出产品的气质或行业属性。要注意背景需要和文字有较强的对比,不能影响到文字的识别,当文字不能很好地识别时,可以适当给文字添加投影拉开对比。

一般通过网格渐变、晶格化、颜色拼接等方式制作,表现力丰富,视觉冲击力强。背景颜色可以多,但是不能乱,色彩要把握好度,主体图形形体和颜色不适于太过复杂,通过简和繁的对比可以更好的突出主体图形。

对比的设计手法应该是设计中最常见的设计手法之一了,常见的对比手法主要包括了:大小对比、长短对比、虚实对比、稀疏对比、方向对比、颜色对比、局部与整体对比等。通过对比,能形成强大的反差,有张力和美感,所以容易让人眼前一亮。

在设计中,对称可以给人平衡、和谐、秩序之美。自然界中对称无处不在,也许正是这种无处不在的状态让我们发现对称的美。把原本很平常的图形与元素实施了一个对称的方法之后,这个图标就有了很好的观赏性,有了很特别的视觉冲击力。

我们都知道黄金比例0.618是公认为的最具有审美意义的比例数字,最能引起人美感的比例。而图形设计中,分割也随处可见,可以是图形的分割,颜色的分割,分割可以划分层级,丰富层次,增加美感提高识别性。

重复是指相同或近似的元素不间断的连续排列的一种方式。运用重复的设计手法形成的画面会给人一种规律、整齐的节奏感和美感,有强调的作用。如果基本形过于复杂,不仅不易于组合,还容易使画面零乱。

重叠是指两个或两个以上元素之间的叠加,由此产生上下前后左右的空间关系,在保证能识别的情况下,每个元素都能发挥一定的作用。在图形设计中运用重叠表现手法可以增加关联性,减少单调,富有设计感,丰富用户的视觉感知。

立体化设计的图标脱离了平面的限制,有非常强的空间感,能够突出主体,增加了独特性和趣味性,画面更有吸引力,有丰富视觉感受。

正负形是比较常见的图形设计手法之一,通过两个或多个事物的共性进行设计,从而达到“一语双关”的效果设计。在正负形的图形当中,负形在画面中起到协调画面空间、虚实与疏密的作用。运用正负形设计的图形非常的巧妙,可以把简洁的图形传达的语义最大化,创意性十足,非常有记忆点。

将事物人格化,适度抽象、附加情感,让图形更加生动、形象。把人的表情、动作、服饰等放到其他事物上,既表现了产品的某个特点也传达了一种情感,让产品更加亲民,容易被用户接受。

将图形的局部进行放大,有很强烈的视觉冲击力,并且可以看到更多的细节,特征更加明显。

移花接木,直白一点说就是把元素的某一部分嫁接到另一个元素上。通过“移花接木”能够在完整保持物体视觉特征的同时,借助其他具有相似性或指征性的形状来对物体进行替换,从而构成非现实组合形式,达到多重表达的目的。通过图形表达产品的内涵,用户可以通过图形的观看了解到产品的特征,减少对图形的思考,了解到其中的内容。

场景化设计中经常采用的形式是截取生活中的某一个场景片段,场景化设计中的场景就好比真实的故事:什么人,什么时候,在哪里,做什么,结果怎样,有很强的代入感强,能激发用户的参与意愿。

非常规的构图形态,就是一种无定法的构图形态,打破正常的构图规律可以出奇制胜。

现在比较少用的一种形式,但是在扁平话和拟物之间的轻拟物设计风格目前还是比较流行的。

想要设计出一个优秀的应用图标光看这些远远不够,这些内容只是告诉你各种不同类型的图标都有什么样的特性,有什么样的设计手法可以达到什么目的,用来帮助大家在前期设计过程中参考。想要做好还是得平时多看、多练习、多积累。

THE END
1.人教版小学美术(1(1)交流阶段:师生共同交流所准备的物品,及所带材料可排列成哪些物体和造型。 (2)思考与讨论阶段:分组展示自己所准备的物品,引导学生思考座谈,开展积极想象,怎样利用手中的材料,分小组集体一起排列出新颖的立体造型。欣赏教师提供的名家作品及本校美术小组的装置艺术作品。 https://www.360doc.cn/article/15685499_1046691218.html
1.最新图标设计趋势与特点概述新闻摘要:最新风格的图标设计趋势与特点体现在简洁、抽象、扁平化、动态和个性化等方面。设计师们追求极简主义,以简洁的线条和形状表达图标含义,同时注重抽象表现,引发观众联想。扁平化设计成为主流,色彩鲜明、对比强烈。动态图标和...http://www.czshengmei.cn/post/11756.html
2.可爱小图标设计与应用指南在众多的图标设计工具中,Adobe Illustrator和Adobe Photoshop是业界公认的领导者。这两款软件提供了强大的功能,可以帮助设计师从创意构思到最终输出的所有步骤中高效工作。 3.1.1 Adobe Illustrator的使用技巧 Adobe Illustrator(简称AI)是一款矢量图形设计软件,它的主要优势在于矢量图形的编辑能力。 https://blog.csdn.net/weixin_36431814/article/details/144124458
3.轻松绘制Icon图标,提升新媒体视觉效果在当下这个视觉为王的新媒体时代,每一篇文章、每一个推广海报,甚至每一条社交动态,都在无声地诉说着品牌的故事。而Icon图标,作为这些视觉元素中的点睛之笔,其重要性不言而喻。回顾我多年的设计生涯,从最初的摸索到现在的游刃有余,我深刻体会到,一个简单却富有创意的Icon,不仅能瞬间抓住用户的眼球,还能有效传达...https://www.batmanit.cn/blog/k/52326.html
4.结构剖析范文11篇(全文)喷到纸上的墨水的多少可以通过改变加热元件的温度来控制,最终达到打印图象的目的。当然,以上是一种“慢镜头”式的划分。实际打印头加热喷墨的过程,是相当高速的。从加热到气泡的成长一直到消失,准备下次喷射的整个循环只耗时140200微秒。 第二节 EPSON打印机结构划分 EPSON打印机的结构可以分为:机械部分、电路控制部分...https://www.99xueshu.com/w/ikeyl6qoha10.html
5.《标志》教学设计15篇本课是为学生学习和了解标志设计而设置的。人们用形来表情达意是不言而喻的。而标志在这方面表现的尤为典型。 教学目的: 知识目标:了解标志的分类和功能以及设计的创作特点; 能力目标:培养学生的观察、想象、创造思维能力和欣赏评议能力。 教学重点和难点 https://xiaoxue.ruiwen.com/jiaoxuesheji/375515.html
6.五年级美术开学第一课教案(通用15篇)雕塑的表现形式一般分为:圆雕、浮雕。 举例:茶陵一中进校门处的雕塑(圆雕)。天安门人民英雄纪念碑基座四周的雕像(浮雕)。 分类: A、日用工艺(染织工艺、陶瓷工艺等) B、陈设工艺(象牙雕塑、装饰绘画) C、工艺美术:指实用品的造型设计和装饰性美术。 https://www.unjs.com/jiaoan/meishu/20220826100621_5515080.html
7.超薄&梦想OPPOFinder对比新双核魅族MX(全文)魅族MX而魅族MX则在续航能力方面取得了一定的领先,当然,由于采用32纳米新制程工艺,这也让新双核魅族MX的性能提升了不少。另外,两款手机的售价相当,OPPO Finder的售价为2498元,魅族MX新双核的售价为2399元。好了,下面我们就首先从外观入手,看看两款手机谁更吸引你的眼球。https://mobile.zol.com.cn/317/3171647_all.html
8.lol拉克丝终极皮肤进化公式终极皮肤全方位深度赏析英雄联盟的登录界面大致分为两种类型,一种多数的,英雄凹个造型,然后伫立在某个特定的动态背景中。另一种,就是像大元素使的一般,使用了一种使人物个性鲜明的,感情丰富的一种表达形式——面部表情。 拳头原画师Shabu Suke说过,他在他的这幅作品里,使用的是静态帧。就是不依靠利用全身像或者她标志性的光辉法杖来抓...https://www.9game.cn/news/8571303.html
9.华发地产品牌标识与品牌塑造:通过标识设计传达品牌价值观总之,在设计华发地产品牌标识时,要将企业文化作为设计的重要考虑因素,从多个方面来表现企业文化的内涵,使标识能够准确地传达企业的核心理念和文化特点。这样的标识不仅可以提高品牌的知名度,还可以增强消费者对于品牌的认同感和忠诚度。 四、考虑传播途径的标识设计 ...https://www.crtsign.com/news/wqxw7942.html
10.七年级美术教案(精选18篇)2、回到课本上的图片,具体地分析每幅作品由于材质的不同,使得美术作品效果截然不同(以学生的自行探讨为主,教师适当地加以补充)。如将《父亲》和《秋瑾》对照,同样是画人物,它们有什么不同?(可以从色彩、光线、立体感等方面相互对照) 3、教师设计一些类似智力测验式的思考题,看学生是否能够将艺术作品和材质正确地...https://www.fwsir.com/jiaoan/html/jiaoan_20230201092144_2316727.html
11.设计师应该掌握的设计细节让用户在使用产品的过程中对信息的接受比较快速,所以界面的信息呈现的清晰度是设计师必备的能力,也是基础能力,我们通过细节处的把控,让设计助力用户对界面信息的理解,也许我们下的心思用户可能不会注意,但是它确确实实起到了作用,关于提升用户的阅读效率,我们可以从以下几方面去入手:1.视觉降噪 2.视觉聚焦 3.容器...https://www.51zxw.net/TechArticleDetails.aspx?id=206
12.融合与创新:上市公司的多元品牌设计策略品牌设计需要采用创新的设计元素,来吸引消费者的注意力,传达企业的独特性和前瞻性。创新的设计元素可以体现在色彩、造型、图案、排版等方面,来为品牌注入新的活力和形象。例如,谷歌公司采用的色彩斑斓、活泼有趣的设计元素,非常符合企业的创新性和开放性,从而形成了独特的品牌形象。https://www.rhtimes.com/brand/logo-design-news7975.html
13.社会课程:“遇见公园”——“浅水湾公园”情境教育项目课程叙事...园林管理的爷爷告诉我们许多树名儿。这是香樟、这是枇杷、这是桃树……现在,我们能说出几十种花草的名字。常绿树、落叶树也能很快地区分。我们捡回许多树叶和花果,用放大镜看叶脉,再画下来,给他们分类,,做叶脉拓印,做拼贴画,也可以榨植物色素呢! 植树节那一天,我们在浅水湾湖畔栽下了一棵棵小树,为公园增添绿色...https://fzzx.rdedu.net/Item/3563.aspx
14.UI应用图形类图标有哪些分类图标是UI设计中必不可少的一部分,它可以帮助用户更好地理解和使用产品。在UI设计中,图形类图标是最常见的一种类型,包括了很多不同的图标,如箭头、心形、星星等等。在这篇文章中,我们将会探讨图形类图标的分类和应用,包括线条、实心、填充等不同的样式。我们将会分享UI应用图形类图标有哪些分类,帮助你在UI设计中正...http://m.lewlx.com/member/1921-article/4796
15.建筑设计说明范文(共12篇)1、简述下造型的基本过程 2、单击新建零件,选用公制模板 3、根据建模需要,新建两个基准面,草绘要求图形 4、首先构建前叉下部配件,单击“插入”-“扫描”命令, 以草绘图形为扫描轨迹,绘出下部的一半。 5、使用镜像命令,镜像上一步的实体,完成前叉下部的结 构制图。 6、草绘上部分图形,单击“旋转”功能图标,基本...https://www.hrrsj.com/wendang/qitafanwen/812030.html
16.美术基础知识总结从表现形式上可以分为写意画和工笔画,题材上分为花鸟画、山水画、人物画。用墨的方法大体上可以分为泼墨法、破墨法、积墨法 、焦墨法 、蕉墨法。笔法:勾 、皴 、点、染。特点: 1、以线条为造型的主要手段,达到线墨色交相辉映; 2、以画开拓诗的意境,画中有诗,托物喻情;...https://www.yjbys.com/edu/meishu/139739.html
17.「设计方法」UI工作流程指南(一)图标 设计中常用的图标,从使用的用途来说图标分为两种,功能性图标和展示性图标。 功能性图标是为了引导用户理解和操作,需要表现精确和简介,方便用户识别其含义。功能性图标常规状态下为无彩色。 展示性图标通常为页面入口,会有更多形状、颜色、质感的表达,吸引用户的注意力和点击欲望,强调差异性,比如各种品类区的图标...https://maimai.cn/article/detail?fid=1432760722&efid=WECXIWo5VTVdp8MWzUWhCA
18.问鼎电子娱乐平台下载2024-11-28 16:03:21 「百度热搜」 问鼎电子娱乐平台下载 支持:32/64bi系统类型:(官方)官方网站IOS/Android通用版/手机APP(2024APP下载)《问鼎电子娱乐平台下载》 北京时间9月8日,据记者Brett Siegel撰文透露,勇士可能会为库明加提供一份5年1.55亿美元左右的续约报价。据悉,目前库明加和他的团...http://www.m.share.vpsre.cn/HNE/detail/neTHnX.html