在很多的時(shí)候我們做設(shè)計(jì)的時(shí)候都會(huì)忽略一些基本的設(shè)計(jì)原則，很多設(shè)計(jì)師即使做了很多年的設(shè)計(jì)也不能完全說清楚設(shè)計(jì)的原則，設(shè)計(jì)全憑感覺，至于為什么這樣去設(shè)計(jì)很難有很合理的解釋。

俗話說九層之臺(tái)始于壘土，可見基礎(chǔ)是多么的重要，設(shè)計(jì)也是一樣，我們都需要打好扎實(shí)的基礎(chǔ)。而今天說要說的設(shè)計(jì)原則是根據(jù)著名圖書《寫給大家看的設(shè)計(jì)》一書來寫的。

01/

詳解四大設(shè)計(jì)原則

今天為大家詳細(xì)講解《寫給大家看的設(shè)計(jì)》一書中提到四大基本原則：親密、對(duì)齊、重復(fù)、對(duì)比

親密：

指的是將彼此相關(guān)聯(lián)的項(xiàng)，在空間的角度上更靠近些。比如微信在發(fā)現(xiàn)頁(yè)面中相似的類目靠的更近，我們的心理默認(rèn)認(rèn)為靠的更加近的是同一類別的的信息；相反的，如果沒有運(yùn)用親密性的原則，整個(gè)微信的信息就看起來非常的混亂。

對(duì)齊：

對(duì)齊的根本目的是使頁(yè)面統(tǒng)一而且有條理。然而對(duì)齊分為物理對(duì)齊和視覺對(duì)齊，物理對(duì)齊指的是我們可以用物理直線來衡量是否對(duì)齊；而視覺對(duì)齊指視覺感官上的對(duì)齊，它基本上所用在的地方是一些物理對(duì)齊不能帶給我們對(duì)齊的感覺的特殊情況之下。那么視覺對(duì)齊一般在什么情況下我們能用到呢？

【01】圖形和圖形之間的視覺對(duì)齊

一般出現(xiàn)的是在一個(gè)為具有收縮感而另一個(gè)不具收縮感的情況之下，比如說正方形和圓形。那么如何解決這個(gè)問題呢，我們只需要遵循以下的原則：將有收縮感的物體稍微放大一點(diǎn)可以和沒有收縮感的物體達(dá)到平衡。

【02】文字和文字之間的視覺對(duì)齊

文字和文字分為三種情況。一種是中文和中文的對(duì)齊，因?yàn)橹形氖菍儆诜綁K字，所以物理對(duì)齊基本就可以了；第二種是英文和英文的對(duì)齊，如圖上所示，英文字體有些是屬于收縮感字體，所以我們這時(shí)就需要進(jìn)行視覺的對(duì)齊，如果英文都不是收縮感字體的話，我們只需要進(jìn)行物理的對(duì)齊；第三種就是中文和英文的對(duì)齊，處理的方式和第三種情況想類似。

【03】圖形和文字之間的視覺對(duì)齊

圖形和文字之間的對(duì)齊分為兩種情況。一種是權(quán)重比較小的線條圖形和文字的對(duì)齊，這種情況我們只需要將具有收縮感的圖形放大或者移動(dòng)幾個(gè)像素就可以達(dá)到視覺的平衡。另一種是權(quán)重比較大的塊狀圖形，這種情況下我們只需要進(jìn)行物理對(duì)齊就行了，因?yàn)閴K狀的物理權(quán)重比文字大，可以彌補(bǔ)上視覺的不平衡感。

重復(fù)：

重復(fù)的目的是統(tǒng)一，并增強(qiáng)視覺效果，但要避免過多地重復(fù)一個(gè)元素，讓人感覺不太舒服。比如盒馬APP首頁(yè)的界面，在盒我搶的版塊就運(yùn)用了重復(fù)的原則，整體看起來非常的統(tǒng)一、和諧。

對(duì)比：

對(duì)比效果可以通過字體選擇、線寬、顏色、形狀等來增加對(duì)比重要的是對(duì)比一定要強(qiáng)烈。比如這張banner就運(yùn)用了文字對(duì)比和顏色對(duì)比的原則，banner的信息層次就區(qū)分的非常明顯，很好的展現(xiàn)了要表現(xiàn)的主體內(nèi)容。

02/

案例操作

說完了原則，我就帶大家一起來進(jìn)行案例的實(shí)際操作來展示這四大原則的用法，首先我們先分析這個(gè)界面存在的一些問題：

   頭部區(qū)域給人很壓抑的感覺

   常用的操作入口，應(yīng)該重點(diǎn)突出，但是現(xiàn)在卻很平

   信息沒有做區(qū)分、版面顯得很空

菜單欄五個(gè)欄目太擁擠了，圖標(biāo)不統(tǒng)一，而且選中的黃色在白色上面特別的不明顯

改造后的界面

親密和對(duì)齊原則的運(yùn)用

重復(fù)和對(duì)比原則的運(yùn)用