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

【摘要】UI界面設(shè)計(jì)是整個(gè)系統(tǒng)的門戶，其設(shè)計(jì)藝術(shù)和用戶體驗(yàn)感兩者都是組成這個(gè)門戶的重要部分。本文綜合考慮了色彩要素和網(wǎng)格排版的使用，結(jié)合UI動(dòng)效和設(shè)計(jì)心理學(xué)，探討了UI界面的設(shè)計(jì)思路。

【關(guān)鍵詞】色彩;排版;UI動(dòng)效;用戶的心理

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

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

一、設(shè)計(jì)的藝術(shù)

（一）色彩的意義

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

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

（二）排版

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

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

二、用戶體驗(yàn)感

（一）UI動(dòng)效

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

（二）設(shè)計(jì)心理學(xué)

用戶的良好體驗(yàn)感往往來源于在使用過程中細(xì)小的心理問題?？赡芩⒉蛔愕赖菂s無形中節(jié)省了用戶很多寶貴時(shí)間。當(dāng)使用滾動(dòng)條時(shí)，如果用戶向左滑動(dòng)時(shí)一般不會關(guān)注滾動(dòng)條右端，因此在滾動(dòng)條兩端設(shè)置箭頭。這個(gè)問題體現(xiàn)了游標(biāo)移動(dòng)到目標(biāo)之間的距離、目標(biāo)物的大小的所花費(fèi)的時(shí)間之間的關(guān)系，同時(shí)也正是心理學(xué)家費(fèi)茲的人機(jī)界面設(shè)計(jì)法則所研究的問題。對于那些會產(chǎn)生高風(fēng)險(xiǎn)的交互元素，設(shè)計(jì)師往往不希望用戶能輕松點(diǎn)擊，當(dāng)刪除按鈕與其他常用按鈕距離過于接近時(shí)，這會非常危險(xiǎn)。在很多時(shí)候用戶會常常懷疑自己可能患有選擇恐懼癥，但這實(shí)際上是選項(xiàng)實(shí)在太多造成的。席客定律指出反應(yīng)時(shí)間與觀察時(shí)間、閱讀文字、移動(dòng)鼠標(biāo)和可能相似的答案總數(shù)有關(guān)系。因此減少所需要反應(yīng)時(shí)間，降低犯錯(cuò)的概率，這會從很大程度上提高用戶的效率?？茖W(xué)家發(fā)現(xiàn)人類頭腦最好的狀態(tài)能含有7+2或者7-2項(xiàng)信息塊。這一原理也常常被應(yīng)用于移動(dòng)交互設(shè)計(jì)上，比如應(yīng)用的選項(xiàng)卡一般不會超過5個(gè)。

三、結(jié)語

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

參考文獻(xiàn)：

[1]陳根.UI入門一本就夠[M].化學(xué)工業(yè)出版社，2018.

[2]娜塔莉·娜海.UI設(shè)計(jì)心理學(xué)[M].中國人民大學(xué)出版社，2019.

[3]蔣飛燕.淺析色彩在UI設(shè)計(jì)中的應(yīng)用[J].傳播力研究，2019.