色彩在界面設(shè)計中的應(yīng)用

白英杰 / 韓瑞大學(xué)

1 APP界面色彩設(shè)計常識

APP界面設(shè)計是指用戶和智能移動終端的交互界面，是用戶與智能移動終端之間信息輸入、輸出、溝通的載體，是人機(jī)交互的輔助層次。APP界面設(shè)計始終秉承以“以人為本”，優(yōu)良的APP界面不僅能提供簡潔、美觀的視覺體驗，更能提升用戶的應(yīng)用體驗。

APP界面上的色彩顯示原理即加色混合，是通過將不同色彩的光相混合而得到的新的色光。所有色彩都是要在用戶面前呈現(xiàn)出來的，而在加色法中，將三種基本色彩的色彩按比例混合，就可以得到完整的色層，如溫度感、距離感、重量感、尺度感、軟硬感；同時，人們對于色彩的感受也會受到情緒等環(huán)境因素的影響。APP界面依賴于由智能終端的顯示屏發(fā)出的光線，然后通過視網(wǎng)膜傳遞到大腦來識別色彩。智能移動終端的顯示器均應(yīng)用RGB像素排列方式或Pentile像素排列方式，使得與傳統(tǒng)的印刷媒體相比，呈現(xiàn)出更加亮麗的色彩，使APP產(chǎn)品在日益激烈的競爭中脫穎而出[1]。

2 APP界面設(shè)計中色彩搭配的作用

2.1 營造APP整體風(fēng)格

APP界面設(shè)計主要體現(xiàn)在交互設(shè)計、操作邏輯設(shè)計和界面美觀設(shè)計等方面。我們可以在APP界面上決定一個主色調(diào)，用幾種輔助色彩與裝飾色彩的反差來突出APP品牌調(diào)性。通過對比明度、純度等各種色彩的對比，可以創(chuàng)造出不同的界面風(fēng)格。比如大部分的APP都是應(yīng)用了冰冷的灰色調(diào)，給人一種寧靜輕松的感覺。通過界面色彩搭配來決定APP整體風(fēng)格，是用戶體驗的關(guān)鍵環(huán)節(jié)。

2.2 顯示界面邏輯架構(gòu)

用戶在APP上所見到的界面是一個大的背景底色和一些幾何色彩的小塊，利用色彩區(qū)分導(dǎo)航、任務(wù)、系統(tǒng)等功能；此外，還可以利用色彩之間的鮮明反差來凸顯重要內(nèi)容，讓用戶更容易辨別出界面的邏輯結(jié)構(gòu)，提高操作的方便程度，縮短用戶在APP上的適應(yīng)時間。

2.3 增強(qiáng)功能引導(dǎo)

在界面設(shè)計中，色彩起到了加強(qiáng)功能導(dǎo)向的作用。例如，在界面設(shè)計中，底層導(dǎo)航條覆蓋了整個APP一級界面，構(gòu)成最基礎(chǔ)的信息架構(gòu)；導(dǎo)航條呈現(xiàn)方式可以是文本+圖標(biāo)，也可能是純圖標(biāo)。當(dāng)APP在某個界面上停留的時候，導(dǎo)航條底部的一個圖標(biāo)會變成彩色，而其他的圖標(biāo)則會變得暗淡，或者是灰色，這樣可以讓用戶知道自己現(xiàn)在是在哪個界面。提高或減少色彩亮度的方式也能告訴用戶在這個時候是可以點擊還是不能點擊，減少錯誤操作（圖1）。

圖1 app界面色彩分析

3 產(chǎn)品色彩的基本知識

3.1 對比度

在網(wǎng)頁的界面設(shè)計中，使用反差可以達(dá)到更好的顏色效果，利用對比度來進(jìn)行燈光和影子的處理，從而獲得更高質(zhì)量的圖像。此外，在設(shè)計過程中，我們也能對不同的不同亮度水平的網(wǎng)頁顏色進(jìn)行對比，從而有助于設(shè)計師對網(wǎng)頁顏色進(jìn)行調(diào)整；使得整個頁面的頁面更加生動，顏色更加豐富，并且保持了良好的顏色順序。

在網(wǎng)頁的界面設(shè)計中，如果使用高對比度，會有很大的視覺沖擊力，但是從觀賞性上來說，卻缺少了相應(yīng)美感。因此，在進(jìn)行網(wǎng)頁設(shè)計時，需要設(shè)計師運(yùn)用自己的專業(yè)知識，通過多次的調(diào)整，使圖像設(shè)計達(dá)到理想的效果。

3.2 色溫

在網(wǎng)頁的界面設(shè)計中，要想使網(wǎng)頁的色彩使用達(dá)到要求，就必須重視色溫的變化，這樣才能改善網(wǎng)頁的整體表現(xiàn)，并能獲得較好的創(chuàng)意效果。色溫是指在可見區(qū)和非可見區(qū)內(nèi)，由于不同顏色所產(chǎn)生的輻射強(qiáng)度不同，在不同顏色下，最多的是紅色，一般比較暖和。通常情況下，藍(lán)光是“冷”。在進(jìn)行頁面界面的設(shè)計時，應(yīng)注重顏色溫度的變化，同時還要注重顏色的反差。使用冷、熱兩種色彩，會給人一種截然不同的感官感受，設(shè)計師要根據(jù)整個設(shè)計要求，根據(jù)界面所要傳達(dá)的主題，調(diào)整色溫。

3.3 色調(diào)

每個顏色都有自己的波長，而在不同的波長下，顏色的感受也會有很大的差別，我們稱之為“色相”。顏色是顏色的一個關(guān)鍵因素，它的特性對顏色的性質(zhì)有很大的影響。色調(diào)并非色彩本質(zhì)，而是對整個網(wǎng)頁界面的色彩的總體評價。使用色調(diào)技術(shù)可以為整個頁面提供一種“畫龍點睛”的效果，但使用不當(dāng)很容易出現(xiàn)“畫蛇添足”的尷尬局面。這就要求設(shè)計師根據(jù)自己的實際情況進(jìn)行色彩調(diào)節(jié)，如果對自己的技術(shù)不太有信心，那么就要慎重地使用一些比較偏門的調(diào)色方式。

4 色彩的應(yīng)用原則

4.1 整體統(tǒng)一性原則

要有一個總體的設(shè)計構(gòu)架，也就是要給出一個完整的形象。所以在網(wǎng)站的初始階段，網(wǎng)站的基礎(chǔ)色調(diào)要有一個確定的定位。再在這個基礎(chǔ)上進(jìn)行擴(kuò)展，這里的擴(kuò)展就是對原有的色彩進(jìn)行一些細(xì)微的調(diào)整。由于，統(tǒng)一的頁面色彩應(yīng)遵循準(zhǔn)守色系的統(tǒng)一原則，使用戶在瀏覽網(wǎng)頁時能清楚地掌握網(wǎng)頁所表達(dá)的內(nèi)容，并突出其主旨；同時也不會因為色彩太多而引起用戶的視覺疲勞和混亂，提高頁面的可讀性。在此要注意的是，那些專為孩子設(shè)計的網(wǎng)頁，可能不會遵守這個原則，由于孩子們的頁面更注重于顏色鮮明的卡通。

4.2 達(dá)到用戶的期望值原則

網(wǎng)頁界面設(shè)計的第一個目的就是讓用戶進(jìn)行瀏覽，而我們的服務(wù)是以人為中心的，所以在使用頁面的時候要充分考慮到用戶的期待。

根據(jù)用戶的需求而定，我們要對網(wǎng)頁的色彩進(jìn)行多種設(shè)計，讓每個人在瀏覽時都能欣賞到它的美麗。在進(jìn)行網(wǎng)頁界面設(shè)計時，要先認(rèn)識用戶的個性；因此，在頁面的色彩方面進(jìn)行了適當(dāng)?shù)脑O(shè)計。一般來說，學(xué)識越高的人越喜歡黃色，越有傳統(tǒng)意識的人越注重穩(wěn)定性，在設(shè)計上可以考慮到褐色。在進(jìn)行網(wǎng)頁界面的色彩設(shè)計時，一定要嚴(yán)格遵守相應(yīng)的顏色法則，并決定其顏色，再進(jìn)行創(chuàng)造。

4.3 搭配均衡性原則

網(wǎng)頁色彩的選取與匹配，其終極目標(biāo)就是讓網(wǎng)頁整體看上去更為協(xié)調(diào)統(tǒng)一、賞心悅目。這就需要在色彩的選取和組合中，要保持一定的均衡性。色彩均衡應(yīng)從基礎(chǔ)色彩開始，由基礎(chǔ)色彩開始，再逐步向其它所要求的色彩轉(zhuǎn)變。在使用單一色調(diào)時要注意光影的平穩(wěn)轉(zhuǎn)換，以免產(chǎn)生一種突如其來的錯覺，在多色調(diào)的配合上，要確保在各個色調(diào)間存在過渡的過渡，使各種色彩在整體上占據(jù)某種比重，就如黃金分割比一樣，只有在合適的比例下保持均衡，用戶的視覺感受會更加地舒服。

5 APP界面設(shè)計中色彩搭配的提升策略

色彩的搭配是設(shè)計師技術(shù)和藝術(shù)融合的最直觀體現(xiàn)，設(shè)計師在進(jìn)行APP界面設(shè)計時，除了要遵循藝術(shù)審美，還要考慮下面所述的提升策略，只有這樣，才能在APP上設(shè)計出富有內(nèi)涵、賞心悅目的應(yīng)用界面[2]（圖2）。

圖2 app界面色彩搭配

5.1 迎合受眾群體

色彩搭配也是一種客觀需要的人性化設(shè)計思想，不同年齡段移動終端用戶所鐘愛的APP界面樣式也各不相同。設(shè)計人員應(yīng)從APP目標(biāo)入手，對其進(jìn)行畫像，并對其偏好進(jìn)行分析，感受其色彩所帶來的視覺感受。比如，在時裝生活A(yù)PP中，受眾人群的年輕化，設(shè)計師在進(jìn)行APP界面設(shè)計時，應(yīng)當(dāng)掌握流行的色彩潮流，并依據(jù)各種數(shù)據(jù)進(jìn)行分析，了解用戶對色彩的喜好及改變，預(yù)測流行色的發(fā)展趨勢，提高APP界面的整體風(fēng)格。

5.2 符合APP產(chǎn)品定位

色彩有很強(qiáng)烈的聯(lián)想，可以影響人們的情緒。所以，APP產(chǎn)品在展示自己的特性時，色彩的選擇至關(guān)重要，這有助于用戶更快地理解APP產(chǎn)品定位，并贏得用戶的認(rèn)同。比如，在購物APP中使用了大量的紅色，以刺激消費(fèi)者的視覺，使其產(chǎn)生購買心理上的暗示，激發(fā)消費(fèi)者的購買熱情，實現(xiàn)促銷。

5.3 合理布局色彩

在所有的移動終端中，屏幕的大小都是有限的，雜亂無章的色彩會給用戶帶來很大的麻煩，會讓用戶對APP產(chǎn)生抵觸情緒。目前的APP大多采用簡潔、準(zhǔn)確的設(shè)計思想，將色彩的整體協(xié)調(diào)起來，以突出設(shè)計思想。若某一種色彩在界面上占據(jù)了太多的空間，則應(yīng)將其面積縮小，以達(dá)到用戶的視覺均衡。小的色塊作為裝飾，如果一套色彩的對比色占據(jù)相同的區(qū)域，同樣會造成視覺上的混亂。APP界面上的色彩比例要有變化，要合理地進(jìn)行色彩的分層布置，要讓用戶在APP上建立起一種層次的視覺層次，這樣才能讓用戶在使用APP時，以最直觀的方式來實現(xiàn)。

5.4 色彩對比協(xié)調(diào)

APP界面的設(shè)計要堅持“整體協(xié)調(diào)、局部對比”的基本原則。色彩三個因素中，對用戶的心理影響最大的是色彩，其次是亮度和純度，設(shè)計師在進(jìn)行界面設(shè)計時，通常會包括一種主要色彩和幾種輔助色彩，使用一種色彩時選擇色彩；調(diào)節(jié)純度，可以使色彩變得豐富。當(dāng)你做兩個色彩的搭配時，色環(huán)的鄰近可以使你的設(shè)計更有效率和穩(wěn)定性。在一個APP界面設(shè)計中，色彩最好不多于3個，太多的色彩會讓用戶分心，降低用戶的使用體驗。

6 色彩在界面設(shè)計中的應(yīng)用策略

6.1 突出主題

在APP界面設(shè)計中，色彩是用戶界面中的一大亮點，使用戶界面呈現(xiàn)出完整的頁面樣式。APP的界面上的各種內(nèi)容要以不同的色彩來表達(dá)，而這些色彩往往會使功能多樣的APP界面呈現(xiàn)出不同的風(fēng)格特點。APP界面顏色的選擇將會以 APP為重點并按照主題將其與色彩融合，形成獨特的網(wǎng)頁樣式。

比如網(wǎng)易音樂 APP，網(wǎng)易音樂是一款針對青少年的音樂，主要針對的是有性格、有音樂品味的年輕人，他們當(dāng)中有歌手、音樂制作人、音樂愛好者，還有一些普通人。而網(wǎng)易云音樂則專注于歌曲，歌曲評分、歌曲單、云村等社區(qū)服務(wù)，讓更多人能夠參與到其中。讓用戶感受到溫馨。因此，網(wǎng)易云音樂的標(biāo)志在個性化、人性化的設(shè)計中表現(xiàn)得淋漓盡致。

6.2 引導(dǎo)視覺

在 APP的界面設(shè)計中，顏色可以起到區(qū)分區(qū)域、指導(dǎo)使用者的視覺效果。APP的第一個任務(wù)是向用戶傳遞有用的資訊，而在視覺上，則采用了多種顏色來劃分不同的視覺區(qū)域。也是非常有效的。運(yùn)用色彩來安排和分割版面內(nèi)容，既能使版面結(jié)構(gòu)更加清楚、合理，又能運(yùn)用鮮艷的色彩來突出主要內(nèi)容，引起用戶的注意。

以淘寶 APP為例，在狀態(tài)欄、導(dǎo)航欄中運(yùn)用色塊分割，在雙十一期間推廣，推廣信息用不同顏色的色塊進(jìn)行劃分，與背景顏色形成鮮明的對比；打破了單一字體所造成的視覺疲勞。其中，“雙十一”促銷信息以高飽和度顏色為背景，在頁面上起到了很好的宣傳效果。在中國建設(shè)銀行和支付寶APP主頁上，都采用了同一色系，但是色彩的改變使活動主題更加鮮明。在支付寶APP主頁上，用更醒目的橘色和紅色來強(qiáng)調(diào)“分享二十億的紅包”。而中國建行APP則采用了深藍(lán)色的字體，以突出“非居民金融帳戶涉稅信息盡職調(diào)查”這一重要信息。這樣可以使使用者更加專注，更容易發(fā)現(xiàn)事件訊息，并使顏色與整體的顏色協(xié)調(diào)一致，保持整個界面的協(xié)調(diào)。

6.3 引發(fā)用戶共鳴

在 APP的界面中，顏色具有吸引用戶和引起用戶共鳴的作用。在軟件行業(yè)中， APP的應(yīng)用是多種多樣的。要讓 APP變得與眾不同，必須要有一種讓人產(chǎn)生的第一印象。顏色往往會在使用者首次下載時，產(chǎn)生強(qiáng)烈的第一感覺。首先，顏色的變化會向使用者傳遞出各種情感，例如：冰涼的藍(lán)光，激情的紅光。其次，由于用戶年齡和性別等因素的原因，在顏色上存在著一定的差別，比如女生喜歡粉色、藍(lán)色、紫色等，男孩喜歡深藍(lán)色、深綠色等顏色，而兒童喜歡顏色純凈、明亮的顏色。在 APP的界面顏色所產(chǎn)生的視覺感受與使用者的美學(xué)觀念相符時，使用者往往會從顏色中感受到愉悅。

6.4 傳達(dá)品牌特性

在 APP的界面中，顏色可以向公眾傳遞品牌的訊息和風(fēng)格。顏色不僅可以使所有的東西都五顏六色，而且可以創(chuàng)造出豐富多彩的符號。顏色的差異會導(dǎo)致象征意義的差異，從而導(dǎo)致道德觀念、價值觀和心理感受的差異。應(yīng)用程序種類繁多，其顏色內(nèi)涵也各不相同。

360是以安全為主要業(yè)務(wù)的互聯(lián)網(wǎng)公司，旗下的360安全衛(wèi)士、360搜索等業(yè)務(wù)都是其主要業(yè)務(wù)之一。環(huán)保帶來了一種視覺上的安全與衛(wèi)生。公司秉承綠色理念，向消費(fèi)者傳遞安全可靠的產(chǎn)品理念，樹立綠色品牌的品牌。

7 結(jié)語

在APP市場上，色彩搭配是提高APP整體視覺效果，提高用戶閱讀體驗質(zhì)量的關(guān)鍵。因此，設(shè)計人員必須善于運(yùn)用色彩搭配技巧，不斷更新、革新設(shè)計觀念，通過高品質(zhì)的色彩搭配傳達(dá)界面情意，創(chuàng)造富有感染力、設(shè)計語言充分的界面，讓APP產(chǎn)品成為銜接設(shè)計者與用戶的情感橋梁。