UI设计教程之app icon的绘制及优化

图标有以下分类(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
分享到:

评论0

请先

社交账号快速登录

 
QQ在线咨询