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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
图标设计,你需要了解这些...
0.0°
2021-04-12 原创文章 经验/观点 举报 33342 1068 538 15

哈喽,大家好呀,我是幺零三,我又来了。最近总结了一些关于图标设计的思考,希望对大家日常工作有所帮助。


2021年幺零三的第 2 篇原创(图标设计技巧)

________________________________________


本文目录

  • 图标设计风格汇总

  • 图标设计流程

  • 案例展示

  • 图标资源输出



01 常见图标风格汇总

  • 线性

  • 面型

  • 线面



1、线性

  • 单色

  • 双色

  • 渐变

  • 不透明度

  • 一笔成形

  • 断点


1.1单色

单色线性拥有简洁、清晰的特性,在视觉层级上较低,适用于基础功能图标。b端较为常见,移动端常见在设置页面或导航栏通知、分享等图标设计上。


1.2双色

双色线性在单色的基础上丰富配色,解决了单色线性原本过于单调的问题,在提升趣味性的同时,也将视觉层级进行了提高,同样适用于基础功能图标。在使用过程中需要注意的是丰富的配色会偏向年轻化,需要考虑是否符合产品风格及主流目标用户审美。


1.3渐变

线性渐变还可以在用色上进行区分,简洁的用色可以给人带来科技、炫酷感,在车载ui中较常见。丰富的渐变配色则更适合运营入口设计,有着年轻化、热烈的氛围。


1.4不透明度

线性双色可以和不透明度风格进行很好的比较,前者视觉更跳跃,个性更鲜明。而后者在使用时普适性更强,即丰富配色细节,又避免视觉过于跳跃(可以把它理解为同类色配色)。所以在大多数使用场景下,不透明度风格都是一个很好选择。


1.5断点

断点风格有线性单色&双色该有的个性,并且在线性双色基础上继续提升趣味性,使用需要注意产品目标人群年龄段。



1.6一笔成型

该风格设计感和个性都极强,很考验设计师对造型绘制的把控,功底不够就很容易导致设计后出现识别问题。所以设计难度较大,且延展性较弱,难以表达复杂语义,使用需谨慎。



2、面性

  • 单色

  • 双色

  • 不透明度

  • 晶白

  • 磨砂玻璃

  • 等轴侧(2.5d)

  • 渐变

  • 新拟态

  • 轻质感

  • 明暗质感

  • 写实

  • 抽象

  • 卡通插画

  • 像素风格


面性与线性的区别在于前置视觉面积更大,整体视觉层级比线性高。下面部分和线性风格重叠的内容就不赘述。



2.1单色



2.2双色



2.3不透明度

面型不透明度风格,通过调节前后不透明度可以带来较强的空间感,使用场景较广泛。



2.4晶白

晶白严格来说也算质感图标(白色质感)的一种,常见于品类图标设计,通过透明度、投影、渐变等参数调节,使整体立体感和空间感都很强。



2.5磨砂玻璃

又叫毛玻璃风格,是通过背景模糊,或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受,但由于容易与浅色背景相融,造成对比度不足难以识别的问题,所以在使用中需要注意无障设计。



2.6等轴侧

也叫2.5d,有很强的趣味性,及识别度,适合重要入口或运营设计。但这类风格较为卡通,且表现花哨。使用需要注意应用场景及目标人群年龄段,避免干扰信息阅读和不符和产品风格。



2.7渐变

这类风格可以很好的吸引用户注意力,在电商、美食类产品中较常见,主要注意配色干净协调。



2.8新拟态(Neumorphism)

新拟态图标色彩相对单一,与背景融合度较高,通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大,再有这类风格与背景对比较弱,无障设计问题较大。



2.9轻质感

通过大量渐变、投影来表现立体感,整体风格偏年轻化,常见在教育类产品中,使用注意配色干净和谐。



2.10明暗质感

通过调节同一色相不同明度、饱和度来营造前后空间感,整体风格统一。


2.11写实

这类图标特点很明显,有极高的识别度,目前美团外卖品类区入口就是该风格,整体偏年轻化。主要考验设计师造型绘制、技法表现能力。


2.12抽象

通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术(装饰)价值更大,不追求识别度,美观即可。



2.13卡通插画

这类风格既可以做图标又可以做空状态插图,设计美观有特色即可。



2.14像素风格

这类移动端界面较少见,目前只在一个海外电商产品(Jollychic)中看过,还有就是一些像素游戏中,比如「泰拉瑞亚」、「我的世界」。



3、线面

  • 线面

  • 描边插画



3.1线面

和线性双色图标类似,趣味性较强,具备个性化特点,可以做Tab选中状态。



3.2描边插画

类似卡通插画,在卡通插画基础上加入描边。同样颜色,在一些特定的前后交接处利用线条做区分,算是多一种设计表现形式,同样美观有特色即可。




4性格

  • 粗线

  • 细线

  • 圆角

  • 直角



4.1粗线

力量感、稳重、男性等感受



4.2细线

品质感、精致、女性化



4.3圆角

安全、亲和、年轻



4.4直角

严谨、正式、果断利落

由于图标风格繁多,所以以上列举并不包含所有图标风格。



02 图标设计流程

  • 明确语义

  • 关键词详解发散

  • 确定风格

  • 提取造型

  • 创意输出



1、明确语义

图标存在的目的是起引导作用,在丰富页面视觉的同时,帮助用户更快的获取信息(当然图标的使用意义还有很多)。设计师在将文字翻译成图标前,必须先理解其文字含义。因为最终呈现的图标,需要用户一眼能准确反翻译其中含义(艺术抽象、装饰类图标除外)。

在C端设计中,以Tab为例,一些常见文案:首页、分类、发现、我的,这类语义还算比较清晰的。但在B端设计或工具类APP中就会遇到一些复杂语义。以我的工作来说,目前在做一款网站搭建工具,后台常会需要设计组件及对应的图标,比如:滑动商品、多图列表、上拉图文列表这些语义比较复杂的图标,在一定程度上会比较难精准传达文案。



2、关键词详解发散

这一步有点类似情绪版使用,但不同的是:我们需要将确定的词(A)进行详细解释,再将解释文案中关键的词语进行发散,得出一系列相关联的词(A1、A2、A3…)。有时间还可以根据这些词找到对应的图片,再看在这些相关联的图片中,有哪些细节可以传递最开始我们确定的那个词(A)的意思。


3、确定风格

我们可以借助情绪版,根据产品定位和目标用户描述,再结合应用场景,在目前已有的风格中找到符合产品气质,符合当前模块视觉层级的图标风格。

前面我们已经了解了目前常见的图标风格有三大类:线性、面型、线面,其中还有很多细分,比如在线性中又分粗线(沉稳、力量)、细线(品质)、曲线(女性化),还有圆角、直角,每种类型所传递的感受都不同。在创意前期,我们将每个点合理进行随机组合(如下图)即可创造一种更新颖的风格。




4、提取造型

经过关键词详解发散,其实我们已经获得了很细节点,接下来将这些细节点进行合理融合后,就可以得到代表同一语义但形式各异的基础图标样式(此时还只是想法阶段,可以通过手绘方式记录组合形式,不用特别精细化)。




5、创意输出

在设计执行前我们需要先了解两个大知识点:

  • 图标设计规范

  • 图标设计注意点


5.1图标设计规范

  • 常见图标尺寸

  • 图标盒子使用


5.1.1、常见图标尺寸

在界面图标设计中最常用尺寸:12x12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)



5.1.2、图标盒子使用

什么是图标盒子?其作用是什么?

图标盒子即图标约束网格,来源于Material design。使用图标盒子有利于使我们创造的系列图标保持规范与统一。




5.2图标设计注意事项

  • 简洁美观

  • 易于识别

  • 细节统一

  • 像素对齐

  • 视觉大小一致

  • 饱满透气

  • 融入品牌基因



1、简洁美观

图标是否美观,会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。在UI界面功能图标设计中,通常会尽量减少不必要的细节,降低图标复杂度,来帮助用户快速识别。当然图标也有丰富细节的做法,常见在一些重要运营入口上。


2、易于识别

识别度的问题,在最前面明确语义中就有提到过,这里就不赘述。



3、细节统一

在细节中包含:表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等(不同风格图标的细节不同,这里只是列举部分),上述细节在系列图标中都应保持一致。



4、像素对齐

在图标绘制中,需尽量避免坐标位置xy或宽高参数出现小数点,以此保证最终导出的图标是清晰的。



5、视觉大小一致

由于不同图标外轮廓不同,就会导致哪怕在物理大小上相同的图标(假设都是24x24),但视觉上可能还是会给人大小不一致的感受,因此我们需要借助前面提到的图标盒子进行约束调整。


6、饱满透气

图标的饱满透气,不一定需要加入很多笔画(描边、装饰等)细节。而是尽可能在形成风格的同时,简化能影响识别度的关键笔画,通过调节笔画大小、长短、位置使图标达到一个最平衡状态。


以如下途牛_我的页面_功能区图标为例:

图中标红图标就存在饱满度不足,及内部较拥挤的情况,第一感受是看起来不舒适,品质感比较低。除此外,还存在如下问题:

  • 图标大小很明显不一致

  • 设计语言不统一,有圆角有直角

  • 图标风格不一致,有透明度+分割形式(我的保单)、有纯透明度形式(专属顾问、我的收藏)、还有其余单色实心形式



7、融入品牌基因

在图标中融入品牌基因可以有效的提升产品品牌感,作为高阶设计师必备技能之一,常见提取维度:

  • 颜色

  • 设计语言

  • Logo轮廓


以我之前的豆果美食项目为例,提取到如下细节:

颜色:提取黄色、绿色两类颜色

曲率(设计语言):品牌Logo走线顺滑、自然、圆润,个性鲜明

分离(设计语言):黄色区域与绿色区域虽不相交,但存在联系。(分离间留白)

根据提取到的基因,最终得到如下两套风格不同,但语言相同且都具备品牌感的图标。

Logo轮廓:在图标中融入品牌logo外轮廓(Google Play),或根据logo轮廓结合应用特性进行延展(Microsoft)。


03案例展示

就以途牛为例,对我的页面功能图标进行优化。


1、明确语义

根据文案进行详细翻译,帮助我们充分理解文案。



2、关键词详解发散

以「专属顾问」为例:

释义:有专门的知识或经验,受聘为机关团体或单独个人提供专门咨询的人。

提取释义中关键信息,生成关键词:专业、专人,再根据关键形容词发散一系列具象名词。



3、确定风格

根据产品调性和模块视觉层级以及考虑延展性,初步确定如下风格组合起来是比较适合:

线性:双色、不透明度、断点

面性:单色、双色、不透明度、轻质感、明暗质感

线面:线面

在实际查看中,发现Tab的风格为单色+不透明度+断点风格。

为了和Tab拉开差异,最终确定以如下风格进行组合表现比较符合产品调性:

线性:双色

面性:单色、双色、不透明度、轻质感、明暗质感

线面:线面


4、提取造型

通过手绘或大脑想象进行造型构思,这里我就不展示手绘过程(行吧,我承认就是画的太丑了不敢放)。


5、设计执行

由于不同风格对图标造型构思有所影响,且图标类型很多,不同特点组合起来样式更多。案例精力有限,所以只以线性双色风格做演示,希望大家灵活使用。

这一步就是将手绘图形矢量化,在矢量化创意过程中,我们可能会对手绘的图形进一步简化细节或新增造型,这都很正常。只需注意在整个绘制过程中遵循图标设计规范,以及注意图标设计注意事项即可。

图标盒子使用

创意输出


Tips:

在绘制造型时需注意,图标文案详解中的关键词也有优先级,以如下「礼品卡」图标为例,是表达礼品的意思多?还是表达卡的意思多?这个会影响图标中相关元素的面积大小。站在商业角度看可能会更倾向于方案2,突出礼品,来吸引用户。站在入口文案清晰传达的角度,可能我会更倾向于方案1。

1or2?


最后对专属客服进行多风格尝试,最终效果如下:


附上部分绘制过程中的淘汰稿:



04图标资源输出

在将图标输出给前端前,需要沟通好使用何种格式,目前常用图标格式分为两大类:

矢量格式

  • SVG:缩放无损、体积小、支持前端样式修改参数、单色情况下方便前端修改颜色来表达图标状态,减少重复上传。


位图格式

  • PNG:支持透明格式

  • JPG:兼容性强,适合大尺寸高饱和度图像

  • GIF:动态图标使用,缺点是透明情况下边缘容易出现锯齿。


这里主要介绍静态图标中,svg格式在工作中如何输出给前端同学使用(借助iconfont)。


svg图标交接方式:

1、图标资源优化

在iconfont官方绘制指南中有描述,在导出前需要按如下规则优化图标资源:


2、选中图标导出svg格式

以Figma为例,优化图标资源后,选中图标将输出格式选择为导出svg。



3、上传iconfont

在资源管理下,选择需要上传的位置。


选择上传图标



4、选择颜色提交模式

去除颜色并提交:适合单色图标,去除颜色提交可以方便前端使用代码修改参数,减少不同状态图标重复上传。

保存颜色并提交:适合多色图标(注意:在单色情况下,选择保留颜色提交,前端则无法通过代码修改图标颜色)。


最后当我们把图标都上传好后,就可以将前端同学拉入团队项目中开心进行玩耍。

好了,以上就是本篇要分享的全部内容,希望对各位有所帮助。

最后,我是幺零三,咱们下期见。


Powered by Froala Editor

更新:2021-04-12

收藏

1068人已收藏

评分:

完整度:4星

启发性:4星

勤奋性:4星

排版布局:4星

推荐:
对图标设计的风格、设计规范和资源输出都有很全面的科普,很棒~

幺零三

微信:Lsa103x

  • 16

    作品

  • 2240

    粉丝

  • 1

    关注

  • 动态引导设计
  • 微信浮窗功能的思考与优化
  • UI动效设计原则
  • Figma让设计变得更轻松

    猜你喜欢

      2021-04-12 原创文章 经验/观点 举报 33342 1068 538 15

      图标设计,你需要了解这些...

      0.0°

      你确定要举报图标设计,你需要了解这些...

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2021年04月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      538
      1068
      15

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

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

      登录

      手机号

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

      登录
      第三方账号登录