淺談移動(dòng)app界面的色彩設(shè)計(jì)

【摘要】 隨著智能手機(jī)的普及，移動(dòng)媒體已然成為人們生活中不可或缺的部分，而界面中具有良好交互設(shè)計(jì)的app愈發(fā)受到用戶的青睞。本文對(duì)移動(dòng)app交互設(shè)計(jì)中的色彩應(yīng)用進(jìn)行分析和探討，以期為移動(dòng)app的界面設(shè)計(jì)提供一些實(shí)質(zhì)性的建議。

【關(guān)鍵詞】 app；色彩設(shè)計(jì)；視覺(jué)平衡

1 移動(dòng)app基本屬性與發(fā)展

移動(dòng)應(yīng)用（application的縮寫，簡(jiǎn)稱app）是基于移動(dòng)設(shè)備的第三方程序。隨著智能手機(jī)的日益流行，多平臺(tái)的app應(yīng)用應(yīng)運(yùn)而生。以蘋果應(yīng)用商店為例，截至2015年7月，其24個(gè)類別下的應(yīng)用程序數(shù)量多達(dá)150萬(wàn)。而今，其中100多萬(wàn)已被或正被蘋果公司或開發(fā)商刪除。面對(duì)如此龐大的移動(dòng)應(yīng)用數(shù)量，要想在優(yōu)勝劣汰中長(zhǎng)久生存，軟件自身的設(shè)計(jì)不容忽視。

能被用戶持續(xù)使用的優(yōu)秀app應(yīng)用，除了固有的基本功能以外，往往還擁有優(yōu)良的界面的設(shè)計(jì)。而界面設(shè)計(jì)通常包括：風(fēng)格設(shè)計(jì)、版式設(shè)計(jì)、色彩設(shè)計(jì)、文字設(shè)計(jì)以及交互方式等。符合用戶需求的界面設(shè)計(jì)能夠提高用戶的使用感受，更能充分體現(xiàn)出app的功能特點(diǎn)。

近年來(lái)，幾乎所有的設(shè)計(jì)媒介和個(gè)人都在提倡“簡(jiǎn)約設(shè)計(jì)”。一般情況下，設(shè)計(jì)者的主流觀點(diǎn)就是將頁(yè)面所謂的“冗余”減少和刪除，而呈現(xiàn)給用戶的可能已是“干凈無(wú)比”的頁(yè)面?？茽柌髟谄渲鳌逗?jiǎn)約至上-交互設(shè)計(jì)四策略》中有過(guò)這樣的陳述：“簡(jiǎn)單是用戶體驗(yàn)是初學(xué)者、新手的體驗(yàn)，或者是壓力之下的主流用戶的體驗(yàn)?！崩纾簣D1。

看似簡(jiǎn)單的兩個(gè)主界面是筆者參與開發(fā)及設(shè)計(jì)的企業(yè)移動(dòng)app辦公軟件的頁(yè)面演變。從1.0到3.0版本的變化，反映了用戶對(duì)界面操作的主觀性需求愈發(fā)明顯，而主流用戶群對(duì)最為直觀的、帶有色彩沖擊力的圖像模塊的敏銳度持續(xù)增強(qiáng)。

同時(shí)隨著網(wǎng)絡(luò)信息技術(shù)的飛速發(fā)展，3G、4G技術(shù)的普及，趨于“本地化”“數(shù)據(jù)化”及“移動(dòng)化”的app更易讓普通大眾所接受。于是，使移動(dòng)app從設(shè)計(jì)層面脫穎而出，便是當(dāng)務(wù)之急。

2 色彩設(shè)計(jì)的原理

關(guān)于色彩，事實(shí)上是一種不確定的元素，即計(jì)算機(jī)屏幕上的呈現(xiàn)及打印或印刷到其他媒介上同一種物體亦會(huì)出現(xiàn)不同的色值。為了區(qū)分，我們通常用RGB（計(jì)算機(jī)屏幕上）和CMYK（印刷品上）來(lái)表示色彩。

色彩有多種屬性，傳統(tǒng)意義上我們將其概括為以下幾點(diǎn)：1、不協(xié)調(diào)與和諧對(duì)稱；2、對(duì)比色與互補(bǔ)色；3、色調(diào)的冷色與暖色等。在設(shè)計(jì)中，大面積的色彩的選擇直接影響了感受者的第一印象。為了使其產(chǎn)生安心的感覺(jué)，獲取最為協(xié)調(diào)的配色，通常采用色相、明度、純度的一致性及間隔色的選取采用同色系的技巧。因?yàn)樯嘁恢碌呐渖?，?huì)讓人同時(shí)感到一致與帶有一些幻想的印象；明度一致的配色，即便使用多種顏色也能產(chǎn)生整體均衡效果；而純度一致的配色讓人感覺(jué)穩(wěn)重，相反則讓人感覺(jué)有精神；當(dāng)色彩與色彩互相沖突的間隔色出現(xiàn)時(shí)，在其間插入灰色或者是同系列的顏色更為協(xié)調(diào)。

人對(duì)色彩的感知，在學(xué)術(shù)領(lǐng)域直接被運(yùn)用到“心理疾病的治療”及色彩心理學(xué)的范疇。由此可見，色彩確實(shí)具有情感和特定的心理效應(yīng)。每一種顏色均可表達(dá)出自己特定的情感，而設(shè)計(jì)中合理的色彩選擇，自然賦予特定的印象。在設(shè)計(jì)中色彩的選擇又往往受到各自地區(qū)甚至各國(guó)文化的影響。各地文化復(fù)雜多變，在產(chǎn)品的配色上呈現(xiàn)出多元的特點(diǎn)。這一點(diǎn)，在時(shí)下普遍的電商類移動(dòng)app色彩設(shè)計(jì)中有了最為明顯的呈現(xiàn)。為刺激用戶消費(fèi)，其用色往往鮮艷，即純度較高，而為了區(qū)分彼此，色彩呈現(xiàn)多姿多彩。

從宏觀角度剖析，色彩的情感和地域文化直接影響到了設(shè)計(jì)本色色彩的選取。因此，色彩設(shè)計(jì)往往是被束縛的“框架設(shè)計(jì)”，而在框架上做的色彩選擇，更多的是通過(guò)色相、明度及純度的相應(yīng)變化，給予色彩以更多的空間層次感，在外部因素出現(xiàn)的同時(shí)，使設(shè)計(jì)本身更易被使用者記憶和接受。

3 色彩在移動(dòng)app中的應(yīng)用

針對(duì)界面設(shè)計(jì)，設(shè)計(jì)者往往遵循“總體協(xié)調(diào)、局部對(duì)比”的基本原則。而正是因?yàn)樯仕赜械那楦袑傩裕瑸榱耸巩a(chǎn)品本身脫穎而出，色彩便成為app界面中不可或缺的視覺(jué)因素，而良好的色彩組合是產(chǎn)品本身的利器。用戶通過(guò)色彩來(lái)理解產(chǎn)品，同時(shí)色彩亦影響用戶的情緒。合理的色彩選擇和協(xié)調(diào)的色彩區(qū)域劃分，更能突出重點(diǎn)，使用戶第一時(shí)間合理使用產(chǎn)品本身。反之，亦然。

通過(guò)普通配色，我們似乎很難看到模塊的“意義”。用戶在使用過(guò)程中，很難找到“切入點(diǎn)”，更談不上色彩是否融入主題環(huán)境。而將色彩賦予圖形化的意義，在眾多文本內(nèi)容中，用圖、用形突出點(diǎn)亮，便有了導(dǎo)向性的使用模式。在滿足導(dǎo)向的同時(shí)，“導(dǎo)航”逐漸開始起到關(guān)鍵作用。而導(dǎo)航按鈕與整體界面色調(diào)的基本統(tǒng)一，又使色彩具有了一定的象征意義。拋開軟件本身的功能性，倘若顏色從產(chǎn)品的本身分離出來(lái)，將色彩與軟件本身反向融合，將其創(chuàng)意概念用色彩充實(shí)或者暗示，而帶給用戶以全新的記憶點(diǎn)，更能增加用戶習(xí)慣性的“依賴”使用，迎合用戶心理使用需求。

顯然，現(xiàn)階段眾多app默認(rèn)背景色彩為中性色調(diào)或者淺色調(diào)。因此，需選擇最能體現(xiàn)軟件本身主題的色彩作為整個(gè)界面的主色調(diào)。雖然主色調(diào)的選擇是建立在整體界面環(huán)境上的，但將背景色設(shè)置為淺色調(diào)或純色會(huì)更讓人感覺(jué)清新、柔和，不但便于整個(gè)界面的配色，亦能突顯移動(dòng)界面的重點(diǎn)，從而讓主流用戶輕松識(shí)別最直接的信息點(diǎn)。而在輔助色的色彩運(yùn)用上，應(yīng)達(dá)到相對(duì)的平衡感，即用色彩設(shè)計(jì)的三項(xiàng)最基本的原理：和諧與協(xié)調(diào)、對(duì)比與互補(bǔ)及冷暖色均衡。穩(wěn)定的界面色彩更能讓用戶需求得以滿足，增加親切感而使其保持一定的使用頻率。

當(dāng)然，界面的色彩設(shè)計(jì)還需結(jié)合界面中元素的色調(diào)和面積的大小，而做到總體和局部的良好詮釋。界面設(shè)計(jì)不同于網(wǎng)站設(shè)計(jì)，其不需太多的板塊和外部組件及顏色種類。網(wǎng)頁(yè)設(shè)計(jì)往往優(yōu)先考慮內(nèi)容的充實(shí)度，以板塊詮釋幾乎全部的“信息點(diǎn)”。而界面設(shè)計(jì)由于自身版面大小的局限，在設(shè)計(jì)中，必須首先確定菜單的導(dǎo)航、植入的廣告區(qū)域和基本空間元素及這三點(diǎn)所占的區(qū)域面積，再考慮“信息點(diǎn)”的介入方式及文字量。

而針對(duì)色彩“不確定元素”的屬性，移動(dòng)app中用戶自主化的多元化色彩選擇成為新的切入點(diǎn)。關(guān)于這點(diǎn)，在現(xiàn)階段較為流行的眾多移動(dòng)化通訊工具中得到較廣泛的普及。根據(jù)環(huán)境的不確定性，移動(dòng)設(shè)備在不同光源和動(dòng)靜狀態(tài)下，所需的較為合適的色彩值亦不同。對(duì)于暗環(huán)境，視線頻繁在顯示屏與環(huán)境這兩種亮度對(duì)比強(qiáng)烈的界面移動(dòng)，很容易造成用戶的視覺(jué)疲勞，從而影響用戶的身心健康。因此，在夜晚或其他昏暗環(huán)境中，移動(dòng)app的界面應(yīng)以暗色彩為主色。反之，相對(duì)的明亮環(huán)境，使用令用戶興奮的亮色調(diào)，更能刺激使用需求。于是，針對(duì)用戶自身使用環(huán)境變換而設(shè)計(jì)“皮膚”切換功能，是移動(dòng)app產(chǎn)品設(shè)計(jì)工作中不容忽視的內(nèi)容。

4 結(jié)語(yǔ)

綜上所述，移動(dòng)app作為時(shí)下最為流行的產(chǎn)品，為期達(dá)到主流用戶滿意，除了基本軟件定位、框架和創(chuàng)意外，產(chǎn)品設(shè)計(jì)中色彩的選擇和使用承載著相當(dāng)大的使命。在移動(dòng)app出現(xiàn)伊始，產(chǎn)品多呈現(xiàn)為功能大于界面設(shè)計(jì)。而隨著蘋果手機(jī)ios7系統(tǒng)的更新，色彩的華麗感接踵而來(lái)，移動(dòng)app的色彩設(shè)計(jì)方式全面更新?lián)Q代。而在滿足視覺(jué)感的同時(shí)，多方考慮產(chǎn)品本身的定位屬性，在主色調(diào)確定的同時(shí)將相互協(xié)調(diào)的輔助色彩加以詮釋，使色與色之間達(dá)到相對(duì)平衡但不失對(duì)比。再經(jīng)過(guò)多方實(shí)踐及調(diào)研，據(jù)其逐步深化設(shè)計(jì)，才能開發(fā)出更為優(yōu)秀的移動(dòng)app軟件產(chǎn)品。

參考文獻(xiàn)

[1伊達(dá)千代.色彩設(shè)計(jì)的原理[M].中信出版社，2011

[2Dan Saffer.交互設(shè)計(jì)指南[M].機(jī)械工業(yè)出版社，2010

[3黃晟.基于用戶體驗(yàn)的app設(shè)計(jì)研究[D].陜西科技大學(xué)碩士學(xué)位論文.2012

[4百度百科.色彩[OL/DB]. http：//baike.baidu.com/link？url=7xP_R0ybGof_wzyS08Atq_Xogw0K9gMYEN0SDqmKXiEppMWv_g7r7q2Bd9wr6DhwemQM_QmQXtztH__KqmwU6qumXOyJvmrQ15YNb_9UjXu

[5藍(lán)藍(lán)設(shè)計(jì).如何在界面設(shè)計(jì)中“色”誘用戶？[OL/DB]. http：//www.lanlanwork.com/blog/？post=2878

作者簡(jiǎn)介：寧璐（1987.07——），女（漢族），湖南長(zhǎng)沙人，中級(jí)工業(yè)設(shè)計(jì)師，碩士研究生學(xué)歷，現(xiàn)從事交互設(shè)計(jì)及項(xiàng)目管理相關(guān)工作。