篇首語：

隨著互聯(lián)網(wǎng)時代的發(fā)展，尤其近幾年進(jìn)入“互聯(lián)網(wǎng)寒冬期”以及失去人口紅利之后，企業(yè)對各個崗位要求都變得“非常”嚴(yán)格。對于UI設(shè)計而言，把作品做的非常牛X，顯然已經(jīng)無法滿足市場需求和用人需求了。

前期的鐵三角“產(chǎn)品經(jīng)理、交互設(shè)計師、UI設(shè)計師”很有可能結(jié)合變成是“交互視覺二合一”甚至是“產(chǎn)品交互視覺三合一”的狀態(tài)。在一些企業(yè)你會發(fā)現(xiàn)有一些崗位上的缺失。出現(xiàn)這種情況最大的原因是，很多公司會把一些職能進(jìn)行合并用來節(jié)省成本。現(xiàn)在仍然有大多數(shù)的公司并沒有交互設(shè)計師的崗位，但是交互設(shè)計的職能不代表沒有，而是被產(chǎn)品經(jīng)理或者視覺設(shè)計師兼任了。

說到這里大家可能會說，大企業(yè)資金雄厚，不缺少任何職能崗位。是的，沒有錯，但例如“華泰證券”，“浦東發(fā)展銀行”等，不再是UI設(shè)計而是用戶體驗設(shè)計師了。那么作為UI設(shè)計師、運營設(shè)計師、品牌設(shè)計師（以上統(tǒng)稱為視覺設(shè)計）的我們，該如何順應(yīng)時代發(fā)展，更加符合當(dāng)下的市場規(guī)律，成為一名優(yōu)秀的用戶體驗設(shè)計師呢？

當(dāng)我們拿到需求方（產(chǎn)品或運營）的設(shè)計需求時，不再是盲目的直接找參考、找素材開始了，而是用產(chǎn)品思維模式，理解“產(chǎn)品目標(biāo)”、鎖定“目標(biāo)用戶”、切身體會“用戶場景”、遵循“用戶行為習(xí)慣”等的方式，充分理解需求方所提出的設(shè)計需求，進(jìn)而設(shè)計出更加符合需求方心理預(yù)期的設(shè)計作品。

因為與需求方“同頻”思考才會設(shè)計出符合需求的設(shè)計，難道不是么？

本文目的：本文引入“全鏈路思維”模式，幫助視覺設(shè)計師提升思維高度，通過“分析需求”、“拆解需求”、“競品分析”等三個緯度思考，并將這些分析結(jié)果轉(zhuǎn)化為設(shè)計方案。

正文

一、全鏈路思維

最近所謂“全鏈路思維”的話題很火，但事實上，全鏈路早就不是什么新鮮的概念了，而且也并非什么崗位頭銜（和全棧、什么都能干不是同一概念），更接近于一種設(shè)計思維與方法。

近幾年，設(shè)計的發(fā)展趨勢從UED（以用戶為中心）變成UGD（以用戶為中心，以業(yè)務(wù)增長為導(dǎo)向，不以結(jié)果導(dǎo)向的KPI都是耍流氓），對設(shè)計的價值考核也越來越清晰，同時對于設(shè)計師的能力體現(xiàn)要求更高。行業(yè)上升發(fā)展趨勢要求設(shè)計師更懂行業(yè)（掌握行業(yè)間的差異）、更懂用戶（洞察用戶的需求）、更懂?dāng)?shù)據(jù)（善于分析業(yè)務(wù)數(shù)據(jù)）、更懂增長（投入產(chǎn)出比）。

在需求階段，我們比較傳統(tǒng)的一種流程，是被動從產(chǎn)品經(jīng)理處接受已被加工為具體方案的需求，對需求產(chǎn)生的背景并沒有什么深刻的接觸和理解。而在進(jìn)行全鏈路設(shè)計的業(yè)務(wù)場景中，需求方不會直接給你一個加工好的答案，甚至他們自己都沒想清楚問題出在哪里、應(yīng)該如何解決，而更多是帶著一個提升某業(yè)務(wù)指標(biāo)的原始訴求或一堆零散的原始用戶反饋來找你；至于怎么從中引導(dǎo)對方發(fā)現(xiàn)問題、分析問題、歸納機會點、輸出能幫助達(dá)到商業(yè)目標(biāo)的產(chǎn)品設(shè)計方案、甚至協(xié)調(diào)推動落地，都需要設(shè)計師作為 Owner 去思考和負(fù)責(zé)。

“全鏈路”這個詞應(yīng)該是2016年從阿里出來的，對于“全鏈路”思維的理解，行內(nèi)有不同的理解方式，筆者結(jié)合工作總結(jié)出以下幾種方法：

需求分析 > 拆解需求 > 分析競品 > 確立設(shè)計方案

二、用戶體驗

對于用戶體驗的理解，根據(jù)思考維度的不同其結(jié)果往往是眾說紛紜，由于各個職能崗位之間工作側(cè)重點以及專業(yè)度的不同，溝通起來是有成本的，只有用戶為中心的“用戶體驗”思維才是各個職能崗位之間的唯一溝通《通用語》。例如：當(dāng)產(chǎn)品向設(shè)計傳達(dá)產(chǎn)品需求時，產(chǎn)品無法用視覺角度去闡述產(chǎn)品，設(shè)計也無法用視覺專業(yè)知識向產(chǎn)品解釋設(shè)計理念，你只能用“用戶體驗”思維去解釋你的設(shè)計方案。當(dāng)然，如果對業(yè)務(wù)場景非常了解，兩相結(jié)合，溝通起來效果更佳。

那么什么是用戶體驗，唯一的核心只有一個，那就是“解決問題”

解決用戶具體某個需求點，讓用戶使用起來更佳容易，并且給用戶留下深刻的印象（轉(zhuǎn)化率）

解決了用戶某個問題點并印象深刻，用戶才覺得用著舒服。注意，這里的舒服指的是“舒爽”而非“酸爽”哦～。說到這里不得不再次提及老生常談的，用戶體驗5要素：

表現(xiàn)層 > 框架層 > 結(jié)構(gòu)層 > 范圍層 > 戰(zhàn)略層

那么以架構(gòu)層與結(jié)構(gòu)層為例

(一)、架構(gòu)層：頁面布局（各類控件及信息擺放），頁面布局的核心點在于：恰好

當(dāng)一個功能恰好出現(xiàn)在，用戶期望出現(xiàn)的位置上，即符合了“用戶的心理預(yù)期”，也符合了“用戶行為習(xí)慣”，那么用戶用著是否“舒爽”？所謂，以用戶為中心指的就是，迎合用戶的行為習(xí)慣及心理預(yù)期，讓用戶感到恰好、舒爽，同時感到被照顧、呵護(hù)的感覺：你好懂我～

大家都知道，一個頁面最佳視域為：左上、右上、左下、右下，左上最佳，右下最次。功能類控件（如：評論，點贊，發(fā)布，分享）在一段信息區(qū)域的右側(cè)，不是說右側(cè)不好么，這是因為為了符合人體工程學(xué)，右側(cè)好點擊原理（左撇子除外）。

(二)、結(jié)構(gòu)層：信息架構(gòu) （信息層級梳理及頁面流），核心點在于：瘦身

結(jié)構(gòu)層相對于架構(gòu)層較為抽象，我們可以將他理解為“鏈接”。架構(gòu)層是針對單頁面結(jié)構(gòu)設(shè)計，而結(jié)構(gòu)層是將單頁面鏈接在一起，從而形成了系統(tǒng)。

拿app舉例：架構(gòu)層決定了點擊頁面圖標(biāo)和按鈕后頁面跳轉(zhuǎn)到哪一頁。通過刪除、組織，隱藏和轉(zhuǎn)移，將復(fù)雜的結(jié)構(gòu)變的簡化，也是提高用戶體驗的手段。例如QQ5.0的升級，通過漢堡導(dǎo)航及tab標(biāo)簽將功能整合，似的應(yīng)用在感覺上苗條了很多。

以阿里巴巴(1688) APP 8.0為例：

(三)、怎么做好頁面布局及信息層級梳理：核心在于準(zhǔn)確理解產(chǎn)品需求

也許大家都遇到過這樣的情況：當(dāng)產(chǎn)品經(jīng)理看到你的設(shè)計方案時，突然找到你并且要求你，“這里放大，那里縮小，哦不，你給我放大的同時縮小，這個顏色我要五彩斑斕的黑，哦不，我的意思是@#￥%”

遇到這樣的情況，設(shè)計師要無條件的遵循么？產(chǎn)品經(jīng)理對于視覺有自己的審美，當(dāng)他發(fā)出需求時腦子里已經(jīng)有了2-3個設(shè)計方案，只是他不會做，設(shè)計方案沒有符合他的心理預(yù)期（以至于指手畫腳）。甚至他的審美經(jīng)過這么多年優(yōu)秀作品都熏陶，不會比任何一個設(shè)計差，只是他無法用設(shè)計專業(yè)知識去指導(dǎo)你罷了。

這個時候設(shè)計師該怎么做？出現(xiàn)這種情況只有這幾種可能：沒有同頻思考、沒有準(zhǔn)確領(lǐng)悟產(chǎn)品目標(biāo)（意圖），進(jìn)而對信息架構(gòu)、信息層級理解有誤、沒有把重點信息清晰體現(xiàn)、功能類控件，沒有做好有效的視覺引導(dǎo)。以上統(tǒng)稱為：需求理解錯了。

說到需求理解，據(jù)一個簡單的例子：假如有個用戶說：“我想吃蛋糕”，那么注意了，如果真的給用戶蛋糕，那就完蛋了。首先分析用戶為什么要吃蛋糕：就喜歡吃蛋糕？喜歡吃甜的點心（別的甜點能否替代）？還是說只是單純的餓了，不知道該吃什么，只是突然想到了蛋糕，那么可否用其他我能提供的什么東西去替代？

所以，這個用戶的需求不一定就是蛋糕，蛋糕只能是訴求，解決溫飽的訴求而已，但不一定是需求，他的需求是，解決溫飽的食物而已，如果不多問一句，不就產(chǎn)生了“放大的同時縮小，五次斑斕的黑”么？因為對需求的理解錯誤，沒有準(zhǔn)確的理解產(chǎn)品目標(biāo)，才導(dǎo)致設(shè)計方案才會出現(xiàn)錯誤，難道不是這樣的么？

二、需求分析

有人會問：“視覺設(shè)計師還需要像產(chǎn)品經(jīng)理那樣做需求分析么？”，正如上文中提到，要與產(chǎn)品經(jīng)理保持“同頻思考”，還要準(zhǔn)確的理解產(chǎn)品需求。不需要做，但并不代表不會或者不去思考。因為需求分析是“全鏈路思維”模式的前提。那么對于視覺設(shè)計師而言，不需要像產(chǎn)品經(jīng)理那種專業(yè)度，只需要思考以下幾點即可：

（1）為什么要做這個需求（業(yè)務(wù)目標(biāo)）

思考：業(yè)務(wù)方為什么要提出這個需求，為了提升轉(zhuǎn)化率、用戶留存、曝光/流？、點擊率、訪問率、注冊率，也就是業(yè)務(wù)方的核心目的是什么。

（2）產(chǎn)品期望得到什么結(jié)果（產(chǎn)品目標(biāo)）

思考：產(chǎn)品為了達(dá)到業(yè)務(wù)目標(biāo)，采取的策略是什么，通過什么功能實現(xiàn)的。產(chǎn)品的核心功能及交互流程是什么。

（3）誰來使用這個功能（目標(biāo)用戶）

思考：此業(yè)務(wù)目標(biāo)是針對哪些人群的，這些人群有什么共同的特點，和行為習(xí)慣。

（4）他們?yōu)槭裁匆褂眠@個功能（用戶需求）

思考：這些人群有哪些共同的需求點，產(chǎn)品目標(biāo)是否滿足這類人群的核心需求，解決了哪些痛點。這些人群期望怎樣的結(jié)果。設(shè)計師該如何引導(dǎo)用戶，理解產(chǎn)品目標(biāo)。

（5）他們在什么情況下使用這個功能（用戶場景）

思考：在這樣的業(yè)務(wù)目標(biāo)下，用戶在什么場景使用該功能，為什么使用，會不會有反感，如果我是用戶，我的感受是什么。

其實，業(yè)務(wù)目標(biāo)和用戶的需求是矛盾的。比如，業(yè)務(wù)方希望提升注冊率，但對于用戶而言，注冊與否并不敏感，或者根本不想走一遍繁瑣的注冊流程。這時產(chǎn)品就需要在特定的場景下，在某個功能流程中恰好出現(xiàn)注冊功能，讓用戶不得不注冊，因為用戶不注冊就得不到他剛好想要的服務(wù)或體驗。這個時候設(shè)計師要考慮的是，通過設(shè)計營造一種喜悅的氛圍，不讓用戶感到反感。因此設(shè)計師的核心價值在于，如何平衡業(yè)務(wù)目標(biāo)和用戶需求之間的矛盾，做出有效視覺引導(dǎo)。

三、拆解需求

拆解需求指的是，當(dāng)設(shè)計師分析需求方的需求后，將需求拆解成其對應(yīng)的視覺解決方案。上文中提到，需求分析不需要達(dá)到產(chǎn)品經(jīng)理的專業(yè)度，但“拆解需求”必須達(dá)到專家級程度。因為這部分是需求分析后，如何理解需求方的需求（業(yè)務(wù)目標(biāo)、產(chǎn)品目標(biāo)）的關(guān)鍵所在。這時，我們視覺設(shè)計師要思考一下幾點：

1、信息層級

（1）信息層級的分類（在明確需求后要對信息進(jìn)行劃分及拆解）

（a）用戶能否在最短的時間閱讀到信息、

（b）哪些信息是屬于業(yè)務(wù)流程范圍的、

（c）哪些信息是產(chǎn)品想要突出表現(xiàn)的、

（d）哪些信息看似不重要但沒有還不行、

（e）信息描述前后是否統(tǒng)一，會不會給用戶帶來困惑

（2）信息層級的權(quán)重

在明確主要信息歸類后，通過視覺上的，黑、白、灰，把層級表達(dá)清楚。明確信息權(quán)重，權(quán)重高的是否優(yōu)先展示，有沒有誤導(dǎo)用戶。

2、功能層級

（1）功能優(yōu)先級權(quán)重劃分（在明確功能后要對功能進(jìn)行分類及拆解）

（a）哪些功能優(yōu)先級最高，哪些是屬于主業(yè)務(wù)流程及功能流程、哪些功能是子功能、

（b）哪些功能產(chǎn)品經(jīng)理并不想突出，但用戶卻需要的、

（c）同一個頁面，同一功能多次出現(xiàn)，產(chǎn)品經(jīng)理的目的是什么、

（d）產(chǎn)品不同時期，功能的視覺變現(xiàn)是否有差異、

（2）交互層邏輯是否貼合用戶場景

在明確業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)后，設(shè)計師要反復(fù)驗證交互邏輯是否合理，邏輯是否符合該用戶場景。

（3）交互體驗是否流暢

在明確目標(biāo)用戶與使用場景后，把自己融入到使用場景中，反復(fù)驗證交互流程?？词欠穹蠘I(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)，同時看交互流程是否流暢，有沒有給自己帶來障礙。

（4）用戶操作是否便捷

如果自己是用戶，操作是否符合用戶行為習(xí)慣，有沒有恰好出現(xiàn)在該出現(xiàn)的位置上，視覺展示是否引導(dǎo)合理，視覺引導(dǎo)有沒有給用戶帶來誤區(qū)。

3、頁面布局

在明確目標(biāo)用戶與使用場景后，把自己模擬成目標(biāo)用戶，思考頁面布局是否符合用戶行為習(xí)慣和心理預(yù)期。主流程下的控件是否在視覺上有點擊欲望，會不會反感。（用戶體驗中已有詳細(xì)說明）

4、狀態(tài)的查缺補漏

各類交互狀態(tài)，如，圖標(biāo)點擊后的狀態(tài)（移動端、pc端）、hover 狀態(tài)（pc端）、非主業(yè)務(wù)流程下的功能提示（如：錯誤提示、缺省提示）。這些產(chǎn)品經(jīng)理往往會忽略掉，或者文檔里也會給出過，要注意觀察及時查缺補漏。

5、視覺的有效引導(dǎo)

在準(zhǔn)確的理解產(chǎn)品需求，做到“同頻思考”后，分析信層級和功能優(yōu)先級及權(quán)重劃分，將這些在視覺設(shè)計的過程中做有效的引導(dǎo)，并時刻查缺補漏。這個時候?qū)τ谀男┬畔⒑凸δ苄枰怀觯男┬畔⒑凸δ苄枰趸?，在頭腦里有個清晰的認(rèn)知和思路。讓信息和功能恰好出現(xiàn)在用戶期望的位置上，并且解決產(chǎn)品目標(biāo)為目的，也就是上文中提到的用戶體驗的核心點，解

決問題。

值得注意的是：

視覺設(shè)計師是對產(chǎn)品方案的進(jìn)一步完善，以用戶為中心的用戶體驗思想，用視覺引導(dǎo)的方式引導(dǎo)用戶實現(xiàn)產(chǎn)品目標(biāo)的，而非只會照著原型圖毫無思想的畫圖。同時要讓用戶無論在視覺上還是體驗上，都能感受到“舒爽”而非“酸爽”。

產(chǎn)品經(jīng)理給出的原型，重心在業(yè)務(wù)邏輯，因此，為了提升用戶體驗、避免給用戶帶來誤區(qū)和障礙，設(shè)計師要以產(chǎn)品思維（產(chǎn)品思維和業(yè)務(wù)思維是不一樣的）在業(yè)務(wù)及產(chǎn)品目標(biāo)、主功能邏輯不變的情況下，重新劃分信息層級、做好頁面布局，做好視覺引導(dǎo)。

四、競品分析

通過需求分析（理解需求）、和拆解需求（明確設(shè)計目標(biāo)）后，在正式進(jìn)入視覺設(shè)計之前，視覺設(shè)計師們通常要先找一波資料（找參考），如果只是這樣，那么僅僅是尋找視覺表現(xiàn)手法而已（什么風(fēng)格、什么顏色）。本文中所提到的競品分析，不是產(chǎn)品競品分析也不是交互競品分析，而是為了視覺設(shè)計而準(zhǔn)備的視覺競品分析?；凇叭溌贰彼季S模式下通常需要考慮一下幾點：

（1）我們的方案和競品的區(qū)別在哪里，為什么不同。

跟競品之間的區(qū)別很重要，因為每個產(chǎn)品業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)，以及產(chǎn)品處于的階段都是不一樣的，即便看著很類似也不可以盲目參考。

例如：產(chǎn)品階段的不同，對于“搜索”功能的要求是不一樣的，產(chǎn)品初期由于信息量不夠，搜索不出太多的內(nèi)容。屬于沒有還不行，有了還不能太明顯，不能誤導(dǎo)用戶去搜索，而是要用分類功能。因此，即使產(chǎn)品經(jīng)理給出了“”搜索”功能，在視覺上也要弱化變現(xiàn)。但你如果參考了成熟期的產(chǎn)品，可想而知你設(shè)計出的“搜索”會是什么樣的了吧。

（2）競品是怎么做的，優(yōu)點在哪里，解決了哪些問題，他們?yōu)槭裁催@么做

我們要找到與本產(chǎn)品業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)基本一致的競品去對比，切勿只是原型基本類似就以為目標(biāo)一致。因此，先要看這個競品都解決了哪些問題。

（3）什么是我們可以借鑒的，是否可以改進(jìn)

在確定目標(biāo)基本一致后，要分析哪些可以借鑒，能不能比他做的更好，如果只是抄襲，那就沒有意思了。

（4）那么設(shè)計該如何表達(dá)，比競品做的更好

經(jīng)過上述分析，在這個階段對于視覺設(shè)計師而言，設(shè)計方案基本在腦子里已經(jīng)成型了。這時對于什么風(fēng)格、什么顏色，才基本符合產(chǎn)品預(yù)期。在結(jié)合需求拆解的方式，拿出可行的設(shè)計方案。

轉(zhuǎn)自-站酷

藍(lán)藍(lán)設(shè)計( m.820esy.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。