[导读] UI图标设计是UI设计中的基础知识,有的同学在设计界面的时候,总会在ICON版块出各种问题。比如:icon不清晰,描边不统一,图标排在一起忽大忽小,不稳定,设计风格不统一等,接下
UI图标设计是UI设计中的基础知识,有的同学在设计界面的时候,总会在ICON版块出各种问题。比如:icon不清晰,描边不统一,图标排在一起忽大忽小,不稳定,设计风格不统一等,接下来南京UI设计培训班用一个案例教程来解决APP ICON 图标的统一绘制与优化。
如图:图1为修改之前的icon,图2为修改过的icon
首先我们来说说图标在设计的时候要遵循的原则:
1.语义明确
要做到icon与文字的含义相匹配,不能出现词不达意的状况。
2.刻画精细
要做到的是:首先就是不能出现虚边,其次是颜色,大小,描边,圆角,透视,角度都要统一。
基本的原则和理论我们知道了,但是要怎么应用到具体的icon中呢?
第一步:语义还不明确的情况下就开始细化,会做很多无用功,我们做一个系列的东西要看一下整体是否自洽,是否表达了文字要表达的含义,我们看一下原稿,图1:
标签栏分为五个板块:活动,发现,圈子,商城,我的。假设这款app是一款户外野营类app,所以第一个活动的icon有点不符合产品调性,所以需要更改;圈子这个板块的图标是是一圈一圈的对话气泡,从视觉上和发现的板块雷同,需要更换;商城板块的icon是一个带着帽子的人头,虽然符合产品调性,但是没有表达出商城的含义,需要更换。如下图为更改之后的icon家族:
第二步:从栅格开始我们选择了更加适当的icon,之后开始更加严格的规范icon。这就需要一个辅助工具:栅格。移动端主要是安卓和苹果,所以我们的栅格体系也有两种,在做设计的时候根据产品调性自主选择一套适合自己产品的栅格体系。下图为栅格体系:
图1为安卓栅格,图2 为iOS栅格。我们把icon放到栅格中检查icon是否大小一致,如图:
如上图,商城的icon稍微超出了栅格的边界,记住,你不需要时时刻刻都严格遵守栅格和规则,栅格是帮助你创建统一的icon家族,但是如果需要在创建更好的icon和严格遵守规则之间选择的话,请打破原则,只是做的时候谨慎些。
第三步:像素级的精确当创建小尺寸icon时,像素级对齐是非常重要的。小尺寸icon的抗锯齿渲染边缘会看起来模糊。怎么做到清晰呢?在ps里我们要挑出设置面板,把矢量对齐像素网格勾选上:
不仅要做到矢量与像素网格对齐,还要让矢量与矢量对齐,在ps里我们绘制矢量图标会用到布尔运算,一定要注意图形与图形之间的关系,相切,相交,都要对好位置,这是一个设计师精准和专业的体现。如图:布尔运算的运用
布尔运算:矢量与矢量对齐
第四步:角度。角度也是大家会忽略的一个点,在切图和前端工程师对接的时候会出问题,所以图标角度最好是30度,45度,60度,90度,120度这些有秩序有规律的数值,不要出现小数点和个位数的情况,形成这种制造规律和秩序的习惯,对设计师的进阶有着至关重要的作用。如图
总结
南京UI设计培训机构为我们分享了如何优化APP图标的基础教程,任何人都可以通过练习学习并掌握。
免责声明:
丝路教程网的部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,如权利人发现存在误传其作品情形,请及时与本站联系。
app icon图标的统一绘制与优化
的相关文章- 用AI设计制作毛线编织纹理的icon图标
- 微信语音骗局,APP使用引发我们的思考
- APP设计中创意十足的Loading动效
- 移动app设计当中常见8种基础布局方案
- 四大维度全方位剖析APP分享功能
- APP设计技巧之减少用户等待感
- UI交互设计案例之动效UI设计
- APP学习干货之爆品金三角法则
- 从零开始学习APP系列的切图标注
- APP设计教程之弹框设计的技巧
- 蛋糕UI图标教程
- 三款APP设计交互当中的小细节
- 欣赏一些漂亮而生动的APP引导页界面
- 移动端app极简设计原则
- 如何应用黄金分割比例到APP界面设计
- APP细节考量的四个方面
- 如何设计持续时间场景的APP页面
- 国外优秀的app界面设计案例欣赏
- APP设计同质化如何破解
- APP原型设计的三种表现方式
- 直戳人心的APP设计文案
- 一组超可爱的移动APP表情包设计
- 欣赏一组UI图标类的动效设计稿
- 10种最经典的APP UI界面设计模式
- 如何通过颜色搭配来布局移动APP界面和排版设计
- 总结一些打动人心的APP设计点
- 欣赏一组高品质的简洁大气的APP设计
- 如何应用黄金比例工具来设计APP界面
- APP交互设计实用的触屏手势矢量素材
- 欣赏六款手游APP的交互案例和UI设计风格
- 如何设计出简单的APP图标组合
- 了解APP空状态下UI界面设计思路
- 了解移动端APP的设计趋势
- 分享一组美食APP设计素材
- HeyU Mobile App UI界面PSD源文件
- 2017年app创意设计作品