2019-8-30 ui設(shè)計(jì)分享達(dá)人
篇首語：
隨著互聯(lián)網(wǎng)時(shí)代的發(fā)展，尤其近幾年進(jìn)入“互聯(lián)網(wǎng)寒冬期”以及失去人口紅利之后，企業(yè)對(duì)各個(gè)崗位要求都變得“非?！眹?yán)格。對(duì)于UI設(shè)計(jì)而言，把作品做的非常牛X，顯然已經(jīng)無法滿足市場(chǎng)需求和用人需求了。
前期的鐵三角“產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI設(shè)計(jì)師”很有可能結(jié)合變成是“交互視覺二合一”甚至是“產(chǎn)品交互視覺三合一”的狀態(tài)。在一些企業(yè)你會(huì)發(fā)現(xiàn)有一些崗位上的缺失。出現(xiàn)這種情況最大的原因是，很多公司會(huì)把一些職能進(jìn)行合并用來節(jié)省成本。現(xiàn)在仍然有大多數(shù)的公司并沒有交互設(shè)計(jì)師的崗位，但是交互設(shè)計(jì)的職能不代表沒有，而是被產(chǎn)品經(jīng)理或者視覺設(shè)計(jì)師兼任了。
說到這里大家可能會(huì)說，大企業(yè)資金雄厚，不缺少任何職能崗位。是的，沒有錯(cuò)，但例如“華泰證券”，“浦東發(fā)展銀行”等，不再是UI設(shè)計(jì)而是用戶體驗(yàn)設(shè)計(jì)師了。那么作為UI設(shè)計(jì)師、運(yùn)營設(shè)計(jì)師、品牌設(shè)計(jì)師（以上統(tǒng)稱為視覺設(shè)計(jì)）的我們，該如何順應(yīng)時(shí)代發(fā)展，更加符合當(dāng)下的市場(chǎng)規(guī)律，成為一名優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)師呢？
當(dāng)我們拿到需求方（產(chǎn)品或運(yùn)營）的設(shè)計(jì)需求時(shí)，不再是盲目的直接找參考、找素材開始了，而是用產(chǎn)品思維模式，理解“產(chǎn)品目標(biāo)”、鎖定“目標(biāo)用戶”、切身體會(huì)“用戶場(chǎng)景”、遵循“用戶行為習(xí)慣”等的方式，充分理解需求方所提出的設(shè)計(jì)需求，進(jìn)而設(shè)計(jì)出更加符合需求方心理預(yù)期的設(shè)計(jì)作品。
因?yàn)榕c需求方“同頻”思考才會(huì)設(shè)計(jì)出符合需求的設(shè)計(jì)，難道不是么？
本文目的：本文引入“全鏈路思維”模式，幫助視覺設(shè)計(jì)師提升思維高度，通過“分析需求”、“拆解需求”、“競品分析”等三個(gè)緯度思考，并將這些分析結(jié)果轉(zhuǎn)化為設(shè)計(jì)方案。
正文
一、全鏈路思維
最近所謂“全鏈路思維”的話題很火，但事實(shí)上，全鏈路早就不是什么新鮮的概念了，而且也并非什么崗位頭銜（和全棧、什么都能干不是同一概念），更接近于一種設(shè)計(jì)思維與方法。
近幾年，設(shè)計(jì)的發(fā)展趨勢(shì)從UED（以用戶為中心）變成UGD（以用戶為中心，以業(yè)務(wù)增長為導(dǎo)向，不以結(jié)果導(dǎo)向的KPI都是耍流氓），對(duì)設(shè)計(jì)的價(jià)值考核也越來越清晰，同時(shí)對(duì)于設(shè)計(jì)師的能力體現(xiàn)要求更高。行業(yè)上升發(fā)展趨勢(shì)要求設(shè)計(jì)師更懂行業(yè)（掌握行業(yè)間的差異）、更懂用戶（洞察用戶的需求）、更懂?dāng)?shù)據(jù)（善于分析業(yè)務(wù)數(shù)據(jù)）、更懂增長（投入產(chǎn)出比）。
在需求階段，我們比較傳統(tǒng)的一種流程，是被動(dòng)從產(chǎn)品經(jīng)理處接受已被加工為具體方案的需求，對(duì)需求產(chǎn)生的背景并沒有什么深刻的接觸和理解。而在進(jìn)行全鏈路設(shè)計(jì)的業(yè)務(wù)場(chǎng)景中，需求方不會(huì)直接給你一個(gè)加工好的答案，甚至他們自己都沒想清楚問題出在哪里、應(yīng)該如何解決，而更多是帶著一個(gè)提升某業(yè)務(wù)指標(biāo)的原始訴求或一堆零散的原始用戶反饋來找你；至于怎么從中引導(dǎo)對(duì)方發(fā)現(xiàn)問題、分析問題、歸納機(jī)會(huì)點(diǎn)、輸出能幫助達(dá)到商業(yè)目標(biāo)的產(chǎn)品設(shè)計(jì)方案、甚至協(xié)調(diào)推動(dòng)落地，都需要設(shè)計(jì)師作為 Owner 去思考和負(fù)責(zé)。
“全鏈路”這個(gè)詞應(yīng)該是2016年從阿里出來的，對(duì)于“全鏈路”思維的理解，行內(nèi)有不同的理解方式，筆者結(jié)合工作總結(jié)出以下幾種方法：
需求分析 > 拆解需求 > 分析競品 > 確立設(shè)計(jì)方案
二、用戶體驗(yàn)
對(duì)于用戶體驗(yàn)的理解，根據(jù)思考維度的不同其結(jié)果往往是眾說紛紜，由于各個(gè)職能崗位之間工作側(cè)重點(diǎn)以及專業(yè)度的不同，溝通起來是有成本的，只有用戶為中心的“用戶體驗(yàn)”思維才是各個(gè)職能崗位之間的唯一溝通《通用語》。例如：當(dāng)產(chǎn)品向設(shè)計(jì)傳達(dá)產(chǎn)品需求時(shí)，產(chǎn)品無法用視覺角度去闡述產(chǎn)品，設(shè)計(jì)也無法用視覺專業(yè)知識(shí)向產(chǎn)品解釋設(shè)計(jì)理念，你只能用“用戶體驗(yàn)”思維去解釋你的設(shè)計(jì)方案。當(dāng)然，如果對(duì)業(yè)務(wù)場(chǎng)景非常了解，兩相結(jié)合，溝通起來效果更佳。
那么什么是用戶體驗(yàn)，唯一的核心只有一個(gè)，那就是“解決問題”
解決用戶具體某個(gè)需求點(diǎn)，讓用戶使用起來更佳容易，并且給用戶留下深刻的印象（轉(zhuǎn)化率）
解決了用戶某個(gè)問題點(diǎn)并印象深刻，用戶才覺得用著舒服。注意，這里的舒服指的是“舒爽”而非“酸爽”哦～。說到這里不得不再次提及老生常談的，用戶體驗(yàn)5要素：
表現(xiàn)層 > 框架層 > 結(jié)構(gòu)層 > 范圍層 > 戰(zhàn)略層
那么以架構(gòu)層與結(jié)構(gòu)層為例
(一)、架構(gòu)層：頁面布局（各類控件及信息擺放），頁面布局的核心點(diǎn)在于：恰好
當(dāng)一個(gè)功能恰好出現(xiàn)在，用戶期望出現(xiàn)的位置上，即符合了“用戶的心理預(yù)期”，也符合了“用戶行為習(xí)慣”，那么用戶用著是否“舒爽”？所謂，以用戶為中心指的就是，迎合用戶的行為習(xí)慣及心理預(yù)期，讓用戶感到恰好、舒爽，同時(shí)感到被照顧、呵護(hù)的感覺：你好懂我～
大家都知道，一個(gè)頁面最佳視域?yàn)椋鹤笊?、右上、左下、右下，左上最佳，右下最次。功能類控件（如：評(píng)論，點(diǎn)贊，發(fā)布，分享）在一段信息區(qū)域的右側(cè)，不是說右側(cè)不好么，這是因?yàn)闉榱朔先梭w工程學(xué)，右側(cè)好點(diǎn)擊原理（左撇子除外）。
(二)、結(jié)構(gòu)層：信息架構(gòu) （信息層級(jí)梳理及頁面流），核心點(diǎn)在于：瘦身
結(jié)構(gòu)層相對(duì)于架構(gòu)層較為抽象，我們可以將他理解為“鏈接”。架構(gòu)層是針對(duì)單頁面結(jié)構(gòu)設(shè)計(jì)，而結(jié)構(gòu)層是將單頁面鏈接在一起，從而形成了系統(tǒng)。
拿app舉例：架構(gòu)層決定了點(diǎn)擊頁面圖標(biāo)和按鈕后頁面跳轉(zhuǎn)到哪一頁。通過刪除、組織，隱藏和轉(zhuǎn)移，將復(fù)雜的結(jié)構(gòu)變的簡化，也是提高用戶體驗(yàn)的手段。例如QQ5.0的升級(jí)，通過漢堡導(dǎo)航及tab標(biāo)簽將功能整合，似的應(yīng)用在感覺上苗條了很多。
以阿里巴巴(1688) APP 8.0為例：
(三)、怎么做好頁面布局及信息層級(jí)梳理：核心在于準(zhǔn)確理解產(chǎn)品需求
也許大家都遇到過這樣的情況：當(dāng)產(chǎn)品經(jīng)理看到你的設(shè)計(jì)方案時(shí)，突然找到你并且要求你，“這里放大，那里縮小，哦不，你給我放大的同時(shí)縮小，這個(gè)顏色我要五彩斑斕的黑，哦不，我的意思是@#￥%”
遇到這樣的情況，設(shè)計(jì)師要無條件的遵循么？產(chǎn)品經(jīng)理對(duì)于視覺有自己的審美，當(dāng)他發(fā)出需求時(shí)腦子里已經(jīng)有了2-3個(gè)設(shè)計(jì)方案，只是他不會(huì)做，設(shè)計(jì)方案沒有符合他的心理預(yù)期（以至于指手畫腳）。甚至他的審美經(jīng)過這么多年優(yōu)秀作品都熏陶，不會(huì)比任何一個(gè)設(shè)計(jì)差，只是他無法用設(shè)計(jì)專業(yè)知識(shí)去指導(dǎo)你罷了。
這個(gè)時(shí)候設(shè)計(jì)師該怎么做？出現(xiàn)這種情況只有這幾種可能：沒有同頻思考、沒有準(zhǔn)確領(lǐng)悟產(chǎn)品目標(biāo)（意圖），進(jìn)而對(duì)信息架構(gòu)、信息層級(jí)理解有誤、沒有把重點(diǎn)信息清晰體現(xiàn)、功能類控件，沒有做好有效的視覺引導(dǎo)。以上統(tǒng)稱為：需求理解錯(cuò)了。
說到需求理解，據(jù)一個(gè)簡單的例子：假如有個(gè)用戶說：“我想吃蛋糕”，那么注意了，如果真的給用戶蛋糕，那就完蛋了。首先分析用戶為什么要吃蛋糕：就喜歡吃蛋糕？喜歡吃甜的點(diǎn)心（別的甜點(diǎn)能否替代）？還是說只是單純的餓了，不知道該吃什么，只是突然想到了蛋糕，那么可否用其他我能提供的什么東西去替代？
所以，這個(gè)用戶的需求不一定就是蛋糕，蛋糕只能是訴求，解決溫飽的訴求而已，但不一定是需求，他的需求是，解決溫飽的食物而已，如果不多問一句，不就產(chǎn)生了“放大的同時(shí)縮小，五次斑斕的黑”么？因?yàn)閷?duì)需求的理解錯(cuò)誤，沒有準(zhǔn)確的理解產(chǎn)品目標(biāo)，才導(dǎo)致設(shè)計(jì)方案才會(huì)出現(xiàn)錯(cuò)誤，難道不是這樣的么？
二、需求分析
有人會(huì)問：“視覺設(shè)計(jì)師還需要像產(chǎn)品經(jīng)理那樣做需求分析么？”，正如上文中提到，要與產(chǎn)品經(jīng)理保持“同頻思考”，還要準(zhǔn)確的理解產(chǎn)品需求。不需要做，但并不代表不會(huì)或者不去思考。因?yàn)樾枨蠓治鍪恰叭溌匪季S”模式的前提。那么對(duì)于視覺設(shè)計(jì)師而言，不需要像產(chǎn)品經(jīng)理那種專業(yè)度，只需要思考以下幾點(diǎn)即可：
（1）為什么要做這個(gè)需求（業(yè)務(wù)目標(biāo)）
思考：業(yè)務(wù)方為什么要提出這個(gè)需求，為了提升轉(zhuǎn)化率、用戶留存、曝光/流？、點(diǎn)擊率、訪問率、注冊(cè)率，也就是業(yè)務(wù)方的核心目的是什么。
（2）產(chǎn)品期望得到什么結(jié)果（產(chǎn)品目標(biāo)）
思考：產(chǎn)品為了達(dá)到業(yè)務(wù)目標(biāo)，采取的策略是什么，通過什么功能實(shí)現(xiàn)的。產(chǎn)品的核心功能及交互流程是什么。
（3）誰來使用這個(gè)功能（目標(biāo)用戶）
思考：此業(yè)務(wù)目標(biāo)是針對(duì)哪些人群的，這些人群有什么共同的特點(diǎn)，和行為習(xí)慣。
（4）他們?yōu)槭裁匆褂眠@個(gè)功能（用戶需求）
思考：這些人群有哪些共同的需求點(diǎn)，產(chǎn)品目標(biāo)是否滿足這類人群的核心需求，解決了哪些痛點(diǎn)。這些人群期望怎樣的結(jié)果。設(shè)計(jì)師該如何引導(dǎo)用戶，理解產(chǎn)品目標(biāo)。
（5）他們?cè)谑裁辞闆r下使用這個(gè)功能（用戶場(chǎng)景）
思考：在這樣的業(yè)務(wù)目標(biāo)下，用戶在什么場(chǎng)景使用該功能，為什么使用，會(huì)不會(huì)有反感，如果我是用戶，我的感受是什么。
其實(shí)，業(yè)務(wù)目標(biāo)和用戶的需求是矛盾的。比如，業(yè)務(wù)方希望提升注冊(cè)率，但對(duì)于用戶而言，注冊(cè)與否并不敏感，或者根本不想走一遍繁瑣的注冊(cè)流程。這時(shí)產(chǎn)品就需要在特定的場(chǎng)景下，在某個(gè)功能流程中恰好出現(xiàn)注冊(cè)功能，讓用戶不得不注冊(cè)，因?yàn)橛脩舨蛔?cè)就得不到他剛好想要的服務(wù)或體驗(yàn)。這個(gè)時(shí)候設(shè)計(jì)師要考慮的是，通過設(shè)計(jì)營造一種喜悅的氛圍，不讓用戶感到反感。因此設(shè)計(jì)師的核心價(jià)值在于，如何平衡業(yè)務(wù)目標(biāo)和用戶需求之間的矛盾，做出有效視覺引導(dǎo)。
三、拆解需求
拆解需求指的是，當(dāng)設(shè)計(jì)師分析需求方的需求后，將需求拆解成其對(duì)應(yīng)的視覺解決方案。上文中提到，需求分析不需要達(dá)到產(chǎn)品經(jīng)理的專業(yè)度，但“拆解需求”必須達(dá)到專家級(jí)程度。因?yàn)檫@部分是需求分析后，如何理解需求方的需求（業(yè)務(wù)目標(biāo)、產(chǎn)品目標(biāo)）的關(guān)鍵所在。這時(shí)，我們視覺設(shè)計(jì)師要思考一下幾點(diǎn)：
1、信息層級(jí)
（1）信息層級(jí)的分類（在明確需求后要對(duì)信息進(jìn)行劃分及拆解）
（a）用戶能否在最短的時(shí)間閱讀到信息、
（b）哪些信息是屬于業(yè)務(wù)流程范圍的、
（c）哪些信息是產(chǎn)品想要突出表現(xiàn)的、
（d）哪些信息看似不重要但沒有還不行、
（e）信息描述前后是否統(tǒng)一，會(huì)不會(huì)給用戶帶來困惑
（2）信息層級(jí)的權(quán)重
在明確主要信息歸類后，通過視覺上的，黑、白、灰，把層級(jí)表達(dá)清楚。明確信息權(quán)重，權(quán)重高的是否優(yōu)先展示，有沒有誤導(dǎo)用戶。
2、功能層級(jí)
（1）功能優(yōu)先級(jí)權(quán)重劃分（在明確功能后要對(duì)功能進(jìn)行分類及拆解）
（a）哪些功能優(yōu)先級(jí)最高，哪些是屬于主業(yè)務(wù)流程及功能流程、哪些功能是子功能、
（b）哪些功能產(chǎn)品經(jīng)理并不想突出，但用戶卻需要的、
（c）同一個(gè)頁面，同一功能多次出現(xiàn)，產(chǎn)品經(jīng)理的目的是什么、
（d）產(chǎn)品不同時(shí)期，功能的視覺變現(xiàn)是否有差異、
（2）交互層邏輯是否貼合用戶場(chǎng)景
在明確業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)后，設(shè)計(jì)師要反復(fù)驗(yàn)證交互邏輯是否合理，邏輯是否符合該用戶場(chǎng)景。
（3）交互體驗(yàn)是否流暢
在明確目標(biāo)用戶與使用場(chǎng)景后，把自己融入到使用場(chǎng)景中，反復(fù)驗(yàn)證交互流程。看是否符合業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)，同時(shí)看交互流程是否流暢，有沒有給自己帶來障礙。
（4）用戶操作是否便捷
如果自己是用戶，操作是否符合用戶行為習(xí)慣，有沒有恰好出現(xiàn)在該出現(xiàn)的位置上，視覺展示是否引導(dǎo)合理，視覺引導(dǎo)有沒有給用戶帶來誤區(qū)。
3、頁面布局
在明確目標(biāo)用戶與使用場(chǎng)景后，把自己模擬成目標(biāo)用戶，思考頁面布局是否符合用戶行為習(xí)慣和心理預(yù)期。主流程下的控件是否在視覺上有點(diǎn)擊欲望，會(huì)不會(huì)反感。（用戶體驗(yàn)中已有詳細(xì)說明）
4、狀態(tài)的查缺補(bǔ)漏
各類交互狀態(tài)，如，圖標(biāo)點(diǎn)擊后的狀態(tài)（移動(dòng)端、pc端）、hover 狀態(tài)（pc端）、非主業(yè)務(wù)流程下的功能提示（如：錯(cuò)誤提示、缺省提示）。這些產(chǎn)品經(jīng)理往往會(huì)忽略掉，或者文檔里也會(huì)給出過，要注意觀察及時(shí)查缺補(bǔ)漏。
5、視覺的有效引導(dǎo)
在準(zhǔn)確的理解產(chǎn)品需求，做到“同頻思考”后，分析信層級(jí)和功能優(yōu)先級(jí)及權(quán)重劃分，將這些在視覺設(shè)計(jì)的過程中做有效的引導(dǎo)，并時(shí)刻查缺補(bǔ)漏。這個(gè)時(shí)候?qū)τ谀男┬畔⒑凸δ苄枰怀?，哪些信息和功能需要弱化，在頭腦里有個(gè)清晰的認(rèn)知和思路。讓信息和功能恰好出現(xiàn)在用戶期望的位置上，并且解決產(chǎn)品目標(biāo)為目的，也就是上文中提到的用戶體驗(yàn)的核心點(diǎn)，解
決問題。
值得注意的是：
視覺設(shè)計(jì)師是對(duì)產(chǎn)品方案的進(jìn)一步完善，以用戶為中心的用戶體驗(yàn)思想，用視覺引導(dǎo)的方式引導(dǎo)用戶實(shí)現(xiàn)產(chǎn)品目標(biāo)的，而非只會(huì)照著原型圖毫無思想的畫圖。同時(shí)要讓用戶無論在視覺上還是體驗(yàn)上，都能感受到“舒爽”而非“酸爽”。
產(chǎn)品經(jīng)理給出的原型，重心在業(yè)務(wù)邏輯，因此，為了提升用戶體驗(yàn)、避免給用戶帶來誤區(qū)和障礙，設(shè)計(jì)師要以產(chǎn)品思維（產(chǎn)品思維和業(yè)務(wù)思維是不一樣的）在業(yè)務(wù)及產(chǎn)品目標(biāo)、主功能邏輯不變的情況下，重新劃分信息層級(jí)、做好頁面布局，做好視覺引導(dǎo)。
四、競品分析
通過需求分析（理解需求）、和拆解需求（明確設(shè)計(jì)目標(biāo)）后，在正式進(jìn)入視覺設(shè)計(jì)之前，視覺設(shè)計(jì)師們通常要先找一波資料（找參考），如果只是這樣，那么僅僅是尋找視覺表現(xiàn)手法而已（什么風(fēng)格、什么顏色）。本文中所提到的競品分析，不是產(chǎn)品競品分析也不是交互競品分析，而是為了視覺設(shè)計(jì)而準(zhǔn)備的視覺競品分析?；凇叭溌贰彼季S模式下通常需要考慮一下幾點(diǎn)：
（1）我們的方案和競品的區(qū)別在哪里，為什么不同。
跟競品之間的區(qū)別很重要，因?yàn)槊總€(gè)產(chǎn)品業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)，以及產(chǎn)品處于的階段都是不一樣的，即便看著很類似也不可以盲目參考。
例如：產(chǎn)品階段的不同，對(duì)于“搜索”功能的要求是不一樣的，產(chǎn)品初期由于信息量不夠，搜索不出太多的內(nèi)容。屬于沒有還不行，有了還不能太明顯，不能誤導(dǎo)用戶去搜索，而是要用分類功能。因此，即使產(chǎn)品經(jīng)理給出了“”搜索”功能，在視覺上也要弱化變現(xiàn)。但你如果參考了成熟期的產(chǎn)品，可想而知你設(shè)計(jì)出的“搜索”會(huì)是什么樣的了吧。
（2）競品是怎么做的，優(yōu)點(diǎn)在哪里，解決了哪些問題，他們?yōu)槭裁催@么做
我們要找到與本產(chǎn)品業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)基本一致的競品去對(duì)比，切勿只是原型基本類似就以為目標(biāo)一致。因此，先要看這個(gè)競品都解決了哪些問題。
（3）什么是我們可以借鑒的，是否可以改進(jìn)
在確定目標(biāo)基本一致后，要分析哪些可以借鑒，能不能比他做的更好，如果只是抄襲，那就沒有意思了。
（4）那么設(shè)計(jì)該如何表達(dá)，比競品做的更好
經(jīng)過上述分析，在這個(gè)階段對(duì)于視覺設(shè)計(jì)師而言，設(shè)計(jì)方案基本在腦子里已經(jīng)成型了。這時(shí)對(duì)于什么風(fēng)格、什么顏色，才基本符合產(chǎn)品預(yù)期。在結(jié)合需求拆解的方式，拿出可行的設(shè)計(jì)方案。
轉(zhuǎn)自-站酷
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com