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

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

https://www.ui.cn/detail/576532.html?nopop=1

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

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 整体效果图

如图

https://www.ui.cn/detail/576532.html?nopop=1

后记：

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

欢迎大家多提意见。

Powered by Froala Editor