【Icon】线性图标避坑指南

工作中我们会接触很多图标的绘制,时下流行的不外乎也就是:线性图标、面性图标和线面结合图标;

初学者可能接触的最多也就是线性图标,也可能认为是最容易掌握的吧……😶   


tab bar

线性图标的特征

目前市面上的线性图标以 2px、3px 最为主流。为什么大部分的产品会使用 2px 和 3px 的线性图标呢?因为图标线条的宽度越大,可展示的细节就越少,但是图标的表现力却能够得到极大的提升,这也是为什么面性图标的直观表现力一直都比线性要好的原因。


线面对比

线性图标线条的宽度越小,能展示的细节就越丰富,同时直观的表现力也会降低,因为东西太多会产生视觉干扰。

当然现在也有少数一些产品的线性图标用 1px 和 4px,而且也在图标上做了减法,所有我们会看到一些用 1px 的图标整个图形表现很简单,但是因为线条太细,导致整个底部操作栏的图标视觉表现上偏弱;


1px


而 4px 的图标会显得略微厚重;


4px


因此线性图标表达力最好的是在 2px 和 3px,同时减少一些图标细节,能够更大的提升图标的表达力。但是同样的图形,面性的图标直观表现力要优于线性图标,因此面性图标更易上手。


描边怎么选?(这是个知识点 ⚠️)

以 sketch 来画图标举例,首先我们需要遵循像素网格,点击 sketch 顶部右上角,选择显示像素,你会发现你的界面从矢量变成了像素,这么做的好处是能够保证我们的图标在画的时候能看出来有没有虚边。

在画线性图标的时候,我们首先面对的问题就是选择的是内描边外描边还是居中

这个时候我们面对的是两种情况,当你的描边像素是偶数的时候,比如:2px,4px,居中,内外描边视觉上看起来都是可以的,就算是在

显示像素网格的情况下,也不会发生虚边的情况。如下图所示:

但是如果描边数值变成奇数的时候,比如:1px,3px,5px,这个时候就不能用居中,应该使用内或者外描边,因为居中的描边会模糊掉。如下图所示:

在做闭合路径的线性图标时,通常采用内描边的对齐方式,因为外描边的矢量图形视觉上其实是比实际数值要大的,不利于我们控制图标大小。而且描边的数值一定不要出现 2.31 或者 1.68 这样的情况。

如上图,有小数点的描边同样也会出现虚边的问题,而这种情况经常会出现在图标的等比缩放之后,因此我们在缩放图标之后,需要每个小细节都确认一下。



断点图标怎么处理?


因此为了达到这样的效果,就需要将描边改成居中,如果选择内描边或者外描边就会变得复杂很多,因为线不居中的情况下是无法直接设置成断线处弧形的。如果直接设置,会变成下图所示:

这无疑增加了设计的工作难度,为什么要将线条端口变成圆形呢,同理可参照按钮为什么都选择圆角矩形作为底部的道理。因为直直的切割线会让图标整个变得很生硬,没有亲和力,让用户对界面整体营造的氛围产生抵触心理。




原文链接

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容