UI設計中的空間美學探討

李時穎

摘 要：UI設計作為一種視覺傳達系統(tǒng)，應遵循視覺系統(tǒng)的普適美學規(guī)律。作為一種主要作用于各種顯示終端的二維平面領域，UI設計中的空間美學是一個無法被忽略的要素。

關鍵詞：UI設計；前端；視覺層級

在終端設備幾乎覆蓋日常生活方方面面的現(xiàn)代生活中，UI界面幾乎已經成為人們生活的一部分。隨著大家對UI界面的視覺系統(tǒng)越來越熟悉，除了形成越來越明顯的視覺習慣之外，同類產品UI界面在視覺美感中的差異也能夠被越來越明顯的區(qū)分出來。UI設計作為一種視覺傳達系統(tǒng)，應遵循視覺系統(tǒng)的普適美學規(guī)律。作為一種主要作用于各種顯示終端的二維平面領域，UI設計中的空間美學是一個無法被忽略的要素。本文旨在探討，空間美學這一概念在UI設計領域中的表現(xiàn)，以及UI設計中影響空間美學的因素。

一、空間美學與UI設計

毫無疑問，視覺設計是一種空間的藝術。空間藝術是以空間為存在方式的藝術。作為視覺藝術領域中一員的UI設計，空間的概念主要在二維平面中展開。由于UI設計特殊的交互特性。我們可以把它的空間表現(xiàn)從布局空間和交互空間兩個維度進行探討。

（一）布局空間。由于UI界面在非交互狀態(tài)中是以一種圖文混排的版面形式存在。用戶首先看到的是一個由圖標、色塊、文字、圖形、圖表、圖片等各種圖文元素組成的平面。這些元素會直觀的形成一種布局空間，給用戶帶來第一印象。

（二）交互空間。UI設計界面與其他傳統(tǒng)平面媒體相比有個特性，具有一定的交互性。也就是隨著用戶發(fā)生的一些行為，比如單擊、滑動等等，界面的面貌發(fā)生變化以給用戶一個及時的反饋。用戶可以通過界面樣貌的不斷變化來判斷自己的行為是否符合預期，繼而產生交互。綜上所述，關于UI設計中的空間美學表現(xiàn)，應當從這兩個角度進行探討。

二、UI設計中影響空間美學規(guī)律淺探

（一）UI設計中的布局空間美學。UI設計中的布局空間美學，應當與其他視覺藝術的空間美學存在共同性，同時也應具備自己的特性。

架構美：如果忽略UI設計作品中的色彩和圖片元素，僅用黑白色塊的關系觀察UI界面，我們能夠發(fā)現(xiàn)UI界面本身存在一種架構美，如果基本元素和黑白灰色塊在布局上看起來是精致的、和諧的、穩(wěn)定的。就會給人帶來一種架構的美感。將空間美學中的布局、色彩選擇、光線運用、路徑設定、功能分區(qū)原則應用到界面視覺表達中，可以創(chuàng)造出令人愉悅、易于使用和具有吸引力的用戶界面。如圖1所示：

與架構美最相關的主要是定義UI元素的尺寸、間距、形狀和分布。如果能在UI設計時合理的布局功能，選擇合適的展示方式，如列表、選項卡、圖標、圖標等等，在滿足功能需求的基礎上充分考慮這些內容的視覺表現(xiàn)，從架構的角度合理的布局視覺元素之間的關系，就能最大程度的在架構上獲得空間美感。落實到具體元素上就是明確元素的具體形狀、大小、間距、疏密關系等等，為元素模塊設置合適的尺寸，擺布局在合適的位置。我們所說的尺寸就是元素在界面中占據(jù)的實際面積，它的長和寬的數(shù)值大小。UI的尺寸包含兩種模式，一種是固定尺寸，即長寬的數(shù)值是固定的不會改變，另一種是自適應尺寸，會根據(jù)內容或外部環(huán)境調整尺寸。只有極少數(shù)的元素是有指定數(shù)值的，多數(shù)元素的尺寸都會有一個合理的設置區(qū)間。

秩序美：秩序美包含了幾乎一切視覺要素包括色相、明度、純度、形狀、輕重、黑白灰等視覺要素的綜合表現(xiàn)。UI設計界面最重要的不是追求獨特性而是一種強烈的秩序感。用戶需要第一眼就能在視覺上形成對信息的基本獲取，菜單、按鈕的位置，是否突出；有交互功能的圖標是否非常容易獲取等等，總而言之，有秩序感的UI界面會讓用戶有種一目了然的感覺。并能夠非常順暢的進行交互，能夠非?？焖俚耐ㄟ^各種視覺引導與歸類找到自己需要的元素。落實到設計上，就要求UI界面中的所有要素首先都要具備明確的視覺層級，在視覺上形成明顯的突出強調與弱化統(tǒng)一的關系。讓用戶得到一個清晰的層級感，此外元素的布局要非常合理，該規(guī)整的要規(guī)整，不能讓用戶的視線在界面上無所適從。如圖2所示，從元素的形狀、黑白灰、布局能看到非常明顯的秩序。

（二）UI設計中的交互空間美學

在布局空間美學得到很好體現(xiàn)的基礎上，再去追求交互美學。

交互美首先提現(xiàn)在交互前交互后的界面元素會發(fā)生明顯的變化以給用戶明確的反饋或提示。如果變化不夠明顯或者突出，則無法滿足用戶“我在及時得到反饋”的心理需要。交互的形式可能是出現(xiàn)經過強調的提示信息、元素的外觀發(fā)生明顯的改變、跳轉或者出現(xiàn)彈窗、或者出現(xiàn)元素的動畫、或者聲音等等。如圖3.交互中元素背景色改變。

交互行為應該符合功能需要和用戶的習慣，不應該是隨意和無序的。

另一方面，交互行為的變化又應當具備一定的穩(wěn)定性。事實上一個有交互行為的UI界面具備某種性格色彩，有的交互行為會給人一種溫柔友善、有的交互行為顯得活潑可愛，有的則令人眼花繚亂。非必要應當減少令人厭惡的交互行為，比如漂浮廣告、有遮擋行為的模態(tài)框、或者故意引導用戶做出誤操作，比如點擊關閉卻進入廣告等等。同一個產品的交互行為應該具備一種相對穩(wěn)定的性格色彩。讓用戶在使用時產生一種穩(wěn)定和安全感。非必要就要減少出其不意的失控感。

參考文獻：

[1]Jeff Johnson張一寧 .認知與設計——理解UI設計準則[M].北京.圖靈出品.人民郵電出版社.2022.P122-P135