基于手機UI設計的視覺表現研究

李超凡（上海大學 上海美術學院，上海 200444）

一、視覺元素在手機端UI設計的目的

隨著技術的發(fā)展及普及的運用，人們對數字產品的要求逐步提高。功用性已經是對產品的基礎要求，人們在使用數字產品時的體驗感也逐步提升。這些觀念的改變使得設計者開始追求數字產品與藝術的結合。因此UI設計的視覺表現也逐漸被設計者重視。對手機端UI設計進行研究，首先，我們需要了解視覺元素在手機端UI設計的目的。

我將手機端UI設計的目的分為了三大塊，分別為人機交互、信息傳達以及娛樂審美。

首先，人機間的互動是手機UI設計中最基礎的應用，視覺元素的設計自然要以人機互動為基礎的考慮方向。人機交互即是指人與手機之間的互動，人的操作、機器的反饋，形成了使用感受。對于日益生活化的手機功能、與我們生活逐漸融合的手機，手機的操作、如何做到使用戶快速有效地理解、學習、習慣該用法成了設計要點之一，我們需要通過視覺元素的輔助，引導使用者對想進行的操作快速、準確地做出相應反應。

而對于信息傳達方面，由于圖形的閱讀性、傳遞性更直觀、快速，手機UI設計逐步趨向于圖案化、圖片化、視頻化。而這些逐漸對設計感要求更強的用戶觀念的變化使得視覺元素在手機端的UI設計中起著越來越重要的作用。而大量的設計觀念的涌入與普及于使用者的日常生活，使他們在審美、展示個性、藝術等方面有了更多的追求，這也是現在手機端UI設計的一個必須考慮的方向，視覺元素便是對娛樂審美目的的直接體現。

文本的排布、圖形與色彩等視覺元素的運用都會影響到人機之間的互動效率與感受。視覺元素的優(yōu)秀運用能夠提升信息傳遞的效率，提升UI的藝術水準，而這兩點也能夠影響用戶的使用體驗。

二、手機端UI設計的視覺編排

1.信息視覺化

如上文所述，視覺元素在手機端的UI設計中，主要是為了更有效的信息傳達、與藝術結合的娛樂審美，以此來提升人機交互的用戶體驗。因此，信息視覺化是本文的重要討論對象之一?！靶畔⒌囊曈X化過程是設計師將信息根據文字、圖形、圖像、表格、動畫等形式表達出來的過程。在表達的過程中，設計師需要將元素和特定的信息需求，按照美學原則和人類的視覺閱讀特性進行信息組織、信息架構和信息編排?！?/p>

手機端界面空間有限，在這么小的界面中如果存在多個視覺元素，用戶就需要一個流暢的閱讀順序，而如何引導使用者的瀏覽路線，使用戶有效且享受地瀏覽信息則需要通過合理的視覺元素的設計去達成。

2.信息的組織與構架

在信息的視覺化過程中，最重要的是信息的邏輯結構，即是指信息之間的層級關系整理。信息的組織構架相當于信息的一種分類展示方式。

多個界面之間最常見的信息構架是以導航構架為基礎，將各個信息根據不同類別歸類于不同界面的層級結構。在很多APP中都可以見到這種樹狀結構（中心輻射結構），這是多界面信息處理的基本構架。例如微信的界面構架，就是典型的中心輻射結構。

另一塊則是單個界面的信息排布，分為層級結構、矩陣結構、線性結構和自然結構。層級結構的信息存在上下級關系，如同上文的導航構架，是最常用的排列方式。矩陣結構的分布則能使用戶根據需求篩選信息。例如許多用來令客戶自主篩選信息的情況，如許多用來瀏覽產品的購物類APP。以圖1“餓了么”APP的界面為例，該界面的信息排布既包括了層級結構，也包括了矩陣結構。

其左邊的導航欄與右面相應的信息之間的排布屬于層級結構，而導航及其對應對象的信息點之間相互的關系則屬于矩陣結構。

自然結構是一種不遵循任何固定模式隨意排布的信息組織模式，多用于娛樂、游戲、設計類產品，使用戶自主探索信息。而線性結構則是來源于線下的媒體，例如書籍、音像產品等。手機端的線性結構的信息分布大多是指簡單的由上而下的視覺流，例如一篇文章、大部分的教育類APP也存在著線性結構的信息排布。

3.信息的視覺化編排

除了信息的邏輯結構，它的編排設計對用戶的閱讀性也起著很重要的作用。視覺編排有著基本的四個原則和一個應用——接近原則、一致原則、對比原則、閉合原則和網格應用。

接近原則即是指視覺元素之間彼此靠得很近，用戶則會自動將這塊信息歸類。所以在一個界面中將同一組別的視覺元素挨近放置會出現分類、分級的效果。

一致原則是指將視覺元素大小保持一致的尺寸可以有效地傳遞信息，同時也起著直觀的信息分類作用。

對比原則是指視覺元素之間要有輕重對比，使用戶的視線集中于界面的關鍵部分，減輕了用戶的瀏覽負擔。

閉合原則是利用了人的心理，當人們看到一個未完成的圖像時，人們會自主去完成該圖像。所以，在許多界面會出現在界面邊沿呈現一部分的文字或圖像，目的是為了讓用戶通過操作自主去將信息補充完成，延伸了界面的空間，存放更多的信息。

網格應用是在過多視覺元素集中在一個頁面時，設計師們常會使用的信息展示形式，利用柵格線將信息統一有秩序地排布。

以圖2的推特界面為例，四組圖并列排布即是利用了接近原則、一致原則，會被自動識別為一組。其中用戶所發(fā)布的內容圖片占據畫面的最中心，發(fā)布者和發(fā)布內容為重色且字體做加粗加重處理；而其余次要信息，例如是如何出現在首頁的，該消息的熱度等都是灰色的且文本字體較小，這是利用了上文所述的對比原則。而每一塊發(fā)布的內容的相關信息則利用網格應用的處理方式以柵格線分割形成明顯的組別，且每一塊信息同類信息的處理都運用了一致原則，保持了界面在多視覺元素下的秩序感。

以上均是視覺元素對信息傳遞的基本處理，即是對信息的整理分類、排布，并使其以簡單易懂的方式展示，引導使用者進行有效的信息處理及對事件的應對行為。而視覺元素如何更進一層地在信息視覺化上使用戶在使用過程中提升感受則需信息分布組織以外的、與藝術結合的設計，這就需要利用到各種圖形、色彩、字體等個性化的視覺元素。下文我們將從文本、色彩、圖形的元素來探討視覺元素與手機端UI設計的構成。

三、手機端UI設計的視覺元素構成

1.文本元素

對手機端的UI設計的視覺要素進行研究，首先要對幾大要素進行分類，并對其組合及功用進行分析。我將視覺元素主要分為了三大塊，分別為文本元素、色彩元素、圖形元素。

文本要素除了文案本身也包括字體、字號等文字本身及排布的設計，這其中包括了信息的傳遞效率以及視覺上的享受。除了文本提取的信息需要簡單準確，文本的排布方式也有一定的規(guī)則，通過設計才能使用戶對信息的提取變得更為流暢。例如字間距、行間距、段間距、字體大小等都有一定的默認規(guī)則?！氨热缭贗OS系統中，常規(guī)的字體一般會選擇默認為冬青黑體與華文細黑兩種字體，而在安卓系統中，則是默認英文化字體和中文思源黑體?！背酥?，字號也有著自己的適用潛規(guī)則，“大標題或者是界面中相對較大的字用40px左右，文章正文標題字號用32px，正文用26px，小字部分用20px，當然不同的情況下也會有具體的字號設計?！鼻易痔柕氖褂脩敒榕紨?。而字體在審美方面的要求則對字體的特殊設計有更多的要求，在特殊、有設計感的同時也要保持與風格的一致，要避免樣式太多造成的雜亂等。

2.色彩元素

色彩在手機端UI設計中會為產品帶來最直觀的印象，是視覺元素中舉足輕重的一個部分。雖然每個色彩對于用戶的個人感受及審美都會產生不同的影響，但其主要的情緒和體驗影響還是有著基礎原則可循，有著可研究利用的方向。

同產品需要主題色調，單一或復雜都會帶來使用感的降低，過于無聊或是嘈雜引起視覺疲憊都是不可取的。而色彩的色相、明度、純度都會對產品印象、使用體驗帶來不一樣的影響，例如亮色給人以活潑輕松的感覺，而暗色、冷色則使人平靜、給人以沉穩(wěn)的感受等。我們應當利用色彩給不同受眾群的不同感受以及操作所應對的不同事件進行色彩的設計，優(yōu)化視覺帶來的體驗。

最常見的就是一些APP的夜間模式，通常會將主題色調為暗色，使人在夜間使用時更為舒適、安靜，符合夜晚的氛圍。

3.圖案元素

圖案包括了圖像與圖標，是視覺沖擊較大的元素，它能夠更直觀地傳遞信息、增大渲染力。圖像無需語言也可以被理解，是用戶無障礙溝通的橋梁，比起文字，人們會優(yōu)先注意圖案，接受圖案的訊息。圖像的設計包括了其大小尺寸、位置排布等。中心大尺寸的圖像給人以沖擊力、小而邊沿的圖像給人以精致緩和的感受。

而圖標除了是視覺要素、產品印象直觀感受的承擔者之外，也往往需要負責信息的傳遞，例如一些導航或使用指示等。圖標則需被設計得簡練、明確、辨識度高。通常圖標都伴隨著可交互的行為，因此，用戶對其操作的前后變化也在設計的范圍之內。

結語

視覺的傳達在手機端的UI設計里起著信息傳導的作用，其目的包括人機交互、信息傳達及娛樂審美，視覺的設計能為人們提供更有效的信息交互方式，在與藝術結合的同時也能娛樂使用者，令其享受交互過程。而視覺元素可歸納為三點，包括了文本元素、色彩元素以及圖案元素，三者相輔相成，優(yōu)秀的視覺設計為信息傳達帶來更加有效、便捷的途徑，也提高了人們的用戶體驗，帶來美的感受。