在彻底弄清栅格式规范后,花了两天的时间重新把平台端的设计重新做了一遍。今天把icon/图标补上,正好回顾一下icon的设计规范。
图形化设计是所有设计师都会遇到的设计需求之一,初级设计师基本也都是从这个开始的。虽然需求很小但是对设计能力的考验了,作为初级设计师需要认真对待!
图标设计分为两种:一种作为功能配图使用(如上图),其二作为功能按钮(❎ 、🚮 )。
一、功能配图使用
配图使用多为补充说明、点缀画面使用。即使可点击确无实际意义,辅助说明作用。就行商场卫生间,即使画了男女标示在门口处也会有明显的男厕、女厕文字标示。
这种配图的icon多出现在首页,作为功能入口。这就需要用色彩欢快、设计细节丰富的设计吸引用户的目光,增加其功能区的点击量。
二、功能按钮
第二种便是功能性的,点赞、分享、返回,多为线性。使用简洁明了的图形设计,在强调功能的前提下,不影响用户操作流程。
以上两种基本涵盖了icon设计的使用场景,以今天完成的图标设计为例,以下为设计流程反思。
设计流程
功能入口的icon设计,第一原则吸引用户。但是考虑到学习类应用并没有做的很拟物,一方面比较耗费精力另一方面需要留出时间完成其他工作(懒啊)。
所以,从开始打开figma到设计完成大概花了两个小时。
一,先从设计指南里找到启动图标的设计规范图。无规矩无方圆,标准图为我们的图形设计提供很大帮助。
二、https://www.iconfont.cn/,能够为我们提供很好的帮助,能够搜索到很多很多icon。
三、通过搜索,能够下载到不同设计风格(线面、纯线、纯面)的icon。
四、把下载的图标调整到统一尺寸,然后把规范图叠在最下面锁定。
五、这时候就需要进行统一性设计了,包括:大小、设计风格、颜色、透视、细节!
六、尽量在圆(规范图)内进行设计,即留出安全距离。这样做主要是为了以后替换图标不会产生大小失错。
说起来还是比较简单的,但是回顾我的设计生涯icon占据了很大的一部分。由开始很大很丑很慢到现在比较快能够在设计水平线上,也算不断的在成长。
之前看到过一枚初级做的一套icon,我以为三年多的设计没问题。但是的确凸显了很多的问题,我当时应该给他总结了问题,找到后发出来。
但无非就是统一性问题,这是很多设计师忽略的!
做之前,确保所找到的设计资源尽量一致。都是线性的突然找一个面的,改动这个面的就比较费时间!
另外,确保设计尺寸数据上的一致!的确需要眼睛看一下大小区别,但是那仅限于最后的微调呀!如果开始做图一个80px*80px,另一个60px*60px,这用得着肉眼看?
之后便是设计风格,在整合找到的参考时考虑,大小、设计风格、颜色、透视、细节!例如画线型的会有人选择断点,那同套其他icon也要做个断点保持设计的一致性吧!
尽量相信数据,不骗人呀!如上图所示,在完成设计后会拉辅助线看一下图标的实际尺寸是否过大/小。图标与图标之间实际尺寸差距过大,尽量调一下,别说等肉眼看到了再说,没准眼神不好呢?
最后,软件都会有mirror在手机上肉眼看一下,适当调整就可以了。
以上就是我做icon的流程/步骤,至于具体怎么画不解释了吧。联想!搜索!参考!
最后抛重点!统一很重要!时刻检查自己画的这一套东西是否是一套!!!
网友评论