要想成為一個(gè)優(yōu)秀的設(shè)計(jì)師，就必須要知道設(shè)計(jì)的四大基本原則是什么？

設(shè)計(jì)的四大原則是：親密性、對齊、重復(fù)、對比

一、親密性（Proximity）

將相關(guān)的項(xiàng)組織在一起，移動(dòng)這些項(xiàng)，使他們的物理位置相互靠近，這樣一來，相關(guān)的項(xiàng)將被看作凝聚為一體的一個(gè)組，而不再是一堆彼此無關(guān)的元素。

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個(gè)視覺單元；反之，則它們的距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。

1、縱向間距關(guān)系

通過『小號間距』、『中號間距』、『大號間距』這三種規(guī)格來劃分信息層次。

這三種規(guī)格分別為：20px（小號間距）、24px（中號間距）、32px（大號間距）

在這三種規(guī)格不適用的情況下，可以通過加減『基礎(chǔ)間距』的倍數(shù)，或者增加元素來拉開信息層次。

公式：Y=4+4 x n。其中，n>=0，y 是縱向間距，4 是『基礎(chǔ)間距』

2、橫向間距關(guān)系

為了適用不同尺寸的屏幕，在橫向采用柵格布局來排布組件，從而保證布局的靈活性。

在一個(gè)組件內(nèi)部，元素的橫向間距也應(yīng)該有所不同。

二、對齊（Alignment）

任何元素都不能在頁面上隨意安放。每一項(xiàng)都應(yīng)當(dāng)與頁面上的某個(gè)內(nèi)容存在某種聯(lián)系。如果頁面上的一些項(xiàng)是對齊的，會(huì)得到一個(gè)更內(nèi)聚的單元，它們之間會(huì)有一條看不見的線把彼此連在一起。

正如『格式塔學(xué)派』中的連續(xù)律（Law of Continuity）所描述的，在知覺過程中人們往往傾向于使知覺對象的直線繼續(xù)成為直線，使曲線繼續(xù)成為曲線。在界面設(shè)計(jì)中，將元素進(jìn)行對齊，既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。

1、文案類對齊

如果頁面的字段或段落較短、較散時(shí)，需要確定一個(gè)統(tǒng)一的視覺起點(diǎn)。

正確示例：

標(biāo)題和正文左對齊，使用了一個(gè)視覺起點(diǎn)。

錯(cuò)誤示例：

標(biāo)題和正文使用了兩個(gè)視覺起點(diǎn)，不推薦該種對齊方式，除非刻意強(qiáng)調(diào)兩者區(qū)別。

2、表單類對齊

冒號對齊（右對齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項(xiàng)，從而提高填寫效率。

3、數(shù)字類對齊

為了快速對比數(shù)值大小，建議所有數(shù)值取相同有效位數(shù)，并且右對齊。

三、重復(fù)（Repetition）

設(shè)計(jì)的某些方面需要在整個(gè)作品中重復(fù)。重復(fù)元素可能是一種粗字體、一條粗線、某個(gè)項(xiàng)目符號、顏色、設(shè)計(jì)要素、某種格式、空間關(guān)系等?？梢园阎貜?fù)認(rèn)為是“一致性”。

重復(fù)元素可以是一條粗線、一種線框，某種相同的顏色、設(shè)計(jì)要素、設(shè)計(jì)風(fēng)格，某種格式、空間關(guān)系等。

重復(fù)元素：

1.粗字體

2.細(xì)字體

3.方塊項(xiàng)目符號

4.縮進(jìn)

5.間隔

6.對齊

線框重復(fù)示例：

文案格式重復(fù)示例：

設(shè)計(jì)要素重復(fù)示例：

卡片樣式重復(fù)示例：

相同的元素在整個(gè)界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。

四、對比（Contrast）

頁面上的不同元素之間要有對比，達(dá)到吸引讀者的效果。如果兩個(gè)項(xiàng)不完全相同，那就應(yīng)當(dāng)使之不同，而且應(yīng)當(dāng)是截然不同。對比不僅可以用來吸引眼球，還可以組織信息、清晰層級、在頁面上指引讀者，并且制造焦點(diǎn)。可以采用多種方式產(chǎn)生對比，如字體大小對比、字體粗細(xì)對比、冷暖色對比等等

對比是增加視覺效果最有效方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。

注：要實(shí)現(xiàn)有效的對比，對比就必須強(qiáng)烈，切不可畏畏縮縮。

1、主次關(guān)系對比

為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷， 來突出其中一項(xiàng)相對更重要或者更高頻的操作。

注意：突出的方法，不局限于強(qiáng)化重點(diǎn)項(xiàng)，也可以是弱化其他項(xiàng)。

在一些需要用戶慎重決策的場景中，系統(tǒng)應(yīng)該保持中立，不能替用戶或者誘導(dǎo)用戶做出判斷。

2、總分關(guān)系對比

通過調(diào)整排版、字體、大小等方式來突出層次感，區(qū)分總分關(guān)系，使得頁面更具張力和節(jié)奏感。

3、狀態(tài)關(guān)系對比

通過改變顏色、增加輔助形狀等方法來實(shí)現(xiàn)狀態(tài)關(guān)系的對比，以便用戶更好的區(qū)分信息。

常見類型有『靜態(tài)對比』、『動(dòng)態(tài)對比』。

總結(jié)

親密性：如果項(xiàng)彼此相關(guān)，就把它們分在一個(gè)組，建立更近的親密性。這有助于組織信息、減少混亂、為讀者提供清晰的內(nèi)容結(jié)構(gòu)。

對齊：頁面上的任何東西都不能隨意安放，每個(gè)元素都應(yīng)當(dāng)與頁面上的另一個(gè)元素有某種視覺聯(lián)系。這樣能建立一種清晰、精巧而且清爽的外觀。

重復(fù)：讓設(shè)計(jì)中的視覺要素在整個(gè)作品中重復(fù)出現(xiàn)。可以重復(fù)顏色、形狀、材質(zhì)、空間關(guān)系、線寬、字體、大小、圖片等等。這樣既能增加條理性，還可以加強(qiáng)統(tǒng)一性。

對比：要避免頁面上的元素太過相似，如果元素不相同，那就干脆讓它們截然不同。對比能讓頁面引人注目，也更能使頁面內(nèi)容結(jié)構(gòu)清晰易讀。

在設(shè)計(jì)中，這四大原則不是獨(dú)立使用的，而且互相嵌套，你中有我，我中有你...

在打破規(guī)則之前，你必須清楚規(guī)則是什么？

最后，有一個(gè)觀點(diǎn)讓我印象深刻：做設(shè)計(jì)不要畏畏縮縮。