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

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

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

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

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

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

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

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

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

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

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

圖1 app界面色彩分析

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

3.1 對(duì)比度

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

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

3.2 色溫

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

3.3 色調(diào)

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

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

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

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

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

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

根據(jù)用戶的需求而定，我們要對(duì)網(wǎng)頁的色彩進(jìn)行多種設(shè)計(jì)，讓每個(gè)人在瀏覽時(shí)都能欣賞到它的美麗。在進(jìn)行網(wǎng)頁界面設(shè)計(jì)時(shí)，要先認(rèn)識(shí)用戶的個(gè)性；因此，在頁面的色彩方面進(jìn)行了適當(dāng)?shù)脑O(shè)計(jì)。一般來說，學(xué)識(shí)越高的人越喜歡黃色，越有傳統(tǒng)意識(shí)的人越注重穩(wěn)定性，在設(shè)計(jì)上可以考慮到褐色。在進(jìn)行網(wǎng)頁界面的色彩設(shè)計(jì)時(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)時(shí)要注意光影的平穩(wěn)轉(zhuǎn)換，以免產(chǎn)生一種突如其來的錯(cuò)覺，在多色調(diào)的配合上，要確保在各個(gè)色調(diào)間存在過渡的過渡，使各種色彩在整體上占據(jù)某種比重，就如黃金分割比一樣，只有在合適的比例下保持均衡，用戶的視覺感受會(huì)更加地舒服。

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

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

圖2 app界面色彩搭配

5.1 迎合受眾群體

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

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

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

5.3 合理布局色彩

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

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

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

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

6.1 突出主題

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

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

6.2 引導(dǎo)視覺

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

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

6.3 引發(fā)用戶共鳴

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

6.4 傳達(dá)品牌特性

在 APP的界面中，顏色可以向公眾傳遞品牌的訊息和風(fēng)格。顏色不僅可以使所有的東西都五顏六色，而且可以創(chuàng)造出豐富多彩的符號(hào)。顏色的差異會(huì)導(dǎo)致象征意義的差異，從而導(dǎo)致道德觀念、價(jià)值觀和心理感受的差異。應(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市場(chǎng)上，色彩搭配是提高APP整體視覺效果，提高用戶閱讀體驗(yàn)質(zhì)量的關(guān)鍵。因此，設(shè)計(jì)人員必須善于運(yùn)用色彩搭配技巧，不斷更新、革新設(shè)計(jì)觀念，通過高品質(zhì)的色彩搭配傳達(dá)界面情意，創(chuàng)造富有感染力、設(shè)計(jì)語言充分的界面，讓APP產(chǎn)品成為銜接設(shè)計(jì)者與用戶的情感橋梁。