2023年6個(gè)用戶體驗(yàn)設(shè)計(jì)師應(yīng)了解的視覺(jué)設(shè)計(jì)原則

個(gè)用戶體驗(yàn)設(shè)計(jì)師應(yīng)了解的視覺(jué)設(shè)計(jì)原則當(dāng)我在高校學(xué)習(xí)視覺(jué)傳達(dá)設(shè)計(jì)時(shí)，我著迷于設(shè)計(jì)師讓人們以某種方式思索，感受和行動(dòng)的力氣。

在作為產(chǎn)品和UX設(shè)計(jì)師關(guān)心產(chǎn)品擴(kuò)展到數(shù)以百萬(wàn)計(jì)的用戶并實(shí)現(xiàn)收入的十年之后，我仍舊使用在我頭幾年學(xué)到的很多基本課程-檢查外形，布局，并思索形式如何影響使用我的產(chǎn)品的人們。

我們都聽(tīng)過(guò)的VI的小號(hào)UAL設(shè)計(jì)元素狀，線等，我們已經(jīng)有一個(gè)像對(duì)比，重點(diǎn)，節(jié)奏等打成了我們頭上的原則。

我將共享一些微妙的學(xué)問(wèn)，而不是像我作為平面設(shè)計(jì)師所學(xué)的訓(xùn)練那樣常常提到的原則，但直到今日我仍舊會(huì)使用；稱它們?yōu)楦呒?jí)，稱其為鮮為人知，但我盼望通過(guò)共享它們，可以提升整個(gè)設(shè)計(jì)社區(qū)的水平！

一、原則

1.重力

重力適用于對(duì)象和外形，即使在視覺(jué)傳達(dá)中也是如此；這聽(tīng)起來(lái)可能很驚奇-重力并不像現(xiàn)實(shí)生活中那樣是一種真正的力氣將二維物體向下拉。

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

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

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

當(dāng)您設(shè)計(jì)頂部的視覺(jué)重物可能會(huì)感到不舒適并感到焦慮時(shí)，要有意識(shí)和認(rèn)知（當(dāng)然，除非您要傳達(dá)這種感覺(jué)）。

2.閱讀方向

在西方社會(huì)（反之則相反），我們從左到右，從上到下閱讀；由于這，左側(cè)的對(duì)象被視為進(jìn)入，而右側(cè)的對(duì)象被視為離開(kāi)。

這是左邊的圓圈，同樣，由于我們從左到右閱讀，所以圓感覺(jué)就像它進(jìn)入了合成；在下面，圓圈感覺(jué)像是在退出。

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

或者相反，想要傳達(dá)一個(gè)逃跑的對(duì)象（或角色）嗎？

3.閱讀優(yōu)先

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

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

請(qǐng)?jiān)谝韵率纠校?/p>

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

4.視覺(jué)張力

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

通常，視覺(jué)張力只是無(wú)意識(shí)的-設(shè)計(jì)師沒(méi)有意識(shí)到他們不當(dāng)心將外形彼此相鄰，從而在不知不覺(jué)中產(chǎn)生了張力，這可能會(huì)遇到馬虎。

看一下下面的圖片：

感到不舒適嗎？這是下面突出顯示的全部張力點(diǎn)。

假如您有意，可以使用視覺(jué)張力吸引用戶的眼睛并產(chǎn)生焦慮感；或許您正在設(shè)計(jì)用于抗議的海報(bào)，或者想將某人的留意力集中在某物上；在這些狀況下，請(qǐng)確保您的緊急心情是有意的，不會(huì)像看起來(lái)的錯(cuò)誤那樣消逝。

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

5.動(dòng)態(tài)與靜態(tài)

靜態(tài)成分常常會(huì)讓人感到無(wú)聊。給它添加香料并使它更令人興奮的一種簡(jiǎn)潔方法是簡(jiǎn)潔地傾斜地平線，這是一個(gè)感覺(jué)陳舊的靜態(tài)圖像的示例。

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

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

6.激活負(fù)空間

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

問(wèn)題是，當(dāng)您到達(dá)頁(yè)面右上角時(shí)，您的留意力可能會(huì)消逝；您的眼睛移過(guò)對(duì)象，但那里的空間太大，而來(lái)自對(duì)象的方向力也太小，您的眼睛掉了下來(lái)，該空間保持不活動(dòng)狀態(tài)。

但是，通過(guò)一些裁剪/縮放：

突然之間，外形四周的空間看起來(lái)既有意圖又活躍。帶走？假如您要移動(dòng)別人的視線，請(qǐng)留意不活動(dòng)的負(fù)空間。

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

不要讓CSS，HTML或您使用的任何其他技術(shù)限制您