ibeauty项目的思考方式

2年前发布

原创文章 / UI / 观点
晨晨汐儿 原创,如需商业用途或转载请与晨晨汐儿联系,谢谢配合。

前几天,我上传了ibeauty项目视觉展示图,对这个项目是如何展开思考的,并未做总结,经过这几天的整理,初步将我的想法总结如下

想知道这个事情的“前世今生”,请点击链接

http://www.zcool.com.cn/work/ZMjc2NDE4NTY=.html

 

我将我的思考方式用“用户体验的五要素”来展开描述:

 

1、   战略层(四W发现需求)

 

A:Who?目标用户

    我们面向的用户是谁?

 

B:Why?商业价值

   为什么要做这款产品,我们能为用户解决什么问题?


C:What?商业模式

   我们从中可以获得什么?

 

D:How?商业壁垒

   如何去解决,资金、人脉、团队、技术等是什么样的?


1.1 市场分析

 

1.1.1需求是如何出现的?

 

因为我本人是一个比较注重肌肤保养,注重颜值的人。以前我有定期去做面部SPA的习惯、也会因为自己的敏感肌肤受到换季就要过敏的困扰,用了不合适的面膜或者护肤产品就会出问题,同时,我也是一个爱臭美爱用美颜拍照的人。

 

有一次,我无意发现一款可以测肤的软件,于是我试着玩了下,于是有了接下来的想法 ……

 

如果有一款软件,能够检测我们的肌肤状态并给出科学指导性的护肤方案,是不是可以解决肌肤改善的问题呢?


继而扩充,我为何会想改善我的肌肤问题呢,因为我爱美,像我这样爱美的人多吗?她们是通过什么方式来让自己看起来更美呢?

 

于是我开始观察周围的人……

 

有时,看见一个姑娘走过来,总觉得她那里不对劲,口红的色系太浓了,眉毛画得有些和她的五官脸型不搭 ……  她们本来是想通过化妆来提升颜值的,可是没有找到适合自己的化妆方案。她们需要一个指导方案。

 

在我去做SPA的时候,我观察到,像我这样愿意把钱花在颜值这个事情上的人还是很多,20岁~60岁的人都有,往往是40岁+的人居多。

 

有时,我们经常会看到微整失败的各类新闻,尽管如此,还是有很多姑娘愿意去尝试微整,开个眼角,做个双眼皮,以20岁+的人居多。

 

总之,有的人注重底子的肌肤保养,期望冻龄;有的人注重化妆技巧,让自己看起来美;有的人,也许更大胆些,做一些微整,来让自己五官更美…

 

其实不管哪种方式,都是想让自己美,或者更美,或者留住美…

 

那么,我们是不是可以从这个为出发点,做点什么呢?



1.1.2 打算如何解决?

 

(1)拍照上传照片测试肌肤;

 

(2)图像识别从多角度去分析,包括肌龄,肤色,黑头,毛孔大小等肌肤的涉及因素,全面分析用户肤质并给出报告;

 

(3)护肤知识科普,美肤达人以及专业皮肤科医生进驻,分享知识推荐好货;

 

(4)护肤私人订制:根据用户的肤质,结合一些专业的护肤知识,定制出个性化护理方案,或者给用户搭配好产品;

 

采用大数据+AI智能图像分析,加入社区功能,达人推荐,专业指导

 

1.1.3 后期的盈利模式如何?

 

这类人群的特点是用户多,范围广,可以和电商结合,也可以用流量变现等等。

 

 

1.2  产品定位

明确这是一款什么类型的app?工具?电商?社交?或者综合?

 

根据之前的分析,这款产品是工具(拍照)+电商(推荐产品或者服务)+社区(达人圈,讨论圈)的综合。

 

1.3  确定目标用户

确定目标用户群,具体到年龄段和大致职业方向。

 

爱美人士主要集中在女性,年龄范围是20~55之间,有一定的消费能力和经济能力,有一定的品味。

 

用户画像可以大概分为三类:



1.4 有无相关竞品




可以说市面上已经有一些这样的app,每款的侧重点和细分也不一样,可以从中得到一些借鉴个启发,但更多的是,我们的项目更综合,更全面,对产品的匹配度和适合度要求更高。

 

 

2、范围层- 确定主要功能点

 

通过对以上竞品的分析,结合自身所想解决的问题,ibeauty项目主打的功能是:

拍照测肤+医学建议+社区互动+电商导购

 

具体的是:


3、结构层- 确定信息结构框架

 

3.1 结构的深度和广度

我们以下面的树形结构为示例。纵向层级为深度,横线层级为广度。





深度优先和广度优先的设计,它们的区别在哪里呢?以下面的例子来说明:

 

在偏深度的信息结构中(如下图),由A到B,需要4次点击,用户操作起来效率不高,用户获取信息的路径偏长,有可能会导致点击率不高或者转化率不高的情况。但它也有一个好处,更少的入口选择,可以给屏幕留下更大的空间,可以放置更多用户关心的内容。



在偏广度的信息结构中(如下图),由A到B,需要2次点击,用户获取信息的路径很短,也很简单,但是需要面对更多的入口选择。在屏幕很小的手机上,入口太多,势必也会造成一定的选择困扰和干扰。




因此,在设计时,权衡好深度和广度。最好采用浅而窄的设计。


本项目就是采用上图右面的形式。


3.2 项目的信息结构类型



4、框架层 – 着手原型设计

4.1 原型设计需要注意的是

(1)为重要功能和常用功能设置快捷入口(高效)

(2)遵循已经成型的用户习惯

(3)引导用户完成任务

(4)主要任务与次要任务的区分

(5)简化操作流程(简洁)

(6)用户所需信息和商业推广信息的平衡

(7) 积极的反馈(反馈)

(8)贴心的提醒(情感化)

(9)考虑到各种特殊情况。限制:包含范围值和极限值;状态:默认状态、常见状态、特殊状态;操作:常见操作、特殊操作、误操作、手势操作;手势操作类型:常见的有点击、双击、长按、捏、伸、滑动;反馈:提示、跳转、动画等;

(10)各平台的适配

(11)了解技术的限制

 

4.2 主要界面的原型分析

见下面图示



4.3 整体原型的展现

如图所示



5、表现层

5.1 颜色方案

颜色的提取思考过程是如何的,用户群,产品的定位,关键词的提取(主色、辅助色,其他色)

 

ibeauty项目是一款偏女性的产品,和美相关,拍照、护肤、化妆,微整,社区这几块都包含。

 

它的用户群年龄范围分布广,20~55岁都有。

 

初步的几个关键词:

女性、美、妆容、专业、互动、浪漫、高贵、典雅、热情、活力、青春、品味、幸福、自信;

 

再继续脑暴:

唇彩、指甲油、彩妆、粉饼、眼影、高跟鞋、沙滩裙、玫瑰、美容、SPA ;

 

根据脑暴得出的关键词进行搜索:如下



进行高斯模糊,得出大概的色系图:如下



最后提炼相关配色方案:如下



主色:橙红色和枚红色的微渐变

辅助色:黑、灰、白

强调色:黄色

 

分析如下:

主色分析:选取介于玫红和桃红之间的颜色,这种颜色比粉红略鲜润明亮,既包含着孕育生命的能量,又流露出含蓄的美感,华丽而不失典雅,它代表了浪漫、时尚、优雅、自信、热情等女性气质。

 

这种颜色总让人想起万花之王玫瑰,散发着隐隐约约的迷人气息,无论什么年龄段的女性,它都能衬托独有的娇媚。

 

辅助色:黑白灰主要应用在文字,大背景中,此色能中和协调其他色。

 

强调色:黄色代表了希望、喜悦、光明、青春、可爱,还给人一种对美好生活的向往,给人以轻快,充满希望和活力的感觉。枚红色和黄色搭配起来会给人一种很强的视觉冲击感。

 

5.2 风格定位

5.2.1 目前UI视觉设计的趋势

(1)扁平极简主义;

(2)更大更粗的字体,留白更多;

(3)ICON的由线到面,细节刻画;

(4)卡片、投影相结合;

(5) 渐变色的依旧流行;

(6) 插画风格的大趋势;

(7) 交互动效的流行;

(8) 3D风格的兴起;

(9)  VR/AR/VUI是未来的大趋势;

 

5.2.2分析当前流行的设计趋势以及可取的视觉风格

基于本项目的产品定位,所以在视觉上,采取了流行的渐变色,扁平化,在banner配图上采用插画风格,页面切换时,考虑一些微动效的设计,具体的看下面的项目实例分析。

 

5.3 框架选取

目前app大致框架表现形式可以分为以下几类:

5.3.1卡片式


卡片式设计的好处: 

可以聚焦当前内容,灵活性操作卡片,可横向滑动,上下伸展等。卡片可以自由组合,可灵活做加减法。

 

卡片式设计不适用范围:

不利于沉浸式阅读、会消耗一点的边界空间。


5.3.2 分割线

如图


适合信息密集且强调展示效率的产品。

 

5.3.3 无框式

如图


这是今年比较流行的方式,从IOS11更新以来,大标题无框式的设计到处可见,适合于大图,文艺类的产品。对于信息量很多的产品,这种样式还是不太建议。

 

在本项目中,因为信息内容较多,考虑到后期运营可以灵活更换模块,采用了卡片式的样式。

 

5.4 项目中的视觉表现方法

具体见下图,主要是举例了一些细节方面的设计。

5.5 整体效果图

如图


因为上传总是说图片过大,所以对图片进行了压缩,可以看之前的链接:

http://www.zcool.com.cn/work/ZMjc2NDE4NTY=.html


后记:

此次因为时间关系,没有补上交互动效和视觉规范,在后面的文章中将会以其他案例来说明。

 

欢迎大家多提意见。


3
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息