靈魂畫手指南-基于人格特質(zhì)的設(shè)計(jì)表現(xiàn)

1、人格特征下的設(shè)計(jì)原則指引

完成人格畫像是塑造生命感的第一步，更重要的是如何將這樣的人格特質(zhì)系統(tǒng)性的體現(xiàn)在IP形象中，為此我們有必要將人格中的核心特質(zhì)轉(zhuǎn)譯為設(shè)計(jì)語言，定義IP在場景、情緒、行為、語言4個(gè)方面的設(shè)計(jì)指引原則。下文我們繼續(xù)以“犀寶”在工作臺的設(shè)計(jì)應(yīng)用為例，基于人格特質(zhì)歸納設(shè)計(jì)原則。

1.1 “犀寶”的核心人格特質(zhì)

1.2 場景原則

經(jīng)過多輪線上線下調(diào)研，我們對客服崗位建立了基于職業(yè)特征的用戶畫像：高強(qiáng)度、高疲勞、高負(fù)壓。面對即時(shí)溝通、多會員切換、服務(wù)考核等壓力，客服往往需要一個(gè)高效、專注的工作環(huán)境。因此基于人格特質(zhì)的場景原則首先要保證“不打擾”，除功能性需要，應(yīng)避免在客服服務(wù)過程中過度設(shè)計(jì)。結(jié)合“犀寶”利他主義、強(qiáng)共情等的人格特征，更適合應(yīng)用在非上班狀態(tài)的場景中，如：引導(dǎo)教學(xué)、頁面加載、為空狀態(tài)、結(jié)果反饋等。

1.3 情緒原則

經(jīng)過對IP形象在工作臺中的典型應(yīng)用案例的編碼梳理，我們基于情緒二維模型對“犀寶”的情緒進(jìn)行了管理統(tǒng)計(jì)。情緒象限中所定義的觸發(fā)條件即為應(yīng)用原則，高頻出現(xiàn)的情緒即為典型情緒。

我們將“犀寶”的典型情緒統(tǒng)計(jì)如下：

高興、冷靜、興奮、放松、慌張、欣喜、疑惑

將“犀寶”的情緒原則進(jìn)行如下歸納：

① 面對客服或客服的正向行為，建議使用帶有正向情感反饋的情緒（如高興、欣喜、興奮等）；

② 面對客服的負(fù)向行為，避免使用帶有負(fù)向情感反饋的情緒（如緊張、慌張、沮喪、尷尬、疑惑等）；

③ 處于工作狀態(tài)時(shí)，建議使用中性的情緒（如冷靜、嚴(yán)肅）；

④ 面對工作臺/系統(tǒng)的狀態(tài)，不受常態(tài)的正負(fù)向情緒拘束；

⑤ 任何狀態(tài)下，避免使用帶有攻擊性的情緒（如憤怒、厭惡、鄙夷、怨恨等）。

1.4 行為原則

行為原則是在IP人格特質(zhì)與典型場景的基礎(chǔ)上，對IP行為特點(diǎn)的建議與約束。按照以上思路，我們對“犀寶”的行為原則歸納如下：

① 建議使用具有引導(dǎo)/指向性的動作（如舉手引導(dǎo)）；

② 建議使用具有社交禮儀的動作（如揮手問候/告別、雙手呈遞）；

③ 建議使用呈現(xiàn)工作狀態(tài)的動作（如佩戴耳機(jī)坐在電腦前）；

④ 建議使用操作智能設(shè)備的動作（如操作虛擬現(xiàn)實(shí)工作臺、使用可穿戴設(shè)備等）；

⑤ 建議使用帶有正向情感反饋的動作（如擁抱、點(diǎn)贊、鼓掌、加油等）；

⑥ 避免使用帶有劇烈運(yùn)動的動作；（如奔跑、跳躍、健身等）

⑦ 避免使用帶有情感攻擊性的動作（如指責(zé)、揮拳等）。

1.5 語言原則

語言原則是在IP人格特質(zhì)的基礎(chǔ)上，對IP聲音、話術(shù)等特點(diǎn)的建議與約束。按照以上思路，我們對“犀寶”的語言原則歸納如下：

2、擬人化的形態(tài)設(shè)計(jì)

在明晰人格特質(zhì)和設(shè)計(jì)應(yīng)用原則后，我們可以進(jìn)一步思考IP形象在產(chǎn)品中的擬人化表現(xiàn)。在這里，簡要的分享一下思路方向。

上文提到，擬人化是把物擬作人，使其具有人的形態(tài)、情緒、行為、語言等特征，轉(zhuǎn)譯為設(shè)計(jì)語言即為IP形象的形態(tài)結(jié)構(gòu)、面部表情、體態(tài)動作、聲音文案幾個(gè)部分。其中IP形象的結(jié)構(gòu)決定了表情和動作的可塑性、豐富性。從上文JOY的形象設(shè)計(jì)案例中不難看出，人體化結(jié)構(gòu)是IP形象設(shè)計(jì)的主流手段之一。

對于擬人化的表現(xiàn)個(gè)人建議優(yōu)先從結(jié)構(gòu)人體化著手，結(jié)構(gòu)滿足后，具有人格特質(zhì)的擬人化表現(xiàn)自然水到渠成。在這里，我們可以將結(jié)構(gòu)人體化的方式總結(jié)為：

2.1 模仿人類的五官結(jié)構(gòu)

使IP形象具有眉、眼、鼻、嘴、耳的基本結(jié)構(gòu)關(guān)系，幫助IP進(jìn)行生動、豐富的情緒表現(xiàn)。

2.2 模仿人類的形體結(jié)構(gòu)

使IP形象具有頭、手（手指）、軀、腳的基本結(jié)構(gòu)關(guān)系，幫助IP進(jìn)行生動、豐富的動作體態(tài)表現(xiàn)。

3、仿真化的動態(tài)設(shè)計(jì)

在完成人格化、擬人化的設(shè)計(jì)思考后，相當(dāng)于為IP繪制了一幅角色設(shè)定草圖。接下來我們可以結(jié)合品牌/產(chǎn)品氣質(zhì)，豐富感官表現(xiàn)，精細(xì)化的同時(shí)進(jìn)一步有增強(qiáng)其生命感知。在這里，簡要的分享一下思路方向。

上文提到，仿真化是對形象進(jìn)行物理及生物特點(diǎn)的感官還原，表現(xiàn)在造型、空間、色彩、質(zhì)感、動態(tài)、聲音等多方面。然而，不同類型的品牌、產(chǎn)品、應(yīng)用場景，對仿真化的程度需求有所區(qū)別，如：主機(jī)/電腦游戲類產(chǎn)品，娛樂屬性更強(qiáng)，為了追求沉浸式的感官體驗(yàn)，在各方面的仿真表現(xiàn)都相對較高；品牌/產(chǎn)品宣發(fā)場景，展示性更強(qiáng)，仿真表現(xiàn)的權(quán)重也相對較高；在APP/網(wǎng)頁界面中，更注重功能體驗(yàn)和產(chǎn)研效率，風(fēng)格以扁平為主，因此對于仿真表現(xiàn)的訴求也相對較低，在這種情況下，對比造型、空間、色彩、質(zhì)感等元素，IP形象的動態(tài)表現(xiàn)最能直觀的表現(xiàn)生命感。

那么，如何通過動態(tài)表現(xiàn)增強(qiáng)產(chǎn)品IP形象的生命感？

3.1 模仿真實(shí)的生物規(guī)律

① 呼吸感：

呼吸是生物的生物學(xué)功能，有節(jié)奏的呼吸起伏是生命體的直觀體現(xiàn)；

② 眨眼：

眨眼動作屬于生物體基本的生理反射，間隔性的眨眼動作可以增加形象的生命感知；

③ 模仿生物習(xí)性：

以“犀寶”為例，犀牛生活在蚊蟲多發(fā)的非洲，靈活直立的大耳朵不僅可以洞察環(huán)境，還可以幫助他們軀干蚊蟲，抖動耳朵是一個(gè)非常具有生物習(xí)性的行為反射。在呼吸、眨眼的基礎(chǔ)動態(tài)上增加間隔性的抖耳，可以讓整體形象更加真實(shí)生動。

3.2 模仿真實(shí)的動態(tài)規(guī)律

現(xiàn)實(shí)世界中存在著許多物理運(yùn)動規(guī)律，如運(yùn)動慣性、速度曲線、落地緩沖等等，想要表現(xiàn)出IP形象真實(shí)生動的動態(tài)特征，需要了解并掌握其中的動態(tài)規(guī)律。從動畫的視角來看，迪士尼黃金12定律具有很好的專業(yè)參考性，相對全面的總結(jié)了20世紀(jì)30年代以來迪士尼動畫的制作方式，是動畫專業(yè)必修的知識點(diǎn)。

小結(jié)：如何基于IP人格特質(zhì)進(jìn)行設(shè)計(jì)應(yīng)用？我們的方式是結(jié)合產(chǎn)品特點(diǎn)、IP人格特質(zhì)擬定設(shè)計(jì)原則；通過擬人化的結(jié)構(gòu)增強(qiáng)IP形象在動作表情方面的可塑性；最后通過合理的仿真化手段完成設(shè)計(jì)應(yīng)用。以下是“犀寶”在產(chǎn)品應(yīng)用中的部分設(shè)計(jì)案例。

案例一：培訓(xùn)機(jī)器人對客服模擬練習(xí)的狀態(tài)反饋

案例二：客服工作臺啟動頁加載插圖

案例三：客服應(yīng)用頁面加載插圖

案例四：瀏覽器升級提示

案例五：靜態(tài)插圖合集

結(jié)合設(shè)計(jì)和心理學(xué)理念來看，具有生命感的IP形象能夠帶來更有力的功能及情感價(jià)值。通過對IP生命感的分析，我們認(rèn)為IP形象的生命感由表及里表現(xiàn)出“仿真化、擬人化、人格化”三個(gè)層次。其中人格是決定IP形象如何表現(xiàn)的核心，因此對于形象的設(shè)定邏輯建議由里至表的進(jìn)行思考統(tǒng)籌。從設(shè)計(jì)力度上看，對于各層次的程度把控與配合，建議根據(jù)產(chǎn)品屬性、傳播媒介、表現(xiàn)形式、技術(shù)條件、預(yù)期效果、預(yù)算成本等具體情況進(jìn)行評估。

引用及參考文獻(xiàn)：

[1] 魯?shù)婪?阿恩海姆. 視覺思維. 四川人民出版社. 2001(3)

[2] 姚浩然.人格化加劇形態(tài)設(shè)計(jì)研究[D].南京：南京林業(yè)大學(xué)木材科學(xué)與技術(shù),2012：12.

[3] 吳龍華.個(gè)性心理結(jié)構(gòu)問題的研究[J].人力資源管理,2012(12)

優(yōu)秀的界面設(shè)計(jì)應(yīng)該體現(xiàn)在每個(gè)維度，間距在設(shè)計(jì)中也是不可缺少的部分，尤其是界面元素較為密集時(shí)，需要對間距的使用掌握得當(dāng)，合理的利用間距留白，能將信息更高效的傳達(dá)給用戶。

文字、圖形、色彩是UI設(shè)計(jì)的三大組成元素，間距即是這幾種元素結(jié)合的媒介，如何通過間距給用戶帶來更舒適的視覺體驗(yàn)是設(shè)計(jì)過程中極其重要的一環(huán)，那么你所理解的間距到底是什么、有什么作用、如何合理有效的使用？筆者進(jìn)行了整理總結(jié)，通過本篇文章揭曉。

一、間距在UI中的重要性

1、什么是間距？

間距指的是界面各元素彼此相隔的距離，可以是文字自身的行距、與圖片、與組件、與模塊的間距，或是界面兩側(cè)的安全距離（如網(wǎng)頁的寬度為1920px，內(nèi)容區(qū)為1400px，那么安全距離為兩側(cè)各260px）等。

作為UI設(shè)計(jì)師，在設(shè)計(jì)界面的每一個(gè)元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調(diào)整間距，利用各間距之間的規(guī)律來組織界面內(nèi)容，確保信息的節(jié)奏性，給用戶輕松、預(yù)約的瀏覽體驗(yàn)。

2、間距的實(shí)際作用

間距可以讓界面信息更有節(jié)奏，提升內(nèi)容的可讀性，還能通過不同的疏密程度來闡述各元素之間的關(guān)系，以吸引用戶的注意力，所以在控制界面間距時(shí)，一定要有“較真”的心態(tài)，任何一次的改動與調(diào)整都要先考慮清楚為什么，能給產(chǎn)品和用戶帶來什么。要做好間距，不能僅停留在視覺層面，需要進(jìn)行多方面思考。

設(shè)計(jì)師層面：規(guī)范的定義間距，不必每個(gè)元素都去考慮間距的大小，有效減少決策和思考時(shí)間，提升效率。

開發(fā)層面：開發(fā)可以按照基礎(chǔ)間距去定義變量，長期如此，雖然不能煉成像素眼，但僅憑視覺也能看出間距的倍數(shù)。例如基礎(chǔ)間距以8px增量，在使用8px、16px、24px、32px、48px…等，開發(fā)直接使用基礎(chǔ)間距x1、x2、x3…，以此類推，在開發(fā)眼中，肉眼定然看不出1px的差別，但卻能區(qū)分出8px的差距，不必每次都去測量，還能減少誤差，高度還原設(shè)計(jì)效果。

用戶層面：有節(jié)奏且具備一致性美感的界面效果，信息的有效傳遞變的輕松，用戶體驗(yàn)?zāi)艿玫胶艽蟪潭鹊奶嵘?

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

設(shè)計(jì)規(guī)范的目的是提升設(shè)計(jì)師的工作效率、團(tuán)隊(duì)之間的高效溝通、讓設(shè)計(jì)風(fēng)格始終保持高度統(tǒng)一。同理，間距也是設(shè)計(jì)規(guī)范中非常重要的一環(huán)，它作為規(guī)范中的最小單元，如果沒有遵循統(tǒng)一，將會直接影響界面整體的版式和布局，信息的疏密程度嚴(yán)重影響用戶的瀏覽。不僅是設(shè)計(jì)師，開發(fā)每次面對同樣的模塊都需要定義不同的間距也是崩潰的，毫無規(guī)律可循。

統(tǒng)一的間距能讓界面的視覺效果更有節(jié)奏，設(shè)計(jì)師在設(shè)計(jì)某些相似的模塊時(shí)可直接復(fù)用組件，即便是多人共同完成同個(gè)項(xiàng)目或更換成員，也不會因間距不統(tǒng)一的問題造成整個(gè)APP的風(fēng)格混亂。

對開發(fā)來說，如果清楚間距的使用規(guī)律，即便有小的誤差，也能自行更正，例如使用8px增量，8、16、24…按倍數(shù)規(guī)律以此類推，若出現(xiàn)9的間距，開發(fā)會更正為8、15則會更正為16，自行多退少補(bǔ)，雖然設(shè)計(jì)師需要細(xì)心、盡量不出現(xiàn)這種小的出入，但任何事情都沒法做到絕對，統(tǒng)一的間距能讓減少設(shè)計(jì)的出入以及與設(shè)計(jì)師之間的頻繁溝通，能進(jìn)一步提高開發(fā)效率。

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

二、定義文字間距

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

1、字符間距

字符間距一般都是設(shè)計(jì)工具的默認(rèn)數(shù)值，無需調(diào)整。當(dāng)碰到多行文字需要避開頭尾的標(biāo)點(diǎn)符號時(shí)，使用工具中的避頭尾功能即可自動調(diào)整字間距，如無此功能，則需手動調(diào)整，這里并沒有所謂的技巧與方法，頭尾避開標(biāo)點(diǎn)符號即可。

另外，在設(shè)計(jì)卡片、瓷片區(qū)的標(biāo)題時(shí)，有時(shí)需要通過調(diào)整字符間距來提升界面的舒適度，間距數(shù)值自行定義，但相同層級的內(nèi)容標(biāo)題字間距一定要保持一致。

2、文字行高

行高是指上邊框+下邊框+字號的高度之和，這里主要針對多行文本。在平面設(shè)計(jì)中，行高沒有一定的標(biāo)準(zhǔn)，如無特別需要，使用系統(tǒng)默認(rèn)的行高即可。

在UI設(shè)計(jì)中，文字會有5～6個(gè)不同的等級，為便于用戶閱讀，一般會設(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è)計(jì)中。需要著重糾正一點(diǎn)的是，部分設(shè)計(jì)師在設(shè)置段間距時(shí)習(xí)慣性的多敲一次回車鍵，這種方式并不可取，會造成間距過大、內(nèi)容脫節(jié)。

如有需要，一定要手動設(shè)置段間距，這里沒有固定的數(shù)值和規(guī)律，視覺舒適即可。筆者習(xí)慣將段間距設(shè)定為字號的0.5倍，例如字號為30、段間距為15，字號為40、段間距為20，僅供參考。

三、定義元素/組件間距

定義間距其實(shí)并沒有一個(gè)絕對的標(biāo)準(zhǔn)，主要取決于最小單位，例如4px、5px、6px、8px都是可以的，到底使用哪個(gè)數(shù)值還得根據(jù)產(chǎn)品自身定位及內(nèi)容組織形式，前提是所有間距都要遵循最小單位并基于倍數(shù)形成規(guī)律。

在設(shè)計(jì)界面時(shí)，需要利用間距來建立信息層級、提升瀏覽體驗(yàn)以及表達(dá)各元素之間的關(guān)系，這就是為什么當(dāng)我們打開新聞資訊、電商類應(yīng)用會發(fā)現(xiàn)信息非常緊湊，而打開工具、社交類應(yīng)用時(shí)感覺信息比較寬松。間距的基數(shù)越小、頁面就越細(xì)碎；基數(shù)越大、頁面的留白就越多，使用不同的基數(shù)，呈現(xiàn)出來的視覺效果也形態(tài)各異。

筆者在工作中通常以8px作為基數(shù)，以此衍生出8、16、24、32、48、64這6個(gè)間距數(shù)值，完全能夠滿足絕大多數(shù)的使用場景。當(dāng)然，針對信息較少的頁面也會使用到120、160、200…其他間距數(shù)值，例如缺省頁、登錄頁面等。不難看出，上述以8px為基數(shù)定義間距數(shù)值時(shí)，沒有40、56這兩個(gè)數(shù)值，難道他們不是8的倍數(shù)嗎？我們以8和16做對比，后者是前者的2倍，其間距的變化尤為明顯；但如果用56和64做對比，后者是前者的1.14倍，其間距的差別微乎其微。敲重點(diǎn)，設(shè)計(jì)師在定義間距時(shí)，需要遵循倍數(shù)規(guī)則，但同時(shí)也要為考慮界面美觀及用戶的瀏覽體驗(yàn)而跳出呆板的規(guī)則，當(dāng)間距數(shù)值越大時(shí)，根據(jù)基數(shù)所跳躍的倍數(shù)就越大，其實(shí)設(shè)定字號也是相同的邏輯（后期詳解）。

四、定義模塊間距

從信息層級角度來看，等級權(quán)重越高、間距就越大，在現(xiàn)實(shí)世界中也是如此，一個(gè)物體周圍的空間越大，就越容易吸引人們的注意力。

模塊間距分為塊內(nèi)間距（同一模塊中不同元素或信息組之間的距離）和塊外間距（同一個(gè)頁面中不同模塊的之間的距離），為了更好的區(qū)分信息層級，塊外間距一定會大于塊內(nèi)間距，也能保持塊內(nèi)信息的親密性。

如下圖所示，將裝修序列步驟、官方攻略、常用服務(wù)等看作不同的信息模塊，每個(gè)模塊內(nèi)元素的間距都會比各模塊之間的間距小很多。

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

1、接近性原則

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

2、利用留白強(qiáng)調(diào)

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

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

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

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

這個(gè)問題在很多團(tuán)隊(duì)中都是硬傷，甚至在設(shè)計(jì)驗(yàn)收時(shí)還被直接忽略。在主流UI設(shè)計(jì)工具中，添加文本元素時(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è)計(jì)效果。另外在設(shè)計(jì)界面時(shí)，尤其是多組文字元素的上下間距，需要通過計(jì)算（文字邊緣到定界框的間距+文字元素間距=實(shí)際間距）或手動測量才能達(dá)到精準(zhǔn)狀態(tài)，下圖為例：

2）手動設(shè)置行高

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

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

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

6、明顯相鄰間距值

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

7、跳出間距的束縛

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

六、結(jié)語

如果在處理界面信息層級時(shí)，改來改去還是覺得很亂，不防從間距角度出發(fā)，或許會有不一樣的收獲。雖然在剛開始的時(shí)候，規(guī)范間距帶來的效果甚微，但隨著團(tuán)隊(duì)規(guī)模不斷擴(kuò)大、界面數(shù)量越來越多、內(nèi)容越來越復(fù)雜時(shí)就會發(fā)現(xiàn)，所有內(nèi)容統(tǒng)一間距規(guī)范，不管是構(gòu)建一致性界面視覺效果、還是對開發(fā)和設(shè)計(jì)師來說，既能提升用戶體驗(yàn)、還能提高團(tuán)隊(duì)的工作效率。

間距是否規(guī)范使用，決定著界面是否規(guī)整、信息傳達(dá)是否清晰，即便如此，間距也只是解決信息層級方式的其中之一，切不可讓其限制設(shè)計(jì)師的發(fā)揮和思考空間。制定設(shè)計(jì)規(guī)范有助于項(xiàng)目的高效運(yùn)轉(zhuǎn)，間距也好、色彩也罷，設(shè)計(jì)師依然需要從實(shí)際用戶場景出發(fā)，通過不斷的思考和經(jīng)驗(yàn)總結(jié)，打磨出更合理、更符合項(xiàng)目需求的設(shè)計(jì)規(guī)范。