淺談UI 設計的敏捷方法與理論實踐

陳苡涵

（東軟集團股份有限公司，遼寧 沈陽 110000）

隨著信息時代的飛速發展，新興學科“信息設計”一詞浮出水面。信息設計通常指的是具有信息傳遞功能的產品設計，開發商為滿足用戶的參與感與體驗感，同產品設計師研究出視覺與交互兩者為產品的賣點。視覺感受評分高的產品更受用戶青睞，而良好的交互體驗感可以增加用戶對產品的依賴性，增加產品的附加值。

本文重點闡述UI 設計的本質、色彩與圖形符號元素等對界面的重要性以及對視覺效果、用戶體驗、交互設計三大模塊進行比較和分析。

1 UI 設計的本質探討

1.1 UI 的概念

UI 即User Interface（用戶界面）的簡稱。主要是指對軟件的人機交互、操作邏輯、界面美觀的整體設計，也叫界面設計[1]。

20 世紀90 年代初，有學者將“界面”一詞引入到管理科學領域。JefRaskin 在《人本界面，交互式系統設計》一書中指出：“就消費者而言，界面就是產品。”[2]一個好的產品不僅要有個性、有品位的視覺外表，還要有易于用戶操作的簡單、自由、舒適的特點。

1.2 UI 設計的分類

UI 設計由用戶研究、交互設計和視覺設計三部分組成。用戶研究是指在新產品開發前期，明確用戶的需求，了解產品的定位、目標群等，致力于進行深入的探討，以外部用戶需求作為產品目標，體系化地建立產品設計語言，并用創意設計助力客戶業務，推動設計體驗與業務發展的對接。本著“用戶體驗至上”的原則進行溝通與交流，由抽象到具象再返回抽象的全鏈路過程。一套完整的產品設計要分為五大層面去研究考慮，即表現層、框架層、架構層、范圍層、戰略層。最終，設計出讓客戶與用戶兩者皆滿意的產品。

比爾·莫格里奇（Bill Moggridge），世界上第一臺筆記本電腦GRiD Compass 的設計師，在1984 年一次設計會議上提出“交互設計”概念，當時命名為“軟面（Soft Face）”，后更名為“Interaction Design”[3]。交互設計由交互設計師主要設計軟件的操作流程、軟件結構、操作規范等，軟件開發工程師用代碼配合實現完成。

視覺設計通常被人們稱為“平面設計”，在這里包含種類頗多，分為標志設計、包裝設計、字體設計、圖像設計、廣告設計、裝潢設計、界面設計等。目前，UI 設計師從事的工作主要為界面設計，界面設計在我們日常工作生活中無處不在。例如，手機App 客戶端、企業公司后臺管理系統、各大門戶網站、數據可視化大屏展示等。從心理學意義來分析，界面設計包含視覺、聽覺、觸覺、情感等。一套完整且高質量的設計效果圖絕不是設計師與開發者自己主觀的意見，而是需要考慮使用者、使用環境、使用方式，最終實現為用戶而設計。用戶在體驗操作中進行反饋，這是一個漫長的過程。

2 UI 設計中存在的心理學

2.1 格式塔心理學

格式塔心理學又叫完形心理學，主張研究直接經驗和行為，強調經驗和行為的整體性，其探討人類對于圖形色彩語言的認知反應，是心理學發展中的一個重要分支。在形式上、顏色上、距離上進行自發的關系構建[4]5。

圖像在空間上呈現了它的機理，這種機理被用戶的潛意識感知。在UI 設計中以格式塔心理美學為指導，用戶可以在設計師設計的圖形與色彩語言的指導下進行有目的性的操作，并且這種行為是在用戶無意識自主作用下進行的，這種潛意識的行為對于交互設計的介入有著極大的鋪墊作用。

2.2 視覺色彩心理學

色彩與人類心理有著緊密的聯系，在不同的意識形態、不同的領域，人們可能有著不同顏色的喜好。色彩通過心理的轉化，從知覺到情感再到思想記憶，其反應與變化是極其復雜的。那么用戶看到不同色調的界面效果，隨之心理也會產生不同的情緒反應。例如，大家熟知的學習強國App，整體界面風格都采用肉眼觀看舒適的紅色基調，既體現出國家政治的黨性特點，又能激發黨員與群眾的學習熱情，兩全齊美。在專業色彩學中，色相、明度、純度、對比度、飽和度等都發揮著其不同的作用。在電子屏幕的視覺環境中，視網膜中間的椎細胞對紅、黃、綠色系最為敏感，所以研究觀察到，一個界面最為突出顯示的地方或提示詞、按鈕等設計都是以這三種顏色為主。反之，黑、白、灰這類顏色則大多為背景色。從這可以得出，色彩在某種程度上是主觀的，大部分用戶對色彩都會有一個共同的認知，并達成一致。

用戶的視覺色彩對心理映射也有著不同的象征意義。通常情況下，以科技感為主題的設計選定藍色；環保、節能、安全為主題的設計選定綠色；政治、黨員、國家為主題的設計選定紅色。

3 UI 設計中整體架構與風格的應用

3.1 框架構圖的重要性

為了更好地給用戶展示交互性能，設計師需要對不同尺寸屏幕進行塊狀分割。布局是界面構成的前提，是后續展開交互設計和界面設計的基礎。設計者需要根據需求及操作優先級等內容特點，選擇合理布局。無論移動端、PC 端都應保證色彩、字體、圖標、圖片尺寸、常用組件這些必備元素的舒適性與合理性。

在UI 設計中必不可少的是常規狀態欄及次要信息欄的區域劃分。根據調查研究顯示，大約87%的左腦主導性人群比右腦主導性人群視覺范圍少12px，為了保證獲取信息的有效范圍，ios 和Android 系統分別對系統顯示中的導航欄、狀態欄、信息欄等進行了相應的調整。調整后的調查顯示，用戶的視覺舒適度與視覺承受力上升了約12%[4]12。

3.2 色彩的基本原理與視覺習慣思維

光源與物體的色彩對用戶的感知能力產生極大的影響。如果我們對來自兩個不同光源環境下的相同屏幕進行分析比較，可以發現界面所呈現的顏色并不相同。這是因為，物體在不同光源照射的情況下產生的有效光頻率不同。

在UI 設計中，文字、圖標符號與背景色之間有著千絲萬縷的聯系。例如，一段字號較小的文字想要突出顯示，那么文字本身色彩就需要吸人眼球，反之，背景色區域要進行色彩柔和調整，讓背景與文字有著強烈的色彩對比，這樣更易于使用者眼睛的迅速搜索。

色彩由明度、純度、色相三要素組成。色相決定顏色本身的屬性，而顏色的改變要隨著明度和純度的變化而變化。明度則較為特殊，它可以獨立地存在，不受色相與純度的影響。色彩的力量也體現在每個顏色都能產生不同的面積大小，把兩種色值相同且面積大小一致的顏色放在一起，因為明度、純度、色相的不同，也會給人視覺產生不同大小的感覺。

3.3 UI 設計的視覺元素與美學表達

圖形符號語言的發展使用過程可以追溯到人類符號的創建初期，因此，從廣義上是指具有指代意義的圖形符號，具有高度濃縮、快捷傳遞信息、便于記憶的特性。從狹義上是指應用于計算機軟件上的圖形符號，包括文字符號、密碼符號、圖騰等等。在界面設計中，我們稱它為“現代化的命令”。

圖標是UI 設計中除了文字以外最不可或缺的視覺元素，在界面中雖然只占很小的位置，但它卻是檢驗設計師基本設計水平的標準，并且擔當著整個產品點睛之重任，它可以直接影響一款產品的形象和氣質。在界面中，圖標既是整個頁面的核心支撐體，又直接影響著產品的視覺體驗和產品調性。

圖標在生活中隨處可見，是國際通用性語言。例如，手機App中微信、支付寶、淘寶等軟件啟動圖標；室內設計中商場指示牌等等。圖標具有形、意、色等多種刺激，具有傳遞信息的功能，抗干擾能力強，圖標大小可隨意調節，表示視覺和空間概念，便于布局美觀。圖標的形式多樣化，并且表現形式多種多樣，有線性圖標、面性圖標、線面結合圖標等等，在這里不一一贅述各分類，查閱相關圖片一看即懂。

4 淺談UI 設計中的理論知識

4.1 視覺認知理論

UI 界面設計中的視覺認知主要是指用戶對視線所觸及的信息產生視覺反應，進而產生心理活動并且逐步完成信息接收的過程[5]10。設計師在進行界面設計時，要充分保證用戶的視覺最大化范圍，關注點定在視覺范圍內能感知的信息上，這就要求設計師要會運用心理暗示對用戶產生引導，使用戶用最快最有效的方法和途徑獲取最有價值的信息。

在視覺認知里，視覺聯想和視覺經驗為兩大重要組成部分。視覺聯想是指建立在視覺經驗基礎上由一個事物轉移到另一個事物的心理過程。視覺經驗是指設計師在進行創作設計時進行的經驗聯想[5]10。由于每個人所處環境、背景、接受的文化教育不同，進而經歷不同，那么設計師會根據這些產生豐富的聯想，經驗越多，設計的作品更趨于大眾化用戶群，在最大程度上滿足大多數用戶的視覺需求和心理認知。

4.2 信息傳播理論

在UI 界面設計中，設計師經過理解、構思、設計和規劃，用藝術的手法向某一特定的用戶群傳遞一個具體的信息[6]。因此，設計作為“視覺”進行“傳達”是傳播的一種形式。顯而易見，在傳播學的深度影響下所產生的效果更具影響力。界面就是設計師向受眾群傳達信息的一種媒介。

4.3 人機交互理論

人機交互是指人與計算機之間使用某種對話語言，以一定的交互方式，為完成確定任務的人與計算機之間信息交換的過程[7]。隨著設備的逐漸復雜化，我們將有更多、更好的交互方式，例如當下流行的語言控制、觸摸互動等。希望我們在以用戶為中心的前提下，創造出更多、更新奇的交互方式，并且簡單、易操作，這樣未來的交互體驗才會成功。簡言之，只有設計師真正地置身于用戶的角度，才能設計出更加實用、獨特、個性的產品，并最終滿足用戶群。

5 結語

通過調研總結，本文闡述了界面設計中存在的心理學、交互設計、用戶調研、界面整體架構、色彩、圖形符號的應用，以及對理論知識的淺談。目前互聯網發展形勢大好，UI 設計應緊跟時代的步伐，用戶群需求越來越高，設計師需要在保證基礎功能的前提下，多元化發展，要根據目標用戶個性化定制開發，將以人為本的原則與設計經驗緊密結合。在信息技術發展的驅動下，牢牢掌握新技術、新方向，使產品能夠成為一種特定的文化。文化構成了我們生活的精神空間和物質空間，優秀的傳統文化貫穿其中，將中國悠久的歷史傳播開來，這樣既符合了用戶心理需求又升華了產品本身。