赞助商
立即赞助

从零开始画图标系列:工具类图标设计规范

UI设计3年前 (2021)更新 流光
2.4K 0 0

在《从零开始画图标系列:超全面的基础知识》中我们知道了,工具图标的三种设类型,以及对应的不同风格。本篇文章,内主分规范讲解案例演示两部分,规范具图标的重点。希望读者千万不跳过这部分的知识讲解直接去看演示了。

从零开始画图标系列:工具类图标设计规范

△ 三种主类型的图标

表意的准确

第一部分中,我们知道图标的主作用之一就作文字的替品,具明确的意。比如看见一镜,我们会当那搜索;看见钥匙或者锁,我们就会理解密码。比如下面这些图标,每一指的功能意都非常直白清晰的。

从零开始画图标系列:工具类图标设计规范

△ 意明确的图标

表达的寓意清晰,是工具图标最基本的要求,否则它只会传递错误的信息,成户的困惑。

在常见的图标类型里,通、设置、用户和分享之类的图标,对任何手机用户来说没有认和选择压力。但表意准确烦的地方在,一非常规的寓意,极难用图标表现出来,才是我们使用工具图标的首要烦。

比如下方这些图标,如果不加上文字息,大家能理解它是什吗?

从零开始画图标系列:工具类图标设计规范

△ 无文字息

那么,我们再把文信息补充进去,是不是会觉图形贴合内容?

从零开始画图标系列:工具类图标设计规范

△ 有文信息

这种案例中,我们关注的就,面对这样不常见的内,设师怎么把图形的创意样式出的,如果自己遇到一样的问题怎么办?

,除了知道每个工具图标都要表意准确之后,该如何通过合适的创意将图标样式确定来?

一般抽象的图标,难点在寓意信息是非的,我们很难直接构建对图形样式的联想,所以我们得想办法将抽象的内容「化」。也就是说,我们以先把个词写到纸上,把和个抽象信息相关的所有物写下来。

从零开始画图标系列:工具类图标设计规范

,我们以挑选出某个合适的物,以它为原型开始绘。果对挑选出来的物要以什么图形表现还没概念,么就以借助网上的图标素材网站,比 iconfont、iconfinder 等,在搜索框中输词语,通别人的设计获取灵感。

从零开始画图标系列:工具类图标设计规范

果身拥有比的手绘基础或是平面基础,也以直接通对照进行提炼的方式,设计出图形内容。

所以,在计图标要符表准确的概念,需要计不断收集图形,并提升对词想的能力。多优秀的创,就是在这些基础的积累之上逐渐形成的,而不是一蹴而就。

图标的一致性

第二个规范,叫图标的一致性。即一个或一套图标中,应该保持一致的细节。首先下面的反面案例:

从零开始画图标系列:工具类图标设计规范

在上面的案例中,不同图标间有大的割裂,完全不像于同一套计体系之下,这就是缺乏一致性的表现。这也是新在计一整套图标最大的难点,要让所有图标保持视觉细节上的一致。

那么,工具图标要保持视觉致性有哪些细节呢?

1. 类型致

前说过,工具图标有线性和填充类型,在正常情况,套图标应该保持相类型,如使用了线性图标那么后续不要设计填充以及混合类型。

从零开始画图标系列:工具类图标设计规范

2. 风格一致

每一套图标都有的计风格,不同风格在细节中都有不同的表现,需要让这些风格征保持高度统一,下面这些案例。

第,为图标添加缺口设计风格,我们要保证这个缺口大小是致,并个图标有有个缺口,而不是靠感觉随意添加。

从零开始画图标系列:工具类图标设计规范

第,在设计套偏圆润可爱设计风格,轮廓使用了较大圆,那么我们尽可能保证圆大小是致,而不是有用4pt,有用2pt或者接使用。

从零开始画图标系列:工具类图标设计规范

第三,采用了填充色偏移设计风格,首先要保证填充色致,并偏移距离和也要保持固定规律,不能随喜好任意制定。

从零开始画图标系列:工具类图标设计规范

3. 透视一致

透视关系是在面中对物体空间性质的表现方式,当应用了透视,物体就有了一定的 「立体」。

从零开始画图标系列:工具类图标设计规范

透视的表现不是绘制图标必须使用的风格,但是如果在图标中应用了透视,就要确保使用的视角是一致的。要极力避免同一套图标中既用了正视图包含了侧视图。

从零开始画图标系列:工具类图标设计规范

4. 粗细一致

在图标中我们应用到矩形段或是描边,我们要尽能证它们的粗细是一致的。

比如,在线性的计中,路径的描边尺寸要保持一致,不能这个图标用2pt,那个图标用1pt。

从零开始画图标系列:工具类图标设计规范

在填充图标中,会在一个矩形或是圆形中增加矩形的镂空,比如下图的个图标,在这种情况下也要保证它的粗细是一致的,而不是各不相同。

从零开始画图标系列:工具类图标设计规范

5. 大小一致

大小一致,就是让图标的视大小持一致,而不是它们字面上的长宽属持一致。

因为这是一个比较复杂的知识点,需要对何图形的视觉差有比较完整的认识,会在下一节做出完整的介绍。

这些和致性有关特征,是套图标看起来专业、有体感必要条件。是,在真实设计场景需要灵活变。

如果一些特的图标,保证了一致性的求后却极难被人理解,且找不到好的设方式,就可以差别对待。

如在一套线性的图标中,播放、快进等图标往往都是填充类的,这并会成视觉或是使上的困扰。

几何图形的视觉差

几何图形的视觉差,是对于工具图标来说最重要的细节,在《从零开始画图标系列:超全面的基础知识》图标一致性中已经及,它是平面基础论中可忽视的容,这个论要解决一个核心的问题,即怎么同的图形看上一样大?

能有的读者看到里得有什么难的,通软件的参考或者属设置,把它们的长宽设置成一样不就完。比下图样:

从零开始画图标系列:工具类图标设计规范

△ 尺寸等大的几何形视大小并不一致

画起来轻轻,参数上完美无缺。但是,怎上去这些图形大有点不一,为什正方形起来这大,三角形起来这?

这个问题根是,不几何图形带我们视觉大小是不。而要解决这样问题,要它们尺寸做出额调。比如下图这样:

从零开始画图标系列:工具类图标设计规范

△ 圆和三需要进放大正

当调整完圆形三角形以后,不觉得小的感觉一致了?这就牵扯一基础的视觉规律,占据面积越的图形,给人的视觉感受就越,所以给我们感受越小的元素,就得越。

并且,这个问题在一个图形的会产生影响,如知乎APP 面的点和反对按钮,都有角形图标,但图形实对于外矩形是非中的,我们看看面的演示。

从零开始画图标系列:工具类图标设计规范

如果一个图形中一分面积远大于另一分,那么就会这个图形的重心产生偏移,必须要往较小的分的方向移才产生平衡。

从零开始画图标系列:工具类图标设计规范

,在设计一整套的应中,如果没有对这个论的解,只定义一个矩形来,把有图形的尺寸与矩形对齐,那么最终看到的图标效果一定是极平衡的。

从零开始画图标系列:工具类图标设计规范

工具图标的栅格

其实,针对图标的规范,新人第一到的应该就参考线了,也就所谓的栅格模板。之所以后面讲解,因具图标的栅格规范,根据几何的视觉差特性衍出的,不后面会提到的应用图标由官方提供出。

我们先简单看看,见的工具图标栅格是么样的。

从零开始画图标系列:工具类图标设计规范

里面包含了正方形、长方形和圆形,那我们把它们分别罗列来看看。是是就发现这些图形的视觉尺寸是非接的?然后再通过这样的尺寸设计对应的图形,就看起来都一样大了。

从零开始画图标系列:工具类图标设计规范

,应图标的栅格系统对于图标的设计来说,是一个来应对几何图形视觉差的「参照物」。

之所以要说参照物,原因在一套图标不只存在几种图形的样式,还有很千奇百怪的形状,但大上我们以识别出来它的类似轮廓或者重心方向,是就以通参照图形来判断我们设计出来的图形尺寸是否符合标准。

如果计图形和参照图形类似,那尺寸就不能大于参照图形;如果计图形的宽大于参照图,那高就要于参照图,反之亦然。如果图形的重心有偏移,那就要往重心偏移的反方向移动,比如搜索按钮,Wifi图标等。

从零开始画图标系列:工具类图标设计规范

最后,说说栅格系统的画法,和大家想象的不一,想要画一套图标,栅格系统是画出来的,不是网上下载下来的,所以怎画也是这个知识的重点。

1. 如何绘制图标栅格系统

如果定义一套28pt的图标,那首先要画一个28pt的正方形,然后确定一个2-4pt的内边距,正所谓四边留一线,日后好相见。

从零开始画图标系列:工具类图标设计规范

然后就要开始在其中绘制正方形和圆形,正方形通常在整个图标尺寸1/2的比例,可以使用14或16的偶数(为了可以居中)。然后再确定圆形的尺寸,圆肯定比正方形大2-4pt,于是就得下方的图形。

从零开始画图标系列:工具类图标设计规范

之后,再确定横竖长方形的尺寸,可以直顶内边距的边缘。它的尺寸不是通过数值计算的,而是要先画出来,把它和前面的圆和正方形置于一条水线上,调整出一个衡的视觉尺寸,再并进栅格系统中,就完成了栅格系统的绘制,如下图的案例。

从零开始画图标系列:工具类图标设计规范

这一步也旨在检查的参考线系统是否在基础结构上经得起考验,是非常关键的一步。因为不同尺寸的图标中,参考线系统都是有别的,不能直按一个固定的比例来置,要根据实际景做判断。

然,为了进步便大家学习,我特意准备了套现成栅格素材,含16、24、28、32、36、48等六个尺寸。

从零开始画图标系列:工具类图标设计规范

素材链:https://pan.baidu.com/s/1rMbQKXVA4PRR_O9vA7hlew

密码:y580

备用下载链接:https://pan.baidu.com/s/194f5v8nM6_4mRulO7viOxA

像素对齐

在栅格绘制,细心读者肯定发现了几个关键,「齐」、「偶数」,这是在这部分要提及内容。关于显示倍率问题是 UI 基础知识,可能有学不太了解,不过没关系,接看下内容即可。

我们都知道素屏幕显示中的小单,一素只能显示一种颜色。小时候玩过的 GBA  FC 游戏机,都通过素画的形式呈,人锯齿无法避免的。

从零开始画图标系列:工具类图标设计规范

随技发展,素密度降低了,但如果依旧按过去这种一萝卜一坑的方式显示内,那锯齿感无论如何无法消除的。于,发了次素渲染(Subpixel Rendering)的技。一显示器中让我们觉得平滑的圆,一直,就可以发它的周充满了饱度较低的其它方块色彩。

从零开始画图标系列:工具类图标设计规范

△ 子素渲染

这项技术,像素可特有的方式来显示非整的色,即尽可还原我们对元素定义的小数点。但为么我们还要这个概念呢?

因为工具的图标太小,而且 UI 的元素对精细和准确度的要求不低,果我们没有尽能满像素对齐的要求,么就能导致元素边缘的模糊。

从零开始画图标系列:工具类图标设计规范

所以要满像素对齐的要求,就要符合元素身的尺寸为整数、描边为整数和XY轴坐标为整数的特。

1. AI中的像素对齐设置

在 AI 中,我们以通两个设定来查看和证像素对齐,即网的设置显示,以及对齐到点的设置。

从零开始画图标系列:工具类图标设计规范

像素的对齐主要表现在横和竖上,虽现在手机显示精度越来越高,但并不意味着我们以无视像素对齐的规律。在图标中,对1pt或者2pt描边的应用,得不是太细就是太粗,以用1.5pt的数值(1.5pt在2x中就是3px),但切不要出现类似1.23、2.16、3.46种小数。

像素对齐是一个专业UI计对于极致追求的表现之一,是每一个一线大厂UI计的基本操作,所以,想要冲刺更高的段位,就不要忽视这个规范的使用。

结语

这一章主要讲解了在计工图标,有哪些知识点和规范,为了加深大家的记忆点,再把它的知识点罗列出来:

  1. 图标要表意准确,能被用户识别并契合想要表达的寓意。
  2. 计整套图标的候要符一致性则,包括类型、风格、粗细、透视、大等征。
  3. 不几何图形会我们不大小视感,不能看元素参数。
  4. 我们根据视觉差的方式义出栅格系统,作图标尺寸设的重参考。
  5. 图标的绘制要保证横竖的直线对齐到像素,线性图标尽量采整数粗细,如果一定要小数的话就使0.5递进的。

当然,光靠阅读无法真记忆理解这些特性的,必须通过动手实践可以融汇贯通。

注作者的微信公众号:「超人的电话亭

从零开始画图标系列:工具类图标设计规范

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

相关文章

同域原则 Law of Common Region   1. 简介说明 理论表述 如果元素处在一个具有明确边界的区域内,那么在用户的感知中,这些...
同域原则
编者按:设计原则总是看起来简单抽象不言自明的,但是在细分的设计领域,这些原则其实有着各自不同适用情况,有着「特定的条...
ICON
文件名 文件大小 提取码 下载来源 iconfont 图标库 6M 2333 点此复制   登录下载 今天还是一篇非常干货的原创文章...
图标技巧
我们每天都在设计图标,并且保持这样的状态超过15年。身为设计师,想必你已经阅读过很多关于图标设计的文章,但是今天的文章...
ICON
@Daidai丶呆 :有读者说,面试的时候面试官提到了一个问题,但不知道怎么回答。 这个问题是:实心图标和空心图标的区别是什...
图标设计
@菜心设计铺 :图标——界面设计最重要的元素之一。 菜心经常写关于图标的教程和感悟,可见图标设计在我日常工作中占了很大比...
图标设计
编者按:本文高达一万字,从图标的起源、定义到基础的设计方法总结无一不包,还有大量的案例帮你理解布尔运算,是新人设计师...
图标设计
编者按:什么是金刚区?意义和功能是什么?金刚区图标的类型和表现手法是什么?有哪些设计要点?本文从4个维度为你一一揭秘。...
ui设计