UI設計中用戶交互體驗的色彩構成與視覺心理

丁春

山東工藝美術學院 山東 濟南 250014

引言：隨著社會的發展與進步，在科研產品及工業生產產品方面實用性已經不是參考其價值的唯一標準，需求性才是如今產品的重中之重。針對這一點，在對人機交互技術進行研發時，研發方可將研發成果實施用戶體驗，令用戶憑借視覺感官對產品進行感受并以此為依據提出優化策略，從而令研發方真正把握住用戶的視覺心理，持續優化色彩構成，為后續產品的使用與推廣奠定基礎。

1. 用戶交互體驗與色彩構成、視覺思維間的關系

1.1 用戶交互體驗的視覺需求

用戶體驗是所有產品研發與生產的最根本前提，亦是產品后續優化的最根本依據。在當今時代下，用戶的視覺需求在用戶對UI產品的整體需求中占據了相當大的一部分比重，在UI產品市場中常常會見到這樣的情景，兩類質量效果相似的產品視覺效果良好的產品使用量遠遠超過另一類產品，這便是用戶的視覺需求，可以說用戶交互體驗與視覺需求間聯系緊密[1]。故此如今研發人員需要考慮的并不僅僅是產品的質量與功效，視覺思維同樣應當納入研發的考慮范疇之中。那么在UI設計中該如何滿足用戶的視覺需求呢？一般而言，UI設計中的視覺需求可以利用具備色彩結構及文字設計支持的框架結構與整體風格來進行維持，而在其中色彩結構的重要性要略高于文字設計，合理的色彩結構設計能夠在一定程度上滿足產品的不足，增強產品本身的競爭力。

1.2 視覺思維在UI設計用戶交互體驗中的價值

UI設計的本質在于幫助用戶對產品形成一定的了解，而所謂視覺思維，即用戶在見到UI設計后腦中會形成與之相關的圖像，此后用戶便可實現“可視化”，當產品信息與用戶腦中的圖像相似時自然會與用戶產生共鳴，令用戶產生需求感。由此可見，視覺思維在UI設計用戶交互體驗中的價值便是滿足用戶視覺需求，以優良的視覺體驗提升用戶交互體驗速度[2]。

2. 色彩構成與視覺心理在UI設計用戶交互體驗中的應用

2.1 風格定位

在當今時代下，人民素質與生活質量均發生了普遍性提升，在此狀況下，人們對UI設計的需求也水漲船高。而為了滿足用戶們的需求，設計一般需要對用戶的視覺需求進行了解，對用戶喜愛的界面風格及需要的色彩結構進行定位。一般而言，以科學合理色彩結構進行設計的界面能夠實現對大部分用戶操作順序的引導，令用戶在對產品進行操作時產生難以名狀的順暢感，對用戶交互體驗做出保障。舉例而言，小米的概念機（如圖1）采用當今時代比較流行的無邊界屏幕式手機便是最典型的UI設計風格定位，以透明的屏幕取代以往黑白的手機邊框能夠令手機產生現代科技感，與手機本身的定位相得益彰[3]。

圖1 小米概念機

2.2 框架設計

框架是除了風格外UI設計的另一大應用，通過對色彩結構進行調整以達到視覺平衡能夠令產品盡可能地迎合用戶的思維習慣順序，譬如從左到右、自上至下的閱讀順序等等，由于現代人的閱讀順序習慣，故此設計人員可以將比較醒目的色彩擺放在偏上方、左方的位置以抓住用戶眼球，將相對柔和的色彩堆積在下方、右方，除了色彩外，內容的排列順序也應遵循這一原則，在用戶快速熟悉產品操作后能夠產生與產品使用相關的順暢感[4]。舉例而言，目前使用率較高的騰訊QQ軟件（如圖2）將藍色設置在軟件的最上方，而下方則全部是淺色，令人忍不住向下翻閱；除此之外，騰訊QQ還在上方設置了搜索功能，極大地幫助用戶節省了搜索時間，在一定程度上加強了用戶體驗。

圖2 騰訊QQ

2.3 圖形設計

圖形是用戶在UI設計中獲得產品相關信息的主要渠道，同理，圖形設計亦在視覺思維中占據了較大比重，諸如色彩構成及文字標識等內容皆是其重點。這一點主要受生活節奏影響，隨著社會的發展，人們的生活節奏越來越快，人們對信息的閱讀習慣也日漸偏向于簡短化、直觀化，故此圖形設計在UI設計中占據的比重也日益增大[5]。因而在進行UI設計時研發方多會選擇與現實有所關聯的圖標或能夠激發用戶關聯思維的色彩構成完成設計，以微信為例，微信所使用的圖標（如圖3）本身是兩個“對話框”，能夠令用戶直觀地了解產品功能，而圖標背景則是使用了青翠的綠色，直接闡明產品的使用簡潔易懂，其本身算是UI設計中比較成功的典范，如此UI設計能夠有效提高用戶交互體驗，大幅度提升產品在同類產品市場中的競爭力。

圖3 微信圖標

2.4 色彩感知

色彩是人類視覺思維中最敏感的感官，對于用戶而言，色彩并不僅僅是簡單的“顏色”而言，其本身也具有不同的意義，且不同用戶對色彩的見解也各不相同，比如有的用戶在見到藍色時會想到大海，有的用戶在見到藍色時則會想到天空[6]。除了用戶本身的見解外，UI設計中的色彩含義也各不相同，在以往及現今的UI設計中，設計方多會選擇以紫色來代表科技，用綠色來代表希望等等。設計方在進行UI設計時應當充分考慮到用戶的視覺思維，既要做到吸引用戶又不會令用戶產生突兀感等視覺疲勞，換句話說，在吸引用戶及色彩突兀間有一個微妙的平衡點，如何去把握這個平衡點還需對產品的實際狀況進行探究方能確定。舉例而言，紅色等偏向暖色調的色彩能夠吸引用戶的注意，但其本身也極容易令用戶產生緊張感，故此設計方可以對紅色進行調整，在紅色周邊增添橙色、黃色等偏暖色調但不及紅色突兀的色彩，令其形成“漸變色”，做到以紅色代入、以橙色及黃色進行維持等等[7]。一般而言，色彩結構包括以下幾個要素：一，色彩數量，相同的顏色如果搭配比例與位置不同就會產生不一樣的感情色彩。一般不要超過三種顏色是所有色彩原則的基礎；二，色彩搭配，如果使用色彩來搭配，那么一個頁面最好使用同一色系的顏色來進行搭配，如此便可避免色彩不協調的問題；三，色彩互補，在UI設計中可以使用互補色進行搭配，如果使用比例得當，互補色的搭配一樣可以收獲很好的視覺效果，也可以使用鄰近色進行色彩搭配，當其中一種顏色的純度比較高的時候，另一種顏色純度低或名度低的；四，選用優先色，在所有的色彩中，UI設計一般以黑白灰優先，如果沒有很好的配色，黑灰色應當成為優先考慮的配色，若搭配得當，黑白灰UI設計同樣能夠體現出超凡的層次感，若想繼續添加其余色彩，可以在黑白灰的基礎上加入一種色彩，在大面積的黑白灰上添加小面積的其余色彩，如此搭配既顯得高雅又不失活力，是UI設計色彩搭配的優良選擇。

3.視覺設計在UI設計用戶交互體驗下的應用趨勢分析

在當今時代下，任何設計都講求“事前”、“事中”與“事后”，所謂“事前”即是在設計前對用戶的實際需求進行調研，依據用戶的實際需求進行設計；而“事中”則是在設計中及產品使用的過程中發現問題，對產品存在的問題進行改善；“事后”則是則是在用戶使用過設計后對產品進行意見反饋，由設計方收集意見，對意見進行分析后對設計產品予以改善[8]。其中，在設計前與設計時設計方可以利用本身具有一定內涵的圖形及豐富但并不雜亂的色彩進行搭配，初期先行吸引用戶的注意力，為產品爭取被了解的機會與實踐，如3D交互的發展和使用等。而在UI設計被用戶使用后，用戶會根據使用UI設計產品的感官體驗提出意見，比較常見的意見有UI設計產品界面中雖然圖形相對華麗充實，但圖形卻缺少一定的內涵；圖形包含的內容比較多，但各類圖片、圖形結構混亂，感官體驗較差；色彩搭配過于簡單平凡，無法真正引起用戶關注。在UI設計中，色彩及其余方面的視覺設計問題是必定會存在的，設計方需要不斷發現問題、不斷進行改善，以此滿足不同時期的用戶需求。

結語

綜上所述，無論是色彩結構還是視覺思維都是當今時代下UI設計中比較重要的部分，在進行UI設計時，設計方首先要做到的是對用戶的行為習慣及視覺思維進行初步考量，在滿足用戶使用需求的基礎上持續滿足用戶的視覺需求，提升用戶交互體驗。而在UI設計的色彩結構方面，色彩極大程度上代表著作品的美感，色彩運用的好壞是考驗一個設計師功底的最重要知識點，設計師需要在設計過程中及日常生活中不斷提升配色能力，針對UI設計色彩結構內容進行長期自我訓練，在市面上尋找時下比較成功的UI設計成果，做到多觀察、多學習與多請教，同時也要從二維空間設計逐步向3D交互設計邁進，將能夠解決UI設計現存問題的3D交互設計（如圖4）作為未來發展的主要方向，通過UI設計的色彩構成與視覺心理不斷增強用戶的交互體驗，令研發及生產的UI設計產品真正做到滿足大眾的品味。

圖4 3D交互設計