《UI设计方法论》文集是专门用来收集、总结UI设计中所应用到的方法论。帮助自己提升设计思维，从产品、交互到视觉，希望自己能做到“心中有理论，手头会表达”。在与团队交流（撕逼）的过程中能告诉他们这么设计为什么好，为什么不好，做到有理有据，而不是凭自己的主观判断。

作为设计师，我们需懂产品、有交互思维，但是重点是我们都需要将这些方法论回归到视觉设计中去。好的作品才能支撑起这些方法论，才具有说服力。

此文涉及的方法论有：5WH需求挖掘法、4W场景分析法、交互旅程图、W3C强光测试法、KANO模型。

设计流程

在我们拿到一个需求时，应最先从产品层去了解、去分析我们要做的事情。5WH方法论能帮助我们去更好的梳理产品需求，帮助设计师更好的去了解用户、了解产品。

5WH方法论需要我们关注六大要点，分别为产品背景、目标人群、预期目标、使用场景、使用节点、如何使用。做为设计师，我们每一步都需要回归到视觉设计产出的思考上去。

5WH方法具体内容

一、产品背景（what）

通过分析产品背景能让我们更了解产品定位、自身产品特征以及我们的优势与竞争力；在了解背景的同时，去思考产品中的设计要点。在这一步我们需要做的3步有：

1.思考产品要做什么

通过对产品定位、目标、功能等进行了解，明确要做一款什么类型的app。这类产品给用户怎样的视觉感受。比如支付宝，我们就知道支付宝要做互联网金融理财工具，视觉感受应该给人安全、可靠的感觉。

2.分析竞品

对主流竞品进行分享，了解竞品的定位，竞品的信息布局结构。思考自身产品布局结构。比如要做一款电商类app，主流竞品首先会选淘宝进行分析，淘宝的信息层级布局一定是反复推敲后形成的，思考我们在做自身产品的时候是否布局结构与主流竞品保持一致，比如banner与金刚区位置，图标放置等等。对于一些特定业务模块，行业内已经形成了惯性的设计模式，一下子改变布局会增加用户的学习成本。比如常用的功能模块一般会放在顶部位置。

支付宝与美团信息布局

3.寻找设计机会点

在分析自身产品功能与竞品时，对比功能框架，发现我们有哪些没有做，是否有做的必要？设计上有哪些新的设计机会点？？？（这是做为设计师最应该思考的点，才能有所突破）是否值得做，如果做，我们可以怎么样做，做得比竞品好？（分享一句话：高标准要求自己——你所找到的参考是你设计的最低标准）

学会寻找设计机会点

二、目标人群（who）

对产品的核心用户群体，进行深入分析，充分了解我们的用户，从而挖掘用户的视觉偏好，帮助我们定义主视觉风格与色彩、字体选择等。这一步我们需要做的有：

1.用户年龄段与性别分布

了解核心用户的年龄区间，以及了解男女比例如何。了解这部分用户能让我们聚焦核心年龄段用户的视觉偏好，以及这部分用户对视觉要求是否高。比如qq主要年龄分布为15-22岁的年轻用户，对设计要求也很高；微信年龄段覆盖面更广，对设计的要求相对与qq就要低很多。

2.兴趣特征

了解目标群体的业余喜好，让让我们从多方面去了解用户，从而给了我们更多的运营机会点与设计机会点。比如我们做一个韩剧视频类app，通过分析发现看韩剧大多为女性用户，且平时喜欢购物，那么在视频暂停或者视频流中穿插一些其app的购物广告，能让不同平台间实现流量互换，互利共赢。

3.价值观

通过了解用户的价值观，也能帮助我们去定义产品的色彩。比如核心用户的价值观都是很正能量、积极的就可以分析我们的色彩可以偏明亮的橙色、黄色等等。

4.分析用户购买力

分析用户的经济价值（频次、消费金额等）、购买行为（消费品广度、偏好、看重因素、享受优惠情况等）、平台行为（分析用户平时喜欢用什么其他类app）。做这些等目的是为了让设计师更加关注一些运营细节的设计。比如banner文案怎样才能吸引用户点击、banner字体用什么是用户爱看的字体。

三、预期目标（why）

站在用户角度分析用户使用场景，帮助用户解决问题。这一步我们需要做的有：

1.想要解决什么问题

这一步需要我们站在用户角度进行场景复原，比如想做支付类产品，复原用户支付场景有哪些，用户在支付时关注哪些点、不关注哪些点等等。这一步我们需要用到4W方法论来复现分析。4W及who（谁）、when（什么时间）、where（什么地点）、what（什么事情）。

2.市场有没有替代方案

行业中有没有成熟解决方案，是否需要借鉴。因为如果市场上有成熟的产品用户的使用习惯可能已经养成了，我们就需要知道用户是怎样去使用这个产品的，如果改变一些习惯是否可行。

四、使用场景（where）

考虑用户的使用环境，思考用户心理。结合用户使用场景，考虑页面的信息层级、颜色饱和度、页面跳转情况等。这一步需要做等有：

1.做交互旅程图

我们需要思考用户从哪里来要去哪里，也就是前一个页面是什么，下一个跳转页面是什么。交互旅程图是用户使用产品等主要路径，能够帮助我们合理等划分页面的信息层级，使信息层级更加合理化。

考虑用户场景

2.考虑用户的使用环境，场景特征

环境是安静还是嘈杂，用户使用产品有无干扰；环境是昏暗还是明亮，用户是否能很好的阅读。在强光环境中我们经常会用W3C强光测试。

在强光环境中可见度需要大于等于4.5:1才是合理的。

前景色（图标、文字的颜色）：背景色>=4.5:1

强光测试网站：https://webaim.org/resources/contrastchecker/

比如我们经常会把重要标题设置为＃333；背景色为白色＃fff；强光测试出可见度大于4.5:1，说明在强光环境下，用户是可以很好识别、阅读的。

强光测试

五.使用节点（when）

考虑用户使用产品的各个节点、各节点关注什么信息，来帮助我们了解产品功能的优先级、信息的优先级，来帮助设计师合理的排布、排期。这一步需要做的有：

1.了解产品功能优先级

我们经常使用KANO模型分析用户需求，从而帮助我们对产品功能的优先级进行排序划分。

一般的设计排期顺序是：必备因素、期望因素、魅力因素、无差异因素

必备因素：有此需求用户满意度不变，没有则满意度大幅度下降（如微信语音）

期望因素：提供期望需求则满意度会上升，不提供则会下降（如微信红包、占位图）

魅力因素：提供用户想不到的需求会很大程度的提升用户满意度，不提供满意度不变（如淘宝的千人千面，智能推荐功能）

无差异因素：用户根本不在意的功能需求

反向因素：无此需求满意度不变，有则满意度下降（不做）

KANO模型

2.进行信息排布、设计排期

根据上一步的产品功能优先级进行排期设计。在同一个页面里相同元素也需要去考虑排布的优先顺序。比如支付宝顶部的4大金刚排布的顺序，为什么这么排？

功能排序思考

六、如何验证（how）

这一步就是去做界面浏览测试和从一些数据角度去量化设计，看设计是否合理有效。通常都是在设计结束后，这一步我们可以不用那么去关注。

做为设计师，所有的方法论都是助力我们做设计。站在产品、交互角度去思考，从而帮助我们做设计时更加合理化（合理是第一步，好看是第二步）。记住所有的方法论最终都是要回归到设计中去的，不然我们所有的分析都是白费力气的。