淺談UI 設(shè)計(jì)的敏捷方法與理論實(shí)踐

陳苡涵

（東軟集團(tuán)股份有限公司，遼寧 沈陽(yáng) 110000）

隨著信息時(shí)代的飛速發(fā)展，新興學(xué)科“信息設(shè)計(jì)”一詞浮出水面。信息設(shè)計(jì)通常指的是具有信息傳遞功能的產(chǎn)品設(shè)計(jì)，開(kāi)發(fā)商為滿(mǎn)足用戶(hù)的參與感與體驗(yàn)感，同產(chǎn)品設(shè)計(jì)師研究出視覺(jué)與交互兩者為產(chǎn)品的賣(mài)點(diǎn)。視覺(jué)感受評(píng)分高的產(chǎn)品更受用戶(hù)青睞，而良好的交互體驗(yàn)感可以增加用戶(hù)對(duì)產(chǎn)品的依賴(lài)性，增加產(chǎn)品的附加值。

本文重點(diǎn)闡述UI 設(shè)計(jì)的本質(zhì)、色彩與圖形符號(hào)元素等對(duì)界面的重要性以及對(duì)視覺(jué)效果、用戶(hù)體驗(yàn)、交互設(shè)計(jì)三大模塊進(jìn)行比較和分析。

1 UI 設(shè)計(jì)的本質(zhì)探討

1.1 UI 的概念

UI 即User Interface（用戶(hù)界面）的簡(jiǎn)稱(chēng)。主要是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)，也叫界面設(shè)計(jì)[1]。

20 世紀(jì)90 年代初，有學(xué)者將“界面”一詞引入到管理科學(xué)領(lǐng)域。JefRaskin 在《人本界面，交互式系統(tǒng)設(shè)計(jì)》一書(shū)中指出：“就消費(fèi)者而言，界面就是產(chǎn)品?！盵2]一個(gè)好的產(chǎn)品不僅要有個(gè)性、有品位的視覺(jué)外表，還要有易于用戶(hù)操作的簡(jiǎn)單、自由、舒適的特點(diǎn)。

1.2 UI 設(shè)計(jì)的分類(lèi)

UI 設(shè)計(jì)由用戶(hù)研究、交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)三部分組成。用戶(hù)研究是指在新產(chǎn)品開(kāi)發(fā)前期，明確用戶(hù)的需求，了解產(chǎn)品的定位、目標(biāo)群等，致力于進(jìn)行深入的探討，以外部用戶(hù)需求作為產(chǎn)品目標(biāo)，體系化地建立產(chǎn)品設(shè)計(jì)語(yǔ)言，并用創(chuàng)意設(shè)計(jì)助力客戶(hù)業(yè)務(wù)，推動(dòng)設(shè)計(jì)體驗(yàn)與業(yè)務(wù)發(fā)展的對(duì)接。本著“用戶(hù)體驗(yàn)至上”的原則進(jìn)行溝通與交流，由抽象到具象再返回抽象的全鏈路過(guò)程。一套完整的產(chǎn)品設(shè)計(jì)要分為五大層面去研究考慮，即表現(xiàn)層、框架層、架構(gòu)層、范圍層、戰(zhàn)略層。最終，設(shè)計(jì)出讓客戶(hù)與用戶(hù)兩者皆滿(mǎn)意的產(chǎn)品。

比爾·莫格里奇（Bill Moggridge），世界上第一臺(tái)筆記本電腦GRiD Compass 的設(shè)計(jì)師，在1984 年一次設(shè)計(jì)會(huì)議上提出“交互設(shè)計(jì)”概念，當(dāng)時(shí)命名為“軟面（Soft Face）”，后更名為“Interaction Design”[3]。交互設(shè)計(jì)由交互設(shè)計(jì)師主要設(shè)計(jì)軟件的操作流程、軟件結(jié)構(gòu)、操作規(guī)范等，軟件開(kāi)發(fā)工程師用代碼配合實(shí)現(xiàn)完成。

視覺(jué)設(shè)計(jì)通常被人們稱(chēng)為“平面設(shè)計(jì)”，在這里包含種類(lèi)頗多，分為標(biāo)志設(shè)計(jì)、包裝設(shè)計(jì)、字體設(shè)計(jì)、圖像設(shè)計(jì)、廣告設(shè)計(jì)、裝潢設(shè)計(jì)、界面設(shè)計(jì)等。目前，UI 設(shè)計(jì)師從事的工作主要為界面設(shè)計(jì)，界面設(shè)計(jì)在我們?nèi)粘９ぷ魃钪袩o(wú)處不在。例如，手機(jī)App 客戶(hù)端、企業(yè)公司后臺(tái)管理系統(tǒng)、各大門(mén)戶(hù)網(wǎng)站、數(shù)據(jù)可視化大屏展示等。從心理學(xué)意義來(lái)分析，界面設(shè)計(jì)包含視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)、情感等。一套完整且高質(zhì)量的設(shè)計(jì)效果圖絕不是設(shè)計(jì)師與開(kāi)發(fā)者自己主觀的意見(jiàn)，而是需要考慮使用者、使用環(huán)境、使用方式，最終實(shí)現(xiàn)為用戶(hù)而設(shè)計(jì)。用戶(hù)在體驗(yàn)操作中進(jìn)行反饋，這是一個(gè)漫長(zhǎng)的過(guò)程。

2 UI 設(shè)計(jì)中存在的心理學(xué)

2.1 格式塔心理學(xué)

格式塔心理學(xué)又叫完形心理學(xué)，主張研究直接經(jīng)驗(yàn)和行為，強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，其探討人類(lèi)對(duì)于圖形色彩語(yǔ)言的認(rèn)知反應(yīng)，是心理學(xué)發(fā)展中的一個(gè)重要分支。在形式上、顏色上、距離上進(jìn)行自發(fā)的關(guān)系構(gòu)建[4]5。

圖像在空間上呈現(xiàn)了它的機(jī)理，這種機(jī)理被用戶(hù)的潛意識(shí)感知。在UI 設(shè)計(jì)中以格式塔心理美學(xué)為指導(dǎo)，用戶(hù)可以在設(shè)計(jì)師設(shè)計(jì)的圖形與色彩語(yǔ)言的指導(dǎo)下進(jìn)行有目的性的操作，并且這種行為是在用戶(hù)無(wú)意識(shí)自主作用下進(jìn)行的，這種潛意識(shí)的行為對(duì)于交互設(shè)計(jì)的介入有著極大的鋪墊作用。

2.2 視覺(jué)色彩心理學(xué)

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

用戶(hù)的視覺(jué)色彩對(duì)心理映射也有著不同的象征意義。通常情況下，以科技感為主題的設(shè)計(jì)選定藍(lán)色；環(huán)保、節(jié)能、安全為主題的設(shè)計(jì)選定綠色；政治、黨員、國(guó)家為主題的設(shè)計(jì)選定紅色。

3 UI 設(shè)計(jì)中整體架構(gòu)與風(fēng)格的應(yīng)用

3.1 框架構(gòu)圖的重要性

為了更好地給用戶(hù)展示交互性能，設(shè)計(jì)師需要對(duì)不同尺寸屏幕進(jìn)行塊狀分割。布局是界面構(gòu)成的前提，是后續(xù)展開(kāi)交互設(shè)計(jì)和界面設(shè)計(jì)的基礎(chǔ)。設(shè)計(jì)者需要根據(jù)需求及操作優(yōu)先級(jí)等內(nèi)容特點(diǎn)，選擇合理布局。無(wú)論移動(dòng)端、PC 端都應(yīng)保證色彩、字體、圖標(biāo)、圖片尺寸、常用組件這些必備元素的舒適性與合理性。

在UI 設(shè)計(jì)中必不可少的是常規(guī)狀態(tài)欄及次要信息欄的區(qū)域劃分。根據(jù)調(diào)查研究顯示，大約87%的左腦主導(dǎo)性人群比右腦主導(dǎo)性人群視覺(jué)范圍少12px，為了保證獲取信息的有效范圍，ios 和Android 系統(tǒng)分別對(duì)系統(tǒng)顯示中的導(dǎo)航欄、狀態(tài)欄、信息欄等進(jìn)行了相應(yīng)的調(diào)整。調(diào)整后的調(diào)查顯示，用戶(hù)的視覺(jué)舒適度與視覺(jué)承受力上升了約12%[4]12。

3.2 色彩的基本原理與視覺(jué)習(xí)慣思維

光源與物體的色彩對(duì)用戶(hù)的感知能力產(chǎn)生極大的影響。如果我們對(duì)來(lái)自?xún)蓚€(gè)不同光源環(huán)境下的相同屏幕進(jìn)行分析比較，可以發(fā)現(xiàn)界面所呈現(xiàn)的顏色并不相同。這是因?yàn)?，物體在不同光源照射的情況下產(chǎn)生的有效光頻率不同。

在UI 設(shè)計(jì)中，文字、圖標(biāo)符號(hào)與背景色之間有著千絲萬(wàn)縷的聯(lián)系。例如，一段字號(hào)較小的文字想要突出顯示，那么文字本身色彩就需要吸人眼球，反之，背景色區(qū)域要進(jìn)行色彩柔和調(diào)整，讓背景與文字有著強(qiáng)烈的色彩對(duì)比，這樣更易于使用者眼睛的迅速搜索。

色彩由明度、純度、色相三要素組成。色相決定顏色本身的屬性，而顏色的改變要隨著明度和純度的變化而變化。明度則較為特殊，它可以獨(dú)立地存在，不受色相與純度的影響。色彩的力量也體現(xiàn)在每個(gè)顏色都能產(chǎn)生不同的面積大小，把兩種色值相同且面積大小一致的顏色放在一起，因?yàn)槊鞫取⒓兌?、色相的不同，也?huì)給人視覺(jué)產(chǎn)生不同大小的感覺(jué)。

3.3 UI 設(shè)計(jì)的視覺(jué)元素與美學(xué)表達(dá)

圖形符號(hào)語(yǔ)言的發(fā)展使用過(guò)程可以追溯到人類(lèi)符號(hào)的創(chuàng)建初期，因此，從廣義上是指具有指代意義的圖形符號(hào)，具有高度濃縮、快捷傳遞信息、便于記憶的特性。從狹義上是指應(yīng)用于計(jì)算機(jī)軟件上的圖形符號(hào)，包括文字符號(hào)、密碼符號(hào)、圖騰等等。在界面設(shè)計(jì)中，我們稱(chēng)它為“現(xiàn)代化的命令”。

圖標(biāo)是UI 設(shè)計(jì)中除了文字以外最不可或缺的視覺(jué)元素，在界面中雖然只占很小的位置，但它卻是檢驗(yàn)設(shè)計(jì)師基本設(shè)計(jì)水平的標(biāo)準(zhǔn)，并且擔(dān)當(dāng)著整個(gè)產(chǎn)品點(diǎn)睛之重任，它可以直接影響一款產(chǎn)品的形象和氣質(zhì)。在界面中，圖標(biāo)既是整個(gè)頁(yè)面的核心支撐體，又直接影響著產(chǎn)品的視覺(jué)體驗(yàn)和產(chǎn)品調(diào)性。

圖標(biāo)在生活中隨處可見(jiàn)，是國(guó)際通用性語(yǔ)言。例如，手機(jī)App中微信、支付寶、淘寶等軟件啟動(dòng)圖標(biāo)；室內(nèi)設(shè)計(jì)中商場(chǎng)指示牌等等。圖標(biāo)具有形、意、色等多種刺激，具有傳遞信息的功能，抗干擾能力強(qiáng)，圖標(biāo)大小可隨意調(diào)節(jié)，表示視覺(jué)和空間概念，便于布局美觀。圖標(biāo)的形式多樣化，并且表現(xiàn)形式多種多樣，有線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)等等，在這里不一一贅述各分類(lèi)，查閱相關(guān)圖片一看即懂。

4 淺談UI 設(shè)計(jì)中的理論知識(shí)

4.1 視覺(jué)認(rèn)知理論

UI 界面設(shè)計(jì)中的視覺(jué)認(rèn)知主要是指用戶(hù)對(duì)視線所觸及的信息產(chǎn)生視覺(jué)反應(yīng)，進(jìn)而產(chǎn)生心理活動(dòng)并且逐步完成信息接收的過(guò)程[5]10。設(shè)計(jì)師在進(jìn)行界面設(shè)計(jì)時(shí)，要充分保證用戶(hù)的視覺(jué)最大化范圍，關(guān)注點(diǎn)定在視覺(jué)范圍內(nèi)能感知的信息上，這就要求設(shè)計(jì)師要會(huì)運(yùn)用心理暗示對(duì)用戶(hù)產(chǎn)生引導(dǎo)，使用戶(hù)用最快最有效的方法和途徑獲取最有價(jià)值的信息。

在視覺(jué)認(rèn)知里，視覺(jué)聯(lián)想和視覺(jué)經(jīng)驗(yàn)為兩大重要組成部分。視覺(jué)聯(lián)想是指建立在視覺(jué)經(jīng)驗(yàn)基礎(chǔ)上由一個(gè)事物轉(zhuǎn)移到另一個(gè)事物的心理過(guò)程。視覺(jué)經(jīng)驗(yàn)是指設(shè)計(jì)師在進(jìn)行創(chuàng)作設(shè)計(jì)時(shí)進(jìn)行的經(jīng)驗(yàn)聯(lián)想[5]10。由于每個(gè)人所處環(huán)境、背景、接受的文化教育不同，進(jìn)而經(jīng)歷不同，那么設(shè)計(jì)師會(huì)根據(jù)這些產(chǎn)生豐富的聯(lián)想，經(jīng)驗(yàn)越多，設(shè)計(jì)的作品更趨于大眾化用戶(hù)群，在最大程度上滿(mǎn)足大多數(shù)用戶(hù)的視覺(jué)需求和心理認(rèn)知。

4.2 信息傳播理論

在UI 界面設(shè)計(jì)中，設(shè)計(jì)師經(jīng)過(guò)理解、構(gòu)思、設(shè)計(jì)和規(guī)劃，用藝術(shù)的手法向某一特定的用戶(hù)群傳遞一個(gè)具體的信息[6]。因此，設(shè)計(jì)作為“視覺(jué)”進(jìn)行“傳達(dá)”是傳播的一種形式。顯而易見(jiàn)，在傳播學(xué)的深度影響下所產(chǎn)生的效果更具影響力。界面就是設(shè)計(jì)師向受眾群傳達(dá)信息的一種媒介。

4.3 人機(jī)交互理論

人機(jī)交互是指人與計(jì)算機(jī)之間使用某種對(duì)話(huà)語(yǔ)言，以一定的交互方式，為完成確定任務(wù)的人與計(jì)算機(jī)之間信息交換的過(guò)程[7]。隨著設(shè)備的逐漸復(fù)雜化，我們將有更多、更好的交互方式，例如當(dāng)下流行的語(yǔ)言控制、觸摸互動(dòng)等。希望我們?cè)谝杂脩?hù)為中心的前提下，創(chuàng)造出更多、更新奇的交互方式，并且簡(jiǎn)單、易操作，這樣未來(lái)的交互體驗(yàn)才會(huì)成功。簡(jiǎn)言之，只有設(shè)計(jì)師真正地置身于用戶(hù)的角度，才能設(shè)計(jì)出更加實(shí)用、獨(dú)特、個(gè)性的產(chǎn)品，并最終滿(mǎn)足用戶(hù)群。

5 結(jié)語(yǔ)

通過(guò)調(diào)研總結(jié)，本文闡述了界面設(shè)計(jì)中存在的心理學(xué)、交互設(shè)計(jì)、用戶(hù)調(diào)研、界面整體架構(gòu)、色彩、圖形符號(hào)的應(yīng)用，以及對(duì)理論知識(shí)的淺談。目前互聯(lián)網(wǎng)發(fā)展形勢(shì)大好，UI 設(shè)計(jì)應(yīng)緊跟時(shí)代的步伐，用戶(hù)群需求越來(lái)越高，設(shè)計(jì)師需要在保證基礎(chǔ)功能的前提下，多元化發(fā)展，要根據(jù)目標(biāo)用戶(hù)個(gè)性化定制開(kāi)發(fā)，將以人為本的原則與設(shè)計(jì)經(jīng)驗(yàn)緊密結(jié)合。在信息技術(shù)發(fā)展的驅(qū)動(dòng)下，牢牢掌握新技術(shù)、新方向，使產(chǎn)品能夠成為一種特定的文化。文化構(gòu)成了我們生活的精神空間和物質(zhì)空間，優(yōu)秀的傳統(tǒng)文化貫穿其中，將中國(guó)悠久的歷史傳播開(kāi)來(lái)，這樣既符合了用戶(hù)心理需求又升華了產(chǎn)品本身。