美文网首页
Icon 实用设计流程

Icon 实用设计流程

作者: 校一长 | 来源:发表于2022-02-22 10:07 被阅读0次

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

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

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

    一、功能配图使用

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

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

    二、功能按钮

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

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

    设计流程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    相关文章

      网友评论

          本文标题:Icon 实用设计流程

          本文链接:https://www.haomeiwen.com/subject/chxglrtx.html