抹茶6.5版本

回头看抹茶之前的版本,太多的不足,就算是现在的修改,也是问题多多。

现实的项目总会有各种掣肘,想要效果好,需要各个部门的相互配合,调性上的整体配合。

我会在这篇文章中,阐述我的设计理念,以及遇到的各种问题。

先看图吧,下面的图设计稿为1080p.方便展示改为720p

上图的效果为抹茶6.5版本(最后上线版本,有些删减),主要的修改是把之前放出来的分类收回去,把整体色调改成白色为主,各种图标以及细节优化。

在展开谈谈为什么这么做之前,我要说个背景,这次版本修改是设计推动的。

 

分类收回去:

分类也只是获取内容的一种方式而已,作为美妆垂直类应用,精华的内容pgc不会太多,过多的分类展现出来,只会让用户困扰,让查找更复杂

这个想法,起初遭到强烈排斥,产品总是认为都展现出来,才会方便,直到做了用户测试之后才逐渐改变认知。

 

颜色变化:

之前的版本会有大量的绿色出现,改成白色有2层考虑:

1:绿色在表现女性时尚方面天生有缺陷,改成白色为主,可以一定程度上规避此问题

2:随着设计的发展,表现内容更重要,过重的绿色,在很多情况下是没必要的。

但是我们的用户并不排斥绿色,绿色不能改动,所以还是以营造清新感为主要方向。

 

 

其他细节:

采用线面结合风格的图标,适合营造清新感,按照茶妖吃蘑菇的故事设定,来设计首页图标

顺便把长期想改的空白图标改成更有情感化的茶妖。

 

茶妖

坦白的说,茶妖有点像龙猫,且之前的形象有点复杂,所以茶妖也做些变化

 

抹茶logo文字变化

 

规范化工作

随着设计的深入,各种规范化势在必行,当然这里展现的不是这个版本才做的。是慢慢积累出来的。

 

用户测试 

6.5在设计完大方案之后,做了新老用户测试,形式包含线上问卷,以及线下用户访谈,

样本量约有79位。线上测试问卷用到了模拟的测试视频,最后白色方案胜出。当然测试内容不仅仅是这2个视频,也包含了用户

日常使用习惯,对于美妆的看法等等大量内容。选择白色方案者,认为更清晰好找。

下面的链接是当初测试的视频之一(有点卡)

用户测试视频(视频比较卡)

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>