Icon 实用设计流程

在彻底弄清栅格式规范后,花了两天的时间重新把平台端的设计重新做了一遍。今天把icon/图标补上,正好回顾一下icon的设计规范。

图形化设计是所有设计师都会遇到的设计需求之一,初级设计师基本也都是从这个开始的。虽然需求很小但是对设计能力的考验了,作为初级设计师需要认真对待!

图标设计分为两种:一种作为功能配图使用(如上图),其二作为功能按钮(❎  、🚮  )。

一、功能配图使用

配图使用多为补充说明、点缀画面使用。即使可点击确无实际意义,辅助说明作用。就行商场卫生间,即使画了男女标示在门口处也会有明显的男厕、女厕文字标示。

这种配图的icon多出现在首页,作为功能入口。这就需要用色彩欢快、设计细节丰富的设计吸引用户的目光,增加其功能区的点击量。

二、功能按钮

第二种便是功能性的,点赞、分享、返回,多为线性。使用简洁明了的图形设计,在强调功能的前提下,不影响用户操作流程。

以上两种基本涵盖了icon设计的使用场景,以今天完成的图标设计为例,以下为设计流程反思。

设计流程

功能入口的icon设计,第一原则吸引用户。但是考虑到学习类应用并没有做的很拟物,一方面比较耗费精力另一方面需要留出时间完成其他工作(懒啊)。

所以,从开始打开figma到设计完成大概花了两个小时。

一,先从设计指南里找到启动图标的设计规范图。无规矩无方圆,标准图为我们的图形设计提供很大帮助。

二、https://www.iconfont.cn/,能够为我们提供很好的帮助,能够搜索到很多很多icon。

三、通过搜索,能够下载到不同设计风格(线面、纯线、纯面)的icon。

四、把下载的图标调整到统一尺寸,然后把规范图叠在最下面锁定。

五、这时候就需要进行统一性设计了,包括:大小、设计风格、颜色、透视、细节!

六、尽量在圆(规范图)内进行设计,即留出安全距离。这样做主要是为了以后替换图标不会产生大小失错。

说起来还是比较简单的,但是回顾我的设计生涯icon占据了很大的一部分。由开始很大很丑很慢到现在比较快能够在设计水平线上,也算不断的在成长。

之前看到过一枚初级做的一套icon,我以为三年多的设计没问题。但是的确凸显了很多的问题,我当时应该给他总结了问题,找到后发出来。

但无非就是统一性问题,这是很多设计师忽略的!

做之前,确保所找到的设计资源尽量一致。都是线性的突然找一个面的,改动这个面的就比较费时间!

另外,确保设计尺寸数据上的一致!的确需要眼睛看一下大小区别,但是那仅限于最后的微调呀!如果开始做图一个80px*80px,另一个60px*60px,这用得着肉眼看?

之后便是设计风格,在整合找到的参考时考虑,大小、设计风格、颜色、透视、细节!例如画线型的会有人选择断点,那同套其他icon也要做个断点保持设计的一致性吧!

尽量相信数据,不骗人呀!如上图所示,在完成设计后会拉辅助线看一下图标的实际尺寸是否过大/小。图标与图标之间实际尺寸差距过大,尽量调一下,别说等肉眼看到了再说,没准眼神不好呢?

最后,软件都会有mirror在手机上肉眼看一下,适当调整就可以了。

以上就是我做icon的流程/步骤,至于具体怎么画不解释了吧。联想!搜索!参考!

最后抛重点!统一很重要!时刻检查自己画的这一套东西是否是一套!!!

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

推荐阅读更多精彩内容