UI界面設計

劉寶麗 孫麗娟 何燕紅 劉海艷

【摘要】UI界面設計是整個系統的門戶，其設計藝術和用戶體驗感兩者都是組成這個門戶的重要部分。本文綜合考慮了色彩要素和網格排版的使用，結合UI動效和設計心理學，探討了UI界面的設計思路。

【關鍵詞】色彩;排版;UI動效;用戶的心理

UI（user interface）就是用戶界面的簡稱，主要針對軟件，其作用僅次與整個系統的功能。它同時結合了計算機科學與認知心理學等多個學科，是計算機學科中的一股新鮮血液。色彩的意義、排版、圖形的變化、紋理樣式、巧妙的UI動效、深度的用戶心理研究是用戶體驗感與實用性和簡約性的重要體現。

優秀的UI設計師不僅熟悉功能而且了解用戶的心理，他們往往把自己想象成用戶，如果連自己都不滿意的設計在他們眼里是不完美的。中國視覺設計師馬哲認為設計即溝通，設計是追求美好體驗，設計存在于任何一個細節中，設計是一種傳統，是無盡的探索，是勇敢迎接挑戰，是任何一種源于愛的東西。

一、設計的藝術

（一）色彩的意義

對于色彩要素的管理問題，UI設計應該綜合分析各種因素之間的關系，并找到一個平衡點和亮點，使得設計方案具有更加強的目的性。色彩方案語言通俗易懂，能讓用戶直觀感受。通過色相、色度和色調從而達到不同的感官效果。因此UI世界中色彩的意義并非常識那樣簡單，紅色代表熱情似火，藍色代表冷靜自由。很多設計師的配色世界里所表現的遠遠比看到的要多。界面的色彩與整體功能、用戶的年齡、用戶的性別甚至是用戶的工作等都有極大的聯系。在我看來可能正是色彩讓用戶感受到了活力，遠離工作的壓力。是自由，和平的顏色給作為音樂愛好者的用戶靈感來源。是粉色與紫色亮麗而愉悅的氛圍為年齡在15～25歲的少女抒寫情懷。色彩并非是獨立存在的藝術品，它與整個項目的主題功能緊緊聯系，同時也擁有了畫龍點睛的作用。

而研究顯示大多數人更傾向于僅依賴2—3種色彩的簡單組合。一個好的交互設計作品是將復雜點的概念轉換成簡單的、有吸引力的直觀體驗，用來供最終用戶使用。標準色彩規范中要規定出主色、輔助色、裝飾色。其中主色用量基本占據全部用色的75%，它將決定整個界面的視覺風格，因此主色選擇至關重要。

（二）排版

在UI的排版中利用網格系統是非常重要的，它利用一系列垂直和水平的參考線將頁面分割有規律的格子，并且將這一規則貫穿于整個產品設計中。網格系統是由瑞士設計師，約瑟夫·米勒-布羅克曼在《平面設計中的網格系統》一書提出，對設計界有著深遠的影響。當多名設計師同時參與設計時，網格系統方便給出一個統一的框架去約束，從而提高效率。熟練運用網格系統能夠讓你的設計更加有秩序和節奏感，頁面信息的展示更加清晰，從而提高閱讀效率。對于強迫癥的人群，縮短了設計的時間。對于頁面大小相對限制的手機端UI來說外邊距和水槽（如果一個頁面有N列，那么水槽就有N-1列）的寬度至關重要，寬度太大，頁面會變得寬松。寬度太小，頁面會感覺比較“滿”。

文字本身也能傳達其他元素無法傳達的信息，因此文字設計不僅美觀更要實用。優秀的排版，不會讓用戶產生視覺疲勞，而應該讓用戶能輕松獲取信息，實現人機有效交互。界面字體的數量一般控制在2～3種，多則容易混亂。字體的過小，容易損傷用戶的眼睛，而太大則會迅速吃掉屏幕，破壞閱讀連貫性。行間距應該是字體大小的120%，在手機端界面中細心的設計師也會注意字間距的大小。

二、用戶體驗感

（一）UI動效

UI動效是用戶界面上最突出的元素。相對于文字和靜止的圖像，動態的更容易被發覺。用戶的視線會不由自主的追尋動態的物體，這是一種條件反射。小部分被采用的動效，可以減輕用戶的認知負擔，防止看漏，從而更好的確立良好的層級關系。以用戶為中心，充分體現界面的人性化和響應性。在UI動效后用戶能更好的反饋，例如是否已經點擊按鈕或者當用戶在做出重要決定時，在視覺上進行人性化提示的動效是加分的。當界面發生改變時，適度的界面動效，給予用戶視覺緩沖效果。同時解說動畫與視覺提示，為新手用戶提供了極大的便利。

（二）設計心理學

用戶的良好體驗感往往來源于在使用過程中細小的心理問題。可能它微不足道但是卻無形中節省了用戶很多寶貴時間。當使用滾動條時，如果用戶向左滑動時一般不會關注滾動條右端，因此在滾動條兩端設置箭頭。這個問題體現了游標移動到目標之間的距離、目標物的大小的所花費的時間之間的關系，同時也正是心理學家費茲的人機界面設計法則所研究的問題。對于那些會產生高風險的交互元素，設計師往往不希望用戶能輕松點擊，當刪除按鈕與其他常用按鈕距離過于接近時，這會非常危險。在很多時候用戶會常常懷疑自己可能患有選擇恐懼癥，但這實際上是選項實在太多造成的。席客定律指出反應時間與觀察時間、閱讀文字、移動鼠標和可能相似的答案總數有關系。因此減少所需要反應時間，降低犯錯的概率，這會從很大程度上提高用戶的效率。科學家發現人類頭腦最好的狀態能含有7+2或者7-2項信息塊。這一原理也常常被應用于移動交互設計上，比如應用的選項卡一般不會超過5個。

三、結語

本文主要闡述了UI界面的設計思路，在設計時UI界面可以豐富多彩，但宗旨不應改變，它永遠服務于用戶，并且具有實用性和簡潔性。熟練掌握色彩及排版，注重適度的UI動效和對用戶心理狀態的洞察，都是提升界面美感的重要途徑。（通信作者：劉海艷）

參考文獻：

[1]陳根.UI入門一本就夠[M].化學工業出版社，2018.

[2]娜塔莉·娜海.UI設計心理學[M].中國人民大學出版社，2019.

[3]蔣飛燕.淺析色彩在UI設計中的應用[J].傳播力研究，2019.