美文网首页
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 实用设计流程

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

  • ICON设计流程规范

    手游运营的游戏项目越来越多,换皮包也越来越多,包装需求也随之增大。但是包装的设计过程仍然有许多不够完善的点。运营项...

  • 12-12 交互设计总结

    交互设计与用户体验设计: 交互设计是由页面、icon、文字基本要素构成的系统流程,。在软件设计时,要考虑用户的使用...

  • 12-09交互设计和用户体验设计

    交互设计和用户体验设计 App和web交互设计是有页面、icon、文字三种基本要素构成的系统流程交互设计的概念路径...

  • 超实用的设计工作流程+神器推荐

    干货,点击跳转:畅快高效!超实用的设计工作流程+神器推荐

  • 交互设计与用户体验设计

    app和web:交互设计是由页面、icon、文字着三种基本要素构成的系统流程 交互设计概念 路径 效率 行为 1、...

  • 交互设计与用户体验设计2

    交互设计是由页面、icon、文字基本要素构成的系统流程,。 在软件设计时,要考虑用户的使用路径,从用户点击图标的时...

  • 素材网站

    图标设计 图标学习方法 绘制功能性图标 系统学习功能图标 icon尺寸 icon规范 icon画法 金刚区设计规范...

  • ui复习总结-icon设计及banner图设计思路归纳

    (1)icon设计及绘制注意要点:①icon设计的产品背景→目标人群(目标对象,产品差异化)→设计思路(如何吸引用...

  • icon设计

    1. 类型 (1)应用、网站的标识(2)具有明确含义的功能标识 2. 样式 (1)线性图标 ---- 纯色描边、多...

网友评论

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

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