赞助商
立即赞助

研究了上百套图标,总监却告诉我图标要这样画!

UI设计3年前 (2021)更新 流光
4.7K 0 0
件名文件大小提取码下载来
iconfont 图标库6M2333 点此复  登录下载

今天还是一篇非干货的原创章。

内容分为两点:

  • 快速绘制精致图标的经验与技巧,有效升专
  • 团内有个设计师协的时,何定图标设计规范,设计更整体

研究了上百套图标,总监却告诉我图标要这样画!

归纳图标设计原则

图标的基础特征

动手设计之前,咱们先对完整的图标集进行分析。

弄在画整体的系统图标集,各个图标得备哪些征,有哪些切入点,可以作为在实际绘制候的依据。

先来看几组 iconfont 案例,看不太学可以戳图片放大。

研究了上百套图标,总监却告诉我图标要这样画!

围绕上这些案例,咱们可以归纳出图标几设计原则。比如:

1. 设计图标需要考虑延续性,图标互相牵连影响

图标几乎不会以单个形出现,大多数都是以组归类。符号体性与统性,都是依靠单个 icon 共性特征立起来。

比如 iconfont 中的这组icon,图标圆形的外轮廓,就保持了一致。其次用户的表符,也很好保持了延续性。

研究了上百套图标,总监却告诉我图标要这样画!

这种小特征,共同组了图标库的整体特征。

2. 设手法趋同、图形内差异

第二点好理解,设风格、手法素需统一,但内传达的差异必须拉,避免图形趋同导致功能混淆。

如面两个案例,由于过于相,导致户很难解图标含义,是天气,还是设置按钮,这种情况我们在设计时需要极避免。

研究了上百套图标,总监却告诉我图标要这样画!

总结来说,就是图标的共性往往体现在设计手法上,如颜色、形状粗细、细节的一致性,这些都是设计格的统一。

而图标的特,往往现在形状内容差异,形状决定图标的信息传递含义。所以共要趋同,特要拉开,个是设计图标集的基原则。

3. 功能大形式,图形能理的情况下样式越简洁越

不道大家是否关注,曾经在设计圈风靡一时的MEB图标风,产品圈却非常冷门,几乎没有产品在继续用种风为功能质图标。

研究了上百套图标,总监却告诉我图标要这样画!

△ 该品来自网络图,仅流使用

因为虽然图标增加了装饰后,显得有趣致,但其实也增加了图标的识别难度以及识别效率,反而背离了图标的计初衷。

所以于系统功能图标而言,必要简洁性,高效识率,才是关键。

如何制定图标设计规范

图标的计约束性

聊完了计主张及基本的征。下来咱开始剖析图标的计细节,包括析制定图标的系统计规范,应该从哪些方面入。

规范一:基本尺寸比例

规范的第一点,就是图标的基础形状比例。这个比例,主要是约束长宽,共包含了四个关系,别为「正方形 : 横矩形 :竖矩形 :圆形」

研究了上百套图标,总监却告诉我图标要这样画!

这四个关系的约束,会让图标集的所有图标大,起来是一致的、统一的。横矩形、竖矩形这个比例,会决定整套图标的饱程度,横竖比例越一致,图标整体越饱。

研究了上百套图标,总监却告诉我图标要这样画!

这点大家可以斟酌,如果是泛娱型的产品,icon可以更饱一些。如果是偏工化产品,那还是可以优先保障图标的识别度,饱程度倒是其次。

圆润饱型:

研究了上百套图标,总监却告诉我图标要这样画!

正工具:

研究了上百套图标,总监却告诉我图标要这样画!

规范二:线条粗细、正负形间距

定了比例后,接下里是图标细节刻画。于线性图标而言,最要细节是线条粗细;于性图标而言,最要是正负形距。

研究了上百套图标,总监却告诉我图标要这样画!

所以这些核心元素,在图标核心线条、核心区域部分,距样都应保持统。

研究了上百套图标,总监却告诉我图标要这样画!

常在移动端@2x内,主流icon粗细为3px,而4px大多数都是为功能性导航icon,细图标常看起来会更精致些。

研究了上百套图标,总监却告诉我图标要这样画!

然也有部分品使用是2px,比如新版YouTube,其有些较为复杂icon,单根粗细线段不定能满足其需求,所以需要制定条副线粗细。

细节可以根据产品的调性,统一即可。

规范三:圆角、角度个性化元素

比例基本元素确后,也可以制一些图标的性化元素规范,比如图标的圆角小、角度置,一些特殊的样式。

研究了上百套图标,总监却告诉我图标要这样画!

这些性化的规范,颗粒度可以Case By Case义,圆润还方,可以根据产品的视觉风格义就好。

研究了上百套图标,总监却告诉我图标要这样画!

这些规范样式好,就可以充分的让图标集内的图标,从设保持一致的,且具特色感。

图标的设计流程

面讲了关于图标的分析及规范。了方便家掌握,接下咱们就讲讲,具体动手,流程什么样的。这里我给我的骤作参考:

研究了上百套图标,总监却告诉我图标要这样画!

第步:绘制好图标基本网格

第步,然是确定好图标icon大小,以及上我提到基本尺寸比例,四个关系「正形 : 矩形 :竖矩形 :圆形」约束,构好基本骨骼。

研究了上百套图标,总监却告诉我图标要这样画!

我这里以图标容大小为 56×56,预留8px安全距,图标最大大小为 48×48。

由于视差关系,圆形图标里面的尺寸的,所以圆形的小48×48。因我图标饱满一些,所以方形的小我两各减去2,42×42。

研究了上百套图标,总监却告诉我图标要这样画!

然后再绘制出横矩形(48×36)与竖矩形(36×48),各线段之间的间距保持一致。

研究了上百套图标,总监却告诉我图标要这样画!

然后各形状居中对齐,这样四关系「方形 : 横矩形 :竖矩形 :圆形」好后,基本的器就制好啦。

第二:设图标基本规范

接制好图标的基本规范,了方便家看得清,我这里设图标的线条粗细3px,圆角6px,净简洁一些,让它看起饱满。

研究了上百套图标,总监却告诉我图标要这样画!

角度、断点啥的,我这里就不义了,因只示例给家看,讲一下流程,所以尽可能简单一些。家练习的时候,也可以试自己去义一下。

第三:绘制图标

好了后就可以始绘制图标啦。我这里分别绘制十五,作示例

研究了上百套图标,总监却告诉我图标要这样画!

然后就使用径具,根据创意去绘制完善图标了。绘制的过程中,也可以不断调整,让图标看起协调,饱满,易识别。

研究了上百套图标,总监却告诉我图标要这样画!

花了十五分钟左右,简单的十五图标草稿就画好了,接下咱们始调整细节。

更详细的绘制方法:

第步:整体性调整

有的图标绘制好了后,咱们就可整体性的开始打磨细节,把图标形状的一些折角处、大小样式调整一致,图标的节奏更清晰,整体样式更统一。

研究了上百套图标,总监却告诉我图标要这样画!

这样一组精致的系统icon就绘制好啦。

接着咱们也以加点特风进行尝试,比填充一个颜。

研究了上百套图标,总监却告诉我图标要这样画!

当细看的,图标部分细节还是有点糙,其还以,但个主要做示例用,大家自己在做练习的时,别像我一样偷懒嗷

图标库下载

上面讲很方法经验,文末给大家来点际的。

珍藏了多较为不错的大厂图标集库,日常在画图标没灵的候,就会开这些,参考一下。

文件都是矢量格,编辑便,很全。今天拿出来送大家白嫖了

研究了上百套图标,总监却告诉我图标要这样画!

欢迎关注作者微信公众号:「UX小学」

研究了上百套图标,总监却告诉我图标要这样画!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

这几年有不少背景图案制作工具,都可以在线预览、客制化图形细节,最终产生 CSS 和 SVG 格式,甚至在不用下载任何文件的情况...
免费素材
前一篇文章《从零开始学!B 端产品图标绘制指南(创意篇)》跟大家分享了图标设计的创意阶段,今天继续第二篇,总结营造高级...
B端产品
图标在产品中的应用非常重要,不同位置的图标有不同的设计思路。本文将从产品和设计两个角度对底部导航栏的图标进行分析。阅...
ui设计
今天给大家介绍几个 Illustrator 杀手级功能,分享一下如何让图档尽量小,可反复修改且不会破坏对象的作图小技巧,再配合一通...
B端产品
大家好,我是彩云。最近有帮忙看我群里一些同学的作品集,会发现很多人在图标设计细节上有不少问题,这块也是我给出建议较多...
UI 设计
一、图标的定义 1. 什么是图标 图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。 2. ...
ICO
设计师可能会觉得 B 端设计少有发挥空间。一是产品风格严肃专业,不像 C 端产品风格多种多样,可以调动起用户丰富细腻的情绪...
B端产品
对于移动端APP 而言,图标始终还是最重要的「门面」,它直接关联着产品的品牌价值,图标是否具备良好的可用性,将会直接影响...
App图标