最近在高高手上學(xué)習(xí)了張雙老師的《商業(yè)UI設(shè)計(jì)：全鏈?zhǔn)皆O(shè)計(jì)方法與流程》視頻教程，收獲不少，因此總結(jié)下來(lái)分享給大家。

UI設(shè)計(jì)如何突破設(shè)計(jì)瓶頸，成為更加有價(jià)值的設(shè)計(jì)師呢？

首先我們來(lái)了解下UI設(shè)計(jì)師需要具備的能力點(diǎn)，看如下圖UI設(shè)計(jì)能力模型圖：

與設(shè)計(jì)息息相關(guān)的三個(gè)能力是：溝通能力、專業(yè)設(shè)計(jì)、分析解決問題。如上圖，我們可以看到一個(gè)非常有趣的點(diǎn)，我們雖然是設(shè)計(jì)師，但是我們要求設(shè)計(jì)師的溝通能力＞專業(yè)設(shè)計(jì)能力，這是為什么呢？因?yàn)閁I設(shè)計(jì)本質(zhì)就是一個(gè)服務(wù)型的行業(yè)（它并不是純美學(xué)，純視覺上的一些表現(xiàn)），要服務(wù)好我們的用戶和產(chǎn)品。那么溝通能力有助于我們?nèi)プ龊梅?wù)。這也就要求我們UI要注重稿件的可用性。

那溝通能力在我們?cè)O(shè)計(jì)過(guò)程中是如何體現(xiàn)的呢？

通過(guò)與產(chǎn)品、交互設(shè)計(jì)師的溝通（幫產(chǎn)品梳理出合理的產(chǎn)品方案，幫交互梳理出合理的原型產(chǎn)出），發(fā)現(xiàn)問題解決問題，而更好的服務(wù)于產(chǎn)品與用戶，也從而讓設(shè)計(jì)更加言之有物（有理有據(jù)）。

這也就要求我們打破傳統(tǒng)的設(shè)計(jì)思維，去擴(kuò)大自己的職能范圍，去做一些產(chǎn)品和交互，而不是執(zhí)行化地做些視覺工作，也因此逐漸的走出我們的瓶頸點(diǎn)。

這也就是普通設(shè)計(jì)師與資深設(shè)計(jì)師的區(qū)別，資深設(shè)計(jì)師的設(shè)計(jì)不僅僅保證了設(shè)計(jì)的精細(xì)度，視覺上很美觀，而且設(shè)計(jì)更加有理論的支撐，有更多的商業(yè)價(jià)值。

因此要走出我們的瓶頸點(diǎn)，需要我們?nèi)プ龅皆O(shè)計(jì)更加言之有物，更加有理論的支撐。

那么如何做到讓設(shè)計(jì)更加有理論的支撐，有更多的商業(yè)價(jià)值呢？

這也就引出了張雙老師的講解重點(diǎn)——全鏈路的設(shè)計(jì)流程。

這也是我們UI設(shè)計(jì)未來(lái)的發(fā)展方向。

隨著UI行業(yè)的發(fā)展，行業(yè)競(jìng)爭(zhēng)越來(lái)越激烈，從一個(gè)只會(huì)ps就能拿到一個(gè)收入不菲的offer到用戶體驗(yàn)的普及，到2016-2017行業(yè)開始進(jìn)行篩選和過(guò)濾，2018年，未來(lái)我們更加需要全鏈路和復(fù)合化的設(shè)計(jì)人才。

那全鏈路的設(shè)計(jì)流程是什么樣的呢？

首先我們來(lái)了解下傳統(tǒng)設(shè)計(jì)流程。

如上圖，我們不難看出我們?cè)O(shè)計(jì)是走在中后環(huán)節(jié)的，這就導(dǎo)致一個(gè)問題點(diǎn)，就是我們?cè)谧龈寮敵龅臅r(shí)候會(huì)比較閉塞，主要表現(xiàn)在兩點(diǎn) ①不了解產(chǎn)品背景 ②不明白交互原型為何這樣布局等。

所以我們不難看出，傳統(tǒng)的設(shè)計(jì)流程導(dǎo)致我們只是做些執(zhí)行化的設(shè)計(jì)工作，這也就是為什么我們會(huì)出現(xiàn)瓶頸點(diǎn)的原因。

因此我們要走出傳統(tǒng)的設(shè)計(jì)流程，逐漸去設(shè)計(jì)一些產(chǎn)品和交互，讓自己的職能范圍更加廣一些，朝全鏈路的方向發(fā)展。

全鏈路設(shè)計(jì)流程分以下6步：

這些流程是貫穿在設(shè)計(jì)前中后的：

設(shè)計(jì)之前：發(fā)現(xiàn)問題，背景解析。

設(shè)計(jì)中：解決方案，視覺驗(yàn)證。

設(shè)計(jì)后：產(chǎn)品上線之后，數(shù)據(jù)跟蹤，項(xiàng)目復(fù)盤。

相對(duì)于全鏈路設(shè)計(jì)流程，我們很容易發(fā)現(xiàn)全鏈路設(shè)計(jì)流程的優(yōu)點(diǎn)：

1、全鏈路能給我們帶來(lái)一個(gè)更加全面的設(shè)計(jì)思考?

2、讓我們的設(shè)計(jì)方案更加言之有物，有理有據(jù)。

接下來(lái)我們一一來(lái)講解全鏈路設(shè)計(jì)流程的步驟：

一.發(fā)現(xiàn)問題、背景解析

發(fā)現(xiàn)問題、背景解析這兩個(gè)一起講，因?yàn)檫@兩個(gè)均屬于設(shè)計(jì)前做的事情，均屬于分析產(chǎn)品需求，通過(guò)做產(chǎn)品分析，可以達(dá)到產(chǎn)品的顏值提升和體驗(yàn)提升。

那我們?nèi)绾蝸?lái)分析產(chǎn)品需求呢？我們可以用5W1H產(chǎn)品分析方法

這就要求我們?cè)O(shè)計(jì)師在拿到產(chǎn)品文檔的時(shí)候一定要去做一個(gè)解讀工作，和產(chǎn)品經(jīng)理溝通，并且拿到交互原型后，做背景解析，在產(chǎn)品整體內(nèi)容呈現(xiàn)上面，梳理出更加符合用戶需求的點(diǎn)。

①產(chǎn)品背景：

要做產(chǎn)品背景的分析，我們可以從以下三個(gè)方面去分析：要做什么、競(jìng)品狀況、行業(yè)資料

通過(guò)了解要做什么，我們思考要給用戶怎么樣的視覺感？

通過(guò)了解競(jìng)品狀況，我們要去思考是否要保持一致的設(shè)計(jì)布局？（布局是否要和競(jìng)品保持一致，主要是考慮如果競(jìng)品已經(jīng)把用戶習(xí)慣培養(yǎng)的非常成熟時(shí)，當(dāng)我們?cè)偃プ鲆恍﹦?chuàng)新的產(chǎn)品設(shè)計(jì)，一定要讓用戶感覺到相同的使用操作。這時(shí)可去做些視覺上的創(chuàng)新，交互布局上的創(chuàng)新不需要做很大的改變。）

通過(guò)了解行業(yè)資料，我們要去想是否還有做的必要？

②目標(biāo)人群：

要做目標(biāo)人群的分析，我們可以從以下三個(gè)方面去分析：

a 人群年齡（主要用戶集中在哪個(gè)區(qū)間）,對(duì)應(yīng)到設(shè)計(jì)，我們要思考的是這部分精準(zhǔn)人群的偏好是什么？

b 性別分布（男女比例如何），對(duì)應(yīng)到設(shè)計(jì)，如果是女性偏多，我們要思考的是女性的色彩偏好是什么？

c 興趣特征（業(yè)余喜歡干什么）對(duì)應(yīng)到設(shè)計(jì)，如果是喜歡看雜志？那我們是否可以界面融入雜志的感覺？也就是線下的元素搬到線上?；蛘咦鲞\(yùn)營(yíng)廣告的時(shí)候在哪里投放比較容易讓用戶看到？

③預(yù)期目標(biāo)：

要做目標(biāo)人群的分析，我們可以從以下二個(gè)方面去分析：

a 想要解決什么？（這次需求是要解決什么問題？達(dá)到什么樣的目的？要如何去做？復(fù)現(xiàn)分析一下）

b 有沒有替代方案？（行業(yè)中有沒有成熟解決方案，是否需要借鑒）

④使用場(chǎng)景：

要了解用戶的使用場(chǎng)景，我們可以從以下三個(gè)方面去分析：

a 交互旅程圖 ：在這個(gè)需求中，用戶從哪里來(lái)，又到哪里去。即這是處在交互流程的哪一步？這一步的前后環(huán)境是咋樣的？通過(guò)做這個(gè)，可以幫助我們做好界面的合理性，也就是信息層級(jí)，幫助我們判斷視覺哪里做的強(qiáng)一些，哪里做的弱一些。

b 場(chǎng)景特征：?比如用戶是在怎樣的環(huán)境中使用的？昏暗的還是明亮的環(huán)境？有無(wú)干擾？這有助于我們?cè)谑褂蒙实臅r(shí)候做出判斷，顏色是要用明亮的還是暗一些的？

另外，做完后需要我們?nèi)プ鲂?qiáng)光測(cè)試和燭光測(cè)試

C 用戶心理。?用戶在場(chǎng)景中，心理狀態(tài)是如何的？比如我們做一個(gè)訂單結(jié)果頁(yè)，這一步，用戶是比較焦急的想要知道下單結(jié)果的，這時(shí)候我們就需要把用戶結(jié)果狀態(tài)突出，同時(shí)做好信息展示，以便提升用戶的閱讀效率。

⑤使用節(jié)點(diǎn)：

做這一步，是為了避免我們過(guò)于忙碌的一個(gè)狀態(tài)，我們需要了解一下產(chǎn)品的優(yōu)先級(jí)，以及根據(jù)這些優(yōu)先級(jí)我們來(lái)做一個(gè)排期。 ?那我們?nèi)绾蝸?lái)進(jìn)行排期呢？我們可以通過(guò)KANO模型來(lái)進(jìn)行排期：

KANO模型：可以把我們很多設(shè)計(jì)需求和產(chǎn)品的需求分成五個(gè)維度，這五個(gè)維度是根據(jù)用戶對(duì)整個(gè)產(chǎn)品的期望值而言的。如下圖：

我們做需求的順序是第一做必備因素，第二期望因素，第三魅力因素，第四無(wú)差異因素和第五方向因素是我們?cè)诋a(chǎn)品過(guò)程中盡量不要去做的點(diǎn)，這時(shí)候我們就要和產(chǎn)品和交互溝通，把這些不好的點(diǎn)去掉。?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

⑥ 如何驗(yàn)證：

這一步我覺得是屬于后面視覺驗(yàn)證、數(shù)據(jù)跟蹤這步了，后續(xù)會(huì)在視覺這一塊詳細(xì)講到。?

以上就是6步模塊化產(chǎn)品分析方法。也就是如何全鏈?zhǔn)皆O(shè)計(jì)流程里的第一、第二步。

二 ?解決方案

解決方案應(yīng)該有很多。本次的視頻教學(xué)里提到了一個(gè)：界面排版依據(jù)：十字交叉分析方法。

如上圖，就是針對(duì)界面中用戶關(guān)注的一些信息，根據(jù)其重要程度和緊急程度劃分來(lái)進(jìn)行排版布局。

判斷依據(jù)是：哪些功能屬于重要的（針對(duì)用戶的）？哪些屬于緊急的（針對(duì)產(chǎn)品的）？

先列出用戶比較關(guān)注的一些點(diǎn)，然后進(jìn)行調(diào)研，用數(shù)據(jù)說(shuō)話，篩選出用戶比較重要的點(diǎn)和對(duì)于產(chǎn)品比較緊急的點(diǎn)，然后按照上圖的十字交叉分析來(lái)進(jìn)行排版布局。

三 ?視覺驗(yàn)證→設(shè)計(jì)驗(yàn)證

這一塊，視頻講解里是說(shuō)“視覺驗(yàn)證”，但這里我想把UI設(shè)計(jì)驗(yàn)證的幾個(gè)結(jié)合起來(lái)說(shuō)，那我暫且就給它命名為“設(shè)計(jì)驗(yàn)證”，這一步是在稿件完成之后上線之前我們?cè)偃プ龅摹?/p>

視頻講解中，前后一共提到過(guò)二個(gè)大的方面的測(cè)試驗(yàn)證：界面瀏覽測(cè)試、可用性測(cè)試

①界面瀏覽測(cè)試

界面瀏覽測(cè)試，即測(cè)試稿件的合理性。問自己或者問測(cè)試者三個(gè)問題，看實(shí)際結(jié)果有沒有達(dá)到你預(yù)期想要的結(jié)果：

1. 這個(gè)頁(yè)面中什么地方最吸引你？驗(yàn)證視覺傳達(dá)是否合理且符合預(yù)期

2.你認(rèn)為這個(gè)頁(yè)面的作用是什么？看這個(gè)界面設(shè)計(jì)有沒有給用戶一個(gè)清晰的感知，這個(gè)頁(yè)面是干什么的？也就是功能傳遞清不清楚

3.當(dāng)你使用這個(gè)頁(yè)面，是否會(huì)使用它提供的功能？也就是驗(yàn)證產(chǎn)品優(yōu)點(diǎn)是否傳遞清楚

②可用性測(cè)試

驗(yàn)證UI的可用性有兩種方法：場(chǎng)景分析，任務(wù)測(cè)試。（當(dāng)然我們除了可以用著兩個(gè)方法來(lái)驗(yàn)證UI的可用性，也同時(shí)可以用這兩個(gè)方法來(lái)提高UI可用性。）

a 場(chǎng)景分析：當(dāng)我們看到一個(gè)稿件，看不出來(lái)它的可用性是不是有做好時(shí)，我們就可以運(yùn)用場(chǎng)景分析的方法來(lái)驗(yàn)證它的可用性：

場(chǎng)景分析，需要我們像偵探一樣去思考，用戶是怎么使用我們的產(chǎn)品的？：什么人、什么時(shí)間、什么地點(diǎn)、什么事？

舉例：

b ?任務(wù)測(cè)試

通過(guò)任務(wù)測(cè)試，可以驗(yàn)證我們?cè)O(shè)計(jì)方案是否被用戶所理解了

任務(wù)測(cè)試，即讓用戶去完成某個(gè)操作，然后查看用戶操作過(guò)程中的反應(yīng)，來(lái)看我們的設(shè)計(jì)有沒有被理解？沒有被理解的原因又是什么？因此我們要怎么改進(jìn)？

四 數(shù)據(jù)跟蹤

數(shù)據(jù)跟蹤，是在產(chǎn)品上線后，我們用數(shù)據(jù)的角度來(lái)看設(shè)計(jì)產(chǎn)出。

在我們的設(shè)計(jì)過(guò)程中，往往大部分人都會(huì)忽視去做這個(gè)，實(shí)際上產(chǎn)品不斷迭代，我們需要根據(jù)后臺(tái)埋點(diǎn)的一些數(shù)據(jù)進(jìn)行分析，然后發(fā)現(xiàn)問題，并去解決，所以這個(gè)數(shù)據(jù)跟蹤分析還是很有必要的。

當(dāng)我們稿件設(shè)計(jì)的細(xì)節(jié)上，視覺上等沒有提升空間的時(shí)候，我們可以通過(guò)數(shù)據(jù)還能發(fā)現(xiàn)問題點(diǎn)。比如頁(yè)面的跳轉(zhuǎn)率，購(gòu)買率等。

還有就是比如我們做了A/B 兩個(gè)方案的時(shí)候，我們不知道到底哪個(gè)方案更好，這時(shí)候我們就可以做些A／B測(cè)試，然后根據(jù)后臺(tái)給我們的一些數(shù)據(jù)，來(lái)看下哪個(gè)方案更好，從而來(lái)決定用哪個(gè)方案。

也可以通過(guò)查看數(shù)據(jù)來(lái)查看我們的設(shè)計(jì)優(yōu)化有沒有得到更好的效果？因此來(lái)驗(yàn)證&量化我們的設(shè)計(jì)產(chǎn)出。

那么接下來(lái)，我們要如何去了解數(shù)據(jù)呢？

舉例：騰訊應(yīng)用寶。

這個(gè)由于講解比較復(fù)雜，所以這里就不說(shuō)了，大家可以去高高手學(xué)習(xí)張雙老師的《商業(yè)UI設(shè)計(jì)：全鏈?zhǔn)皆O(shè)計(jì)方法與流程》視頻講解。

五 ?項(xiàng)目復(fù)盤?

項(xiàng)目復(fù)盤，根據(jù)老師的講解，在我理解，就是跟別人介紹或者總結(jié)一下你做的某個(gè)項(xiàng)目的設(shè)計(jì)工作。我們可以從以下5個(gè)方面去講：

1.設(shè)計(jì)精細(xì)度：

那我們?nèi)绾侮U述設(shè)計(jì)精細(xì)度呢？可以從以下三個(gè)方面：

①業(yè)務(wù)顏色屬性。

②漸變幅度的統(tǒng)一及規(guī)范

③呼吸感的把控

?比如圖標(biāo)：?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2、設(shè)計(jì)流程

即跟別人介紹下，你在產(chǎn)品環(huán)節(jié)，交互環(huán)節(jié)，設(shè)計(jì)中和設(shè)計(jì)后環(huán)節(jié)分別都做了什么？

因此我們也來(lái)總結(jié)下全鏈路設(shè)計(jì)流程中，我們?cè)诋a(chǎn)品環(huán)節(jié)，交互環(huán)節(jié)，設(shè)計(jì)環(huán)節(jié)，以及設(shè)計(jì)后的環(huán)節(jié)我們應(yīng)該做些什么事情？?

見下圖： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

3.風(fēng)格定義

即在做視覺方案風(fēng)格設(shè)計(jì)的時(shí)候，要不斷的對(duì)飛機(jī)稿進(jìn)行優(yōu)化，做到匹配產(chǎn)品的視覺調(diào)性。如何做到設(shè)計(jì)稿最終匹配產(chǎn)品的視覺調(diào)性呢？我們可以通過(guò)上面講到的5W1H的方法。

4.設(shè)計(jì)判斷力：

在做一個(gè)稿件的改版前和改版后，我們要非常明確的說(shuō)出來(lái)改版后的優(yōu)點(diǎn)，比如：推動(dòng)了什么？有什么改變？對(duì)用戶來(lái)說(shuō)有什么感觸？

5.語(yǔ)言組織能力

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

以上項(xiàng)目復(fù)盤的5個(gè)方面，也是我們可以在面試過(guò)程中或簡(jiǎn)歷上可以去介紹的5個(gè)方面，這樣有助于我們拿到心目中的offer。

寫在最后

最后希望此文能對(duì)你有所幫助，突破設(shè)計(jì)瓶頸，成為以上設(shè)計(jì)行業(yè)劃分中的40% 。

終于寫完了！寫的不夠好或者不對(duì)的地方歡迎指正！由于本文涵蓋的內(nèi)容比較多，所以有些點(diǎn)寫的有些籠統(tǒng)，如你們想要進(jìn)行詳細(xì)的了解，推薦大家去高高手上學(xué)習(xí)張雙老師的《商業(yè)UI設(shè)計(jì)：全鏈?zhǔn)皆O(shè)計(jì)方法與流程》視頻講解，里面都會(huì)有案例講解。我僅此只是學(xué)習(xí)后，總結(jié)下來(lái)分享給大家?？次疫@么辛苦的份上，喜歡就點(diǎn)個(gè)贊吧～