色彩與布局在移動(dòng)App界面設(shè)計(jì)中的應(yīng)用

侯森

摘要：隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展與應(yīng)用的深入，特別是近年來(lái)移動(dòng)終端設(shè)備的飛速發(fā)展，移動(dòng)互聯(lián)網(wǎng)得到了日益廣泛的應(yīng)用。各種基于終端設(shè)備的移動(dòng)App應(yīng)運(yùn)而生，給人們的工作、生活和學(xué)習(xí)帶來(lái)了極大便利，但也存在著功能和界面嚴(yán)重同質(zhì)化、產(chǎn)品競(jìng)爭(zhēng)力低的問(wèn)題。因此，App界面設(shè)計(jì)逐漸受到了人們的關(guān)注，舒適的色彩搭配和個(gè)性化的界面布局，可以更好地引起用戶(hù)的興趣，在給用戶(hù)提供實(shí)用功能的同時(shí)，可以給用戶(hù)更好的交互體驗(yàn)。文章在對(duì)色彩與布局的基礎(chǔ)知識(shí)及其在App界面設(shè)計(jì)中的重要性進(jìn)行分析的基礎(chǔ)之上，對(duì)色彩與布局在移動(dòng)App界面設(shè)計(jì)中的應(yīng)用進(jìn)行分析與思考。

關(guān)鍵詞：色彩；布局；移動(dòng)App；界面設(shè)計(jì)；UI設(shè)計(jì)；應(yīng)用

中圖分類(lèi)號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）27-0089-02

開(kāi)放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

在網(wǎng)絡(luò)化、信息化、數(shù)字化高速發(fā)展的今天，移動(dòng)終端設(shè)備（如手機(jī)、平板電腦）在數(shù)字化的影響下，已逐漸成為人們的一種生活方式，移動(dòng)App成為承載傳播眾多數(shù)字化信息的重要媒介，使用智能移動(dòng)終端設(shè)備通過(guò)App獲取信息是目前最普遍、直接的方式，但由于App功能和界面的嚴(yán)重同質(zhì)化，在進(jìn)行界面設(shè)計(jì)時(shí)除了考慮給用戶(hù)提供相應(yīng)的功能之外，如何讓App在同質(zhì)化的應(yīng)用中脫穎而出是眾多UI設(shè)計(jì)者必須考慮的問(wèn)題，通過(guò)利用色彩搭配和元素布局對(duì)App界面進(jìn)行設(shè)計(jì)，不僅可以對(duì)用戶(hù)產(chǎn)生視覺(jué)沖擊，而且可以在增強(qiáng)用戶(hù)體驗(yàn)感的同時(shí)，降低用戶(hù)的使用難度，提高App的舒適性和適用性。

1 色彩與界面布局概述

1.1色彩及其在移動(dòng)App界面中的重要性

色彩是通過(guò)人們的眼和腦以及生活經(jīng)驗(yàn)所產(chǎn)生的一種對(duì)光的視覺(jué)效應(yīng)，色彩有色相、明度、飽和度三個(gè)要素，色彩和光線一樣，會(huì)對(duì)人的生理和心理產(chǎn)生影響，不同的顏色對(duì)人的生理和心理會(huì)產(chǎn)生不同的影響，進(jìn)而影響人的情緒、感情。例如紅色、橙色會(huì)引起人們溫暖的感覺(jué)，藍(lán)色會(huì)給人帶來(lái)冷靜、莊重、安詳與廣闊的感覺(jué)等。

色彩在App的界面設(shè)計(jì)中占有非常重要的地位，它是界面設(shè)計(jì)中最常見(jiàn)的表現(xiàn)元素，與人的審美心理、認(rèn)知、情感等息息相關(guān)，在界面設(shè)計(jì)中合理運(yùn)用色彩，不僅能引導(dǎo)用戶(hù)的操作，還能更加清晰、準(zhǔn)確地傳達(dá)情感訴求與企業(yè)文化，色彩在界面中的重要性主要體現(xiàn)在強(qiáng)化記憶、引導(dǎo)用戶(hù)、塑造風(fēng)格三個(gè)方面。

1.2 布局及其在移動(dòng)App界面中的重要性

布局指的是在App界面上元素如何呈現(xiàn)在屏幕上，以及它們之間的關(guān)系。雖然它指的是元素間的關(guān)系，但它并不是這么簡(jiǎn)單，App界面除了將頁(yè)面中的內(nèi)容關(guān)聯(lián)起來(lái)，以達(dá)到整體性之外，還通過(guò)不同的布局向用戶(hù)進(jìn)行重點(diǎn)信息的展示，另外根據(jù)運(yùn)行App設(shè)備的不同，其布局也會(huì)有所變化。

通過(guò)應(yīng)用布局可以使用戶(hù)與頁(yè)面中的元素（內(nèi)容）之間的交互變得更為輕松，可以使重點(diǎn)內(nèi)容或功能突出，使用戶(hù)可以更專(zhuān)注于主要的任務(wù)，還可以利用視覺(jué)的平衡來(lái)向用戶(hù)展示相對(duì)重要的元素。總之，科學(xué)優(yōu)秀的布局設(shè)計(jì)，不僅帶給用戶(hù)舒適的體驗(yàn)，更能吸引用戶(hù)的目光，提高App產(chǎn)品的轉(zhuǎn)化率。

2 移動(dòng)App界面設(shè)計(jì)概述

2.1 移動(dòng)App界面設(shè)計(jì)的特點(diǎn)

App通過(guò)界面與用戶(hù)進(jìn)行交互，是人與機(jī)器進(jìn)行信息交換的媒介，一款A(yù)pp的成功除了與其功能有直接的關(guān)系外，其界面也是重要的一部分，界面直接影響了用戶(hù)的使用感官和使用頻率。尤其現(xiàn)在很多同質(zhì)App的競(jìng)爭(zhēng)中，如何使App更加有競(jìng)爭(zhēng)力，讓更多受眾選擇。App界面設(shè)計(jì)需要具備的特點(diǎn)主要有簡(jiǎn)單易用、界面交互的一致性、色彩搭配的舒適度、文字內(nèi)容的主次分明等。

2.2 移動(dòng)App界面設(shè)計(jì)的原則

在App產(chǎn)品功能同質(zhì)化日益嚴(yán)重的時(shí)代，將App的界面與品牌的特色相結(jié)合，通過(guò)對(duì)移動(dòng)App界面的精心設(shè)計(jì)，以提高產(chǎn)品的競(jìng)爭(zhēng)力，在設(shè)計(jì)中要遵循一致性、溝通性、用戶(hù)個(gè)性體驗(yàn)、環(huán)境原則。一致性原則即通過(guò)視覺(jué)層次、視覺(jué)元素和視覺(jué)結(jié)構(gòu)等達(dá)到界面的統(tǒng)一性、整體性，以減少用戶(hù)的認(rèn)知成本，加深對(duì)品牌的認(rèn)識(shí)。溝通性原則指App界面交互操作設(shè)計(jì)，其目的是滿(mǎn)足用戶(hù)碎片化的閱讀，在界面中，用最簡(jiǎn)潔、便利的操作實(shí)現(xiàn)相應(yīng)的功能，提高交互的效率。用戶(hù)個(gè)性化體驗(yàn)原則是以用戶(hù)為中心，深入挖掘用戶(hù)的個(gè)性化體驗(yàn)需求，滿(mǎn)足用戶(hù)個(gè)性化的情感需求和精神參與感，使App產(chǎn)品能夠從眾多同質(zhì)化產(chǎn)品中脫穎而出，展示自身特色，提升產(chǎn)品的競(jìng)爭(zhēng)力。環(huán)境原則指的是App運(yùn)行的系統(tǒng)應(yīng)用環(huán)境和用戶(hù)應(yīng)用App的場(chǎng)景和情景等，為了給用戶(hù)帶來(lái)更好的體驗(yàn)，設(shè)計(jì)中要注重App與用戶(hù)交互的方式和應(yīng)用的場(chǎng)景，從而提高用戶(hù)與App的參與度。

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

3.1 利用色彩心理效應(yīng)，提升用戶(hù)體驗(yàn)

色彩是設(shè)計(jì)中最重要的視覺(jué)傳達(dá)要素，人們?cè)谑艿缴蚀碳ぎa(chǎn)生直覺(jué)映像的同時(shí)，也會(huì)自動(dòng)地引發(fā)出對(duì)應(yīng)的心理活動(dòng)，例如感情、情緒以及行為等，這稱(chēng)為“色彩心理效應(yīng)”。在界面設(shè)計(jì)中，優(yōu)秀的色彩設(shè)計(jì)不僅增強(qiáng)了App的視覺(jué)感染力，給用戶(hù)舒適、可靠、安全、新穎的視覺(jué)感受，更有效地提升了用戶(hù)體驗(yàn)感。首先，通過(guò)對(duì)比顏色的搭配和區(qū)域色塊的應(yīng)用，一方面可以吸引用戶(hù)的目光，使用戶(hù)在復(fù)雜的界面與眾多的信息中，快速找到所需的信息。另一方面可以將雜亂的界面從視覺(jué)上分為若干個(gè)區(qū)域，使用戶(hù)既不會(huì)遺漏重要的信息，又可以提升界面的整體性。其次，由于色彩的心理效應(yīng)，在界面設(shè)計(jì)時(shí)，針對(duì)App的用戶(hù)群體，科學(xué)地選擇顏色，正確地使用色彩搭配，充分發(fā)揮色彩的心理效應(yīng)，可以為用戶(hù)創(chuàng)造一個(gè)良好的色彩環(huán)境。例如針對(duì)女生的App，則適合采用糖果色、粉色、甜美色系，針對(duì)男生則更加適合灰色系、黑色系等。最后，在不同的節(jié)假日可以采用不同的色彩搭配，可以使用戶(hù)在第一時(shí)間發(fā)現(xiàn)和感知到今天的節(jié)日變化，并且可以使用戶(hù)產(chǎn)生新穎感和驚喜感，提升用戶(hù)使用App的期待感和頻率。

3.2 使用色彩搭配效果，營(yíng)造整體風(fēng)格

色彩是最直接性的交流語(yǔ)言，是最為引人注目的視覺(jué)因素，它能夠在第一時(shí)間吸引用戶(hù)的注意力。在界面設(shè)計(jì)中應(yīng)用色彩，可以明確界面元素視覺(jué)層級(jí)關(guān)系、營(yíng)造界面整體風(fēng)格、顯示界面的整體架構(gòu)。在App界面設(shè)計(jì)中，利用主色調(diào)、輔助色和裝飾色之間的對(duì)比調(diào)和，就可以營(yíng)造出不同的風(fēng)格，例如，可以通過(guò)單色系、相鄰色系、對(duì)比色系等的搭配營(yíng)造出整體性，同時(shí)不同的界面都需要采用相同的配色方案，使用戶(hù)在界面前跳轉(zhuǎn)時(shí)，始終感覺(jué)是一個(gè)整體。使用單色系時(shí)，采用色調(diào)的明度和純度對(duì)模塊區(qū)域進(jìn)行分層，能更突出重要信息，并且整體性更高。使用相鄰色系時(shí)，風(fēng)格更加統(tǒng)一，提升整個(gè)App的豐富感。使用對(duì)比色系時(shí)，視覺(jué)沖擊力最大，使信息模塊更加清晰。

通過(guò)圖1采用不同的色彩搭配，可以清楚地表達(dá)界面元素視覺(jué)層級(jí)關(guān)系、營(yíng)造不同界面整體風(fēng)格。

3.3 合理利用色彩寓意，強(qiáng)化功能引導(dǎo)

色彩不僅使人產(chǎn)生冷暖、遠(yuǎn)近、輕重、明暗、大小的感覺(jué)，還會(huì)引起人們更多的遐想，不同的色彩對(duì)人產(chǎn)生的感知和心理感受是不同的。例如，藍(lán)色是一種純凈的色彩，代表著冷靜理性的思維，象征永恒久遠(yuǎn)的愛(ài)情，在界面設(shè)計(jì)中應(yīng)用藍(lán)色，常給人以清爽宜人、寧?kù)o淡泊的感覺(jué)，常見(jiàn)于企業(yè)的App中，但由于藍(lán)色屬于冷色系，在App界面中，不宜大面積使用，通常降低純度或減小使用面積。由于色彩的寓意性，因此在界面設(shè)計(jì)中，可以使用色彩寓意增強(qiáng)功能引導(dǎo)。例如在App界面的導(dǎo)航欄設(shè)計(jì)中，當(dāng)頁(yè)面停留在某一個(gè)界面時(shí)，導(dǎo)航欄中的某一個(gè)圖標(biāo)和文字鏈接會(huì)呈現(xiàn)出灰色或與其他圖標(biāo)的明度有所降低，通過(guò)這種方式告知用戶(hù)當(dāng)前所處的界面。再例如在界面中，希望用戶(hù)特別注意的或有意吸引用戶(hù)注意力的信息內(nèi)容，用強(qiáng)烈的紅色或者是使用對(duì)比色來(lái)呈現(xiàn)?？傊?，通過(guò)色彩的寓意性，可以在向用戶(hù)傳遞信息的同時(shí)，傳遞相應(yīng)的情感，并強(qiáng)化用戶(hù)對(duì)信息的記憶。

通過(guò)圖2色相環(huán)更清晰地選擇暖色、冷色、對(duì)比色、鄰近色等搭配，可以更加準(zhǔn)確地選擇色號(hào)。

4 布局在移動(dòng)App界面中的應(yīng)用

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，人們接收信息更多是通過(guò)移動(dòng)App而不是傳統(tǒng)的網(wǎng)站，并且隨著應(yīng)用的深入，這種趨勢(shì)日益明顯。因此，通過(guò)精心設(shè)計(jì)布局的App，不僅讓用戶(hù)眼前一亮，更能使App在同質(zhì)化的應(yīng)用中脫穎而出。

首先，決定布局的是內(nèi)容的多少、優(yōu)先級(jí)和點(diǎn)擊率。不同應(yīng)用App頁(yè)面中的內(nèi)容多少是不同的，而且同一頁(yè)面中元素的優(yōu)先級(jí)也是不同的，如果想要用戶(hù)在頁(yè)面有“點(diǎn)擊”操作，那么內(nèi)容就必須命中用戶(hù)的需求，例如在電商類(lèi)的App中，常常采用一排兩列、三列、四列的布局方式，以實(shí)現(xiàn)更多商品的曝光。

其次，同一頁(yè)面中穿插不同的布局方式。App界面中常用的布局有頂部導(dǎo)航、標(biāo)簽式導(dǎo)航、抽屜式、九宮格式、列表式布局，不同的布局方式用于呈現(xiàn)不同的內(nèi)容，以達(dá)到不同的視覺(jué)效果。在同一頁(yè)面中，根據(jù)內(nèi)容的不同，穿插不同的布局方式，利用各種布局的優(yōu)點(diǎn)，不僅能豐富頁(yè)面的效果，還可以增強(qiáng)用戶(hù)在頁(yè)面停留的時(shí)間，提高信息的曝光率和用戶(hù)的轉(zhuǎn)化率。例如，列表布局使內(nèi)容層次清晰明了，視線從上到下，瀏覽體驗(yàn)快捷，九宮格布局使頁(yè)面元素井然有序且間隔合理，清晰展現(xiàn)內(nèi)容，視覺(jué)效果舒服。

再次，合理應(yīng)用圖標(biāo)。圖標(biāo)作為界面中重要的元素之一，合理地運(yùn)用與設(shè)計(jì)可以給用戶(hù)更強(qiáng)的視覺(jué)表現(xiàn)力。利用圖標(biāo)可以省略大段的描述性文字，使界面變得更加整潔，且能有效地強(qiáng)調(diào)界面的視覺(jué)重心，能更好地突出主要業(yè)務(wù)重心。雖然圖標(biāo)有許多潛在的優(yōu)勢(shì)，在移動(dòng)App界面中應(yīng)用廣泛，但在使用中一方面需要注意圖標(biāo)向用戶(hù)傳達(dá)的功能性含義，也就是圖標(biāo)代表的意義。另一方面，圖標(biāo)要保持簡(jiǎn)潔具有圖解性并且包含可見(jiàn)的文本標(biāo)簽，每個(gè)圖標(biāo)都應(yīng)該達(dá)到最簡(jiǎn)形式，將思想精華融入其中確?？勺x性，再加上說(shuō)明性的標(biāo)簽文本以提高圖標(biāo)的可閱讀性和可用性。

5 結(jié)論

在競(jìng)爭(zhēng)日益激烈的移動(dòng)互聯(lián)網(wǎng)時(shí)代，移動(dòng)App的成功取決于用戶(hù)數(shù)量的多少，在市場(chǎng)同質(zhì)化日益嚴(yán)重的今天，在為用戶(hù)提供信息和功能的同時(shí)，如何更有效地吸引用戶(hù)，是所有App界面設(shè)計(jì)人員必須思考的問(wèn)題，在界面設(shè)計(jì)中，科學(xué)合理地應(yīng)用色彩，根據(jù)內(nèi)容選擇不同的布局，可以提升App界面的整體視覺(jué)效果，不僅提高了用戶(hù)的閱讀體驗(yàn)，還提高了App的曝光率，使App產(chǎn)品可以脫穎而出。

參考文獻(xiàn)：

[1] 呂申明，趙宇.色彩對(duì)APP界面設(shè)計(jì)的重要作用[J].傳媒論壇，2020，3（13）：148.

[2] 張穎，楊亮，申艷芳.APP界面設(shè)計(jì)與移動(dòng)交互體驗(yàn)設(shè)計(jì)[J].現(xiàn)代電子技術(shù)，2020，43（23）：182-186.

[3] 董媖妲.手機(jī)App界面設(shè)計(jì)的色彩應(yīng)用研究[J].現(xiàn)代交際，2020（3）：128，127.

[4] 苗潤(rùn)蓮，毛維娜，毛衛(wèi)南，等.移動(dòng)端Web應(yīng)用界面構(gòu)建方法，Web應(yīng)用界面及其操作方法：CN111221530A[P].20200602.

[5] 許婷，覃會(huì)優(yōu)，徐秋晨.社交APP界面的極簡(jiǎn)化設(shè)計(jì)研究[J].電腦知識(shí)與技術(shù)，2020，16（12）：97-98，108.

[6] 涂歡，劉恒鑫.基于智能手機(jī)中游戲APP的人機(jī)界面設(shè)計(jì)分析[J].綠色科技，2020（22）：202-203.

【通聯(lián)編輯：唐一東】