基于用戶體驗(yàn)的UI設(shè)計(jì)要點(diǎn)分析

李時(shí)穎　馬俊偉

摘要：UI設(shè)計(jì)需要從信息傳達(dá)、視覺感受、交互過程等方面充分考慮用戶體驗(yàn)才能更好的服務(wù)于人機(jī)交互。此外，“扁平化設(shè)計(jì)”策略的運(yùn)用能夠讓與用戶的信息交互更為簡(jiǎn)明高效。

關(guān)鍵詞：UI設(shè)計(jì)；用戶體驗(yàn)；交互體驗(yàn)；扁平化設(shè)計(jì)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）36-0070-03

UI設(shè)計(jì)作為一種服務(wù)于人機(jī)交互的設(shè)計(jì)領(lǐng)域，所具有的重要功能就是讓信息傳達(dá)與交互在一個(gè)友善、明晰、便捷的界面中進(jìn)行，是一項(xiàng)綜合了審美感受與設(shè)計(jì)觀念的復(fù)雜活動(dòng)，需要考慮非常多的因素。好的UI設(shè)計(jì)實(shí)際上應(yīng)該是一個(gè)很便捷的工具，要讓用戶覺得好用、方便，同時(shí)它又應(yīng)該是美的、令人愉悅的和有趣味的。UI設(shè)計(jì)必須服務(wù)于用戶，因而在設(shè)計(jì)時(shí)要從用戶體驗(yàn)的角度進(jìn)行充分思考。

下面，本文將從用戶體驗(yàn)的角度出發(fā)，分別從用戶對(duì)信息獲取與使用的體驗(yàn)、用戶的視覺體驗(yàn)、用戶的人機(jī)交互體驗(yàn)三個(gè)方面探討UI設(shè)計(jì)的要點(diǎn)，最后，本文闡述了如何運(yùn)用“扁平化設(shè)計(jì)”策略讓信息交互更為簡(jiǎn)明高效。

1 UI設(shè)計(jì)中要充分考慮用戶的信息獲取與使用體驗(yàn)

UI設(shè)計(jì)要充分為用戶考慮，讓信息以一種有序、明晰的方式傳達(dá)給用戶，并且盡可能考慮到用戶解讀信息時(shí)的認(rèn)知規(guī)律，避免讓用戶產(chǎn)生解讀困難或者誤讀。對(duì)于手機(jī)app，用戶往往在很短的時(shí)間內(nèi)就能分辨出一個(gè)app是否好用，好用的app總是讓人不需要花費(fèi)太多精力就能迅速掌握使用方法，并能輕易的獲得想要的內(nèi)容。

1） 明確信息的層級(jí)關(guān)系與重要程度

UI設(shè)計(jì)很重要的作用之一就是將信息傳達(dá)視覺化，因而在設(shè)計(jì)之前先必須先明確信息內(nèi)部的邏輯、層級(jí)關(guān)系，區(qū)分出重點(diǎn)信息、次要信息、補(bǔ)充信息，從而確定信息的呈現(xiàn)方式。后續(xù)的設(shè)計(jì)工作都要以此作為基礎(chǔ)

2） 清晰完善的提示系統(tǒng)

用戶面對(duì)的往往是超文本形式的復(fù)雜信息，在閱讀時(shí)需要快速瀏覽要點(diǎn)、經(jīng)常切換內(nèi)容的層級(jí)、返回或者前進(jìn)、或是需要快速定位到新的關(guān)鍵詞。此時(shí)，在UI設(shè)計(jì)中建立一套方便的提示系統(tǒng)和常用功能的快捷接口就顯得極為重要，提示系統(tǒng)在界面中即不能干擾重點(diǎn)信息的呈現(xiàn)，又能方便用戶及時(shí)發(fā)現(xiàn)。

3） 版面設(shè)計(jì)符合閱讀習(xí)慣

UI版面設(shè)計(jì)包括頁面的結(jié)構(gòu)、頁面內(nèi)板塊的分布、文字的顏色、大小、分布、間距等等很多內(nèi)容。好的版面設(shè)計(jì)力求讓用戶獲得一種舒適的閱讀體驗(yàn)。

UI版面設(shè)計(jì)所遵循的一個(gè)基本原則就是版面中的各板塊分布要和諧，重點(diǎn)突出，同時(shí)，排版設(shè)計(jì)必須符合人的視覺規(guī)律。人們看東西時(shí)一般習(xí)慣于從左到右、從上到下，或者順時(shí)針運(yùn)動(dòng)，這種方式人們會(huì)覺得閱讀時(shí)的眼球運(yùn)動(dòng)較為流暢和輕松，排版設(shè)計(jì)時(shí)一般要求尊重這一視覺習(xí)慣。

此外，版面設(shè)計(jì)盡可能要統(tǒng)一但要避免單調(diào)。版面設(shè)計(jì)界定了信息的展示范圍和信息的分布方式。好的版式設(shè)計(jì)會(huì)在在閱讀時(shí)為用戶建立一種閱讀秩序和閱讀慣性，并在用戶適應(yīng)此種秩序之后產(chǎn)生一種心理預(yù)期，即同類信息仍然以相同的版式出現(xiàn)。但如果所有頁面的版式都一成不變，就會(huì)給用戶帶來視覺倦怠，因此當(dāng)信息的層級(jí)或者類別發(fā)生變化時(shí)，最好讓版式發(fā)生一些改變，但所有的版式都應(yīng)該統(tǒng)一在一個(gè)較為協(xié)調(diào)的風(fēng)格內(nèi)。

4） UI設(shè)計(jì)中的符號(hào)性視覺語言的運(yùn)用

符號(hào)性的視覺語言已經(jīng)成為現(xiàn)代生活中司空見慣的視覺傳達(dá)形式，比如洗手間標(biāo)識(shí)圖形、嬰兒頭像圖形、箭頭圖形、各種交通標(biāo)志等等。很多符號(hào)性的視覺語言的使用在人們的日常生活中已經(jīng)約定俗成，具有非常明確的、廣為認(rèn)可的含義，如電商購物網(wǎng)站的購物車圖形、如天氣預(yù)報(bào)類網(wǎng)站代表晴天、陰天、雨天的圖形，以及分別代表播放、暫停和停止的三角形、雙豎線和方形。在UI設(shè)計(jì)中合理的選擇和運(yùn)用符號(hào)性的視覺語言就顯得十分重要，在UI設(shè)計(jì)中，應(yīng)當(dāng)盡可能使用廣為熟知的符號(hào)性語言。選擇人們熟悉的符號(hào)性視覺語言相比于一套全新的符號(hào)語言系統(tǒng)更容易讓用戶迅速獲得提示，產(chǎn)生一種熟悉的自信感，也避免發(fā)生認(rèn)知障礙從而產(chǎn)生解讀困難。更利于交互過程的順利和流暢。

5） 盡可能將抽象的信息視覺化

很多信息都是以數(shù)據(jù)的形式呈現(xiàn)，數(shù)字化的信息會(huì)有一種精確、令人信服的感覺，但是大量的數(shù)據(jù)卻會(huì)讓用戶感覺枯燥和乏味，用戶在直接閱讀數(shù)據(jù)時(shí)較難獲得一種關(guān)于數(shù)據(jù)間關(guān)系的直觀認(rèn)識(shí)。此時(shí)，盡可能將數(shù)據(jù)等抽象化的信息轉(zhuǎn)化成為視覺語言，能夠獲得更好的傳播效果，比如充分運(yùn)用圖表，將抽象數(shù)據(jù)轉(zhuǎn)化成圖形，能夠讓用戶迅速明確數(shù)據(jù)間的邏輯關(guān)系并獲得直觀的印象。如支付寶賬單統(tǒng)計(jì)功能將各類開銷用餅圖的方式進(jìn)行呈現(xiàn)。

6） 信息呈現(xiàn)單純明確

UI設(shè)計(jì)中，要盡可能的對(duì)信息進(jìn)行歸類，并且在同一個(gè)頁面中，信息的呈現(xiàn)盡可能簡(jiǎn)單、單純，也就是說，同一個(gè)頁面的內(nèi)容盡可能不要過于復(fù)雜。當(dāng)該頁面是一個(gè)信息列表時(shí)，也應(yīng)該通過羅列簡(jiǎn)明的主題來快速的標(biāo)識(shí)列表內(nèi)容。

2 UI設(shè)計(jì)中要充分考慮用戶的視覺體驗(yàn)

好的界面設(shè)計(jì)應(yīng)該具有美感，為用戶帶來方便的實(shí)用功能的體驗(yàn)同時(shí)，提供一種令人愉悅的視覺體驗(yàn)。如何讓UI設(shè)計(jì)更具審美價(jià)值，是非常值得考慮的問題。

1） 視覺風(fēng)格的建立和統(tǒng)一

UI界面往往會(huì)確立整個(gè)app給用戶帶來的第一印象，清新明快、理性簡(jiǎn)潔或是炫酷特別，這些印象往往會(huì)成為一個(gè)用戶選擇使用一個(gè)app的非常感性但是很重要的理由，一個(gè)界面的視覺風(fēng)格往往由整個(gè)界面的主體色彩、圖標(biāo)的風(fēng)格形式等對(duì)具體的視覺元素的設(shè)計(jì)表現(xiàn)出來。整套UI設(shè)計(jì)都需要統(tǒng)一在明確、穩(wěn)定的視覺風(fēng)格內(nèi)。

2） 一套精心設(shè)計(jì)的圖標(biāo)與按鈕

一套精心設(shè)計(jì)的圖標(biāo)和按鈕能讓UI設(shè)計(jì)在盡可能的簡(jiǎn)潔明確的基礎(chǔ)上獲得一種精致感。好的圖標(biāo)和按鈕應(yīng)該是簡(jiǎn)明的，讓人迅速通過圖形語言識(shí)別出圖標(biāo)和按鈕的含義。但是即使是最簡(jiǎn)單的、廣為使用的符號(hào)、圖形仍然可以通過對(duì)線條、色彩及細(xì)節(jié)設(shè)計(jì)呈現(xiàn)出不同的視覺效果，就像中國的漢字，同一個(gè)漢字用不同的字體書寫就展現(xiàn)出不同的氣質(zhì)。并且，應(yīng)當(dāng)將圖標(biāo)、按鈕的設(shè)計(jì)統(tǒng)一在整套界面的視覺風(fēng)格中進(jìn)行整體考慮。

3） 基于色彩心理學(xué)進(jìn)行色彩設(shè)計(jì)

色彩心理學(xué)理論中，色彩具有明顯的象征性。一般來說，白色帶來純凈、干凈、輕巧的感覺，白色為主的UI界面會(huì)讓人感到干凈舒適；灰色讓人感覺優(yōu)雅，沉穩(wěn)、理性，使用得當(dāng)會(huì)帶來高級(jí)感，使用不當(dāng)則會(huì)顯得臟；黑色能夠象征權(quán)威、高雅，同時(shí)也顯得低調(diào)、深邃。當(dāng)黑色與有彩色搭配時(shí)，強(qiáng)烈的明度和色相對(duì)比能夠營造一種創(chuàng)意的、另類、現(xiàn)代的氣氛；藍(lán)色系帶來一種理性、可靠、專業(yè)的印象，如支付寶app，使用藍(lán)色作為主色調(diào)就會(huì)帶來一種專業(yè)可靠地感覺。此外，藍(lán)色還有一種思考、哲學(xué)的知性意味，例如知乎app也使用藍(lán)色作為主色調(diào)；大地色（例如金棕、米色、咖啡色）帶來一種平和、親切、包容、溫暖的印象；金屬色（金色、銀色）帶來一種金屬光澤的華麗感和現(xiàn)代感，但金屬感同時(shí)也會(huì)顯得冰冷；紅色充滿熱情，有一種熱情、熱鬧的氣氛；粉紅色、玫紅色則是非常具有女性色彩的顏色，讓人感到甜蜜、浪漫、唯美、溫柔；橙色很有活力，有一種熱烈、向上的氣氛；黃色因?yàn)槊鞫葮O高，有非常強(qiáng)烈的提示作用，大面積使用會(huì)帶來一種躁動(dòng)感；綠色給人帶來新鮮、自由、和平、清新自然的感受，很多蔬果類的電商app都很喜歡使用綠色作為主色；紫色帶來優(yōu)雅、浪漫，以及神秘、未知的氣氛，容易讓人聯(lián)想到變幻莫測(cè)或精神世界有關(guān)的事物。

綜上所述，所有的顏色由于自己的色彩屬性都會(huì)帶來一種天然的心理感受，UI設(shè)計(jì)時(shí)色彩的運(yùn)用如果與設(shè)計(jì)的主題、內(nèi)容搭配得當(dāng)，就會(huì)給用戶帶來一種舒適感和和諧感。一般來說，UI設(shè)計(jì)應(yīng)該充分考慮到設(shè)計(jì)內(nèi)容的行業(yè)氣質(zhì)和類型選擇恰當(dāng)?shù)呐渖桨浮?/p>

3 UI設(shè)計(jì)中要充分考慮交互效果的體驗(yàn)

人機(jī)交互是UI設(shè)計(jì)中需要考慮的一個(gè)關(guān)鍵問題，事實(shí)上，每個(gè)用戶在使用一個(gè)app、或者機(jī)器時(shí)都會(huì)有自己的使用習(xí)慣或者自己理解信息的方式。人們?cè)谑褂靡粋€(gè)全新的界面時(shí)，其實(shí)是一個(gè)觀察、判斷和探索的過程，用戶會(huì)根據(jù)界面的設(shè)計(jì)、分布、提示去猜測(cè)可能的使用方法或者交互規(guī)則。好的交互設(shè)計(jì)能夠給用戶足夠清楚地提示，讓用戶在交互過程中迅速學(xué)習(xí)到一種人機(jī)交互的“接口”，而不會(huì)讓用戶不知所措或者頻頻碰壁。同時(shí)，除了讓交互過程更順利流暢，好的交互設(shè)計(jì)還能帶來具有更多參與性的豐富的趣味。

1） 設(shè)計(jì)師的換位思考

在進(jìn)行交互過程設(shè)計(jì)時(shí)，設(shè)計(jì)師必須要能換位思考。必須想象自己是首次接觸此界面的使用者，通過一對(duì)系列問題的考察，例如：我有什么需要，我希望得到何種提示、重要的按鈕是不是容易被察覺，是不是能夠獲得操作正確還是錯(cuò)誤的及時(shí)反饋，是不是能夠及時(shí)返回到前一步操作等等……得到一系列解決方法，從而構(gòu)建整個(gè)交互過程的框架。

2） 運(yùn)用動(dòng)態(tài)效果增加交互的趣味性

當(dāng)蘋果手機(jī)第一次在UI中使用動(dòng)態(tài)圖標(biāo)和按鈕時(shí)給使用它的用戶帶來了非常大的樂趣，人們長(zhǎng)按一個(gè)圖標(biāo)，它便晃動(dòng)起來，提示你它在等待你的下一步操作。事實(shí)上，動(dòng)態(tài)效果的使用打破了傳統(tǒng)的簡(jiǎn)單的超鏈接式的交互方式，提供了富有趣味的交互提示。比如可以通過圖標(biāo)顏色的閃動(dòng)、變大、縮小等等給予用戶明確的提示；或者通過圖標(biāo)在某個(gè)方向的運(yùn)動(dòng)引導(dǎo)用戶的視線，為用戶提供必需的線索；還有一些有趣動(dòng)態(tài)效果，比如qq、微信中發(fā)表生日祝福時(shí)接收方會(huì)收到彈幕式的鮮花及蛋糕，感受到一種強(qiáng)烈的氣氛；將一個(gè)圖標(biāo)刪除后它會(huì)自動(dòng)燃燒殆盡或變成煙霧消失等等，好的動(dòng)態(tài)效果即能有效的吸引并引導(dǎo)用戶完成交互，同時(shí)還讓用戶體驗(yàn)到充分參與的樂趣。

3） 設(shè)計(jì)富有創(chuàng)意的交互方式

當(dāng)用戶點(diǎn)擊一個(gè)按鈕，信息的呈現(xiàn)及反饋以一種明晰但是不同于心理預(yù)期的方式彈出或出現(xiàn)時(shí)，就會(huì)給用戶帶來一種新鮮感。富有創(chuàng)意的交互方式會(huì)帶來一種游戲般的樂趣，讓人機(jī)交互變得充滿探索性。但交互方式不能因?yàn)樽非笕の蹲兊眠^于花哨、晦澀難懂或者有歧義。

4 讓信息傳達(dá)更簡(jiǎn)明的“扁平化設(shè)計(jì)”策略

此外，運(yùn)用“扁平化設(shè)計(jì)”策略能夠讓UI設(shè)計(jì)更簡(jiǎn)潔明晰。使得人機(jī)交互更為高效。

扁平化設(shè)計(jì)概念，即“Flat Design”，這種設(shè)計(jì)思想早在二零零八年時(shí)，就由谷歌公司提出。該設(shè)計(jì)思想的核心意義是：去除3D、立體效果、肌理、漸變等復(fù)雜的裝飾元素，通過使用極簡(jiǎn)、抽象、幾何及符號(hào)化的設(shè)計(jì)語言傳達(dá)視覺信息。

比起豐富、個(gè)性化的視覺體驗(yàn)，扁平化設(shè)計(jì)更強(qiáng)調(diào)“信息”本身的傳達(dá)是否突出、鮮明。

UI設(shè)計(jì)作為平面設(shè)計(jì)中特別強(qiáng)調(diào)人機(jī)交互功能的應(yīng)用領(lǐng)域，需要考慮到信息傳播的效率，當(dāng)信息以簡(jiǎn)明、直觀的方式讓用戶快速理解事物的工作方式和內(nèi)在關(guān)聯(lián)時(shí)，信息傳播就是高效的。扁平化設(shè)計(jì)所具有的單純的視覺效果和明晰的視覺邏輯，在特別強(qiáng)調(diào)信息傳播效率時(shí)，能夠成為一種重要的設(shè)計(jì)思想。

如今，Windows、iOS、Android等操作系統(tǒng)的界面設(shè)計(jì)、移動(dòng)終端上的許多app界面都具有明顯的“扁平化”設(shè)計(jì)傾向。

“扁平化設(shè)計(jì)”要想獲得簡(jiǎn)介明快的視覺效果，而避免單調(diào)、冷漠的視覺體驗(yàn)需要精心設(shè)計(jì)版式、色彩、圖標(biāo)等視覺元素。

可以通過以下具體策略實(shí)施“扁平化設(shè)計(jì)”。

4.1 簡(jiǎn)化設(shè)計(jì)元素

UI界面設(shè)計(jì)一般由背景色、按鈕、菜單欄、導(dǎo)航條、狀態(tài)欄、圖標(biāo)等構(gòu)成，其中每個(gè)部分都要由線條、色彩、文字、圖案等元素構(gòu)成。“扁平化設(shè)計(jì)”思想的核心就是通過簡(jiǎn)化設(shè)計(jì)元素最終達(dá)到一種簡(jiǎn)潔明晰的視覺效果，所以一般盡可能使用幾何形代替較為邊緣較為復(fù)雜的形體、去除過于復(fù)雜的細(xì)節(jié)，盡可能將繁雜的細(xì)節(jié)簡(jiǎn)化成為較為單純的線條、色塊從而讓視覺語言更簡(jiǎn)潔。

4.2 運(yùn)用色彩進(jìn)行扁平化設(shè)計(jì)的策略

4.2.1 通過合理的配色直觀的展示UI界面的框架

通過色塊的大小、分布和關(guān)聯(lián)，用戶能夠非常直觀的確認(rèn)一個(gè)UI界面的框架，迅速找到功能性的視覺元素，如導(dǎo)航條、狀態(tài)欄、按鈕、圖標(biāo)等等，合理的配色方案能夠只用色塊本身清楚地表明這些組件內(nèi)在的邏輯結(jié)構(gòu)和信息的層級(jí)關(guān)系。

4.2.2 運(yùn)用色彩對(duì)比與調(diào)和突出重點(diǎn)信息、統(tǒng)一重點(diǎn)信息之外的內(nèi)容

1） 運(yùn)用色彩對(duì)比突出重點(diǎn)信息

比起設(shè)計(jì)復(fù)雜的文字呈現(xiàn)和特殊效果，單純的使用色彩對(duì)比來突出重點(diǎn)信息是扁平化設(shè)計(jì)的一個(gè)重要方法。

用黑白灰的無彩色作為背景色，用有彩色作為重點(diǎn)信息的顏色能夠形成鮮明的對(duì)比。背景色一般占據(jù)整體界面的60%-80%的比例，無彩色不容易造成視覺疲勞，容易讓人感到寧靜與平和，同時(shí)，除了明度較為接近的白與黃、藍(lán)、紫與黑，大部分有彩色都能在無彩色的背景上得到較為明顯的突出效果。

補(bǔ)色和冷暖反差明顯的顏色放在一起時(shí)能夠帶來明顯的視覺反差，起到很好的突出重點(diǎn)和提示信息的作用。

2） 運(yùn)用近似色統(tǒng)一重點(diǎn)信息以外的內(nèi)容

將除重點(diǎn)信息之外的內(nèi)容統(tǒng)一在一個(gè)色調(diào)內(nèi)。讓它們形成一個(gè)相對(duì)于重點(diǎn)信息之外，對(duì)比較弱的整體。

3） 離散化的色彩漸變

UI設(shè)計(jì)中，經(jīng)常使用色彩漸變豐富視覺的層次感，當(dāng)設(shè)計(jì)元素需要出現(xiàn)層次變化時(shí)，使用離散式的色彩變化代替使用連續(xù)漸變的色彩的層次在視覺上更簡(jiǎn)潔和富有趣味性。

4.3 文字的設(shè)計(jì)

“扁平化”設(shè)計(jì)中，文字的設(shè)計(jì)對(duì)視覺效果起到非常重要的作用。相對(duì)來說，扁平化的設(shè)計(jì)更適合選擇一些線性簡(jiǎn)單流暢的字體，不要有過多裝飾和變化；同時(shí)，可以使用讓相同字體的大小發(fā)生變化來區(qū)分文字層級(jí)來代替使用不同自己區(qū)分文字層級(jí)，能夠帶來更簡(jiǎn)潔的設(shè)計(jì)效果。

4.4 圖標(biāo)、按鈕的設(shè)計(jì)幾何化

幾何化的形體由于去除了復(fù)雜的線條，具有一種簡(jiǎn)潔明快的感覺。

人們對(duì)不同幾何形狀的心理感受是不一樣的，在設(shè)計(jì)按鈕時(shí)，方形的按鈕相較于圓形的按鈕會(huì)顯得不那么順滑流暢；而圓形按鈕相較于圓角矩形的按鈕顯得更為可愛；此外，圓形作為一種具有視覺集中效果的幾何形，非常容易成為一個(gè)視覺焦點(diǎn)，引導(dǎo)用戶的視線和注意力。

在設(shè)計(jì)圖標(biāo)和按鈕時(shí)，可以綜合考慮整體界面圖形風(fēng)格，均衡方形、圓形、自由形在整體界面中的分布最重達(dá)到一種統(tǒng)一、簡(jiǎn)潔又有變化的設(shè)計(jì)效果。