最近在高高手上学习了张双老师的《商业UI设计：全链式设计方法与流程》视频教程，收获不少，因此总结下来分享给大家。

UI设计如何突破设计瓶颈，成为更加有价值的设计师呢？

首先我们来了解下UI设计师需要具备的能力点，看如下图UI设计能力模型图：

与设计息息相关的三个能力是：沟通能力、专业设计、分析解决问题。如上图，我们可以看到一个非常有趣的点，我们虽然是设计师，但是我们要求设计师的沟通能力＞专业设计能力，这是为什么呢？因为UI设计本质就是一个服务型的行业（它并不是纯美学，纯视觉上的一些表现），要服务好我们的用户和产品。那么沟通能力有助于我们去做好服务。这也就要求我们UI要注重稿件的可用性。

那沟通能力在我们设计过程中是如何体现的呢？

通过与产品、交互设计师的沟通（帮产品梳理出合理的产品方案，帮交互梳理出合理的原型产出），发现问题解决问题，而更好的服务于产品与用户，也从而让设计更加言之有物（有理有据）。

这也就要求我们打破传统的设计思维，去扩大自己的职能范围，去做一些产品和交互，而不是执行化地做些视觉工作，也因此逐渐的走出我们的瓶颈点。

这也就是普通设计师与资深设计师的区别，资深设计师的设计不仅仅保证了设计的精细度，视觉上很美观，而且设计更加有理论的支撑，有更多的商业价值。

因此要走出我们的瓶颈点，需要我们去做到设计更加言之有物，更加有理论的支撑。

那么如何做到让设计更加有理论的支撑，有更多的商业价值呢？

这也就引出了张双老师的讲解重点——全链路的设计流程。

这也是我们UI设计未来的发展方向。

随着UI行业的发展，行业竞争越来越激烈，从一个只会ps就能拿到一个收入不菲的offer到用户体验的普及，到2016-2017行业开始进行筛选和过滤，2018年，未来我们更加需要全链路和复合化的设计人才。

那全链路的设计流程是什么样的呢？

首先我们来了解下传统设计流程。

如上图，我们不难看出我们设计是走在中后环节的，这就导致一个问题点，就是我们在做稿件输出的时候会比较闭塞，主要表现在两点 ①不了解产品背景 ②不明白交互原型为何这样布局等。

所以我们不难看出，传统的设计流程导致我们只是做些执行化的设计工作，这也就是为什么我们会出现瓶颈点的原因。

因此我们要走出传统的设计流程，逐渐去设计一些产品和交互，让自己的职能范围更加广一些，朝全链路的方向发展。

全链路设计流程分以下6步：

这些流程是贯穿在设计前中后的：

设计之前：发现问题，背景解析。

设计中：解决方案，视觉验证。

设计后：产品上线之后，数据跟踪，项目复盘。

相对于全链路设计流程，我们很容易发现全链路设计流程的优点：

1、全链路能给我们带来一个更加全面的设计思考 

2、让我们的设计方案更加言之有物，有理有据。

接下来我们一一来讲解全链路设计流程的步骤：

一.发现问题、背景解析

发现问题、背景解析这两个一起讲，因为这两个均属于设计前做的事情，均属于分析产品需求，通过做产品分析，可以达到产品的颜值提升和体验提升。

那我们如何来分析产品需求呢？我们可以用5W1H产品分析方法

这就要求我们设计师在拿到产品文档的时候一定要去做一个解读工作，和产品经理沟通，并且拿到交互原型后，做背景解析，在产品整体内容呈现上面，梳理出更加符合用户需求的点。

①产品背景：

要做产品背景的分析，我们可以从以下三个方面去分析：要做什么、竞品状况、行业资料

通过了解要做什么，我们思考要给用户怎么样的视觉感？

通过了解竞品状况，我们要去思考是否要保持一致的设计布局？（布局是否要和竞品保持一致，主要是考虑如果竞品已经把用户习惯培养的非常成熟时，当我们再去做一些创新的产品设计，一定要让用户感觉到相同的使用操作。这时可去做些视觉上的创新，交互布局上的创新不需要做很大的改变。）

通过了解行业资料，我们要去想是否还有做的必要？

②目标人群：

要做目标人群的分析，我们可以从以下三个方面去分析：

a 人群年龄（主要用户集中在哪个区间）,对应到设计，我们要思考的是这部分精准人群的偏好是什么？

b 性别分布（男女比例如何），对应到设计，如果是女性偏多，我们要思考的是女性的色彩偏好是什么？

c 兴趣特征（业余喜欢干什么）对应到设计，如果是喜欢看杂志？那我们是否可以界面融入杂志的感觉？也就是线下的元素搬到线上。或者做运营广告的时候在哪里投放比较容易让用户看到？

③预期目标：

要做目标人群的分析，我们可以从以下二个方面去分析：

a 想要解决什么？（这次需求是要解决什么问题？达到什么样的目的？要如何去做？复现分析一下）

b 有没有替代方案？（行业中有没有成熟解决方案，是否需要借鉴）

④使用场景：

要了解用户的使用场景，我们可以从以下三个方面去分析：

a 交互旅程图 ：在这个需求中，用户从哪里来，又到哪里去。即这是处在交互流程的哪一步？这一步的前后环境是咋样的？通过做这个，可以帮助我们做好界面的合理性，也就是信息层级，帮助我们判断视觉哪里做的强一些，哪里做的弱一些。

b 场景特征： 比如用户是在怎样的环境中使用的？昏暗的还是明亮的环境？有无干扰？这有助于我们在使用色彩的时候做出判断，颜色是要用明亮的还是暗一些的？

另外，做完后需要我们去做些强光测试和烛光测试

C 用户心理。 用户在场景中，心理状态是如何的？比如我们做一个订单结果页，这一步，用户是比较焦急的想要知道下单结果的，这时候我们就需要把用户结果状态突出，同时做好信息展示，以便提升用户的阅读效率。

⑤使用节点：

做这一步，是为了避免我们过于忙碌的一个状态，我们需要了解一下产品的优先级，以及根据这些优先级我们来做一个排期。  那我们如何来进行排期呢？我们可以通过KANO模型来进行排期：

KANO模型：可以把我们很多设计需求和产品的需求分成五个维度，这五个维度是根据用户对整个产品的期望值而言的。如下图：

我们做需求的顺序是第一做必备因素，第二期望因素，第三魅力因素，第四无差异因素和第五方向因素是我们在产品过程中尽量不要去做的点，这时候我们就要和产品和交互沟通，把这些不好的点去掉。                                                                                

⑥ 如何验证：

这一步我觉得是属于后面视觉验证、数据跟踪这步了，后续会在视觉这一块详细讲到。 

以上就是6步模块化产品分析方法。也就是如何全链式设计流程里的第一、第二步。

二  解决方案

解决方案应该有很多。本次的视频教学里提到了一个：界面排版依据：十字交叉分析方法。

如上图，就是针对界面中用户关注的一些信息，根据其重要程度和紧急程度划分来进行排版布局。

判断依据是：哪些功能属于重要的（针对用户的）？哪些属于紧急的（针对产品的）？

先列出用户比较关注的一些点，然后进行调研，用数据说话，筛选出用户比较重要的点和对于产品比较紧急的点，然后按照上图的十字交叉分析来进行排版布局。

三  视觉验证→设计验证

这一块，视频讲解里是说“视觉验证”，但这里我想把UI设计验证的几个结合起来说，那我暂且就给它命名为“设计验证”，这一步是在稿件完成之后上线之前我们再去做的。

视频讲解中，前后一共提到过二个大的方面的测试验证：界面浏览测试、可用性测试

①界面浏览测试

界面浏览测试，即测试稿件的合理性。问自己或者问测试者三个问题，看实际结果有没有达到你预期想要的结果：

1. 这个页面中什么地方最吸引你？验证视觉传达是否合理且符合预期

2.你认为这个页面的作用是什么？看这个界面设计有没有给用户一个清晰的感知，这个页面是干什么的？也就是功能传递清不清楚

3.当你使用这个页面，是否会使用它提供的功能？也就是验证产品优点是否传递清楚

②可用性测试

验证UI的可用性有两种方法：场景分析，任务测试。（当然我们除了可以用着两个方法来验证UI的可用性，也同时可以用这两个方法来提高UI可用性。）

a 场景分析：当我们看到一个稿件，看不出来它的可用性是不是有做好时，我们就可以运用场景分析的方法来验证它的可用性：

场景分析，需要我们像侦探一样去思考，用户是怎么使用我们的产品的？：什么人、什么时间、什么地点、什么事？

举例：

b  任务测试

通过任务测试，可以验证我们设计方案是否被用户所理解了

任务测试，即让用户去完成某个操作，然后查看用户操作过程中的反应，来看我们的设计有没有被理解？没有被理解的原因又是什么？因此我们要怎么改进？

四 数据跟踪

数据跟踪，是在产品上线后，我们用数据的角度来看设计产出。

在我们的设计过程中，往往大部分人都会忽视去做这个，实际上产品不断迭代，我们需要根据后台埋点的一些数据进行分析，然后发现问题，并去解决，所以这个数据跟踪分析还是很有必要的。

当我们稿件设计的细节上，视觉上等没有提升空间的时候，我们可以通过数据还能发现问题点。比如页面的跳转率，购买率等。

还有就是比如我们做了A/B 两个方案的时候，我们不知道到底哪个方案更好，这时候我们就可以做些A／B测试，然后根据后台给我们的一些数据，来看下哪个方案更好，从而来决定用哪个方案。

也可以通过查看数据来查看我们的设计优化有没有得到更好的效果？因此来验证&量化我们的设计产出。

那么接下来，我们要如何去了解数据呢？

举例：腾讯应用宝。

这个由于讲解比较复杂，所以这里就不说了，大家可以去高高手学习张双老师的《商业UI设计：全链式设计方法与流程》视频讲解。

五  项目复盘 

项目复盘，根据老师的讲解，在我理解，就是跟别人介绍或者总结一下你做的某个项目的设计工作。我们可以从以下5个方面去讲：

1.设计精细度：

那我们如何阐述设计精细度呢？可以从以下三个方面：

①业务颜色属性。

②渐变幅度的统一及规范

③呼吸感的把控

 比如图标： 

                                                                                                                              2、设计流程

即跟别人介绍下，你在产品环节，交互环节，设计中和设计后环节分别都做了什么？

因此我们也来总结下全链路设计流程中，我们在产品环节，交互环节，设计环节，以及设计后的环节我们应该做些什么事情？ 

见下图：                                                                                                                

3.风格定义

即在做视觉方案风格设计的时候，要不断的对飞机稿进行优化，做到匹配产品的视觉调性。如何做到设计稿最终匹配产品的视觉调性呢？我们可以通过上面讲到的5W1H的方法。

4.设计判断力：

在做一个稿件的改版前和改版后，我们要非常明确的说出来改版后的优点，比如：推动了什么？有什么改变？对用户来说有什么感触？

5.语言组织能力

把自己的成果和所得感悟很好的分享给别人。

以上项目复盘的5个方面，也是我们可以在面试过程中或简历上可以去介绍的5个方面，这样有助于我们拿到心目中的offer。

写在最后

最后希望此文能对你有所帮助，突破设计瓶颈，成为以上设计行业划分中的40% 。

终于写完了！写的不够好或者不对的地方欢迎指正！由于本文涵盖的内容比较多，所以有些点写的有些笼统，如你们想要进行详细的了解，推荐大家去高高手上学习张双老师的《商业UI设计：全链式设计方法与流程》视频讲解，里面都会有案例讲解。我仅此只是学习后，总结下来分享给大家。看我这么辛苦的份上，喜欢就点个赞吧～