图标有以下分类(Classification)：系统(system)图标，操作(operate)界面图标，手机主题图标。UI设计学习UI设计师的涉及范围包括高级网页设计、移动应用界面设计，是目前中国信息产业中最为抢手的人才之一。今天我们来改一组移动端APP图标。同学们在设计(Design)界面的时候，总是在设计icon这个板块出现很多问题，比如：一些同学在做首页tab bar上的icon时出现一些比较基础的问题：icon不清晰，或者是描边不统一，图标排在一起忽大忽小，不稳定（解释:稳固安定；没有变动)，设计风格(style)不统一等，接下来我们用一个案例来带着同学们一步一步了解icon。
文章是根据UI设计(Design)学生在练习是经常犯的错误所写，主要针对新人设计师，有大神有其他观点欢迎分享。
如图：图1为修改之前的icon，图2为修改过的icon
首先我们来说说图标在设计的时候要遵循的原则：
1 语义明确
2 刻画精细
语义明确：要做到icon与文字的含义相匹配，不能出现词不达意的状况。刻画精细要做到的是：首先就是不能出现虚边，其次是颜色，大小，描边，圆角，透视，角度（angle)都要统一。
基本的原则和理论我们知道了，但是要怎么应用到具体的icon中呢？接下来我们通过几个工作(job)流程来充分应用一下这些原则。
第一步：语义明确
语义还不明确的情况(Condition)下就开始细化，会做很多无用功，我们做一个系列的东西一定要看一下整体是否自洽，是否表达了文字要表达的含义，我们看一下原稿，图1：
标签栏分为五个板块：活动，发现，圈子，商城，我的。移动端UI设计不单单从事美术绘画，更需要对软件使用者、使用环境、使用方式进行定位，并最终为软件用户服务。UI设计师进行的是集科学性与艺术性于一身的设计，他们需要完成的，简单说来，正是一个不断为用户设计视觉效果使之满意的过程。这款app是一款户外野营类app，所以第一个活动的icon有点不符合产品调性，所以需要更改；圈子这个板块的图标是是一圈一圈的对话气泡(gas bubble)，从视觉上和发现的板块雷同，需要更换；商城板块的icon是一个带着帽子的人头，虽然符合产品调性，但是没有表达出商城的含义，需要更换。如下图为更改之后的icon家族：
第二步：从栅格开始
我们选择(Select)了更加适当的icon，之后开始更加严格的标准icon。这就需要一个辅助工具：栅格。移动端主要是安卓和苹果，所以我们的栅格体系也有两种，在做设计(Design)的时候根据产品(Product)调性自主选择一套适合自己产品的栅格体系。下图为栅格体系：
图1为安卓栅格，图2 为iOS栅格
我们把icon放到栅格中检查icon是否大小一致，如图：
如上图，商城的icon稍微超出了栅格的边界，记住,你不需要时时刻刻都严格遵守栅格和规则，栅格是帮助你创建统一的icon家族,但是如果需要在创建更好的icon和严格遵守规则之间选择(Select)的话,请打破原则,只是做的时候谨慎些。
第三步：像素级的精确
当创建小尺寸icon时,像素级对齐是非常重要的。小尺寸icon的抗锯齿渲染边缘会看起来模糊。怎么做到清晰呢？在ps里我们要挑出设置(set up)面板，把矢量对齐像素网格勾选上：
不仅要做到矢量与像素网格对齐，还要让矢量与矢量对齐，在PHOTOSHOP里我们绘制矢量图标会用到布尔运算，一定要注意图形与图形之间的关系，相切，相交，都要对好位置（position )，这是一个设计师精准和专业(Specialty)的体现。UI视觉设计一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来极大的风险。如图：布尔运算的运用
布尔运算：矢量与矢量对齐
第四步:角度（angle)
同学们经常在角度（angle)这里没有引起重视，画的图标会有小数点或是有个位数的角度，这种情况在切图和前端工程师对接的时候会有很多问题，所以图标角度最好是30度，45度，60度，90度，120度这些有秩序有规律的数值，不要出现小数点和个位数的情况，形成这种制造(zhì zào)规律和秩序的习惯，对设计(Design)师的进阶有着至关重要的作用（role）。如图
第五：使用统一的设计(Design)元素和符号：
在一套icon中加入同一元素,可以增进统一性，使单个的icon成为一套图标家族，接下来我们给icon的拐角处增加了圆角，这个特征不仅使这些icon成为系列,也增加了特征。
统一元素
总结
我们分享了如何优化APP图标的基础方法(method)。任何人都可以通过练习学习并掌握。创建好的icon要从产品调性出发,再不断细化出产品特色(刻画精致),在一个或一套icon中应用(application)共同元素使你的icon保持内外统一。一旦你掌握了技术方法,你才会更加关注如何真正使你的icon变得优秀（解释:出色、非常好)。
评论(0)