蘇文芝

（濟(jì)源職業(yè)技術(shù)學(xué)院，河南 濟(jì)源 459000）

UI設(shè)計(jì)中用戶體驗(yàn)研究

蘇文芝

（濟(jì)源職業(yè)技術(shù)學(xué)院，河南 濟(jì)源 459000）

計(jì)算機(jī)技術(shù)和互聯(lián)網(wǎng)的發(fā)展，使技術(shù)創(chuàng)新形態(tài)正在發(fā)生轉(zhuǎn)變。以用戶為中心、以人為本越來越得到重視。用戶體驗(yàn)也被稱作創(chuàng)新2.0模式的精髓。視覺體驗(yàn)是一種以單純的生理活動(dòng)與人的復(fù)雜思維活動(dòng)相互作用的認(rèn)知方式，這種方式受到感官因素、人自身文化素質(zhì)因素、環(huán)境因素等影響。文章探討了交互體驗(yàn)、情感體驗(yàn)、視覺體驗(yàn)等在UE設(shè)計(jì)中的應(yīng)用。

UI；交互體驗(yàn)；UE；視覺設(shè)計(jì)

1 UI設(shè)計(jì)中交互體驗(yàn)

1.1 界面操作方式

通常UI界面上的操作方式主要有單擊、拖動(dòng)、滑動(dòng)、橫掃、下拉、縮小、放大、長按等。通過以上簡單操作，可以體驗(yàn)移動(dòng)設(shè)備的操控性。

1.2 界面切換方式

由于手機(jī)在其屏幕尺寸大小以及交互方式與PC端的差異性，用戶在與界面交互時(shí)常常需要面對界面切換的操作，界面通過用戶的點(diǎn)擊或者滑動(dòng)等手勢來完成切換。為了給用戶帶來好的交互體驗(yàn)，設(shè)計(jì)師一般會采用平滑過渡的方式來引導(dǎo)用戶完成界面的切換。主要有平行滑動(dòng)、旋轉(zhuǎn)、變形、黑色背景、放大、多種方式同時(shí)使用等。

1.3 界面反饋

界面中的反饋是對用戶當(dāng)前操作的一個(gè)響應(yīng)，如果不給用戶一個(gè)正確的回饋，用戶可能會以為沒有操作成功或界面沒有其所需要的功能，最終可能放棄此操作。提示框、按鈕、圖標(biāo)、動(dòng)畫、聲音等界面的反饋，都應(yīng)該及時(shí)反饋給用戶，讓用戶流暢地完成交互。

2 UI設(shè)計(jì)中情感體驗(yàn)

優(yōu)秀的界面設(shè)計(jì)不但關(guān)注功能，更關(guān)注用戶的情感。只有當(dāng)用戶與界面的長期交互中建立起來的認(rèn)知、情感，才能使界面充分表達(dá)自身的品牌文化與意義，這個(gè)時(shí)期界面的設(shè)計(jì)不僅滿足了用戶的基礎(chǔ)功能需求，還充當(dāng)設(shè)計(jì)公司的品牌文化載體，用戶對設(shè)計(jì)公司也會有很高的忠誠度。最終帶來滿意的用戶體驗(yàn)。

3 UI設(shè)計(jì)中的視覺體驗(yàn)

3.1 視覺體驗(yàn)

視覺是光作用于視覺器官，使其感受細(xì)胞興奮，其信息經(jīng)視覺神經(jīng)系統(tǒng)加工后便產(chǎn)生視覺。通過眼睛人們可感受物體的外觀、光線的明暗、色彩的炫麗等。視覺還受到個(gè)人的認(rèn)知能力、文化修養(yǎng)、生活經(jīng)驗(yàn)、周圍環(huán)境等因素的影響。視覺體驗(yàn)是個(gè)人主觀意識與客觀條件的綜合作用下的結(jié)果。

3.2 UI設(shè)計(jì)中的視覺流程

界面上的視覺元素對用戶的視線起著向?qū)У淖饔茫缑娴牟季?、色彩、圖標(biāo)等設(shè)計(jì)都會吸引用戶的眼球。一般情況下，用戶的視覺軌跡按照從上到下與從左到右的運(yùn)動(dòng)規(guī)律，用戶在使用某個(gè)軟件時(shí)，通常會先按照視覺流程的規(guī)律全觀整體的界面，然后被界面中的設(shè)計(jì)亮點(diǎn)吸引，視線停留在亮點(diǎn)上慢慢地觀察其細(xì)節(jié)。用戶的視線就會以設(shè)計(jì)中的亮點(diǎn)為中心慢慢向四周擴(kuò)散。在設(shè)計(jì)界面時(shí)應(yīng)充分利用視覺流程規(guī)律，正確地引導(dǎo)用戶的閱讀與操作。

3.3 UI設(shè)計(jì)中的視覺結(jié)構(gòu)

視覺結(jié)構(gòu)是界面設(shè)計(jì)中的文字、圖像等元素按照一定的邏輯、包含以及先后的順序，進(jìn)行排版布局形成的有秩序的板塊。在視覺層次的設(shè)計(jì)時(shí)可以將信息進(jìn)行分組歸類，形成有規(guī)律的結(jié)構(gòu)，用戶可以快速找到識別中心。

3.4 視覺表達(dá)

﹙1﹚排版與布局。排版是對界面里的文字，圖形、圖標(biāo)等因素進(jìn)行位置、大小的編排，達(dá)到美觀且能傳達(dá)信息的過程。常見的界面排版主要有骨骼型、滿版型、上下分割型、左右分割型、對稱型、自由型等。布局是設(shè)計(jì)界面時(shí)忽略掉文字、圖形的細(xì)節(jié)部分，對整個(gè)塊面的布局，講究界面的整體性。

﹙2﹚色彩與紋理。界面的設(shè)計(jì)應(yīng)從整體出發(fā)把握界面的主題色調(diào)。一般情況下的界面設(shè)計(jì)通過調(diào)節(jié)色彩的純度、明度等來設(shè)計(jì)各個(gè)色彩的細(xì)節(jié)。顏色單調(diào)就會乏味，飽和度太高容易喧賓奪主，明度太低又容易沉悶灰暗。界面的主題色是對軟件風(fēng)格的一種途釋。在界面的設(shè)計(jì)中純色是使用最多的，界面的背景可以采用紋理，紋理的使用會增加界面設(shè)計(jì)的層次感。

﹙3﹚文字與字體。界面中的文字設(shè)計(jì)與色彩一樣，講究統(tǒng)一整體性，先要從界面的整體風(fēng)格著手，確定字號與字體，字體設(shè)計(jì)得太過或是缺乏設(shè)計(jì)感都會影響到整個(gè)界面的和諧美觀。應(yīng)該避免字體樣式使用太多導(dǎo)致界面雜亂沒有重點(diǎn)、字號與字體樣式不夠規(guī)范與整體風(fēng)格大相徑庭、字體樣式太過特殊導(dǎo)致用戶不能識別等等。設(shè)計(jì)師在面對字體設(shè)計(jì)時(shí)，在蘋果和安卓系統(tǒng)中應(yīng)采用不同的規(guī)范。

﹙4﹚圖像與圖標(biāo)。圖像較文字而言是視覺沖擊力較大的元素，能夠更加直觀表明內(nèi)容的含義，有很大的感染能力，圖像是用戶無障礙的溝通橋梁。圖像在位置和大小設(shè)計(jì)應(yīng)形成層次上的變化。軟件的圖標(biāo)通常被設(shè)計(jì)得比較精致，其充當(dāng)著標(biāo)志的作用，需要設(shè)計(jì)得比較美觀、細(xì)致。而界面中的圖標(biāo)通常是界面中需要被點(diǎn)擊的區(qū)域，并不需要多么精致、繁瑣的設(shè)計(jì)，而是要簡練、意義明確、辨識度高，顏色通常為灰色，在被選定時(shí)變?yōu)榱辽?/p>

﹙5﹚平面與立體。平面化的設(shè)計(jì)不僅減輕用戶的視覺負(fù)擔(dān)，在細(xì)節(jié)的修改上也容易實(shí)現(xiàn)。平面化的設(shè)計(jì)講究的是創(chuàng)意與造型的能力，設(shè)計(jì)師可以將大量時(shí)間花在創(chuàng)意的思考上而不是手繪某個(gè)陰影與高光。在界面更新改版時(shí)，平面化的設(shè)計(jì)可以快速地重新設(shè)計(jì)或更換顏色，適合目前快節(jié)奏的用戶需求。

3.5 UI設(shè)計(jì)中的視覺疲勞

視覺疲勞是由于人的眼睛長時(shí)間處于高強(qiáng)度的工作狀態(tài)，而出現(xiàn)眼部酸疼、流淚、視力下降等生理疲勞癥狀。視覺疲勞還包括眼部不適引起的心理疲勞，也就是審美疲勞。人們常說的“久入芝蘭之室不聞其香”，就是指由于時(shí)間長而對美好的事物失去了新鮮感、好奇心。

﹙1﹚設(shè)計(jì)中的色彩疲勞。色彩的舒適與疲勞感實(shí)際上是色彩刺激視覺生理和心理的綜合反應(yīng)。每一種色彩都會給人們帶來不一樣的視覺感受。正常情況下，暖色比冷色更能讓人視覺疲勞，或者色彩純度過高，多種色相對比度過高也會引起視覺的疲勞。

﹙2﹚設(shè)計(jì)中的閱讀疲勞。紙質(zhì)的書籍已經(jīng)不能滿足人們現(xiàn)在快節(jié)奏的閱讀需求，因此設(shè)計(jì)師們更應(yīng)該滿足用戶對在任何情況下都能閱讀的需求，減少閱讀的視覺疲勞。字體以遵照各自系統(tǒng)的字體設(shè)計(jì)準(zhǔn)則，如果追求畫面的美感與個(gè)性，需要根據(jù)界面的主題來設(shè)計(jì)字體。字體樣式的選擇應(yīng)該從界面的整體風(fēng)格去把握。字體的顏色要與背景的顏色區(qū)分，顏色太過相近會使用戶很難識別，但是區(qū)分的度也要把握好。

﹙3﹚UI設(shè)計(jì)中的視覺干擾。視覺干擾指通過向視覺系統(tǒng)發(fā)送指定信息，導(dǎo)致思維無法作出正確判斷。用戶無法預(yù)知的彈出控件以及懸浮廣告對用戶的視覺阻礙是較差體驗(yàn)的界面視覺干擾。

3.6 避免視覺疲勞

為減少用戶的視覺疲勞。設(shè)計(jì)界面時(shí)視覺流程應(yīng)清晰、色彩主題舒適、文字信息易讀等方面下功夫。

按照視覺流程的規(guī)律全觀整體的界面，降低不必要的視覺干擾，合理布局界面中元素層級關(guān)系，為用戶提供一個(gè)清晰的視覺流程。在設(shè)計(jì)界面時(shí)先根據(jù)軟件的類別來確定自己的主題色，突出標(biāo)題或者界面中的重點(diǎn)內(nèi)容時(shí)，可以選用主題色的對比色來設(shè)計(jì)。在界面的優(yōu)化中，設(shè)計(jì)師常把設(shè)計(jì)重心放在色彩、布局、圖像上，文字編排需在字體大小設(shè)置、文字留白、對齊、行段間距、甚至標(biāo)點(diǎn)符號上注意細(xì)節(jié)技巧。

4 結(jié)語

互聯(lián)網(wǎng)崛起并改變著人們的生活方式，UI設(shè)計(jì)不僅僅滿足于簡單的功能體驗(yàn)，在視覺體驗(yàn)上的要求也越來越高。通過對交互、情感與視覺等方面闡述UE在UI設(shè)計(jì)中的表達(dá)方式，文章提出UI設(shè)計(jì)的流程中視覺體驗(yàn)對優(yōu)化UI設(shè)計(jì)的重要性，對未來智能手機(jī)中的UI設(shè)計(jì)優(yōu)化提供支持。

[1]許玉鈴.改變過去影響未來的交互設(shè)計(jì)法則[M].北京：中信出版社，2011.

[2]池田拓司.App，這樣設(shè)計(jì)才好賣[M].北京：人民郵電出版社，2014.

[3]董建明，傅利民.人機(jī)交互以用戶為中心的設(shè)計(jì)和評估[M].北京：清華大學(xué)出版社，2013.

[4] 趙大羽，關(guān)東升.品味移動(dòng)設(shè)計(jì)[M].北京：人民郵電出版社，2013.

Research on user experience in UI design

Su Wenzhi
（Jiyuan Vocational and Technical College, Jiyuan 459000, China）

Computer technology and the development of the Internet make the innovation form of technology changed. User centered and people-oriented are getting more and more attention. User experience is also known as the essence of innovation 2.0 model.Visual experience is a kind of cognitive mode which is based on the interaction of simple physiological activities and people’s complex thinking activities, it is affected by the factors such as sensory factors, people’s own cultural quality, environemental factors, etc. This paper discusses the application of interactive experience, emotional experience and visual experience in the design of UE.

UI; interactive experience; UE; visual design

蘇文芝（1979— ），女，河南安陽，碩士，講師；研究方向：網(wǎng)絡(luò)技術(shù)與多媒體。