編輯導語：我們的視覺每天都會接受很多信息，對于我們看到的一些信息，我們會有自己的理解和看法；比如我們對于屏幕上的一些線條和圖形的理解，會讓我們產(chǎn)生某種情緒；本文作者分享了關(guān)于6個用戶體驗設(shè)計師應(yīng)了解的視覺設(shè)計原則，我們一起來看一下。

當我在大學學習視覺傳達設(shè)計時，我著迷于設(shè)計師讓人們以某種方式思考，感受和行動的力量。

在作為產(chǎn)品和UX設(shè)計師幫助產(chǎn)品擴展到數(shù)以百萬計的用戶并實現(xiàn)收入的十年之后，我仍然使用在我頭幾年學到的許多基本課程-檢查形狀，布局，并思考形式如何影響使用我的產(chǎn)品的人們。

我們都聽過的VI的小號UAL設(shè)計元素狀，線等，我們已經(jīng)有一個像對比，重點，節(jié)奏等打成了我們頭上的原則。

我將分享一些微妙的知識，而不是像我作為平面設(shè)計師所學的訓練那樣經(jīng)常提到的原則，但直到今天我仍然會使用；稱它們?yōu)楦呒?，稱其為鮮為人知，但我希望通過共享它們，可以提升整個設(shè)計社區(qū)的水平！

一、原則

1. 重力

重力適用于對象和形狀，即使在視覺傳達中也是如此；這聽起來可能很奇怪-重力并不像現(xiàn)實生活中那樣是一種真正的力量將二維物體向下拉。

但是引力深深地扎根于我們對現(xiàn)實的感知之中，以至于它甚至可以轉(zhuǎn)換為頁面上的二維物體；以下面的圖片為例，好像您正在等待頂部的圓環(huán)隨時掉落一樣，應(yīng)該會感到有點不舒服。

現(xiàn)在看下面的這張圖片-相反。

這種構(gòu)圖應(yīng)該不像要掉落的球，而更像是一個物體只是停留在頁面底部，接地、平靜的。

當您設(shè)計頂部的視覺重物可能會感到不舒服并感到焦慮時，要有意識和認知（當然，除非您要傳達這種感覺）。

2. 閱讀方向

在西方社會（反之則相反），我們從左到右，從上到下閱讀；因為這，左側(cè)的對象被視為進入，而右側(cè)的對象被視為離開。

這是左邊的圓圈，同樣，因為我們從左到右閱讀，所以圓感覺就像它進入了合成；在下面，圓圈感覺像是在退出。

您也可以使用它來傳達某些情緒，例如，想讓一個物體看起來像在偷窺嗎？您可以創(chuàng)建如下所示的構(gòu)圖：

或者相反，想要傳達一個逃跑的對象（或角色）嗎？

3. 閱讀優(yōu)先

因為我們從左到右從上到下閱讀，所以我們自然會先看到左上角的物體，然后我們的眼睛自然會移到右下角，然后再看那里的東西。

這很重要，因為如果您嘗試創(chuàng)建視覺層次結(jié)構(gòu)（也許您希望用戶先看到標題，然后再看到內(nèi)容），即使它們的形狀/顏色/大小相同，也可以使它們放置在其中有所不同。

請在以下示例中：

最有可能的是，如果您是從左上角到右下角閱讀英語書籍的，那么您首先應(yīng)該在右下角之前先查看左上角的圓圈。

4. 視覺張力

我曾經(jīng)把這種描述描述為我的身體緊張感得到了轉(zhuǎn)化和增強，當您看到一桌裝滿液體的杯子坐在桌子邊緣時，就會有這種感覺。

通常，視覺張力只是無意識的-設(shè)計師沒有意識到他們不小心將形狀彼此相鄰，從而在不知不覺中產(chǎn)生了張力，這可能會遇到馬虎。

看一下下面的圖片：

感到不舒服嗎？這是下面突出顯示的所有張力點。

如果您有意，可以使用視覺張力吸引用戶的眼睛并產(chǎn)生焦慮感；也許您正在設(shè)計用于抗議的海報，或者想將某人的注意力集中在某物上；在這些情況下，請確保您的緊張情緒是故意的，不會像看起來的錯誤那樣消失。

這是相同的構(gòu)圖，其中的張力集中在特定的位置，并且有意將其放在特定的位置。

5. 動態(tài)與靜態(tài)

靜態(tài)成分經(jīng)常會讓人感到無聊。給它添加香料并使它更令人興奮的一種簡單方法是簡單地傾斜地平線，這是一個感覺陳舊的靜態(tài)圖像的示例。

現(xiàn)在傾斜地平線，突然之間，城市景觀看起來更加令人興奮。

為了使構(gòu)圖更加生動有趣，您可以接合邊框并讓形狀在其外部流血。查看以下3點透視圖組成：

6. 激活負空間

您可以使用方向性形狀激活負空間一點，方向力太小，負空間保持不活動狀態(tài)；這是一種形狀，可以引起您的注意，然后向上和向右移動眼睛。

問題是，當您到達頁面右上角時，您的注意力可能會消失；您的眼睛移過對象，但那里的空間太大，而來自對象的方向力也太小，您的眼睛掉了下來，該空間保持不活動狀態(tài)。

但是，通過一些裁剪/縮放：

突然之間，形狀周圍的空間看起來既有意圖又活躍。帶走？如果您要移動別人的視線，請注意不活動的負空間。

一個簡單的技巧就是用手指指向?qū)ο?，沿眼睛自然移動的方向移動，并注意您的注意力自然下降的位置；如果那是您想要的方式，則需要調(diào)整布局（形狀或邊框）以使該負空間保持活動狀態(tài)。

不要讓CSS，HTML或您使用的任何其他技術(shù)限制您，以確保您的作品能夠按照設(shè)計人員的要求做；這些視覺原理將適用于任何媒介-印刷，數(shù)字，網(wǎng)絡(luò)，隨便您如何命名。

它們只是我們的大腦和眼睛如何連接以感知視覺信息，無論采用哪種形式！

作者：Chris Lee，譯者: 南設(shè)；譯者公眾號：南設(shè)（ID：shemenglianmeng）

來源：https://uxdesign.cc/6-visual-design-principles-that-ux-designers-should-be-aware-of-f609f9293703

本文由 @南設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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