您当前所在位置: > 爆料站 > 有深度

教你5招,轻松打造系统图标规范

时间:2019-11-30 16:41:33  来源:  作者:网络

原标题:教你5招,轻松打造系统图标规范

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

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

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

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

  1. 风格设定
  2. 图标网格
  3. 美学统一
  4. 辅助元素
  5. 命名系统
01 风格设定

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

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

  1. 符合产品调性
  2. 极致简约
  3. 符合流行趋势
1. 符合产品调性

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

Spotify&Facebook

2. 极致简约

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

Instagram&29CM

Uber 图标

3. 符合流行趋势

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

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

02 图标网格

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

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

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

03 美学统一

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

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

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

04 辅助元素

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

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

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

  1. 元素位置必须固定在一个方向,同个位置,便于用户记忆,一般都是放在右上角或者右下角,这里说明下,一个产品的图标系统,最好只出现一种样式辅助元素,否则可能会导致混乱
  2. 风格必须统一,如果都加了底板,那么就统一加底板,下面三个图标是没有加底板的,形成一致风格

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

05 命名系统

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

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

  1. 命名里面切记勿留空格:如btn _Home_new album
  2. 避免带后缀数字:如@1,@2,@3的后缀不允许出现,我发现好多设计师都这样做,这个绝对不标准;如btn_home_add@2,开发拿到资源会全部重新命名。如果我们遵守开发规则,那么切图资源他们可直接调用
  3. c命名里面不允许夹带大小写:如icon _Home_search

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

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

  • ic_navbar_search_normal
  • ic_toolbar_delete_normal

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

  • ic_like
  • ic_download
  • btn_add
  • ic_global_search(全局使用必须加全局标识)

常用的命名简写模式

  • ic(Icon)
  • bg(background)
  • di(divider)
  • bt(bution)
  • cl(color)
总结

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

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

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

#专栏作家#

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

题图来自Unsplash,基于CC0协议游戏网

相关下载

玩家评论

盟牙有礼暖春季来袭四步教你领取至臻赛娜!_活动

原标题:盟牙有礼暖春季来袭 四步教你领取至臻赛娜! 经常关注英雄联盟官方网站以及掌盟的小伙伴应该会发现,最近国服又上新了一个新的活动,此次活动是详情>>

阅读: 0
日期: 2020-03-12
盟牙有礼暖春季来袭四步教你领取至臻赛娜!

经常关注英雄联盟官方网站以及掌盟的小伙伴应该会发现,最近国服又上新了一个新的活动,此次活动是掌盟和虎牙直播联手推出的活动——"暖春季盟牙有礼"详情>>

阅读: 1
日期: 2020-03-12
盟牙有礼暖春季来袭 四步教你领取至臻赛娜

经常关注英雄联盟官方网站以及掌盟的小伙伴应该会发现,最近国服又上新了一个新的活动,此次活动是掌盟和虎牙直播联手推出的活动——“暖春季盟牙有礼&详情>>

阅读: 1
日期: 2020-03-12
商场衣服贵,淘宝没优惠?小编教你1折买国内外大牌!!_品牌

详情>>

阅读: 6
日期: 2020-03-11
魔兽世界怀旧服:如何识别黑翼G团水平?教你3招从此2小时打完!

虽然都说黑翼简单,但遇到不靠谱的团长和队友,5小时才见奈法是很正常的事情。那么,在魔兽世界怀旧服中有没有办法快速识别黑翼G团的水平呢?当你进组之后详情>>

阅读: 23
日期: 2020-03-10
梦幻西游手游:武器选高伤害还是力敏?专业人士来教你

在《梦幻西游》手游中,武器对于角色来说是一件非常关键装备,一个角色输出伤害的高低和武器的关系十分密切。然而许多玩家在选武器的时候都会非常的纠详情>>

阅读: 12
日期: 2020-03-09
《仁王2》网校开课!网易UU加速器联合主播一对一教你玩游戏_活动

原标题:《仁王2》网校开课!网易UU加速器联合主播一对一教你玩游戏 由Team Ninja制作、SCE发行的动作RPG游戏《仁王》的正统续作《仁王2》,即将于3月1详情>>

阅读: 6
日期: 2020-03-09
《仁王2》网校开课!网易UU加速器联合主播一对一教你玩游戏

由Team Ninja制作、SCE发行的动作RPG游戏《仁王》的正统续作《仁王2》,即将于3月12日正式上线PS4,网易UU加速器官方也即日开启了《仁王2》网校开课的预热活动,届时将会详情>>

阅读: 6
日期: 2020-03-09
上交首席教你学乐器|大提琴①_疫情

原标题:上交首席教你学乐器|大提琴① 疫情仍在继续,上海交响乐团音乐抗疫不停歇,推出线上“首席教你学乐器”,大提琴、长号、双簧管、小提琴等声部首详情>>

阅读: 7
日期: 2020-03-09
只有一台电视,教你畅玩主机游戏_时长

原标题:只有一台电视,教你畅玩主机游戏 一觉醒来,假期还有5天 一觉醒来,假期还有7天 一觉醒来,假期还有13天 从除夕开始算的话 大部分人都度过了一个详情>>

阅读: 10
日期: 2020-03-07
上交首席教你学乐器|打击乐①_疫情

原标题:上交首席教你学乐器|打击乐① 疫情仍在继续,上海交响乐团音乐抗疫不停歇,推出线上“首席教你学乐器”,大提琴、长号、双簧管、打击乐等声部首详情>>

阅读: 6
日期: 2020-03-07
教你CF手游白嫖大半个月免费武器,学去这方法血赚!

最近在hello语音上看到一个关于CF手游的送福利活动,第一时间想到曾经的抽风油精大斧头活动,武器闪耀着原谅绿,本以为它像老实人一样不值钱,谁详情>>

阅读: 3
日期: 2020-03-06
教你在Ubuntu上通过snap安装都市反恐UrbanTerror游戏

Urban Terror是免费的多人第一人称射击游戏,现在可以通过Snap在Ubuntu 18.04及更高版本中安装。 Urban Terror是由FrozenSan详情>>

阅读: 2
日期: 2020-03-06
“AI镜子”教你撸铁!智能健身品牌Tempo获1750万美元融资

原标题:“AI镜子”教你撸铁!智能健身品牌Tempo获1750万美元融资 体育大生意第 2096期,欢迎关注领先的体育产业信息平台 |马莲红 体育大生意记者 一详情>>

阅读: 7
日期: 2020-03-03
官方教你玩游戏!《仁王2》制作人两面宿傩解说演示

《仁王2》目前正在进行为期3天(2月28日-3月1日)的终测,相信不少玩家都跪倒在了新BOSS“两面宿傩”面前。面对这种情况,光荣官博发布了一段《仁王2》制详情>>

阅读: 4
日期: 2020-03-01
最良心活动!鸡里奥宝典赤月篇来袭三分钟教你免费拿皮肤_奖励

原标题:最良心活动!鸡里奥宝典赤月篇来袭 三分钟教你免费拿皮肤 时隔三年,奖励最丰富的鸡里奥宝典再次回归,老召唤师们都知道鸡里奥有多划算,即使是新详情>>

阅读: 6
日期: 2020-02-27
最良心活动!鸡里奥宝典赤月篇来袭 三分钟教你免费拿皮肤

时隔三年,奖励最丰富的鸡里奥宝典再次回归,老召唤师们都知道鸡里奥有多划算,即使是新召唤师也千万不能错过这一次的宝典活动。 鸡里奥宝典赤月篇介绍 鸡里奥详情>>

阅读: 6
日期: 2020-02-27
鸡里奥赤月篇来袭 三分钟教你免费拿皮肤

时隔几年,奖励最丰富的鸡里奥宝典再次回归,老召唤师们都知道鸡里奥有多划算,即使是新召唤师也千万不能错过这一次的宝典活动。 鸡里奥宝典赤月篇介绍 鸡里奥宝典最早详情>>

阅读: 20
日期: 2020-02-27
《我的世界》高手修炼手册三分钟教你如何零基础伪装游戏高玩

无论是在什么游戏中,高手都是大家青睐的对象。每个人都希望可以和高手做朋友,但想成为高手往往需要大量的努力和一定的游戏天赋,并非是一朝一夕就能完详情>>

阅读: 5
日期: 2020-02-26
分享15个女人的穿搭秘笈,教你在年会如何得体又漂亮_西装

原标题:分享15个女人的穿搭秘笈,教你在年会如何得体又漂亮 ⭐想了解更多文章,请关注微信公众号【美好秦报局】,本文首发于公众号。 15个女人的穿搭详情>>

阅读: 4
日期: 2020-02-25
别忘了兑换专属动作!教你快速领取李元芳80级战令皮肤

新一周的开启,荣耀战令的任务系统也随之刷新,若赛季初解锁了进阶版战令的玩家大都会在本周领取到80级战令皮肤—李元芳银河之约,小编也不例外!在玩了三详情>>

阅读: 6
日期: 2020-02-25
2月22日为猫之日 PlayStation日本教你怎么画多罗猫

在日本,2月22日是猫之日「猫の日」,因为在日语里的2.22的谐音和猫的叫声Nya能挂上钩。PlayStation日本官方推特也特别公布了三个由SIE新入社员工制作的视频,一步一步教你怎么画详情>>

阅读: 8
日期: 2020-02-22
对的爱情不用追!《非诚勿扰》教你正确处理亲密关系

对的爱情不用追!今晚(2月22日)《非诚勿扰》,孟非一句“你喜欢我、我也欣赏你,才能走到一起”引发了强烈共鸣。我们该如何正确处理亲密关系?三位老师表示:独立、成长、尊详情>>

阅读: 4
日期: 2020-02-22
女性风格logo如何设计?教你轻松设计出简约时尚感!_https

原标题:女性风格logo如何设计?教你轻松设计出简约时尚感! 根据相关数据资料显示,女性消费者对品牌的依赖性更高,如果你的品牌主要面向的人群是女性群体详情>>

阅读: 10
日期: 2020-02-21
《问道》荣誉系统小攻略教你轻松赚工资

  在《问道》中,每个月荣誉值和在线时长达到一定标准时,就可以领取工资,即银元宝。玩家可以用工资来购买商城中的付费道具,大大提升游戏体验。想要积累荣誉值需要付出一定努详情>>

阅读: 11
日期: 2020-02-18
LOL带妹宝典,三年带妹经验教你如何用套路带女生轻松打游戏

“带妹”是竞技游戏中普遍存在的现象,也是男玩家绕不开的话题。与带兄弟入坑新游戏的方式不同,妹子娇柔可爱受虐能力相对薄弱,如果在游戏中一直被杀,即使你技术过详情>>

阅读: 10
日期: 2020-02-18
全新机仆涂装面世《量子特攻》“机仆闹雪”教你玩转变身和召唤

导语:网易超能战术竞技手游《量子特攻》瑞雪节系列庆典,已同漫游者们见面一段时间,如今活动延期、直到2月27日皆可参与其中,全新机仆外观,各类礼盒、蝶详情>>

阅读: 9
日期: 2020-02-18
人在家中躺宝石天上降!《魔域口袋版》教你如何宅着赚钱

宅在家里的这段日子,饭量增加、睡眠增加、体重增加,可偏偏账户余额不断减少,每天躺在床上都忍不住幻想有没有天降横财的机会,好阻止住钱包的“瘦身”计详情>>

阅读: 2
日期: 2020-02-17
和平精英:鲨鱼教你反打1V4,满满的全是细节,网友评论太真实了

众所周知和平精英的地形环境十分复杂,除了丰富的地形,还有构造截然不同的建筑物。一般情况下,建筑内可以拾取到丰富的物资装备,在关键时刻,建筑物还能成为掩体的存详情>>

阅读: 4
日期: 2020-02-17
剑与远征情人节活动,巧克力和玫瑰花如何获取,教你拿满!

剑与远征情人节活动,巧克力和玫瑰花如何获取,教你拿满! NB游戏,娱乐生活!大家好,我是NB。 前段时间小感冒,写文章可能不够严谨,本期继续给大家带来最新的详情>>

阅读: 9
日期: 2020-02-15
韩服高胜率打野套路 教你玩转掠食者奇亚娜

本期我为各位召唤师带来的是一套近期在韩服高分段中新产生的一种全新打法——掠食者奇亚娜,这并不算得上是一个全新的打法,奇亚娜打野也很常见,但是在最近,很多高详情>>

阅读: 7
日期: 2020-02-13
教你如何通过PokemonHOME将前作精灵传送到《宝可梦剑盾》中

昨日任天堂的Pokemon Home 功能正式上线,这个东西的功能跟以往的口袋银行(官方名为:精灵宝可梦虚拟银行,以下简称口袋银行)十分相似,但相比之下功能更多,详情>>

阅读: 48
日期: 2020-02-13
阴阳师:新春祈愿6种绘马奖励不同,教你在7天之内集齐900天相

通常来说,阴阳师体验服大部分活动进度会比正式服快一周左右,所以一些活动的玩法、攻略、奖励等,都能让正式服阴阳师提前“预知”,做好准备。这次新春祈详情>>

阅读: 20
日期: 2020-02-13
春节迷惑行为大赏!《逗斗火柴人》小黄教你宅家放烟花

兄dei们好啊~今年是一个不寻常的春节,相信有很多柴柴跟小黄一样,大部分时间都宅在家里,但是混日子宅也会有各自不同的打开方式,快来看看在《逗斗火柴人》里的宅详情>>

阅读: 11
日期: 2020-02-12
剑与远征:哪些英雄值得培养?教你新手搭配阵容

剑与远征:哪些英雄值得培养?教你新手搭配阵容 NB游戏,娱乐生活!大家好,我是NB。 攻略不详,给大家道歉! 《剑与远征》很多副本都是个人摸索录制好了视详情>>

阅读: 9
日期: 2020-02-12
红警OL七星勋章建筑登场!教你快速升级!

EA授权,红警官方正版手游《红警OL》是超硬核的现代战争策略手游。游戏注重现代军事理念,打造现代战争策略玩法,极致游戏画面、经典IP元素再现,辅以全新战争策略玩法,与盟友共赴详情>>

阅读: 15
日期: 2020-02-11
精彩推荐