做一個(gè)完整B端系統(tǒng)項(xiàng)目前，從交互設(shè)計(jì)的七大定律，B端產(chǎn)品業(yè)務(wù)調(diào)研，用戶(hù)訪談研究方法，精準(zhǔn)推導(dǎo)B端用戶(hù)畫(huà)像，到B端產(chǎn)品主風(fēng)格的設(shè)計(jì)定調(diào)，深度理解B端主流組件庫(kù)的視覺(jué)規(guī)范，進(jìn)而為B端產(chǎn)品設(shè)計(jì)做充分的準(zhǔn)備工作，以下內(nèi)容較多，大家可以根據(jù)上述目錄來(lái)進(jìn)行選擇性閱讀。
1.1 B端組件庫(kù)的概念及作用
概念：組件庫(kù)的底層邏輯就是原子理論，類(lèi)似于我們?cè)谄礃?lè)高積木的時(shí)候，根據(jù)說(shuō)明書(shū)一個(gè)模塊一個(gè)模塊來(lái)拼湊，先找零件，再拼成部件，然后是成品，這個(gè)過(guò)程和UI中的組件化是一模一樣的，組件化就是原子理論集中得表現(xiàn)，原子（圖標(biāo)、按鈕、字體樣式等）——分子（標(biāo)簽欄、導(dǎo)航欄、搜索框等）——有機(jī)體（圖文列表、內(nèi)容卡片、布局模塊、瀑布流圖等）——模板（原子、分子組合排列組成了模板，也就是原型圖）——界面（最后根據(jù)原型圖形成視覺(jué)設(shè)計(jì)稿）
作用：一致性：比如在不同得界面中，如果用樣的按鈕，他的按鈕的展現(xiàn)形式，要保持一致性。
高效性：比如所有的按鈕不用單獨(dú)去設(shè)計(jì)了，從組件庫(kù)里調(diào)用就可以，這樣對(duì)于設(shè)計(jì)師來(lái)說(shuō)就是高效的。對(duì)用戶(hù)來(lái)說(shuō)，也會(huì)讓用戶(hù)的使用效率提升，比如當(dāng)用戶(hù)看到藍(lán)色的按鈕就是可以提交的按鈕，看到白色得按鈕就是次要得按鈕，看到不帶邊框的按鈕就是一個(gè)危險(xiǎn)按鈕等等。
組合性：通過(guò)調(diào)用不同的組件來(lái)進(jìn)行組合可以形成不同的頁(yè)面。
1.2 如何正確使用組件庫(kù)
1.2.1 組件庫(kù)的使用前提
一些主流的組件庫(kù)，比如AntDesign、Element Design、ZanDesign組件庫(kù)等，這些框架機(jī)構(gòu)本質(zhì)都差不太多， 但他們有自己的特點(diǎn)，具體用哪個(gè)組件庫(kù)，通常由公司的架構(gòu)師來(lái)進(jìn)行架構(gòu)選型，比如VUE（Element Design）和REACT（Ant Design），這是兩種不同的技術(shù)選型，（VUE和REACT是一種前端框架的技術(shù)架構(gòu)版本，可幫助前端工程師快速進(jìn)行開(kāi)發(fā)的前端框架）。從技術(shù)角度講，大部分公司會(huì)首選AntDesign（React），因?yàn)橛泻芏喟咐峁?，VUE和有贊也可以但用的少。從設(shè)計(jì)角度，Ant Design得設(shè)計(jì)組件形式案例很完善。Element Design做起來(lái)視覺(jué)單一得樣式白白得感覺(jué)，沒(méi)有設(shè)計(jì)層次化，Ant Design更好看一點(diǎn)。所以先選擇底層的前端框架，再根據(jù)這個(gè)選擇前端的機(jī)構(gòu)布局。
1.2.2 組件庫(kù)的使用過(guò)程
設(shè)計(jì)師和前端最終目標(biāo)是一樣的，都是快完成保證設(shè)計(jì)質(zhì)量的，原生組件不能達(dá)到要求的時(shí)候，設(shè)計(jì)師可以根據(jù)原生組件庫(kù)修改樣式來(lái)表達(dá)到自己的想法。但對(duì)前端來(lái)說(shuō)最好什么都別改，就用原生組件庫(kù)前端工程師直接復(fù)制就行，這也是因?yàn)槲覀冊(cè)O(shè)計(jì)師的要求和前端的要求是不一樣的。但修改后樣式的組件，底層邏輯還是原來(lái)的組件。從Antdesign等組件庫(kù)里復(fù)制出來(lái)，經(jīng)過(guò)figma里的各種功能操作后，比如分離組件、改變組件得形狀、替換內(nèi)容等，但這個(gè)組件仍然是Antdesign里的組件，組件是否改變?nèi)Q于，這個(gè)圖形，這個(gè)組件是不是已經(jīng)代碼化，我們?cè)O(shè)計(jì)師設(shè)計(jì)的組件，只是樣式，需要經(jīng)過(guò)前端來(lái)形成代碼，只有代碼化的組件，才是組件，如果沒(méi)有代碼化，那只是一個(gè)樣式而已。所以，我們用Antdesign里是已經(jīng)實(shí)現(xiàn)代碼化了得組件，組件庫(kù)里有的組件前端一定是可以代碼實(shí)現(xiàn)的。
1.3 如何設(shè)計(jì)組件庫(kù)
1.3.1 每個(gè)項(xiàng)目都會(huì)分這四個(gè)周期
項(xiàng)目初期：在一個(gè)B端項(xiàng)目得初期，大家都會(huì)有疑問(wèn)，B端組件庫(kù)應(yīng)該什么時(shí)候開(kāi)始建立？是不是先建組件庫(kù)再開(kāi)始設(shè)計(jì)？答案是，如果不是從0開(kāi)始的項(xiàng)目，組件庫(kù)在設(shè)計(jì)之初就應(yīng)該建立起來(lái)，如果項(xiàng)目是從0開(kāi)始，由于沒(méi)有業(yè)務(wù)的案例，組件庫(kù)組件庫(kù)也無(wú)法建立，但可以建立一些最小元素：原子。比如字體（應(yīng)該用什么樣的字體，在正標(biāo)題，副標(biāo)題，大標(biāo)題，正常情況下應(yīng)該怎么樣使用字體的得明度）、色彩（色彩規(guī)范是什么，比如醫(yī)療行業(yè)，航空行業(yè)，交通行業(yè)應(yīng)該用什么色彩，決定主色不是好不好看，而是由企業(yè)來(lái)決定得，首先了解企業(yè)的VI色，通過(guò)結(jié)合VI色和產(chǎn)品分析出的用戶(hù)畫(huà)像特征，來(lái)確定主色，輔主色，確定主色后，相應(yīng)的背景色、深色背景、淺色背景、灰度背景、卡片背景等，也就都可以做出來(lái)了）、按鈕（通常狀態(tài)，點(diǎn)擊狀態(tài)，當(dāng)前焦點(diǎn)狀態(tài)，不可點(diǎn)狀態(tài)）、基本控件、布局柵格、圖表（圖標(biāo)icon、文本標(biāo)簽、按鈕、圖表）、圖標(biāo)；通過(guò)建立原子組件，完成一些基本典型的頁(yè)面設(shè)計(jì)。
項(xiàng)目中期：繼續(xù)完善基本組件庫(kù)，應(yīng)用案例的完善，迭代組件庫(kù)、樣例庫(kù)、最佳實(shí)踐案例。然后再次迭代進(jìn)入基本組件庫(kù)。
項(xiàng)目后期：形成最終組件庫(kù)與設(shè)計(jì)系統(tǒng)的規(guī)范建立，根據(jù)項(xiàng)目不一樣詳細(xì)程度也可以不一樣。
延展期：為項(xiàng)目2.0升級(jí)準(zhǔn)備根據(jù)使用反饋、迭代之前得組件庫(kù)與規(guī)范，預(yù)計(jì)未來(lái)版本中出現(xiàn)的典型案例，并針對(duì)性的設(shè)計(jì)應(yīng)用組件。通常很少有公司進(jìn)行到這一步。
1.3.2 組件庫(kù)的開(kāi)發(fā)流程
1.3.3 B端組件庫(kù)存在的價(jià)值
B端組件庫(kù)的存在是不是意味著不需要設(shè)計(jì)師了？其實(shí)并不是，組件庫(kù)可以幫助設(shè)計(jì)師增進(jìn)設(shè)計(jì)效率和溝通效率，和前端溝通告知按照對(duì)應(yīng)的選型組件庫(kù)規(guī)范使用就可以了，同時(shí)組件庫(kù)得一致性、準(zhǔn)確性、協(xié)同性它的質(zhì)量有保證。但設(shè)計(jì)師做完組件庫(kù)后，繼續(xù)需要關(guān)注的點(diǎn)是：
01、根據(jù)業(yè)務(wù)場(chǎng)景來(lái)優(yōu)化設(shè)計(jì)組件庫(kù)：因?yàn)榻M件庫(kù)是一定會(huì)去更新的，如有必要再去更新，那一定會(huì)是很復(fù)雜得業(yè)務(wù)場(chǎng)景下去做更新的，這個(gè)業(yè)務(wù)場(chǎng)景是程序員或者以前的組件不能實(shí)現(xiàn)的，需要很強(qiáng)的設(shè)計(jì)技能去做迭代，所以需要設(shè)計(jì)師繼續(xù)去做一些結(jié)合業(yè)務(wù)場(chǎng)景的組件來(lái)放到組件庫(kù)里。
02、需要設(shè)計(jì)師把更多時(shí)間精力投入更多設(shè)計(jì)體驗(yàn)中，而非搬磚：組件庫(kù)的建立同時(shí)解放了設(shè)計(jì)師的精力，設(shè)計(jì)師可以把時(shí)間投入到設(shè)計(jì)體驗(yàn)中去，而不是做一些搬磚得工作，比如按鈕怎么畫(huà)，用圓角還是用什么顏色，這些沒(méi)有技術(shù)含量的工作，這樣一來(lái)，可以投入更多時(shí)間來(lái)賦能業(yè)務(wù)更好體驗(yàn)設(shè)計(jì)工作。
1.3.4 B端主流組件庫(kù)有哪些
2.1 B端產(chǎn)品的設(shè)計(jì)過(guò)程
2.1.1 用戶(hù)體驗(yàn)五要素
戰(zhàn)略層（屬于產(chǎn)品愿景，滿(mǎn)足用戶(hù)的需求，產(chǎn)品的愿景和目標(biāo)）
由于用戶(hù)有不同的需求進(jìn)而產(chǎn)生了不同的產(chǎn)品，戰(zhàn)略層決定了用戶(hù)用干什么樣的產(chǎn)品，比如，用戶(hù)需有很多銷(xiāo)售客戶(hù)的線索需要進(jìn)行管理，用戶(hù)需要管理客戶(hù)，那就做一個(gè)CRM系統(tǒng)。比如，用戶(hù)想寫(xiě)日?qǐng)?bào)，想要一個(gè)打卡的OA系統(tǒng)，那么產(chǎn)品目標(biāo)就是要做一個(gè)OA系統(tǒng)。比如，電商里面很多商品，牽扯到很多進(jìn)銷(xiāo)存，那就做一個(gè)ERP系統(tǒng)。這部分跟設(shè)計(jì)師相關(guān)度沒(méi)有那么高。
范圍層（指功能規(guī)劃，功能的規(guī)格、包括內(nèi)容的需求）
功能規(guī)劃：比如要做一個(gè)OA系統(tǒng)，其中就包含了打卡、日?qǐng)?bào)、項(xiàng)目管理、報(bào)銷(xiāo)、人事流轉(zhuǎn)等等都是跟辦公相關(guān)聯(lián)的，需要把規(guī)格和功能畫(huà)出來(lái)，畫(huà)成簡(jiǎn)單的表格并且將它們分類(lèi)，這里所有的功能都不是詳細(xì)的，就是簡(jiǎn)單的分類(lèi)，將功能簡(jiǎn)單描述一下，同時(shí)做一個(gè)簡(jiǎn)單的用戶(hù)畫(huà)像。這部分設(shè)計(jì)師只需要閱讀產(chǎn)品經(jīng)理給到得PRD需求文檔即可，整體看還是偏愿景，沒(méi)有形成具體的產(chǎn)出。比如OA系統(tǒng)中就總結(jié)出重點(diǎn)做一個(gè)審批得功能，并不知道什么樣的界面，只知道一個(gè)大概的范圍。
結(jié)構(gòu)層（指原型設(shè)計(jì)）
這部分，設(shè)計(jì)師通常就需要參與進(jìn)來(lái)，如果設(shè)計(jì)師只按產(chǎn)品給的設(shè)計(jì)好的原型來(lái)設(shè)計(jì)，就顯得很被動(dòng)，這樣只能叫做視覺(jué)美化，被稱(chēng)之為美工，設(shè)計(jì)師應(yīng)該從沒(méi)有形成原型的時(shí)候，可能只是一個(gè)簡(jiǎn)單的PRD需求文檔或者草圖，設(shè)計(jì)師就應(yīng)該參與進(jìn)去。
設(shè)計(jì)師對(duì)原型進(jìn)行優(yōu)化設(shè)計(jì)，優(yōu)化的不是業(yè)務(wù)，因?yàn)楹芏鄻I(yè)務(wù)內(nèi)容肯定沒(méi)有產(chǎn)品經(jīng)理了解得深刻入，這時(shí)，設(shè)計(jì)師需要優(yōu)化的其實(shí)是它的交互邏輯、交互內(nèi)容，一旦原型里里產(chǎn)生點(diǎn)擊，一旦產(chǎn)生多種狀態(tài)，那就要去了解它，每種狀態(tài)產(chǎn)生不一樣的界面結(jié)果，其實(shí)對(duì)標(biāo)的就是設(shè)計(jì)師設(shè)計(jì)的界面將產(chǎn)生什么樣的變化，換句話(huà)說(shuō)，如果有界面的變化，內(nèi)容得變化，設(shè)計(jì)師就需要參與到其中。目前來(lái)看，很少公司有專(zhuān)門(mén)的交互設(shè)計(jì)師，要么這部分工作由UI設(shè)計(jì)師來(lái)完成，要么由產(chǎn)品經(jīng)理來(lái)完成，很多企業(yè)已經(jīng)把設(shè)計(jì)進(jìn)行前置化，由UI設(shè)計(jì)師來(lái)完成交互的工作。
其中交互設(shè)計(jì)+信息架構(gòu)設(shè)計(jì)是設(shè)計(jì)原型圖的關(guān)鍵，這兩個(gè)是密不可分的，如何制作原型圖，如何在原型圖里設(shè)置一些交互事件，給大家推薦《信息架構(gòu)設(shè)計(jì)》這本書(shū)里有專(zhuān)門(mén)講到。再了解原型設(shè)計(jì)之前，不得不提到一個(gè)通用知識(shí)點(diǎn)，交互設(shè)計(jì)的七大定律。（后文有介紹）
框架層（指界面設(shè)計(jì)、組件設(shè)計(jì)）
框架層這部分有一些爭(zhēng)議，有的設(shè)計(jì)師認(rèn)為就直接做界面設(shè)計(jì)了，其實(shí)框架層還不能把它理解成是界面設(shè)計(jì)，它僅僅是做了一些業(yè)務(wù)的模塊兒的框架而已，更多的其實(shí)是將它組件化: 將原型組件化、模塊兒化，類(lèi)似我們直接從Antdesign組件庫(kù)復(fù)制來(lái)內(nèi)容簡(jiǎn)單改改之類(lèi)得操作，完成的是組件和界面的設(shè)計(jì)，這些界面并不是最終完整的交付樣式。
表現(xiàn)層（可視化呈現(xiàn)，UI視覺(jué)呈現(xiàn)）
這部分和設(shè)計(jì)師關(guān)聯(lián)度最大的一部分，就是界面中的配色、配色、圖標(biāo)、樣式、結(jié)構(gòu)、布局、排版等設(shè)計(jì)，但是我們?cè)O(shè)計(jì)師需要從范圍層了解業(yè)務(wù)熟悉最初PRD產(chǎn)品需求文檔去一點(diǎn)點(diǎn)做起，其中設(shè)計(jì)師在戰(zhàn)略層參與度可能只有2%左右，范圍層參與度5%左右，從結(jié)構(gòu)層開(kāi)始逐步往上參與度越來(lái)越高，至少結(jié)構(gòu)層，框架層和表現(xiàn)層的參與度是很深得。
2.1.2 B端產(chǎn)品的設(shè)計(jì)過(guò)程是什么
所以，通過(guò)梳理用戶(hù)體驗(yàn)五要素，不難看出B端UI設(shè)計(jì)師的工作流程就是，01. 接到項(xiàng)目后，設(shè)計(jì)師主要閱讀產(chǎn)品經(jīng)理給到的PRD需求文檔，同時(shí)去參與原型設(shè)計(jì)，根據(jù)最初版PRD輸出一份低保真原型圖，和其他部門(mén)進(jìn)行初次評(píng)審；02. 經(jīng)過(guò)初次評(píng)審討論過(guò)后，完善后的功能和頁(yè)面文案，產(chǎn)品經(jīng)理補(bǔ)全和輸出完善后的產(chǎn)品PRD需求文檔，由設(shè)計(jì)師根據(jù)完善后得PRD需求文檔經(jīng)過(guò)規(guī)范設(shè)計(jì)輸出高保真原型圖 ，與其他部門(mén)帶著初次評(píng)審討論后的問(wèn)題，進(jìn)行二次評(píng)審。03. 最終再由設(shè)計(jì)師經(jīng)過(guò)組件化形成視覺(jué)圖。04. 同時(shí)設(shè)計(jì)師提供切圖，與前端緊密溝通，上線前制作設(shè)計(jì)走查表，進(jìn)行設(shè)計(jì)走查。05、最后上線后根據(jù)數(shù)據(jù)、用戶(hù)反饋等提出交互和視覺(jué)可優(yōu)化得方案建議，進(jìn)行版本迭代。
2.2 交互設(shè)計(jì)七大定律
01. 菲茨定律：當(dāng)設(shè)計(jì)師需要讓用戶(hù)重點(diǎn)去看到頁(yè)面中某一個(gè)突出點(diǎn)，點(diǎn)擊到一個(gè)區(qū)域時(shí)，設(shè)計(jì)師就需要做到適合的大小，適合的區(qū)域，適合的位置，適合的形狀，適合的顏色。也就是你想讓用戶(hù)點(diǎn)擊的時(shí)候就突出重點(diǎn)想顯示的，不想讓用戶(hù)點(diǎn)擊退出的，就把它設(shè)計(jì)的的足夠小。比如按鈕得退出和付款，實(shí)心付款按鈕為主要按鈕，虛線置灰退出按鈕為次要按鈕，比如常說(shuō)的海報(bào)中字要大，logo要大，這些都屬于菲茨定律。
02. 席克定律：用戶(hù)面對(duì)的刺激（或選擇）越多，他們做出決定的時(shí)間就越長(zhǎng)，由于用戶(hù)的時(shí)間很寶貴 ，用戶(hù)沒(méi)有義務(wù)花更多留在我們的網(wǎng)站上，所以我們需要有選擇的地方對(duì)選擇進(jìn)行分類(lèi)。
03. 7土2法則（米勒定律）：比如圓周率3.1415926，一般都能記住，而如果再往后加幾個(gè)數(shù)字，大家往往很難記住，原因就是經(jīng)過(guò)大量測(cè)試，人腦容易記憶7位數(shù)字前后得數(shù)字，比如設(shè)計(jì)銀行輸入密碼的時(shí)候就用到了7土2 法則，設(shè)置密碼過(guò)多人腦不易記憶。
04. 接近法則：格式塔接近定律指出“彼此靠近的物體或形狀似乎形成了組”。
05. 防錯(cuò)原則：當(dāng)用戶(hù)在使用產(chǎn)品中，預(yù)判用戶(hù)本身或產(chǎn)品一定會(huì)出錯(cuò)時(shí)候，可以告訴用戶(hù)怎么可以不犯錯(cuò)，或者將風(fēng)險(xiǎn)降低。比如電腦的關(guān)閉電源鍵，就允許電腦司機(jī)時(shí)允許系統(tǒng)犯錯(cuò)，讓用戶(hù)使用關(guān)閉電腦電源鍵進(jìn)行重啟。比如銀行取出錢(qián)后，銀行卡有忘拔現(xiàn)象，銀行完全可以做到像光大銀行那樣去再取錢(qián)流程中改成先拔卡再出鈔得交互流程，就可以避免忘記拔卡，但其他銀行都沒(méi)有這么改進(jìn)，仍然是先出鈔后拔卡得原因是允許用戶(hù)犯錯(cuò)。
06. 奧卡姆剃刀原理：化繁為簡(jiǎn)，如無(wú)必要，勿增實(shí)體。比如小米電視遙控器的設(shè)計(jì)，由原來(lái)傳統(tǒng)的很多遙控器按鍵只優(yōu)化成了保留上下左右為數(shù)不多的幾個(gè)重要按鍵，原來(lái)的遙控器數(shù)字按鈕如果真正要輸入數(shù)字的時(shí)候通過(guò)功能性，調(diào)出數(shù)字來(lái)，這樣在遙控器得設(shè)計(jì)中基本只保留20%主要功能按鍵。這就是交互上的優(yōu)化。比如在UI界面中，也會(huì)用到這個(gè)問(wèn)題，簡(jiǎn)化文字，把文字用圖標(biāo)替換，還有各種流程得優(yōu)化等等。
07. 雅克布定律：以用戶(hù)習(xí)慣的使用模式去設(shè)計(jì)產(chǎn)品，降低用戶(hù)學(xué)習(xí)成本，遵從用戶(hù)使用習(xí)慣。 利用現(xiàn)有的思維模型，用戶(hù)習(xí)慣，我們可以創(chuàng)建出色的用戶(hù)體驗(yàn)，使用戶(hù)可以專(zhuān)注于自己的任務(wù)而不是學(xué)習(xí)新的模型習(xí)慣。
2.3 B端產(chǎn)品用戶(hù)畫(huà)像
2.3.1用戶(hù)畫(huà)像概念
用戶(hù)畫(huà)像又稱(chēng)用戶(hù)角色，作為一種勾畫(huà)目標(biāo)用戶(hù)、聯(lián)系用戶(hù)訴求與設(shè)計(jì)方向的有效工具，用戶(hù)畫(huà)像在各領(lǐng)域得到了廣泛應(yīng)用。用戶(hù)畫(huà)像分為兩種，不論C端和B端都會(huì)做這樣的用戶(hù)畫(huà)像?？偣部煞譃閮刹糠郑拘畔?shù)據(jù)和行為數(shù)據(jù)。
基本信息數(shù)據(jù)：當(dāng)我們?nèi)チ私庥脩?hù)的基本信息的一些數(shù)據(jù)時(shí)，職業(yè)，收入，年齡等等，這些和功能有很多的關(guān)聯(lián)度，比如唯品會(huì)用戶(hù)畫(huà)像關(guān)鍵詞是：女性、折扣、白領(lǐng) ，唯品會(huì)產(chǎn)品定位聚焦女性，這些基礎(chǔ)信息數(shù)據(jù)，就能給產(chǎn)品帶來(lái)很好的結(jié)果，當(dāng)我們要做一個(gè)女性的購(gòu)物平臺(tái)的時(shí)候，可以先把男性用戶(hù)拋除掉去考慮設(shè)計(jì)方向，再比如收入就知道了，大概產(chǎn)品面向的收入群體將是什么收入群體的人，那么我賣(mài)貨的價(jià)格區(qū)間、包括設(shè)計(jì)的風(fēng)格就是一個(gè)什么樣群體的設(shè)計(jì)風(fēng)格。那些賣(mài)奢侈品的不是黑色就是灰色，要不就是棕色，但未必是適合唯品會(huì)產(chǎn)品的風(fēng)格，需要找出這些基本信息去和產(chǎn)品進(jìn)行關(guān)聯(lián)度，把基本信息放到設(shè)計(jì)結(jié)果中去考慮。
行為數(shù)據(jù)：指用戶(hù)的愛(ài)好，這部分群體有哪些愛(ài)好，是喜歡購(gòu)物，還是喜歡運(yùn)動(dòng)，他/她的消費(fèi)情況是什么，喜歡旅游還是美食，他/她經(jīng)常用哪些APP，他常用的設(shè)備，是蘋(píng)果手機(jī)呢還是安卓，小米還是華為，等等得到這些數(shù)據(jù)，也能得到一些用戶(hù)喜歡什么樣的競(jìng)品，這些數(shù)據(jù)就能側(cè)面的在我們的產(chǎn)品中得到反饋，得到功能和設(shè)計(jì)上的指導(dǎo)和其他產(chǎn)品的區(qū)別。這些行為數(shù)據(jù)，不管我們做C端還是B端，都要獲取到，但C端和B端獲取到這些行為數(shù)據(jù)的結(jié)論是不一樣的。因?yàn)镃端用戶(hù)研究方法不一定適用在B端用戶(hù)研究方法。C端最終抽象成一個(gè)人，給他帶來(lái)的很多屬性，這些等等都會(huì)成為他的用戶(hù)畫(huà)像。
進(jìn)而找到這個(gè)人，將他的社會(huì)屬性，從抽象的角度慢慢變得具象，C端是他/她的社會(huì)屬性，把他做成一個(gè)普通的人，這個(gè)人有他的社會(huì)屬性，有他的社會(huì)價(jià)值，有他的社會(huì)行為。比如一個(gè)女性，一定喜歡美食，一定會(huì)買(mǎi)化妝品。
2.3.2 B端用戶(hù)畫(huà)像本質(zhì)
比如做一個(gè)和電影相關(guān)的管理系統(tǒng)，電影行業(yè)包括很多人員管理，設(shè)備管理等，這里不能把用戶(hù)畫(huà)像抽象成一個(gè)男性或者女性了，而應(yīng)該把它抽象成一個(gè)職業(yè)，比如抽象成一個(gè)導(dǎo)演，導(dǎo)演需要去管理什么東西，它需要哪些資源去整合。導(dǎo)演就又叫做行業(yè)屬性坐標(biāo)。B端不以社會(huì)屬性去做用戶(hù)畫(huà)像，一定以行業(yè)坐標(biāo)去做用戶(hù)畫(huà)像，我們?cè)谡碜髌芳臅r(shí)候需注意不要與C端畫(huà)像整理混淆。
我們要做一個(gè)行業(yè)可以不用管他/她是誰(shuí)，也可以不用管他/她有什么樣的社會(huì)屬性，比如做CRM最重要的在里面起到作用的是，客戶(hù)關(guān)系管理和銷(xiāo)售等; 比如做OA系統(tǒng)，就是一般的員工，等級(jí)，職能等等，可以看出行業(yè)屬性(職業(yè)屬性)決定了他的用戶(hù)畫(huà)像的精準(zhǔn)度，一定把這個(gè)人拉到行業(yè)里去研究，研究社會(huì)屬性沒(méi)有價(jià)值。這是C端和B端做用戶(hù)研究最大的區(qū)別。
2.4 B端產(chǎn)品用戶(hù)調(diào)研
2.4.1用戶(hù)調(diào)研的作用/目的/重要性
01. 了解產(chǎn)品業(yè)務(wù)需求定位：可以幫助了解目標(biāo)用戶(hù)的信息，從用戶(hù)的角度：未來(lái)使用你產(chǎn)品的用戶(hù)，他理不理解你的產(chǎn)品想要表達(dá)什么，你的產(chǎn)品講了哪些功能。因?yàn)楹芏嗪玫漠a(chǎn)品我們打開(kāi)它第一眼就知道要干什么，是給我們做什么的。同時(shí)站在設(shè)計(jì)者的角度：怎么可以把這個(gè)產(chǎn)品設(shè)計(jì)清楚，比如做一個(gè)CRM客戶(hù)關(guān)系管理系統(tǒng)，具體管理什么我們是不清晰的，想要清晰就需要通過(guò)用戶(hù)調(diào)研這個(gè)過(guò)程給它展開(kāi)。
02.解決功能信息架構(gòu)問(wèn)題：可以幫助設(shè)計(jì)師更明確需求功能得合理性和優(yōu)先級(jí)，比如頁(yè)面標(biāo)題的使用、標(biāo)題的層級(jí)、需要在信息層級(jí)清晰得情況下體現(xiàn)出來(lái)，而明確信息層級(jí)同樣需要通過(guò)用戶(hù)研究體現(xiàn)出來(lái)。
03.讓可用性測(cè)試更加準(zhǔn)確：可以幫助鎖定合適的測(cè)試用戶(hù)，來(lái)測(cè)試我們的產(chǎn)品使用程度，使用體驗(yàn)是不是好，這時(shí)需要要找目標(biāo)用戶(hù)去測(cè)試，比如小米有品針對(duì)群體是米粉，唯品會(huì)針對(duì)的群體是職場(chǎng)女性，而不像C端找所有的人去測(cè)試。
04.解決團(tuán)隊(duì)協(xié)作溝通問(wèn)題：確定用研目標(biāo)可以有理有據(jù)的把設(shè)計(jì)目標(biāo)和產(chǎn)品經(jīng)理的意見(jiàn)達(dá)成共識(shí)，因?yàn)槲磥?lái)一定會(huì)多次和產(chǎn)品進(jìn)行PK，像諸如設(shè)計(jì)師組件化沒(méi)用好這些理由也不會(huì)是pk點(diǎn)，確定用研護(hù)鏢可以更好的深度去理解原型圖，可以把團(tuán)隊(duì)協(xié)作溝通的問(wèn)題解決好。
2.4.2 用戶(hù)調(diào)研的方法
01. 確定研究對(duì)象：首先拿到一個(gè)產(chǎn)品，拿到一個(gè)需求的時(shí)候，這個(gè)需求通常很模糊，比如只告訴做一款CRM客戶(hù)關(guān)系管理系統(tǒng)，但汽車(chē)行業(yè)，服裝電商行業(yè)，保險(xiǎn)行業(yè)，銀行金融等等，都有CRM客戶(hù)管理系統(tǒng)，不同行業(yè)的CRM肯定是不一樣的，這時(shí)候，比如要做金融的CRM，那研究方向就已經(jīng)確定了，金融CRM就可以確定去研究金融行業(yè)的業(yè)務(wù)鏈，業(yè)務(wù)流程，具體找哪些用戶(hù)群體，可以根據(jù)以往的驚經(jīng)驗(yàn)和產(chǎn)品的目標(biāo)去確認(rèn)。
02. 找研究方法 : 研究方法分主動(dòng)和被動(dòng)，我們通常用的方法是被動(dòng)方法，比如自我報(bào)告法：當(dāng)這個(gè)產(chǎn)品產(chǎn)生了一些數(shù)據(jù)，我們從后臺(tái)可以拉取這些數(shù)據(jù)的時(shí)候，通過(guò)這些數(shù)據(jù)去分析，這是被動(dòng)的方法，這個(gè)被動(dòng)的方法所有項(xiàng)目都可以用。而主動(dòng)的方法，就是觀察和采訪，主動(dòng)去找用戶(hù)去找關(guān)聯(lián)度。
03. 獲取到數(shù)據(jù) : B端和C端區(qū)別之一是提高效率，它要產(chǎn)生的結(jié)果只有一個(gè)結(jié)果，就是減少成本，任何B端的系統(tǒng)都是為了實(shí)現(xiàn)這個(gè)目標(biāo)，提高效率和減少成本。所以獲取數(shù)據(jù)，研究數(shù)據(jù)的方向不能偏離搞錯(cuò)，用戶(hù)研究的方向不要搞錯(cuò)。比如我們以用戶(hù)為中心來(lái)設(shè)計(jì)，就會(huì)認(rèn)為用戶(hù)的操作體驗(yàn)感是第一位的，其實(shí)不對(duì)，放在第一位去考慮的應(yīng)該是以系統(tǒng)的最優(yōu)化，提升效率為第一位，而用戶(hù)也可以為這件事情做一些改變而找到平衡點(diǎn)，數(shù)據(jù)導(dǎo)向得提高效率，減少成本有時(shí)會(huì)大于用戶(hù)的操作體驗(yàn)。
04. 用研行為: 剛才前面提到的這些注意事項(xiàng)，到底應(yīng)該找什么方法去得到這些數(shù)據(jù)呢？第一我們可以通過(guò)后臺(tái)數(shù)據(jù)比如通過(guò)百度統(tǒng)計(jì)等系統(tǒng)來(lái)獲得；第二通過(guò)問(wèn)卷法發(fā)出一些問(wèn)卷，用戶(hù)可能散落在全國(guó)不同位置；第三可以通過(guò)用戶(hù)定性訪談來(lái)獲得；第四可以通過(guò)用戶(hù)旅程圖來(lái)決定用研行為。
05. 分析調(diào)研結(jié)果: 研究結(jié)果不是為了放到我們的B端作品集里的，而研究結(jié)果一定是為了去定性、定量、讓數(shù)據(jù)回歸到產(chǎn)品功能本身。同時(shí)經(jīng)常問(wèn)自己這些問(wèn)題，去根據(jù)研究結(jié)果和問(wèn)題進(jìn)行匹配思考，比如研究了那么多，用到了用戶(hù)畫(huà)像得出的結(jié)論了么，用到了哪里？在項(xiàng)目中能舉個(gè)例子嗎？采用什么樣的視覺(jué)去實(shí)現(xiàn)了用戶(hù)體驗(yàn)要素？
2.4.3 B端用戶(hù)訪談模板
2.4.3.1 用戶(hù)訪談概念：
01.確定訪談目標(biāo)：了解目標(biāo)用戶(hù)群體，通過(guò)訪談信息來(lái)進(jìn)一步構(gòu)建所需要的用戶(hù)畫(huà)像，從而確定設(shè)計(jì)方案與功能優(yōu)先級(jí)。02. 定性/定量訪談目標(biāo)：將這些目標(biāo)定量、定性，選擇不同的訪問(wèn)對(duì)象，構(gòu)建不同的角色畫(huà)像。比如問(wèn)銷(xiāo)售的用戶(hù)畫(huà)像，要找不同的訪問(wèn)對(duì)象，銷(xiāo)售總監(jiān)，普通實(shí)習(xí)生等等，三到四個(gè)角色，樣本越多，用戶(hù)畫(huà)像越準(zhǔn)確。03. 訪談過(guò)程：提前把問(wèn)題寫(xiě)出來(lái)，拿著問(wèn)題去聊，用錄音設(shè)備，記錄表格，一個(gè)提問(wèn)，一個(gè)記錄，分開(kāi)后記錄比較準(zhǔn)確。04.訪談結(jié)束：要做信息匯總，要做分析建模。分析建模就是將信息最終變得有意義。
B端用戶(hù)訪談模板有30個(gè)問(wèn)題，這30個(gè)問(wèn)題決定了我們的用戶(hù)畫(huà)像的精準(zhǔn)度和產(chǎn)品的用戶(hù)畫(huà)像的價(jià)值。用戶(hù)訪談會(huì)問(wèn)些什么問(wèn)題呢？當(dāng)我們調(diào)研的時(shí)候把問(wèn)題寫(xiě)出來(lái)的時(shí)候，就已經(jīng)解決了一半的問(wèn)題了。
2.4.3.2 B端用戶(hù)訪談30問(wèn)
01、基礎(chǔ)特征
崗位：你是從事什么崗位的？是總監(jiān)還是普通職員？目的是為了知道不同的權(quán)限的使用者，進(jìn)而就可以在系統(tǒng)中設(shè)置這些權(quán)限。
職責(zé)：需要獲取到用戶(hù)不同的需求，因?yàn)槊恳粋€(gè)崗位有不同的職責(zé)，他們的需求點(diǎn)也是不一樣的。根據(jù)這些不同的需求，我們?cè)诮缑嬷械脛?dòng)態(tài)儀表盤(pán)部分，就可以根據(jù)不同職責(zé)來(lái)顯示不同的內(nèi)容。
姓名：可以讓訪談?dòng)涗浀玫礁诱鎸?shí)的體現(xiàn)，目的是可以獲得產(chǎn)品的一些真實(shí)的基礎(chǔ)字段。
年齡：是用戶(hù)認(rèn)知和經(jīng)驗(yàn)度的體現(xiàn)，用戶(hù)的年齡可以代表他們對(duì)行業(yè)的認(rèn)知，和整個(gè)企業(yè)流程的認(rèn)知程度，一般性理解，用戶(hù)的年齡越大，那么他的經(jīng)驗(yàn)越豐富。
教育：指用戶(hù)是什么學(xué)歷，目的是為了了解用戶(hù)的經(jīng)歷與熟練程度，通常認(rèn)為，用戶(hù)的教育越高的人，他們往往使用軟件操作的熟練度會(huì)越好。
位置：指用戶(hù)在什么地方來(lái)使用，目的是知道了場(chǎng)景與優(yōu)先級(jí)，用戶(hù)是在寫(xiě)字樓里還是精英場(chǎng)所來(lái)使用我們的產(chǎn)品。因此得出基礎(chǔ)特征是要得出這些結(jié)論，得出這些結(jié)論進(jìn)而反饋到產(chǎn)品中去。
02、行為接觸點(diǎn)
使用頻次：不同的崗位用戶(hù)使用功能的優(yōu)先級(jí)是不一樣的，用戶(hù)使用頻次越高的功能，這個(gè)功能的優(yōu)先級(jí)就越高。了解之后，那在下次迭代的時(shí)候就需要把重要級(jí)別的功能放在易操作的區(qū)域去體現(xiàn)。比如這個(gè)重要功能就是一個(gè)icon，那么把它放一個(gè)快捷入口。
使用時(shí)長(zhǎng)：也能代表功能的優(yōu)先級(jí)，用戶(hù)使用時(shí)間最長(zhǎng)的功能，代表可這個(gè)功能優(yōu)先級(jí)很高。
時(shí)間段：用戶(hù)在什么時(shí)間段使用的是最多的，我們就知道了這個(gè)功能的活躍度，這個(gè)數(shù)據(jù)指標(biāo)，主要和技術(shù)有關(guān)，我們可以從后臺(tái)數(shù)據(jù)去獲得。
使用設(shè)備：用戶(hù)使用設(shè)備兼容的優(yōu)先級(jí)，平時(shí)用戶(hù)用什么設(shè)備，再訪談過(guò)程中，需要問(wèn)具體使用電腦的分辨率，屏幕的尺寸，屏幕的比例，都可以去實(shí)際的調(diào)研一下。在我們做B端界面選擇屏幕尺寸的時(shí)候，可以采用結(jié)合實(shí)際情況用戶(hù)使用的屏幕分辨率尺寸來(lái)設(shè)計(jì)界面。
相關(guān)軟件：用戶(hù)平時(shí)的操作習(xí)慣和流程是什么，還會(huì)使用其他軟件嗎？比如他們還用什么其他的競(jìng)品，可以繼續(xù)問(wèn)用戶(hù)其他的競(jìng)品哪里比較好，哪里是亮點(diǎn)，那最終得到的目標(biāo)就是用戶(hù)的操作習(xí)慣和流程，這些也可都可以反饋在我們產(chǎn)品中。
03. 使用環(huán)境
碎片化時(shí)間：主要解決用戶(hù)場(chǎng)景的問(wèn)題，比如汽車(chē)4S店銷(xiāo)售，當(dāng)你去買(mǎi)車(chē)時(shí)，銷(xiāo)售人員會(huì)問(wèn)，你會(huì)買(mǎi)什么樣的車(chē)，會(huì)記錄你的年齡，用車(chē)習(xí)慣，用車(chē)時(shí)間，姓名，預(yù)算，都會(huì)記錄，銷(xiāo)售通常會(huì)用一些碎片化的時(shí)間去記錄。此時(shí)就可以得出兩個(gè)結(jié)論：1.我們?cè)谠O(shè)計(jì)的時(shí)候是否可以考慮讓銷(xiāo)售充分利用碎片化來(lái)進(jìn)行這些信息的錄入，而且方便他的錄入，比如他本來(lái)只有電腦端，電腦端是一個(gè)完整版的功能，我們能不能給他設(shè)計(jì)出一個(gè)移動(dòng)端來(lái)，讓銷(xiāo)售不用回到電腦屏幕中就可以去記錄這些內(nèi)容。2. 記錄時(shí)也有兩種記錄方式，是客戶(hù)講話(huà)的時(shí)候銷(xiāo)售去記錄還是這些事情做完之后銷(xiāo)售再去記錄。通過(guò)這樣的行為會(huì)得到這樣不同的設(shè)計(jì)結(jié)果，比如有人問(wèn)你們公司為什么要做B端的移動(dòng)端設(shè)計(jì)？以上就可以有理有據(jù)去解決銷(xiāo)售的場(chǎng)景問(wèn)題。
用戶(hù)的操作環(huán)境是什么：主要解決視覺(jué)體驗(yàn)問(wèn)題，用戶(hù)是白天操作還是晚上操作，是在強(qiáng)光環(huán)境操作還是弱光環(huán)境操作。這些都應(yīng)該是考的點(diǎn)。比如B端使用的ATM機(jī)，應(yīng)該設(shè)計(jì)成白色還是深色模式，我們知道一般都是深色模式，是因?yàn)橥ǔＪ鞘覂?nèi)，它和光線有關(guān)系，如果是室外的取款機(jī)，四周又沒(méi)有遮擋，如果還設(shè)計(jì)成深色，肯定是看不清楚的。比如HMI車(chē)載系統(tǒng)，白天模式開(kāi)了深色，一定會(huì)看不清楚。所以要提前判斷使用深色模式還是淺色模式，也需要考慮在設(shè)計(jì)的時(shí)候使用什么樣的色彩和色調(diào)，在室外使用還是室內(nèi)使用，如果對(duì)色彩不怎么挑，那也可以使用VI色，這樣一來(lái)視覺(jué)的保障色就確定了。還可以確定在使用周期時(shí)間，要多長(zhǎng)時(shí)間完成一個(gè)操作，應(yīng)該使用什么樣的方法可以盡快完成一個(gè)操作。通過(guò)用戶(hù)的操作環(huán)境可以得到以上信息。
是否有平行事件：用戶(hù)在做這件事情的同時(shí)，他是不是需要做其他的事情，要得出至少兩種平行事件，得到的結(jié)論是，我們的界面是不是需要把某些功能整合在一起，因?yàn)橛脩?hù)經(jīng)常是需要同時(shí)做這兩種事情，同時(shí)去打開(kāi)這兩個(gè)功能，通過(guò)這樣的反饋可以把同時(shí)使用的這兩個(gè)功能結(jié)合到一起，通過(guò)訪談可以得到這樣的依據(jù)，來(lái)進(jìn)行功能的整合。
04. 主動(dòng)詢(xún)問(wèn)用戶(hù)觀點(diǎn)
用戶(hù)的驅(qū)動(dòng)力: 去了解激勵(lì)因素，就知道了什么功能應(yīng)該做完善，什么功能并沒(méi)有那么重要。比如汽車(chē)銷(xiāo)售為什么要錄入信息，因?yàn)榭梢栽黾悠?chē)的銷(xiāo)量，錄入越準(zhǔn)確的用戶(hù)信息，他的銷(xiāo)售量越高。也就是用戶(hù)做這件事情，他的原因是什么。
用戶(hù)遇到最難事件: 在工作中或者用戶(hù)使用過(guò)程中遇見(jiàn)了什么樣難的事情，這件難的事情，就是產(chǎn)品的痛點(diǎn)，就明白了當(dāng)前產(chǎn)品迫切需要什么樣的功能去幫我們?cè)O(shè)計(jì)師來(lái)解決當(dāng)前產(chǎn)品痛點(diǎn)的問(wèn)題。
用戶(hù)遇到最颯事件:他在使用過(guò)程中最滿(mǎn)意的是什么事情，就是爽點(diǎn)是什么事情，那些產(chǎn)品中解決了用戶(hù)很好的問(wèn)題的部分，去把產(chǎn)品更好的放大，讓用戶(hù)繼續(xù)使用。也就是通過(guò)訪談我們知道了產(chǎn)品的爽點(diǎn)是什么。
用戶(hù)擔(dān)心事件:在他們使用過(guò)程中擔(dān)心的是什么，我們也要要了解這些隱藏的問(wèn)題.
用戶(hù)期望事件: 用戶(hù)希望得到什么樣的改善，最終的目標(biāo)是想解決什么樣的問(wèn)題，到這一步其實(shí)所有問(wèn)題目前都沒(méi)有答案，我們可以繼續(xù)訪問(wèn)，先做記錄，不做最終的答案.
問(wèn)用戶(hù)目前狀態(tài): 我們可以了解待解決的問(wèn)題，通過(guò)產(chǎn)品想解決什么問(wèn)題，進(jìn)行收集需求；用戶(hù)對(duì)于產(chǎn)品升級(jí)有什么小期待，進(jìn)行收集需求；通過(guò)用戶(hù)的反饋目前產(chǎn)品的哪些問(wèn)題，收集到目前反饋的問(wèn)題；以往問(wèn)題是否有效解決；進(jìn)行收集反饋。覺(jué)得不錯(cuò)的同類(lèi)型產(chǎn)品有哪些，通過(guò)了解競(jìng)品情報(bào)，我們可以競(jìng)量多問(wèn)一些 覺(jué)得不錯(cuò)的競(jìng)品有哪些；目前產(chǎn)品有哪些地方很好，很好的地方要保持，有的產(chǎn)品升級(jí)后，以前特別好的功能突然消失了，改了沒(méi)必要，好的功能保持就可以；前產(chǎn)品有哪些地方不好，我們?nèi)?yōu)化不好的地方；以往問(wèn)題是否有效解決，當(dāng)有問(wèn)題需要解決的時(shí)候，用戶(hù)的問(wèn)題是否是通暢的。通過(guò)看用戶(hù)如何反饋，我們可以了解功能傾向，了解整個(gè)流程是否通暢
05. 聊生活
發(fā)覺(jué)人性閃光點(diǎn)，提升產(chǎn)品差異競(jìng)爭(zhēng)力，1、問(wèn)目前的生活狀態(tài)，婚姻狀態(tài)，有沒(méi)有孩子，接送孩子的時(shí)間，平時(shí)有什么愛(ài)好？什么愛(ài)好不錯(cuò)？發(fā)覺(jué)人人性的閃光點(diǎn)，好的不好的產(chǎn)品都有共性，B端產(chǎn)品中視覺(jué)的傾向是什么？比如有插畫(huà)，溫馨的語(yǔ)言提示，通過(guò)什么樣的情感設(shè)計(jì)可以照顧到每個(gè)人的生活。
2.4.4 B端用戶(hù)訪談得出結(jié)論
如何判斷功能在用戶(hù)那里好還是不好？前面所有的都只是在記錄，現(xiàn)在才是在做判斷，判斷的第一件事，是做定量的整理，所有的問(wèn)題都收集到了，也記錄到了，至少需要有兩個(gè)樣本，去做定量整理。
2.4.4.1定量整理：行為
第一步是行為的總結(jié)，量級(jí)的總結(jié)，把記錄的問(wèn)題點(diǎn)、功能點(diǎn)和關(guān)鍵詞放到表格里面，經(jīng)常出現(xiàn)，迫切需要解決的是什么問(wèn)題，較少的問(wèn)題是什么，偶爾的行為問(wèn)題是什么，因此偶爾的優(yōu)先級(jí)就不高了，主要關(guān)注經(jīng)常遇到的問(wèn)題點(diǎn)、功能點(diǎn)和關(guān)鍵詞。
2.4.4.2 定量整理：特征
把每個(gè)角色按照以下表格里的的特征進(jìn)行定量的描述，這時(shí)候仍然不能找出它的共性點(diǎn)，但已經(jīng)把用戶(hù)的特征進(jìn)行分類(lèi)整理了，定量之后再去定性。
2.4.4.3 定量整理：特征/角色/流程
這個(gè)角色名稱(chēng)是一個(gè)具體的名字，比如王某某。以下這張表：可以看到在我們的系統(tǒng)中有哪些的權(quán)限，有哪些的角色，他們的需求是怎么樣的，這是一個(gè)完整的用戶(hù)畫(huà)像。用戶(hù)畫(huà)像是一個(gè)結(jié)果，是通過(guò)用戶(hù)訪談的形式完成了用戶(hù)畫(huà)像，并不是被動(dòng)的接受數(shù)據(jù)信息得出的，所以通過(guò)用戶(hù)訪談的形式進(jìn)行定量定性分析得到的結(jié)果是最準(zhǔn)確的。
3.1 建立情緒版
3.1.1 情緒版的概念及作用
本質(zhì)是將情緒視覺(jué)化，情緒版并不是玄學(xué)的東西，它確實(shí)可以通過(guò)圖片找到對(duì)應(yīng)的圖形元素，因?yàn)閳D形（照片）是可以表達(dá)情緒的，比如看到一張照片會(huì)感受什么什么情緒：熱、冷、餓、干渴、安靜、壓抑、神秘、恐怖、失落、沮喪、速度、力量這些都是情緒相關(guān)的關(guān)鍵詞。
情緒版是一個(gè)特別快速能和產(chǎn)品，我們的團(tuán)隊(duì)包括設(shè)計(jì)團(tuán)隊(duì)進(jìn)行溝通的一種方式，比如要設(shè)計(jì)一個(gè)界面，需要幾天才能設(shè)計(jì)出來(lái)，但我想提前知道一下未來(lái)界面設(shè)計(jì)成什么樣子，那就先做一個(gè)情緒版，讓大家知道，找的方向是什么，這樣適合與大家及時(shí)的溝通，大家也會(huì)明白產(chǎn)品將會(huì)做成什么樣子，達(dá)成產(chǎn)品的最終設(shè)計(jì)定調(diào)。
3.1.2 怎么建立情緒版
01. 提煉關(guān)鍵詞：獲取本次產(chǎn)品設(shè)計(jì)中所要實(shí)現(xiàn)的產(chǎn)品3-5個(gè)必要的關(guān)鍵字詞組，其中包括交互或視覺(jué)目標(biāo)，通常由一些比較抽象的形容詞組成。比如：在做的產(chǎn)品是醫(yī)療行業(yè)，那么醫(yī)療相關(guān)關(guān)鍵字詞組是：生命/健康/安全等。
02.關(guān)鍵詞發(fā)散：通過(guò)獲取到的關(guān)鍵詞的基礎(chǔ)上，發(fā)散出來(lái)一些新的詞語(yǔ)，這種發(fā)散詞匯，不是簡(jiǎn)單頭腦風(fēng)暴產(chǎn)生的，而是要有目的性的進(jìn)行提取，要更加的具體。比如剛才舉例醫(yī)療行業(yè)，生命可以繼續(xù)發(fā)散出血液、器官等衍生關(guān)鍵詞。
03. 搜索圖形: 對(duì)之前總結(jié)出的幾個(gè)關(guān)鍵詞在圖庫(kù)中進(jìn)行查找，也可以在直接在behance里找別人收藏好的情緒版圖片直接用，效率可能更高一點(diǎn)。
04. 制作情緒版: 搜索大量圖片后，挑出我們需要的進(jìn)行整理，采用一種拼貼方式進(jìn)行設(shè)計(jì)排版，拼貼出來(lái)需要得到需要得到的色彩，構(gòu)圖，質(zhì)感和字體。
05. 得出結(jié)論: 在圖形、色彩、字體、質(zhì)感、構(gòu)圖，以上五點(diǎn)，得到合適的設(shè)計(jì)方案，快速與團(tuán)隊(duì)進(jìn)行溝通，直觀表達(dá)產(chǎn)品清徐，達(dá)成產(chǎn)品的設(shè)計(jì)定調(diào)。產(chǎn)品調(diào)性（企業(yè)調(diào)性）其實(shí)就是用企業(yè)的方式把故事講述出來(lái)，是一種通過(guò)情緒版方法來(lái)講故事的方式。
3.2 品牌三元法
3.2.1 品牌三元法為什么逐漸替代情緒版
品牌三元法是通過(guò)品牌三板斧模型得出的一個(gè)確定設(shè)計(jì)主風(fēng)格的一種新得方法，品牌三板斧模型可以總概為用戶(hù)調(diào)研關(guān)鍵的三個(gè)維度，一目標(biāo)用戶(hù)是誰(shuí)？二產(chǎn)品服務(wù)是什么？三對(duì)于目標(biāo)用戶(hù)來(lái)說(shuō)，你的產(chǎn)品服務(wù)有什么核心價(jià)值。當(dāng)在回答完這三個(gè)問(wèn)題以后，我們其實(shí)就已經(jīng)清楚我們的品牌定位是什么了，因?yàn)樗暮诵膬?yōu)勢(shì)是比較明顯的，這樣我們就知道我們將來(lái)會(huì)面對(duì)什么樣的人群，去怎樣去宣傳它的賣(mài)點(diǎn)，同時(shí)做出產(chǎn)品的差異化。
通過(guò)這幾年得工作案例設(shè)計(jì)實(shí)踐，在確定設(shè)計(jì)主風(fēng)格時(shí)，情緒版方法逐漸有被品牌三元法替代得趨勢(shì)，因?yàn)榍榫w版這種把抽象的詞不太好表現(xiàn)的詞，翻譯成圖片的方式，比如剛才提到醫(yī)療行業(yè)的關(guān)鍵詞是生命，健康，安全的，設(shè)計(jì)師找到很多這種相關(guān)的圖片，挑出來(lái)后從這些圖片里面找到一個(gè)共同的規(guī)律，最后去設(shè)計(jì)。這里面就有兩個(gè)問(wèn)題，一個(gè)原因是關(guān)鍵詞非常的平，生面，安全，健康，很難更準(zhǔn)確的表達(dá)衍生關(guān)鍵詞。另外一個(gè)問(wèn)題是它非常局限設(shè)計(jì)師的創(chuàng)意，因?yàn)樗菑囊恍┈F(xiàn)有的圖片里面然后去挑，所以很多設(shè)計(jì)師就反饋現(xiàn)有的方法不是很好用，比如當(dāng)我們想到安全這個(gè)詞，可能所有人想到都是特別綠的感覺(jué)，或者干凈這個(gè)詞，就會(huì)統(tǒng)一聯(lián)想到白色這個(gè)畫(huà)面，大家從一開(kāi)始想法就差不多，所以它很難體現(xiàn)出創(chuàng)意。所以由于情緒版嚴(yán)重限制了自己的想象力，沒(méi)辦法把產(chǎn)品核心的氣質(zhì)表現(xiàn)出來(lái)，雖然情緒版正確但是是一個(gè)平庸的結(jié)果，大家沒(méi)辦法記住的結(jié)果。
3.2.2 如何應(yīng)用品牌三元法
01. 理性層面（業(yè)務(wù)層面），傳遞產(chǎn)品理念：獲取本次產(chǎn)品設(shè)計(jì)中體現(xiàn)業(yè)務(wù)層面，可以傳達(dá)產(chǎn)品理念得5-10個(gè)關(guān)鍵詞，對(duì)應(yīng)的放在左邊。
02. 感性層面（人文層面），營(yíng)造產(chǎn)品氛圍：主要體現(xiàn)這個(gè)產(chǎn)品給用戶(hù)帶來(lái)什么好處，宣傳的角度是什么。獲取本次產(chǎn)品設(shè)計(jì)中體現(xiàn)人文層面，可以傳達(dá)產(chǎn)品氛圍的5-10個(gè)關(guān)鍵詞，對(duì)應(yīng)的放在右邊。
03. 個(gè)性層面（氣質(zhì)靈魂），創(chuàng)造獨(dú)特風(fēng)格：結(jié)合理性的業(yè)務(wù)層面和感性的人文層面，來(lái)創(chuàng)作出什么樣的畫(huà)面，和獨(dú)特風(fēng)格的感覺(jué)。同樣總結(jié)出5個(gè)左右的關(guān)鍵詞，放在下邊。
04. 結(jié)合以上三個(gè)維度，提煉主視覺(jué)畫(huà)面：當(dāng)出現(xiàn)這三部分詞的時(shí)候，經(jīng)過(guò)思考或者大家一起頭腦風(fēng)暴，可能一開(kāi)始想到的比較淺，但最終一定能想到一個(gè)最終關(guān)鍵詞或者特別符合我們這個(gè)產(chǎn)品氣質(zhì)的畫(huà)面，因?yàn)橐陨先糠值贸鲫P(guān)鍵詞也都是經(jīng)過(guò)品牌三板斧模型推演出有關(guān)聯(lián)的關(guān)鍵詞，想到一個(gè)符合產(chǎn)品氣質(zhì)的畫(huà)面并不難，再得出這個(gè)主視覺(jué)畫(huà)面后，這就是最終產(chǎn)品調(diào)性的主視覺(jué)，既符合產(chǎn)品定位，又具有獨(dú)特的差異性。
05. 傳達(dá)產(chǎn)品，用視覺(jué)語(yǔ)言講故事：接下來(lái)，當(dāng)這個(gè)主題、主視覺(jué)確定了以后，在看怎么樣用具體的視覺(jué)設(shè)計(jì)技能，去傳達(dá)我們的產(chǎn)品，也就是用視覺(jué)語(yǔ)言來(lái)講故事，具體注意三個(gè)方面，一是表像，元素要符合這個(gè)視覺(jué)主題，二是關(guān)聯(lián)，元素之間要具有關(guān)聯(lián)。三是隱喻，用視覺(jué)的手段含蓄的表達(dá)產(chǎn)品的一些特性。比如云計(jì)算的一些產(chǎn)品，做得比較復(fù)雜每一個(gè)圖標(biāo)上都有一些曲線切割的畫(huà)面，這樣做的原因其實(shí)不是為了炫技，它是為了表達(dá)云計(jì)算彈性可擴(kuò)展的特性，好比拍電影，中國(guó)人講究隱晦。
4.1 色彩規(guī)范
4.1.1 選色
在系統(tǒng)色彩中，以Antdedign為例，系統(tǒng)色彩里包含了很多不同的色調(diào)，但不可能用到這么多顏色，這時(shí)要應(yīng)用選擇幾個(gè)顏色，選幾個(gè)我們應(yīng)用的顏色。第一步要做的就是選色，選出應(yīng)用色彩，這個(gè)應(yīng)用色彩也就是我們建立得視覺(jué)規(guī)范中的基礎(chǔ)色板，在選色時(shí)候需注意，要有有明確的心理預(yù)期，比如醫(yī)療行業(yè)中常用藍(lán)色和綠色，就是符合預(yù)期的顏色。在基礎(chǔ)色板里選擇調(diào)色，應(yīng)選擇兩個(gè)相同級(jí)別的藍(lán)色和綠色；基礎(chǔ)色板里選不同顏色時(shí)不要超過(guò)三個(gè)級(jí)別的跳躍；當(dāng)選擇一個(gè)確定的顏色時(shí)，可以選擇草綠或者青綠色來(lái)作為輔助色；在基礎(chǔ)色板里，最頂部的顏色最適合做背景色，中間的顏色適合做按鈕色，底部的顏色適合做狀態(tài)色，或者小面積文字的填充色，其余就是搭配過(guò)度的作用。再比如零售、比如金融行業(yè)的產(chǎn)品，會(huì)選擇不同的顏色，那這些顏色代表了什么，是不是會(huì)和企業(yè)的VI色是有相符之處，這些都是我們?nèi)ヒ紤]的。
4.1.2 注意色彩的兩個(gè)特性
01. 注意品牌性：體現(xiàn)特性和傳播理念、價(jià)值觀：比如宜家，我們立刻會(huì)想到的是黃色和藍(lán)色。比如京東，我們會(huì)想到紅色。如果是餓了么，我們會(huì)想到藍(lán)色。這些都是標(biāo)識(shí)性的色彩，體現(xiàn)和傳遞的就是品牌理念和價(jià)值觀。這些顏色一定不是隨便選的，比如，宜家的黃色和藍(lán)色，其實(shí)是瑞典的國(guó)旗的顏色，代表著宜家的來(lái)源地來(lái)源于瑞典，因?yàn)槿鸬涫且粋€(gè)很強(qiáng)調(diào)簡(jiǎn)約設(shè)計(jì)的國(guó)家，貫穿始終是在強(qiáng)調(diào)它的的價(jià)值觀。一些關(guān)鍵行動(dòng)點(diǎn)：比如選中的狀態(tài)，按鈕的顏色，在很重要的地方用主色表達(dá)，這就是在體現(xiàn)B端的產(chǎn)品的色彩價(jià)值觀和企業(yè)價(jià)值觀的地方
02. 注意色彩的功能性：色彩需要體現(xiàn)功能有明確的信息以及狀態(tài)含義，色彩代表它獨(dú)特的含義，比如成功色，通常會(huì)選擇綠色，再系統(tǒng)色板里，青綠草綠都可以選。比如出錯(cuò)/刪除/失敗用紅色，表示警告警示。比如鏈接要用藍(lán)色。
4.2 圖標(biāo)規(guī)范
畫(huà)圖標(biāo)要注意圖標(biāo)的識(shí)別性、統(tǒng)一性和獨(dú)特性。圖標(biāo)首先要一眼看出來(lái)表達(dá)的含義，其次是圖標(biāo)設(shè)計(jì)圖標(biāo)的大小，線寬粗細(xì)，圓角大小，圖標(biāo)風(fēng)格等這些都需要統(tǒng)一，最后最好可以體現(xiàn)出圖標(biāo)的獨(dú)特性，獨(dú)特性就是差異化，這也是品牌三遠(yuǎn)法得核心，塑造產(chǎn)品的差異化，具體分析方法也可應(yīng)用在圖表設(shè)計(jì)當(dāng)中，比如根據(jù)品牌基因進(jìn)行延展，也可根據(jù)主風(fēng)格主視覺(jué)設(shè)計(jì)定調(diào)，設(shè)計(jì)出獨(dú)特風(fēng)格且符合產(chǎn)品定位得圖標(biāo)應(yīng)用在產(chǎn)品當(dāng)中。
4.3 文字規(guī)范
4.3.1 字體家族
在B端頁(yè)面中字體的顯示順序，有固定的一套代碼模式，可以理解為，比如有的用戶(hù)電腦沒(méi)有平方字體，所以會(huì)顯示出冬青黑體，來(lái)替代平方字體的設(shè)計(jì)稿，如果沒(méi)有冬青黑體，就用微軟雅黑替代顯示，字體家族中，從左到右代表了字體顯示的有限順序，平方、冬青黑體、微軟雅黑、黑體、宋體，中英文都是。
4.3.2 主字體
在系統(tǒng)中有中文常用PingFangSC、微軟雅黑、思源黑體；英文常用San FranciscoUI（SF字體）、Helvetica Neue、Arial
4.3.3 大小與行高
方法一：在Antdesign中規(guī)定的，比如字體大小是14px，行高就是22px。規(guī)范里最小字體是14px，但可能有注釋字體，字號(hào)最小是12px。表格里的內(nèi)容是按照表格里的行高來(lái)約定的，與字體行高無(wú)關(guān)，這個(gè)前提是，不在表格里內(nèi)。當(dāng)沒(méi)有出現(xiàn)文本字體，表格里的字體的時(shí)候就需要去設(shè)置字體的行高，F(xiàn)igma里默認(rèn)行高是140%，比如14px字體，行高就設(shè)置成22。這是Antdesign里的規(guī)范，但不是唯一的規(guī)范。需要注意的是，如果使用一個(gè)標(biāo)準(zhǔn)就全部使用一個(gè)標(biāo)準(zhǔn)，這個(gè)需要把選中文字段落進(jìn)行調(diào)整行高。
方法二：是當(dāng)按倍率去算的行高規(guī)范，方法步驟是先調(diào)整好行高，去改變字體大小，比如無(wú)行高時(shí)，1/100%/1倍行高，注意加上%號(hào)；緊湊行高，1.3行高/130%；常規(guī)行高1.5行高/150%；寬松行高，1.7行高/170%。
4.3.4 文字的層級(jí)關(guān)系
輔助文字12px、正文（?。?3px、正文（常規(guī)）14px、小標(biāo)題（16px，小標(biāo)題是相對(duì)于14號(hào)字出現(xiàn)的）、標(biāo)題18px、主標(biāo)題20px
4.3.5 字重
比如常用的蘋(píng)方有6個(gè)字重，但在平時(shí)的設(shè)計(jì)中根本用不上。中文環(huán)境6個(gè)字重在實(shí)際顯示并沒(méi)那么好，常用兩個(gè)字體，萍方常規(guī)體400（常規(guī)），蘋(píng)方中黑體500（粗體）。而英文可以用粗體600。
4.3.6 字體顏色
在深色背景下、和淺色背景下不同內(nèi)容的色彩透明度不同，具體透明度用百分比顯示。在彩色背景下或者在不同顏色之下，字體應(yīng)該使用白色還是黑色，應(yīng)該按著規(guī)范嚴(yán)格使用，難點(diǎn)在顏色相近的時(shí)候選擇白色還是黑色，也需按照規(guī)范執(zhí)行。
4.3.7 文字對(duì)齊關(guān)系
文案類(lèi)對(duì)齊：頁(yè)面的字段、段落較短標(biāo)題、需正文左對(duì)齊
表單類(lèi)對(duì)齊：保證整齊適合閱讀，冒號(hào)對(duì)齊法找到中間的冒號(hào)，（左右對(duì)齊），如果全部使用左對(duì)齊或者右對(duì)齊會(huì)更亂。左邊一般最長(zhǎng)字段六個(gè)字。前提是中文環(huán)境，不是國(guó)際化。冒號(hào)左右要留多少像素：8px的倍數(shù)相關(guān)值，4（窄點(diǎn)）、8（正常）、12、16（寬一點(diǎn)）都可以。
數(shù)字類(lèi)對(duì)齊：日期，居中對(duì)齊；年齡，居中對(duì)齊/左對(duì)齊；非固定的數(shù)字：價(jià)格，采用右對(duì)齊，因?yàn)橛覍?duì)齊很容易看到價(jià)格的多少，哪個(gè)超出的更多，就越貴的，更容易區(qū)分?jǐn)?shù)字的多少。
4.4 層級(jí)規(guī)范
層級(jí)規(guī)范得核心是對(duì)信息的間隔和區(qū)分，信息的區(qū)分間隔要用偶數(shù)8的倍數(shù)。具體可分為同層級(jí)的區(qū)分，用色塊（比如氣泡）、邊框（欄目之間抖索狂等）、線段來(lái)進(jìn)行區(qū)分。錯(cuò)層區(qū)分，用彈窗（背景變暗）、邊框陰影（陰影的出現(xiàn)是擬物化的出現(xiàn)，當(dāng)物體離它的光源越近，比如高度越高，它的陰影就越大越寬。離它的底部越近，陰影就越小，比如下拉框、搜索框、日歷控件、彈出窗口來(lái)區(qū)分）。
這里需注意，關(guān)于投影，再前端角度考慮盡量不要用太多的特效濾鏡來(lái)設(shè)計(jì)，因?yàn)樵贐端網(wǎng)頁(yè)中，瀏覽器的兼容性不好，比如用ie瀏覽器就根本看不到這樣的效果，如果用谷歌瀏覽器能看到，用safri瀏覽器能看到，但在火狐下等又會(huì)看不到，想要都看到就需要兼容很多代碼，需要前端加很多代碼實(shí)現(xiàn)兼容性的效果，很增加前端的工作量，所以在B端很少用非標(biāo)準(zhǔn)型的濾鏡代碼使用，雖然可以實(shí)現(xiàn)，但一般不太用，一般就是變灰、變深、變透明度最簡(jiǎn)單的方法實(shí)現(xiàn)。不同于移動(dòng)端，因?yàn)镮OS用的是原生的開(kāi)發(fā)，所以不存在這個(gè)問(wèn)題。
文章來(lái)源：站酷 作者：morning_c
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
