一、間距在UI中的重要性

1.什么是間距？

間距指的是界面各元素彼此相隔的距離，可以是文字自身的行距、與圖片、與組件、與模塊的間距，或是界面兩側(cè)的安全距離（如網(wǎng)頁的寬度為1920px，內(nèi)容區(qū)為1400px，那么安全距離為兩側(cè)各260px）等。
作為UI設(shè)計師，在設(shè)計界面的每一個元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調(diào)整間距，利用各間距之間的規(guī)律來組織界面內(nèi)容，確保信息的節(jié)奏性，給用戶輕松、預(yù)約的瀏覽體驗。

2.間距的實際作用

間距可以讓界面信息更有節(jié)奏，提升內(nèi)容的可讀性，還能通過不同的疏密程度來闡述各元素之間的關(guān)系，以吸引用戶的注意力，所以在控制界面間距時，一定要有“較真”的心態(tài)，任何一次的改動與調(diào)整都要先考慮清楚為什么，能給產(chǎn)品和用戶帶來什么。要做好間距，不能僅停留在視覺層面，需要進行多方面思考。
設(shè)計師層面：規(guī)范的定義間距，不必每個元素都去考慮間距的大小，有效減少決策和思考時間，提升效率。
開發(fā)層面：開發(fā)可以按照基礎(chǔ)間距去定義變量，長期如此，雖然不能煉成像素眼，但僅憑視覺也能看出間距的倍數(shù)。例如基礎(chǔ)間距以8px增量，在使用8px、16px、24px、32px、48px...等，開發(fā)直接使用基礎(chǔ)間距x1、x2、x3...，以此類推，在開發(fā)眼中，肉眼定然看不出1px的差別，但卻能區(qū)分出8px的差距，不必每次都去測量，還能減少誤差，高度還原設(shè)計效果。
用戶層面：有節(jié)奏且具備一致性美感的界面效果，信息的有效傳遞變的輕松，用戶體驗?zāi)艿玫胶艽蟪潭鹊奶嵘?

3.間距的統(tǒng)一性

設(shè)計規(guī)范的目的是提升設(shè)計師的工作效率、團隊之間的高效溝通、讓設(shè)計風(fēng)格始終保持高度統(tǒng)一。同理，間距也是設(shè)計規(guī)范中非常重要的一環(huán)，它作為規(guī)范中的最小單元，如果沒有遵循統(tǒng)一，將會直接影響界面整體的版式和布局，信息的疏密程度嚴(yán)重影響用戶的瀏覽。不僅是設(shè)計師，開發(fā)每次面對同樣的模塊都需要定義不同的間距也是崩潰的，毫無規(guī)律可循。
統(tǒng)一的間距能讓界面的視覺效果更有節(jié)奏，設(shè)計師在設(shè)計某些相似的模塊時可直接復(fù)用組件，即便是多人共同完成同個項目或更換成員，也不會因間距不統(tǒng)一的問題造成整個APP的風(fēng)格混亂。
對開發(fā)來說，如果清楚間距的使用規(guī)律，即便有小的誤差，也能自行更正，例如使用8px增量，8、16、24...按倍數(shù)規(guī)律以此類推，若出現(xiàn)9的間距，開發(fā)會更正為8、15則會更正為16，自行多退少補，雖然設(shè)計師需要細心、盡量不出現(xiàn)這種小的出入，但任何事情都沒法做到絕對，統(tǒng)一的間距能讓減少設(shè)計的出入以及與設(shè)計師之間的頻繁溝通，能進一步提高開發(fā)效率。

▲ 從上圖可以看出，間距不規(guī)范、信息就像一鍋粥，而規(guī)范的使用間距就能將信息自動分組。

二、定義文字間距

文字是UI設(shè)計中非常重要的信息元素，雖然大多數(shù)設(shè)計師對文字的屬性比較了解，但在真實設(shè)計中總會因其他信息的干擾不能合理運用，與上線后的視覺效果預(yù)期相差甚大。文字的各種間距處理看似簡單，但實際上有很多因素要考慮，例如字間距、行高、段落等，下面帶大家一起了解。

1.字符間距

字符間距一般都是設(shè)計工具的默認(rèn)數(shù)值，無需調(diào)整。當(dāng)碰到多行文字需要避開頭尾的標(biāo)點符號時，使用工具中的避頭尾功能即可自動調(diào)整字間距，如無此功能，則需手動調(diào)整，這里并沒有所謂的技巧與方法，頭尾避開標(biāo)點符號即可。
另外，在設(shè)計卡片、瓷片區(qū)的標(biāo)題時，有時需要通過調(diào)整字符間距來提升界面的舒適度，間距數(shù)值自行定義，但相同層級的內(nèi)容標(biāo)題字間距一定要保持一致。

2.文字行高

行高是指上邊框+下邊框+字號的高度之和，這里主要針對多行文本。在平面設(shè)計中，行高沒有一定的標(biāo)準(zhǔn)，如無特別需要，使用系統(tǒng)默認(rèn)的行高即可。
在UI設(shè)計中，文字會有5～6個不同的等級，為便于用戶閱讀，一般會設(shè)定行高標(biāo)準(zhǔn)，尤其是新聞資訊類型的應(yīng)用本身就以文字內(nèi)容為主，不同的行高對文字的易讀性會產(chǎn)生較大的影響。
文字行高一般會設(shè)定為字號的1.2～1.5倍，具體值跟字號有很大關(guān)系，文字越小，行高就越大。例如，我們可以設(shè)定字號32px為中間值（非絕對），小于或等于32的字體、行高為字號的1.5倍，大于32的為1.2倍。另外，也可以直接將所有行高固定在字號的1.5倍，不難發(fā)現(xiàn)，字體越大其折行的概率就越低，試想一下，如果將48px的文字折成幾行，界面還能剩下多少空間？

3.文字段落

文本段落間距的重要性在移動UI界面中并不明顯，更多體現(xiàn)在網(wǎng)頁設(shè)計中。需要著重糾正一點的是，部分設(shè)計師在設(shè)置段間距時習(xí)慣性的多敲一次回車鍵，這種方式并不可取，會造成間距過大、內(nèi)容脫節(jié)。
如有需要，一定要手動設(shè)置段間距，這里沒有固定的數(shù)值和規(guī)律，視覺舒適即可。筆者習(xí)慣將段間距設(shè)定為字號的0.5倍，例如字號為30、段間距為15，字號為40、段間距為20，僅供參考。

三、定義元素/組件間距

定義間距其實并沒有一個絕對的標(biāo)準(zhǔn)，主要取決于最小單位，例如4px、5px、6px、8px都是可以的，到底使用哪個數(shù)值還得根據(jù)產(chǎn)品自身定位及內(nèi)容組織形式，前提是所有間距都要遵循最小單位并基于倍數(shù)形成規(guī)律。
在設(shè)計界面時，需要利用間距來建立信息層級、提升瀏覽體驗以及表達各元素之間的關(guān)系，這就是為什么當(dāng)我們打開新聞資訊、電商類應(yīng)用會發(fā)現(xiàn)信息非常緊湊，而打開工具、社交類應(yīng)用時感覺信息比較寬松。間距的基數(shù)越小、頁面就越細碎；基數(shù)越大、頁面的留白就越多，使用不同的基數(shù)，呈現(xiàn)出來的視覺效果也形態(tài)各異。
筆者在工作中通常以8px作為基數(shù)，以此衍生出8、16、24、32、48、64這6個間距數(shù)值，完全能夠滿足絕大多數(shù)的使用場景。當(dāng)然，針對信息較少的頁面也會使用到120、160、200...其他間距數(shù)值，例如缺省頁、登錄頁面等。不難看出，上述以8px為基數(shù)定義間距數(shù)值時，沒有40、56這兩個數(shù)值，難道他們不是8的倍數(shù)嗎？我們以8和16做對比，后者是前者的2倍，其間距的變化尤為明顯；但如果用56和64做對比，后者是前者的1.14倍，其間距的差別微乎其微。敲重點，設(shè)計師在定義間距時，需要遵循倍數(shù)規(guī)則，但同時也要為考慮界面美觀及用戶的瀏覽體驗而跳出呆板的規(guī)則，當(dāng)間距數(shù)值越大時，根據(jù)基數(shù)所跳躍的倍數(shù)就越大，其實設(shè)定字號也是相同的邏輯（后期詳解）。

四、定義模塊間距

從信息層級角度來看，等級權(quán)重越高、間距就越大，在現(xiàn)實世界中也是如此，一個物體周圍的空間越大，就越容易吸引人們的注意力。
模塊間距分為塊內(nèi)間距（同一模塊中不同元素或信息組之間的距離）和塊外間距（同一個頁面中不同模塊的之間的距離），為了更好的區(qū)分信息層級，塊外間距一定會大于塊內(nèi)間距，也能保持塊內(nèi)信息的親密性。
如下圖所示，將裝修序列步驟、官方攻略、常用服務(wù)等看作不同的信息模塊，每個模塊內(nèi)元素的間距都會比各模塊之間的間距小很多。

五、間距的使用技巧及原則

1.接近性原則

需要通過各元素的間距來體現(xiàn)出信息的關(guān)聯(lián)性，格式塔原理中的“接近性”原則告訴我們，相互靠近的物體被認(rèn)為比相互距離較遠的物體更有關(guān)聯(lián)性，因此，相關(guān)聯(lián)的元素之間靠的越近，用戶越能感知到信息的關(guān)聯(lián)，同時更能了解整個界面中各模塊信息的邏輯關(guān)系。

2.利用留白強調(diào)

很多時候，想讓一個元素變的突出，可以用加大字號、修改色值或后加粗等方式進行強調(diào)，但這并不是突出信息的唯一方式，當(dāng)所有元素都變的突出，那就等于什么都不突出了。如果想讓界面中的元素不同程度的突出，留白也是一種強調(diào)信息的方式，它能引導(dǎo)用戶將注意力集中在特定的內(nèi)容上。

3.使用柵格系統(tǒng)

善用柵格系統(tǒng)（上述有詳細說明），通過最小間距值進行遞增，讓整個界面看起來更協(xié)調(diào)。柵格系統(tǒng)可以讓設(shè)計師在元素的親疏關(guān)系上更快作出決策，后續(xù)不管是迭代還是更換設(shè)計成員，都能保持統(tǒng)計的間距規(guī)范。

4.文字行高規(guī)則

這個問題在很多團隊中都是硬傷，甚至在設(shè)計驗收時還被直接忽略。在主流UI設(shè)計工具中，添加文本元素時，都會有默認(rèn)行高，在前面的內(nèi)容中有講過多行文本的行高為字號的1.2~1.5倍，那么單行文字的行高到底是需要手動設(shè)置還是遵循默認(rèn)，筆者認(rèn)為都是可以的，但一定要與開發(fā)保持一致。
行高決定著文字邊緣與定界框的間距，而開發(fā)只能看到定界框與其他元素的間距。

1）默認(rèn)行高
默認(rèn)行高值會隨著字號的變化基于一定的倍數(shù)自動增減，需要將此規(guī)律或倍數(shù)告知開發(fā)，開發(fā)將此規(guī)則植入代碼方能最大化還原設(shè)計效果。另外在設(shè)計界面時，尤其是多組文字元素的上下間距，需要通過計算（文字邊緣到定界框的間距+文字元素間距=實際間距）或手動測量才能達到精準(zhǔn)狀態(tài)，下圖為例：

2）手動設(shè)置行高
手動設(shè)置即字號是多少、就將行高設(shè)置為多少，確保文字邊緣緊貼定界框，在設(shè)計過程中調(diào)整間距時，無需計算，根據(jù)設(shè)計工具的智能提示調(diào)整即可。

5.間距值數(shù)量設(shè)定

在同一APP應(yīng)用中，根據(jù)最小基數(shù)定義的間隔值數(shù)量不易過多，一般在6個左右就能滿足絕大多數(shù)的設(shè)計場景。例如以8px的基數(shù)為8、16、24、32、48、64等，以5px的基數(shù)為5、10、15、25、40、60等。數(shù)量過多會導(dǎo)致界面不同元素、模塊的間距差異化不夠明顯，數(shù)量太少無法滿足多元素、模塊使用場景，也會導(dǎo)致間距跨度較大。

6.明顯相鄰間距值

設(shè)定間距值需遵循一個原則“數(shù)值越大、遞增的倍數(shù)就越大”。當(dāng)相鄰間距值的差異化較小時，用戶很難感知到界面中信息之間的邏輯關(guān)系，我們需要根據(jù)柵格系統(tǒng)中間距值的增大、設(shè)置更大的區(qū)間值，讓相鄰間距值之間的視覺差異更加明顯。

7.跳出間距的束縛

當(dāng)界面中的信息較為密集、間距不足以滿足信息的突出程度時，需跳出純粹的間距規(guī)范束縛，換種方式或許更好。例如：給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調(diào)整元素大小等，需知「此消彼長」的道理。

六、結(jié)語

如果在處理界面信息層級時，改來改去還是覺得很亂，不防從間距角度出發(fā)，或許會有不一樣的收獲。雖然在剛開始的時候，規(guī)范間距帶來的效果甚微，但隨著團隊規(guī)模不斷擴大、界面數(shù)量越來越多、內(nèi)容越來越復(fù)雜時就會發(fā)現(xiàn)，所有內(nèi)容統(tǒng)一間距規(guī)范，不管是構(gòu)建一致性界面視覺效果、還是對開發(fā)和設(shè)計師來說，既能提升用戶體驗、還能提高團隊的工作效率。
間距是否規(guī)范使用，決定著界面是否規(guī)整、信息傳達是否清晰，即便如此，間距也只是解決信息層級方式的其中之一，切不可讓其限制設(shè)計師的發(fā)揮和思考空間。制定設(shè)計規(guī)范有助于項目的高效運轉(zhuǎn)，間距也好、色彩也罷，設(shè)計師依然需要從實際用戶場景出發(fā)，通過不斷的思考和經(jīng)驗總結(jié)，打磨出更合理、更符合項目需求的設(shè)計規(guī)范。

作者：大漠飛鷹CYSJ



藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



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

一、需求分析

在設(shè)計一個產(chǎn)品的時候，我們要透過現(xiàn)象看本質(zhì)。

我們是為誰？解決什么問題？分析的結(jié)果將直接影響到方案的好壞。 這里推薦大家采用5W1H分析法，5W1H分析法也叫六何分析法，是一種思考方法，也可以說是一種場景創(chuàng)造分析法。

5W1H分析法包含如下幾個方面：

Why：為什么要做，是原因。

What：做什么、做成什么，是目標(biāo)。

Where：在哪兒做，是地點。 

When：什么時候做，是時間。 

Who：誰來做，是執(zhí)行對象。 

How：怎么做，是方法。

通過上述分析我們可以（假設(shè)）知道：我們的用戶是技術(shù)人員、基層管理人員；做這個頁面的目的是為了讓用戶隨時掌握各項工作的進展情況，快速進入需要處理的工作事項。 根據(jù)結(jié)論可以得出工作臺是一個導(dǎo)航頁面或者綜合管理頁面，它是用戶感知產(chǎn)品價值的重要“門面”，使用者有一定的經(jīng)驗，屬于高級用戶。從設(shè)計角度來看，首頁工作臺是整個系統(tǒng)規(guī)范與視覺風(fēng)格的核心場景。

使用角色：

主要是技術(shù)人員、基層管理人員

內(nèi)容主次(根據(jù)需求得出)：

P0:各類數(shù)據(jù)指標(biāo)的匯總、我的動態(tài)

p1:總量趨勢、數(shù)據(jù)排名、操作匯總

p2:分發(fā)匯總、待辦事項 

設(shè)計要求：

重點突出、簡潔、清晰

二、信息架構(gòu)

優(yōu)先級處理

下面這張圖是產(chǎn)品給的原型，也是B端面試題中經(jīng)常會遇到的題目。如果你打算就按照產(chǎn)品給的原型直接做美化，那估計很難被選中。

做需求分析的目的之一就是為了做信息處理，這里要提到一個詞叫“屏效”。B端產(chǎn)品我們都知道，目的是“降本增效”，在合理的信息布局下盡量利用交互等手段讓頁面縮短。 

比如：上面原型中有兩個top10排名，如果一行展示會比較擁擠，也體現(xiàn)不了top10排名?？紤]“易讀性”我們會放兩行，但這樣又占據(jù)了屏幕空間，在與產(chǎn)品溝通后我們把它整合到一起，利用按鈕組切換進行查看。同時排名也是業(yè)務(wù)人員需要關(guān)注的，所以我們把它們往上放。

頂部個人信息內(nèi)容比較少，也沒必要占一整行，我們把它移到右邊；各類指標(biāo)因前3個是不能點擊的，為了和后面可點擊按鈕做區(qū)分，我們整合到一個卡片上；待辦事項與產(chǎn)品溝通后說不太重要，移動到了最下面，操作匯總模塊往上移；

到這里模塊之間的信息優(yōu)先級基本處理完成，下面就要對單個模塊進行拆解處理。 

首先我們要觀察哪個是：重要信息、次要信息、輔助信息，上面我們提到了“效率”，把重要信息突出顯示，就是為了讓用戶一眼就能看清，不需要去尋找或被次要信息干擾。 

最后一個模塊原型上只有一個標(biāo)題，這真是驗證了一句話：“巧婦難為無米之炊”，所以又去找產(chǎn)品溝通，為什么單個模型可以點擊查看更多？用戶在這個地方想要獲取什么樣的數(shù)據(jù)？

經(jīng)過一番溝通，拿到了一些“米”，巧婦終于可以干活了。為了體現(xiàn)“易發(fā)現(xiàn)性”，我們在后面這個模塊上加了一個詳情按鈕。

柵格化處理

其實上面的圖是我處理過的，產(chǎn)品的原型可不長這個樣子，模塊大小、間距都是隨便給的。你如果也按照產(chǎn)品給的原型模塊大小做，估計研發(fā)會“罵娘”，因為這樣沒法按照比例進行換算，也就沒法做自適應(yīng)。

這一步主要就是做柵格化處理，我們需要定義每個模塊的占比與間距。B端產(chǎn)品通常選用24柵格布局，也就是24欄+23水槽+2頁邊距。

我遇到的工作臺頁面有兩種，一種是帶左側(cè)樹，一種是不帶，這兩種對應(yīng)的柵格化數(shù)值不太一樣。 按照目前常用的尺寸1440*900來計算：不帶左側(cè)樹我采用的是1440=2*20+43*24+16*23。

如果大家做的是帶左側(cè)樹，可以參考下圖數(shù)據(jù)

三、可視化圖表

重點來了，我個人覺得這一節(jié)才是工作臺、數(shù)據(jù)分析頁面的核心，但很多人都忽略了，覺得不就是幾個圖表，唰唰唰一下就搞定了...... 

上面我們提到過B端測試題給的都是原始數(shù)據(jù)（表格），需要設(shè)計師自己根據(jù)數(shù)據(jù)找合適的可視化圖形進行展示。

如果你對可視化圖表不熟悉，不知道什么時候該用柱圖、折線圖、餅圖；不知道隨時間變化該用什么圖形；不知道體現(xiàn)排名的數(shù)據(jù)該用什么圖形。那你很難輸出一份有理有據(jù)的作品。

因圖表類型太多，詳細的留到后面文章討論，這次只對原型中使用的到圖表進行分析：

柱圖：

柱狀圖是常用的數(shù)據(jù)可視化圖形之一，可用于隨時間變化而產(chǎn)生變量的數(shù)據(jù)統(tǒng)計，也可用于數(shù)據(jù)類別的對比、排名。

如圖，柱狀圖能展示知乎文章觀看者地域分布，也能反應(yīng)出不同時間段的情況，并通過圖形能夠快速了解 分布最多和最少的省份。

優(yōu)點：

人眼對長短（高度）比較敏感，可以直觀體現(xiàn)數(shù)據(jù)差異性。

缺陷：

分類過多時數(shù)據(jù)的展示效果會降低。 

設(shè)計要點：

能把圖形視覺與體驗都兼顧好，才能體現(xiàn)設(shè)計師的價值。 設(shè)計師的能力不僅體現(xiàn)在技法上，更多的是體現(xiàn)在思考能力上。圖形擴展性設(shè)計和創(chuàng)新性設(shè)計都需要設(shè)計師做縝密的思考，只有這樣才會有出彩的設(shè)計結(jié)果。

信息層級：

視覺展示：

2個人站在一起我們除了對比高度、顏值，還有會對比胖廋。那么，柱狀體的粗細和間距如何定義呢？ 在圖中，中間柱狀圖的柱子間距過于疏散沒有規(guī)律；右邊圖中的柱子間距又過小，視覺上顯得擁擠，并且當(dāng)分類過多時，過小的間距會導(dǎo)致柱狀體之間沒有獨立性，不易閱讀。

定義柱狀體的間距可以用5分原則設(shè)計法，即柱子之間的間距為N，左右兩邊與柱子之間的距離就是2/N。 如圖所示。這也是很多界面設(shè)計中常用的技法，其原理就是接近黃金比例，視覺上較為舒適。同時，在保證界面元素整體協(xié)調(diào)性的情況下，盡可能把柱子的寬度設(shè)計成N，這樣視覺上最為協(xié)調(diào)。

另外，在設(shè)計圖形前，設(shè)計師最好能了解到真實數(shù)據(jù)，這樣才能結(jié)合真實的數(shù)據(jù)來設(shè)計圖形，盡可能還原落地后的樣子。在圖中，圖形的設(shè)計和落地后的樣子存在較大的差異。問題就出在設(shè)計前設(shè)計師沒有了解數(shù)據(jù)的真實情況，前端工程師按照設(shè)計圖把X軸的數(shù)值固定了。

相似圖表： 

堆積柱狀圖：堆積柱狀圖可以展示兩個或多個數(shù)據(jù)的變化，以及數(shù)據(jù)之間的綜合比較情況。 

分組柱狀圖：分組柱狀圖可以在同一數(shù)軸上展示各個分類下的不同分組數(shù)據(jù)。 

有序柱狀圖：與有序條形圖一樣，有序柱狀圖也能呈現(xiàn)數(shù)據(jù)的排名情況。

折線圖：

折線圖常用于表示一個連續(xù)時間段內(nèi)數(shù)據(jù)的變化趨勢，主要功能是能夠清晰地反映出數(shù)據(jù)隨時間變化的趨勢。

如圖，折線圖不僅能展示不同月份的價格趨勢，還能清晰呈現(xiàn)數(shù)據(jù)的峰值和低谷。折線圖也可以是多條線，用來分析多組數(shù)據(jù)隨時間變化的趨勢及數(shù)據(jù)間的趨勢比較。

優(yōu)點： 

直觀反映數(shù)據(jù)變化趨勢 

缺陷：

無序的類別無法展示數(shù)據(jù)特點。

設(shè)計要點：

折線圖可以用于展示數(shù)據(jù)的趨勢變化，通過折線的起伏波動可以幫助人們探究數(shù)據(jù)背后的邏輯。但如果折線圖的設(shè)計不夠合理，在視覺上會讓人產(chǎn)生錯誤的認(rèn)知。在圖中，有的折線圖的刻度值設(shè)置不合理，如中間折線圖的刻度值未從0開始，導(dǎo)致折線的呈現(xiàn)夸大；右邊折線圖的刻度值過高，趨勢變化呈現(xiàn)過于平緩，這些都是在不客觀地表達數(shù)據(jù)。正確的方式應(yīng)該是刻度值從0開始，隨著數(shù)據(jù)的增減，刻度值也做相應(yīng)的變化。

視覺展示：

在折線圖設(shè)計中，還需要注意折線的粗細要適中。在圖中，其中一條折線過細，這會降低數(shù)據(jù)可視化的表現(xiàn)；另一條過粗，就會損失折線中的數(shù)據(jù)波動細節(jié)。在產(chǎn)品的圖形設(shè)計中，一般網(wǎng)格線和起始線都是1像素，折線一般用2像素，這樣的粗細會有較好的視覺表現(xiàn)。

相似圖表：

階梯線圖：線在數(shù)據(jù)點之間形成一系列步驟。

面積圖：與折線圖唯一不同的是，其自變量數(shù)據(jù)和坐標(biāo)軸之間有顏色填充，這樣能更加突出數(shù)據(jù)的趨勢變化。

餅圖：

提到數(shù)據(jù)的占比，相信你第一個就會想到餅圖，主要用來展示數(shù)據(jù)分布情況。 餅圖是展示占比數(shù)據(jù)最直觀的圖形，通過弧度大小來表示分類的占比多少。但餅圖有一定的局限性，當(dāng)占比數(shù)值接近或占比分類過多時，在視覺上就不容易辨別各個類別占比的大小。在數(shù)據(jù)可視化產(chǎn)品中，因為餅圖是大面積的色塊，視覺上會非常突顯，很容易搶走重要數(shù)據(jù)的風(fēng)頭，所以使用時要酌情考慮。

優(yōu)點： 

直觀顯示各項占總體的占比，分布情況，強調(diào)整體與個體間的比較。

缺陷： 

分類過多，則扇形越小，無法展現(xiàn)圖表。

設(shè)計要點：

每個圖形都有自己的設(shè)計規(guī)范，如當(dāng)餅圖分類過多時，一般不把文字放在圖形元素上，因為一旦出現(xiàn)幾個相對較小的占比數(shù)據(jù)，字就很容易溢出，不容易辨別指向的分類，如圖中的右圖所示。好的解決方案就是，在圖形的外圍用引線指出分類數(shù)據(jù)，或者加示例圖展示。

視覺展示：

另外，餅圖的分類最好從12點鐘的位置開始，這樣較為符合人的閱讀習(xí)慣，即從上到下、從左到右，如圖中。如果餅圖隨意從不同位置開始展示，就會缺少規(guī)范，這樣當(dāng)多個餅圖同時展示時容易出現(xiàn)混亂。

同時，在餅圖的分類中如果沒帶排序，如1月、2月……，那么占比最好能夠從大到小依次排列，這樣還能直觀地呈現(xiàn)出分類的排名情況。任何時候，如果有“其他”這項分類，無論其占比多少都要放在最后，因為其數(shù)據(jù)通常是最不被關(guān)注的數(shù)據(jù)。

相似圖表： 

嵌套圈餅圖：用于一個指標(biāo)在不同維度的占比。 

跑道圖：看到占比的同時，可以直觀看到指標(biāo)在當(dāng)前維度下的排名情況。

表格

表格看起來簡單，但想設(shè)計好也不是一件容易事。通常我們見到的（產(chǎn)品中）表格都屬于比較簡單的表格。

在BI系統(tǒng)中有一些復(fù)雜的表報，如果直接用組件信息會很難閱讀。我們需要對表格的視覺進行調(diào)整，讓信息獲取更高效，這就需要一些設(shè)計技巧和原則。

設(shè)計要點：

表格排版第一大原則：文字左對齊，數(shù)字右對齊表格中文字需要左對齊，因為我們閱讀文字的習(xí)慣是從左到右。

而圖中（上圖）的項目名稱長短不一，居中對齊在視覺上會使切入點呈現(xiàn)“Z”字形，影響閱讀效率。左對齊可以使線性結(jié)構(gòu)在視覺上不跳躍，閱讀流暢且更具美感。表格中的數(shù)字需要右對齊，因為當(dāng)我們在面對一個長數(shù)字時，一般會從右往左讀。比如數(shù)字￥368,568,023.00，我們一般是從個位到最后的千萬位順序識別數(shù)字體量，有的人可以通過千分符迅速判斷數(shù)字的體量，但其實也是從右到左的瀏覽順序，因此數(shù)字右對齊最符合人的閱讀方式。

在圖中（下圖），讓我們感受一下數(shù)字左對齊、居中對齊、右對齊的閱讀效率，以及對各個數(shù)據(jù)體量的對比感知。

文字左對齊和數(shù)字右對齊，針對的是長短不一的名稱和大體量的數(shù)字，而對于文字?jǐn)?shù)量一樣、體量較小的數(shù)字也可以嘗試用居中對齊的方式，對稱的元素本身就具有美感。如圖所示，通過對表格中的文字和數(shù)字的重新排版，相信在閱讀效率上會有較大的提高。雖然提高了閱讀效率，但這相比優(yōu)秀的表格設(shè)計還差得很遠，其中最明顯的是表格的邊框在視覺上過于突出，接下來我們繼續(xù)調(diào)整。

弱化邊框

如圖（下圖）所示，通過弱化邊框在視覺上能夠突出表格的內(nèi)容。表格邊框可以讓信息的呈現(xiàn)更有條理，能夠提高易讀性，但在視覺層級上不能高于內(nèi)容信息。

去掉邊框與分割線

將表格的邊框與分割線去掉，用留白分隔內(nèi)容，無框勝有框，增大留白可以使表格更有空間感。這樣的設(shè)計需要注意的是，元素的間隔不能太小，不然會顯得擁擠。由于去掉邊框后有些問題會被放大，比如標(biāo)題與內(nèi)容沒有對比，因此需要增強對比，在整體上要有層次。

強調(diào)標(biāo)題

圖中的表格加強了標(biāo)題，這樣看起來更有層次。強調(diào)標(biāo)題的方法有很多種，不一定只是加粗字體或加大字號，還可以給標(biāo)題欄添加背景，以形成對比。

突出重要信息

如果在一組數(shù)據(jù)中有重要數(shù)據(jù)和次要數(shù)據(jù)之分，那么就需要在對重要數(shù)據(jù)的設(shè)計上著重突出，表格的設(shè)計同樣如此。圖中所示就是把重要的數(shù)據(jù)信息通過增加背景色與其他元素形成較為突出的對比，這種設(shè)計是一種為用戶做選擇的設(shè)計方法，容易讓用戶的視覺停留在他本想重點關(guān)注的地方。

表格擴展設(shè)計

由于人們常常會對熟悉的事物產(chǎn)生審美疲勞，因此設(shè)計中有創(chuàng)新才容易給人眼前一亮的感覺。

下圖在背景上面給了一根橫線，來凸顯這一列的數(shù)據(jù)，這樣除了可以加強信息傳達也可以打破常規(guī)的表格樣式（這里只是提供一種思路）。

表格字體運用

表格數(shù)字最容易出問題的是數(shù)字字體的運用，因為很多數(shù)字字體不是等距設(shè)計，比如數(shù)字“1”所占的字間距面積要小于“8”的。如果遇到一組大量級的數(shù)字，就有可能會誤導(dǎo)觀者。

如下圖所示，本來32,118,116,00大于28,558,363,00，但由于不同數(shù)字所占寬度不一樣，這樣的設(shè)計在視覺上容易誤導(dǎo)用戶。因此，表格中的數(shù)字要使用表格字體，因為表格字體每個數(shù)字所占面積一致，這樣就不會出現(xiàn)案例中的問題了。

其實很多表格里面的數(shù)字字體都存在類似問題。下圖是修改數(shù)字字體后的設(shè)計，這樣就能客觀地呈現(xiàn)數(shù)據(jù)了。

表格中常用的字體有Roboto、DIN、微軟雅黑、思源黑體、宋體、蘋方字體等。

四、視覺設(shè)計

配色：

參考631配色法 

對有含義的顏色要謹(jǐn)慎使用，例如：紅、黃、綠

圖標(biāo)：

常用的圖標(biāo)分為兩類：
工具圖標(biāo)：包含一定產(chǎn)品功能隱喻的簡化抽象圖形，代替文字節(jié)省界面空間，方便用戶理解，常用于b端產(chǎn)品里面。
如圖，里面來自不同產(chǎn)品的圖標(biāo)，雖然表現(xiàn)形式不太一樣，風(fēng)格不太一樣，但都是為了體現(xiàn)圖標(biāo)后面文字的意思。

裝飾圖標(biāo)：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于產(chǎn)品宣傳、活動等頁面。 如圖，云計算、大數(shù)據(jù)相關(guān)的產(chǎn)品，語義都比較復(fù)雜，很難通過圖標(biāo)去表達，既然看不懂，就抽象點。

在 B 端產(chǎn)品中，應(yīng)用最廣泛的還是工具圖標(biāo)。 可能有人覺得工具類圖標(biāo)太簡單了，它是看起來簡單，想做好一點都不容易。

首先要保證“一致性”， 粗細一致、圓角一致、透視一致、大小一致，同時還要把語義用圖形表達出來。

間距：

一般采用8的倍數(shù)：8、16、24、32、40、48、...

字體：

12px、14px、16px、20px、24px，可采用“回退機制”

作者：夜鶯YEAH



藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



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

用研的進階

根據(jù)公司結(jié)構(gòu)和職能角色的需求不同，用研中部分是行為觀察，部分是商業(yè)戰(zhàn)略，部分是心理學(xué)，部分是數(shù)據(jù)分析，部分是設(shè)計，部分是團隊促進。用研可以有不同的風(fēng)格，因此可以在行業(yè)范圍內(nèi)四處移換位置。根據(jù)公司規(guī)模和類型的不同，我見過很多用研團隊變成設(shè)計部門的一部分，有些則變成營銷部門的一部分，還有一些則在產(chǎn)品管理部門——最終在哪都根據(jù)公司的規(guī)模和類型來決定。在我任職期間的某個時候，我自己的團隊已經(jīng)集結(jié)到了之前提到的各個部門。

所以...有沒有一個部門可以更加適合配備用研部門，讓用研更加成功且具有影響力呢? 這是我想找到的答案。

...

用研部門應(yīng)該存在于...

...在設(shè)計團隊？

攝影：Harpal Singh 于 Unsplash

優(yōu)勢：

研究與設(shè)計交織在一起：用研已經(jīng)成為許多用戶體驗設(shè)計師工作職位描述中的一部分，而用研的核心就是指導(dǎo)設(shè)計。研究結(jié)果可以指導(dǎo)交互行為，并且它從一開始就已經(jīng)嵌入了設(shè)計過程里。如果一個設(shè)計團隊有專門設(shè)立研究部門，會讓這個團隊變成一個強大的聯(lián)盟。讓更大的設(shè)計團隊統(tǒng)一研究整體用戶策略，會讓之后的調(diào)研和設(shè)計過程更加整體和完善。同樣，設(shè)計師也有想改善用戶體驗的眾多想法，并且通常很高興能看到用戶和他們的想法進行交流。這直接與這些創(chuàng)造用戶體驗改善的設(shè)計師們，促成了一個強有力的文化測試、迭代、再測試的過程。由于設(shè)計與用研的過程是結(jié)合在一起的，因此可以立刻將這些用戶洞察應(yīng)用到設(shè)計中去。

類似的工作流程：用研的工作流程與傳統(tǒng)的設(shè)計流程十分相似。設(shè)計領(lǐng)導(dǎo)者可以無縫地理解研究的各個階段：復(fù)查現(xiàn)有的數(shù)據(jù)，引導(dǎo)生產(chǎn)性研究，匯編各種信息從而尋找新的模式，創(chuàng)建一份報告，陳述研究結(jié)果，在上線后測試等等。同時，從設(shè)計概念開始，征求意見、進行測試比較設(shè)計方案的好壞、迭代設(shè)計、產(chǎn)出最終的版本、呈現(xiàn)并且在上線之后進行迭代。設(shè)計和用研通常希望攜手合作，共同努力改善數(shù)字化體驗。

劣勢：

設(shè)計≠用研：不是所有的設(shè)計師都會進行研究，要么是因為他們沒有時間，要么是因為他們沒有接受過理解研究方法的訓(xùn)練。（相反，也不是所有的研究人員都是設(shè)計師）通常，公司會安排設(shè)計師同時做研究員的工作，反之亦然。這對最終實現(xiàn)的產(chǎn)品來說可能是災(zāi)難性的。尤其是在較小的公司中，設(shè)計師需要扮演很多職能。這意味著他們“有時候“有時間能親自調(diào)研。不幸的是，在設(shè)計和用研沒有明確定義的前提下，這意味著雇傭部門和領(lǐng)導(dǎo)團隊認(rèn)為這兩者是可以互換的 (注意: 這并不意味著某些設(shè)計師沒有資格，只是“視覺設(shè)計師 / 平面設(shè)計師”、“UI設(shè)計師”和“UX設(shè)計師”的技能組合是有區(qū)別的，但我不會在這里討論這些!)

用戶需求可能會被遺忘: 有時候，一個設(shè)計規(guī)劃圖會被過分熱烈的創(chuàng)造性驅(qū)動從而創(chuàng)建，而不是來自于數(shù)據(jù)或研究。很多時候，創(chuàng)意人員會對他們喜歡的新想法產(chǎn)生依戀，即使它并非源于用戶需要的東西(有時候我們都會為此感到內(nèi)疚)。不幸的是，這意味著研究可能是事后的想法，更經(jīng)常地被作為驗證工具而使用，而不是在產(chǎn)品生命周期中預(yù)先定義需求。這對于用研來說可能成為難以克服的一個障礙，特別是如果設(shè)計概念與利益攸關(guān)方或決策者領(lǐng)導(dǎo)人一起審查，他們喜歡并認(rèn)為這是一個“ 可以去做的設(shè)計”。這意味著研究的機會很有可能喪失。

...在市場運營團隊？

攝影：Carlos Muza 于 Unsplash

優(yōu)勢：

相似的技能組合:市場研究和 UX / 產(chǎn)品的研究在他們特定的核心研究中，共享相似的過程和研究方法。在社會心理學(xué)、市場營銷學(xué)、人類學(xué)、人的因素、運作和設(shè)計等許多領(lǐng)域進行 “人的研究” 所使用的工具包非常相似：定量方法，如大樣本調(diào)查和分析；定性方法，如面對面的觀察，焦點小組，適度的訪談，日記研究以及其他。每個領(lǐng)域的方法都需要研究設(shè)計、用戶招募和研究分析。對于市場團隊來說，這是一個非常熟悉的世界，作為 用研 流動到這個部門意味著領(lǐng)導(dǎo)者可能會對你的角色需求有一個徹底的了解。

共同的目標(biāo)是了解用戶: 市場團隊也將是你的擁護者。無論如何，源自于產(chǎn)品和設(shè)計的用戶研究的洞察力，為市場部門關(guān)注的許多舉措增添了直接價值。透過略微不同的角度來看，市場營銷和用戶體驗有著相似的目標(biāo)(理解客戶) 。盡管如此，當(dāng)團隊協(xié)作并共享信息，在以業(yè)務(wù)或用戶為中心的舉措之間建立平衡時，用研結(jié)果還是能夠幫助我們進行決策。

劣勢：

商業(yè)需求可能與用戶需求相反:如果組成“聚焦點”的事物變化太大，那么這個”聚焦點“既可以將市場營銷與用戶體驗結(jié)合起來，也可以將它們分開。當(dāng)業(yè)務(wù)需求與用戶需求相矛盾時，可能會產(chǎn)生摩擦。如果市場部門的領(lǐng)導(dǎo)層將眼前的業(yè)務(wù)優(yōu)先級置于用戶研究之上，那么獲取工具和客戶的途徑就可能受到限制。在一天結(jié)束的時候，市場團隊關(guān)注創(chuàng)收，即使這對用戶來說不是最好的體驗(比如在某個地方放置廣告，可能會干擾網(wǎng)頁，以確保用戶看到它) ; 而用研團隊關(guān)注什么是對用戶體驗最好的(比如在頁面上放置一個廣告，使其不會干擾用戶的任務(wù)，冒著用戶看不到并參與其中的風(fēng)險)。

用研 ≠ 市場研究: 有時候，流動到市場部門意味著其他人將 用研視作為市場研究的延伸。由于這一點，一些項目有可能被認(rèn)為應(yīng)該由市場專家處理，而不是用戶體驗專家。例如，營銷活動的目標(biāo)可能是“我們?nèi)绾巫層脩羰褂眠@次促銷活動” ？另一方面，用研 可能會強調(diào)用戶的需求，比如“用戶希望如何獲得有關(guān)促銷活動的通知” ？這種情況（關(guān)注點的轉(zhuǎn)移）并不可能經(jīng)常出現(xiàn)在市場部的議程表上。

...在產(chǎn)品管理團隊？

攝影：Marvin Meyer 于 Unsplash

優(yōu)勢：

為產(chǎn)品使用路徑圖研究分配時間:通過將 用研 嵌入到產(chǎn)品管理團隊中，研究有機會通過在產(chǎn)品路徑圖中劃出其應(yīng)有的空間和時間來充分發(fā)揮其潛力。通過讓 用研 和產(chǎn)品經(jīng)理向同一個領(lǐng)導(dǎo)層匯報，這意味著目標(biāo)和優(yōu)先級可以被共享，并且在同一時間被一起審查。這可能是一個有效的工作方式，特別是當(dāng)你與產(chǎn)品經(jīng)理一起工作的項目，他們知道如何使他們的產(chǎn)品更直觀地呈現(xiàn)給用戶。用研的產(chǎn)品管理為定義實際產(chǎn)品需求創(chuàng)建了一種更加無縫的方法。這意味著路線規(guī)劃圖中留出了時間，在積壓成定局之前走出去，獲得用戶見解。這告知了大家需要開發(fā)的功能的優(yōu)先級，并在完成設(shè)計之前，就形成產(chǎn)品了本身的特性。當(dāng) 用研 與產(chǎn)品經(jīng)理的目標(biāo)緊密相連時，每個注入了用戶見解的產(chǎn)品階段都變得更加容易(因為它應(yīng)該是在一個理想的世界中!)

更容易地與決策者進行知識交換:將產(chǎn)品經(jīng)理的內(nèi)部結(jié)構(gòu)與 用研 的內(nèi)部結(jié)構(gòu)相結(jié)合，也意味著他們可以獲得更多用戶關(guān)于他們的體驗的言論，從而形成定期更新，并且可以更容易地進入用戶途徑。用研經(jīng)常關(guān)注復(fù)查定性趨勢的反饋(比如 Qualtrics 或者 Medallia 系統(tǒng))（在線調(diào)查或客戶體驗管理系統(tǒng)），這意味著產(chǎn)品經(jīng)理聽到這些趨勢的機會變得更加頻繁。產(chǎn)品經(jīng)理一般來說應(yīng)該對他們的用戶群有深刻的理解，但是他們通常很難在傾聽用戶的基礎(chǔ)上來保持沖刺、業(yè)務(wù)分析、 KPI 和產(chǎn)品路線圖規(guī)劃。因為團隊會議中現(xiàn)在有一個指定的用戶代言人一直在場，這就是為什么與 用研 如此緊密地聯(lián)系在一起對產(chǎn)品經(jīng)理來說是有益的。參加這些會議使得 用研 有機會直接與那些最需要了解用戶需求的人進行自發(fā)的對話。加入同一個團隊可以使這些溝通渠道更加開放，并且可以更加頻繁地了解用戶對產(chǎn)品經(jīng)理的需求。

劣勢：

研究的優(yōu)先級可能會降低:不幸的是，轉(zhuǎn)到產(chǎn)品管理團隊意味著有時研究的優(yōu)先級會降低。當(dāng)利益相關(guān)者對產(chǎn)品交付施加壓力時，這通常意味著產(chǎn)品需要盡快推出。然之后，產(chǎn)品經(jīng)理必須專注于發(fā)布他們產(chǎn)品路線圖規(guī)劃上的項目，并在時間表和開發(fā)周期內(nèi)實現(xiàn)業(yè)務(wù)目標(biāo)。為了滿足這些時間要求，盡快交付某些東西成為更緊迫的目標(biāo)，而不是交付一個經(jīng)過研究和磨練的產(chǎn)品(這需要更多的時間)。

更多的評估而不是生產(chǎn)性研究: 把用研流動這個部門可能意味著這項研究變得更加可評估(或者驗證、可用性和迭代測試) ，而不是生產(chǎn)性(或者理解需求、價值和概念發(fā)現(xiàn)或開發(fā)的測試) ，就像在設(shè)計團隊下可以做的那樣。這不是一件壞事，而只是需要牢記在心，以便作為一個用戶倡導(dǎo)者，用研 的工作可以更直言不諱地說，需要留出時間來做更深入、生產(chǎn)性的工作，從長遠來看而不是短期內(nèi)為產(chǎn)品提供信息。提前了解這個可能的障礙意味著用研可以更好地裝備自己的 ROI（投資回報率）影響，以便為更深入的研究騰出時間。

...在自己獨立的部門？

攝影：José Alejandro Cuffia 于 Unsplash

注意: 我還沒有在一個獨立的，指定的 UX 研究部門作為一個 UX 研究員的工作經(jīng)驗。我只能推測將一個獨立的 用研 團隊集合起來會是什么樣子，或者當(dāng) 用研 成為一個大型組織中自己的分支時，領(lǐng)導(dǎo)力的優(yōu)缺點是什么。

優(yōu)勢（推測）：

擁有自己帶領(lǐng)的用研部門，可以為更深入地研究需求提供機會。它將有能力根據(jù)合作伙伴的規(guī)劃路線圖從而制定自己的規(guī)劃路線圖。它可以讓部門領(lǐng)導(dǎo)層能夠深入地支持研究人員的需求，因為需求經(jīng)常遇到障礙（如招聘、用戶日程安排、預(yù)算、批準(zhǔn)、 ResearchOps（ Research Operation service 研究運營管理） 的行政工作等)。能夠擁有一個研究路線規(guī)劃圖，并為發(fā)現(xiàn)和生成性研究騰出時間，從長遠來看，可能會大大有助于產(chǎn)品和客戶體驗的信息共享。擁有一個獨立的團隊可以使這些研究成為奢侈品。當(dāng)一個領(lǐng)導(dǎo)者致力于使研究成功，這意味著他們希望研究可以帶來更多戰(zhàn)略上的影響。

正如我之前提到的，一些被稱為 “ ResearchOps（研究運營管理）” 或者研究操作的東西，是一個趨勢短語，類似于 “ designnops①” 或者 “ DevOps②” 等等。拋開時髦不說，設(shè)立一個獨立的部門和領(lǐng)導(dǎo)層可能意味著在決策層有一個更大的席位，這反過來又意味著在使體驗研究產(chǎn)生影響方面有更多的投資。當(dāng)投入更多資金進行研究時，業(yè)務(wù)側(cè)就有機會進行戰(zhàn)略思考并得到支持。一個獨立的 用研 部門反過來將能夠雇傭人來支持行政管理，為研究人員能夠?qū)Ｗ⒂谒麄冄矍暗墓ぷ骱头治龆撠?zé)。在小型組織中，甚至在大型組織中的小型 用研 團隊中(比如我的團隊) ，研究人員往往負責(zé)所有的職能，這也是可以的！但是，如果有一個專門關(guān)注于這些研究人員需求的部門，并擴大他們工作的影響(不管團隊規(guī)模有多大) ，我相信將有更大的機會去收集更好、更深入的見解，研究過程也能充分發(fā)揮其影響力和潛力。

①Design Systems Ops 是設(shè)計團隊的一部分，他需要足夠了解設(shè)計，并且要了解他們試圖概念化什么。同時，Design Systems Ops 需要理解工程師的需求和定義方法，這將有助于設(shè)計系統(tǒng)的裝運和規(guī)模化。在某些程度上，一個 Design Systems Ops 是兩個世界的翻譯。

② DevOps（ Development和Operations的組合詞）是一組過程、方法與系統(tǒng)的統(tǒng)稱，用于促進開發(fā)（應(yīng)用程序/軟件工程）、技術(shù)運營和質(zhì)量保障（QA）部門之間的溝通、協(xié)作與整合。它是一種重視“軟件開發(fā)人員（Dev）”和“IT運維技術(shù)人員（Ops）”之間溝通合作的文化、運動或慣例。透過自動化“軟件交付”和“架構(gòu)變更”的流程，來使得構(gòu)建、測試、發(fā)布軟件能夠更加地快捷、頻繁和可靠。

劣勢（推測）：

相反，單獨作為一個獨立的 用研 部門，也可能使得決策層難以接受。如果不流入一個直接產(chǎn)生收入影響的部門內(nèi)（至少在短期內(nèi)，比如在銷售或營銷方面) ，那么 用研 的工作就很難得到認(rèn)可。利益相關(guān)者之間的伙伴關(guān)系和一致性，對于用研人員能夠成功地完成他們的工作來說至關(guān)重要。如果沒有它，如果 用研 的需求被認(rèn)為不是直接以產(chǎn)品為中心，同樣的職位可以幫助 用研， 也可能會阻礙他們。開展生產(chǎn)性研究的時間可能被視為“有風(fēng)險” ，而且當(dāng)團隊的領(lǐng)導(dǎo)層與其他更為成熟的角色(即風(fēng)險較低的角色)分離時，可能很難獲得合作伙伴和利益相關(guān)者的支持。

同樣，投資一個獨立的用研團隊總的來說可能是有風(fēng)險的?？赡芎茈y預(yù)測到有形的ROI（投資回報率）預(yù)測，以便業(yè)務(wù)合作伙伴能夠理解，并在第一時間投入資金。這意味著，決策者們可能認(rèn)為給用研分配預(yù)算或增加人數(shù)是有風(fēng)險的，其他研究需求也是如此。一般來說，R&D（產(chǎn)品研發(fā)）在組織中是一個棘手的領(lǐng)域，而 用研 肯定會在這個預(yù)算范圍內(nèi)。盡管有證據(jù)表明，對研發(fā)的投資有能力改變企業(yè)經(jīng)營的底線，并且可以通過創(chuàng)新保持企業(yè)價值，所以相對于獨立的用研部門，緊迫的商業(yè)需求可能話語權(quán)更大。

...

作者：三分設(shè)



藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



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

什么是清晰明確的需求

一．何為「清晰」 

在設(shè)計項目中，甲方通常會表述的需求是「我要做什么？」因為這個需求對于甲方來說，是最迫切和最直接的。但站在設(shè)計公司的角度來說，除此之外，還有另外三點甲方容易忽視的內(nèi)容需要了解，一是「我是誰？」二是「為什么做？」三是「用在哪？」 

「我是誰？」包括甲方公司的名稱，品牌理念，所屬行業(yè)，主營業(yè)務(wù)，主打產(chǎn)品和主要受眾等；

「我要做什么？」包括甲方所需設(shè)計內(nèi)容的具體細節(jié)，主要是設(shè)計類別，種類，數(shù)量，尺寸，以及預(yù)算和周期等； 

「為什么做？」是指甲方通過設(shè)計內(nèi)容想達到什么目的，是進行品牌的宣傳，還是獲得更多潛在用戶信息； 

「用在哪？」則是說最終完成的作品以什么途徑進行展示，線上還是線下，網(wǎng)頁還是包裝等。 

二．何為「明確」 

「明確」意味著，甲方向乙方所提供的需求內(nèi)容，皆為真實的，準(zhǔn)確無誤的，有理有據(jù)的，不會隨意修改的。 

以上兩點，則為本文提及的「清晰明確的需求」的整體框架和詳細內(nèi)容。在真實案例中，還需要依據(jù)具體的情況進行增減和調(diào)整，靈活運用。 

不過萬變不離其宗，牢記「清晰」代表甲方的需求是系統(tǒng)和完整的，「明確」代表甲方對自己提出的需求是清楚和確定的，就能夠在實際操作中很好的運用。 

為什么需要甲方提出清晰明確的需求 

一．提出清晰明確的需求是甲方的工作職責(zé) 

在設(shè)計項目中，甲乙雙方擁有一致的目標(biāo)，都是為了產(chǎn)出優(yōu)質(zhì)的、令甲方滿意的作品。但在具體的工作過程中，雙方人員有不同的分工和職責(zé)。 

設(shè)計項目中甲乙雙方有自己的分工和職責(zé)

在整個設(shè)計過程中，設(shè)計師實際上是在充當(dāng)“翻譯”的角色，需要根據(jù)其設(shè)計領(lǐng)域的專業(yè)知識、經(jīng)驗、和設(shè)計技巧，將甲方的需求以視覺語言的形式翻譯過來，最終呈現(xiàn)出與甲方企業(yè)品牌高度契合，并且能夠強化和凸顯品牌特色的作品。這些就是設(shè)計項目中設(shè)計師的工作職責(zé)。 

好的設(shè)計需要甲乙雙方共同努力

而完成好的設(shè)計作品，是甲乙雙方共同努力的結(jié)果。并且，最終能否做出有價值的、令甲方滿意的設(shè)計作品，取決于設(shè)計師對甲方需求的理解。而讓設(shè)計師充分理解甲方需求的一個重要前提，就是甲方已經(jīng)將自己的需求清晰明確地傳達給了設(shè)計師。 

雖然專業(yè)的設(shè)計師在做設(shè)計之前也會做很多的研究和背景調(diào)查，但對甲方各方面情況最為了解的，還是甲方自己。 所以，梳理出清晰明確的需求是甲方在設(shè)計項目中的工作職責(zé)。我的朋友小張產(chǎn)生了那么多的抱怨，也正是因為沒有意識到這一點。 

二.提出清晰明確的需求對項目推進有重要作用和意義 

1． 可以極大保障最終作品的質(zhì)量 

真實的設(shè)計項目工作中，常常能聽到大家的抱怨，「完成工作不是最困難的，最難的是溝通」。 

這種抱怨有時來自甲方，「你理解錯了」，「我不是這個意思」，「你這個跟我想的完全不一樣」…… 

有時來自設(shè)計師，「為什么要改」，「到底要怎么改」，「到底要改成什么樣」…… 

甲方與設(shè)計師的矛盾：都感覺自己在對牛彈琴

可想而知，如果設(shè)計方始終在抱怨甲方?jīng)]說清楚，甲方又始終認(rèn)為設(shè)計方?jīng)]有理解到位，那或多或少都會影響雙方工作人員的情緒，造成工期拖延，最終的作品也很難讓甲方感到滿意。 

所以，為了甲乙雙方共同的目標(biāo)，請甲方人員按照前文對「清晰明確的需求」的解釋，盡量將自己的需求梳理完備。 

也請乙方珍惜甲方的勞動成果，結(jié)合自身的專業(yè)知識，好好理解和消化。大家共同努力，去攻克這個千古難題。 

需求溝通的目的是達成雙方的共識

2．可以節(jié)省甲乙雙方的時間和精力 

這一點，幾乎是毋庸置疑的。如果甲方在項目工作中對自身需求進行了系統(tǒng)的梳理，并將需求完整無誤的列出，那在和設(shè)計師溝通時，只需將提前準(zhǔn)備好的需求對乙方進行傳達，同時也能夠更準(zhǔn)確和迅速的對設(shè)計師的反饋做出判斷，從而給到進一步的修改意見。 

可以肯定的是，甲方前期的需求準(zhǔn)備得越清晰明確，和乙方對接工作時所面臨的其他問題就會越少。相應(yīng)的就能大大提高工作的效率，也有助于更好的完成設(shè)計項目的目標(biāo)，促使甲乙雙方達到「雙贏」的效果。 

先思考 再行動

總結(jié) 

今天這篇文章的重點在于，「工作中，方法固然重要，但具有工作意識，認(rèn)清自身工作內(nèi)容，并明白自身工作的重要性，也同樣重要」。 

有了正確的工作意識，才能找到問題的關(guān)鍵，那么解決問題的辦法自然就有了。 甲方提出清晰明確的需求，設(shè)計師才不會越幫越忙！

作者：子博設(shè)計          



藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



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

在日常生活中，說明書、指路牌、做ppt、設(shè)計網(wǎng)站、繪制海報中等都需要信息設(shè)計?？梢哉f，信息設(shè)計已經(jīng)滲透到了人們生活的方方面面，信息設(shè)計存在于我們目前看到的每一個畫面。

對于B端產(chǎn)品來說，信息設(shè)計的好壞，一方面決定了用戶在使用產(chǎn)品中的難易程度；另一方面也影響著后續(xù)當(dāng)產(chǎn)品功能添加時，產(chǎn)品的延展性如何。

一、什么是信息設(shè)計？

信息設(shè)計是我一直較為關(guān)注的設(shè)計領(lǐng)域，從早期設(shè)計感性的純粹視覺思考，到現(xiàn)在越來越趨向于邏輯理性化的設(shè)計思維，這是一種設(shè)計提升的思維模式。

二、信息設(shè)計來源

在二十世紀(jì)七十年代，英國倫敦的平面設(shè)計師特格拉姆第一次使用了“信息設(shè)計”這一術(shù)語。當(dāng)時使用該術(shù)語的目的僅為區(qū)別于傳統(tǒng)的平面設(shè)計以及產(chǎn)品設(shè)計等平行設(shè)計專業(yè)。從那時起，信息設(shè)計就真正地從平面設(shè)計中脫離出來，廣泛應(yīng)用在其他領(lǐng)域。

信息設(shè)計的主旨是什么？

通過對信息圖表設(shè)計的基礎(chǔ)認(rèn)識,從信息的收集篩選、應(yīng)用情景構(gòu)思方式、視覺表現(xiàn)到信息圖表的設(shè)計模式、制作流程等方法，設(shè)計出符合閱讀順序，使觀眾清晰有效閱讀的設(shè)計方案。這種準(zhǔn)確、形象、快捷的傳達方式已經(jīng)顯示出信息設(shè)計方法獨特的優(yōu)勢。

三、信息設(shè)計的意義

信息層級的排列不僅影響視覺上的美觀度，更影響人們在檢索信息時候的效率。尤其是對于B端復(fù)雜場景，我們不僅需要考慮清晰的傳遞業(yè)務(wù)價值，合理的信息層級劃分也是提高產(chǎn)品體驗的重要部分，好的信息層級則意味著更好的使用體驗。

一、用戶如何獲取信息？

試想一下，如果我們想要買一個手機，那么我們會如何買到手機呢？首先，我們會收集相關(guān)手機的信息，例如，先上網(wǎng)搜索最新的手機信息（向朋友詢問或者平時就有想好的品牌機型），然后我們的大腦會把這些信組合起來，得出買什么品牌什么型號的判斷。最后，我們在一堆信息中，提取出有效信息，進而指導(dǎo)自己的下一步行動。由此可見，我們獲取信息的步驟：

因此，我們在信息設(shè)計時可以借鑒以下基本思路。

1、根據(jù)自己的經(jīng)驗與用戶需求收集盡可能全面的信息

2、分析信息池中哪部分信息是用戶最關(guān)注的。

但是，當(dāng)產(chǎn)品的目標(biāo)用戶不止一類時，我們就需要考慮多方案滿足不同的用戶對信息的需求。例如，在電商平臺搜索商品，我們既可以通過店鋪搜索或商品搜索，也可以通過天貓?zhí)峁┑纳唐纺夸洏渲苯硬檎摇?/span>

3、思考如何信息呈現(xiàn)，設(shè)計師更是需要思考如何呈現(xiàn)信息才能讓用戶更容易接受和理解，只有會組織信息，才可能打造一款用戶喜愛的產(chǎn)品。

二、如何分析判斷用戶行為？

檢測頁面的設(shè)計是否有效，需要我們對用戶的行為做分析。我們可以將用戶瀏覽頁面的行為也分為三個層次：

1、核心行為層：是指用戶首先關(guān)注這個頁面核心重點，觸發(fā)到的用戶首要、核心行為，對應(yīng)信息分層的重點核心層。

2、了解行為層：是指用戶產(chǎn)生了解的意愿，繼續(xù)了解內(nèi)容的行為，對應(yīng)信息分層的次要輔助層。

3、查看更多行為層：是指用戶接收到信息后尋求更多信息的行為，如行動按鈕、文字鏈接等交互行為，對應(yīng)信息分層的詳細信息層。

所以，如果頁面設(shè)計質(zhì)量高、信息層級傳達得準(zhǔn)確，那么用戶的行為層次應(yīng)該會恰好和頁面的信息層次相對應(yīng)，這也是我們進行頁面設(shè)計質(zhì)量檢測的標(biāo)準(zhǔn)之一。

既然信息層級設(shè)計對于使用體驗比較關(guān)鍵，那么怎樣做好頁面的信息層級設(shè)計則顯得尤為重要。

我發(fā)現(xiàn)網(wǎng)上的資料也是參差不齊，查閱到的資料幾乎都在講排版設(shè)計的四個基本設(shè)計原則：親密、對齊、對比、重復(fù)。這四個方法雖然有用，但在面對復(fù)雜層級排版時仍會面對困惑。因此我對頁面排版進行了進一步的探索及思考，今天我們來說說除去上面四大設(shè)計原則以外的方法：

一、信息設(shè)計的前置處理

平時我們很容易被忽略的一點，就是信息的前置處理。我也曾遇到過某些信息很復(fù)雜導(dǎo)致排版很困難，來來回回多次修改設(shè)計總是不滿意，但卻忽略了這些信息是否真實地被需要。

信息前置處理本質(zhì)就是判斷我們當(dāng)前所要呈現(xiàn)的信息是不是必要的。這也是日常工作中經(jīng)常遇到的場景，比如有時候產(chǎn)品給到了我們很多信息，可能僅僅是信息全部展開，所以我們在設(shè)計的時候就不能直接開始，需要通過當(dāng)前頁面的業(yè)務(wù)場景去進行判斷，確定每個信息的合理性，兩個步驟進行判斷：

上述兩個問題的確認(rèn)，會直接影響后面的信息設(shè)計排版。因此我們需要在源頭，比如去和產(chǎn)品或者業(yè)務(wù)溝通，弄清楚該信息呈現(xiàn)的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。

那么如何進行信息前置的處理呢？

我們在進行B端產(chǎn)品信息設(shè)計時，可以圍繞“簡約四策略”進行設(shè)計。

英國易用性專家協(xié)會主席賈爾斯 ?科爾伯恩 ( Giles Colbore ）的《簡約至上》一書詳細講解了簡約的四策略：刪除、組織、隱藏和轉(zhuǎn)移。

1、刪除

刪除是指將界面上不重要的內(nèi)容及元素刪掉，只保留對用戶來說重要的內(nèi)容。這樣不僅可以讓設(shè)計師在設(shè)計界面時只專注于重要的問題，也有利于用戶專心完成目標(biāo)。設(shè)計目的是聚焦可用信息，去掉分散用戶精力的信息，從而為用戶提供價值。

我們在刪除的過程中，切記不要隨意刪除。刪除信息非?？简炁袛嘈畔⒅匾潭鹊哪芰?，畢竟刪除了不該刪除的信息會給用戶造成不好的體驗。

2、組織

組織是指對確定下來的信息進行有層次的整理。如果我們不對篩選出來的重要信息進行有序的整理，那么用戶在使用過程中就會覺得很復(fù)雜，抓不住重點。

信息組織的要求是以產(chǎn)品定位和用戶需求為線索，先考慮信息展示的主題，再考慮信息的分類方式（如時間、 顏色、大小、字母等），最后將松散的信息組織起來，并保證信息間界限明確。

右圖進行了信息組織，明顯會比左圖看上去體驗更好

信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。

3、隱藏

隱藏是指將用戶不常用的信息隱藏起來，在用戶需要時才出現(xiàn)。但是，我們要注意隱藏策略的使用方式。

第一，隱藏與刪除不一樣，刪除的信息是用戶不需要的、多余的，但隱藏的信息是用戶需要的，只是比較不常用而已。

第二，在設(shè)計信息隱藏時，要考慮清楚使用隱藏是否給用戶帶來了不必要的麻煩。例如，信息隱藏時沒有給用戶應(yīng)有的提示，用戶就很難發(fā)現(xiàn)該信息。

成功的隱藏是什么呢？

首先，徹底隱藏需要隱藏的信息，只在合適的時機出現(xiàn)相關(guān)內(nèi)容。

其次，能在界面中給出細微的提示，讓用戶順利地找到隱藏信息。

最后，提示要在用戶的視線范圍內(nèi)，如果超出了用戶的視線范圍，即使提示再明顯，用戶也看不到。

在B端產(chǎn)品設(shè)計中，有一個永恒的爭論話題：表格操作欄需不需要隱藏。

關(guān)于這個話題，一部分人認(rèn)為不應(yīng)該隱藏，原因在于隱藏了操作欄，用戶就會以為表格數(shù)據(jù)是不能操作的。另一部分人認(rèn)為應(yīng)該隱藏，因為每條致?lián)及巡僮鳈谡故旧絹?，感覺太多余。

這需要仔細分析，不能一概而論：

1、需要隱藏的情況：當(dāng)表格列數(shù)很多、已經(jīng)出現(xiàn)橫向滾動條且操作欄的功能不常用時，可隱藏操作欄。當(dāng)用戶將鼠標(biāo)移到數(shù)據(jù)行上時，就會顯示操作欄的功能。

2、不需要隱藏的情況：當(dāng)表格操作欄的功能都比較重要，一旦用戶操作頻率較高，無須隱藏操作欄。這時隱藏會導(dǎo)致用戶在操作時不直接。

3、隱藏一部分操作功能當(dāng)表格列數(shù)很多、已經(jīng)出現(xiàn)橫向滾動條，但操作欄的部分功能很常用時，這部分常用的功能就無須隱藏。當(dāng)用戶將鼠標(biāo)移到數(shù)據(jù)行上，就會顯示操作欄中不常用的功能。

4、轉(zhuǎn)移

轉(zhuǎn)移就是將合適的信息放到合適的地方。

例如，我們在設(shè)計一個 B端產(chǎn)品注冊界面時，期望用戶除了填寫賬號、密碼、驗證碼以外，還期望用戶填寫生日信息。因為產(chǎn)品經(jīng)理希望在用戶生日時給用戶發(fā)送生日祝福，讓他們感受到產(chǎn)品的溫暖。想要再做用戶分層的時候，用年齡分層。但是，生日信息放在注冊界面顯然不合適，這時可以將生日信息填寫步驟轉(zhuǎn)移至用戶注冊完成后進行。當(dāng)用戶完成注冊時，系統(tǒng)可以給予溫馨提示，告訴用戶 “你已完成注冊，當(dāng)你填寫了生日，你將在生日的時候收到神秘禮物”。

注意：B端產(chǎn)品經(jīng)理在設(shè)計界面信息轉(zhuǎn)移時，要清楚該信息被轉(zhuǎn)移的原因，如果盲目地轉(zhuǎn)移，反而會讓用戶無法在合適的位置找到合適的信息，降低了用戶獲取信息的效率。確定了信息設(shè)計的前置的信息處理以后，就到了設(shè)計師的主場，信息的排版設(shè)計。

二、如何信息分層設(shè)計

在信息量較大的頁面中，設(shè)計師需要充分了解產(chǎn)品功能和用戶所需，對頁面的內(nèi)容進行劃分，明確各部分內(nèi)容的優(yōu)先級，建立信息層級。通常我們可以從產(chǎn)品設(shè)計的角度，可以將頁面信息劃分為3個層次：

1、重點核心層（吸引用戶）是指用戶在短暫的 3-5 秒內(nèi)瀏覽頁面后，最能夠吸引他的核心內(nèi)容。這部分也是頁面的核心功能、是頁面最想展示給用戶的內(nèi)容，必須少而精，在設(shè)計中需要突出展示。

2、次要輔助層（幫助理解）是指用戶被重點核心信息吸引后，進一步在頁面中停留 3 – 5 分鐘，就會閱讀相關(guān)的、幫助了解核心內(nèi)容的輔助信息，如說明信息或其他相關(guān)功能，這部分信息比較重要，但不需要強化展示。

3、詳細信息層（詳細了解）是指更多的信息或補充信息，詳細信息層會以更多的交互方式展示信息。這部分信息并不十分重要，但也需要展示。

三、信息設(shè)計的排版處理

B端產(chǎn)品業(yè)務(wù)比較復(fù)雜，頁面內(nèi)容也會較多，信息的有效組織尤其重要。信息設(shè)計不是簡單的內(nèi)容堆砌，需要根據(jù)用戶場景和需求做出優(yōu)化處理，構(gòu)建有效的信息的層級幫助用戶去理解業(yè)務(wù)內(nèi)容。

總結(jié)出以下五種方法來幫助我們更合理地進行信息設(shè)計：

1、信息分組

信息分組是最常用的設(shè)計形式，能夠?qū)?fù)雜的信息打散重組，聚合相似信息，分割差異化信息，有助于降低信息的復(fù)雜性，幫助用戶快速定位信息、瀏覽內(nèi)容，從而降低頁面整體的復(fù)雜度。

常用的分組方式有三種方式：間距、分割線、卡片。

我們可以根據(jù)信息復(fù)雜度更好地選擇分割方式，讓界面的表達清晰明確。

1. 復(fù)雜程度低，優(yōu)先選用留白分隔，視覺清爽無干擾。
2. 當(dāng)留白效果不明顯時，建議采用分割線，讓信息層次更清晰且屏效高。
3. 如果需要進一步強化條目本身的邊界感，可以采用卡片，這樣可以強化條目信息的視覺層次和可操作性。

2、組件拆分

面對復(fù)雜的信息內(nèi)容，用戶容易產(chǎn)生退縮情緒，組件是目前大部分設(shè)計師在進行信息排布時必備的部分，包含：

1、樹形結(jié)構(gòu)：對于有關(guān)聯(lián)性的多層級非常適合，可以將復(fù)雜的層級結(jié)構(gòu)進行收攏，從而能夠顯著降低信息的復(fù)雜度。

2、表格結(jié)構(gòu)：對于信息多且關(guān)聯(lián)性不大的復(fù)雜信息，可以聚合到表格來進行呈現(xiàn)，但表格的呈現(xiàn)方式不宜濫用，需要根據(jù)我們場景來進行選擇。

3、分步驟：將復(fù)雜內(nèi)容分步拆解，把用戶的關(guān)注點從頁面內(nèi)容轉(zhuǎn)移到步驟進度上，可以減少用戶的心理壓力。另外節(jié)點信息頁也可以幫助用戶更好地理解業(yè)務(wù)流程。

4、tab標(biāo)簽：更適合同級的數(shù)據(jù)，對于同類型的結(jié)構(gòu)可以更好地將頁面進行拆分，從而讓當(dāng)前頁面更簡潔。

3、頁面整體布局設(shè)計

通過改變布局的設(shè)計方式，我們可以將多層結(jié)構(gòu)的樣式通過拆分布局來將其控制在三層內(nèi)。這里底層邏輯就是當(dāng)遇到相對比較復(fù)雜邏輯時，我們可以考慮通過改變結(jié)構(gòu)來減少其復(fù)雜度，如下圖：

4、信息融合

我們可以利用信息融合的形式來減弱其對層級的影響。信息融合從本質(zhì)上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。

在進行B端布局時，信息融入用得比較多。比如我們最常見的標(biāo)題、搜索和按鈕等都放在同一行上。這樣既能夠節(jié)省視覺空間，還能夠降低信息層級的復(fù)雜度。

但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應(yīng)的搜索范圍。

5、信息弱化

信息弱化的原則是，將某些超出層級的部分進行弱化。比如有5個層級，但其巧妙地將功能篩選融入到了當(dāng)前的結(jié)構(gòu)中，使得即使超過3層我們也不會覺得其特別復(fù)雜，如下圖：銷氪平臺就對數(shù)據(jù)和視圖切換行進行了弱化，雖然還是有4種層級，但從視覺感知的層面上不會覺得視覺凌亂。

通過上述5種方案：信息分組、組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級過多的復(fù)雜信息簡化，從而讓我們最終的頁面呈現(xiàn)不會太過復(fù)雜，更容易被用戶理解。

一、減少頁面元素設(shè)計

不同于C端產(chǎn)品，B端產(chǎn)品更強調(diào)效率。正如奧卡姆剃刀原則所說“如無必要，勿增實體”。

頁面內(nèi)容需要以簡潔為主，避免無關(guān)要素形成信息干擾。而設(shè)計師更加感性，擔(dān)心設(shè)計過于平淡，會在界面中添加各種視覺元素，反而會增加用戶的認(rèn)知成本。

體驗設(shè)計行業(yè)需要創(chuàng)新，但是B端產(chǎn)品設(shè)計需要更加謹(jǐn)慎，尊重用戶的習(xí)慣，完整表達業(yè)務(wù)邏輯性、保證內(nèi)容的可理解性，是設(shè)計師必須去關(guān)注的。

二、卡片是用線框還是背景

當(dāng)你想用卡片來對信息分組時，你有沒有糾結(jié)過到底是用線框卡片還是背景色填充呢？經(jīng)過多次糾結(jié)和多次的設(shè)計對比，我發(fā)現(xiàn)分組方式其實也包含著一定的規(guī)則：

1、取決于卡片的數(shù)量

如果卡片少，用色塊；

如果卡片多，用線框，你會發(fā)現(xiàn)卡片過多時，線性設(shè)計會讓頁面顯得更整潔和清新，色塊設(shè)計就會讓頁面顯得更厚重。

2、取決于頁面的視覺重心

當(dāng)你整個頁面都全是線框時，你可以利用色塊的卡片來達到突出頁面重心的效果，讓整體頁面沒有那么單調(diào)，可以看到下圖的例子，右側(cè)的頁面會相對更穩(wěn)重一點。

三、底色用灰色塊還是彩色塊

在進行色塊時，時常會糾結(jié)用灰色底還是彩色底來進行。那么這兩者到底有沒有界限的區(qū)分呢，我們應(yīng)該何時使用這兩種色彩呢。

可以看出目前這兩種顏色的運用更多的是功能上的區(qū)分：

1.彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導(dǎo)或者營銷性質(zhì)的頁面。從表現(xiàn)性質(zhì)上來講更重。

2.而灰色背景更適用于「利用灰色背景來區(qū)分層級關(guān)系」或者一些微弱提示的信息。從表現(xiàn)形式上來講更輕。

四、可視化設(shè)計

在某些特定的場景下，內(nèi)容頁面也可以通過可視化展示幫助用戶理解信息，例如常見的身份證圖片上傳等，很多用戶無法分清楚正面反面，借助圖片可視化提示，便于用戶更好地理解信息。

作者：789研習(xí)社      來源：站酷



藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



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

我們都會有一種習(xí)慣，越是對一件事情經(jīng)驗豐富，我們就越容易把事情想（做）得復(fù)雜，設(shè)計師也是如此，我們很容易過度思考，導(dǎo)致我們最終的解決方案很復(fù)雜。

這樣看來好像我們是為了用戶體驗而想盡辦法，但是最終會分散和混淆用戶的意志力，反而讓用戶體驗更糟糕。

怎樣讓我們在設(shè)計中做到“化繁為簡”呢？這時候我們可以用到一個定律“奧卡姆剃刀定律”。

首先要說明的是“奧卡姆剃刀定律”它來源于哲學(xué)，就像“菲茨定律”、“?？?海曼定律”和“米勒定律”一樣，它們出自心理學(xué)和物理學(xué)，它們都不是直接為了設(shè)計而出現(xiàn)的。

但是它們提出的原則是可以運用在設(shè)計中來提升我們的設(shè)計和用戶體驗。或許有人已經(jīng)無形之中運用了這種方法，但是并不知道它的背后竟然還有這么一個理論。

在設(shè)計時，我們運用奧卡姆剃刀原則，剔除那些不必要的元素（視覺、交互、功能等），如果兩個產(chǎn)品有相同功能時，奧卡姆剃刀的原則是建議選擇更簡單的。

因此我們在做設(shè)計時務(wù)必分析每個元素是否必要，在不影響整體功能的情況下應(yīng)該盡可能的減少不必要的元素。

在如今強大的互聯(lián)網(wǎng)時代和強大的設(shè)計工具下，設(shè)計師很容易忘乎所以，在設(shè)計時往往將簡單的需求設(shè)計得非常復(fù)雜。

它們可能是一個很多功能和信息的網(wǎng)站，但是卻很難使用和維護，有人認(rèn)為我的網(wǎng)站設(shè)計就應(yīng)該做得更多，它應(yīng)該擁有更多的功能和信息，但實際上應(yīng)該做得更少。

一旦出現(xiàn)這種想法時我們應(yīng)該問自己，我們最開始的目標(biāo)是什么？我們要解決的真正問題是什么？

01｜奧卡姆剃刀講了什么

背景

十四世紀(jì)時期（文藝復(fù)興時期），歐洲的學(xué)者們忙于“辯論”（打嘴炮），把研究“似是而非”的東西當(dāng)作智慧的象征。

例如：

黑色的白色是否存在

上帝的噴嚏是哈欠還是電閃雷鳴？

不是張三也不是李四的人本身是否存在？

在這些毫無意義的“口嗨”中，奧卡姆實在是看不下去了，奧卡姆覺得他們的爭論是毫無意義的，由此他提出了奧卡姆剃刀定律：如無必要，勿增實體。與我們中國哲學(xué)中的“大道至簡”有異曲同工之妙

觀點

奧卡姆剃刀的觀點是“不要浪費較多的東西去做用較少的東西同樣可以做好的事情”，簡單點就是“如無必要，勿增實體”

拉丁文形式有以下幾種：

我們可以從三個方面來解釋這個觀點：

相關(guān)觀點

02｜設(shè)計與奧卡姆剃刀定律

從三個解釋奧卡姆剃刀的觀點我們可以引申出設(shè)計中的一些方法：

如果一件事情可以用已有的“A”來解釋，那么就不要再去發(fā)明“B”來解釋這件事，新的這個解釋可能存在漏洞。 

這一條與雅各布定律中表達的想法是一致的，雅各布定律講“用戶會將大量的時間花在其他的網(wǎng)站（產(chǎn)品）上，而不是你的網(wǎng)站（產(chǎn)品）”。那我們在設(shè)計前就應(yīng)該多看，一名優(yōu)秀的設(shè)計師除了具備良好的理論知識和高超的技能外，還應(yīng)該有開闊的眼界。

擁有開闊的眼界你才會知道原來已經(jīng)有了這么好的設(shè)計解決辦法，而不是固步自封的“創(chuàng)新”。

如果已經(jīng)有了一種很好的設(shè)計方案"A"或者是某一個功能的設(shè)計大家已經(jīng)有了一個統(tǒng)一的標(biāo)準(zhǔn)，那么我們在做同類設(shè)計的時候最好的方法是與之保持一致性，不要再去做設(shè)計“B”，因為新的設(shè)計“B”可能會比設(shè)計“A”更難用，然后最終導(dǎo)致這個設(shè)計是一個失敗的設(shè)計。當(dāng)然。如果你有成本能接受創(chuàng)新后的失敗，那么也可以嘗試，但最好的還是先選擇設(shè)計“A”。

這一點其他詳細內(nèi)容可查看雅各布定律

如果同一件事情有N種理論來解釋，那最簡單的便是正確的。 

在設(shè)計一個功能的時候，如果我們設(shè)計了幾種方案，或者在計時有幾種交互方式方案，那么最簡單的交互方式肯定是最好的。

能夠N次做好的事情，就不要用N+1次來完成。 

這一點我們可以理解為“降低復(fù)雜性的最好辦法就是避免復(fù)雜”，如果一個交互或者是一個步驟，能用N次來解決，那么我們就一定不要讓他用N加一次來解決這個事情。

03｜奧卡姆剃刀的運用

剔除設(shè)計中不必要的元素，直至沒有可以剔除的元素

第一刀，要斬在用戶的需求當(dāng)中。

當(dāng)我們接到用戶的需求時，用戶會根據(jù)自己想要的東西而提出很多的需求，有些是可以采納的，有些卻又是不可取的，用戶并不會意識自己的對錯，他們只會說我想要這些東西。

那匹馬的故事大家應(yīng)該都聽過，但經(jīng)典的例子還是可以一直舉著：

一百多年前，福特公司的創(chuàng)始人亨利·福特到處跑去問客戶：“您需要一個什么樣的更好的工具交通工具？”

幾乎所有人的回答都是：“我要一匹更快的馬”。 

很多人聽到這個答案后就跑到馬場去選好的馬匹配種，以滿足客戶的需求。 

但是福特并沒有立馬去馬場，而是接著往下問。 

福特：你為什么需要一匹更快的馬？ 

客戶：因為可以跑得更快！ 

福特：你為什么需要跑得更快？ 

客戶：因為這樣我就可以更早地到達目的地！ 

然后福特發(fā)明了汽車，很地滿足了客戶的需求。 

我們可以說這是剔除現(xiàn)象看本質(zhì)，看清用戶到底需要什么，我們做出的產(chǎn)品才會是好產(chǎn)品。

第二刀，要斬在產(chǎn)品經(jīng)理的原型中。

UI設(shè)計師最忌諱的就是拿到原型就直接開始設(shè)計，這樣做是很危險的。拿到原型的第一時間應(yīng)該把刀直接架在原型上，反過來推動我們思考，什么東西是必須展示出來的，哪些直接去掉，哪些可以隱藏起來等等，又或者是哪些流程最好一步解決，哪些分開解決?？偠灾?，這一刀是讓我們設(shè)計師在設(shè)計前對產(chǎn)品的原型有所思考。

第三刀，要斬在我們自己設(shè)計出的頁面中。

正如前面所說的，越是經(jīng)驗豐富越容易將事情做復(fù)雜，有時候為了追求設(shè)計上的美感，或是完美的用戶體驗反而將設(shè)計做得復(fù)雜了，而這一刀的作用就是在我們完成設(shè)計后用來自我檢查的，剔除我們設(shè)計中不必要的元素。

史蒂夫·喬布斯的極簡主義

提起簡單性最具代表性的就是“蘋果”，它的創(chuàng)始人斯史蒂夫·喬布斯就是一個極簡主義者，喬布斯在會議中會問大家“我們下一步應(yīng)該做的十件事情是什么？”喬布斯會將大家的建議記下來，然后再刪掉一些他認(rèn)為愚蠢的，最后剩下最終確定的前十大“最應(yīng)該做的事”。喬布斯會把最后七件全部都劃掉，最后宣布只做前面三件事。

還有一個故事就是，在設(shè)計iPod時其中有一個設(shè)計方案是有可拆卸內(nèi)存卡的插槽，喬布斯覺得它太復(fù)雜了所以沒有選，第二個是轉(zhuǎn)盤的設(shè)計代替按鍵的設(shè)計，轉(zhuǎn)盤的轉(zhuǎn)動可以讓我們快速的下拉列表，而如果是按鍵找歌可能需要按幾百次。

自從項目開始，喬布斯每天都投入其中。他最主要的要求就是“簡化！”他會瀏覽用戶界面的每一個頁面，并且會做嚴(yán)格的測試：如果要找某一首歌或者使用某項功能，按鍵次數(shù)不能超過三次，而且按鍵的過程要自然。如果他覺得導(dǎo)航不夠清楚，或者需要按鍵三次以上，他就會非常生氣。

當(dāng)然還有后續(xù)iPhone、iPad、MacBook的設(shè)計也同樣如此，喬布斯對于產(chǎn)品一生都在追求極簡設(shè)計。

喬布斯的故事有很多，畢竟他是一個極簡主義者，有興趣的可以去讀一讀《史蒂夫·喬布斯傳》

04｜總結(jié)

簡單≠容易，復(fù)雜≠完美，就像《小王子》的作者安托萬·德·圣?？颂K佩里說的”完美不是在沒有什么可以補充的時候?qū)崿F(xiàn)的，而是在沒有什么可以帶走的時候?qū)崿F(xiàn)的“

奧卡姆剃刀并不像“費茨法則”那樣有明確公式告訴你怎么做，例如將按鈕放置在用戶最快能點擊的地方，按鈕的大小應(yīng)該減少用戶調(diào)整的過程，使用戶能快速的擊中目標(biāo)。

奧卡姆剃刀在設(shè)計中的運用沒有直接針對某一項設(shè)計，它算是對設(shè)計師思想上的一種指導(dǎo)，就像它指導(dǎo)其他科學(xué)家在科學(xué)創(chuàng)造中那樣，它是一種方法，可以指導(dǎo)你在設(shè)計中思考問題時如何做出更好的選擇和設(shè)計。

作者：宇宙設(shè)計大本營      來源：站酷



藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



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

大部分的設(shè)計師應(yīng)該都沒有見過所謂的“交互設(shè)計文檔”吧？在實際工作中，所謂的交互設(shè)計文檔是由交互設(shè)計師所輸出的，但是大部分的互聯(lián)網(wǎng)公司是沒有交互設(shè)計師的。交互設(shè)計師的工作內(nèi)容被UI設(shè)計師與產(chǎn)品經(jīng)理相互分?jǐn)?。那公司為什么不招聘一個交互設(shè)計師崗位呢？（boss：呵呵～一個人能完成的任務(wù)為什么要兩個人?。?br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" /> 所以本篇文章為了讓我們設(shè)計師能夠很好的了解什么是交互說明文檔？它是干嘛的？有什么用？如果制作？有哪些內(nèi)容等多方面全面了解。（哪里有了解的不到位錯誤的地方，也希望各位大神多多指點相互學(xué)習(xí)。讓我卷～）

一、交互設(shè)計文檔

什么是交互文檔？

交互文檔，即交互設(shè)計說明文檔（英文名“Design Requirement Document”）。又稱“DRD文檔”。用來承載交互說明、交互原型、項目背景等內(nèi)容，存檔并交互項目相關(guān)伙伴的團隊協(xié)作文檔。

為什么需要交互文檔？

也許你想到：什么？交互文檔（DRD）我壓根沒見過，這難道不是口頭說說就行嘛？無需交互設(shè)計師。（大部分公司的交互文檔是由UI設(shè)計師/產(chǎn)品經(jīng)理來撰寫）但是有的公司產(chǎn)品也分擔(dān)著UI設(shè)計師的工作.......只要你如果優(yōu)秀干啥都行，不優(yōu)秀話語權(quán)都沒有。（比如我們這些“小美工”。職位只是對一個工作的劃分不代表對你能力的劃分，只是公司的一種小手段～

回歸正題，作為交互設(shè)計師，工作職責(zé)起到“對接上下游，承上啟下”的作用，不論是在方案評審的講解，還是日常的工作溝通，都應(yīng)具備優(yōu)秀的溝通能力、語言表達和DRD表達能力。而DRD不僅能完美的詮釋出產(chǎn)品的內(nèi)容和需求，還能夠為產(chǎn)品出一套完整的設(shè)計規(guī)范，讓產(chǎn)品保持一致性，方便團隊協(xié)作減少溝通成本，也方便后期的修改。

DRD是利于團隊協(xié)作的媒介，也是產(chǎn)品規(guī)范與項目總結(jié)的重要輸出文檔。

交互文檔給誰看？

交互文檔撰寫并不是只有給自己看，最重要的是給：產(chǎn)品經(jīng)理、UI設(shè)計師、開發(fā)（最需要）等等。并且作為交互設(shè)計師的輸出物，交互文檔是聯(lián)系開發(fā)流程上下游的重要文件，它需要具備良好的可讀性、唯一性和時效性。

產(chǎn)品經(jīng)理

首先不同公司，不同團隊產(chǎn)品經(jīng)理與UI/UX設(shè)計師之間的配合輸出物是不固定的。

1. 大部分公司，產(chǎn)品經(jīng)理細心點會連交互說明和原型一起出了（包含在PRD文檔里），但是大部分會出現(xiàn)體驗層的漏洞。

2. 如果公司產(chǎn)品是負責(zé)傳一句話，有交互設(shè)計師的情況下，交互需要從功能規(guī)劃、信息架構(gòu)、原型說明一起搞了。

3. 還有在小公司比較罕見的流程就是產(chǎn)品搞PRD，交互搞交互文檔，彼此之間的邏輯可以互相印證。

UI設(shè)計師

作為交互設(shè)計師的下游，我們也需要較早的介入需求溝通之中，提早避免后期可能存在的問題出現(xiàn)。

（但是很多時候交互設(shè)計師就是我們自己）

開發(fā)（前端設(shè)計師）

開發(fā)是最需要看交互文檔的重要成員之一，因為他決定著產(chǎn)品的邏輯以及頁面的跳轉(zhuǎn)流程、交互方式、動效方式等等。（不過大多數(shù)公司只有簡單的PRD文檔，開發(fā)也只是簡單看看～）

二、交互文檔（DRD）如何撰寫？需要有哪些內(nèi)容？

你習(xí)慣用什么工具撰寫交互文檔？PPT、Sketch、AI、Axure … ？
你習(xí)慣用什么格式輸出你的交互文檔呢？PPT、PDF、HTML …？
其實使用什么工具都無所謂，只要能夠正確的描述出交互文檔所需要表達的內(nèi)容和邏輯就行。（就是誰都看得懂）

我比較喜歡使用Axure軟件撰寫交互設(shè)計文檔，大家可以根據(jù)自身愛好或者公司規(guī)定進行選擇（例如sketch、figma、PS等等..都是可以的。

說了這么多，究竟交互文檔包含哪些內(nèi)容呢？
一般來說，一份最基本的DRD文檔需要包含：DRD封面、更新日志、文檔圖例、產(chǎn)品背景、頁面交互、業(yè)務(wù)流程圖、交互原型、回收站等模塊。

DRD封面

DRD封面：包括產(chǎn)品/項目名稱、版本編號、撰寫時間、撰寫人等基本信息。按需可增加參與該項目的各方負責(zé)人。（如：產(chǎn)品經(jīng)理，交互設(shè)計師，視覺設(shè)計師，開發(fā)，測試，團隊名稱等）

更新日志

更新日志，包含具體新增或修改的內(nèi)容，修改人，修改日期等信息。在實際工作中，方案的修改和優(yōu)化是不可避免的。更新日志方便項目成員一目了然關(guān)注到重點更新的內(nèi)容，也方便開發(fā)找到對應(yīng)的負責(zé)人進行溝通，提升工作效率。

文檔圖例

針對你在該文檔所用到的圖例進行說明，輔助閱讀（如：操作/跳轉(zhuǎn)圖例、標(biāo)簽圖例、流程圖例以及手勢操作圖例。）。特別適合剛?cè)雸F隊，首次閱讀你DRD文檔的人來講，是非常有利于團隊成員對你文檔的理解。

產(chǎn)品背景 

可包括一些項目背景、需求分析、用戶調(diào)研、競品分析等。用于設(shè)計思路的整理和記錄，方便閱讀，方便參與評審會的人理解整個項目背景下的設(shè)計思路，也方便日后總結(jié)與溝通。但無需將所有的分析內(nèi)容都放入，結(jié)構(gòu)化整理重點內(nèi)容放入即可。

業(yè)務(wù)流程圖

業(yè)務(wù)流程圖的目的就是梳理并分析優(yōu)化業(yè)務(wù)流程。我知道很多同學(xué)做UI設(shè)計師的時候可以完全不管業(yè)務(wù)，直接做設(shè)計，但是作為交互設(shè)計師了解產(chǎn)品業(yè)務(wù)是非常重要的，因為不了解業(yè)務(wù)你就無法完成交互設(shè)計，優(yōu)化業(yè)務(wù)場景。
舉個例子：在教育考試系統(tǒng)中一般流程是：教育局出通知→學(xué)生報名考試→老師審核→報名通過→老師編排學(xué)生考試名單→學(xué)生開始考試對號入座→教育局公布成績→學(xué)生查詢成績→考試結(jié)束，看這一些列的流程，因為關(guān)聯(lián)特別多，如果對業(yè)務(wù)不熟悉的話設(shè)計起來會非常的不便，如果前期因為業(yè)務(wù)流程不熟悉而設(shè)計出錯誤的交互稿的話，后面就會特別麻煩。

如何繪制業(yè)務(wù)流程圖？

一聽： 先聽客戶/產(chǎn)品介紹。以最簡單的方式了解產(chǎn)品重點，即基本要素中的角色、活動、協(xié)作關(guān)系梳理出即可。
二溝通： 完成上一步后，就可以進行提問了。主要是沿著流程進行發(fā)問，重點放在分支、產(chǎn)物關(guān)系上?？纯词欠翊嬖诜种У那闆r，各協(xié)作之間是否有交付物。
三確認(rèn)： 最后一步就是自己講一遍流程，和客戶代表或者業(yè)務(wù)產(chǎn)品進行確認(rèn)是否有理解偏差的地方。

以醫(yī)院APP取號業(yè)務(wù)為例

頁面交互

頁面交互是交互文檔的主要內(nèi)容可以詳細說明界面中元素的來源，控件的交互方式，數(shù)據(jù)的樣式，字段的長度規(guī)定，頁面元素的狀態(tài)變化等。每個交互頁面的內(nèi)容應(yīng)該包括：文檔頁面標(biāo)題、界面標(biāo)題、界面、設(shè)計說明。

文檔頁面標(biāo)題：一般在每一頁文檔的頂部。寫明當(dāng)頁內(nèi)容是屬于哪個模塊或流程的，讓看的人不容易迷失；
界面標(biāo)題：注意命名，方便交互稿中的互相聯(lián)系，如“跳轉(zhuǎn)【XX頁面】”，“回到【XX界面】狀態(tài)”；
界面：界面尺寸建議按實際界面的比例縮小，避免你想當(dāng)然的設(shè)計并不符合規(guī)范，也避免一個界面太大影響閱讀效果；
設(shè)計說明：邏輯關(guān)系、操作流程或反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài) 等等，都可以放在設(shè)計說明中；

作者：不知名小明      來源：站酷

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

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

隨著科技的發(fā)展，人們的工作方式打破了空間、時間的束縛，傳統(tǒng)線下場景逐步遷移到線上，衍生出大量的工具型產(chǎn)品。由于實際業(yè)務(wù)場景靈活多變，為了盡可能覆蓋場景需求，工具型產(chǎn)品往往功能龐大且邏輯復(fù)雜，經(jīng)常會收到用戶反饋產(chǎn)品「復(fù)雜、難以理解」。對于工具型產(chǎn)品的設(shè)計者，如何「簡化設(shè)計」是他們必須要面對的重要難題之一。

本文將從用戶感知層面嘗試分析用戶感覺復(fù)雜的原因，并根據(jù)以往項目經(jīng)驗給出一些工具型產(chǎn)品簡化設(shè)計的方法。

提綱：

1、為什么用戶感覺復(fù)雜

2、如何簡化概念，降低認(rèn)知成本

3、如何讓流程簡短高效

4、如何簡化頁面信息布局

5、如何讓操作更輕松

6、結(jié)語        

你是否曾收到過類似的反饋：

“這文案是什么意思？”、“這能干什么？我需要干什么”、“那個功能在哪里？我找不到”、“要設(shè)置這么多項，好麻煩啊”、“這不能拖動嗎？”...

這些都是用戶感到復(fù)雜的反饋。從用戶的感知層面分析，讓用戶感到復(fù)雜的原因可以劃分為四大方面：概念、流程、界面、操作，以下將詳細闡述原因。  

1.1 概念復(fù)雜

導(dǎo)致用戶感覺產(chǎn)品復(fù)雜的其中一個主要原因是：用戶難以理解產(chǎn)品的概念模型。概念模型指事物的基礎(chǔ)定義及行為模式。（例如：汽車，一種在陸地上行駛的交通工具。通常需要司機駕駛，需要消耗汽油... ）用戶根據(jù)概念模型對事物的行為進行預(yù)測，構(gòu)建出自身的心理模型。 

因此，當(dāng)產(chǎn)品沒有清晰、準(zhǔn)確地傳達出概念模型，將導(dǎo)致用戶產(chǎn)生錯誤的心理模型。用戶需要在大量探索過程中，逐步糾正自己的想法，最終才能了解產(chǎn)品實際的概念模型。

另外，根據(jù)「雅各布定律」和「設(shè)計心理學(xué)2：與復(fù)雜共存」，用戶基于以往積累經(jīng)驗去理解新事物，即在使用產(chǎn)品前已構(gòu)建心理模型。而當(dāng)產(chǎn)品的概念模型與用戶的心理模型不匹配時，用戶在使用產(chǎn)品的過程中將持續(xù)產(chǎn)生認(rèn)知沖突，也將給用戶帶來巨大的認(rèn)知成本。尤其對于傳統(tǒng)工具型產(chǎn)品，顛覆型的概念模型，反而提高用戶的認(rèn)知成本，讓用戶感到復(fù)雜難懂。

1.2 流程復(fù)雜

工具型產(chǎn)品的流程主要分為兩方面：單功能使用流程、多功能組合使用流程。 

在單功能使用流程方面，難免會遇到一些功能在生效前，需要經(jīng)過多個設(shè)置步驟的情況。雖然環(huán)環(huán)相扣的流程能夠降低產(chǎn)品的出錯概率，但卻會給用戶帶來更多的成本。對于每個步驟，用戶都需要經(jīng)歷「理解」-「操作」-「反饋」的環(huán)節(jié)。在一些情況下用戶甚至不堪忍受，直接放棄使用功能。例如，在Airtable中創(chuàng)建甘特視圖，需要經(jīng)歷3步才能完成配置，查看到效果。對于一些抱著嘗試心態(tài)的新手用戶來說，這是難以接受的體驗：在還沒理解功能的作用效果前，就要經(jīng)歷如此復(fù)雜的流程。

而多功能組合使用流程方面，工具型產(chǎn)品在產(chǎn)品功能設(shè)計層面，往往將功能的顆粒度設(shè)計得相當(dāng)精細，以靈活滿足各種場景需要。就Excel中的單元格而言，可設(shè)置單元格字體、單元格背景、單元格邊框。但如此精細的功能設(shè)計將導(dǎo)致，若用戶需要簡單實現(xiàn)整體的目標(biāo)效果時，其操作流程就變得十分的冗長。甚至在一些需要重復(fù)設(shè)置的場景下，工作量將幾何級數(shù)地增長，讓用戶的工作流程將變得極其復(fù)雜。

1.3 界面復(fù)雜

大多數(shù)工具型產(chǎn)品都希望能在一個界面讓用戶完成所有任務(wù)，卻忽略了用戶在現(xiàn)實場景下的使用流程。通常一個任務(wù)完成的前提是，需要按照一定的步驟完成若干個細項任務(wù)。若無法聚焦于每一個個細項任務(wù)，而需要耗費大量的時間精力來排除其他信息的干擾，則會產(chǎn)生“注意力被分散”、“太復(fù)雜”等體驗感受，導(dǎo)致最終任務(wù)完成難度增加。

對用戶來說，界面內(nèi)的信息越多負擔(dān)就越大。工具型產(chǎn)品通常伴隨數(shù)量眾多的功能和選項，一味的平鋪功能，只為了展示自身的功能多樣性，缺乏合理的組織布局，導(dǎo)致用戶需要在幾十甚至上百個選項中進行選擇，則會大大降低用戶使用效率。

1.4 操作復(fù)雜

設(shè)計者在不考慮具體操作場景的前提下，不同功能均使用同一種交互方式，名義上為了讓用戶降低學(xué)習(xí)成本，但實際上卻是不負責(zé)任地將復(fù)雜的理解過程轉(zhuǎn)移給了用戶。對于用戶而言，復(fù)雜的操作可以分為兩種：一種是「步驟復(fù)雜」，例如需要多次點擊、頁面跳轉(zhuǎn)、設(shè)備切換等；另外一種則是「認(rèn)知復(fù)雜」，例如交互方式與心理預(yù)期不匹配，需用戶自行轉(zhuǎn)換。無論是哪種，對于工具型產(chǎn)品而言都是災(zāi)難的。 

除此之外，缺乏及時的反饋也會給用戶帶來不必要的麻煩。用戶需要反復(fù)操作比操作中的冗余更可怕，就像高速公路的減速帶，不斷降低用戶的效率。

2.1 隱喻、類比已有事物

當(dāng)產(chǎn)品的概念模型越趨近于用戶的心理模型時，用戶就越感覺產(chǎn)品容易理解和使用，所要求的使用能力和學(xué)習(xí)成本就越低。而用戶心理模型是根據(jù)用戶的目標(biāo)，以及其過往的經(jīng)驗構(gòu)成的。因此在設(shè)計產(chǎn)品的概念模型時，應(yīng)盡量使用隱喻、類比的方式，讓產(chǎn)品的文案概念及交互行為模式）與用戶所熟知事物相近。從而讓用戶建立聯(lián)想，激活行為記憶，降低認(rèn)知探索成本。 

HyperCard，蘋果的早期時間的一款腳本系統(tǒng)。它以「Card」對產(chǎn)品進行命名，同時在產(chǎn)品交互形態(tài)上以一疊卡片的形態(tài)呈現(xiàn)。這讓用戶很容易就聯(lián)想到現(xiàn)實生活中的卡片小冊子，進而快速地了解到產(chǎn)品的大致行為模式。

需要注意的是，傳統(tǒng)工具型產(chǎn)品的用戶往往已被已有產(chǎn)品教育，積累了一定的使用經(jīng)驗、習(xí)慣。對于此類產(chǎn)品的概念模型簡化應(yīng)慎重考慮，因為用戶所建立的心理模型是較難改變的，顛覆性的變化會讓用戶之前付出的學(xué)習(xí)成本付諸東流。此時可嘗試用戶的其他感知層面切入（流程、原型、操作），以探索簡化的可能。

2.2 巧用大白話

在實際業(yè)務(wù)場景中，難免會遇到概念新穎、邏輯復(fù)雜的產(chǎn)品功能。由于用戶從未曾接觸過類似的事物，未建立起相應(yīng)的心理模型。在設(shè)計產(chǎn)品概念時也就難以使用隱喻、類比的方式來降低產(chǎn)品的復(fù)雜度。此時可采用「目標(biāo)導(dǎo)向」的設(shè)計方法，幫助用戶快速理解產(chǎn)品功能。因為用戶除了基于過往經(jīng)驗建立心理模型，還可根據(jù)目標(biāo)而對產(chǎn)品的行為模式做預(yù)測。 

與其生搬硬套地創(chuàng)造概念，不如在合適的使用場景下，使用目標(biāo)導(dǎo)向的大白話，清晰的傳達出功能的目標(biāo)效果。讓用戶快速了解產(chǎn)品功能的目標(biāo)效果，減少全新概念的理解成本。 

例如，在交互原型設(shè)計中，按鈕往往存在多個狀態(tài)（默認(rèn)態(tài)、懸停態(tài)、點擊態(tài)、禁用態(tài)）。Figma對其賦予概念“變體（Variants）”，用戶難以對此概念產(chǎn)生目標(biāo)效果的聯(lián)想，無法建立起對應(yīng)的心理模型。而在MasterGo中，亦存在相同的功能，但使用的是更加符合目標(biāo)效果的大白話“組件狀態(tài)”。

3.1 快速、直觀呈現(xiàn)效果

對于工具型產(chǎn)品來說，效果直觀是非常必要的。一來能讓用戶的探索快速獲得反饋，降低用戶的理解成本。二來能帶來更加輕量的操作體驗，鼓勵用戶探索，給予用戶充分的掌控感。工具型產(chǎn)品的設(shè)計者應(yīng)以此作為設(shè)計理念之一。但難免會遇到產(chǎn)品功能的邏輯流程較為復(fù)雜，需要經(jīng)歷多個環(huán)環(huán)相扣步驟的情況。而研發(fā)者往往更關(guān)注與代碼的邏輯及可維護性，更加推薦邏輯嚴(yán)謹(jǐn)?shù)鞒倘唛L的設(shè)計。這時設(shè)計者應(yīng)堅守設(shè)計理念，不斷在用戶體驗與功能邏輯中尋找平衡，貫徹落實設(shè)計理念。 

對于冗長的流程，設(shè)計者可通過以下方式解決：

（1）根據(jù)場景自動化配置

良好的產(chǎn)品應(yīng)該是聰明、高情商的，能夠根據(jù)用戶的實際情況進行自動化的配置，以減少用戶操作。在進行自動化配置時，應(yīng)謹(jǐn)慎梳理清楚用戶的所有場景，以及每種場景意圖，避免過度聰明，導(dǎo)致畫蛇添足。 

例如，在Notion中可一鍵創(chuàng)建Timeline視圖，無需用戶進行任何配置。因為其做了場景自動化配置處理：自動配置所需要的字段。

（2）清晰的修改配置入口

在進行自動化配置后，不可避免可能存在場景理解錯誤的情況，導(dǎo)致自動配置的結(jié)果不符合用戶實際情況。此時應(yīng)提供清晰的修改配置入口，例如在用戶可發(fā)現(xiàn)錯誤的地方中提供入口，允許用戶在發(fā)現(xiàn)錯誤后即可發(fā)起修改。

（3）異常后置處理，先讓用戶用起來

不應(yīng)要求用戶在功能生效前處理完所有異常。因為對于每一個步驟，用戶都要付出理解及操作成本。尤其在處理異常情況時，用戶需要耗費巨大的成本，極有可能因阻礙過大，從而放棄使用功能。設(shè)計者應(yīng)將異常后置，確保用戶能都快速查看功能效果并使用起來。對于異常的問題，應(yīng)允許用戶后續(xù)持續(xù)處理，不阻斷功能的使用。 

例如，在Figma中導(dǎo)入sketch文件會遇到，多種格式適配問題。但不影響導(dǎo)入流程以及FIigma的正常使用，用戶可以在倒入后在對異常進行處理。

3.2 基于目標(biāo)組合功能，一鍵快速設(shè)置

一般來說，工具型產(chǎn)品服務(wù)的用戶群體較廣，需要滿足豐富的個性化需求。在產(chǎn)品功能設(shè)計上，功能的顆粒度較小，能支持精細化的配置。這樣導(dǎo)致用戶需要實現(xiàn)組合的目標(biāo)效果時，需要執(zhí)行多個功能配置，整體的配置流程較為冗長、復(fù)雜。設(shè)計者在設(shè)計工具型產(chǎn)品時，除了要考慮單個功能的使用體驗，也要從用戶目標(biāo)出發(fā)，全局考慮用戶使用產(chǎn)品的整體流程體驗。

如何既能保持產(chǎn)品的「靈活度」以滿足豐富的場景，又能減少整體操作流程，提升用戶效率?！敢绘I操作」及「自定義腳本」是較為有效的方法。

（1）一鍵操作

基于用戶的目標(biāo)，可以對一些列相關(guān)的功能進行組合，允許用戶一鍵設(shè)置，快速達到目標(biāo)效果。同時應(yīng)存在更多配置的入口，允許進階用戶進行更加詳細的配置。例如，Keynote中可對文本框進行快速樣式設(shè)置，設(shè)置內(nèi)容包含字體顏色、文本框背景顏色。當(dāng)用戶需求較為簡單時，只需設(shè)置一次即可達到目標(biāo)效果，而無需設(shè)置多次。

（2）自定義腳本

自定義腳本，指允許用戶將一系列操作/設(shè)置組合為一個操作組的能力。在一些進階場景，用戶往往存在個性化的需求，對產(chǎn)品功能有著相對固定的使用習(xí)慣。自定義腳本，能夠極大幫助用戶減少重復(fù)性的操作，提高整體效率。

在Figma中，充滿了類似概念的設(shè)計，如：組件、樣式（文字、顏色、效果）。用戶可自定義保存相關(guān)的配置參數(shù)，以方便多次復(fù)用或一鍵修改。

4.1 圍繞行為組織功能，走一步看一步

在設(shè)計界面原型時，需要先了解用戶的任務(wù)目標(biāo)，用戶想做什么，先做什么后做什么。充分掌握用戶心理模型的行為路徑，基于用戶的行為路徑進行組織功能，以確保用戶在每個環(huán)節(jié)中所看到的信息都是必要且準(zhǔn)確的。工具型產(chǎn)品通常擁有多個可選設(shè)置項，拆分任務(wù)步驟可減少用戶被非必選項的干擾。

除此之外，不同的用戶角色的行為路徑也會有所不同，例如：創(chuàng)建者，協(xié)作者，以及是否有編輯權(quán)限等等。不同的用戶場景對于功能的訴求也是不一樣的，而這就需要設(shè)計師從產(chǎn)品的定位，主流用戶以及使用習(xí)慣綜合考量。在優(yōu)先滿足主流用戶場景的基礎(chǔ)功能上，再進行其他場景的功能增減。

4.2 功能層級分區(qū)，巧妙地藏起來

（1）功能分區(qū)

George A. Miller在《神奇的數(shù)字7加減2：我們加工信息能力的某些限制》中表明，人的大腦最多同時處理7±2個信息塊（即5-9個），若超過則出錯的概率將會大大提高。對于無法避免復(fù)雜信息的情況下，可以將煩瑣的信息分塊，組織成清晰的層級結(jié)構(gòu)，例如：微軟Office 中頂部工具欄包含上百個功能選項，為了便于用戶能快速找到想要的功能，他們將所有功能進行分塊，包括：字體、對齊方式等模塊。每個模塊下再細分具體設(shè)置項，具體設(shè)置項又包含了其它功能?；谇逦膶蛹壗Y(jié)構(gòu)，用戶可快速通過「字體模塊」-「字體設(shè)置項」- 「微軟雅黑」三個層級中快速找到想要的選項。

值得注意的是在信息分塊時，需制定出清晰的劃分界限，可通過詢問不同的用戶來判斷界限是否清晰。

與此同時，布局效果是否清晰，對于簡化界面設(shè)計而言同樣重要。合理運用「格式塔原理」中的「接近性原則」，將同類元素放在一起讓用戶在視覺上感覺是一組，再根據(jù)同組元素中的重要性不同，大小上也應(yīng)有所差異。做到讓用戶只看一眼便可快速找到想要的功能。

（2）隱藏高級功能

「帕累托法則（二八法則）」同樣適用于工具型產(chǎn)品設(shè)計，即20%的功能影響80%的用戶體驗結(jié)果。換句話說，大部分普通用戶經(jīng)常使用的基礎(chǔ)功能僅占20%，但影響程度卻遠超于剩下的80%。所以需將功能劃分為基礎(chǔ)功能和高級功能，在優(yōu)先展示基礎(chǔ)功能的前提下，再考慮高級功能或自定義功能的展示，必要時可將高級功能或自定義功能進行隱藏，但前提需是可見的。例如：更多設(shè)置，更多選項等，即對專家用戶始終保持可見，但又不打擾普通用戶。

5.1 減少不必要的操作，使用更自然的交互

簡化操作的過程中，針對不同的操作賦予最自然的交互形式能減少用戶操作過程中的精力消耗。自然的交互應(yīng)該是用戶無意識的操作，是基于過往生活經(jīng)驗，閱歷，學(xué)識等的一種本能，幾乎不需要過多的學(xué)習(xí)成本即可完成。例如：用戶旋轉(zhuǎn)一張圖片。相對于在輸入框中輸入旋轉(zhuǎn)角度參數(shù)而言，將光標(biāo)直接操控在圖片上旋轉(zhuǎn)顯得更自然。輸入需要至少三步（點擊文本框-敲擊鍵盤數(shù)字-點擊確認(rèn)），而直接旋轉(zhuǎn)只需要兩步（點擊-旋轉(zhuǎn)）。因為對于用戶而言，點擊圖片進行旋轉(zhuǎn)更接近現(xiàn)實生活中的操作，不管是交互步驟還是心理認(rèn)知上，都會降低用戶的操作難度，讓用戶覺得產(chǎn)品更簡單更自然。 

5.2 提供及時的反饋與幫助，避免重復(fù)操作

在操作過程中得不到反饋，出錯后再重新填寫，同樣會增加操作的復(fù)雜性。在尼爾森十大可用性原則中，第一原則就是系統(tǒng)狀態(tài)的可見性。系統(tǒng)需要讓用戶知道自己在做什么，需要讓用戶知道系統(tǒng)做了什么。例如：在表單填寫時及時反饋是否出錯，在格式設(shè)置時及時反饋是否生效，可以讓用戶少走彎路。必要時給用戶提供幫助也能簡化用戶操作的復(fù)雜性，提高操作的成功率。

引用《簡約至上》中的所說：創(chuàng)造簡單用戶體驗的秘訣就在于把復(fù)雜性轉(zhuǎn)移到正確的地方。任何產(chǎn)品都具有一定的復(fù)雜性，設(shè)計的目的不是為了消除所有復(fù)雜性，而是將它們放到最合適的位置。簡化產(chǎn)品的復(fù)雜性替用戶排除不必要的干擾，通過設(shè)計師的努力給每一個用戶帶來簡單、愉悅的使用體驗，讓復(fù)雜的工作更簡單。

作者：騰訊ISUX      來源：站酷

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

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

7秒的消費決策中，67%的決策取決于色彩。

色彩是我們感知世界的重要媒介，在設(shè)計中僅次于功能的另一要素。色彩與我們的生活息息相關(guān)，怎樣科學(xué)配色、靈活用色成了絕大部分設(shè)計師的難題。

作為一名擁有多年擰螺絲經(jīng)驗的設(shè)計師，不免每天都會和色彩打交道，在配色的過程中，你是否也曾遇到過以下困擾：每次做項目隨便吸色？

盲目運用色卡？

配色總是看起來不舒服？

色感差，天天被老板和同事Diss？

…

接下來，請你花幾分鐘看看谷歌等其他大廠，都在用的系統(tǒng)配色方案。以下以船長BI為例，做品牌色彩的規(guī)范引導(dǎo)。

船長BI： 
深圳船奇科技有限公司-是中國專業(yè)的跨境電商SAAS系統(tǒng)服務(wù)企業(yè)。旗下船長BI，專注亞馬遜精細化運營與大數(shù)據(jù)分析，為不同階段、不同規(guī)模的企業(yè)提供全場景多維度分析，一站式精準(zhǔn)推廣和全鏈路供應(yīng)鏈協(xié)同管理，幫助企業(yè)實現(xiàn)數(shù)智化運營。同是船奇科技也是亞馬遜SPN服務(wù)商。

01

科學(xué)的系統(tǒng)配色

1-1 設(shè)計主張

船長BI系統(tǒng)是亞馬遜精準(zhǔn)化運營及大數(shù)據(jù)下鉆分析的高效化共同體。從單功能運作到多功能融合，再到大數(shù)據(jù)多元化產(chǎn)品下鉆、閉環(huán)及溯源，打破了亞馬遜跨境運營服務(wù)商單點運作的局限。我們希望新的品牌色，能夠為船長BI在跨境企業(yè)中營造更加權(quán)威、高效向數(shù)智化轉(zhuǎn)型的視覺感知。

船長BI 設(shè)計語言：英文Captain BI Design Language簡稱CapDesign。

經(jīng)過團隊的諸多調(diào)研到佐證,我們將品牌標(biāo)準(zhǔn)色太平洋藍(Pacific Blue)，升級為更加科學(xué)、權(quán)威、智略的明亮立體的黑綠松石色(Dark Turquoise)。黑綠松石色在跨境電商行業(yè)中具有更多神秘的數(shù)智化意味，在實際應(yīng)用中隱含著更多的生機和信任，表明了船長對進入數(shù)智化運營新挑戰(zhàn)的氣魄。同時，品牌色的升級能夠快速區(qū)別于競品，形成船長BI獨特的色彩感知，通過色彩感知形成品牌記憶。

色彩命名源自潘通Pantone。

1-2 創(chuàng)建調(diào)色板

人的視覺系統(tǒng)在辨別顏色時，不會把色光分解成RGB或者CMYK幾種單獨顏色，而是按照色相度、純度和明度來判斷的，也就是HSB。HSB模式可以完美固定HSB中的某一個參數(shù)，只對其他兩個參數(shù)做改變或者只改動其中的一個參數(shù)，符合人對色彩差異幅度的感知，而RGB、CMYK都是牽一發(fā)動全身的節(jié)奏。↗

我們以CapDesign品牌基準(zhǔn)色#2AC5D4（H=185\ S=80\ B=83) 為起始點，S飽和度、B明度保持不變，H色相以185°為起點，以15°為增量或減量標(biāo)準(zhǔn)，生成24色色板。這個色板是我們選取輔助色的重要依據(jù)。

02

拓展豐富的輔助色

2-1 以鄰近色、互補色、對比色為原則，選擇絢麗多彩的輔助色↗

為了保有更多CapDesign 的品牌基調(diào)，我們選擇了相對較多的鄰近色，以保證整體色韻的清爽感和數(shù)智科技化意味。并利用對比色及互補色擴展色相，選擇更加豐富多元的輔助色，使其色相對比鮮明，以保證能色彩夠滿足各種復(fù)雜場景。

Q：色相位到底選擇多少個合適？ 
A：有的產(chǎn)品選擇7個色相位，有的產(chǎn)品選擇10幾個色相位，都是允許的，選擇的依據(jù)取決于： 
1.色彩對比明顯，選擇色相數(shù)少；色彩對比柔和，選擇色相數(shù)多； 
2.產(chǎn)品功能的場景簡單，選擇色相數(shù)少；產(chǎn)品功能的場景復(fù)雜，選擇色相數(shù)多； 

Captain BI 是亞馬遜運營與大數(shù)據(jù)集成，功能交叉比對及數(shù)據(jù)可視場景復(fù)雜，為迎合業(yè)務(wù)發(fā)展需要，CapColor選擇的色相位為13個。

2-2 校正輔助色(波長和振幅)

雖然我們保持相同的飽和度和明度，使用科學(xué)的方法得到了較為合適的色相，但由于每個色相的波長各不相同，導(dǎo)致色彩在感官感受上存在差異。

在可見光波譜當(dāng)中，波長越長其穿透力就越強；紅色的波長是最長，穿透力就最強，感知度最高。↗

為了讓不同色相在視覺感官上看起來更加協(xié)調(diào)，需要對色板的明度和飽和度進行反復(fù)的校驗，以保證視覺感官更加和諧舒適。

校正原則 
A.色相最好維系在同類色(色相環(huán)中15°夾角內(nèi)的顏色)↗ 
B.色相感官保持平衡(明度和飽和度) 
C.保證視障群體的識別度(WCAG 對比度) 
調(diào)色的技巧 
淺灰色調(diào): 飽和度減少(S↓)，明度增加(B↑) 
深色色調(diào): 飽和度減少(S↑)，明度增加(B↓) 

使用HSB調(diào)色模式時，可以參考以上規(guī)律，能讓快速調(diào)和想要的顏色。校正后得到了以下色域清晰、對比明顯的主色及輔助色。并且針對視障群體進行了色彩測試。

2-3 拓展梯度色譜
校正主色和輔助色后，我們需建立完整的梯度色板，來滿足不同場景下顏色的應(yīng)用。建立色彩層級，以提升品牌感知，達到信息傳達辨識、強化界面層級等作用。

在梯度色板系統(tǒng)中，很多配色產(chǎn)品都是使用Tints and shades系統(tǒng)：通過在原有色相的基礎(chǔ)上增加白色或者增加黑色，來改變它的明度和飽和度，形成梯度色板。但這種方法得到的調(diào)色板往往比較刻板生硬。CapColor在Material Design-Color的基礎(chǔ)上進行了細化，構(gòu)建更有層次感、空間感、立體感的梯度色板。

CapColor梯度色板：

1.在Primary的基礎(chǔ)上，使用Tints and shades系統(tǒng)找到Light和Dark：

Light=(White+primary) 95%疊色； 
Dark=Black 60%疊色； 
Primary=原色相。

2.結(jié)合Material Design-Color實踐，得到CapDesign梯度色板及相應(yīng)的參數(shù)。

CapColor選擇10階梯度，對比穩(wěn)健，更能凸顯船長系列產(chǎn)品權(quán)威和成熟的形象；9階梯度相對生硬跳躍，12階梯度過于柔和平滑。

有的色相穿透性強、飽和度高，所以還需要進一步的校驗，如藍色 RYB：

運用以上的方法，得到CapDesign豐富的調(diào)色板，為后期業(yè)務(wù)做支撐：

03

易用的中性灰色

Captain BI系統(tǒng)大部分是由容器、面板、列表、卡片等其他組件及元素構(gòu)成。中性色為系統(tǒng)銳化布局、表達邊界、建立信息層次起到?jīng)Q定性作用。

3-1 中性色

中性色的搭建同時滿足暗黑模式、換膚及印刷等諸多場景，故在實現(xiàn)時按照透明度的呈現(xiàn)方式。

3-2 黑綠松石灰色

中性黑綠松石灰色解決更多復(fù)雜的場景，如表格和表單雙底色、圖標(biāo)的顏色等。中性黑綠松石灰色增強布局、區(qū)別背景，起到強化信息層次的作用。

黑綠松石灰在中性灰色的基礎(chǔ)上增加色相和飽和度，這樣得到的藍灰色還是有些許生硬，還需要對飽和度和明度進行微調(diào)，讓顏色更有層次感。

中性黑綠松石灰的方法：

在配色模式HSB中： 
H=185(Brand Color)； 
S=3(必要時微調(diào))； 
B=保持不變。

3-3 WCAG 2.1測試

為保證視障用戶的使用，保證足夠的對比度，CapDesign 遵守 WCAG 2.1 的標(biāo)準(zhǔn)，對調(diào)色板對比度進行了可用性測試，為后期靈活用色奠定基礎(chǔ)。以中性灰色為例：

WCAG 2.1中規(guī)范了A、AA、AAA的對比值范圍及使用場景，感興趣的朋友可以前往WCAG 2.1官網(wǎng)詳細了解，在這不在贅述。

3-4 場景案列

實踐是檢驗真理的唯一標(biāo)準(zhǔn)，以下通表格的微交互對中性色進行完美的詮釋：左邊的表頭和表格背景粘連到一起，視覺及信息識別困難。通過交叉運用中性灰色，明顯右邊的表格結(jié)構(gòu)、信息層級得到強化，視覺更聚焦。

結(jié)語

主觀情感的取色，一開始可能沒遇到什么大問題，但隨著產(chǎn)品不斷完善，主觀取色往往不能滿足業(yè)務(wù)發(fā)展訴求?？茖W(xué)的系統(tǒng)配色，真正滿足和服務(wù)設(shè)計；同時對設(shè)計一致性及提升團隊效率起到肯定的作用。

通過這個漫長的配色過程，你是否重新審視過去設(shè)計中的配色方法？希望對配色困擾的你有所幫助。

色彩系統(tǒng)中的系統(tǒng)配色部分已經(jīng)完成，接下來我們將死熬，續(xù)更系統(tǒng)配色在實際項目中的應(yīng)用，做到科學(xué)配色、靈活用色。