不知道大家有沒(méi)有讀過(guò)?Robin Williams 的《寫(xiě)給大家看的設(shè)計(jì)書(shū)》，里面講了視覺(jué)設(shè)計(jì)的四大基本原則，我覺(jué)得這四大原則是最基本最基本的原則了，無(wú)論我們?cè)谧鍪裁搭愋偷脑O(shè)計(jì)，都應(yīng)該考慮到這四大基本原則。今天我就跟大家一起分享這四大基本原則吧～～

一、對(duì)齊原則

對(duì)齊原則是最基本也是最重要的原則。對(duì)齊能形成一定的規(guī)范性，讓人們看著很舒服，是整體界面不亂、整齊的基本。

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

不同的對(duì)齊方式帶給人們的視覺(jué)效果是不同的，對(duì)齊方式也影響用戶的閱讀性，所以一定要充分考慮對(duì)齊方式。

1.左對(duì)齊

最常見(jiàn)的對(duì)齊方式，也是人們最習(xí)慣的對(duì)齊方式。

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

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

左對(duì)齊版式

左對(duì)齊最常見(jiàn)、最習(xí)慣的對(duì)齊方式

2.右對(duì)齊

右對(duì)齊與左對(duì)齊相反，右側(cè)會(huì)有一條“隱形的線”，將文本信息或視覺(jué)元素連在一起。右對(duì)齊在文案怕版中永德很少、也不常見(jiàn)。因?yàn)橛覍?duì)齊會(huì)讓用戶閱讀很吃力、干預(yù)視覺(jué)效果。但是右對(duì)齊會(huì)用在表單的一些具體數(shù)據(jù)中，讓用戶快速的進(jìn)行數(shù)值對(duì)比。

右對(duì)齊版式

右對(duì)齊不常見(jiàn)

3.居中對(duì)齊

版面中的元素以中線為基準(zhǔn)對(duì)齊。居中對(duì)齊給人一種嚴(yán)肅與正式感。常用于海報(bào)設(shè)計(jì)，首頁(yè)的功能介紹文案以及數(shù)據(jù)、金融等類型的產(chǎn)品界面。

居中對(duì)齊版式

居中對(duì)齊海報(bào)中的應(yīng)用

居中對(duì)齊金融類界面中的使用

4.兩端對(duì)齊

版面中的元素拉伸或縮放與同一元素兩端對(duì)齊。兩端對(duì)齊通常用于大段落文字編排中，利于閱讀；在界面中能讓橫向的文案更具關(guān)聯(lián)性，易于用戶接受信息，也能使排版顯得更加工整和嚴(yán)謹(jǐn)。

兩端對(duì)齊版式

兩端對(duì)齊工整、嚴(yán)謹(jǐn)

二、對(duì)比原則

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

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

1.字體對(duì)比

在排版中，對(duì)信息進(jìn)行區(qū)分，可從字號(hào)、字重、字色、字形入手去區(qū)分不同的信息層級(jí)關(guān)系。比如重要的文字加租，字號(hào)更大，顏色更顯眼等。

從字顏色、大小進(jìn)行對(duì)比

從字大小、板式進(jìn)行對(duì)比

2.顏色對(duì)比

顏色對(duì)比是最直觀的一種對(duì)比方式。顏色對(duì)比包括：色相對(duì)比，飽和度對(duì)比，明度對(duì)比。在兩兩對(duì)抗中，通常會(huì)用紅、藍(lán)兩種顏色進(jìn)行對(duì)比。

顏色對(duì)比更明顯

顏色對(duì)比進(jìn)行信息區(qū)分

3. 大小對(duì)比

大小對(duì)比就是在同一畫(huà)面里利用大小兩種元素，以小襯大，或以大襯小，使主體得到突出。大小對(duì)比主要體現(xiàn)在面積或體積兩種維度上的對(duì)比。大小對(duì)比一定要大膽，不然達(dá)不到想要的對(duì)比效果。

大小對(duì)比

界面設(shè)計(jì)中，也是一樣，重要的按鈕大一些，次要按鈕小一些，形成大小對(duì)比。

按鈕大小比

三、親密性原則

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

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

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

橫向上控件的關(guān)聯(lián)性，采用柵格布局的方式來(lái)組織擺放元素和控件，保證布局的靈活性。數(shù)字2與步驟二具有一定的親密性，挨得比較近。步驟二與步驟三親密性更遠(yuǎn)，間距隔得更大。

水平空間親密性

水平空間親密性

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

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

不可板塊之間的距離不同，也代表親密性不同

不可板塊之間的距離不同，也代表親密性不同

總之，對(duì)于親密性高的，也就是關(guān)聯(lián)性強(qiáng)的就應(yīng)該挨得更近，關(guān)聯(lián)性不強(qiáng)、親密性差的就隔的更遠(yuǎn)。

四、重復(fù)原則

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

一致性的根本目的是統(tǒng)一元素，并增強(qiáng)視覺(jué)效果，降低用戶的學(xué)習(xí)成本，幫助用戶快速識(shí)別出這些元素之間的關(guān)聯(lián)性。對(duì)于相同組件，可以反復(fù)重復(fù)使用，不僅節(jié)約設(shè)計(jì)成本，也能節(jié)約開(kāi)發(fā)成本。

1.排版一致性

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

相同板塊的相同排布

相同的卡片式設(shè)計(jì)

2. 顏色復(fù)用

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

顏色的復(fù)用

顏色的復(fù)用

3. 控件復(fù)用

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

組件復(fù)用

組件復(fù)用

這四大原則是我們做界面設(shè)計(jì)最最基本的原則，希望大家以后在做界面設(shè)計(jì)時(shí)，一定遵守這些原則與規(guī)范。更多詳細(xì)的內(nèi)容可以查看學(xué)ui網(wǎng)，寫(xiě)得更全面。

轉(zhuǎn)載至：學(xué)UI網(wǎng)???Design System 界面設(shè)計(jì)原則-視覺(jué)篇