“復(fù)雜是世界的一部分，但它不應(yīng)該令人困惑，好的設(shè)計幫我們馴服復(fù)雜，不是讓事物變簡單（如果復(fù)雜是符合需求的），而是去管理復(fù)雜”--唐納德·A·諾曼

與復(fù)雜共處，這是一個有趣的話題。在這個奉行“少即是多”的時代，設(shè)計師對于復(fù)雜噤若寒蟬，認(rèn)為優(yōu)秀的設(shè)計應(yīng)該簡潔明了，若無必要，勿增實體，而復(fù)雜則常備被視作失敗設(shè)計的標(biāo)簽。設(shè)計師為了保持設(shè)計上的簡約挖空心思，甚至試圖通過削弱功能的方式來降低產(chǎn)品的復(fù)雜度，得到自己想象中的完美設(shè)計。然而一味追求“簡單”的設(shè)計真的符合用戶的實際需求嗎？從心理學(xué)的角度來看，復(fù)雜的事物往往功能強(qiáng)大，而功能強(qiáng)大意味著更好的服務(wù)與更高的價值，用戶也更愿意為之付費。當(dāng)我們購買商品時，我們會仔細(xì)斟酌，拿著產(chǎn)品的功能列表反復(fù)比對，這個時候我們忘記了產(chǎn)品復(fù)雜與否，更多考慮的是功能是否滿足自身需求。

對于大部分B端產(chǎn)品而言，復(fù)雜或許難以避免，復(fù)雜是出于實實在在的業(yè)務(wù)的需要，而非某位設(shè)計師的錯誤喜好。B端產(chǎn)品之所以給人感覺會相對復(fù)雜，是因為產(chǎn)品需要完成復(fù)雜的工作任務(wù)，界面內(nèi)承載的信息內(nèi)容較多，在視覺上會帶給用戶壓力，直觀感受上覺得產(chǎn)品很復(fù)雜。但是這些信息又都是必需的，如果缺少這些必要的信息，會對用戶理解和使用產(chǎn)品造成阻礙。就如同飛機(jī)的駕駛艙，密密麻麻的按鈕如此復(fù)雜，但是每一個按鈕都有著相應(yīng)的功能，不可或缺。既然復(fù)雜難以避免，那么作為設(shè)計師我們不應(yīng)該被動接受或盲目拒絕復(fù)雜，我們應(yīng)該學(xué)會如何與復(fù)雜共處，去嘗試馴服復(fù)雜、管理復(fù)雜。

理性看待復(fù)雜

相信很多設(shè)計師和我一樣，經(jīng)歷過現(xiàn)代主義浪潮的洗禮，對于簡約的設(shè)計有著或多或少的偏好。因為這種偏好，在自己進(jìn)行設(shè)計時也希望能夠選用這種風(fēng)格，在設(shè)計時刻意的去追求界面簡約，卻忽略了界面上的簡約不等同于產(chǎn)品易于理解和使用。從心理學(xué)的角度上看，復(fù)雜的事物更容易理解，簡單的事物反倒令人困惑，一味的追求簡單反而會讓事物變得復(fù)雜。

B端產(chǎn)品的目標(biāo)是降本提效，追求簡約的設(shè)計思想在B端產(chǎn)品的設(shè)計中并沒有那么適用，為了提升用戶的操作效率，我們需要將一些能夠幫助用戶理解的信息與常用的操作直觀的展示給用戶。這會在一定程度上增加界面的復(fù)雜度，但是相較于產(chǎn)品視覺界面會因此變得復(fù)雜，產(chǎn)品的易用性和操作效率對于B端產(chǎn)品而言會更為重要。

與復(fù)雜共處的前提是能夠理性地看待復(fù)雜，復(fù)雜本身的含義即非褒義也非貶義。復(fù)雜描述的是事物的狀態(tài)，它在詞典上的解釋是擁有很多即錯綜復(fù)雜又相互關(guān)聯(lián)的組成部分的事物。產(chǎn)品復(fù)雜與否是由產(chǎn)品本身所從事的業(yè)務(wù)和需要完成的任務(wù)來決定，就像我們不能要求一個做機(jī)械結(jié)構(gòu)設(shè)計的工程軟件做得像一個圖畫板一樣簡單，因為兩者的功能需求不是一個層面的，所以我們也不能單純的將產(chǎn)品簡潔還復(fù)雜作為評判一款產(chǎn)品優(yōu)秀與否的標(biāo)準(zhǔn)。

分清復(fù)雜與困惑

我們之所以對復(fù)雜懷有畏懼，其實更多的是畏懼令人困惑的復(fù)雜，復(fù)雜與困惑有著本質(zhì)的區(qū)別，理解他們之間的區(qū)別很有必要，復(fù)雜描述的是事物的狀態(tài)，而困惑表述的是用戶使用產(chǎn)品時的心理。復(fù)雜的背后可以擁有規(guī)則與邏輯，理解這些規(guī)則和邏輯，能夠幫助我們理解和使用產(chǎn)品。而令人困惑的產(chǎn)品往往缺少這樣的內(nèi)在規(guī)則與邏輯，用戶難以理解產(chǎn)品的運(yùn)轉(zhuǎn)機(jī)制，需要花費很大力氣才能完成有效操作，容易讓用戶產(chǎn)生挫敗感。產(chǎn)品可以是復(fù)雜的，但是不應(yīng)該讓用戶困惑。

在很多復(fù)雜的傳統(tǒng)線下業(yè)務(wù)數(shù)字化轉(zhuǎn)型的過程中，為了讓產(chǎn)品易于使用，設(shè)計師需要深入到一線，去了解真實用戶在線下業(yè)務(wù)場景中是如何處理日常任務(wù)的，在流程線上化過程中也需要遵循這樣的業(yè)務(wù)流程，這樣能夠讓用戶更快上手，而如果我們在設(shè)計過程中不去參考用戶在線下的操作場景，按照自己的想法去意測用戶的行為，這樣設(shè)計出的產(chǎn)品背離了用戶的心理模型，缺乏內(nèi)在邏輯，會讓用戶感到混亂困惑，陷入深深的麻煩。

基于產(chǎn)品本身功能需要，我們可能無法很主觀的去降低產(chǎn)品的復(fù)雜度，這就需要我們在進(jìn)行產(chǎn)品設(shè)計時花費更多的心思，通過對業(yè)務(wù)流程、頁面布局、信息呈現(xiàn)上的調(diào)整與設(shè)計讓產(chǎn)品變得清晰，不讓用戶陷入困惑。如下圖的關(guān)于表單編輯器的A\B兩種設(shè)計，用戶在編輯器內(nèi)完成一系列針對表單的編輯、配置操作，然后發(fā)布表單。方案A中將這些表單編輯配置項通過tab進(jìn)行排列，這種方式結(jié)構(gòu)簡單，但是擴(kuò)展性較差，過多的欄目也容易讓用戶陷入困惑，不清楚需要完成哪些配置項才能進(jìn)行發(fā)布。方案B中采用了步驟導(dǎo)航加側(cè)欄導(dǎo)航的雙層導(dǎo)航結(jié)構(gòu)，在步驟導(dǎo)航上給出完成表單編輯配置的主要步驟，在大的步驟下用側(cè)欄導(dǎo)航承載小的編輯項，結(jié)構(gòu)清晰，且能夠?qū)τ脩艟庉嫳韱翁峁┮欢ǖ膸椭敢ｋm然兩種方案信息內(nèi)容上都一致，視覺觀感上甚至方案B更為復(fù)雜，但是方案B在這里可能是更合適的方案，因為方案B在配置流程的指引上更為清晰，也更貼近用戶心理模型，即使沒有使用過在線表單的用戶也能理解產(chǎn)品流程，因而用戶能夠更容易的完成表單配置并發(fā)布表單。

功能決定產(chǎn)品的復(fù)雜程度

我們在使用產(chǎn)品時，都會有一個大概的心理預(yù)期，會認(rèn)為某一類型的產(chǎn)品會較為復(fù)雜，某一類型的產(chǎn)品會相對簡單。為什么我們會有這樣的認(rèn)知呢？是因為我們知道這些產(chǎn)品大概有哪些功能，而這些功能就決定了產(chǎn)品的復(fù)雜層度。產(chǎn)品的復(fù)雜程度由產(chǎn)品的業(yè)務(wù)與功能決定，而不是依照設(shè)計師的自我喜好，像如淘寶、京東這類的購物網(wǎng)站、擁有著很多的欄目，所以淘寶、京東的界面相對來說較為復(fù)雜；而像百度這樣的搜索引擎功能相對來說比較簡單，所以界面設(shè)計相對簡單干凈。

我們可以容許一個功能強(qiáng)大的產(chǎn)品設(shè)計得相對復(fù)雜，但是一個功能簡單的產(chǎn)品設(shè)計得復(fù)雜難用就是一個災(zāi)難。作為設(shè)計師我們需要根據(jù)產(chǎn)品的實際需要來進(jìn)行設(shè)計，即不過度設(shè)計，也不執(zhí)著于追求簡約，而是基于需求恰到好處的進(jìn)行設(shè)計。

復(fù)雜產(chǎn)品也能有好的體驗

復(fù)雜的產(chǎn)品會有好的用戶體驗嗎？答案是肯定的，用戶體驗的好壞與產(chǎn)品是復(fù)雜還是簡單并沒有直接的關(guān)系，很多時候復(fù)雜的產(chǎn)品也能帶給我們良好的用戶體驗，在互聯(lián)網(wǎng)產(chǎn)品中，我們可以看到很多復(fù)雜的產(chǎn)品，這些復(fù)雜的軟件產(chǎn)品，一點點的改變著我們的生活與工作方式，讓我們生活與工作變得便捷與高效。

首先可以看看我們的國民級電商應(yīng)用淘寶，乍看淘寶的界面，可能會覺得十分復(fù)雜，甚至?xí)o人一種眼花繚亂的感覺，但是包括我在內(nèi)的許多人仍然十分喜歡逛淘寶。淘寶內(nèi)除了有本身的淘寶、天貓店鋪外還有專做海淘的天貓國際，做社區(qū)團(tuán)購的淘鮮達(dá)，專做拍賣的阿里拍賣等數(shù)十個板塊，業(yè)務(wù)繁多，功能復(fù)雜，但這幾乎很難改變，因為之所以做這些業(yè)務(wù)和功能背后都有著商業(yè)上的考量。從交互設(shè)計的角度看，雖然淘寶的業(yè)務(wù)和功能繁多，卻有著清晰的布局、信息對齊、內(nèi)容組織，產(chǎn)品盡管復(fù)雜，但并不令人感到費解和困惑。購物流程也與用戶在線下購物流程相仿，貼近用戶的心理模型，用戶容易了解產(chǎn)品功能、容易與之交互，整體上有著良好的用戶體驗。

又如我一直在使用的一款筆記軟件Notion，Notion相對于印象筆記、有道云筆記而言更為復(fù)雜，需要花費一定的時間成本學(xué)習(xí)才能夠從容上手使用，但是這并不妨礙Notion被眾多使用者所追捧。Notion的很多功能在使用之前，甚至都不會想到會出現(xiàn)在一款筆記產(chǎn)品里面，如甘特圖，多維表格等，這類功能一般出現(xiàn)在項目管理類軟件中。而Notion塊結(jié)構(gòu)的布局模式，讓筆記能夠自由拖拽，擁有了極強(qiáng)的自由度，用戶可以很自由的用各種各樣的形式來記筆記，要是你肯再花一些心思，你甚至可以在Notion內(nèi)搭建一個個人專屬網(wǎng)站來記錄的學(xué)習(xí)知識，打造個人專屬知識庫。將我們習(xí)以為常的線性筆記思維，轉(zhuǎn)變成縱向思維，甚至是網(wǎng)格狀思維。Notion無疑是復(fù)雜的，但是這樣做是為了給用戶提供的強(qiáng)大功能和極高的自由度，這些功能恰恰也切合了用戶的需求，創(chuàng)造了一種全新的筆記體驗，帶給用戶愉悅的使用感受。

過度簡化的潛在風(fēng)險

簡單是產(chǎn)品追求的最終形態(tài)嗎？其實未必，很多時候產(chǎn)品設(shè)計的過度簡單反而會給用戶帶來麻煩。為了追求簡單的設(shè)計，不可避免的就需要隱藏一些信息或者拉長操作路徑，這是一個權(quán)衡的過程，我們在做設(shè)計時也會經(jīng)常面臨這樣的抉擇，是追求視覺上的簡約美觀還是信息傳達(dá)準(zhǔn)確性與操作上的效率。給用戶一個簡約美觀的視覺感受無疑很重要，人們對于美的事物往往更有耐心，也更愿意去探索。但是對于一款針對B端用戶的效率軟件、辦公應(yīng)用而言，準(zhǔn)確的傳達(dá)信息，幫助用戶進(jìn)行判斷，頻繁使用的功能設(shè)計得更高效便捷，這些點能帶給用戶更實際價值，也是我們在設(shè)計產(chǎn)品時應(yīng)該優(yōu)先考慮的點。

特別是在一些專業(yè)性的軟件中，如果我們?yōu)榱俗非蠛喖s而弱化或者省略掉一些關(guān)鍵信息，還有可能會導(dǎo)致用戶錯誤操作的出現(xiàn)，造成嚴(yán)重的后果。試想一下當(dāng)你在使用軟件編寫一個計算字段時，軟件提供給你了計算公式卻沒有就近給你提供計算公式的解釋和用法示例，導(dǎo)致你因為書寫上的不規(guī)范使得計算結(jié)果頻繁出錯。這時你可能會滿懷憤怒的抱怨為什么產(chǎn)品會如此難用，為什么不能配置過程中給到更多的反饋與幫助信息來減少配置錯誤的發(fā)生。

如何與復(fù)雜共處

前面我們了解了關(guān)于復(fù)雜的定義，認(rèn)識了復(fù)雜與困惑之間的區(qū)別，也明確了在B端產(chǎn)品中復(fù)雜或許難以避免，復(fù)雜是出于實實在在的業(yè)務(wù)的需要而非某位設(shè)計師的錯誤喜好，既然復(fù)雜無法避免，我們就應(yīng)該學(xué)會與復(fù)雜共處，管理與馴服復(fù)雜。那么如何與復(fù)雜共處呢，有一些策略或許可以給予我們一些思路。

1.為產(chǎn)品注入規(guī)則

復(fù)雜與困惑的本質(zhì)區(qū)別在于復(fù)雜的背后隱藏著規(guī)則與邏輯，而困惑缺少這樣的規(guī)則與邏輯，讓人無法預(yù)測與揣摩，對應(yīng)到軟件產(chǎn)品的設(shè)計，一款成功的優(yōu)秀的軟件產(chǎn)品，應(yīng)該是易學(xué)易用、能夠滿足用戶預(yù)期，用戶能夠直觀的理解產(chǎn)品的流程與主要功能，并通過產(chǎn)品實現(xiàn)自己的目標(biāo)。那么具體到軟件的設(shè)計上我們應(yīng)該怎樣做呢？

這里可以看看我們團(tuán)隊正在使用的研發(fā)管理工具TAPD，TAPD是一款敏捷研發(fā)協(xié)作工具，凝聚了騰訊研發(fā)方法及敏捷實踐精髓，其中敏捷開發(fā)的方法就是TAPD的內(nèi)在規(guī)則與邏輯，有過敏捷開發(fā)經(jīng)驗，理解敏捷開發(fā)流程的的開發(fā)人員能夠快速的上手使用TAPD，對于不了解敏捷開發(fā)的開發(fā)人員也可以通過產(chǎn)品幫助中心學(xué)習(xí)敏捷開發(fā)思想，進(jìn)而理解產(chǎn)品的功能與流程，因此雖然TAPD功能與頁面結(jié)構(gòu)相對復(fù)雜，但是基于對敏捷開發(fā)的認(rèn)識用戶還是能從產(chǎn)品復(fù)雜的功能界面中摸索出一條操作路徑，實現(xiàn)自己的目標(biāo)。這就是產(chǎn)品擁有內(nèi)核思想以后能夠帶來的直觀好處，將原本零散的功能點通過特定邏輯鏈接成操作流程，幫助用戶更好地理解與使用產(chǎn)品。

相同的在我們公司自己的一個項目中我們也運(yùn)用了同樣的方法，在我們公司之前研發(fā)的一款crm產(chǎn)品中，為了給用戶提供最佳的銷售實踐，幫助用戶更快上手使用我們的產(chǎn)品，我們在設(shè)計產(chǎn)品時尋找了硅谷藍(lán)圖團(tuán)隊做了顧問咨詢，并依照硅谷藍(lán)圖的銷售轉(zhuǎn)化路徑來構(gòu)建我們的產(chǎn)品體系，確定產(chǎn)品功能，梳理產(chǎn)品中的業(yè)務(wù)流程。并希望在以后為客戶做實施的過程中能夠?qū)⒐韫人{(lán)圖的銷售方法一起帶給用戶，讓用戶能夠更好地使用我們的產(chǎn)品，實現(xiàn)產(chǎn)品的最高價值，為中小企業(yè)銷售團(tuán)隊賦能。

通過前面兩個案例其實我們可以感受到，當(dāng)一款復(fù)雜的產(chǎn)品有了內(nèi)在的規(guī)則與邏輯以后，用戶理解和使用我們的產(chǎn)品會變得更順暢，用戶不會迷失在茫茫的功能之中，通過理解規(guī)則與邏輯，用戶能夠?qū)ψ约翰僮鹘Y(jié)果有一個大概的預(yù)期，而不是處于困惑狀態(tài)，作為設(shè)計師的我們也可以將這種規(guī)則邏輯作為我們設(shè)計的引導(dǎo)，讓我們的設(shè)計更為系統(tǒng)和有條理，讓產(chǎn)品不再是一堆功能的堆疊，各自為戰(zhàn)。

2. 貼近用戶心理模型設(shè)計

復(fù)雜是用戶的一種心理感受，用戶覺得產(chǎn)品復(fù)雜除了產(chǎn)品本身結(jié)構(gòu)信息復(fù)雜之外，也是因為產(chǎn)品在設(shè)計上沒有貼合用戶的心理預(yù)期，用戶很難理解產(chǎn)品的流程與交互，所以貼近用戶心理進(jìn)行設(shè)計就顯得尤為重要。這里我們需要先了解三個概念，實現(xiàn)模型、表現(xiàn)模型和心理模型，三個概念的釋義如下：

實現(xiàn)模型：產(chǎn)品是怎樣工作的
心里模型：用戶認(rèn)為產(chǎn)品是怎樣工作的
表現(xiàn)模型：通過設(shè)計來讓用戶認(rèn)為產(chǎn)品是怎樣工作的

表現(xiàn)模型越接近心理模型，用戶就越容易了解產(chǎn)品功能、容易與之交互。表現(xiàn)模型越接近實現(xiàn)模型，用戶越難理解產(chǎn)品，產(chǎn)品就越難使用。復(fù)雜產(chǎn)品在用戶體驗過程中的痛點在于用戶需要花費時間學(xué)習(xí)或培訓(xùn)之后才能了解產(chǎn)品的運(yùn)轉(zhuǎn)機(jī)制，很多B端產(chǎn)品在設(shè)計時更多的偏向于實現(xiàn)模型，用戶在使用產(chǎn)品的過程中會發(fā)現(xiàn)很多地方的交互和自己心理預(yù)期并不一致，使用過程中會遇到很多的阻礙，影響整體的使用體驗。對于一款復(fù)雜的產(chǎn)品而言，我們需要讓我們產(chǎn)品的表現(xiàn)模型更接近于用戶的心理模型，這樣用戶能夠更容易了解產(chǎn)品的功能，并與之交互。

大家使用電腦時有沒有遇到過類似下圖這樣的電腦報錯信息，里面是一堆的專業(yè)名詞，看得人一頭霧水。這時候我們能做的只有默默的打開百度，去了解彈窗里面講的內(nèi)容究竟是什么，了解后才明白原來這樣，然后按照百度上操作步驟一通操作，僥幸解決了問題。但是當(dāng)下次我們遇到相同問題時，可能還是不知道如何解決，無可避免還是需要求助百度。這個就是表現(xiàn)模型貼近與實現(xiàn)模型會帶給用戶的困擾，用戶不是專業(yè)的開發(fā)者，他們不了解也不需要了解產(chǎn)品背后的實現(xiàn)邏輯，這對用戶而言是沒有價值的，給予用戶這些信息不能對用戶起到預(yù)想的幫助作用。貼近實現(xiàn)模型進(jìn)行設(shè)計會讓用戶與產(chǎn)品交互變得困難，變相的是在人為的增加產(chǎn)品的復(fù)雜度，與復(fù)雜共處，我們需要學(xué)會貼近用戶心理進(jìn)行設(shè)計。

3.統(tǒng)一交互模式

復(fù)雜的產(chǎn)品往往功能、頁面繁多，如果頁面內(nèi)的視覺元素以及交互各自為戰(zhàn)，那么放大到整個產(chǎn)品就是一個災(zāi)難，不僅是產(chǎn)品給用戶感官上不統(tǒng)一、整體性差，過多的交互模式也會增加用戶的學(xué)習(xí)與記憶成本，用戶在這些相視功能但是不同的視覺與交互的模塊之間容易陷入困惑，對用戶使用產(chǎn)品造成困擾。針對這個問題，現(xiàn)在越來越多的公司開始通過搭建組件庫的方式來規(guī)范自家產(chǎn)品內(nèi)的視覺與交互，一個規(guī)范完整的組件庫的確能夠在很大程度上解決產(chǎn)品在視覺與交互上的一致性問題，通過模塊化解決方案，也能降低冗余的生產(chǎn)成本，實現(xiàn)產(chǎn)品快速開發(fā)。因此很多人也認(rèn)為搭建好組件庫就能一次性的解決產(chǎn)品體驗一致性問題，但實際上就算一個產(chǎn)品有了一個自己的組件庫，依舊還會遇到體驗上統(tǒng)一性問題，這是為什么呢？

在原子化設(shè)計理論中，粒子是構(gòu)成頁面的最小顆粒，粒子構(gòu)成簡單組件，簡單組件到復(fù)雜組件，再到區(qū)塊、頁面。雖然用組件能去構(gòu)建頁面，但是還會遇到頁面結(jié)構(gòu)、交互不一致的問題，設(shè)計師各自使用組件去搭建并不能提升我們的效率和解決設(shè)計一致性的問題，在末端設(shè)計并沒有做到約束。因此我們在構(gòu)建好組件以后還需要繼續(xù)抽取出了頁面級的組裝結(jié)構(gòu)和交互模式。

這里我們拿B端產(chǎn)品中常見的列表頁來舉例，縱觀所有后臺列表頁面，抽取后無非就分為這么幾個區(qū)域。不同的業(yè)務(wù)可以通過基礎(chǔ)組件和樣式定義符合自己業(yè)務(wù)線的子模塊。比如列表頁中的篩選區(qū)，在不同的業(yè)務(wù)場景下，對篩選器的需求也各不相同，簡單的可能只需要使用標(biāo)簽選擇就能夠完成篩選，復(fù)雜的可能添加很多的篩選項甚至選項之間還有且或關(guān)系，我們需要根據(jù)實際的業(yè)務(wù)場景設(shè)計適合的篩選器，但是需要注意的是一個產(chǎn)品中用到的篩選器形式不應(yīng)太多，我們需要抽取歸納出三四種篩選器形式去覆蓋我們產(chǎn)品內(nèi)所有的篩選場景。來保證產(chǎn)品內(nèi)不會出現(xiàn)各種相識卻有各不相同的篩選器。

B端后臺產(chǎn)品中比較常見的還有表單，我們可以歸納出產(chǎn)品內(nèi)可能會使用到的表單類型，然后定義出具體的框架結(jié)構(gòu)與交互，在具體的設(shè)計過程中在根據(jù)實際情況選用不同的表單區(qū)塊。

1.分組表單

一種常見的信息錄入以及信息展示表單，這種形式是我們最長用。

2.分步表單

分布表單適用于信息錄入項以及信息展示項過多，在一個頁面內(nèi)已經(jīng)不能合理清晰的組織傳遞信息，或者表單內(nèi)容的錄入方式或者展示方式存在較大差異，不適宜在一個頁面內(nèi)進(jìn)行展示時。按照布局的不同也可分為橫向步驟和縱向步驟兩種。

3.組合表單

組合表單因其結(jié)構(gòu)能夠承載更多的信息，每一個欄目都可以承載一個獨立的表單頁，有效的管理信息。

4.彈窗表單

很多時候我們也會用彈窗來承載表單，好處是交互銜接流暢，不用跳頁。

將產(chǎn)品中類似的區(qū)塊做成最佳的交互模式范例，能夠最大的程度的規(guī)范我們產(chǎn)品中的交互，這樣才能真正的實現(xiàn)產(chǎn)品體驗上的統(tǒng)一，化繁為簡，讓復(fù)雜的產(chǎn)品也能夠調(diào)理清晰，上手簡單容易。在面對復(fù)雜的系統(tǒng)級軟件時，在統(tǒng)一組件樣式的基礎(chǔ)上還應(yīng)該統(tǒng)一產(chǎn)品內(nèi)的交互模式。

信息歸納突出重心

復(fù)雜的產(chǎn)品頁面內(nèi)信息往往都特別繁多，如果不做好信息歸納，用戶將很難把握住重點內(nèi)容，信息獲取效率低下，十分影響用戶的使用體驗，所以信息的強(qiáng)弱的整理十分重要，那么什么樣的信息是對用戶而言重要的信息呢？

信息設(shè)計大師愛德華·塔夫特認(rèn)為優(yōu)秀的視覺設(shè)計應(yīng)該是“將清晰的思考視覺化”，他還認(rèn)為只有充分理解觀看者的“認(rèn)知任務(wù)”及一些設(shè)計原則才能設(shè)計出優(yōu)秀的產(chǎn)品。

如何找到對用戶真正重要的信息需要借助到產(chǎn)品設(shè)計中一個十分重要的工具--用戶模型，通過調(diào)研的來得用戶模型是對于我們產(chǎn)品客戶的抽象歸納，通過用戶模型我們可以確定哪些功能對于用戶而言是高價值的重要內(nèi)容該重點突出，哪些內(nèi)容相對不是那么重要可以弱化處理，通過對于頁面內(nèi)容強(qiáng)弱的劃分，用戶能夠更快的獲取到對自己有用的內(nèi)容，盡管頁面仍舊復(fù)雜，但是信息劃分合理、層級清晰、表意明確的頁面人就能夠帶給用戶良好的用戶體驗，幫助用戶高效的處理任務(wù)。

說在最后

復(fù)雜是產(chǎn)品的本來特性，本身不含褒貶，但是如果復(fù)雜不加以控制，讓其發(fā)展為困惑與混亂，這對于一款產(chǎn)品而言絕對不是一件好事情，這樣即使產(chǎn)品功能上很優(yōu)秀，用戶也無法長期忍受，一旦市場上出現(xiàn)替代產(chǎn)品，那么忍受已久的用戶也將拋棄產(chǎn)品轉(zhuǎn)向體驗更好的新產(chǎn)品。

曾經(jīng)我也是一個極簡主義的追捧者，但是經(jīng)歷過越來越多的設(shè)計項目，我開始發(fā)現(xiàn)某些產(chǎn)品復(fù)雜性是必需的，將產(chǎn)品做得簡單并不是其核心訴求。真正需要處理的問題也不是復(fù)雜，而是混淆的狀態(tài)和由此產(chǎn)生的無條理性。解決的方法不是簡單的去除幾個界面元素，讓其在視覺界面上變得簡潔干凈，而是要讓產(chǎn)品擁有內(nèi)在規(guī)則、一致且能夠被理解。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷 作者:Yone楊
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

做一個完整B端系統(tǒng)項目前，從交互設(shè)計的七大定律，B端產(chǎn)品業(yè)務(wù)調(diào)研，用戶訪談研究方法，精準(zhǔn)推導(dǎo)B端用戶畫像，到B端產(chǎn)品主風(fēng)格的設(shè)計定調(diào)，深度理解B端主流組件庫的視覺規(guī)范，進(jìn)而為B端產(chǎn)品設(shè)計做充分的準(zhǔn)備工作，以下內(nèi)容較多，大家可以根據(jù)上述目錄來進(jìn)行選擇性閱讀。

1.1 B端組件庫的概念及作用

概念：組件庫的底層邏輯就是原子理論，類似于我們在拼樂高積木的時候，根據(jù)說明書一個模塊一個模塊來拼湊，先找零件，再拼成部件，然后是成品，這個過程和UI中的組件化是一模一樣的，組件化就是原子理論集中得表現(xiàn)，原子（圖標(biāo)、按鈕、字體樣式等）——分子（標(biāo)簽欄、導(dǎo)航欄、搜索框等）——有機(jī)體（圖文列表、內(nèi)容卡片、布局模塊、瀑布流圖等）——模板（原子、分子組合排列組成了模板，也就是原型圖）——界面（最后根據(jù)原型圖形成視覺設(shè)計稿）

作用：一致性：比如在不同得界面中，如果用樣的按鈕，他的按鈕的展現(xiàn)形式，要保持一致性。

高效性：比如所有的按鈕不用單獨去設(shè)計了，從組件庫里調(diào)用就可以，這樣對于設(shè)計師來說就是高效的。對用戶來說，也會讓用戶的使用效率提升，比如當(dāng)用戶看到藍(lán)色的按鈕就是可以提交的按鈕，看到白色得按鈕就是次要得按鈕，看到不帶邊框的按鈕就是一個危險按鈕等等。

組合性：通過調(diào)用不同的組件來進(jìn)行組合可以形成不同的頁面。

1.2 如何正確使用組件庫

1.2.1 組件庫的使用前提

一些主流的組件庫，比如AntDesign、Element Design、ZanDesign組件庫等，這些框架機(jī)構(gòu)本質(zhì)都差不太多， 但他們有自己的特點，具體用哪個組件庫，通常由公司的架構(gòu)師來進(jìn)行架構(gòu)選型，比如VUE（Element Design）和REACT（Ant Design），這是兩種不同的技術(shù)選型，（VUE和REACT是一種前端框架的技術(shù)架構(gòu)版本，可幫助前端工程師快速進(jìn)行開發(fā)的前端框架）。從技術(shù)角度講，大部分公司會首選AntDesign（React），因為有很多案例提供，VUE和有贊也可以但用的少。從設(shè)計角度，Ant Design得設(shè)計組件形式案例很完善。Element Design做起來視覺單一得樣式白白得感覺，沒有設(shè)計層次化，Ant Design更好看一點。所以先選擇底層的前端框架，再根據(jù)這個選擇前端的機(jī)構(gòu)布局。

1.2.2 組件庫的使用過程

設(shè)計師和前端最終目標(biāo)是一樣的，都是快完成保證設(shè)計質(zhì)量的，原生組件不能達(dá)到要求的時候，設(shè)計師可以根據(jù)原生組件庫修改樣式來表達(dá)到自己的想法。但對前端來說最好什么都別改，就用原生組件庫前端工程師直接復(fù)制就行，這也是因為我們設(shè)計師的要求和前端的要求是不一樣的。但修改后樣式的組件，底層邏輯還是原來的組件。從Antdesign等組件庫里復(fù)制出來，經(jīng)過figma里的各種功能操作后，比如分離組件、改變組件得形狀、替換內(nèi)容等，但這個組件仍然是Antdesign里的組件，組件是否改變?nèi)Q于，這個圖形，這個組件是不是已經(jīng)代碼化，我們設(shè)計師設(shè)計的組件，只是樣式，需要經(jīng)過前端來形成代碼，只有代碼化的組件，才是組件，如果沒有代碼化，那只是一個樣式而已。所以，我們用Antdesign里是已經(jīng)實現(xiàn)代碼化了得組件，組件庫里有的組件前端一定是可以代碼實現(xiàn)的。

1.3 如何設(shè)計組件庫

1.3.1 每個項目都會分這四個周期

項目初期：在一個B端項目得初期，大家都會有疑問，B端組件庫應(yīng)該什么時候開始建立？是不是先建組件庫再開始設(shè)計？答案是，如果不是從0開始的項目，組件庫在設(shè)計之初就應(yīng)該建立起來，如果項目是從0開始，由于沒有業(yè)務(wù)的案例，組件庫組件庫也無法建立，但可以建立一些最小元素：原子。比如字體（應(yīng)該用什么樣的字體，在正標(biāo)題，副標(biāo)題，大標(biāo)題，正常情況下應(yīng)該怎么樣使用字體的得明度）、色彩（色彩規(guī)范是什么，比如醫(yī)療行業(yè)，航空行業(yè)，交通行業(yè)應(yīng)該用什么色彩，決定主色不是好不好看，而是由企業(yè)來決定得，首先了解企業(yè)的VI色，通過結(jié)合VI色和產(chǎn)品分析出的用戶畫像特征，來確定主色，輔主色，確定主色后，相應(yīng)的背景色、深色背景、淺色背景、灰度背景、卡片背景等，也就都可以做出來了）、按鈕（通常狀態(tài)，點擊狀態(tài)，當(dāng)前焦點狀態(tài)，不可點狀態(tài)）、基本控件、布局柵格、圖表（圖標(biāo)icon、文本標(biāo)簽、按鈕、圖表）、圖標(biāo)；通過建立原子組件，完成一些基本典型的頁面設(shè)計。

項目中期：繼續(xù)完善基本組件庫，應(yīng)用案例的完善，迭代組件庫、樣例庫、最佳實踐案例。然后再次迭代進(jìn)入基本組件庫。

項目后期：形成最終組件庫與設(shè)計系統(tǒng)的規(guī)范建立，根據(jù)項目不一樣詳細(xì)程度也可以不一樣。

延展期：為項目2.0升級準(zhǔn)備根據(jù)使用反饋、迭代之前得組件庫與規(guī)范，預(yù)計未來版本中出現(xiàn)的典型案例，并針對性的設(shè)計應(yīng)用組件。通常很少有公司進(jìn)行到這一步。

1.3.2 組件庫的開發(fā)流程

1.3.3 B端組件庫存在的價值

B端組件庫的存在是不是意味著不需要設(shè)計師了？其實并不是，組件庫可以幫助設(shè)計師增進(jìn)設(shè)計效率和溝通效率，和前端溝通告知按照對應(yīng)的選型組件庫規(guī)范使用就可以了，同時組件庫得一致性、準(zhǔn)確性、協(xié)同性它的質(zhì)量有保證。但設(shè)計師做完組件庫后，繼續(xù)需要關(guān)注的點是：

01、根據(jù)業(yè)務(wù)場景來優(yōu)化設(shè)計組件庫：因為組件庫是一定會去更新的，如有必要再去更新，那一定會是很復(fù)雜得業(yè)務(wù)場景下去做更新的，這個業(yè)務(wù)場景是程序員或者以前的組件不能實現(xiàn)的，需要很強(qiáng)的設(shè)計技能去做迭代，所以需要設(shè)計師繼續(xù)去做一些結(jié)合業(yè)務(wù)場景的組件來放到組件庫里。

02、需要設(shè)計師把更多時間精力投入更多設(shè)計體驗中，而非搬磚：組件庫的建立同時解放了設(shè)計師的精力，設(shè)計師可以把時間投入到設(shè)計體驗中去，而不是做一些搬磚得工作，比如按鈕怎么畫，用圓角還是用什么顏色，這些沒有技術(shù)含量的工作，這樣一來，可以投入更多時間來賦能業(yè)務(wù)更好體驗設(shè)計工作。

1.3.4 B端主流組件庫有哪些

2.1 B端產(chǎn)品的設(shè)計過程

2.1.1 用戶體驗五要素

戰(zhàn)略層（屬于產(chǎn)品愿景，滿足用戶的需求，產(chǎn)品的愿景和目標(biāo)）

由于用戶有不同的需求進(jìn)而產(chǎn)生了不同的產(chǎn)品，戰(zhàn)略層決定了用戶用干什么樣的產(chǎn)品，比如，用戶需有很多銷售客戶的線索需要進(jìn)行管理，用戶需要管理客戶，那就做一個CRM系統(tǒng)。比如，用戶想寫日報，想要一個打卡的OA系統(tǒng)，那么產(chǎn)品目標(biāo)就是要做一個OA系統(tǒng)。比如，電商里面很多商品，牽扯到很多進(jìn)銷存，那就做一個ERP系統(tǒng)。這部分跟設(shè)計師相關(guān)度沒有那么高。

范圍層（指功能規(guī)劃，功能的規(guī)格、包括內(nèi)容的需求）

功能規(guī)劃：比如要做一個OA系統(tǒng)，其中就包含了打卡、日報、項目管理、報銷、人事流轉(zhuǎn)等等都是跟辦公相關(guān)聯(lián)的，需要把規(guī)格和功能畫出來，畫成簡單的表格并且將它們分類，這里所有的功能都不是詳細(xì)的，就是簡單的分類，將功能簡單描述一下，同時做一個簡單的用戶畫像。這部分設(shè)計師只需要閱讀產(chǎn)品經(jīng)理給到得PRD需求文檔即可，整體看還是偏愿景，沒有形成具體的產(chǎn)出。比如OA系統(tǒng)中就總結(jié)出重點做一個審批得功能，并不知道什么樣的界面，只知道一個大概的范圍。

結(jié)構(gòu)層（指原型設(shè)計）

這部分，設(shè)計師通常就需要參與進(jìn)來，如果設(shè)計師只按產(chǎn)品給的設(shè)計好的原型來設(shè)計，就顯得很被動，這樣只能叫做視覺美化，被稱之為美工，設(shè)計師應(yīng)該從沒有形成原型的時候，可能只是一個簡單的PRD需求文檔或者草圖，設(shè)計師就應(yīng)該參與進(jìn)去。

設(shè)計師對原型進(jìn)行優(yōu)化設(shè)計，優(yōu)化的不是業(yè)務(wù)，因為很多業(yè)務(wù)內(nèi)容肯定沒有產(chǎn)品經(jīng)理了解得深刻入，這時，設(shè)計師需要優(yōu)化的其實是它的交互邏輯、交互內(nèi)容，一旦原型里里產(chǎn)生點擊，一旦產(chǎn)生多種狀態(tài)，那就要去了解它，每種狀態(tài)產(chǎn)生不一樣的界面結(jié)果，其實對標(biāo)的就是設(shè)計師設(shè)計的界面將產(chǎn)生什么樣的變化，換句話說，如果有界面的變化，內(nèi)容得變化，設(shè)計師就需要參與到其中。目前來看，很少公司有專門的交互設(shè)計師，要么這部分工作由UI設(shè)計師來完成，要么由產(chǎn)品經(jīng)理來完成，很多企業(yè)已經(jīng)把設(shè)計進(jìn)行前置化，由UI設(shè)計師來完成交互的工作。

其中交互設(shè)計+信息架構(gòu)設(shè)計是設(shè)計原型圖的關(guān)鍵，這兩個是密不可分的，如何制作原型圖，如何在原型圖里設(shè)置一些交互事件，給大家推薦《信息架構(gòu)設(shè)計》這本書里有專門講到。再了解原型設(shè)計之前，不得不提到一個通用知識點，交互設(shè)計的七大定律。（后文有介紹）

框架層（指界面設(shè)計、組件設(shè)計）

框架層這部分有一些爭議，有的設(shè)計師認(rèn)為就直接做界面設(shè)計了，其實框架層還不能把它理解成是界面設(shè)計，它僅僅是做了一些業(yè)務(wù)的模塊兒的框架而已，更多的其實是將它組件化: 將原型組件化、模塊兒化，類似我們直接從Antdesign組件庫復(fù)制來內(nèi)容簡單改改之類得操作，完成的是組件和界面的設(shè)計，這些界面并不是最終完整的交付樣式。

表現(xiàn)層（可視化呈現(xiàn)，UI視覺呈現(xiàn)）

這部分和設(shè)計師關(guān)聯(lián)度最大的一部分，就是界面中的配色、配色、圖標(biāo)、樣式、結(jié)構(gòu)、布局、排版等設(shè)計，但是我們設(shè)計師需要從范圍層了解業(yè)務(wù)熟悉最初PRD產(chǎn)品需求文檔去一點點做起，其中設(shè)計師在戰(zhàn)略層參與度可能只有2%左右，范圍層參與度5%左右，從結(jié)構(gòu)層開始逐步往上參與度越來越高，至少結(jié)構(gòu)層，框架層和表現(xiàn)層的參與度是很深得。

2.1.2 B端產(chǎn)品的設(shè)計過程是什么

所以，通過梳理用戶體驗五要素，不難看出B端UI設(shè)計師的工作流程就是，01. 接到項目后，設(shè)計師主要閱讀產(chǎn)品經(jīng)理給到的PRD需求文檔，同時去參與原型設(shè)計，根據(jù)最初版PRD輸出一份低保真原型圖，和其他部門進(jìn)行初次評審；02. 經(jīng)過初次評審討論過后，完善后的功能和頁面文案，產(chǎn)品經(jīng)理補(bǔ)全和輸出完善后的產(chǎn)品PRD需求文檔，由設(shè)計師根據(jù)完善后得PRD需求文檔經(jīng)過規(guī)范設(shè)計輸出高保真原型圖 ，與其他部門帶著初次評審討論后的問題，進(jìn)行二次評審。03. 最終再由設(shè)計師經(jīng)過組件化形成視覺圖。04. 同時設(shè)計師提供切圖，與前端緊密溝通，上線前制作設(shè)計走查表，進(jìn)行設(shè)計走查。05、最后上線后根據(jù)數(shù)據(jù)、用戶反饋等提出交互和視覺可優(yōu)化得方案建議，進(jìn)行版本迭代。

2.2 交互設(shè)計七大定律

01. 菲茨定律：當(dāng)設(shè)計師需要讓用戶重點去看到頁面中某一個突出點，點擊到一個區(qū)域時，設(shè)計師就需要做到適合的大小，適合的區(qū)域，適合的位置，適合的形狀，適合的顏色。也就是你想讓用戶點擊的時候就突出重點想顯示的，不想讓用戶點擊退出的，就把它設(shè)計的的足夠小。比如按鈕得退出和付款，實心付款按鈕為主要按鈕，虛線置灰退出按鈕為次要按鈕，比如常說的海報中字要大，logo要大，這些都屬于菲茨定律。

02. 席克定律：用戶面對的刺激（或選擇）越多，他們做出決定的時間就越長，由于用戶的時間很寶貴 ，用戶沒有義務(wù)花更多留在我們的網(wǎng)站上，所以我們需要有選擇的地方對選擇進(jìn)行分類。

03. 7土2法則（米勒定律）：比如圓周率3.1415926，一般都能記住，而如果再往后加幾個數(shù)字，大家往往很難記住，原因就是經(jīng)過大量測試，人腦容易記憶7位數(shù)字前后得數(shù)字，比如設(shè)計銀行輸入密碼的時候就用到了7土2 法則，設(shè)置密碼過多人腦不易記憶。

04. 接近法則：格式塔接近定律指出“彼此靠近的物體或形狀似乎形成了組”。

05. 防錯原則：當(dāng)用戶在使用產(chǎn)品中，預(yù)判用戶本身或產(chǎn)品一定會出錯時候，可以告訴用戶怎么可以不犯錯，或者將風(fēng)險降低。比如電腦的關(guān)閉電源鍵，就允許電腦司機(jī)時允許系統(tǒng)犯錯，讓用戶使用關(guān)閉電腦電源鍵進(jìn)行重啟。比如銀行取出錢后，銀行卡有忘拔現(xiàn)象，銀行完全可以做到像光大銀行那樣去再取錢流程中改成先拔卡再出鈔得交互流程，就可以避免忘記拔卡，但其他銀行都沒有這么改進(jìn)，仍然是先出鈔后拔卡得原因是允許用戶犯錯。

06. 奧卡姆剃刀原理：化繁為簡，如無必要，勿增實體。比如小米電視遙控器的設(shè)計，由原來傳統(tǒng)的很多遙控器按鍵只優(yōu)化成了保留上下左右為數(shù)不多的幾個重要按鍵，原來的遙控器數(shù)字按鈕如果真正要輸入數(shù)字的時候通過功能性，調(diào)出數(shù)字來，這樣在遙控器得設(shè)計中基本只保留20%主要功能按鍵。這就是交互上的優(yōu)化。比如在UI界面中，也會用到這個問題，簡化文字，把文字用圖標(biāo)替換，還有各種流程得優(yōu)化等等。

07. 雅克布定律：以用戶習(xí)慣的使用模式去設(shè)計產(chǎn)品，降低用戶學(xué)習(xí)成本，遵從用戶使用習(xí)慣。 利用現(xiàn)有的思維模型，用戶習(xí)慣，我們可以創(chuàng)建出色的用戶體驗，使用戶可以專注于自己的任務(wù)而不是學(xué)習(xí)新的模型習(xí)慣。

2.3 B端產(chǎn)品用戶畫像

2.3.1用戶畫像概念

用戶畫像又稱用戶角色，作為一種勾畫目標(biāo)用戶、聯(lián)系用戶訴求與設(shè)計方向的有效工具，用戶畫像在各領(lǐng)域得到了廣泛應(yīng)用。用戶畫像分為兩種，不論C端和B端都會做這樣的用戶畫像。總共可分為兩部分，基本信息數(shù)據(jù)和行為數(shù)據(jù)。

基本信息數(shù)據(jù)：當(dāng)我們?nèi)チ私庥脩舻幕拘畔⒌囊恍?shù)據(jù)時，職業(yè)，收入，年齡等等，這些和功能有很多的關(guān)聯(lián)度，比如唯品會用戶畫像關(guān)鍵詞是：女性、折扣、白領(lǐng) ，唯品會產(chǎn)品定位聚焦女性，這些基礎(chǔ)信息數(shù)據(jù)，就能給產(chǎn)品帶來很好的結(jié)果，當(dāng)我們要做一個女性的購物平臺的時候，可以先把男性用戶拋除掉去考慮設(shè)計方向，再比如收入就知道了，大概產(chǎn)品面向的收入群體將是什么收入群體的人，那么我賣貨的價格區(qū)間、包括設(shè)計的風(fēng)格就是一個什么樣群體的設(shè)計風(fēng)格。那些賣奢侈品的不是黑色就是灰色，要不就是棕色，但未必是適合唯品會產(chǎn)品的風(fēng)格，需要找出這些基本信息去和產(chǎn)品進(jìn)行關(guān)聯(lián)度，把基本信息放到設(shè)計結(jié)果中去考慮。

行為數(shù)據(jù)：指用戶的愛好，這部分群體有哪些愛好，是喜歡購物，還是喜歡運(yùn)動，他/她的消費情況是什么，喜歡旅游還是美食，他/她經(jīng)常用哪些APP，他常用的設(shè)備，是蘋果手機(jī)呢還是安卓，小米還是華為，等等得到這些數(shù)據(jù)，也能得到一些用戶喜歡什么樣的競品，這些數(shù)據(jù)就能側(cè)面的在我們的產(chǎn)品中得到反饋，得到功能和設(shè)計上的指導(dǎo)和其他產(chǎn)品的區(qū)別。這些行為數(shù)據(jù)，不管我們做C端還是B端，都要獲取到，但C端和B端獲取到這些行為數(shù)據(jù)的結(jié)論是不一樣的。因為C端用戶研究方法不一定適用在B端用戶研究方法。C端最終抽象成一個人，給他帶來的很多屬性，這些等等都會成為他的用戶畫像。

進(jìn)而找到這個人，將他的社會屬性，從抽象的角度慢慢變得具象，C端是他/她的社會屬性，把他做成一個普通的人，這個人有他的社會屬性，有他的社會價值，有他的社會行為。比如一個女性，一定喜歡美食，一定會買化妝品。

2.3.2 B端用戶畫像本質(zhì)

比如做一個和電影相關(guān)的管理系統(tǒng)，電影行業(yè)包括很多人員管理，設(shè)備管理等，這里不能把用戶畫像抽象成一個男性或者女性了，而應(yīng)該把它抽象成一個職業(yè)，比如抽象成一個導(dǎo)演，導(dǎo)演需要去管理什么東西，它需要哪些資源去整合。導(dǎo)演就又叫做行業(yè)屬性坐標(biāo)。B端不以社會屬性去做用戶畫像，一定以行業(yè)坐標(biāo)去做用戶畫像，我們在整理作品集的時候需注意不要與C端畫像整理混淆。

我們要做一個行業(yè)可以不用管他/她是誰，也可以不用管他/她有什么樣的社會屬性，比如做CRM最重要的在里面起到作用的是，客戶關(guān)系管理和銷售等; 比如做OA系統(tǒng)，就是一般的員工，等級，職能等等，可以看出行業(yè)屬性(職業(yè)屬性)決定了他的用戶畫像的精準(zhǔn)度，一定把這個人拉到行業(yè)里去研究，研究社會屬性沒有價值。這是C端和B端做用戶研究最大的區(qū)別。

2.4 B端產(chǎn)品用戶調(diào)研

2.4.1用戶調(diào)研的作用/目的/重要性

01. 了解產(chǎn)品業(yè)務(wù)需求定位：可以幫助了解目標(biāo)用戶的信息，從用戶的角度：未來使用你產(chǎn)品的用戶，他理不理解你的產(chǎn)品想要表達(dá)什么，你的產(chǎn)品講了哪些功能。因為很多好的產(chǎn)品我們打開它第一眼就知道要干什么，是給我們做什么的。同時站在設(shè)計者的角度：怎么可以把這個產(chǎn)品設(shè)計清楚，比如做一個CRM客戶關(guān)系管理系統(tǒng)，具體管理什么我們是不清晰的，想要清晰就需要通過用戶調(diào)研這個過程給它展開。

02.解決功能信息架構(gòu)問題：可以幫助設(shè)計師更明確需求功能得合理性和優(yōu)先級，比如頁面標(biāo)題的使用、標(biāo)題的層級、需要在信息層級清晰得情況下體現(xiàn)出來，而明確信息層級同樣需要通過用戶研究體現(xiàn)出來。

03.讓可用性測試更加準(zhǔn)確：可以幫助鎖定合適的測試用戶，來測試我們的產(chǎn)品使用程度，使用體驗是不是好，這時需要要找目標(biāo)用戶去測試，比如小米有品針對群體是米粉，唯品會針對的群體是職場女性，而不像C端找所有的人去測試。

04.解決團(tuán)隊協(xié)作溝通問題：確定用研目標(biāo)可以有理有據(jù)的把設(shè)計目標(biāo)和產(chǎn)品經(jīng)理的意見達(dá)成共識，因為未來一定會多次和產(chǎn)品進(jìn)行PK，像諸如設(shè)計師組件化沒用好這些理由也不會是pk點，確定用研護(hù)鏢可以更好的深度去理解原型圖，可以把團(tuán)隊協(xié)作溝通的問題解決好。

2.4.2 用戶調(diào)研的方法

01. 確定研究對象：首先拿到一個產(chǎn)品，拿到一個需求的時候，這個需求通常很模糊，比如只告訴做一款CRM客戶關(guān)系管理系統(tǒng)，但汽車行業(yè)，服裝電商行業(yè)，保險行業(yè)，銀行金融等等，都有CRM客戶管理系統(tǒng)，不同行業(yè)的CRM肯定是不一樣的，這時候，比如要做金融的CRM，那研究方向就已經(jīng)確定了，金融CRM就可以確定去研究金融行業(yè)的業(yè)務(wù)鏈，業(yè)務(wù)流程，具體找哪些用戶群體，可以根據(jù)以往的驚經(jīng)驗和產(chǎn)品的目標(biāo)去確認(rèn)。

02. 找研究方法 : 研究方法分主動和被動，我們通常用的方法是被動方法，比如自我報告法：當(dāng)這個產(chǎn)品產(chǎn)生了一些數(shù)據(jù)，我們從后臺可以拉取這些數(shù)據(jù)的時候，通過這些數(shù)據(jù)去分析，這是被動的方法，這個被動的方法所有項目都可以用。而主動的方法，就是觀察和采訪，主動去找用戶去找關(guān)聯(lián)度。

03. 獲取到數(shù)據(jù) : B端和C端區(qū)別之一是提高效率，它要產(chǎn)生的結(jié)果只有一個結(jié)果，就是減少成本，任何B端的系統(tǒng)都是為了實現(xiàn)這個目標(biāo)，提高效率和減少成本。所以獲取數(shù)據(jù)，研究數(shù)據(jù)的方向不能偏離搞錯，用戶研究的方向不要搞錯。比如我們以用戶為中心來設(shè)計，就會認(rèn)為用戶的操作體驗感是第一位的，其實不對，放在第一位去考慮的應(yīng)該是以系統(tǒng)的最優(yōu)化，提升效率為第一位，而用戶也可以為這件事情做一些改變而找到平衡點，數(shù)據(jù)導(dǎo)向得提高效率，減少成本有時會大于用戶的操作體驗。

04. 用研行為: 剛才前面提到的這些注意事項，到底應(yīng)該找什么方法去得到這些數(shù)據(jù)呢？第一我們可以通過后臺數(shù)據(jù)比如通過百度統(tǒng)計等系統(tǒng)來獲得；第二通過問卷法發(fā)出一些問卷，用戶可能散落在全國不同位置；第三可以通過用戶定性訪談來獲得；第四可以通過用戶旅程圖來決定用研行為。

05. 分析調(diào)研結(jié)果: 研究結(jié)果不是為了放到我們的B端作品集里的，而研究結(jié)果一定是為了去定性、定量、讓數(shù)據(jù)回歸到產(chǎn)品功能本身。同時經(jīng)常問自己這些問題，去根據(jù)研究結(jié)果和問題進(jìn)行匹配思考，比如研究了那么多，用到了用戶畫像得出的結(jié)論了么，用到了哪里？在項目中能舉個例子嗎？采用什么樣的視覺去實現(xiàn)了用戶體驗要素？

2.4.3 B端用戶訪談模板

2.4.3.1 用戶訪談概念：

01.確定訪談目標(biāo)：了解目標(biāo)用戶群體，通過訪談信息來進(jìn)一步構(gòu)建所需要的用戶畫像，從而確定設(shè)計方案與功能優(yōu)先級。02. 定性/定量訪談目標(biāo)：將這些目標(biāo)定量、定性，選擇不同的訪問對象，構(gòu)建不同的角色畫像。比如問銷售的用戶畫像，要找不同的訪問對象，銷售總監(jiān)，普通實習(xí)生等等，三到四個角色，樣本越多，用戶畫像越準(zhǔn)確。03. 訪談過程：提前把問題寫出來，拿著問題去聊，用錄音設(shè)備，記錄表格，一個提問，一個記錄，分開后記錄比較準(zhǔn)確。04.訪談結(jié)束：要做信息匯總，要做分析建模。分析建模就是將信息最終變得有意義。

B端用戶訪談模板有30個問題，這30個問題決定了我們的用戶畫像的精準(zhǔn)度和產(chǎn)品的用戶畫像的價值。用戶訪談會問些什么問題呢？當(dāng)我們調(diào)研的時候把問題寫出來的時候，就已經(jīng)解決了一半的問題了。

2.4.3.2 B端用戶訪談30問

01、基礎(chǔ)特征

崗位：你是從事什么崗位的？是總監(jiān)還是普通職員？目的是為了知道不同的權(quán)限的使用者，進(jìn)而就可以在系統(tǒng)中設(shè)置這些權(quán)限。

職責(zé)：需要獲取到用戶不同的需求，因為每一個崗位有不同的職責(zé)，他們的需求點也是不一樣的。根據(jù)這些不同的需求，我們在界面中得動態(tài)儀表盤部分，就可以根據(jù)不同職責(zé)來顯示不同的內(nèi)容。

姓名：可以讓訪談記錄得到更加真實的體現(xiàn)，目的是可以獲得產(chǎn)品的一些真實的基礎(chǔ)字段。

年齡：是用戶認(rèn)知和經(jīng)驗度的體現(xiàn)，用戶的年齡可以代表他們對行業(yè)的認(rèn)知，和整個企業(yè)流程的認(rèn)知程度，一般性理解，用戶的年齡越大，那么他的經(jīng)驗越豐富。

教育：指用戶是什么學(xué)歷，目的是為了了解用戶的經(jīng)歷與熟練程度，通常認(rèn)為，用戶的教育越高的人，他們往往使用軟件操作的熟練度會越好。

位置：指用戶在什么地方來使用，目的是知道了場景與優(yōu)先級，用戶是在寫字樓里還是精英場所來使用我們的產(chǎn)品。因此得出基礎(chǔ)特征是要得出這些結(jié)論，得出這些結(jié)論進(jìn)而反饋到產(chǎn)品中去。

02、行為接觸點

使用頻次：不同的崗位用戶使用功能的優(yōu)先級是不一樣的，用戶使用頻次越高的功能，這個功能的優(yōu)先級就越高。了解之后，那在下次迭代的時候就需要把重要級別的功能放在易操作的區(qū)域去體現(xiàn)。比如這個重要功能就是一個icon，那么把它放一個快捷入口。

使用時長：也能代表功能的優(yōu)先級，用戶使用時間最長的功能，代表可這個功能優(yōu)先級很高。

時間段：用戶在什么時間段使用的是最多的，我們就知道了這個功能的活躍度，這個數(shù)據(jù)指標(biāo)，主要和技術(shù)有關(guān)，我們可以從后臺數(shù)據(jù)去獲得。

使用設(shè)備：用戶使用設(shè)備兼容的優(yōu)先級，平時用戶用什么設(shè)備，再訪談過程中，需要問具體使用電腦的分辨率，屏幕的尺寸，屏幕的比例，都可以去實際的調(diào)研一下。在我們做B端界面選擇屏幕尺寸的時候，可以采用結(jié)合實際情況用戶使用的屏幕分辨率尺寸來設(shè)計界面。

相關(guān)軟件：用戶平時的操作習(xí)慣和流程是什么，還會使用其他軟件嗎？比如他們還用什么其他的競品，可以繼續(xù)問用戶其他的競品哪里比較好，哪里是亮點，那最終得到的目標(biāo)就是用戶的操作習(xí)慣和流程，這些也可都可以反饋在我們產(chǎn)品中。

03. 使用環(huán)境

碎片化時間：主要解決用戶場景的問題，比如汽車4S店銷售，當(dāng)你去買車時，銷售人員會問，你會買什么樣的車，會記錄你的年齡，用車習(xí)慣，用車時間，姓名，預(yù)算，都會記錄，銷售通常會用一些碎片化的時間去記錄。此時就可以得出兩個結(jié)論：1.我們在設(shè)計的時候是否可以考慮讓銷售充分利用碎片化來進(jìn)行這些信息的錄入，而且方便他的錄入，比如他本來只有電腦端，電腦端是一個完整版的功能，我們能不能給他設(shè)計出一個移動端來，讓銷售不用回到電腦屏幕中就可以去記錄這些內(nèi)容。2. 記錄時也有兩種記錄方式，是客戶講話的時候銷售去記錄還是這些事情做完之后銷售再去記錄。通過這樣的行為會得到這樣不同的設(shè)計結(jié)果，比如有人問你們公司為什么要做B端的移動端設(shè)計？以上就可以有理有據(jù)去解決銷售的場景問題。

用戶的操作環(huán)境是什么：主要解決視覺體驗問題，用戶是白天操作還是晚上操作，是在強(qiáng)光環(huán)境操作還是弱光環(huán)境操作。這些都應(yīng)該是考的點。比如B端使用的ATM機(jī)，應(yīng)該設(shè)計成白色還是深色模式，我們知道一般都是深色模式，是因為通常是室內(nèi)，它和光線有關(guān)系，如果是室外的取款機(jī)，四周又沒有遮擋，如果還設(shè)計成深色，肯定是看不清楚的。比如HMI車載系統(tǒng)，白天模式開了深色，一定會看不清楚。所以要提前判斷使用深色模式還是淺色模式，也需要考慮在設(shè)計的時候使用什么樣的色彩和色調(diào)，在室外使用還是室內(nèi)使用，如果對色彩不怎么挑，那也可以使用VI色，這樣一來視覺的保障色就確定了。還可以確定在使用周期時間，要多長時間完成一個操作，應(yīng)該使用什么樣的方法可以盡快完成一個操作。通過用戶的操作環(huán)境可以得到以上信息。

是否有平行事件：用戶在做這件事情的同時，他是不是需要做其他的事情，要得出至少兩種平行事件，得到的結(jié)論是，我們的界面是不是需要把某些功能整合在一起，因為用戶經(jīng)常是需要同時做這兩種事情，同時去打開這兩個功能，通過這樣的反饋可以把同時使用的這兩個功能結(jié)合到一起，通過訪談可以得到這樣的依據(jù)，來進(jìn)行功能的整合。

04. 主動詢問用戶觀點

用戶的驅(qū)動力: 去了解激勵因素，就知道了什么功能應(yīng)該做完善，什么功能并沒有那么重要。比如汽車銷售為什么要錄入信息，因為可以增加汽車的銷量，錄入越準(zhǔn)確的用戶信息，他的銷售量越高。也就是用戶做這件事情，他的原因是什么。

用戶遇到最難事件: 在工作中或者用戶使用過程中遇見了什么樣難的事情，這件難的事情，就是產(chǎn)品的痛點，就明白了當(dāng)前產(chǎn)品迫切需要什么樣的功能去幫我們設(shè)計師來解決當(dāng)前產(chǎn)品痛點的問題。

用戶遇到最颯事件:他在使用過程中最滿意的是什么事情，就是爽點是什么事情，那些產(chǎn)品中解決了用戶很好的問題的部分，去把產(chǎn)品更好的放大，讓用戶繼續(xù)使用。也就是通過訪談我們知道了產(chǎn)品的爽點是什么。

用戶擔(dān)心事件:在他們使用過程中擔(dān)心的是什么，我們也要要了解這些隱藏的問題.

用戶期望事件: 用戶希望得到什么樣的改善，最終的目標(biāo)是想解決什么樣的問題，到這一步其實所有問題目前都沒有答案，我們可以繼續(xù)訪問，先做記錄，不做最終的答案.

問用戶目前狀態(tài): 我們可以了解待解決的問題，通過產(chǎn)品想解決什么問題，進(jìn)行收集需求；用戶對于產(chǎn)品升級有什么小期待，進(jìn)行收集需求；通過用戶的反饋目前產(chǎn)品的哪些問題，收集到目前反饋的問題；以往問題是否有效解決；進(jìn)行收集反饋。覺得不錯的同類型產(chǎn)品有哪些，通過了解競品情報，我們可以競量多問一些 覺得不錯的競品有哪些；目前產(chǎn)品有哪些地方很好，很好的地方要保持，有的產(chǎn)品升級后，以前特別好的功能突然消失了，改了沒必要，好的功能保持就可以；前產(chǎn)品有哪些地方不好，我們?nèi)?yōu)化不好的地方；以往問題是否有效解決，當(dāng)有問題需要解決的時候，用戶的問題是否是通暢的。通過看用戶如何反饋，我們可以了解功能傾向，了解整個流程是否通暢

05. 聊生活

發(fā)覺人性閃光點，提升產(chǎn)品差異競爭力，1、問目前的生活狀態(tài)，婚姻狀態(tài)，有沒有孩子，接送孩子的時間，平時有什么愛好？什么愛好不錯？發(fā)覺人人性的閃光點，好的不好的產(chǎn)品都有共性，B端產(chǎn)品中視覺的傾向是什么？比如有插畫，溫馨的語言提示，通過什么樣的情感設(shè)計可以照顧到每個人的生活。

2.4.4 B端用戶訪談得出結(jié)論

如何判斷功能在用戶那里好還是不好？前面所有的都只是在記錄，現(xiàn)在才是在做判斷，判斷的第一件事，是做定量的整理，所有的問題都收集到了，也記錄到了，至少需要有兩個樣本，去做定量整理。

2.4.4.1定量整理：行為

第一步是行為的總結(jié)，量級的總結(jié)，把記錄的問題點、功能點和關(guān)鍵詞放到表格里面，經(jīng)常出現(xiàn)，迫切需要解決的是什么問題，較少的問題是什么，偶爾的行為問題是什么，因此偶爾的優(yōu)先級就不高了，主要關(guān)注經(jīng)常遇到的問題點、功能點和關(guān)鍵詞。

2.4.4.2 定量整理：特征

把每個角色按照以下表格里的的特征進(jìn)行定量的描述，這時候仍然不能找出它的共性點，但已經(jīng)把用戶的特征進(jìn)行分類整理了，定量之后再去定性。

2.4.4.3 定量整理：特征/角色/流程

這個角色名稱是一個具體的名字，比如王某某。以下這張表：可以看到在我們的系統(tǒng)中有哪些的權(quán)限，有哪些的角色，他們的需求是怎么樣的，這是一個完整的用戶畫像。用戶畫像是一個結(jié)果，是通過用戶訪談的形式完成了用戶畫像，并不是被動的接受數(shù)據(jù)信息得出的，所以通過用戶訪談的形式進(jìn)行定量定性分析得到的結(jié)果是最準(zhǔn)確的。

3.1 建立情緒版

3.1.1 情緒版的概念及作用

本質(zhì)是將情緒視覺化，情緒版并不是玄學(xué)的東西，它確實可以通過圖片找到對應(yīng)的圖形元素，因為圖形（照片）是可以表達(dá)情緒的，比如看到一張照片會感受什么什么情緒：熱、冷、餓、干渴、安靜、壓抑、神秘、恐怖、失落、沮喪、速度、力量這些都是情緒相關(guān)的關(guān)鍵詞。

情緒版是一個特別快速能和產(chǎn)品，我們的團(tuán)隊包括設(shè)計團(tuán)隊進(jìn)行溝通的一種方式，比如要設(shè)計一個界面，需要幾天才能設(shè)計出來，但我想提前知道一下未來界面設(shè)計成什么樣子，那就先做一個情緒版，讓大家知道，找的方向是什么，這樣適合與大家及時的溝通，大家也會明白產(chǎn)品將會做成什么樣子，達(dá)成產(chǎn)品的最終設(shè)計定調(diào)。

3.1.2 怎么建立情緒版

01. 提煉關(guān)鍵詞：獲取本次產(chǎn)品設(shè)計中所要實現(xiàn)的產(chǎn)品3-5個必要的關(guān)鍵字詞組，其中包括交互或視覺目標(biāo)，通常由一些比較抽象的形容詞組成。比如：在做的產(chǎn)品是醫(yī)療行業(yè)，那么醫(yī)療相關(guān)關(guān)鍵字詞組是：生命/健康/安全等。

02.關(guān)鍵詞發(fā)散：通過獲取到的關(guān)鍵詞的基礎(chǔ)上，發(fā)散出來一些新的詞語，這種發(fā)散詞匯，不是簡單頭腦風(fēng)暴產(chǎn)生的，而是要有目的性的進(jìn)行提取，要更加的具體。比如剛才舉例醫(yī)療行業(yè)，生命可以繼續(xù)發(fā)散出血液、器官等衍生關(guān)鍵詞。

03. 搜索圖形: 對之前總結(jié)出的幾個關(guān)鍵詞在圖庫中進(jìn)行查找，也可以在直接在behance里找別人收藏好的情緒版圖片直接用，效率可能更高一點。

04. 制作情緒版: 搜索大量圖片后，挑出我們需要的進(jìn)行整理，采用一種拼貼方式進(jìn)行設(shè)計排版，拼貼出來需要得到需要得到的色彩，構(gòu)圖，質(zhì)感和字體。

05. 得出結(jié)論: 在圖形、色彩、字體、質(zhì)感、構(gòu)圖，以上五點，得到合適的設(shè)計方案，快速與團(tuán)隊進(jìn)行溝通，直觀表達(dá)產(chǎn)品清徐，達(dá)成產(chǎn)品的設(shè)計定調(diào)。產(chǎn)品調(diào)性（企業(yè)調(diào)性）其實就是用企業(yè)的方式把故事講述出來，是一種通過情緒版方法來講故事的方式。

3.2 品牌三元法

3.2.1 品牌三元法為什么逐漸替代情緒版

品牌三元法是通過品牌三板斧模型得出的一個確定設(shè)計主風(fēng)格的一種新得方法，品牌三板斧模型可以總概為用戶調(diào)研關(guān)鍵的三個維度，一目標(biāo)用戶是誰？二產(chǎn)品服務(wù)是什么？三對于目標(biāo)用戶來說，你的產(chǎn)品服務(wù)有什么核心價值。當(dāng)在回答完這三個問題以后，我們其實就已經(jīng)清楚我們的品牌定位是什么了，因為它的核心優(yōu)勢是比較明顯的，這樣我們就知道我們將來會面對什么樣的人群，去怎樣去宣傳它的賣點，同時做出產(chǎn)品的差異化。

通過這幾年得工作案例設(shè)計實踐，在確定設(shè)計主風(fēng)格時，情緒版方法逐漸有被品牌三元法替代得趨勢，因為情緒版這種把抽象的詞不太好表現(xiàn)的詞，翻譯成圖片的方式，比如剛才提到醫(yī)療行業(yè)的關(guān)鍵詞是生命，健康，安全的，設(shè)計師找到很多這種相關(guān)的圖片，挑出來后從這些圖片里面找到一個共同的規(guī)律，最后去設(shè)計。這里面就有兩個問題，一個原因是關(guān)鍵詞非常的平，生面，安全，健康，很難更準(zhǔn)確的表達(dá)衍生關(guān)鍵詞。另外一個問題是它非常局限設(shè)計師的創(chuàng)意，因為它是從一些現(xiàn)有的圖片里面然后去挑，所以很多設(shè)計師就反饋現(xiàn)有的方法不是很好用，比如當(dāng)我們想到安全這個詞，可能所有人想到都是特別綠的感覺，或者干凈這個詞，就會統(tǒng)一聯(lián)想到白色這個畫面，大家從一開始想法就差不多，所以它很難體現(xiàn)出創(chuàng)意。所以由于情緒版嚴(yán)重限制了自己的想象力，沒辦法把產(chǎn)品核心的氣質(zhì)表現(xiàn)出來，雖然情緒版正確但是是一個平庸的結(jié)果，大家沒辦法記住的結(jié)果。

3.2.2 如何應(yīng)用品牌三元法

01. 理性層面（業(yè)務(wù)層面），傳遞產(chǎn)品理念：獲取本次產(chǎn)品設(shè)計中體現(xiàn)業(yè)務(wù)層面，可以傳達(dá)產(chǎn)品理念得5-10個關(guān)鍵詞，對應(yīng)的放在左邊。

02. 感性層面（人文層面），營造產(chǎn)品氛圍：主要體現(xiàn)這個產(chǎn)品給用戶帶來什么好處，宣傳的角度是什么。獲取本次產(chǎn)品設(shè)計中體現(xiàn)人文層面，可以傳達(dá)產(chǎn)品氛圍的5-10個關(guān)鍵詞，對應(yīng)的放在右邊。

03. 個性層面（氣質(zhì)靈魂），創(chuàng)造獨特風(fēng)格：結(jié)合理性的業(yè)務(wù)層面和感性的人文層面，來創(chuàng)作出什么樣的畫面，和獨特風(fēng)格的感覺。同樣總結(jié)出5個左右的關(guān)鍵詞，放在下邊。

04. 結(jié)合以上三個維度，提煉主視覺畫面：當(dāng)出現(xiàn)這三部分詞的時候，經(jīng)過思考或者大家一起頭腦風(fēng)暴，可能一開始想到的比較淺，但最終一定能想到一個最終關(guān)鍵詞或者特別符合我們這個產(chǎn)品氣質(zhì)的畫面，因為以上三部分得出關(guān)鍵詞也都是經(jīng)過品牌三板斧模型推演出有關(guān)聯(lián)的關(guān)鍵詞，想到一個符合產(chǎn)品氣質(zhì)的畫面并不難，再得出這個主視覺畫面后，這就是最終產(chǎn)品調(diào)性的主視覺，既符合產(chǎn)品定位，又具有獨特的差異性。

05. 傳達(dá)產(chǎn)品，用視覺語言講故事：接下來，當(dāng)這個主題、主視覺確定了以后，在看怎么樣用具體的視覺設(shè)計技能，去傳達(dá)我們的產(chǎn)品，也就是用視覺語言來講故事，具體注意三個方面，一是表像，元素要符合這個視覺主題，二是關(guān)聯(lián)，元素之間要具有關(guān)聯(lián)。三是隱喻，用視覺的手段含蓄的表達(dá)產(chǎn)品的一些特性。比如云計算的一些產(chǎn)品，做得比較復(fù)雜每一個圖標(biāo)上都有一些曲線切割的畫面，這樣做的原因其實不是為了炫技，它是為了表達(dá)云計算彈性可擴(kuò)展的特性，好比拍電影，中國人講究隱晦。

4.1 色彩規(guī)范

4.1.1 選色

在系統(tǒng)色彩中，以Antdedign為例，系統(tǒng)色彩里包含了很多不同的色調(diào)，但不可能用到這么多顏色，這時要應(yīng)用選擇幾個顏色，選幾個我們應(yīng)用的顏色。第一步要做的就是選色，選出應(yīng)用色彩，這個應(yīng)用色彩也就是我們建立得視覺規(guī)范中的基礎(chǔ)色板，在選色時候需注意，要有有明確的心理預(yù)期，比如醫(yī)療行業(yè)中常用藍(lán)色和綠色，就是符合預(yù)期的顏色。在基礎(chǔ)色板里選擇調(diào)色，應(yīng)選擇兩個相同級別的藍(lán)色和綠色；基礎(chǔ)色板里選不同顏色時不要超過三個級別的跳躍；當(dāng)選擇一個確定的顏色時，可以選擇草綠或者青綠色來作為輔助色；在基礎(chǔ)色板里，最頂部的顏色最適合做背景色，中間的顏色適合做按鈕色，底部的顏色適合做狀態(tài)色，或者小面積文字的填充色，其余就是搭配過度的作用。再比如零售、比如金融行業(yè)的產(chǎn)品，會選擇不同的顏色，那這些顏色代表了什么，是不是會和企業(yè)的VI色是有相符之處，這些都是我們?nèi)ヒ紤]的。

4.1.2 注意色彩的兩個特性

01. 注意品牌性：體現(xiàn)特性和傳播理念、價值觀：比如宜家，我們立刻會想到的是黃色和藍(lán)色。比如京東，我們會想到紅色。如果是餓了么，我們會想到藍(lán)色。這些都是標(biāo)識性的色彩，體現(xiàn)和傳遞的就是品牌理念和價值觀。這些顏色一定不是隨便選的，比如，宜家的黃色和藍(lán)色，其實是瑞典的國旗的顏色，代表著宜家的來源地來源于瑞典，因為瑞典是一個很強(qiáng)調(diào)簡約設(shè)計的國家，貫穿始終是在強(qiáng)調(diào)它的的價值觀。一些關(guān)鍵行動點：比如選中的狀態(tài)，按鈕的顏色，在很重要的地方用主色表達(dá)，這就是在體現(xiàn)B端的產(chǎn)品的色彩價值觀和企業(yè)價值觀的地方

02. 注意色彩的功能性：色彩需要體現(xiàn)功能有明確的信息以及狀態(tài)含義，色彩代表它獨特的含義，比如成功色，通常會選擇綠色，再系統(tǒng)色板里，青綠草綠都可以選。比如出錯/刪除/失敗用紅色，表示警告警示。比如鏈接要用藍(lán)色。

4.2 圖標(biāo)規(guī)范

畫圖標(biāo)要注意圖標(biāo)的識別性、統(tǒng)一性和獨特性。圖標(biāo)首先要一眼看出來表達(dá)的含義，其次是圖標(biāo)設(shè)計圖標(biāo)的大小，線寬粗細(xì)，圓角大小，圖標(biāo)風(fēng)格等這些都需要統(tǒng)一，最后最好可以體現(xiàn)出圖標(biāo)的獨特性，獨特性就是差異化，這也是品牌三遠(yuǎn)法得核心，塑造產(chǎn)品的差異化，具體分析方法也可應(yīng)用在圖表設(shè)計當(dāng)中，比如根據(jù)品牌基因進(jìn)行延展，也可根據(jù)主風(fēng)格主視覺設(shè)計定調(diào)，設(shè)計出獨特風(fēng)格且符合產(chǎn)品定位得圖標(biāo)應(yīng)用在產(chǎn)品當(dāng)中。

4.3 文字規(guī)范

4.3.1 字體家族

在B端頁面中字體的顯示順序，有固定的一套代碼模式，可以理解為，比如有的用戶電腦沒有平方字體，所以會顯示出冬青黑體，來替代平方字體的設(shè)計稿，如果沒有冬青黑體，就用微軟雅黑替代顯示，字體家族中，從左到右代表了字體顯示的有限順序，平方、冬青黑體、微軟雅黑、黑體、宋體，中英文都是。

4.3.2 主字體

在系統(tǒng)中有中文常用PingFangSC、微軟雅黑、思源黑體；英文常用San FranciscoUI（SF字體）、Helvetica Neue、Arial

4.3.3 大小與行高

方法一：在Antdesign中規(guī)定的，比如字體大小是14px，行高就是22px。規(guī)范里最小字體是14px，但可能有注釋字體，字號最小是12px。表格里的內(nèi)容是按照表格里的行高來約定的，與字體行高無關(guān)，這個前提是，不在表格里內(nèi)。當(dāng)沒有出現(xiàn)文本字體，表格里的字體的時候就需要去設(shè)置字體的行高，F(xiàn)igma里默認(rèn)行高是140%，比如14px字體，行高就設(shè)置成22。這是Antdesign里的規(guī)范，但不是唯一的規(guī)范。需要注意的是，如果使用一個標(biāo)準(zhǔn)就全部使用一個標(biāo)準(zhǔn)，這個需要把選中文字段落進(jìn)行調(diào)整行高。

方法二：是當(dāng)按倍率去算的行高規(guī)范，方法步驟是先調(diào)整好行高，去改變字體大小，比如無行高時，1/100%/1倍行高，注意加上%號；緊湊行高，1.3行高/130%；常規(guī)行高1.5行高/150%；寬松行高，1.7行高/170%。

4.3.4 文字的層級關(guān)系

輔助文字12px、正文（?。?3px、正文（常規(guī)）14px、小標(biāo)題（16px，小標(biāo)題是相對于14號字出現(xiàn)的）、標(biāo)題18px、主標(biāo)題20px

4.3.5 字重

比如常用的蘋方有6個字重，但在平時的設(shè)計中根本用不上。中文環(huán)境6個字重在實際顯示并沒那么好，常用兩個字體，萍方常規(guī)體400（常規(guī)），蘋方中黑體500（粗體）。而英文可以用粗體600。

4.3.6 字體顏色

在深色背景下、和淺色背景下不同內(nèi)容的色彩透明度不同，具體透明度用百分比顯示。在彩色背景下或者在不同顏色之下，字體應(yīng)該使用白色還是黑色，應(yīng)該按著規(guī)范嚴(yán)格使用，難點在顏色相近的時候選擇白色還是黑色，也需按照規(guī)范執(zhí)行。

4.3.7 文字對齊關(guān)系

文案類對齊：頁面的字段、段落較短標(biāo)題、需正文左對齊

表單類對齊：保證整齊適合閱讀，冒號對齊法找到中間的冒號，（左右對齊），如果全部使用左對齊或者右對齊會更亂。左邊一般最長字段六個字。前提是中文環(huán)境，不是國際化。冒號左右要留多少像素：8px的倍數(shù)相關(guān)值，4（窄點）、8（正常）、12、16（寬一點）都可以。

數(shù)字類對齊：日期，居中對齊；年齡，居中對齊/左對齊；非固定的數(shù)字：價格，采用右對齊，因為右對齊很容易看到價格的多少，哪個超出的更多，就越貴的，更容易區(qū)分?jǐn)?shù)字的多少。

4.4 層級規(guī)范

層級規(guī)范得核心是對信息的間隔和區(qū)分，信息的區(qū)分間隔要用偶數(shù)8的倍數(shù)。具體可分為同層級的區(qū)分，用色塊（比如氣泡）、邊框（欄目之間抖索狂等）、線段來進(jìn)行區(qū)分。錯層區(qū)分，用彈窗（背景變暗）、邊框陰影（陰影的出現(xiàn)是擬物化的出現(xiàn)，當(dāng)物體離它的光源越近，比如高度越高，它的陰影就越大越寬。離它的底部越近，陰影就越小，比如下拉框、搜索框、日歷控件、彈出窗口來區(qū)分）。

這里需注意，關(guān)于投影，再前端角度考慮盡量不要用太多的特效濾鏡來設(shè)計，因為在B端網(wǎng)頁中，瀏覽器的兼容性不好，比如用ie瀏覽器就根本看不到這樣的效果，如果用谷歌瀏覽器能看到，用safri瀏覽器能看到，但在火狐下等又會看不到，想要都看到就需要兼容很多代碼，需要前端加很多代碼實現(xiàn)兼容性的效果，很增加前端的工作量，所以在B端很少用非標(biāo)準(zhǔn)型的濾鏡代碼使用，雖然可以實現(xiàn)，但一般不太用，一般就是變灰、變深、變透明度最簡單的方法實現(xiàn)。不同于移動端，因為IOS用的是原生的開發(fā)，所以不存在這個問題。

從接觸B端設(shè)計兩年以來，第一次詳細(xì)梳理B端設(shè)計的系統(tǒng)知識點，從B端產(chǎn)品設(shè)計的工作流程，到B端設(shè)計前的準(zhǔn)備工作，交互設(shè)計的七大定律，B端產(chǎn)品業(yè)務(wù)調(diào)研，用戶訪談研究方法，精準(zhǔn)推導(dǎo)B端用戶畫像，到B端產(chǎn)品主風(fēng)格的設(shè)計定調(diào)，進(jìn)而深度理解B端主流組件庫的視覺規(guī)范，為B端產(chǎn)品設(shè)計做出了充分的指導(dǎo)作用，對比我之前零散的知識記憶，這次B端設(shè)計前的準(zhǔn)備工作梳理，也更加深刻的由點及面的形成了系統(tǒng)的框架，也重新認(rèn)識了B端產(chǎn)品的分析方法，區(qū)別于之前一直從事的C端設(shè)計工作，也真正對B端和C端在設(shè)計思維上有了本質(zhì)的區(qū)分，同時也鍛煉了我的歸納能力和演繹思維和系統(tǒng)思維能力，期間參考資料有《B端設(shè)計研修》、《用戶體驗要素》、《信息架構(gòu)設(shè)計》，謝謝閱讀，希望對大家也有幫助~thanks

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

固定表頭

-

固定表頭讓用戶隨時都知道自己所在列的名稱。

水平滾動

-

當(dāng)展示大型數(shù)據(jù)列表時，水平滾動是不可避免的。可以 將具有標(biāo)識性信息的數(shù)據(jù)展示在第一列中，并固定第一列方便用戶對其他數(shù)據(jù)進(jìn)行對比。

調(diào)整每一列的寬度

-

調(diào)整列寬可以讓用戶看到所有的內(nèi)容。

設(shè)計表格樣式

-

表格的樣式有：白色和其他顏色相間的斑馬線設(shè)計，單純用線分割，自由形式等。

正確的設(shè)計行樣式可以幫助用戶瀏覽表格數(shù)據(jù)，對只包含少量數(shù)據(jù)的表格來說，減少視覺干擾非常重要，這時候就可以采用去掉分割線、斑馬行的自由展示模式。但對于有大量數(shù)據(jù)的表格來說，自由模式容易讓用戶迷失，這時候用線分割，讓用戶能區(qū)分開每一行就顯得尤為重要。而斑馬線的設(shè)計樣式適合包含多列數(shù)據(jù)的表格，需要水平移動的大量數(shù)據(jù)表格。 

表格密度展示

-

為列表設(shè)計不同的密度，用戶可以根據(jù)需要自行切換，比較緊密的行距讓用戶無需滾動就可以瀏覽更多的數(shù)據(jù)。

數(shù)據(jù)可視化

-

讓數(shù)據(jù)可視化，提供表格內(nèi)容的概括性預(yù)覽，讓用戶無需細(xì)讀每一條數(shù)據(jù)就能得到想要的信息。

分頁展示

-

分頁設(shè)計方便用戶跳轉(zhuǎn)到相應(yīng)頁面，但是也常常被無限滾動加載的方式取代，無限滾動加載指的是隨著鼠標(biāo)不停地往下滾動，頁面內(nèi)容也會隨之加載，這種方式適用于發(fā)現(xiàn)類的網(wǎng)站，但是對于考慮優(yōu)先級的產(chǎn)品來說就不太合適了。

懸停展示

-

當(dāng)用戶懸停時顯示更多功能可以減少視覺混亂。需要注意的是，它可能會導(dǎo)致可發(fā)現(xiàn)性問題，因為用戶需要與表交互才能看到更多的功能。

直接編輯

-

直接編輯可以讓用戶在當(dāng)前表格內(nèi)修改數(shù)據(jù)和內(nèi)容，而不用額外再跳轉(zhuǎn)其他頁面進(jìn)行操作。

可擴(kuò)展功能

-

可以擴(kuò)展的表格設(shè)計允許用戶在不丟失上下文的情況下瀏覽更多詳細(xì)信息。

快速視圖

-

與可擴(kuò)展功能非常相似，快速視圖使用戶能夠在保持上下文的同時查看附加信息。

彈窗

-

彈窗設(shè)計同樣可以讓用戶停留在表格視圖中，讓用戶更專注在附加信息和操作上。

多層彈窗

-

多層彈窗功能對于活躍用戶來說非常強(qiáng)大，可以同時完成多種操作，或用來比較不同項目的詳細(xì)信息。

點擊詳情展示

-

單擊鏈接會將表格轉(zhuǎn)換為左側(cè)為列表項和右側(cè)為其他詳細(xì)信息的視圖。它使用戶能夠解析大型數(shù)據(jù)，以及查看單獨的項目詳情而不會丟失它們的位置。

可排序的列

-

排序允許用戶按照字母順序或數(shù)字順序?qū)α羞M(jìn)行重新排列。

基本篩選

-

提供基本的篩選功能來搜索表格里的相關(guān)數(shù)據(jù)。

列篩選

-

這種設(shè)計模式允許用戶將過濾參數(shù)分配給特定的列。

可搜索的列

-

這種設(shè)計模式允許用戶在每列中搜索特定值。

添加列

-

這種設(shè)計模式允許用戶根據(jù)需求在數(shù)據(jù)表格中添加列。

可編輯的列

-

可自定義的列功能使用戶能夠選擇他們想要查看的列并進(jìn)行相應(yīng)的排序。 這個功能還包括保存預(yù)設(shè)后再修改的能力。

...

為什么表格設(shè)計很重要

數(shù)據(jù)正在成為全球經(jīng)濟(jì)的原材料。對數(shù)據(jù)的追求推動了行業(yè)的重塑。能源、媒體、制造、物流、醫(yī)療保健、零售、金融，甚至政府都在經(jīng)歷數(shù)字化轉(zhuǎn)型。

然而，如果沒有可視化數(shù)據(jù)并對其采取行動的能力，數(shù)據(jù)就毫無意義。未來十年幸存下來的公司不僅將擁有卓越的數(shù)據(jù)；他們也將擁有卓越的用戶體驗。

良好的用戶界面設(shè)計基于用戶的目標(biāo)和行為。用戶界面反過來也會影響行為，從而推動進(jìn)一步的設(shè)計決策。用戶體驗以微妙和無意識的方式改變了人類的決策方式。所看到的、呈現(xiàn)的位置以及交互的方式，都會影響行動。重要的是我們要做出能夠帶來更美好世界的設(shè)計決策，一個符合這個時代的數(shù)據(jù)表格設(shè)計。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：國外  彩虹BOOK翻譯
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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