恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
应用图标设计原则及分类
0.0°
2021-03-15 原创文章 经验/观点 举报 4345 55 16 0

详细介绍了应用图标的设计原则及分类,全文约6800字,40+张图片,文章较长,各位看官可以收藏起来慢慢观看~



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





应用图标的设计原则


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




1.识别性


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


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






2.差异性


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






3.关联性


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






4.统一性


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






5.合适的颜色


色彩与情感之间的紧密联系,使色彩变得非常主观,不同的颜色带给人不同的心理感受,比如,红色代表热情、欢乐,给人心跳加快以及马上行动的感觉,而蓝色具有责任信赖、正直诚实和效率的积极含义。贴合行业属性的色彩能呈现出令人印象深刻的品质形象。合理的色彩搭配,干净明快的色彩,可以给应用图标带来更多的关注度。但色彩的数量也不要太多太杂,只要能使图标在显示屏幕中可以与任何背景对比明显,可被用户快速识别就好。






6.多场景测试


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





应用图标分类


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






一、是否可拆分


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





二、应用图标颜色表现形式


1. 单色图标


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






2. 多色图标


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






3. 单色渐变图标


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






4. 多色渐变图标


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






5. 颜色叠加图标


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






6. 色相环运用


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






三、主体图形


1. 中文字体


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






2. 文字加图形


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






3. 文字图形化


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






4. 文字加 IP 形象


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






5. 英文字母


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






6. 英文字母加图形


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






7. 英文字母图形化设计


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






8. 数字设计


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






9. 符号设计


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






10. 几何图形


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






11. 剪影图形


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






12. 线性图形


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






13. 动物形象


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






14. 卡通形象


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






15. 功能图形提取


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






四、图标背景


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




1. 背景添加图形与图标主体图形相呼


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







2. 炫彩背景


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







五、常用的设计手法


1. 对比


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







2. 对称


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







3. 分割


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







4. 重复


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







5. 重叠


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







6. 立体化


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







7. 正负形


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







8. 拟人化


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






9. 放大局部


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






10. 移花接木


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






11. 场景化设计


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






12. 非常规构图


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








13. 拟物图标


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







小结


首先给耐心看到这里的各位小伙伴点个赞,希望以上整理的这些内容对你有所帮助。本来还想整理一些关于应用图标设计风格的分类,但是文章实在有点长了,下次吧~


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


好了,就到这里吧,如果大家觉得还不错,动动手指点个赞吧,同时欢迎大家评论区留言沟通、交流、分享,写的不正确的地方也欢迎指正。




Powered by Froala Editor

更新:2021-03-15

收藏

55人已收藏

温柔的长颈鹿

WeChat:kerh4-

  • 14

    作品

  • 285

    粉丝

  • 12

    关注

  • 设计师数据知识入门
  • 我们团队为什么换用Figma
  • 个人作品集
  • 私单项目主视觉设计

    猜你喜欢

      2021-03-15 原创文章 经验/观点 举报 4345 55 16 0

      应用图标设计原则及分类

      0.0°

      你确定要举报应用图标设计原则及分类

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年07月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      16
      55
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录