超詳解析這7大指標「用戶體驗優化7大指標」

格式塔原則是任何設計師都可以學習重要思想集合,它們的實現不僅可以極大地改善設計的美觀性,而且還可以極大地改善其設計美感,其功能和用戶友好性。

分享大綱:

1.臨近定律

2.相似原理

3.封閉原則

4.連續原則

5.對稱原理

6.共同命運原則

7.圖地原理

一、鄰近定律

彼此靠近的事物比彼此隔開的事物關聯性更強。我們的大腦將這些緊密放置的元素集合視為一組,臨近定律可以更清晰知道元素之間關係,在UI這種運用比較廣泛。

提升設計美感及用戶體驗的七大原則

那麼它在UI中如何應用?

提升設計美感及用戶體驗的七大原則

左側卡片中,文字排版有點分散,導致信息理解會誤判。右側卡片中文字排版信息集中,便於表達同一個主題。

二、相似原理

具有相似視覺外觀的元素更容易被用戶認為是同類物體。在格式塔理論中,對相似元素進行視覺分組,可通過顏色形狀大小等將其安排在一起。

提升設計美感及用戶體驗的七大原則

上圖中左側雖然間距大小一樣,但是色彩不一樣,我們視知覺會自動將兩種顏色分別視為兩組。

如何應用到UI設計中?

提升設計美感及用戶體驗的七大原則

如上圖 ,在UI設計中,兩個按鈕大小形狀一樣顏色不一樣,因此我們會將其視為兩種重要程度的功能。

提升設計美感及用戶體驗的七大原則

由於相似原理,我們知道,有顏色字體是可以進行點擊操作的。相似性可以讓整個UI系統更加一致性,體驗更友好。

三、封閉原則

當對象不完整時,我們更喜歡完整的形狀,因此我們自動填充元素之間的間隙以感知完整的圖像,例如形狀字母圖片等。具體來說,當整個圖片的某些部分丟失時,我們的感知將填補視覺上的空白。

提升設計美感及用戶體驗的七大原則

網上很出名的一張圖

如上動圖中,即使小狗元素用不規則小點組成,但是我們也能識別出來。

如何應用到UI設計中?

提升設計美感及用戶體驗的七大原則

封閉原則在加載指示器中運用較多,這樣便於用戶理解。左側加載過於分散,無法讓用戶聯想到加載,因此右側思路與封閉原則有着一致思路。

提升設計美感及用戶體驗的七大原則

封閉原則在圖形LOGO設計中也是屢見不鮮。

四、連續原則

連續定律一般由一條直線或者曲線的端點為起點,一直延續下去達到終點,我們感知傾向於對象是以直線或者曲線的形式排列起來更為相關性。

提升設計美感及用戶體驗的七大原則

如何應用到UI設計中?

提升設計美感及用戶體驗的七大原則

在標籤欄設計中,我們把橫向連接在一起的視為一組,表達一個功能含義。

提升設計美感及用戶體驗的七大原則

上圖Apple和Medium的設計中,將標籤橫向排列一組,便於用戶橫向滑動找到對應功能。

五、對稱原理

我們的大腦將對稱對象視為同一組的一部分。他們給人以穩定和秩序的印象,對稱的UI元素有助於掃描內容瀏覽信息

提升設計美感及用戶體驗的七大原則

如何應用到UI設計中?

提升設計美感及用戶體驗的七大原則

夸克Naver產品設計中,底部圖標網格菜單,採用對稱平衡手法,將功能排布在宮格列表上。

六、共同命運原則

共同命運原則(law of common fate)是指在其他條件相同時,朝同一方運動具有相同速度的元素會被組織在一起。

提升設計美感及用戶體驗的七大原則

該原理是運動設計的基礎。每個有意義的動畫都會使用共同的命運來以正確的方式引導用戶的視線。這有助於將內容與觸發的動作聯繫起來。

如何應用到UI設計中?

提升設計美感及用戶體驗的七大原則

如上圖,向右滑動可以顯示更多的內容,因此在設計時候就需要保證在統一方向上,讓它們有着共同屬性。

七、圖地原理

人眼能夠根據不同的聚焦計劃分離對象。我們直觀地知道哪些元素放置在前景中,哪些元素放置在背景中。

提升設計美感及用戶體驗的七大原則

在模態彈出窗口時,就可以見證“圖形地面原則”的實際使用。

提升設計美感及用戶體驗的七大原則

如上在彈窗設計中,我們經常會將背景疊加黑色便於突出前景彈窗內容。

提升設計美感及用戶體驗的七大原則

上圖中在版式上使用圖地原則,清晰區分信息層級,通過圓形鞋子前後關係,營造視覺焦點。

總結

格式塔心理學知識在UI設計中的運用遠遠要比我今天說得要多,大家可以在項目實踐中去慢慢理解運用。這是個比較重要的設計理論學術,希望大家可以掌握後學以致用。

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/318789.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2025-01-12 12:00
下一篇 2025-01-12 12:00

相關推薦

發表回復

登錄後才能評論