起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計師必須掌握的6大視覺設計原理
導讀：視覺設計的基本原理很多時候具有很高的復用性，即使工作多年，這些原理的東西依然用的上，不會過時?；A理論要深入骨髓，融入到自己的日常設計中去。本文作者從自身設計工作出發，分享了6大視覺設計原理，供大家一些參考學習。
當我在大學學習視覺設計時，我著迷于設計師們的魔力。他們能用設計讓人按一定的方式去思考、感知和行動。
作為用戶體驗設計師，我在過去的十年中幫助許多產品發展到了百萬的用戶和收益。我仍然在運用許多大學一年級時學到的基本知識——觀察形狀、布局，以及怎樣的信息編排方式會影響人們使用我的產品。
我們都知道像圖形、線條等這樣的視覺設計元素，我們同時也將像對比、重心、節奏等這樣的術語植入腦中。作為一名曾受過訓練的平面設計師，我將分享一些我學過的，并且仍在使用的幾個細微知識點。它們不是那些常掛在嘴邊的大道理，而是一些實用的小技巧。我只是希望通過分享能讓整個設計圈的實力水平更上層樓！
01 重力
重力的概念經常運用在物體和圖形上，也包括視覺設計。這也許聽上去很奇怪，不過這里說的可不是現實生活中的物理重力，它也不能把一個二維物體往下拉動。但是在我們的潛意識中重力的概念已經非常根深蒂固了，所以我們也把它轉化到了二維物體上。以下圖為例，這個圓球讓人感覺隨時都有可能從上方降落，讓人有點惴惴不安。
現在看看下圖這個相反的圖像
這個結構的圓球應該不會讓人覺得它會往下落了，而是更像是穩穩停在頁面的底部。讓人看起來很安心。
經驗總結：當你面對視覺上有重物感的設計時，把它設計在頂部會使人感到壓抑和不安（當然，除非你是故意而為之）
02 閱讀順序
在大多數情況下，人們的閱讀順序是從左到右，從上到下的。正因為這樣，左邊的物體一般被認為是將要進入到畫面中，右邊的物體則被認為是離開。
上圖的左側有一個圓。因為受我們閱讀順序的影響，這個圓看上去像要進入這個畫面。下圖的圓則感覺像是要出去。
你也可以用同樣的方式去傳遞一些特定的情感。比如說怎么讓一個物體看起來有偷偷張望的感覺？你可以把畫面設計成下圖的樣子：
反之，想傳遞一個物體（或角色）落荒而逃的感覺？（彩云注：這個概念可以用在一些情感化設計的頁面，比如空頁面，帶品牌形象的卡片設計之類的。）
03 閱讀優先級
由于受閱讀順序的影響，我們自然而然地會先注意左上角的物體，然后視線會移動到右下角以及接下來其他的東西。就算所有的東西在形狀、顏色或大小上一致，根據物體擺放位置的不同，它們的重要性也會不一樣（也許你想讓用戶先看到標題，然后才是內容）。
讓我們看看下圖的例子：
如果你從小長大的環境用的是從左到右，從上到下的閱讀順序，那么你很有可能是先看到左上角的圓，然后才是右下角的。
（彩云注：將重要的內容按閱讀習慣進行編排，轉化效果更好）
04 視覺緊張感
我曾經把這種感覺描述為對身體緊張狀態的一種詮釋和擴大化。這就像你看到滿滿的一杯液體被放在桌子的邊緣。
視覺上的緊張感經常是不經意的，設計師們也不是故意把不同的形狀湊在一起去營造一種緊張氣氛。這往往是草率所致。讓我們來看看下圖：
是不是覺得不舒服？這里標記出了所有的緊張點。
刻意地運用這種視覺緊張感可以吸引別人的眼球，并且制造一種焦慮氣氛。也許你設計的是想引起人們對一些事物的注意。在那樣的情形下，確保那些緊張感是有意而為之的，而不是看下來像個失誤。
同樣的構圖下，這個設計有意地讓緊張感集中在了一個特別的位置。
05 動態 vs. 靜態
靜態構圖時常讓人感到無聊。一個簡單的優化方法是傾斜它的水平線，讓構圖看起來更生動。下圖是一個有些毫無生氣的靜態圖：
現在把它的水平線傾斜后，整個都市風光看起來更具動感了。
如果想讓構圖更有活力，可以利用物體的邊緣特點讓圖形往畫面外延伸。參考如下的成角透視構圖：
06 利用好負空間
你可以用具有方向性的形狀把負空間激活到一個特定點。方向力過小的話，和負空間之間起到的效果不會太大。下圖是一個把你的注意力往上吸引到右邊的圖形例子。
但問題在于，當你的視線到達頁面最右上角時，你的注意力也差不多到頭了。右上角的空間沒有足夠讓你的眼球定格在那的吸引力。那塊空間仍然是靜態的。不過如果你嘗試裁剪圖片大小或按比例重新排版的話：
圖像周圍的空間一瞬間變得有意義且復活了。敲重點！如果你想讓人們的視線在畫面上游動，那么留心一下靜態負空間方面的內容。一個簡單的辦法是只需用你的手指指著這個物體，把它換到你的視線會自然移動到的活動范圍之內。可以嘗試著調整你的排版 （ 也許是圖形或邊緣線 ） 讓負空間活躍起來。
作為一名設計師，不要受限于CSS, HTML或其他任何技術工具的約束。它們不應成為你理想中完美構圖的絆腳石。這些視覺原理適用于任何載體， 像印刷、數碼、網頁等等。它們簡單明了地體現了我們的大腦和眼睛是如何在任何形式下感知視覺信息的。
原文：https://uxdesign.cc/6-visual-design-principles-that-ux-designers-should-be-aware-of-f609f9293703
作者：Chris Lee
譯者：吳曲；公眾號：彩云譯設計
本文由 @彩云Sky 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
