新闻资讯

当前页面:首页 > 资讯动态 > 设计干货丨手把手教你改一套图标

设计干货丨手把手教你改一套图标

图片



今天小明老师分享一个APP界面图标的改版过程,先看下改版前后的效果对比。


图片


01、找问题


原版图标来自训记APP,是一款健身产品,也是UI40班学员作品集选中的项目之一。其底部Tabbar图标的设计风格老旧、视觉大小不统一、造型相似度较高(主要体现在“训练”、“历史”、“我的”这三个图标中)。


图片


接下来,我们便针对这三点进行视觉优化。


02、重新定义设计风格


在阿多比的UI课程中我们说过,图标设计的着力点主要包括“风格”和“造型”两个层面。我们在拿到一组图标主题后,首先需要根据产品定位和改版目标确定情绪板关键词,然后推导设计风格。


此次改版我们希望产品能体现出年轻、力量、激情的感觉,原版的设计风格老旧,肯定不能继续沿用,主色的蓝色也无法满足需求。于是,我们便结合橙色的色彩情感,以及想要通过“橙+黑”来塑造强对比视觉效果,选定了最终的配色方案。当然,期间我们还做了以绿色为主色的设计,最终效果会在文末给大家呈现对比。


图片


确定好颜色后,还需要确定图标的表现形式,这里可以参考一些优秀的设计作品。在参考时,需要注意Tabbar图标是有两种状态的,选中与未选中,所以我们也需要明确两种表现形式的参考。例如:选中前是单色线性、选中后彩色面性;选中前是灰色双色线性、选中后是彩色双色线性等等。下图中展示的部分参考截图就是4种不同的表现形式。


图片


经过一番对比、思考、拆解,最初我们确定了上图三的表现形式,但觉得“橙色+黑色”视觉对比体现不强,便改为现在的“选中前灰色双色线性、选中后彩色双色线性”。


图片


设计风格确定好了,就可以动手开干了,前面提到的“视觉大小不统一、造型相似度较高”也会在操作过程中进行优化。


03、训练和动作图标


首先确定图标的造型,我们通过关键词联想,将抽象的图标主题转换为具象的事物表现。


由训练我们会联想到运动的人、训练器械,由动作也会联想到运动的人和训练器械,这时就要尽量避免重复了。训练主要是用户开始训练,“人”是关键,而动作主要是罗列训练动作的库,单纯的训练动作“器械”是关键。所以它俩的图标造型便有了区分。


图片


再来做个对比,一开始的方案并不是上图那样,而是这样:


图片


和上图的区别在于,一开始的浅灰色线条和深灰色是同样粗细的,这样就导致图标缺少呼吸感,整体显得很笨重,于是我们才把浅灰色变细了一些。


动作的图标也经历了很多版本,过程稿如下:


图片


方案1高度较小,和训练图标放一起时视觉大小难统一,淘汰;


方案2做了倾斜,但是其他图标是没有做倾斜的,训练图标也不便做倾斜,淘汰;


方案3加大了中间杠铃杆的高度,整体负空间小了,但是显得太笨重,也不符合杠铃的实物逻辑,淘汰;


方案4改成一条直线,符合杠铃的实物逻辑,但是上下负空间太大,造型的比例大小看着很奇怪,也淘汰。


所以大家可以看出,造型的细节差异,对图标的气质影响是很大的,大家在绘制图标时一定要多尝试。


04、记录图标


接下来是记录图标,由记录我们会联想到加号、纸笔、文字、文件夹等事物,他们都和记录有关,出于造型简洁的考虑,我们选了笔的造型,来看过程稿。


图片


记录图标经历的过程稿不多,我们先说方案3,纸张、本子,是最容易想到的造型,方案3的整体轮廓完整度很好,四平八稳,但缺少个性,而且和第四个图标“历史”很容易雷同,所以被淘汰;


选择笔的造型,方案1只有一只笔,过于瘦高,视觉大小难以和训练平衡(这里强调一点:训练图标整体呈面性的大小是很大的,后面四个图标在绘制时都需要重点考虑和它放在一起时的平衡问题);


方案2将笔做了倾斜,但是右下很空,于是加了一条横线平衡版面,但笔造型的中间显得太空,需要添加元素,于是也被淘汰。


最后的定稿见下图。


图片


05、历史图标


在训记APP中,历史模块主要展示的是用户过往的训练历史记录,基本为一些数据图表展示,我们选择什么造型好呢?很多同学优先想到的就是类似下图这些造型:


图片


这些造型基本都是和时间、日历、日期相关的,缺少个性化的设计,其中第3、第4、第5个图标,我们给造型画一个矩形外框来看看。


图片


可以看出,三个图标外部都存在一定的负空间。我们在造型的选择上,负空间肯定是越小越好的,这样可以让造型更加饱满。那结合历史模块展示的都是图表数据,由图表数据联想到“折线图”,便有了下图的最终效果。


图片


06、我的图标


最后一个个人中心,这个图标的绘制很多设计师会采用下图这些样式去做:


图片


这样的个人中心单调乏味,没有个性,并且外部轮廓不够整体性,负空间也较大。


我们绘制个人中心时的着力点可以放在品牌差异化的塑造上,如果APP是有IP形象的,可以结合IP形象去绘制,比如下面这些UI40班学生的作品:


图片


当结合IP形象以后,自然就有了差异化和个性化。那如果产品没有可用的IP形象或者Logo辅助图形,我们就尽量选择一些造型比较稳、负空间较小的图标去做。


图片


07、小结


再回顾一下改版前后的效果对比,以及其他配色方案的对比。


图片

图片


不同配色方案的效果对比,橙色+黑色,视觉效果最明显,蓝色虽然也可以,较为平淡。


那我们如何改版界面图标呢?大家可以按照以下步骤去做:


Step1-确定设计风格


方法就是大量的看和“刻意采集”,选出合适你产品定位和改版目标的风格。


Step2-绘制图标造型


根据图标主题,做关键词联想,将抽象的主题变成可绘制出来的具体事物,实在没有思路的时候,也可以在网上的开源图标库中去寻找造型参考。


Step3-做差异化设计


找到的或者联想到的图标造型,需要有属于设计师自己的变化,可以结合前面选定的设计风格和整套图标的观感,去做个性化的设计,尽可能地塑造出图标的差异化。


Step4-最终优化调整


所有图标画完后,需要检查图标的识别性、一致性、协调性、品牌调性、图标气质等,做出最后的优化调整。


好了,今天的分享就到这里,我们下期再见。 


PS:阿多比设计UI45期12月20日训练营,期待大家的加入!


图片


设计干货丨手把手教你改一套图标

阅读量:525