2019-10-06 UI设计培训

UI设计培训 | 制作与产品相符小图标的思路

精美的小图标对于UI设计培训过程中的的设计师来说都是不是很难的事情,但是做到与产品相匹配,气质相符。这个就相对比较难了,我们以“米家有品”为例。希望能够拓宽大家的思维。可能有的同学入职到一个从未接触过此类格调的公司,我们可以采用这种方式分析,即可快速把握公司的设计风格。

(以下所有观点是通过视觉推敲,并不代表设计原来作者的想法,只是希望能够给大家提供一种思路)

加入现在有了产品的形象我们要去他的小图标,我们该怎么办呢?

1.了解产品

我先去百度了一下米家有品的百度词条 

其实这些东西,是你在制作一个产品时候应该最先去接触到的,以此敲定视觉走向。

2.提炼出来关键词

家居、品质、品味,其实我们在这里能够找到很多的关键词,我们只需要找到最重要的即可,其他关键词,只作为辅助。

 3.查看品牌形象

我们通过以上关键词,感受到的视觉效果也许是这样的,相反我们也可以根据现在的视觉效果,反推到蕴含的元素。 

UI设计培训

其实我们不难看出,配色上面以暖色系家居的感觉作为主色(也是产品的主色),让用户能一眼判断其氛围感觉,接下来采用类似仿宋字体的形式去做,中文的字体的印刷版字体本身就有一种精致细腻的感觉,相对契合。(我们在这里不分析图标里采用方式是否优秀,我们推敲他们的关键词权重方向)

4.列举常规制作方式

我们以首页tab图标为例,我们需要制作的图标有首页、分类、品味、购物、个人。

用最直接的icon语言,我们在一些设计图标的网站上我们可以找到一些参考。

确定形式:



 图标采用常规做法也是用户最容易识别的形式,当然图标的风格可能会相对比较弱些。(两者无高下,看产品需求传达的倾向) 

5.尝试变化元素

我们分析一下。真正在“米家有品”app中使用的图标。我们可以把前三个为一组,后两个为一组。


“首页”并没有采用常规图标,而是选择用的寓意元素是门:正好对应家居。等于给用户提示一种进去家里的所有选择都会在这里找到。

“分类”采用的是一种家居里面的柜子作为元素:笔者认为,这个是以同样功能寓意相似内容,特别明显的区分。

“品味”这个图标呢,是以水壶作为元素:格调上稍微有点低,但好处是呼应前面门和柜子更利于整体氛围的打造,

后面的车“购物车”“个人”都是采用常规的元素。 

UI设计培训


这两个图标属于使用功能,前面三项属于信息展示,手法上也进行了区别。

6.确定风格

设计制作的时候一般需要大量的参考。设计不是凭空捏造。我们平时的时候可能就收集很多设计风格不同的图标(如下图) 



通过以上的四种风格的APP小图标,我们从分析产品的角度,到分析视觉的角度,都可以明确的看出来不够得体。

7.强化分析

由于这是一个相对大众类型的app,我们可能首先考虑到更加亲和力的表现风格。从格调上来讲,审视产品这款APP面向的用户应该是对生活品质有一定的要求,由此断定更重要的是格调。取舍的时候,需要把精致感体现更佳强烈些,在方寸之间,弧线和圆角是很难体现出来精致的感觉。 

UI设计培训


我们再去找一些其他风格的图标,这套图标的风格感觉更加接近,参照这种风格,我们就能得到大致状态,在添加选中效果,我们便得到最终的状态。 

UI设计培训


心得总结:

1.设计的东西一定要围绕产品。

2.设计不是凭空捏造,需要参考。

3.设计要的主要任务是权衡利弊。


以上所有思考取舍,或多或少存在一定的片面性,笔者并不认为所有的取舍都是非常正确的,只是希望大家能通过以上思维方式理解如何契合产品的做设计以及看到好的设计如何分析的思路。

今天努力为了明天,明天也就注定值得铭记。O(∩_∩)O加油


林老师:0371-5556 6060