公牛|7个步骤，让你更好完成图标设计( 二 )
文章插图
●图中的图标就很好继承了logo的特征和风格
文章插图
●但有的也只是普通的界面辅助，风格和样式并不一致
三、图标的绘制能够绘制出高质量的图标是每个UI设计师必备的能力，本次我们以功能图标为例，为大家展示具体的几个绘制步骤和要点，希望帮大家在细节上避开影响图标精致度的一些小细节。
第一步：建立图标网格
文章插图
功能图标因形态结构各异，难免存在尺寸不一的情况，必须考虑其整体视觉的协调一致，最好的办法就是建立图标网格，也可以称为图标盒子，当图标形态分别为长、方、圆时，有一个合理的比例限制。
文章插图
【 公牛|7个步骤，让你更好完成图标设计】●将常见图标形态约束在图标盒子内
当然，网格不是绝对的，要学会灵活运用，当与个别图标形态无法完美匹配时，也不必拘泥，一切以达到视觉和谐为首要。我通常会在图标网格外围预留一个安全区域，可以规避切图出现不完整的情况。
第二步：具象功能有了网格，第二步则需要我们根据功能，找到与之对应的实物形象；如笔记本是记录，电话是通话，时钟代表时间，日历代表日期等等。
文章插图
这些功能相对比较容易找到现实中的实物，如果是比较抽象的功能呢？就需要我们发散思维，找与之相近含义的事物。如隐私功能，隐私是没有实物的，但是我们可以通过“隐私”这个词延伸：不公开的、隐藏的、锁起来的、被保护的，继续根据这些词延展：就可能是密码、盾、锁、遮眼等等。
文章插图
时刻记住一点：用大众都能理解的物体形象去表达。如果用户看到某个图标过于复杂，需要反复思考它代表的含义，也无法预测点击后的结果，那这个图标就失去了提效的作用。
第三步：简化结构有了功能的具体形象，下一步就是思考如何让图标变得更简洁易辨识。
文章插图
●毕加索《公牛》
文章插图
毕加索创作《公牛》时，从初稿到最终成品历经了11个版本，最后只用寥寥几条线来勾勒，但我们依然能一眼认出牛的形态。绘制图标也一样，需要我们思考如何省略无用细节，化繁为简，提取他们的主要特征。
第四步：善用布尔运算有了简化的图标形象，我们接下去应该思考如何让图标变得更为规范耐看。
文章插图
●如桃心图标，就是两个简单圆角矩形组合而成
文章插图
●桃心图标，也可以做的更圆润
文章插图
●不同组合下的布尔运算，图标形态特征也会不一样
这一步的诀窍就是尽可能使用基础图形去组合拼贴，这样做出来的图标，尤其在适配不同尺寸大小切图时不易拉伸变形。
第五步：处理细节统一性
文章插图
●风格：线性、面性统一
推荐阅读
- 怎样在微信上开店卖东西 如何开微店详细步骤
- 如何装修网店详细步骤 淘宝网店装修教程
- 五金店|深度挖掘用户需求？按这五个步骤做
- 国产品牌|realme仅用37个月加入一亿手机出货俱乐部，GT Neo2新品亮相
- 电脑版钉钉下载步骤 怎么在电脑上下载钉钉
- emoji|苹果在iOS15.4测试版中添加了37个新表情符号
- 淘宝开直通车的详细步骤 淘宝直通车优化
- 简述微信营销的具体步骤 微信营销流程
- 如何装修网店详细步骤 如何装修淘宝店铺
- 抖音小黄车开通步骤 抖音购物车怎么开通