前言

近年來棍厌，「設(shè)計規(guī)范」逐漸被「設(shè)計體系」或「設(shè)計語言」的概念重塑悼粮≈让基于一套架構(gòu)嚴謹砚亭、規(guī)則統(tǒng)一的體系框架，產(chǎn)品表現(xiàn)層面的設(shè)計工作可以逐漸實現(xiàn)模塊化運作豺旬，從而讓視覺設(shè)計工作變得更加高效钠惩。

「Design System 系列」將會從設(shè)計觀、設(shè)計原則族阅、設(shè)計形式三個方向入手篓跛，由深到淺、由整到分地演繹設(shè)計體系對整個產(chǎn)品迭代過程的價值和意義坦刀。有正確的設(shè)計觀作判斷好壞的標(biāo)準(zhǔn)愧沟，并結(jié)合行之有效的設(shè)計原則作指引，才能制定出最優(yōu)的設(shè)計方案鲤遥。

視覺設(shè)計原則

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

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

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

本章大綱如下：

思維導(dǎo)圖

一指郁、對齊原則

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

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

1. 左對齊

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

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

左對齊

2. 右對齊

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

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

右對齊

3. 居中對齊

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

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

居中對齊

4. 兩端對齊

兩端對齊也稱方形左右對齊娇未，因為文本信息的左右兩端均對齊。

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

兩端對齊

二蝶棋、對比原則

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

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

1. 字體對比

字體對比包括：襯線體和無襯線體的對比决侈，如 Georgia 和 PingFang；字重粗細的對比京闰，如 Regular 和 Semibold颜及；字號大小的對比，如 14px 與 20px蹂楣；字體顏色的對比俏站，如 #333 和 #999。

當(dāng)界面或模塊的標(biāo)題字體大而粗痊土、且顏色較深肄扎，正文字體小而細、且顏色較淺時赁酝，信息層級關(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 中政鼠，主體圖片的面積相對于商品信息文字的面積得到最大化突出风瘦，主次更加分明队魏，視覺沖擊感也更加強烈公般。

大小對比

4. 水平與垂直對比

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

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

水平與垂直對比

三呢诬、親密性原則

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

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

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

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

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

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

水平空間關(guān)系 2

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

在復(fù)雜的頁面或模塊設(shè)計中唬渗，縱向上需要使用高、中拢锹、低三種規(guī)格的間距來區(qū)分信息的層級關(guān)系谣妻。基于「元間距」8px卒稳，三種規(guī)格可以是 24px (高間距)蹋半、16px (中間距)、8px (低間距)充坑。

縱向間距公式：y=8+8×n减江。其中 y 是縱向間距染突，8 是元間距，n≥0辈灼。

垂直空間關(guān)系 1

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

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

四司志、一致性原則

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

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

1. 線框復(fù)用

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

線框復(fù)用

2. 顏色復(fù)用

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

顏色復(fù)用

3. 控件復(fù)用

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

控件復(fù)用

4. 格式復(fù)用

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

格式復(fù)用

本章小結(jié)

對齊

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

對比

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

親密性

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

一致性

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

到此 「Design System 系列」的視覺篇就要告一段落了轨淌，后續(xù)可能會再寫個交互篇迂烁。如果你有什么建議或疑問，歡迎給我留言递鹉！也可以關(guān)注我的公眾號「彭彭設(shè)計筆記」盟步，我會不定期更新設(shè)計類精品文章。

另外躏结，如果這篇文章對您有一點點幫助却盘，您都可以隨意打賞，贈人玫瑰，手留余香嘛~

最后谷炸，感謝讀完這篇文章的你北专！下期見～