四步设计完美图标

2021-10-22 PM 02:10.来自UI中国

(阅览)Read 3312

(调整字号)Size

16px 14px 12px

线性图标设计方法

很多设计师认为线性图标不重要,设计前在花瓣、iconfont、P站一通搜,然后找到几个看起来合适的改一改就拿去用,这种方式虽然不错,但是产品设计完成后平平无奇,甚至和其他产品“撞脸”。


本文从小白到超神共分为四个部分:


1.基础构成

2.产品属性

3.统一规范

4.品牌基因


一.基础构成


1:思考文案是否有可以直接表达的方式。


例:“信用卡”“购物车”“订单”此类在现实生活中有已存在的物品,我们就可以找到图片,直接进行简化制作。



但是不能看到什么画什么,导致在制作图标的时候没有重点的勾勒,作为图标,主观美化和简约也是很重要的。



2:文案拆分再组合


例:“发现新鲜”“学习计划”“推荐有礼”此类生活中没有对应的物品的,我们可以将关键词拆分。


推荐有礼=推荐+礼品

推荐:人给人推荐

礼品:礼盒、礼袋


推荐(以人为主的推荐—得到人物图标)

礼品(生活中的礼品—得到礼盒或礼品袋)

将其结合



二:产品属性


“图标的情绪”



为什么只看脸就能准确地区分儿童与成人呢?因为儿童的面部圆润,五官紧凑,而成人的面部轮廓比较硬朗,五官相对较宽松,在图标的绘制上也是同样的道理。



同一个表达形式,不同的描边粗细和圆角大小往往能使图标传达出不同的情绪。



以下是同一组图标,改变其描边粗细和圆角大小后体现出的不同面貌。



风格:通用

描边:中     圆角:中



风格:卡通、儿童、有趣

描边:粗     圆角:大



风格:高端、商务、金融

描边:细     圆角:小



风格:可爱、年轻、女性

描边:中     圆角:大



风格:潮流、年轻、个性

描边:粗     圆角:小



三:统一规范


图标的基本形状
描边粗细
圆角数值
内外环比例
“破形”统一


1.图标的基本形状统一


大多数人可以很轻松地将物品概括成线条并将其绘制成图标,但是如果没有规范地绘制,就会导致一组图标高矮胖瘦参差不齐,视觉上看起来很乱。



APP的图标大致分为圆形、正方形、竖长的矩形、横长的矩形;



在绘制图标前,要先确定基本的几何形,尽量让图标保持一种形状。



但是产品中图标的功能性通常不由UI设计师来决定,我们会面临不同图标的基础属性和功能性相差较大,无法将所有图标统一成一种几何形的情况,这个时候我们就要通过统一视觉大小,将不同的几何形保持视觉比例一致;



可以借助“图标盒子”作为约束,帮助我们更好地统一图标的视觉大小。



使用图标盒子时不用严格按照几何形约束,可以适当的调整下距离。