視覺設(shè)計(jì)的基本原理很多時(shí)候具有很高的復(fù)用性，即使工作多年，這些原理的東西依然用的上，不會過時(shí)�；�礎(chǔ)理論要深入骨髓，融入到自己的日常設(shè)計(jì)中去。本文作者從自身設(shè)計(jì)工作出發(fā)，分享了6大視覺設(shè)計(jì)原理，供大家一些參考學(xué)習(xí)。

當(dāng)我在大學(xué)學(xué)習(xí)視覺設(shè)計(jì)時(shí)，我著迷于設(shè)計(jì)師們的魔力。他們能用設(shè)計(jì)讓人按一定的方式去思考、感知和行動。

作為用戶體驗(yàn)設(shè)計(jì)師，我在過去的十年中幫助許多產(chǎn)品發(fā)展到了百萬的用戶和收益。我仍然在運(yùn)用許多大學(xué)一年級時(shí)學(xué)到的基本知識——觀察形狀、布局，以及怎樣的信息編排方式會影響人們使用我的產(chǎn)品。

我們都知道像圖形、線條等這樣的視覺設(shè)計(jì)元素，我們同時(shí)也將像對比、重心、節(jié)奏等這樣的術(shù)語植入腦中。作為一名曾受過訓(xùn)練的平面設(shè)計(jì)師，我將分享一些我學(xué)過的，并且仍在使用的幾個(gè)細(xì)微知識點(diǎn)。它們不是那些常掛在嘴邊的大道理，而是一些實(shí)用的小技巧。我只是希望通過分享能讓整個(gè)設(shè)計(jì)圈的實(shí)力水平更上層樓！

01/

重力

重力的概念經(jīng)常運(yùn)用在物體和圖形上，也包括視覺設(shè)計(jì)。這也許聽上去很奇怪，不過這里說的可不是現(xiàn)實(shí)生活中的物理重力，它也不能把一個(gè)二維物體往下拉動。但是在我們的潛意識中重力的概念已經(jīng)非常根深蒂固了，所以我們也把它轉(zhuǎn)化到了二維物體上。以下圖為例，這個(gè)圓球讓人感覺隨時(shí)都有可能從上方降落，讓人有點(diǎn)惴惴不安。

現(xiàn)在看看下圖這個(gè)相反的圖像

這個(gè)結(jié)構(gòu)的圓球應(yīng)該不會讓人覺得它會往下落了，而是更像是穩(wěn)穩(wěn)停在頁面的底部。讓人看起來很安心。

經(jīng)驗(yàn)總結(jié)：當(dāng)你面對視覺上有重物感的設(shè)計(jì)時(shí)，把它設(shè)計(jì)在頂部會使人感到壓抑和不安（當(dāng)然，除非你是故意而為之）

02/

閱讀順序

在大多數(shù)情況下，人們的閱讀順序是從左到右，從上到下的。正因?yàn)檫@樣，左邊的物體一般被認(rèn)為是將要進(jìn)入到畫面中，右邊的物體則被認(rèn)為是離開。

上圖的左側(cè)有一個(gè)圓。因?yàn)槭芪覀冮喿x順序的影響，這個(gè)圓看上去像要進(jìn)入這個(gè)畫面。下圖的圓則感覺像是要出去。

你也可以用同樣的方式去傳遞一些特定的情感。比如說怎么讓一個(gè)物體看起來有偷偷張望的感覺？你可以把畫面設(shè)計(jì)成下圖的樣子：

反之，想傳遞一個(gè)物體（或角色）落荒而逃的感覺？（彩云注：這個(gè)概念可以用在一些情感化設(shè)計(jì)的頁面，比如空頁面，帶品牌形象的卡片設(shè)計(jì)之類的。）

03/

閱讀優(yōu)先級

由于受閱讀順序的影響，我們自然而然地會先注意左上角的物體，然后視線會移動到右下角以及接下來其他的東西。就算所有的東西在形狀、顏色或大小上一致，根據(jù)物體擺放位置的不同，它們的重要性也會不一樣（也許你想讓用戶先看到標(biāo)題，然后才是內(nèi)容）。

讓我們看看下圖的例子：

如果你從小長大的環(huán)境用的是從左到右，從上到下的閱讀順序，那么你很有可能是先看到左上角的圓，然后才是右下角的。

（彩云注：將重要的內(nèi)容按閱讀習(xí)慣進(jìn)行編排，轉(zhuǎn)化效果更好）

04/

視覺緊張感

我曾經(jīng)把這種感覺描述為對身體緊張狀態(tài)的一種詮釋和擴(kuò)大化。這就像你看到滿滿的一杯液體被放在桌子的邊緣。

視覺上的緊張感經(jīng)常是不經(jīng)意的，設(shè)計(jì)師們也不是故意把不同的形狀湊在一起去營造一種緊張氣氛。這往往是草率所致。讓我們來看看下圖：

是不是覺得不舒服？這里標(biāo)記出了所有的緊張點(diǎn)。

刻意地運(yùn)用這種視覺緊張感可以吸引別人的眼球，并且制造一種焦慮氣氛。也許你設(shè)計(jì)的是一張游行示威海報(bào)，又或者你想引起人們對一些事物的注意。在那樣的情形下，確保那些緊張感是有意而為之的，而不是看下來像個(gè)失誤。

同樣的構(gòu)圖下，這個(gè)設(shè)計(jì)有意地讓緊張感集中在了一個(gè)特別的位置。

05/

動態(tài) vs. 靜態(tài)

靜態(tài)構(gòu)圖時(shí)常讓人感到無聊。一個(gè)簡單的優(yōu)化方法是傾斜它的水平線，讓構(gòu)圖看起來更生動。下圖是一個(gè)有些毫無生氣的靜態(tài)圖：

現(xiàn)在把它的水平線傾斜后，整個(gè)都市風(fēng)光看起來更具動感了。

如果想讓構(gòu)圖更有活力，可以利用物體的邊緣特點(diǎn)讓圖形往畫面外延伸。參考如下的成角透視構(gòu)圖：

06/

利用好負(fù)空間

你可以用具有方向性的形狀把負(fù)空間激活到一個(gè)特定點(diǎn)。方向力過小的話，和負(fù)空間之間起到的效果不會太大。下圖是一個(gè)把你的注意力往上吸引到右邊的圖形例子。

但問題在于，當(dāng)你的視線到達(dá)頁面最右上角時(shí)，你的注意力也差不多到頭了。右上角的空間沒有足夠讓你的眼球定格在那的吸引力。那塊空間仍然是靜態(tài)的。不過如果你嘗試裁剪圖片大小或按比例重新排版的話：

圖像周圍的空間一瞬間變得有意義且復(fù)活了。敲重點(diǎn)！如果你想讓人們的視線在畫面上游動，那么留心一下靜態(tài)負(fù)空間方面的內(nèi)容。一個(gè)簡單的辦法是只需用你的手指指著這個(gè)物體，把它換到你的視線會自然移動到的活動范圍之內(nèi)。可以嘗試著調(diào)整你的排版 （ 也許是圖形或邊緣線 ） 讓負(fù)空間活躍起來。

作為一名設(shè)計(jì)師，不要受限于CSS, HTML或其他任何技術(shù)工具的約束。它們不應(yīng)成為你理想中完美構(gòu)圖的絆腳石。這些視覺原理適用于任何載體， 像印刷、數(shù)碼、網(wǎng)頁等等。它們簡單明了地體現(xiàn)了我們的大腦和眼睛是如何在任何形式下感知視覺信息的。