藝術(shù)設(shè)計(jì)中UI設(shè)計(jì)及其應(yīng)用

袁韞璐（上海大學(xué) 上海美術(shù)學(xué)院，上海 200072）

隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來，新媒體藝術(shù)逐漸滲入人們的生活，新技術(shù)開始改變?nèi)藗兊纳罘绞健．?dāng)下電子產(chǎn)品中的應(yīng)用程序和軟件的類型也正不斷增加，幾乎涵蓋了人們工作，生活，學(xué)習(xí)，娛樂等各個(gè)方面。被大家所熟知的蘋果公司的智能產(chǎn)品iPad、iPhone，華為榮耀系列手機(jī)，廣受消費(fèi)者的喜愛。這其中原因不僅僅是出色的軟件和硬件設(shè)計(jì)，流暢美觀的UI設(shè)計(jì)也激起了消費(fèi)者的購買欲望。在這種背景下，有關(guān)UI設(shè)計(jì)的藝術(shù)設(shè)計(jì)迅速發(fā)展，人們對此也越來越關(guān)注。

一、UI設(shè)計(jì)及其分類

UI即User Interface的縮寫，譯為用戶界面，可以引申“為用戶與界面之間的關(guān)系”。UI設(shè)計(jì)也可稱為界面設(shè)計(jì)，它主要指對軟件的人機(jī)交互、操作邏輯和界面美觀進(jìn)行設(shè)計(jì)，提高軟件的品位和個(gè)性化，使其操作變得更為簡單和快捷，并基于用戶群體進(jìn)行視覺方面的設(shè)計(jì)，從而體現(xiàn)出軟件的特點(diǎn)。但從藝術(shù)角度來講，UI設(shè)計(jì)則是信息技術(shù)、藝術(shù)美感和市場三者結(jié)合的產(chǎn)物，它需要考慮操作、界面設(shè)計(jì)的藝術(shù)美感、消費(fèi)者的需要和對產(chǎn)品的期望，綜合了用戶需求、軟件功能、硬件配置和使用環(huán)境等多種因素。

通過對UI設(shè)計(jì)的不同需求以及界面設(shè)計(jì)元素對用戶行為的影響，UI設(shè)計(jì)可以分為以下幾類：

①基于功能實(shí)現(xiàn)的UI設(shè)計(jì)。交互式設(shè)計(jì)界面的最基本性能是它的功能和可用性。通過簡單的界面設(shè)計(jì)，順利地將作品本身的信息傳遞給用戶，使得用戶能成功完成操作，即用戶就是功能界面存在的基礎(chǔ)和價(jià)值。例如地鐵購票界面（如圖1-1），設(shè)計(jì)都很簡約直接，剔除了不需要的元素，讓人能夠方便操作。

圖1 -1 （來源：網(wǎng)頁）

②注重情感表達(dá)的UI設(shè)計(jì)。設(shè)計(jì)真正的藝術(shù)魅力，在于通過界面與用戶進(jìn)行情感傳遞。主要注重于用戶在該界面時(shí)，看著界面接觸到界面里的各種美化產(chǎn)生的情感。Android手機(jī)的鎖屏頁、時(shí)間、背景頁面的設(shè)計(jì)能夠跟隨季節(jié)和時(shí)間的變化而變化（如圖1-2），將用戶現(xiàn)實(shí)的感受融合進(jìn)了虛擬界面。

圖1 -2（來源：筆者自截）

③基于環(huán)境因素的UI設(shè)計(jì)。這一點(diǎn)是將界面結(jié)合環(huán)境一起考慮的，周圍的環(huán)境對設(shè)計(jì)作品的信息傳遞有特殊的影響。比如網(wǎng)頁的顏色或者界面在強(qiáng)光下看，或者在黑暗的環(huán)境里瀏覽會影響用戶體驗(yàn)。

二、藝術(shù)設(shè)計(jì)中UI設(shè)計(jì)的原則

在適應(yīng)市場流行的UI設(shè)計(jì)要求和樣式的同時(shí)，我們需要更加注意用戶操作的便利性，用戶屬性信息，用戶排列分組與人性化要求，應(yīng)遵循以下幾條合理的設(shè)計(jì)原則：

1. 風(fēng)格設(shè)計(jì)原則

風(fēng)格設(shè)計(jì)原則整體表現(xiàn)在界面效果的表現(xiàn)形式與平臺整體的風(fēng)格要求，即保持其一致性。

UI界面設(shè)計(jì)的一致性即通過視覺結(jié)構(gòu)、視覺層次、視覺元素等達(dá)到設(shè)計(jì)的統(tǒng)一整體，減少用戶認(rèn)知成本。如果在設(shè)計(jì)過程中忽視一致性原則，設(shè)計(jì)看起來比較復(fù)雜，那么用戶的認(rèn)知成本就會提高，給用戶帶來使用上的困難，延長用戶的學(xué)習(xí)時(shí)間，使用戶感到厭倦。

以常見的iOS系統(tǒng)中的界面設(shè)計(jì)來說，由于iPhone和iPad在設(shè)計(jì)風(fēng)格上較為統(tǒng)一（如圖2-1），形成了一套固定的設(shè)計(jì)風(fēng)格，所以無論人們先使用其中的前者還是后者，都可以很輕松地上手另外一樣。

2. 簡化操作原則

“好的設(shè)計(jì)是無意識的，就像我們在實(shí)際生活中操作一樣。”因此在進(jìn)行界面設(shè)計(jì)時(shí)，我們也需要對人類的一些日常行為習(xí)慣進(jìn)行深入了解。“理想情況下，UI設(shè)計(jì)要盡可能地簡潔，讓用戶有一個(gè)直接操作的感覺。”

例如，人們在生活中閱讀過報(bào)紙和書籍，對翻書的動(dòng)作非常熟悉，但是他們?nèi)绾卧陔娮悠聊簧戏瓡兀刻O果ibooks閱讀器的設(shè)計(jì)很好地解決了這個(gè)問題。 在書籍的展示或翻頁動(dòng)作的設(shè)計(jì)中，它基于人類的生活習(xí)慣，并使用模擬的生活環(huán)境和情況，讓用戶從本能上能夠很好地操作界面。

3.掌控體驗(yàn)

人類往往對能夠掌控自己和周圍的環(huán)境感到很舒心，如果超出所能控制的范圍，則會使其感到焦慮。保證界面處在用戶的掌控之中，讓用戶能夠靈活、自由地控制程序的運(yùn)行，這也會產(chǎn)生好的效果。

這里仍然以iPhone為例，自成立以來，它一直以觸摸設(shè)計(jì)的強(qiáng)大功能為特征。在長時(shí)間的使用過程中，大多數(shù)用戶已經(jīng)習(xí)慣了觸摸操作界面，在手機(jī)的整個(gè)使用過程中都具有控制經(jīng)驗(yàn)，讓用戶能夠感到舒適和滿足。

三、藝術(shù)設(shè)計(jì)中UI設(shè)計(jì)元素

隨著互聯(lián)網(wǎng)技術(shù)的進(jìn)一步的發(fā)展與普及，用戶對界面審美和個(gè)性化視覺的要求越來越高，對UI設(shè)計(jì)師同樣也提出了更多層次要求。

根據(jù)用戶的心理傾向，在一個(gè)移動(dòng)設(shè)備有限的空間內(nèi)創(chuàng)造出更加符合用戶習(xí)慣和操作要求的界面，其中涉及到的元素內(nèi)容也有很多。

1.頁面布局和尺寸

整體頁面布局是UI設(shè)計(jì)的重中之重，它確定了整個(gè)界面的基調(diào)和主體，讓用戶對其有一個(gè)初步的認(rèn)識，在這部分設(shè)計(jì)中，更需要注重美感。

頁面尺寸則是根據(jù)所要設(shè)計(jì)的屏幕大小和分辨率進(jìn)行設(shè)計(jì)，一般以填滿屏幕為宜，不宜過小。

對于多界面UI設(shè)計(jì)，首頁界面設(shè)計(jì)也非常重要。首頁作為用戶最先看到的第一界面，它的交互體驗(yàn)直接影響到用戶的后續(xù)體驗(yàn)。以世界上最大的體育運(yùn)動(dòng)用品網(wǎng)絡(luò)零售商Footlocker app的界面為例（如圖3-1），為了吸引顧客，它的首頁內(nèi)容（右1和右2）較其他采集顧客信息以及購買支付頁面中內(nèi)容更為豐富。

（來源：筆者自截）

2.文字和圖片

文字和圖片是界面構(gòu)成的主要元素。文字元素看似細(xì)微，但其本身也能傳達(dá)其它元素?zé)o法傳達(dá)的信息。通過空間、文字、圖形之間的相互關(guān)系，建立整體均衡狀態(tài)，以此產(chǎn)生和諧的美感。

針對不同的目標(biāo)群體可考慮設(shè)計(jì)不同的圖文提示，比如老年人使用的界面圖文可適當(dāng)放大，突出人性化。Big Launcher軟件（圖3-2） 就是一個(gè)可以讓所有安卓手機(jī)瞬間變身老人機(jī)的應(yīng)用。它界面簡潔，不花哨，符合老年人的審美觀。而年輕人使用的界面色彩設(shè)計(jì)可更加活躍一些，以此突出品牌特色，這種界面在生活中比較常見，本文就不一一舉例了。

3.色彩

色彩是絕大多數(shù)設(shè)計(jì)給用戶傳遞的最顯著的視覺元素之一，是藝術(shù)表現(xiàn)的要素之一，不同的色彩能夠使用戶產(chǎn)生不同的感受。比如，在開展 UI界面設(shè)計(jì)的過程中，藍(lán)色是UI設(shè)計(jì)中最常用的顏色之一，能夠給人一種信任感，F(xiàn)acebook、Twitter、Shazam、Safar等界面設(shè)計(jì)中大多是選擇藍(lán)色為主色調(diào)。

同時(shí)，色彩也并不是越多越好，通常配色方案當(dāng)中，色彩數(shù)量盡量控制在3種左右。設(shè)計(jì)師根據(jù)色彩對人們心理的影響，合理地加以運(yùn)用，通過創(chuàng)建配色方案，系統(tǒng)地對UI界面的色彩進(jìn)行管理，能更好的進(jìn)行視覺信息傳達(dá)。

另外也有一些特殊類型的軟件，采用色調(diào)顛倒的方式提高用戶的黏度。例如現(xiàn)在廣受大家喜愛的Keep運(yùn)動(dòng)軟件，它整體以冷色系為主，旨在與打造出簡潔、寧靜的輕運(yùn)動(dòng)風(fēng)格，這種潤物細(xì)無聲的低強(qiáng)度積極情緒，即使用戶每天都打開來用，也不會因?yàn)?UI 界面而產(chǎn)生疲累等負(fù)面情緒。

四、UI設(shè)計(jì)的應(yīng)用

美好的事物總是讓人心馳神往，在如今人們被電子產(chǎn)品充斥著的生活，優(yōu)秀的UI設(shè)計(jì)一定程度上更能吸引消費(fèi)者的興趣，而融入了藝術(shù)設(shè)計(jì)的UI設(shè)計(jì)也直接影響了產(chǎn)品本身的品質(zhì)感。

iPhone和iPad，拋開科技水平的領(lǐng)先和大力的宣傳，富有美學(xué)的UI設(shè)計(jì)也是“果粉”們選擇它的原因之一。2019年，在蘋果的發(fā)布會上由喬布斯第一次為觀眾展示滑動(dòng)解鎖的那一刻，從此UI設(shè)計(jì)走進(jìn)了全世界。僅從這一項(xiàng)實(shí)例來看，UI設(shè)計(jì)的作用就不能被忽視。

結(jié)語

伴隨著科學(xué)技術(shù)的不斷發(fā)展，UI設(shè)計(jì)也跟隨時(shí)代和用戶需求不斷進(jìn)步。同時(shí)，在未來的設(shè)計(jì)過程中，滿足規(guī)范性保障的前提下，更需具有一些美術(shù)、藝術(shù)基本理論和知識，來讓 UI設(shè)計(jì)更加具有藝術(shù)特征。只有這樣，UI設(shè)計(jì)才能為電子設(shè)備添加情感色彩，滿足人們的心理需求和情感交流，豐富人們的生活，體現(xiàn)出更加人性化的設(shè)計(jì)和科技帶來的舒適感。