要想成為一個優(yōu)秀的設(shè)計師，就必須要知道設(shè)計的四大基本原則是什么？
設(shè)計的四大原則是：親密性、對齊、重復(fù)、對比
一、親密性（Proximity）
將相關(guān)的項組織在一起，移動這些項，使他們的物理位置相互靠近，這樣一來，相關(guān)的項將被看作凝聚為一體的一個組，而不再是一堆彼此無關(guān)的元素。
如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個視覺單元；反之，則它們的距離就應(yīng)該越遠(yuǎn)，也越像多個視覺單元。親密性的根本目的是實現(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)系
為了適用不同尺寸的屏幕，在橫向采用柵格布局來排布組件，從而保證布局的靈活性。
在一個組件內(nèi)部，元素的橫向間距也應(yīng)該有所不同。
二、對齊（Alignment）
任何元素都不能在頁面上隨意安放。每一項都應(yīng)當(dāng)與頁面上的某個內(nèi)容存在某種聯(lián)系。如果頁面上的一些項是對齊的，會得到一個更內(nèi)聚的單元，它們之間會有一條看不見的線把彼此連在一起。
正如『格式塔學(xué)派』中的連續(xù)律（Law of Continuity）所描述的，在知覺過程中人們往往傾向于使知覺對象的直線繼續(xù)成為直線，使曲線繼續(xù)成為曲線。在界面設(shè)計中，將元素進(jìn)行對齊，既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。
1、文案類對齊
如果頁面的字段或段落較短、較散時，需要確定一個統(tǒng)一的視覺起點。
正確示例：
標(biāo)題和正文左對齊，使用了一個視覺起點。
錯誤示例：
標(biāo)題和正文使用了兩個視覺起點，不推薦該種對齊方式，除非刻意強調(diào)兩者區(qū)別。
2、表單類對齊
冒號對齊（右對齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。
3、數(shù)字類對齊
為了快速對比數(shù)值大小，建議所有數(shù)值取相同有效位數(shù)，并且右對齊。
三、重復(fù)（Repetition）
設(shè)計的某些方面需要在整個作品中重復(fù)。重復(fù)元素可能是一種粗字體、一條粗線、某個項目符號、顏色、設(shè)計要素、某種格式、空間關(guān)系等?？梢园阎貜?fù)認(rèn)為是“一致性”。
重復(fù)元素可以是一條粗線、一種線框，某種相同的顏色、設(shè)計要素、設(shè)計風(fēng)格，某種格式、空間關(guān)系等。
重復(fù)元素：
1.粗字體
2.細(xì)字體
3.方塊項目符號
4.縮進(jìn)
5.間隔
6.對齊
線框重復(fù)示例：
文案格式重復(fù)示例：
設(shè)計要素重復(fù)示例：
卡片樣式重復(fù)示例：
相同的元素在整個界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。
四、對比（Contrast）
頁面上的不同元素之間要有對比，達(dá)到吸引讀者的效果。如果兩個項不完全相同，那就應(yīng)當(dāng)使之不同，而且應(yīng)當(dāng)是截然不同。對比不僅可以用來吸引眼球，還可以組織信息、清晰層級、在頁面上指引讀者，并且制造焦點。可以采用多種方式產(chǎn)生對比，如字體大小對比、字體粗細(xì)對比、冷暖色對比等等
對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。
注：要實現(xiàn)有效的對比，對比就必須強烈，切不可畏畏縮縮。
1、主次關(guān)系對比
為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷， 來突出其中一項相對更重要或者更高頻的操作。
注意：突出的方法，不局限于強化重點項，也可以是弱化其他項。
在一些需要用戶慎重決策的場景中，系統(tǒng)應(yīng)該保持中立，不能替用戶或者誘導(dǎo)用戶做出判斷。
2、總分關(guān)系對比
通過調(diào)整排版、字體、大小等方式來突出層次感，區(qū)分總分關(guān)系，使得頁面更具張力和節(jié)奏感。
3、狀態(tài)關(guān)系對比
通過改變顏色、增加輔助形狀等方法來實現(xiàn)狀態(tài)關(guān)系的對比，以便用戶更好的區(qū)分信息。
常見類型有『靜態(tài)對比』、『動態(tài)對比』。
總結(jié)
親密性：如果項彼此相關(guān)，就把它們分在一個組，建立更近的親密性。這有助于組織信息、減少混亂、為讀者提供清晰的內(nèi)容結(jié)構(gòu)。
對齊：頁面上的任何東西都不能隨意安放，每個元素都應(yīng)當(dāng)與頁面上的另一個元素有某種視覺聯(lián)系。這樣能建立一種清晰、精巧而且清爽的外觀。
重復(fù)：讓設(shè)計中的視覺要素在整個作品中重復(fù)出現(xiàn)?？梢灾貜?fù)顏色、形狀、材質(zhì)、空間關(guān)系、線寬、字體、大小、圖片等等。這樣既能增加條理性，還可以加強統(tǒng)一性。
對比：要避免頁面上的元素太過相似，如果元素不相同，那就干脆讓它們截然不同。對比能讓頁面引人注目，也更能使頁面內(nèi)容結(jié)構(gòu)清晰易讀。
在設(shè)計中，這四大原則不是獨立使用的，而且互相嵌套，你中有我，我中有你...
在打破規(guī)則之前，你必須清楚規(guī)則是什么？
最后，有一個觀點讓我印象深刻：做設(shè)計不要畏畏縮縮。
聯(lián)系客服
