【摘要】 隨著智能手機(jī)的普及,移動(dòng)媒體已然成為人們生活中不可或缺的部分,而界面中具有良好交互設(shè)計(jì)的app愈發(fā)受到用戶(hù)的青睞。本文對(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的縮寫(xiě),簡(jiǎn)稱(chēng)app)是基于移動(dòng)設(shè)備的第三方程序。隨著智能手機(jī)的日益流行,多平臺(tái)的app應(yīng)用應(yīng)運(yùn)而生。以蘋(píng)果應(yīng)用商店為例,截至2015年7月,其24個(gè)類(lèi)別下的應(yīng)用程序數(shù)量多達(dá)150萬(wàn)。而今,其中100多萬(wàn)已被或正被蘋(píng)果公司或開(kāi)發(fā)商刪除。面對(duì)如此龐大的移動(dòng)應(yīng)用數(shù)量,要想在優(yōu)勝劣汰中長(zhǎng)久生存,軟件自身的設(shè)計(jì)不容忽視。
能被用戶(hù)持續(xù)使用的優(yōu)秀app應(yīng)用,除了固有的基本功能以外,往往還擁有優(yōu)良的界面的設(shè)計(jì)。而界面設(shè)計(jì)通常包括:風(fēng)格設(shè)計(jì)、版式設(shè)計(jì)、色彩設(shè)計(jì)、文字設(shè)計(jì)以及交互方式等。符合用戶(hù)需求的界面設(shè)計(jì)能夠提高用戶(hù)的使用感受,更能充分體現(xiàn)出app的功能特點(diǎn)。
近年來(lái),幾乎所有的設(shè)計(jì)媒介和個(gè)人都在提倡“簡(jiǎn)約設(shè)計(jì)”。一般情況下,設(shè)計(jì)者的主流觀點(diǎn)就是將頁(yè)面所謂的“冗余”減少和刪除,而呈現(xiàn)給用戶(hù)的可能已是“干凈無(wú)比”的頁(yè)面??茽柌髟谄渲鳌逗?jiǎn)約至上-交互設(shè)計(jì)四策略》中有過(guò)這樣的陳述:“簡(jiǎn)單是用戶(hù)體驗(yàn)是初學(xué)者、新手的體驗(yàn),或者是壓力之下的主流用戶(hù)的體驗(yàn)?!崩纾簣D1。
看似簡(jiǎn)單的兩個(gè)主界面是筆者參與開(kāi)發(fā)及設(shè)計(jì)的企業(yè)移動(dòng)app辦公軟件的頁(yè)面演變。從1.0到3.0版本的變化,反映了用戶(hù)對(duì)界面操作的主觀性需求愈發(fā)明顯,而主流用戶(hù)群對(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ì)稱(chēng);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é)的范疇。由此可見(jiàn),色彩確實(shí)具有情感和特定的心理效應(yīng)。每一種顏色均可表達(dá)出自己特定的情感,而設(shè)計(jì)中合理的色彩選擇,自然賦予特定的印象。在設(shè)計(jì)中色彩的選擇又往往受到各自地區(qū)甚至各國(guó)文化的影響。各地文化復(fù)雜多變,在產(chǎn)品的配色上呈現(xiàn)出多元的特點(diǎn)。這一點(diǎn),在時(shí)下普遍的電商類(lèi)移動(dòng)app色彩設(shè)計(jì)中有了最為明顯的呈現(xiàn)。為刺激用戶(hù)消費(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)樯仕赜械那楦袑傩?,為了使產(chǎn)品本身脫穎而出,色彩便成為app界面中不可或缺的視覺(jué)因素,而良好的色彩組合是產(chǎn)品本身的利器。用戶(hù)通過(guò)色彩來(lái)理解產(chǎn)品,同時(shí)色彩亦影響用戶(hù)的情緒。合理的色彩選擇和協(xié)調(diào)的色彩區(qū)域劃分,更能突出重點(diǎn),使用戶(hù)第一時(shí)間合理使用產(chǎn)品本身。反之,亦然。
通過(guò)普通配色,我們似乎很難看到模塊的“意義”。用戶(hù)在使用過(guò)程中,很難找到“切入點(diǎn)”,更談不上色彩是否融入主題環(huán)境。而將色彩賦予圖形化的意義,在眾多文本內(nèi)容中,用圖、用形突出點(diǎn)亮,便有了導(dǎo)向性的使用模式。在滿(mǎn)足導(dǎo)向的同時(shí),“導(dǎo)航”逐漸開(kāi)始起到關(guān)鍵作用。而導(dǎo)航按鈕與整體界面色調(diào)的基本統(tǒng)一,又使色彩具有了一定的象征意義。拋開(kāi)軟件本身的功能性,倘若顏色從產(chǎn)品的本身分離出來(lái),將色彩與軟件本身反向融合,將其創(chuàng)意概念用色彩充實(shí)或者暗示,而帶給用戶(hù)以全新的記憶點(diǎn),更能增加用戶(hù)習(xí)慣性的“依賴(lài)”使用,迎合用戶(hù)心理使用需求。
顯然,現(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),從而讓主流用戶(hù)輕松識(shí)別最直接的信息點(diǎn)。而在輔助色的色彩運(yùn)用上,應(yīng)達(dá)到相對(duì)的平衡感,即用色彩設(shè)計(jì)的三項(xiàng)最基本的原理:和諧與協(xié)調(diào)、對(duì)比與互補(bǔ)及冷暖色均衡。穩(wěn)定的界面色彩更能讓用戶(hù)需求得以滿(mǎn)足,增加親切感而使其保持一定的使用頻率。
當(dāng)然,界面的色彩設(shè)計(jì)還需結(jié)合界面中元素的色調(diào)和面積的大小,而做到總體和局部的良好詮釋。界面設(shè)計(jì)不同于網(wǎng)站設(shè)計(jì),其不需太多的板塊和外部組件及顏色種類(lèi)。網(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中用戶(hù)自主化的多元化色彩選擇成為新的切入點(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),很容易造成用戶(hù)的視覺(jué)疲勞,從而影響用戶(hù)的身心健康。因此,在夜晚或其他昏暗環(huán)境中,移動(dòng)app的界面應(yīng)以暗色彩為主色。反之,相對(duì)的明亮環(huán)境,使用令用戶(hù)興奮的亮色調(diào),更能刺激使用需求。于是,針對(duì)用戶(hù)自身使用環(huán)境變換而設(shè)計(jì)“皮膚”切換功能,是移動(dòng)app產(chǎn)品設(shè)計(jì)工作中不容忽視的內(nèi)容。
4 結(jié)語(yǔ)
綜上所述,移動(dòng)app作為時(shí)下最為流行的產(chǎn)品,為期達(dá)到主流用戶(hù)滿(mǎn)意,除了基本軟件定位、框架和創(chuàng)意外,產(chǎn)品設(shè)計(jì)中色彩的選擇和使用承載著相當(dāng)大的使命。在移動(dòng)app出現(xiàn)伊始,產(chǎn)品多呈現(xiàn)為功能大于界面設(shè)計(jì)。而隨著蘋(píng)果手機(jī)ios7系統(tǒng)的更新,色彩的華麗感接踵而來(lái),移動(dòng)app的色彩設(shè)計(jì)方式全面更新?lián)Q代。而在滿(mǎn)足視覺(jué)感的同時(shí),多方考慮產(chǎn)品本身的定位屬性,在主色調(diào)確定的同時(shí)將相互協(xié)調(diào)的輔助色彩加以詮釋?zhuān)股c色之間達(dá)到相對(duì)平衡但不失對(duì)比。再經(jīng)過(guò)多方實(shí)踐及調(diào)研,據(jù)其逐步深化設(shè)計(jì),才能開(kāi)發(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黃晟.基于用戶(hù)體驗(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ì)中“色”誘用戶(hù)?[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)工作。