關(guān)于視覺設(shè)計的四個原則，可以通過該本文來了解一下。

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

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

?01 詳解四大設(shè)計原則

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

親密：

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

對齊：

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

【01】圖形和圖形之間的視覺對齊

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

【02】文字和文字之間的視覺對齊

文字和文字分為三種情況。一種是中文和中文的對齊，因為中文是屬于方塊字，所以物理對齊基本就可以了；第二種是英文和英文的對齊，如圖上所示，英文字體有些是屬于收縮感字體，所以我們這時就需要進行視覺的對齊，如果英文都不是收縮感字體的話，我們只需要進行物理的對齊；第三種就是中文和英文的對齊，處理的方式和第三種情況想類似。

【03】圖形和文字之間的視覺對齊

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

重復(fù)：

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

對比：

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

?02 案例操作

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

• 頭部區(qū)域給人很壓抑的感覺
• 常用的操作入口，應(yīng)該重點突出，但是現(xiàn)在卻很平
• 信息沒有做區(qū)分、版面顯得很空
• 菜單欄五個欄目太擁擠了，圖標不統(tǒng)一，而且選中的黃色在白色上面特別的不明顯

改造后的界面

親密和對齊原則的運用

重復(fù)和對比原則的運用

文章到此就已經(jīng)結(jié)束了，感謝大家的閱讀，希望能已經(jīng)講清楚《寫給大家看的設(shè)計書》中的四大原則的內(nèi)容。

本文由 @小凡 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自unsplash，基于CC0協(xié)議