很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～
如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系
咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）
大家好，我是Clippp。看到好的图标我们会习惯性地截图保存，但随着收集的图标越来越多，会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题
图标是基本但重要的表达元素，在UI设计中有着不可替代的作用。
常见的分类是简单的线性分类，缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。
对图标进行分类时，普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标，样式很简单，但可以划分到多个类别中。
面对这样的问题，推荐使用系统性的结构来划分图标类别：
首先将图标按尺寸大小分为两类；
继续细分对应的面性、线性、线面结合、扁平、拟物化等类型；
最后选择标准、容器、渐变、3D、手绘、阴影等风格。
利用这种结构层级，可以明确定义图标类别。
图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷，但把它缩小到16px，这些酷炫的效果都无法呈现出来。
在对图标归类时，首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类：
大尺寸图标通常指标志性图标，例如APP启动图标或代表品牌形象；
小尺寸图标用作UI控件，起到引导功能或装饰目的。
确定图标尺寸后，进一步细分图标类型：
面性图标
线性图标
线面结合图标
扁平化图标
拟物化图标
利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中，所以在小图标分类中没有展示。
图标尺寸越小，展示的细节越有限。相比于大图标，小图标的尺寸有一定局限性，图标组成包括标准和容器两种。
大图标利用尺寸上的优势能展示更多内容，分为多种组成形式。
简单的图像可以更具包容性。图标的尺寸越小，越考验设计师传达信息的能力。
面性图标易识别，适合应用在小尺寸图标中。
关键点：
确保图标有清晰的边缘，避免羽化；
图标复杂程度随着尺寸变小而灵活调整。
彩色背景为简约设计带来了更多可能。通过这个技巧使面性图标更友好，更具吸引力。
关键点：
为背景选择4-12种颜色。
考虑图标是浅色还是深色，是否适用于所有背景色。
在彩色背景上使用白色图标比黑色效果更好。
线性图标因为简洁性和现代性而受到用户的欢迎。随着屏显越来越清晰，我们可以更加大胆地使用线性图标。
关键点：
确保轮廓像素清晰。
越简单越好。
追求更简单的细节。
设计小尺寸图标时，必须放弃细节并强调简单的形状。但当使用一种颜色效果不太理想时，可以考虑添加一些颜色。
关键点：
使用两种搭配和谐的颜色。
考虑将一种颜色用于主要形状，另一种颜色用于细节。
少即是多。
使用粗线条。
线面结合拥有更多细节，提升用户的愉悦感。
关键点：
最好使用深色而不是纯黑色描边。
限制图标的颜色种类。
避免过多细节。
扁平化图标既简单又巧妙，表达品牌形象的同时具有丰富的内涵。
关键点：
避免在<20px的尺寸中使用此图标样式。
选择2-3种颜色，可以一起使用。
一种颜色为主色，另一种颜色应为高光/细节色。
大尺寸图标在界面中使用较少，更多用于产品标识或品牌宣传。
在设计任何图标前，都可以先创建一个线性轮廓，确保形状看起来足够美观后再添加颜色。
关键点：
这类图标最容易制作。
避免出现轮廓羽化。
线条粗细要一致。
不要害怕添加细节。
添加一些渐变能让原本单一的线性图标赋予更多的个性。
关键点：
在小尺寸图标中添加渐变会降低图标的可视性。
选择渐变时，首先考虑邻近色。
线条越粗，渐变越明显。
线条细节越多，渐变越明显。
2.5D图标做起来会花费很多时间，但效果往往会很好。在设计汽车、房屋、家具等实体产品时，建议优先使用2.5D图标。
关键点：
同一组图标要使用相同的等轴测网格。
2.5D等轴图标很复杂，在较小的尺寸下会失去作用。
如果可以，让所有图标都朝向同一个方向。
随着设计趋势向简约化、扁平化发展，很多设计师丧失了手绘图标的能力。实际上手绘图标让品牌更真实甚至更有趣。
关键点：
手绘图标扫描后，再用数字方式重新绘制，这样可以保证线条粗细一致。
尽量让所有的线条保持相同的颜色，这会使文件更小。
标准的线性图标看起来可能会很单调，而简单灵活的断线处理能为图标增加更多个性。
关键点：
断线粗细应该相同。
图标的中断次数尽可能保持一致。
关键点：
确保两种颜色具有相同的对比度，否则可能会导致用户看不清其中一种颜色，因此无法识别完整的图标。
例如左下角的浅绿色对于视力弱的用户来说就很不友好。
线面结合图标可以看作是添加颜色后的线性图标。线面结合具有很强的轮廓，让图标能够清晰可见。
关键点：
使用有限的颜色和统一的线条风格，使图标具有品牌性。
使用线条和点来添加更多细节。
避免使用纯黑色描边。
关键点：
描边断开时，图标效果很更好。
避免在小尺寸时使用。
使用有限的调色板。
考虑使用较浅的描边/背景色。
考虑在图标下方添加一条水平线，使图形具有相同的位置(中间的图标示例)
当填充色与描边错位时，颜色移到右边图标左上角留出高光，带来一种清新的感觉。
关键点：
考虑使用断线描边。
使用有限的调色板。
确保描边和填充色简单且一致。
这种风格的图标的特点在于并不依赖于颜色，仅将其用于装饰。
关键点：
选择有限的调色板。
先关注轮廓再关注颜色，颜色仅用于装饰。
避免形状色和背景色过于相似，降低可见度。
关键点：
避免使用暖色调尤其是红色，会让用户感到压抑。
首先确定合适的描边颜色，再考虑填充色。
扁平化图标通常没有描边，主要使用形状和颜色来完成组合搭配。简洁、友好和适当的细节，让这类图标非常具有吸引力。
关键点：
使用柔和的调色板，避免明亮的颜色。
分清简化和添加细节之间的界限。
尝试让图形打破容器，带来动态的感觉。
关键点：
尝试让图形从容器中凸出来，以增加深度。
因为在容器中，可以添加更多的细节而不用担心图形变得混乱。
尝试使用正方形、椭圆形或与品牌相关的容器形状。
关键点：
保持所有图标朝向同一方向。
选择恰当的调色板能让图标看起来更一致。
避免小尺寸使用。
半阴影图标是在扁平图标的基础上添加半色调阴影，得到更具个性的图标。
关键点：
小尺寸图标不起作用。
使用有限的调色板。
确保所有的图标色调相似。
当图标位于容器中时，可以考虑添加长阴影，主要包括纯色阴影和渐变阴影两种类型。
关键点：
使容器具有相同的颜色或类似的色调。
只在大尺寸图标中使用。
将半阴影与长阴影组合使用效果更好。
拟物化图标实际上已经包含了大部分的样式，例如它们是立体的，有丰富的渐变和阴影。
这种风格的图标看起来与现实生活中的图标尽可能类似，让用户感到更舒适。
关键点：
考虑添加底部阴影。
使光源来自同一方向。
确保图标都朝向相同的方向。
目前绝大多数界面不在有这种风格的图标，可以考虑使用3D建模来实现这种效果。
希望大家能对图标的分类及设计有更全面深入的认识，从而构建一套完整的图标思维体系。
-END-
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》 如对文章、图片、字体等版权有疑问，请点击 反馈举报
Powered by QINGMOB PTE. LTD. © 2010-2022 上海青墨信息科技有限公司 沪ICP备2021034055号-6
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)