Icon 实用设计流程

用户头像
北京/UI设计师/4年前/172浏览
Icon 实用设计流程

Icon 实用设计流程,初级设计师必须掌握!

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


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


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


一、功能配图使用

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

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


二、功能按钮

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

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


设计流程

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


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


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

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

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

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

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

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

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


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

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


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


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


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


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


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


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


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

0
举报
|
3
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】30个图标
【新年UI图标】影音icon
高级感金属拟物 UI设计组件库
我的钱包-UI界面设计-app
UI通用设计素材1
【新年UI图标】汽车icon
新能源APP应用UIKit
科技医疗透明柜UI界面设计
新拟态风格 UI设计组件库
拟物风质感写实UI卡片合集源文件
UI界面 组件
钱包ui模板
【新年UI图标】秒杀icon
户外旅行飞机情侣假日出行
盲盒APP UI设计
【新年UI图标】会员icon
手表表盘UI系列
【新年UI图标】钱包icon
高级表盘系列UI源文件
UI 登录界面设计模板包
3D卡通UI界面图标可爱插画免扣素
UI应用平面图标
智能家居中心 简约 UI设计组件库
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册