商業(yè)插畫在App界面設(shè)計中的應(yīng)用

郭詩雅（廣州科技職業(yè)技術(shù)大學(xué)）

一、商業(yè)插畫在App界面設(shè)計中的應(yīng)用概述

商業(yè)插畫作為商業(yè)活動發(fā)展過程中形成的一種新的信息傳遞形式，有著較強(qiáng)的藝術(shù)性與設(shè)計性，在信息傳播過程中，將表現(xiàn)形式生動活潑、視覺語言極具創(chuàng)意的商業(yè)插畫融入信息傳播過程中，不僅順應(yīng)了當(dāng)代信息傳播發(fā)展的需要，還能更好地吸引用戶的注意力，從而為信息廣泛傳播提供有效的支持。

（一）應(yīng)用意義

隨著5G 時代的到來，較過去人們獲取信息的方式越發(fā)豐富，單純的文字信息、知識獲取方式已經(jīng)無法切實滿足人們的實際需要，這一情況使得視覺圖像在信息傳播中的占比不斷增加。商業(yè)插畫作為可以使主體概念一覽無余的重要視覺信息傳遞方式，在當(dāng)前的信息傳播工作中，有著極高的應(yīng)用價值，將其合理應(yīng)用到App 用戶界面上，不僅可以使用戶更好地理解信息中傳遞的內(nèi)涵與情感，還能為社會信息傳播提供新的途徑。

1.滿足人們視覺審美轉(zhuǎn)變的要求

在各種因素的影響下，當(dāng)代人的審美需求與審美觀念不斷發(fā)生變化，并且不同人的審美觀念也存在著較大的差別，這就使得人們在面對同一件藝術(shù)作品時，受各自審美動機(jī)不同的影響，審美感受差別相對較大。第三方應(yīng)用程序作為一種面向大眾的交互軟件，為了更好地傳達(dá)程序軟件中信息的主旨，便于受眾能夠有效理解作品的內(nèi)涵，將能夠順應(yīng)時代文化以及受眾審美需要的商業(yè)插畫融入應(yīng)用程序界面當(dāng)中，在吸引受眾注意力的同時，激發(fā)受眾與商業(yè)插畫中的情感共鳴，已經(jīng)成為進(jìn)一步提升App 整體影響力的重要手段。

2.滿足人們閱讀方式轉(zhuǎn)變的要求

在互聯(lián)網(wǎng)技術(shù)不斷發(fā)展、智能手機(jī)廣泛普及的背景下，人們獲取信息的主要方式不僅僅局限于文字，正朝著感性化、圖像化的方向發(fā)展，盡管視覺感受能力是人們與生俱來的一種認(rèn)知能力，但更為淺顯、更貼合主流文化的圖像能夠有效降低人們讀圖的難度，從而達(dá)到強(qiáng)化受眾從圖像中獲取信息能力的目的。商業(yè)插畫作為一種以受眾審美需求為創(chuàng)作基礎(chǔ)而創(chuàng)作的藝術(shù)作品，作者在創(chuàng)作過程中將受眾的審美需求當(dāng)作了評價插畫質(zhì)量的重要標(biāo)準(zhǔn)之一，這一情況的出現(xiàn)大大降低了受眾讀圖的難度，因此，將商業(yè)插畫融入第三方應(yīng)用程序界面設(shè)計工作中，成為切實降低人們理解應(yīng)用程序界面內(nèi)涵傳遞難度，擴(kuò)大App 受眾范圍的重要舉措。

3.滿足人們交互心理轉(zhuǎn)變的要求

用戶在操作第三方應(yīng)用程序時，其心理感受往往會隨著程序界面的變化而發(fā)生一定的變化，并且這種變化同樣會隨著用戶的操作反饋到界面元素上。相較于傳統(tǒng)的符號化界面，將商業(yè)插畫融入程序界面設(shè)計工作中，可以進(jìn)一步強(qiáng)化界面的變現(xiàn)力與感染力，保證用戶的心理體驗與心理訴求可以得到有效地滿足。具體來說，現(xiàn)階段，為了保證產(chǎn)品能夠切實滿足用戶的使用需要，程序軟件開發(fā)商方面不僅需要不斷提升App 功能模塊的質(zhì)量，還需要通過合理應(yīng)用圖像語言給予用戶以情感關(guān)懷，通過帶給用戶良好的情感體驗的方式，使用戶能夠在程序使用過程中，不斷提升自身的使用黏性。

（二）應(yīng)用原則

1.整體性原則

在智能移動設(shè)備不斷普及的背景下，不同的用戶可能在不同的時間、環(huán)境下使用相同的第三方應(yīng)用程序，為了保證應(yīng)用程序能夠為切實滿足用戶不同情感需要，在進(jìn)行App 界面設(shè)計時，程序開發(fā)商需要在明確應(yīng)用程序具體功能的基礎(chǔ)上，通過提升界面整體協(xié)調(diào)性的方式，提升商業(yè)插畫融入程序界面中的效果，更好地滿足大眾對程序界面的需要。具體來說，在將商業(yè)插畫融入程序界面中時，為了使界面整體有著良好的視覺整體性，程序開發(fā)商可以通過從插畫中提取某些元素，并將這些元素與界面?zhèn)鬟f的信息、提供的服務(wù)功能進(jìn)行有效結(jié)合的方式，提升界面整體視覺語言的統(tǒng)一性，保證界面能夠有著與商業(yè)插畫中元素完美契合的內(nèi)在邏輯，強(qiáng)化界面視覺語言的統(tǒng)一性與明確性。

需要注意的是，在程序界面分頁設(shè)計過程中，若想要用不同的商業(yè)插畫保證每個界面都有著個性鮮明主題，那么為了避免應(yīng)用程序整體界面過于混亂，影響用戶使用App 時的感官體驗，程序開發(fā)商應(yīng)通過保證各界面能夠形成一個相對和諧整體的方式，降低用戶使用界面的難度，為第三方應(yīng)用程序適用范圍的擴(kuò)大提供有效的支持。舉例來說，Wlid Weather 作為一款采用手繪風(fēng)格描述天氣的App，在實際應(yīng)用過程中，Wlid Weather 的界面背景會隨著用戶使用程序時地點(diǎn)、時間等因素的改變而發(fā)生改變，但不同層級的App 界面元素間仍遵循著相對統(tǒng)一的風(fēng)格手繪效果，色彩的選擇也遵循著一定的原則，這一情況的出現(xiàn)使得該應(yīng)用程序在使用過程中，能夠給用戶帶來一種既統(tǒng)一又獨(dú)具特色的使用體驗，從而達(dá)到增強(qiáng)用戶使用黏性的目的。

2.多樣性原則

由于人是一種感情豐富的高等動物，在App 設(shè)計過程中，為了保證界面設(shè)計效果能夠滿足用戶的感情需要，程序開發(fā)商可以將商業(yè)插畫與用戶界面設(shè)計進(jìn)行有機(jī)融合，實現(xiàn)界面與用戶情感上的有效互動，從而達(dá)到提升第三方應(yīng)用程序使用親和力的目的。具體來說，情景決定論指出，人們所處的環(huán)境背景，能夠?qū)ζ淝楦小⑺季S、行為等方面產(chǎn)生一定的影響，在用戶使用第三方應(yīng)用程序時，App 界面的不同會產(chǎn)生不同的情景氛圍，進(jìn)而對用戶的使用行為、使用情感產(chǎn)生一定的影響。現(xiàn)階段，為了使用戶界面的情感能夠切實滿足用戶的實際需要，程序開發(fā)商可以在明確應(yīng)用程序產(chǎn)品屬性的基礎(chǔ)上，了解目標(biāo)用戶的操作行為與特點(diǎn)，然后以此為基礎(chǔ)，選擇能夠滿足用戶多樣性需要的商業(yè)插畫，并將其作為設(shè)計主題，在用戶各界面中做出能夠與商業(yè)插畫相呼應(yīng)的設(shè)計元素，保證程序界面能夠切實滿足用戶多樣化的情感需要。

3.易用性原則

對于當(dāng)前的第三方應(yīng)用程序界面來說，其設(shè)計核心在于保證用戶能夠在使用應(yīng)用程序時流暢地通過操作界面獲取自身所需的信息，實現(xiàn)App 的有效使用，但功能上的簡單并不意味著程序開發(fā)商要應(yīng)用最為簡潔的界面元素，進(jìn)行用戶界面的設(shè)計。對于優(yōu)秀的程序開發(fā)商來說，以設(shè)計開發(fā)流程為目標(biāo)導(dǎo)向、以產(chǎn)品概念為核心，通過化繁為簡的方式，將商業(yè)插畫巧妙地融入程序界面設(shè)計工作中，不僅可以提升界面簡潔性、高效性，還能強(qiáng)化應(yīng)用程序整體的信息以及情感豐富性，從而調(diào)動用戶對App 的情感認(rèn)知，以便切實滿足用戶對App 使用需要。

4.獨(dú)創(chuàng)性原則

在當(dāng)前第三方應(yīng)用程序軟件數(shù)量不斷增加的背景下，應(yīng)用程序之間的同質(zhì)化問題越發(fā)嚴(yán)重，現(xiàn)階段，為保證App能夠更好地吸引受眾的目光，通過將商業(yè)插畫融入程序界面設(shè)計中的方式，推動應(yīng)用程序界面的個性化發(fā)展，成為加深受眾對App 印象，提升App 競爭力的重要舉措。

舉例來說，WALKIP 是一款以記錄運(yùn)動為核心的創(chuàng)新社交應(yīng)用，程序開發(fā)商將虛擬環(huán)游世界與互動游戲融入了界面設(shè)計中，并且將場景、文化以插畫的形式表現(xiàn)了出來。同時，考慮到用戶到達(dá)場景時間存在一定差異，為了增加用戶對App 界面的新鮮感，在場景界面設(shè)計時，界面上顯示出的畫面會隨時間的變化而發(fā)生變化，給予用戶以不同的感受與情感體驗，從而更好地調(diào)動了用戶使用WALKIP 的熱情，為WALKIP 的健康發(fā)展提供了有效的支持。

二、商業(yè)插畫在App界面設(shè)計中的應(yīng)用方法

相較于文字，商業(yè)插畫本身就具有一定的設(shè)計性與藝術(shù)性，將商業(yè)插畫融入第三方應(yīng)用程序界面設(shè)計過程中，可以使界面更好地吸收借鑒插畫在藝術(shù)方面的表現(xiàn)形式，在提升界面整體藝術(shù)性的同時，給用戶帶來了良好的視覺體驗，從而達(dá)到調(diào)動用戶使用App 積極性的目的。具體來說，商業(yè)插畫能夠在有效還原事物本質(zhì)的同時，將事物的特點(diǎn)進(jìn)行突出美化，由于這些事物大多與人們的生活實際有著較為密切的聯(lián)系，因此，在將這類商業(yè)插畫應(yīng)用到應(yīng)用程序界面設(shè)計工作中時，可以令界面在藝術(shù)風(fēng)格上擁有良好的真實性與可信性，從而達(dá)到提升界面整體親和力，吸引更多用戶的目的。同時，相較于單純的文字信息，商業(yè)插畫創(chuàng)作的藝術(shù)手法較為多樣，在將商業(yè)插畫應(yīng)用到程序界面設(shè)計工作中后，界面的視覺語言、空間知覺以及思維活動方面表現(xiàn)出更好的效果，更能吸引受眾的目光。

（一）商業(yè)插畫在App 界面本能層中的設(shè)計應(yīng)用

對于第三方應(yīng)用程序界面來說，本能層設(shè)計是先通過感官接收相關(guān)信息的反應(yīng)，然后表現(xiàn)出的一種即時情感，這種情感表達(dá)效果與界面色彩、形態(tài)、質(zhì)感等因素之間存在著直接的聯(lián)系?，F(xiàn)階段，在本能層設(shè)計過程中，程序開發(fā)商可以通過適當(dāng)刺激用戶感官的方式，使得用戶能夠獲得更為鮮明的App 使用體驗，從而為用戶、App 之間互動的強(qiáng)化，提供支持。

1.視覺語言

在商業(yè)插畫設(shè)計過程中，其視覺語言包括點(diǎn)線面、色彩、空間等元素，在將商業(yè)插畫融入第三方應(yīng)用程序界面中時，為保證融合的有效性，同樣要加強(qiáng)視覺語言融入情況的關(guān)注度，以便達(dá)到切實提升界面美觀性的目的。

首先，點(diǎn)線面在界面構(gòu)成中存在著相輔相成的關(guān)系，合理應(yīng)用這些元素，不僅能夠使界面具有個性且具有美感，還能夠帶給用戶以良好的感官體驗，從而達(dá)到引導(dǎo)用戶使用App 的目的。具體來說，在界面設(shè)計過程中，合理應(yīng)用點(diǎn)元素，可以使界面擁有良好的集中感與活躍感，例如，規(guī)則排列的點(diǎn)就能給人們帶來相對穩(wěn)定嚴(yán)謹(jǐn)?shù)囊曈X心理效果；隨機(jī)排列的點(diǎn)，則會給人們帶來較為生動活潑的感覺。

其次，色彩是聯(lián)系人們視覺與心理感知的重要紐帶，更是人們情感意識的重要載體，在實際生活中，人們的情感同樣會受到色彩的影響。將商業(yè)插畫融入第三方應(yīng)用程序界面設(shè)計中時，程序開發(fā)商可以通過合理利用色彩情感色彩聯(lián)想特性的方式，在提升應(yīng)用程序界面美觀性的基礎(chǔ)上，引發(fā)用戶對界面的情感共鳴，增加用戶使用App 的時間。例如中國紅在國人的心中占據(jù)著極為特殊的意味，為了提升用戶對App 的認(rèn)同感，淘寶在過年期間在界面設(shè)計上大面積應(yīng)用紅色元素，營造出紅紅火火的氛圍，增加了用戶對淘寶的認(rèn)同感。

最后，空間是人們?nèi)粘Ｉ钪休^為常見的一種元素，在商業(yè)插畫中合理應(yīng)用空間元素，可以二維插畫中實現(xiàn)三維事物的有效描繪，具有更為強(qiáng)烈的藝術(shù)感染力與視覺沖擊力，將帶有空間特點(diǎn)的商業(yè)插畫融入應(yīng)用程序界面設(shè)計工作中，可以令用戶在較短的時間內(nèi)置身于界面搭建的場景中，更好地帶動用戶的思想情感，直接獲取更為有用的信息，為用戶帶來良好的情感體驗，例如紀(jì)念碑谷這個App 的界面在設(shè)計過程中，設(shè)計人員就充分利用了空間元素，實現(xiàn)了插畫與界面設(shè)計的有效融合，進(jìn)一步提升了用戶的情感體驗。

2.表現(xiàn)形式

當(dāng)前的第三方應(yīng)用程序界面設(shè)計工作中，商業(yè)插畫的表現(xiàn)形式主要由靜態(tài)插畫與動態(tài)插畫兩種。具體來說，靜態(tài)插畫是一種利用靜態(tài)敘事形式，表現(xiàn)視覺信息的一種信息表達(dá)形式，在實際應(yīng)用過程中，更注重對畫面基本構(gòu)成元素的有效把握。將靜態(tài)插畫應(yīng)用到應(yīng)用程序界面設(shè)計工作中，插畫本身可以被看作是一個獨(dú)立完整的空間，為了保證這個空間能夠與App 界面完美融合，應(yīng)當(dāng)通過精準(zhǔn)把握App 中各種元素的方式，使得界面的內(nèi)涵充分展現(xiàn)出來。同時，通過利用類似透視的運(yùn)動軌跡、傾斜方向、明暗相間表面直覺特性等方式，靜態(tài)插畫同樣可以展現(xiàn)出相對動態(tài)的觀感，這一情況的存在進(jìn)一步擴(kuò)大的靜態(tài)插畫的應(yīng)用范圍。動態(tài)插畫是一種利用畫面連續(xù)性動作，告知用戶時間發(fā)生情況，使用戶能夠更好地了解程序界面所表達(dá)信息的一種信息表達(dá)方式，在實際應(yīng)用過程中，在表現(xiàn)時間與序列性知識方面，動態(tài)插畫有著特有的優(yōu)勢。

近年來，隨著用戶對App 界面互動性要求的不斷提升，將動態(tài)插畫合理應(yīng)用到界面設(shè)計工作中，可以進(jìn)一步提升界面視覺語言的豐富性，在帶給用戶相對流暢的交互情感體驗的基礎(chǔ)上，便于用戶與App 界面進(jìn)行有效的溝通。舉例來說，Toonie Alarm 這款A(yù)pp 的引導(dǎo)頁在設(shè)計過程中，就通過合理應(yīng)用動態(tài)插畫的方式，在完成文案的簡單介紹工作的基礎(chǔ)上，增強(qiáng)了Toonie Alarm 使用的趣味性，營造出了快樂的App 使用氛圍。

3.風(fēng)格體現(xiàn)

受各種繪畫工具不斷豐富、繪畫手法愈發(fā)成熟等因素的影響，當(dāng)前的商業(yè)插畫創(chuàng)作發(fā)展呈現(xiàn)出多元化的表現(xiàn)形式?，F(xiàn)階段，較為常見的插畫風(fēng)格體現(xiàn)形式包括扁平化插畫設(shè)計、MBE 插畫設(shè)計、數(shù)碼手繪插畫設(shè)計等。

首先，扁平化插畫設(shè)計方式誕生于技術(shù)與交互設(shè)計結(jié)合的大數(shù)據(jù)時代，這一設(shè)計方式的出現(xiàn)使得App 設(shè)計的可用性得到了有效的強(qiáng)化。具體來說，在當(dāng)前的社會發(fā)展過程中，人們的知識框架得到了有效地完善，認(rèn)知水平正在不斷提高，為了保證第三方應(yīng)用程序界面能夠更好地滿足人們對事物概括能力不斷增強(qiáng)的要求，扁平化插畫受到了人們的廣泛歡迎。這種插畫表現(xiàn)形式在使應(yīng)用過程中有著較強(qiáng)的可定制性與針對性特點(diǎn)，將其應(yīng)用到App 界面設(shè)計工作中，可以將功能由于形式的設(shè)計準(zhǔn)則作為界面設(shè)計的主導(dǎo)原則，便于用戶在使用應(yīng)用程序時最大限度地了解應(yīng)用本質(zhì)，進(jìn)一步強(qiáng)化用戶對App 的好感。需要注意的，從整體畫面效果上看，扁平化插畫可以給人們一種較為規(guī)整的感覺，為了進(jìn)一步擴(kuò)大第三方應(yīng)用程序的受眾，使具象的事物“萌”化，一方面需要處理好單個圖像的圖性感，保證不同圖像的邊緣線也能構(gòu)成相對有序的圖形；另一方面需要通過選擇特有或者符合商業(yè)需要的色彩語言進(jìn)行界面插畫圖像的創(chuàng)作，并且調(diào)整物體固有明暗關(guān)系的方式，增加不同顏色間塊面感、統(tǒng)一度，提升界面的親和力，便于用戶在使用過程中能夠切實體會到界面的趣味性與情感，使界面可以變得更為生動活潑。

其次，MBE 插畫是當(dāng)前App 界面設(shè)計中應(yīng)用范圍較為廣泛的一種插畫形式，這種插畫在實際應(yīng)用過程中，主要用粗且圓潤的線條勾勒物品的輪廓，物品形象中很少能看到尖銳的直角，并且為了削弱粗黑線條帶來的壓抑感，在創(chuàng)作過程中，MBE 插畫主要通過“斷線”、增加圓點(diǎn)、使用高飽和度亮色進(jìn)行配色處理等方式，增加形象的豐富感，使畫面形象表現(xiàn)出可愛的特點(diǎn)。

最后，傳統(tǒng)的手繪商業(yè)插畫主要是應(yīng)用筆墨、顏料、紙張等工具進(jìn)行創(chuàng)作的一種作品手繪創(chuàng)作方式，這種創(chuàng)作方式有著作品不易保存、掃描后作品有著明顯色差、不易修改等缺點(diǎn)，現(xiàn)階段，為了切實解決上述問題，數(shù)碼手繪插畫受到了人們的廣泛歡迎。這種繪畫形式在實際應(yīng)用過程中，可以通過將油畫色彩肌理、水墨暈染特點(diǎn)、水彩通透性等藝術(shù)表現(xiàn)形式切實結(jié)合到一起，從而達(dá)到豐富作品藝術(shù)韻味的效果。現(xiàn)階段，將數(shù)碼手繪插畫融入App 界面設(shè)計工作中，可以進(jìn)一步提升界面的親和力，更好地滿足現(xiàn)代用戶對App 界面的情感需要，從而為App 使用壽命的延長提供有效的支持。

（二）商業(yè)插畫在App 界面行為層中的設(shè)計應(yīng)用

行為層次指的是用戶在與第三方應(yīng)用程序互動時，交互產(chǎn)生的一系列感受，此層面的設(shè)計可以滿足用戶對App 操作的需要。

1.圖標(biāo)設(shè)計

圖標(biāo)是向用戶傳達(dá)第三方應(yīng)用程序應(yīng)用基礎(chǔ)信息的重要工具，是當(dāng)前應(yīng)用程序的一種指代標(biāo)簽，承擔(dān)著向用戶介紹這一App 工作類型、功能的重任。對于用戶來說，圖標(biāo)是認(rèn)識第三方應(yīng)用程序的重要基礎(chǔ)，優(yōu)秀的圖標(biāo)設(shè)計能夠更好地吸引受眾的目光，提升用戶對App的興趣，并通過點(diǎn)擊使用的方式，滿足自身對該款A(yù)pp 的好奇心?，F(xiàn)階段，為了更好地調(diào)動用戶使用第三方應(yīng)用程序的興趣，為App 配上一個優(yōu)秀的圖標(biāo)，成為使App 吸引更多潛在用戶的重要手段。具體來說，商業(yè)插畫作為一種外形美觀、擁有獨(dú)特藝術(shù)氣息的信息傳達(dá)方式，在當(dāng)前的App 圖標(biāo)設(shè)計工作中，合理應(yīng)用這種信息傳達(dá)方式，可以有效提升圖標(biāo)的辨識度、可用性與交互性，從而為第三方應(yīng)用程序整體吸引力的提升提供支持。

2.啟動界面設(shè)計

當(dāng)前部分第三方應(yīng)用程序在點(diǎn)擊圖標(biāo)后，會先跳出一個透明化的界面，在該界面彈出2—3s 后，再進(jìn)入主界面，這一透明化界面被稱作啟動界面，若App 的啟動界面為短暫的黑屏或者向用戶直接展示App 啟動代碼顯然并不能實現(xiàn)第三方應(yīng)用程序整體使用效益的最大化，對此，進(jìn)行啟動界面的有效設(shè)計成為一項極為必要的工作。具體來說，在最初設(shè)計階段，第三方應(yīng)用程序啟動界面的圖形語言大多是在一個純白背景上方是一個品牌logo，這種啟動界面相對單調(diào)，無法提升用戶對App 的關(guān)注度，面對這種情況，在界面設(shè)計過程中，程序開發(fā)商可以通過強(qiáng)化圖形語言的方式，在產(chǎn)品logo 的基礎(chǔ)上，對其進(jìn)行適當(dāng)變形，然后再添加合適的插畫元素與主題，從而達(dá)到切實提升用戶使用感官體驗的目的。

三、結(jié)論

總而言之，在信息化時代背景下，第三方應(yīng)用程序市場競爭越發(fā)激烈，為了進(jìn)一步提升App 的美觀性，更好地吸引用戶的視線，將具有獨(dú)特視覺語言與表現(xiàn)形式的商業(yè)插畫融入App 界面設(shè)計中，不僅可以使用戶更好地體會企業(yè)傳遞的信息，表達(dá)的情感，還能更好地滿足用戶對App 功能情感、認(rèn)知等方面的需求，從而達(dá)到切實提升App 市場競爭力的目的。