7天娱乐龙虎-教你5招,轻松打造系统图标规范

7天娱乐龙虎-教你5招,轻松打造系统图标规范
2020-01-09 15:30:21

7天娱乐龙虎-教你5招,轻松打造系统图标规范

7天娱乐龙虎,系统图标设计能准确反映出品牌的个性理念,并最有效传达企业品牌形象。作者从自身工作经验出发,分享了打造系统图标的5大步骤。

今天我们聊聊如何做系统图标规范,大家知道图标在产品设计中有着非常重要的地位,它既能传达功能属性,也能传达品牌,这就是为何图标设计如此重要的原因。做手机系统的公司还有专门画系统图标的团队。

为什么要做系统图标规范?主要是为了便于设计师之间合作使用,指导设计师如何规范的去设计图标,以确保企业所有产品图标风格的一致性和可用性达到统一,同时也是为了后续产品更新迭代有可参考的地方。

下面我将通过5大步骤带你掌握如何去定义系统图标规范

图标风格如何定?一般都是根据产品定位,同时集合当下主流的趋势去做图标风格定义,最终得出图标使用线的还是面的、还是卡通、色彩重叠或者还是弥撒渐变的?

我们做产品图标设计切勿盲目跟风,一定要根据自己产品品牌去做,这里我告诉大家图标风格定义三大原则:

举个例子,首先要知道我们产品市场定位,了解品牌调性,比如是偏社交类(facebook)还是独特情怀(spotify),或者纯艺术类、工具类等等。每个不同领域产品,都有不同的个性与特征。这都是影响着我们后续整个系统图标风格。

spotify&facebook

图标设计一定要简单,清晰,遵循几何造型,下面看两个产品列子

instagram&29cm

uber 图标

图标设计一定要紧跟潮流,避免设计出来的系统图标风格和目前主流趋势大相径庭,比如2020年流行什么样的图标?自己一定要有一个判断。

平时多留意大公司产品动向,新视觉语言。比如之前苹果最新系统ios11 ,图标由之前线的改成面的了。苹果有着庞大的用户体量,他们家新的视觉语言出来之前都会有大量研究调查,所以面图标也许是未来的一个趋势

网格设定是非常重要一步,这里我将基于materials design 网格的基础上来创建属于我们自己的图标网格。

蓝色线框是绘图的最大区域为20px,外框灰色区域大小是24px,中间有4px留白区域,也就是出血区域,materials design图标语言定义不允许图标超出蓝色框

这里定义系统图标以1倍图为基准,大小24px,线粗细1px,采用1:1的网格来绘制图标(使用面型图标还是线形图标,前面可根据自己产品,品牌去定)。

图标最关键的在于视觉符号一致性,线条粗细一致,内外倒角一致,图标倾斜角度方向遵循一定的设计规则,使用几何造型并贴紧网格设计,保证在最小尺寸都清晰可见。

上面四个图标为了便于清晰阅读,被我放大了400倍(大家在这里把它看成4倍)为了便于理解与换算。

上面我列举了4个例子,刚好把图标几种情况列举出来,可能还不够,不过我相信大家应该能明白,我们线倾斜角度必须要有规则,比如前面规则定的是5的倍数,后面都要跟随这个。所有线条粗细一致,所有图标内外倒角前期需定好。看下其他案例便于更深刻理解

可能很少有人会留意到图标辅助元素,在某些场景下单个图标无法表示当前场景的意思,所以增加辅助元素,帮助用户理解,减少认知负荷,那下面我们来先看两个图标。

第一个表示添加设备,第二个表示音乐闹钟。试想如果去掉左上角辅助元素,那么图标还能表达当前功能的意思吗?

那么辅助元素我们需要注意2点:

注意一般辅助元素的大小12x12px,不过大小可以根据情况而定,切割的地方宽度值要和之前定义单个线条粗细一样。

icon命名要求极为严格,涉及到我们切图给开发,所以我们命名争取做对,且需严格遵守规则,那么我们该如何去命名?

这里我先说一些禁忌(安卓)

因为安卓开发用java去写编写的,java本身就有命名要求, 有空格资源是无法识别的。也不允许有大小写,除非是java本身文件。不允许有数字,可用字母去代替数字。

正确的命名原则:ic/btn_位置_功能_状态

简约命名方式:ic/btn_功能

常用的命名简写模式

从第一步风格设定、到后面网格设定、美学风格和辅助元素,相信大家对于系统图标的指导方针有一定的了解。

那么现在是否是可以把自家的产品图标拿出来梳理一下呢(自驱力去解决之前图标不规范问题),可以从这几个步骤中,看能否梳理出一些常见问题,比如倾斜角度没有规则,线条倾斜方向混乱,或者图标视觉体量感是否一致等,这些都可能会影响到产品视觉风格一致性的关键原因。

当然图标系统还有一些细节元素我就不再这里赘述了,比如下图图1中,图标切割该去如何定义,图2中图标断开的地方该多宽合适?规则如何去定?大家慢慢去思考吧!

tony,公众号:功夫ux,人人都是产品经理专栏作家。百度高级ui设计师,关注互联网to c产品,关注物联网车载方面,擅长产品界面设计,产品基础设计语言定义,前瞻性设计风格探索。关注公众号并回复“图标网格”获取图标网格源文件一份。

本文原创发布于人人都是产品经理。未经许可,禁止转载

题图来自unsplash,基于cc0协议