基于認知心理學探析APP 界面設計中的色彩

戴嫻子 楊棚瑞＊

（湖北大學藝術學院，湖北 武漢 430000）

隨著計算機網絡和移動終端應用的發展以及智能手機的出現，色彩設計作為要素之一在其中的地位顯而易見，成為APP 界面設計中重要的一部分。適應用戶的行為特征和心理特征是設計產品的基本前提。而在設計過程中，產品外觀和操作過程是設計基礎，用戶的心理需求和心理反饋是重要目的。將認知心理學應用于APP 界面的色彩研究，可以滿足用戶的行為效率和審美品位即APP 的易用性和藝術性，亦能提升產品的用戶認可度。

注意、知覺、表象、記憶、思維和言語等是認知心理學里所說的認知過程，是人的高級心理過程，是人對于事物特點的認識過程，即信息加工過程。用戶作為主體感受產品帶來的客觀反應，這是簡單直接的心理規律，是認知的起點；知覺以感覺為基礎，是對于各部分、各屬性及相互關系的感知整合，例如APP 界面色彩是由各個元素相組合形成的一個整體，即凸顯整個APP 的風格特征；利用點綴色、大小等對比以達到醒目的效果，即引起注意之后提供正確和充分的信息以支持進一步的處理；人腦對過去經驗的保持和再現是記憶的體現，用戶使用APP 就是接受界面效果帶來的客觀刺激，這種客觀現象的持續效果最終呈現為主觀意識，只有在持續刺激的作用下，感覺和知覺才會存在；想象即是用戶對于產品使用之后獲得的反饋心理，例如在博物館APP 中，用戶瀏覽信息內容，那么腦海里就會根據界面整體風格和色彩配合內容圖片帶來的刺激感受想象自己身臨其境的一種主觀現象；而思考特性（思維）機動是對于客觀事物和主觀感受的反映，這個反映是指事物的表象和內在之間的聯系，用戶在使用APP 的過程中，通過界面與色彩之間的相互作用，映射到產品設計技術之外的實用意義，即“設計為人”，用戶作為產品設計的中心，服務于用戶的體驗感覺和心理感知。

從廣義上來說，認知心理學是對“人的認知以及人在認知時的認知過程”。認知心理學結合色彩學在APP 界面設計中，其中相關的理論主要表現在感知覺方面、注意方面和思維方面，從人的信息加工模型（圖1）來看，設計中主要側重點在于注意（感覺）和思維（同時也包含感覺到思維的認知過程）。

圖1 “認知心理學”人類信息加工模型

1 塑造APP 界面視覺設計色彩認知

從認知心理學角度出發，色彩在APP 界面設計中與界面風格相輔相成，界面中的色彩作用不是簡單地向用戶傳達APP 的藝術性，而是首先突出整體風格激發用戶對于APP 使用的興趣和動機，然后再將APP 的色彩符號與界面操作性有機地結合起來，用戶不再是受不明確指示的圖標進行被動行為，而是利用色彩帶來的使用效率主動地進行選擇性操作。

所謂“再認知”是認知心理學的思維過程。將APP 界面中的色彩配置與抽象信息相結合達到具象的信息傳達，這個過程使產品具有“自述”功能，通過色彩里的鄰近色和對比色凸顯信息內容，將信息瀏覽順序和用戶的認知心理模式相匹配，使用戶能正確理解并達到操作目的[1]。

1.1 “簡潔性”風格化概念

縱觀部分博物館APP 界面設計，風格普遍側重于整個界面的裝飾效果，操作比較繁復。據問卷調查研究結果表明，大部分用戶對于APP 的使用評價在于界面華麗但色彩指示不明確等問題，忽略了使用效率；而另一部分的APP 界面設計大多數為常規的滿足用戶體驗功能的簡單設計，主要出發點在于功能的明確性，界面之間沒有過多的手勢操作，色彩運用簡潔。例如博物館APP 的國際主義風格（圖2），整個界面采用簡單的白、灰色調，沒有過多的顏色渲染，主要突出博物館內的展品圖片以及導航信息。宏觀上，從用戶的認知心理角度出發，生理記憶與產品風格相匹配，產品展現再反饋給用戶心理認知；此外，APP 的界面色彩轉化的具象信息引導了用戶的使用效率。

界面的“簡潔性”即“簡化”，不是信息傳遞減少或缺少，而是將復雜信息進行整合和重新組織。而“簡化”對于用戶行為認知是一把雙刃劍：一方面，人們對于簡潔、對稱、規律圖形具有一定的喜愛程度；另一方面，簡化、單一使人們的操作行為變得簡單、程序化。

圖2 中統計的數據顯示，有85%的人群支持博物館APP 的開發，有利于隨時隨地參觀瀏覽，打破地域和時間限制；有79%的人更加喜歡簡約風格的APP 界面。另外，有79%的人使用APP 過后感覺不太符合對應博物館的風格。由此可以表明大眾對于APP 界面有較高的生理需求和情感需求。目前人們獲取信息的途徑基本以互聯網和APP 為主，對于展覽路線、展覽時間以及館內展示信息的查詢，有57%的人會覺得由于顏色處理不當導致操作比較繁復，部分按鈕凸顯不清晰，57%的人不清楚使用APP 的瀏覽順序，這說明了APP 界面中的色彩層級關系不明確，使用戶把握不到主次，使用期間不知從何進行。以上從博物館APP 視覺界面出發，分析了用戶對于整體風格、界面層級以及操作按鈕等色彩分布的心理需求，要求設計師站在用戶角度探析APP 的使用易用性原則。

圖2 博物館APP

1.2 界面色彩“總”“分”概念

“總”即風格整體，“分”即色彩元素個體，是人們在進行認知行為時傾向將各個色彩元素進行整體化認知。例如APP 界面設計中色彩分為鄰近色、相似色以及對比色，運用在產品中為一個整體契合界面風格，傳輸給用戶。

而APP 界面設計中，將功能和信息按區域塊劃分，使色彩的合理運用既達到用戶減少繁復操作和移動距離，又可以在效果上達到整體性和統一性。

2 基于認知心理學色彩在APP 界面設計中的設 計原則

色彩在APP 界面設計中的設計原則運用邏輯思維和設計常識等原理設定設計方案，使用戶在使用APP 時能準確、流暢地找到操作按鈕進行行為動作達到交互目的。在進行界面色彩設計時，根據色彩學的原理處理好內容和形式美之間的關系。在APP界面色彩設計中，設計原則在于掌握色彩的風格與APP 風格的統一，特別是主題色、強調色和輔助色三大色彩的關系調和[2]。色彩的合理運用不僅提升APP 整體視覺效果，同時給用戶帶來更好的使用體驗感。此應用案例圍繞Starbucks APP 界面設計展開，深入研究認知心理學在界面設計中的設計原則體現。

2.1 主題色帶動用戶知覺感知

界面設計中的主題色即界面色彩中的主色調。主題色主要突出整體APP 風格給用戶帶來的感覺，并且帶動其他輔助色和強調色，貫穿了APP 的整體，諸如啟動圖標、導航欄、部分控件及按鈕上等，但是主題色一般涉及的面積較少，約占整個APP 界面的20%。在Starbucks APP 界面中的呈現非常具有代表性，界面標準色以綠色為主作為出發點展開進行同類色的變換，使環境要素（界面風格）形成知覺感知傳輸給用戶的大腦形成思維模式，而記憶輸出與人腦相互作用，并達到用戶認知范圍的整體企業視覺風格相統一（圖3—4）。

圖3 Starbucks APP 標準色

圖4 Starbucks APP 界面主題色應用

2.2 輔助色帶動用戶思維感知

通常人的思維并不是由邏輯思維作為主導的，其基本思維方式有模仿思維、探索思維、經驗思維以及情緒思維。如果單純運用同一個顏色設計整個APP 界面，那顯然是不能滿足用戶的期望值，用戶作為擁有高級思維模式的人類，更渴望擁有滿足審美及藝術思維的界面，那么輔助色可以達到這樣的效果，輔助色與主題色相互呼應，界面層次清晰，展示內容板塊化，使用戶可以通過自己的行為操作更自然地進行交互活動，同時配合主題色呼應APP 風格特征，起到畫面的平衡作用，使界面更加豐富和完美，從而增強整個APP 的活力。

案例中，除了原有的綠色之外，Starbucks 還將綠色逐步延伸，呈現出與之協調的輔助顏色，所有核心功能板塊都向主體色調靠攏，巧妙地將綠色環保的理念引入其品牌視覺設計中，為品牌賦予更深層含義（圖5—6）。

圖5 Starbucks APP 輔助色

圖6 Starbucks APP 界面輔助色應用

2.3 點綴色帶動用戶注意感知

注意是精神高度集中的體現，涵蓋了用戶在操作中需要的選擇和信息處理的過程。如何做到“快速”，點綴色起到了相應作用。注意的過程中，時間轉瞬即逝，如若抓不到關鍵信息，那么就做不到有效的交互行為。另外，注意的范圍有限，視覺注意力無法涵蓋所有的信息內容，且易受機動影響，沒有醒目的顏色傳遞關鍵信息，用戶很容易對此忽視。

而點綴色主要運用在需要強調的區域或者下一步需要操作的按鈕處，強調色一般會使用明度、純度都偏高的顏色去使用，并且使用面積較小。主要作用是引導用戶操作，起到視覺導向和增強的效果，例如收藏、點贊、消息提醒等區域。在Starbucks APP界面中，以綠色為背景則以黃色作為強調色，從視覺色彩心理學角度來看，人們普遍認為明度越低的越靠后，明度越強則越靠前。在界面設計中，將點綴色多用于明度偏高的顏色，則可以提醒用戶在使用APP 時進行信息查看，了解官方活動（圖7）。

圖7 Starbucks APP 點綴色

以上Starbucks APP 界面色彩案例結合人類信息的加工模型圖，可以看到整個系統是一個完備的整體，界面設計風格為用戶大腦提供外部信息的刺激，再通過感官去接收信息，然后大腦將這些外部刺激進行加工，無論是主題色、輔助色還是點綴色，最終進入用戶思維系統進行整體的信息匹配。然后通過控制系統（人腦）做出相應的決策，最終達到信息的反應輸出。這不僅是企業整體文化的體現，也是滿足用戶最高心理需求的表現。

3 基于認知心理學色彩在APP 界面設計中的應 用價值

色彩可以決定界面風格及對整體氛圍傳達給用戶的情景作用，優秀的色彩運用可以提高設計的高級感。而色彩的延續性即用戶瀏覽界面行為時，感知注意能力引導行為沿著色彩或明度層次的方向移動。在《網頁設計元素對PAD 情感體驗的影響研究》[3]中提到動眼實驗驗證方法，此研究結果表明用戶在瀏覽頁面時色彩在其中起到關鍵作用，說明色彩對比可以有效牽引用戶視線，合理的色彩運用能使用戶在界面進行瀏覽時更流暢，停留在界面的時間更久。

提供的這一理論依據在輔助用戶在線上瀏覽展館內容、滿足用戶的情感需求以及增加界面的藝術性3 個方面起到作用。

3.1 引導用戶線上瀏覽

整體架構基礎在APP 界面的色彩設計中起到重要的作用。其劃分出不同的區域，構建出不同的模塊，凸顯出重要的信息，使用戶可以快速找到自己需要瀏覽的內容，建立“直接”“高效”和“正確”的關系。確保APP 界面設計的“易用性”[4]。比如，主色調確定以后，利用輔助色進行設計界面的模塊劃分，將信息與信息之間進行有計劃的整合，提升空間層次和信息區域明確，再者，合理的色彩搭配不會使用戶視覺疲勞。而界面中點睛色則可以在用戶使用APP 時使目光快速鎖定，方便進行下一步操作。有的APP 界面設計的點睛色透明度過高或者顏色不夠突出，則會使用戶在選擇下一步操作時誤觸。

3.2 引發用戶共鳴

由于經濟和技術的發展，人們對于數字產品的消費需求達到了更高的層次——精神層次。在用戶首次下載APP 時，色彩往往會給用戶留下第一印象，由此可見用戶的第一體驗感能使其在眾多APP 中脫穎而出，所以色彩在APP 界面設計中有吸引用戶、引發用戶共鳴的作用。

明度、色相和飽和度是色彩的3 個主要要素，是設計師在設計方案時需要考慮的重要內容。明度表現在色彩的明亮程度上，通過不同的亮度呈現出色彩的層次感，增加色彩應用的協調感。在界面中，使用清淡的綠色及黃色，使得界面中的元素之間呈現出簡單、直觀的對比。色相是色彩應用中的主要構成要素，不同的色相表現出不同的風格形式，例如紅色表現出一種艷麗溫暖的風格；淡藍色表現出舒暢、清新的風格；棕色表現出莊重、沉穩的風格等。設計師通過不同的色相，結合APP 界面所要表達的主題做出相應的選擇，即增強APP 對于用戶的情感反饋。最后，飽和度表現出來的是色彩的純度，純度越高色彩越鮮艷，純度的不同可以呈現出不同的質感[5]。同時在界面按鈕上飽和度的不同呈現的強弱效果也是對于信息展示的明確指示，操作行為指示越明顯，用戶受到的信息傳達就越強烈。

3.3 增加界面的藝術性

界面的藝術性會受到色彩的影響，好的色彩設計可以提高整個界面的感官藝術。任何一個APP 設計不僅是產品，也是藝術作品的體現。其達到用戶的心理需求是前提，而進一步滿足用戶的高層次要求是完成設計的最終目的，并逐一解決產品在使用過程中的心理反饋。在整個頁面中，所需要用到的顏色不宜過多，“七分顏色三分花”，這句話闡明了色彩在界面設計中的價值[6]。對于一個好的界面設計來說，色彩是功不可沒的，簡潔鮮明的色彩搭配可以提升整個APP 界面的使用價值?？梢哉f，是色彩增強了界面藝術的感染力，凸顯獨一無二的視覺調性，打造出具有競爭力的產品。

4 結語

綜上所述，色彩在APP 界面中的作用不容小覷，它是“無聲的推銷員”[7]，賦予了APP 界面靈魂。一個交互產品的誕生都是由簡單到復雜、由表象到里象的發展過程。視覺呈現的色彩樣式只是其在界面設計的外在表現，而從抽象信息到具象信息的傳達演變是設計研究的目的。APP 界面中的色彩設計不能單方面從平面設計角度出發來達到最終目的，而是應該結合用戶對于界面色彩的心理認知層面來剖析整體色彩運用原理，符合“設計為人”的概念層面。優秀的APP 界面色彩設計不僅能促進人與產品之間的良好交互，而且也滿足了人對于產品的情感需求和審美藝術，只有從表到里探索人文和精神內涵、把握人的認知心理形成科學的研究方案，APP 界面設計才更加具有競爭力，在互聯網眾多產品迸發的時代嶄露頭角。