非常干貨系列之Design System 界面UI設(shè)計(jì)原則

簡介

Robin Williams 的四大基本設(shè)計(jì)原則相信大家都不陌生，尤其在平面設(shè)計(jì)領(lǐng)域內(nèi)對它的應(yīng)用更為廣泛。在此基礎(chǔ)上，我結(jié)合中后臺產(chǎn)品的設(shè)計(jì)特點(diǎn)，將其縮寫為「兩對兩性」原則，即：對齊、對比、親密性、一致性。

每個優(yōu)秀的設(shè)計(jì)中都會應(yīng)用這些設(shè)計(jì)原則，并且各自是相互關(guān)聯(lián)的，只應(yīng)用某一個原則的情況很少。

作為設(shè)計(jì)體系的一部分，這套設(shè)計(jì)原則也為設(shè)計(jì)實(shí)踐提供了理論依據(jù)。本章引用中后臺產(chǎn)品設(shè)計(jì)中一些常見的案例，并以簡潔凝練的語言，分析總結(jié)了這四個基本原則的實(shí)際應(yīng)用方法和注意事項(xiàng)。

本章大綱如下：

一、對齊原則

任何元素都不能在頁面上隨意擺放，每一項(xiàng)都應(yīng)該與頁面上的另一項(xiàng)或多項(xiàng)存在某種視覺關(guān)聯(lián)。即使對齊的元素空間上是相互分開的，但在水平或垂直位置上也會有一條“隱形的線”把它們連在一起。

在界面設(shè)計(jì)中，將元素進(jìn)行對齊，既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。
 

1. 左對齊

左對齊是將文本信息或視覺元素沿垂直方向向左對齊的一種對齊方式，左側(cè)會有一條“隱形的線”，將彼此分離的文本或元素連在了一起。

文案類、列表類、表單類等排版會常用到左對齊的方式，這能讓用戶順著視覺流的方向，快速高效地接收信息或填寫表單內(nèi)容。

2. 右對齊

右對齊與左對齊相反，右側(cè)會有一條“隱形的線”，將文本信息或視覺元素連在一起。

在表格或表單中使用右對齊，可以實(shí)現(xiàn)快速對比數(shù)值大小，建議數(shù)值的格式保持統(tǒng)一。常規(guī)類數(shù)值可以統(tǒng)一使用千位符，如「1,024」；金額類數(shù)值可以保留小數(shù)點(diǎn)后兩位，如「¥88.00」。

3. 居中對齊

居中對齊是第三種常見的對齊方式，中間會有一條“隱形的線”，將文本信息或視覺元素連在一起。

居中對齊會形成一種更正式、更穩(wěn)重的外觀。盡管這是一種合理的對齊方式，但邊界是“軟”的，“對齊線”的強(qiáng)度也較弱，所以會顯得中規(guī)中矩。通常，首頁的功能介紹文案以及數(shù)據(jù)、金融等類型的產(chǎn)品界面會使用這種對齊方式。

4. 兩端對齊

兩端對齊也稱方形左右對齊，因?yàn)槲谋拘畔⒌淖笥覂啥司鶎R。

通常在商品信息結(jié)算、帶有輔助說明的列表等場景中會使用兩端對齊的方式，不僅能讓橫向的文案更具關(guān)聯(lián)性，易于用戶接受信息，也能使排版顯得更加工整和嚴(yán)謹(jǐn)。

二、對比原則

對比可以有效地增強(qiáng)頁面的視覺效果，同時也有助于元素之間建立一種有組織的層級結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。

需要注意的是，要想實(shí)現(xiàn)有效的對比，就應(yīng)當(dāng)拉開元素之間的差異，差異越大，對比效果越明顯。

1. 字體對比

字體對比包括：襯線體和無襯線體的對比，如 Georgia 和 PingFang；字重粗細(xì)的對比，如 Regular 和 Semibold；字號大小的對比，如 14px 與 20px；字體顏色的對比，如 #333 和 #999。

當(dāng)界面或模塊的標(biāo)題字體大而粗、且顏色較深，正文字體小而細(xì)、且顏色較淺時，信息層級關(guān)系更明顯，字體對比效果將更理想。

2. 顏色對比

顏色對比包括：色相對比，如 Red 和 Blue；飽和度對比，如 S100 和 S60；明度對比，如 B100 和 B60。

下圖中的百分比堆疊面積圖利用不同維度 (區(qū)域) 的色相對比，清晰的反應(yīng)每個數(shù)值所占百分比隨時間或類別變化的趨勢，對于分析自變量是大數(shù)據(jù)、時變數(shù)據(jù)、有序數(shù)據(jù)時各個指標(biāo)分量占比極為有用。

3. 大小對比

大小對比就是在同一畫面里利用大小兩種元素，以小襯大，或以大襯小，使主體得到突出。大小對比主要體現(xiàn)在面積或體積兩種維度上的對比。

在下圖的 Dialog 中，主體圖片的面積相對于商品信息文字的面積得到最大化突出，主次更加分明，視覺沖擊感也更加強(qiáng)烈。

4. 水平與垂直對比

水平與垂直對比，是指水平分布的視覺元素與垂直分布的視覺元素在橫縱方向上的對比。

在排版上，水平與垂直對比可以打破單一呆板的排列方式，在保持對齊的基礎(chǔ)上，豐富了界面元素的空間表現(xiàn)形式，減輕了用戶的疲勞感和無味感。

三、親密性原則

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，從而形成一個視覺單元；反之，則它們的距離就應(yīng)該越遠(yuǎn)，從而形成多個視覺單元。

親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層級一目了然。

1. 水平空間關(guān)系

為了自適應(yīng)不同尺寸的屏幕，同時保持橫向上控件的關(guān)聯(lián)性，因而采用柵格布局的方式來組織擺放元素和控件，保證布局的靈活性。

同一控件內(nèi)部的元素，橫向間距上也會有“親疏”之分，以體現(xiàn)組織性。

2. 垂直空間關(guān)系

在復(fù)雜的頁面或模塊設(shè)計(jì)中，縱向上需要使用高、中、低三種規(guī)格的間距來區(qū)分信息的層級關(guān)系?；凇冈g距」8px，三種規(guī)格可以是 24px (高間距)、16px (中間距)、8px (低間距)。

注：縱向間距公式：y=8+8×n。其中 y 是縱向間距，8 是元間距，n≥0。

另外，增加「分割線」等視覺元素，也是有效劃分頁面結(jié)構(gòu)和信息層級的常用手段。

四、一致性原則

可以把「一致性」理解為「復(fù)用」，相同的元素在整個界面中不斷復(fù)用，復(fù)用元素可以是線框、顏色、控件、文本格式、空間間距、設(shè)計(jì)要素等等。

一致性的根本目的是統(tǒng)一元素，并增強(qiáng)視覺效果，降低用戶的學(xué)習(xí)成本，幫助用戶快速識別出這些元素之間的關(guān)聯(lián)性。

1. 線框復(fù)用

同類信息的載體可以是相同粗細(xì)的線框、相同投影的卡片、或是相同顏色的底面，注意保持樣式屬性值的一致，以及上下左右間距的一致。

2. 顏色復(fù)用

在界面設(shè)計(jì)中，相同的功能提示、圖表數(shù)據(jù)、文字層級、按鈕、圖標(biāo)、分割線、背景等，應(yīng)使用相同的顏色，保持色彩體系上的統(tǒng)一，避免同類型的元素使用不同顏色給用戶造成認(rèn)知困擾。

3. 控件復(fù)用

使用統(tǒng)一的導(dǎo)航、按鈕、彈框、圖表、選擇器等控件，既可以提高設(shè)計(jì)者和開發(fā)者的工作效率，避免重復(fù)造輪子的現(xiàn)象出現(xiàn)，又可以保持界面設(shè)計(jì)的一致性，降低用戶的理解成本，提高使用效率。

4. 格式復(fù)用

相同類型、維度或級別的文案，應(yīng)使用相同的展現(xiàn)格式。注意標(biāo)題、正文、輔助信息的層級關(guān)系，使用統(tǒng)一的對齊方式，讓關(guān)聯(lián)性高的信息之間形成一個視覺整體。

小結(jié)

1. 對齊

任何元素都不能在頁面上隨意擺放，每一項(xiàng)都應(yīng)該與頁面上的另一項(xiàng)或多項(xiàng)存在某種視覺關(guān)聯(lián)。

2. 對比

對比可以有效地增強(qiáng)頁面的視覺效果，建立一種有組織的層級結(jié)構(gòu)，如果想讓元素不同，那就讓它們截然不同。

3. 親密性

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，從而形成一個視覺單元，這有助于組織信息，減少混亂。

4. 一致性

一致性的根本目的是統(tǒng)一元素，并增強(qiáng)視覺效果，降低用戶的學(xué)習(xí)成本，幫助用戶快速識別出這些元素之間的關(guān)聯(lián)性。

                                                                                                                      本篇文章來源于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系小編以刪除。