为什么做得图标这么酷炫，总监却说不合格？

　　正在尺寸有限的挪动端界里上，小小的icon能够愈加简朴下效的表达寄义，而且给用户准确战友爱的指引。以是关于UI设想师去道，取icon们相爱相杀无疑是天天一样平常。上面便去总结一下，怎样使我们设想的icon表意明晰、契合尺度。

　　一. 怎样表意明晰：绘甚么?

　　1. 正在差别的场景挑选差别的气势派头

　　今朝正在支流App内，icon年夜多利用较为简约的扁仄化设想气势派头，那些icon有的由线组成，有的由里组成，借有的是线里分离而成的。下文里我将次要以融360App中的一些图标去举例。

　　尾页上的第一部门是次要营业的一级进口，第两部门是两级进口也便是各类小东西。正在一级进口上我们挑选了彩色的里性icon，而且正在反黑的图形上减了一些量感，为的是让那组icon更凸起。上面的两级进口的icon，正在层级上要强于主进口，以是我们挑选利用杂色的差别通明度的里去构成那些icon。

　　图左中list里的icon是做为展现功用，而非进口，因而我们皆接纳了线圈+彩色里状的小图标;图左为账户页，正在那个场景中我们更期望用户留意定单的形态，也便是写了数字的角标，以是把图标做成了线型的，全部页里也会愈加清新。

　　2. 不异的功用要挑选不异的元素

　　固然正在差别的页里战场景中，icon能够用差别的气势派头去表示，但当他们暗示不异功用的时分，记得利用一样的视觉元素，再套受骗前页里的气势派头。那样能够连结同App内图标元素的同一性，低落用户的进修本钱。比方正在差别页里呈现的公积金相干图标，用的皆是一样外形的小楼。

　　3. 关于功用型icon去道，最好挑选用户熟习的icon元素

　　关于App中的操纵功用，以上皆是被无数产物重复操纵的，曾经商定雅成的icon，除此以外借有「放年夜镜=搜刮」「斗室子=尾页」等等，用户曾经耳濡目染的承受那些icon的意义，并出有进修本钱，以是利用那些熟习的元素是非常须要的。

　　4. 关于进口或展现型icon去道，我们要挑选次要的元素，表意要简约，能够恰当遐想

　　正在那些例子中，「信誉卡分期」必然要绘卡片吗?「四周银止」必然要绘银止吗?「网贷评级」必然要绘网贷吗?我们借是会详细状况详细阐发，对枢纽词做一些弃取。正在那里做为一个东西的「四周银止」的功用面正在于定位，而非夸大银止自己，以是最初借是挑选了定位标记去表达了那项功用。假定要设想的进口换成「四周银止」+「四周阛阓」+「四周减油站」等等，那末次要功用便酿成了搜刮四周差别的场合，那种状况下我们便会挑选绘银止、阛阓战减油站了。再好比「公积金查询」「社保查询」皆是查询，「征疑陈述」「出入程度陈述」皆是陈述，同理我们不成能给谦屏的查询功用进口皆绘一个放年夜镜，也不克不及给一切的陈述进口皆绘一份陈述，为了表意简约、凸起重面，正在那里我们挑选兼并同类项，偏重表达每一个功用差别于其他的面。

　　许多时分我们要表达的内容其实不具象，正在那个时分便能够停止恰当的遐想，来绘一个相干的物体。好比「公积金」便很笼统，可是它取屋子有闭;「记账」是个行动，可是「帐本」是个工具，那样表达起去便简朴多了，也更密切。

　　5. 附上案牍：表达充足精确，消弭了解上的差别

　　我们以Airbnb的App底部icon去举个例子，他们选用了一个很故意思的小树叶icon，当出有案牍阐明的时分，念必一千个用户内心有一千个哈姆雷特，各人城市有本人的了解。以是道icon是帮助的表达，笔墨才是尺度谜底，除前里所道的群众完整生知的icon，其他的最好附上响应案牍，免得用户了解偏差。

　　6. 停止可用性测试

　　用户能否能精确的了解所用的图标?用户能否需求停止推测战测验考试?用户可否记着那些图标?须要的时分借是该当把用户闭小屋里看看他们的反响。

　　两. 怎样契合尺度：怎样绘?

　　1. 单色icon多用布我运算：只要一个图层便利前期调解，便利交代利用。

　　举个例子，右边的乌色icon的中圈是用了描边描出3px的宽度，那样招致图层变多，修正起去很费事，并且描边的圆角很易掌握，假如念把中圈切一个断心将会更费事。左边皆用布我运算的icon相对整齐很多。

　　编者注：让您快速把握布我运算的小教程→《PS热点教程!教您5分钟快速画造超水的MBE气势派头图标》

　　2. 像素要对齐

　　3. 适宜的巨细：包管一组图标视觉上巨细分歧

　　绘icon之前，我们能够把暗示最年夜尺寸的框绘出去，正在那个框框内，icon没有要绘得太谦，要有恰当留黑。同时，为了视觉上的同一，圆要略年夜于圆形。逢到倾斜的图标，能够先正着绘好了再扭转角度。

　　4. 捉住有特性的小细节

　　简朴去道便是，包管线的细细、圆角的巨细分歧，图形能否朋分、线能否有断面等细节也要大致上连结分歧。那样的一套icon是有团体性的，气势派头才算同一。

　　编者注：那末，如何做出一套气势派头同一的icon呢?办法正在那 ↓↓↓

　　《用品牌基果法做图标设想，那是初级UI设想师才会的脚法》

　　《用品牌基果法做图标设想，初级UI设想师才会的脚法!(晋级篇)》

　　《从整根底到及格，我总结了那5个图标设想真战办法》

　　三. 小结

　　沿着UI的开展趋向，icon的气势派头颠末了各类百般的变化，从拟物到扁仄、从静到动，有的化繁为简，有的愈加多变有本性，不外原理如故是万变没有离其宗的。icon设想看似简朴可是讲求一面很多，既要表达精确，借要设想准确，信赖一波一波的设想师皆是正在真战中摸爬滚挨过去的。