基于用戶體驗的UI設計要點分析

李時穎　馬俊偉

摘要：UI設計需要從信息傳達、視覺感受、交互過程等方面充分考慮用戶體驗才能更好的服務于人機交互。此外，“扁平化設計”策略的運用能夠讓與用戶的信息交互更為簡明高效。

關鍵詞：UI設計；用戶體驗；交互體驗；扁平化設計

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2017）36-0070-03

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

下面，本文將從用戶體驗的角度出發，分別從用戶對信息獲取與使用的體驗、用戶的視覺體驗、用戶的人機交互體驗三個方面探討UI設計的要點，最后，本文闡述了如何運用“扁平化設計”策略讓信息交互更為簡明高效。

1 UI設計中要充分考慮用戶的信息獲取與使用體驗

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

1） 明確信息的層級關系與重要程度

UI設計很重要的作用之一就是將信息傳達視覺化，因而在設計之前先必須先明確信息內部的邏輯、層級關系，區分出重點信息、次要信息、補充信息，從而確定信息的呈現方式。后續的設計工作都要以此作為基礎

2） 清晰完善的提示系統

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

3） 版面設計符合閱讀習慣

UI版面設計包括頁面的結構、頁面內板塊的分布、文字的顏色、大小、分布、間距等等很多內容。好的版面設計力求讓用戶獲得一種舒適的閱讀體驗。

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

此外，版面設計盡可能要統一但要避免單調。版面設計界定了信息的展示范圍和信息的分布方式。好的版式設計會在在閱讀時為用戶建立一種閱讀秩序和閱讀慣性，并在用戶適應此種秩序之后產生一種心理預期，即同類信息仍然以相同的版式出現。但如果所有頁面的版式都一成不變，就會給用戶帶來視覺倦怠，因此當信息的層級或者類別發生變化時，最好讓版式發生一些改變，但所有的版式都應該統一在一個較為協調的風格內。

4） UI設計中的符號性視覺語言的運用

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

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

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

6） 信息呈現單純明確

UI設計中，要盡可能的對信息進行歸類，并且在同一個頁面中，信息的呈現盡可能簡單、單純，也就是說，同一個頁面的內容盡可能不要過于復雜。當該頁面是一個信息列表時，也應該通過羅列簡明的主題來快速的標識列表內容。

2 UI設計中要充分考慮用戶的視覺體驗

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

1） 視覺風格的建立和統一

UI界面往往會確立整個app給用戶帶來的第一印象，清新明快、理性簡潔或是炫酷特別，這些印象往往會成為一個用戶選擇使用一個app的非常感性但是很重要的理由，一個界面的視覺風格往往由整個界面的主體色彩、圖標的風格形式等對具體的視覺元素的設計表現出來。整套UI設計都需要統一在明確、穩定的視覺風格內。

2） 一套精心設計的圖標與按鈕

一套精心設計的圖標和按鈕能讓UI設計在盡可能的簡潔明確的基礎上獲得一種精致感。好的圖標和按鈕應該是簡明的，讓人迅速通過圖形語言識別出圖標和按鈕的含義。但是即使是最簡單的、廣為使用的符號、圖形仍然可以通過對線條、色彩及細節設計呈現出不同的視覺效果，就像中國的漢字，同一個漢字用不同的字體書寫就展現出不同的氣質。并且，應當將圖標、按鈕的設計統一在整套界面的視覺風格中進行整體考慮。

3） 基于色彩心理學進行色彩設計

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

綜上所述，所有的顏色由于自己的色彩屬性都會帶來一種天然的心理感受，UI設計時色彩的運用如果與設計的主題、內容搭配得當，就會給用戶帶來一種舒適感和和諧感。一般來說，UI設計應該充分考慮到設計內容的行業氣質和類型選擇恰當的配色方案。

3 UI設計中要充分考慮交互效果的體驗

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

1） 設計師的換位思考

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

2） 運用動態效果增加交互的趣味性

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

3） 設計富有創意的交互方式

當用戶點擊一個按鈕，信息的呈現及反饋以一種明晰但是不同于心理預期的方式彈出或出現時，就會給用戶帶來一種新鮮感。富有創意的交互方式會帶來一種游戲般的樂趣，讓人機交互變得充滿探索性。但交互方式不能因為追求趣味變得過于花哨、晦澀難懂或者有歧義。

4 讓信息傳達更簡明的“扁平化設計”策略

此外，運用“扁平化設計”策略能夠讓UI設計更簡潔明晰。使得人機交互更為高效。

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

比起豐富、個性化的視覺體驗，扁平化設計更強調“信息”本身的傳達是否突出、鮮明。

UI設計作為平面設計中特別強調人機交互功能的應用領域，需要考慮到信息傳播的效率，當信息以簡明、直觀的方式讓用戶快速理解事物的工作方式和內在關聯時，信息傳播就是高效的。扁平化設計所具有的單純的視覺效果和明晰的視覺邏輯，在特別強調信息傳播效率時，能夠成為一種重要的設計思想。

如今，Windows、iOS、Android等操作系統的界面設計、移動終端上的許多app界面都具有明顯的“扁平化”設計傾向。

“扁平化設計”要想獲得簡介明快的視覺效果，而避免單調、冷漠的視覺體驗需要精心設計版式、色彩、圖標等視覺元素。

可以通過以下具體策略實施“扁平化設計”。

4.1 簡化設計元素

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

4.2 運用色彩進行扁平化設計的策略

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

通過色塊的大小、分布和關聯，用戶能夠非常直觀的確認一個UI界面的框架，迅速找到功能性的視覺元素，如導航條、狀態欄、按鈕、圖標等等，合理的配色方案能夠只用色塊本身清楚地表明這些組件內在的邏輯結構和信息的層級關系。

4.2.2 運用色彩對比與調和突出重點信息、統一重點信息之外的內容

1） 運用色彩對比突出重點信息

比起設計復雜的文字呈現和特殊效果，單純的使用色彩對比來突出重點信息是扁平化設計的一個重要方法。

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

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

2） 運用近似色統一重點信息以外的內容

將除重點信息之外的內容統一在一個色調內。讓它們形成一個相對于重點信息之外，對比較弱的整體。

3） 離散化的色彩漸變

UI設計中，經常使用色彩漸變豐富視覺的層次感，當設計元素需要出現層次變化時，使用離散式的色彩變化代替使用連續漸變的色彩的層次在視覺上更簡潔和富有趣味性。

4.3 文字的設計

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

4.4 圖標、按鈕的設計幾何化

幾何化的形體由于去除了復雜的線條，具有一種簡潔明快的感覺。

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

在設計圖標和按鈕時，可以綜合考慮整體界面圖形風格，均衡方形、圓形、自由形在整體界面中的分布最重達到一種統一、簡潔又有變化的設計效果。