把图标变成圆形的html_图标种类太多，不知道怎么使用？这篇文章带你全面认识与使用图标...

来源:ui.cn 作者&＃xff1a;Destiny元

术心 / 整理编辑

文章大纲&＃xff1a;

一、存在意义二、多维度分类

I.按功能分类

II.按表现形式分类

III.按设计风格分类

三、图标绘制四、运用场景与选择图标五、写给设计师 一、存在意义  

UI设计中&＃xff0c;icon是重要组成部分&＃xff0c;相对于使用文字&＃xff0c;icon表达会让效果更清晰&＃xff0c;

对于信息传播和视觉效果表达都有重要意义。

图片对比

1.纯文字与图标使用对比&＃xff0c;图标从视觉上更简洁易识别&＃xff0c;阅读性更强 

2.纯文字与文字&＃43;图标&＃xff0c;这里举两个例子

金刚区去掉图标后&＃xff0c;页面缺少icon点缀&＃xff0c;显得很枯燥&＃xff0c;目前的UI视觉设计中&＃xff0c;也是设计手法是不允许的。

选用的是百词斩个人中心&＃xff0c;即使原页面icon存在感也是选用的视觉感偏弱的线性图标&＃xff0c;在去掉后&＃xff0c;页面层次感和阅读性就降低很多&＃xff0c;可以尝试仅仅从icon找某个功能&＃xff0c;一定会比仅文字快&＃xff0c;时间成本会相对降低&＃xff0c;也说明了设计icon时&＃xff0c;尤其是说明性和交互性图标&＃xff0c;准确度要高。

如果原设计是面性图标对比感受会更明显。

 二.多纬度分类  

图标应用广泛&＃xff0c;单一从风格分类是无法做到全面了解的&＃xff0c;广度和深度也达不到全面认识&＃xff0c;概念也不清晰。针对这一问题&＃xff0c;我以广度为横轴&＃xff0c;将它分为功能&＃xff0c;表现形式和设计风格三大类&＃xff0c;逐个纵向挖深。

功能分类

按功能分类&＃xff1a;交互性图标&＃xff0c;装饰性图标和说明性图标。

1.交互性图标

具有双向信息传递能力&＃xff0c;不仅可以向用户传递某种信息&＃xff0c;引导帮助用户执行特定操作&＃xff0c;同时也允许用户向程序传递控制信息&＃xff0c;从功能重要程度来讲&＃xff0c;它的重要性是最高的。比如&＃xff1a;登陆注册按钮&＃xff0c;开关按钮&＃xff0c;数量按钮&＃xff0c;点赞&＃xff0c;转发分享等都属于交互性图标。

2.装饰性图标

主要为了提高页面设计性&＃xff0c;加深个性化设计风格&＃xff0c;与此同时&＃xff0c;提升用户线上体验感&＃xff0c;迎合受众群的偏好&＃xff0c;提升设计亲和度。常见的比如&＃xff1a;符合节日需求时&＃xff0c;线上活动呼应&＃xff0c;图标个性化。比如&＃xff1a;页面升级&＃xff0c;空页面&＃xff0c;奖励&＃xff0c;用户等级等都属于装饰性图标。

3.说明性图标

阐明信息图标类型&＃xff0c;区分不同功能或内容的视觉标记&＃xff1b;简单的说&＃xff0c;就是对功能的解释说明。常见的比如&＃xff1a;表现行业特性时&＃xff0c;金刚区或个别功能区icon设计&＃xff1b;面向不同用户群体时&＃xff0c;选择风格设计&＃xff0c;早教类APP与健康类APP对比就很明显。

首页图标也都属于&＃xff0c;以美团为例子&＃xff0c;它结合了线性图标&＃xff0c;渐变面形图标&＃xff0c;将金刚区分为三部分&＃xff0c;增强页面的层次感和识别度。

表现形式分类

按表现形式分类&＃xff1a;象形图标&＃xff0c;隐喻图标&＃xff0c;工具图标和混合图标

1.象形图标

起初&＃xff0c;设计师为了保证高识别度&＃xff0c;降低学习引导成本&＃xff0c;写实性icon对生活的映射更贴切&＃xff0c;用户也会将其与实物相联系。ios相当长一段时间流行 “Skeumorphic设计理念”&＃xff0c;它就属于超写实设计。并且认为只要有可能&＃xff0c;在应用上增加现实的、物理的纬度&＃xff0c;与现实越相像&＃xff0c;操作越相同&＃xff0c;就越容易使用户理解运作模式&＃xff0c;接受度就越高。

2.隐喻图标

两种不相关但却有着某种相似特质的事物用icon的方式链接起来&＃xff0c;达到记忆和使用目的。比如&＃xff1a;设置与工具&＃xff0c;云端与云&＃xff0c;购物与袋子&＃xff0c;会员与钻石或皇冠等等。

3.工具图标

主要以行业类别为分类&＃xff0c;使用范围广泛&＃xff0c;大众或行内人士识别度高&＃xff0c;且被长期使用。比如&＃xff1a;建筑行业&＃xff0c;医疗行业&＃xff0c;化工行业等等。

4.混合图标

也就是前三种的结合&＃xff0c;目的在于达到不同的视觉效果和应用结构。前段时间追波很流行的MBE粗描边风格icon就是综合图标的产物&＃xff0c;多表达设计师个人设计风格或适用某类设计感较强的软件。

设计风格分类

按设计风格分类&＃xff1a;面性图标&＃xff0c;线性图标&＃xff0c;扁平图标&＃xff0c;拟物图标&＃xff0c;2.5D图标和桌面应用图标

1.面性图标

使用范围最广&＃xff0c;稳定性强&＃xff0c;区分页面层次感更高。设计UI页面时&＃xff0c;使用也要从页面层级关系和产品功能角度考虑具体运用。面性图标的分类也有很多&＃xff0c;不仅仅只有常规的&＃xff0c;还有多色&＃xff0c;渐变&＃xff0c;不透明叠加&＃xff0c;插画&＃xff0c;扁平投影等等。

2.线性图标

使用感更轻盈&＃xff0c;精致度更高&＃xff0c;简约风格页面使用最多&＃xff0c;也是当下流行的风格之一。除了常见的纯色线状图标之外&＃xff0c;还分双色或多色&＃xff0c;多种粗细结合&＃xff0c;缺口型&＃xff0c;渐变&＃xff0c;描边不透明叠加等等。

3.扁平图标 

其实就是线&＃43;面&＃xff0c;面&＃43;面。变现方式多样&＃xff0c;拓展性强&＃xff0c;更个性化&＃xff0c;年轻化一些&＃xff0c;相同&＃xff0c;同样设计风格的icon&＃xff0c;在更换颜色后就能体现和传达不一样的信息。

4.拟物图标&＃xff0c;2.5D图标和桌面应用图标

 三、图标绘制  

需要有一个从简单到复杂的是凡事要经历的过程。在布尔运算支撑下&＃xff0c;绘制也分为三个主要原则&＃xff1a;风格一致&＃xff0c;大小一致&＃xff0c;透视一致。紧扣三原则绘制&＃xff0c;特殊情况判断后处理&＃xff0c;就是一个规范化图标。

画图标-绘制三步法&＃xff1a;以信息为例子

1.图标大小&＃xff0c;运用辅助线帮助绘制&＃xff0c;对齐像素格&＃xff0c;保证导出图标边缘清晰

2.长度&＃xff0c;粗细&＃xff0c;圆角&＃xff0c;颜色统一&＃xff0c;调整好即可

3.布尔运算

图标绘制的特殊处理&＃xff1a;

1.同一大小的图标&＃xff0c;因为形状不同&＃xff0c;视觉效果会不同&＃xff0c;如下图&＃xff0c;同样都是100px·100px的圆形和正方形&＃xff0c;但从视觉上却上完全不同的&＃xff0c;这时需要&＃xff0c;抛去参考线束缚&＃xff0c;使图标视觉上大小统一&＃xff0c;根据图标删格系统绘制。

2.图形叠加中心对齐时&＃xff0c;视觉效果出现偏移&＃xff0c;应该以视觉效果为主&＃xff0c;强制对齐&＃xff0c;反而会使页面效果重心偏移。  

 四、运用场景与选择图标  

运用场景的选择一定是在设计风格确定后&＃xff0c;进行选择使用的&＃xff0c;不能把icon运用场景和设计风格下的图标概念混淆(你细品)。使用图标的前提一定是风格类型一致&＃xff0c;判断风格一致的方法就是看图标设计风格分类和绘制原则。

主要运用的场景分为5种&＃xff1a;顶部导航栏&＃xff0c;底部标签栏&＃xff0c;金刚区&＃xff0c;交互区&＃xff0c;分类列表

1.顶部导航栏

UI页面顶部主要以轻便为主&＃xff0c;不易过重&＃xff0c;图标使用也以简单简洁为主&＃xff0c;不能太抢眼&＃xff0c;起到便捷引导作用&＃xff0c;准确表达&＃xff0c;一般使用单图标&＃xff0c;不结合文字。

2.底部标签栏

位于主页页面底部&＃xff0c;利于用户页面切换&＃xff0c;图标数量一般控制在3&＃xff5e;5个为宜&＃xff0c;采用图标结合文字的方式体现产品功能。

3.金刚区

之所以称之为金刚区&＃xff0c;是因为它一般位于主页中部位置&＃xff0c;在banner或搜索栏之下&＃xff0c;是产品主要功能区的核心集中位置&＃xff0c;为子板块做引流&＃xff0c;用户流量40%&＃xff5e;58%都是来自于金刚区&＃xff0c;它占用首屏位置大概在22%&＃xff5e;25%之间&＃xff0c;采用图标结合文字的方式体现产品功能。

4.分类列表

一般都是瀑布流排列&＃xff0c;宫格排列&＃xff0c;色块排列&＃xff0c;统一页面风格&＃xff0c;准确表达&＃xff0c;利用用户定位功能模块。

5.交互功能区

这就是交互性图标使用最多的地方&＃xff0c;收藏&＃xff0c;点赞&＃xff0c;刷新&＃xff0c;搜索等等。

 五、写给设计师  

1.图标的使用同样需要前期思考&＃xff1a;分析用户&＃xff0c;功能信息&＃xff0c;竞品分析和行业经验。(和个人中心设计原则是一样的思维模式)

2. 图标设计需要在遵循原则的情况下进行个性化创作&＃xff0c;与辨识度和适用性相结合&＃xff0c;不断提升用户使用体验感和信息感知速度&＃xff0c;准确传达信息。

3.多分析思考&＃xff0c;积累知识&＃xff0c;提高自己对运用的敏感性&＃xff0c;一起加油吧&＃xff5e;

给个鼓励,点个赞吧&＃xff5e;

原文地址&＃xff1a;https://www.ui.cn/detail/556315.html

//术心//是一个专业做设计分享的公号&＃xff0c;每天晚上10:00-10:30&＃xff0c;给各位分享设计经验、解决设计问题、了解设计资讯、分享设计教程&＃xff0c;为你捋直设计之路

————推荐阅读下面是一些精选的内容&＃xff0c;大家可以好好看看&＃xff0c;有移动端界面设计尺寸规范&＃xff0c;还有大厂一线设计师的设计经验分享&＃xff0c;还有一线运营人员分享的5个月30万粉丝的公众号运营经验&＃xff0c;你想要的都在这里&＃xff0c;快来看喽&＃xff01;&＃xff01;&＃xff01;微信订阅号“术心”订阅号成立三年有余&＃xff0c;在这三年时间中&＃xff0c;承蒙十万余名粉丝的厚爱&＃xff0c;让我有动力坚持每天分享设计干货&＃xff0c;相信未来我们会越来越好&＃xff0c;我们的群体会越来越壮大&＃xff0c;去帮助更多的设计师朋友&＃xff0c;加油&＃xff01;你点的每一次「在看」&＃xff0c;//就是对我最大的支持//