App閃屏界面插畫設(shè)計(jì)研究

石又祎

摘要：在打開(kāi)app應(yīng)用程序時(shí)，閃屏界面是首先會(huì)被用戶看到的過(guò)渡頁(yè)面。針對(duì)于閃屏界面的設(shè)計(jì)，可以向用戶傳遞有關(guān)產(chǎn)品的第一訊息，無(wú)論是節(jié)日祝福、產(chǎn)品宣傳，還是精美語(yǔ)錄等，都可以帶給用戶一種更加生動(dòng)、有趣的產(chǎn)品體驗(yàn)。在閃屏設(shè)計(jì)中使用插畫的表現(xiàn)形式可以激發(fā)用戶對(duì)產(chǎn)品的興趣，并引發(fā)用戶思考。使畫面更富趣味性，插畫在閃屏中的運(yùn)用是當(dāng)下最為流行的一種形式，它也具有多種多樣的表現(xiàn)形式和運(yùn)用技巧需要設(shè)計(jì)者掌握與靈活運(yùn)用。

關(guān)鍵詞：用戶體驗(yàn);插畫;閃屏界面

一、閃屏的功能概述

閃屏又稱為launch image，閃屏的出現(xiàn)是應(yīng)用程序被啟動(dòng)時(shí)的一個(gè)加載過(guò)程。在這個(gè)加載過(guò)程中閃屏可以設(shè)計(jì)為無(wú)畫面，使用戶感受不到這個(gè)加載的過(guò)程，使程序的啟動(dòng)與與進(jìn)入產(chǎn)品首頁(yè)有一個(gè)完美的融合。當(dāng)然，閃屏也可以充當(dāng)一個(gè)宣傳畫面的角色，比如設(shè)置一些插畫的宣傳廣告來(lái)使打開(kāi)程序的過(guò)程中更加富有樂(lè)趣，為產(chǎn)品的界面進(jìn)入過(guò)程做一個(gè)有意思的銜接。

在閃屏的設(shè)計(jì)中，又可細(xì)分成4種形式，常規(guī)閃屏、廣告閃屏、活動(dòng)閃屏和節(jié)日閃屏。由于閃屏傳達(dá)內(nèi)容上的不同，它所設(shè)計(jì)的畫面也根據(jù)內(nèi)容的不同有所區(qū)分，比如節(jié)日類的閃屏要更加注重畫面的氣氛，日常運(yùn)營(yíng)的則要注重產(chǎn)品信息的層級(jí)關(guān)系，熱點(diǎn)傳播則要突出新聞的內(nèi)容，品牌傳達(dá)則需要考量品牌自身的標(biāo)志色彩與形象。

常規(guī)閃屏的界面設(shè)計(jì)大都需要包括產(chǎn)品的標(biāo)志，定位語(yǔ)和內(nèi)容圖案。閃屏的設(shè)計(jì)上也喜歡與其產(chǎn)品自身的屬性有一定的關(guān)系，使其二者產(chǎn)生更多的連接性。當(dāng)然，為了使閃屏更好的迎合用戶對(duì)產(chǎn)品本身的體驗(yàn)，很多的app閃屏設(shè)計(jì)就以與產(chǎn)品本身有關(guān)聯(lián)性的圖片作為閃屏的設(shè)計(jì)的主題元素，比如我們最常用的微信閃屏，就是以一個(gè)地球的畫面作為主視覺(jué)，其本身的地球元素就與微信本身的性能特質(zhì)有著緊密的聯(lián)系。

廣告閃屏則是產(chǎn)品本身留給商業(yè)盈利的展示界面，比如微博啟動(dòng)時(shí)會(huì)出現(xiàn)天貓的活動(dòng)廣告、有道詞典的閃屏?xí)霈F(xiàn)英語(yǔ)培訓(xùn)的廣告，這些都屬于廣告閃屏。由于廣告閃屏自身的屬性就具有商業(yè)目的，所以在設(shè)計(jì)中更加注重色彩和形式上對(duì)用戶的吸引力，同時(shí)，為了減少用戶使用程序的疲憊感，導(dǎo)致對(duì)軟件自身的方案，廣告閃屏中尤其需要注意的就是設(shè)計(jì)一個(gè)跳過(guò)與倒計(jì)時(shí)的按鈕，保留住那些對(duì)廣告不感興趣的用戶群體的繼續(xù)使用的體驗(yàn)感。

活動(dòng)閃屏與廣告類的相差不多，起到的也是一個(gè)宣傳作用，需要注重顏色上的醒目與形式上的豐富。比如很多活動(dòng)的閃屏喜歡設(shè)計(jì)一些插畫手法的宣傳形式，把活動(dòng)體現(xiàn)的更富樂(lè)趣，對(duì)用戶產(chǎn)生更強(qiáng)的吸引力。插畫元素的加入可以把原本缺少細(xì)節(jié)的海報(bào)體現(xiàn)的更加生動(dòng)。

節(jié)日閃屏的設(shè)計(jì)則更能引發(fā)用戶的共鳴，使產(chǎn)品更具生活氣息，在設(shè)計(jì)上要更加的生動(dòng)可愛(ài)，拉近用戶的距離，可以使用戶對(duì)產(chǎn)品有更多的新鮮感。在節(jié)日類的閃屏設(shè)計(jì)中，很多產(chǎn)品都喜歡運(yùn)用插畫來(lái)進(jìn)行節(jié)日的展現(xiàn)。插畫的加入可以使節(jié)日的氣氛表現(xiàn)的更加淋漓盡致。同時(shí)可以吸引到不同的年齡段、不同工作領(lǐng)域的用戶群體。[1]

二、閃屏界面中插畫的風(fēng)格

插畫的加入是閃屏的設(shè)計(jì)中最容易產(chǎn)生用戶吸引力的畫面。首先插畫有著不分年齡不分領(lǐng)域的跨越性，可以讓更多的用戶產(chǎn)生視覺(jué)的舒適感，對(duì)鮮艷的顏色產(chǎn)生興趣。另外在表達(dá)形式上，商業(yè)化程度更低，容易被大眾所理解，可以拉近用戶距離。同時(shí)，插畫本身富有很強(qiáng)的趣味性和感染力，是一種通俗易懂的視覺(jué)語(yǔ)言。在插畫的設(shè)計(jì)上也可以用不同的風(fēng)格進(jìn)行表達(dá)。

比如當(dāng)下最為流行的扁平化的插畫風(fēng)格，插畫整體的風(fēng)格特點(diǎn)就是扁平的，沒(méi)有立體結(jié)構(gòu)的關(guān)系，視覺(jué)感官及為簡(jiǎn)單，色彩搭配上也顯得十分明朗。這種表達(dá)形式會(huì)更加清晰，讓用戶一目了然。使畫面整體感覺(jué)更加時(shí)尚、輕快。而且在繪制效率上很高，不需要花費(fèi)很多的時(shí)間就能展現(xiàn)出來(lái)不錯(cuò)的視覺(jué)感。這個(gè)風(fēng)格被很多的品牌所喜歡，比如摩拜單車、飛豬等等。更加符合時(shí)代的特征，也符合年輕人簡(jiǎn)單時(shí)尚的審美觀。

除了扁平風(fēng)格，想要略顯復(fù)雜可以加入肌理的風(fēng)格，這個(gè)風(fēng)格更具有趣味性與立體感，它是在扁平插畫的基礎(chǔ)上加入了顆粒感，使畫面的光影效果更佳突出，也使畫面多了一層質(zhì)感。這樣的插畫看起來(lái)更加的立體，更具真實(shí)感。同時(shí)，畫面不會(huì)顯得粗糙、空乏，而更加精致。

當(dāng)然，最為被大眾所認(rèn)識(shí)的就是手繪型的插畫設(shè)計(jì)風(fēng)格。手繪風(fēng)格的插畫對(duì)產(chǎn)品宣傳的更具有針對(duì)性，而且手繪型插畫更加具有設(shè)計(jì)師本身的風(fēng)格，需要設(shè)計(jì)師繪制的風(fēng)格與品牌調(diào)性相符。手繪風(fēng)格對(duì)設(shè)計(jì)師也有著較高的要求，需要設(shè)計(jì)師有很強(qiáng)的畫面感，來(lái)營(yíng)造更加豐富、吸引人的畫面。而其風(fēng)格的應(yīng)用領(lǐng)域也較廣，需要靈活的協(xié)調(diào)其產(chǎn)品的特性。

當(dāng)下流行的MBE型的插畫風(fēng)格也具有十分簡(jiǎn)潔、俏皮、時(shí)尚的設(shè)計(jì)感。也更具有表現(xiàn)力。它主要的表現(xiàn)形式就在于其簡(jiǎn)潔的外觀和干凈的線條構(gòu)成的可愛(ài)形態(tài)。粗線條的描邊，適當(dāng)?shù)臄帱c(diǎn)空隙和色塊的小面積溢出，使得畫面更具靈動(dòng)性。它更多地存在于產(chǎn)品的商標(biāo)和游戲類的產(chǎn)品風(fēng)格之中。

還有具有科技時(shí)尚感的漸變型插畫風(fēng)格。它的色彩使用上通常傾向于一到兩種，多為近似色，營(yíng)造一種神秘、奇幻的風(fēng)格，更加吸引年輕人。比如一些傾向女性群體的應(yīng)用軟件更喜歡運(yùn)用粉紫色系的漸變作為閃屏插畫的主題色彩，又具有時(shí)尚感，有吸引力女性的注意力?；蛘吆芏嗟臅r(shí)尚科技感app插畫設(shè)計(jì)的風(fēng)格上也偏向漸變型的插畫設(shè)計(jì)，色彩簡(jiǎn)潔、方式炫酷，表達(dá)直接明了，更加受年輕人的喜歡。

立體型插畫設(shè)計(jì)風(fēng)格或者稱為2.5D插畫風(fēng)格，這種風(fēng)格則是更加立體化的一種表達(dá)，使畫面看起來(lái)有層級(jí)關(guān)系，表現(xiàn)三維的視覺(jué)感。這種立體感的風(fēng)格，是運(yùn)用插畫的手法進(jìn)行展現(xiàn)，模擬出一種立體的效果，但其形式更加可愛(ài)、更具趣味性，畫面也具整體性，比如大家熟知的游戲紀(jì)念碑谷就使用的這種風(fēng)格，它使固定尺寸的手機(jī)屏幕有了更多的空間感，讓用戶產(chǎn)生一定的好奇心理，抓住了用戶的注意力，是一種很好的插畫形式。

插畫的設(shè)計(jì)風(fēng)格有很多種形式，在應(yīng)用程序閃屏的設(shè)計(jì)中，需要設(shè)計(jì)者對(duì)產(chǎn)品本身需要傳達(dá)的內(nèi)容有一個(gè)清晰的定位，并對(duì)客戶群體的喜好有一個(gè)明確的把控，從而考慮插畫在界面中的應(yīng)用設(shè)計(jì)風(fēng)格再進(jìn)行設(shè)計(jì)。把插畫與產(chǎn)品宣傳的內(nèi)容進(jìn)行完美的結(jié)合。掌握多種插畫設(shè)計(jì)的風(fēng)格的同時(shí)可以運(yùn)用多種插畫手法進(jìn)行組合變化，使插畫本身更富魅力。

三、插畫在閃屏中的設(shè)計(jì)技巧

在閃屏的設(shè)計(jì)過(guò)程中，設(shè)計(jì)者最需要注重的則是與甲方的溝通，首先要對(duì)產(chǎn)品有一定程度的理解，同時(shí)要對(duì)于產(chǎn)品過(guò)去的閃屏設(shè)計(jì)或者產(chǎn)品本身的設(shè)計(jì)調(diào)性有一個(gè)定位，明確產(chǎn)品的整體調(diào)性和宣傳理念，并進(jìn)行深度的分析。并與客戶進(jìn)行有效的溝通和探討，了解產(chǎn)品所需要的預(yù)期效果，便可以展開(kāi)對(duì)閃屏插畫的畫面構(gòu)思。

插畫的設(shè)計(jì)需要設(shè)計(jì)者緊密的構(gòu)思，不僅需要手頭的專業(yè)技能強(qiáng)，更加需要設(shè)計(jì)師有一個(gè)清晰的頭腦來(lái)理解客戶想要達(dá)成的效果。設(shè)計(jì)出一張優(yōu)秀的插畫，少不了思想上的投入，需要對(duì)產(chǎn)品本身有一個(gè)深刻的認(rèn)識(shí)，對(duì)大眾審美有一個(gè)廣泛的理解，再加入自身的專業(yè)能力，才可以完成讓用戶喜愛(ài)的閃屏設(shè)計(jì)。[2]

在插畫設(shè)計(jì)的前期需要設(shè)計(jì)師來(lái)進(jìn)行不斷的頭腦風(fēng)暴去完成整體的設(shè)計(jì)把控。同時(shí)，搜集大量的相關(guān)素材，把控好設(shè)計(jì)的風(fēng)格和想要傳達(dá)的創(chuàng)意點(diǎn)與內(nèi)容。在相關(guān)案例中進(jìn)行反復(fù)的對(duì)比，并針對(duì)可行的方案措施進(jìn)行不斷的參考與提取。將這些創(chuàng)新點(diǎn)進(jìn)行結(jié)合與對(duì)比，整體進(jìn)行有效的銜接，把這個(gè)思路與團(tuán)隊(duì)人員進(jìn)行討論與設(shè)計(jì)，提出最終的幾條解決方案進(jìn)行再對(duì)比。

當(dāng)方案有了初步的確定，設(shè)計(jì)者可以將自己的想法進(jìn)行初步繪制，展現(xiàn)出來(lái)，從而進(jìn)行下一步的分析和探究。從畫面的構(gòu)圖形式，到色彩風(fēng)格的選取，再到整體傳達(dá)的故事內(nèi)容和背景設(shè)計(jì)等等，讓畫面有一個(gè)節(jié)奏感，使整體和諧統(tǒng)一。使畫面層級(jí)清晰，主次分明，能夠有效地傳達(dá)產(chǎn)品想要表現(xiàn)的內(nèi)容。

在插畫方案進(jìn)行確定之后，設(shè)計(jì)者則需要考慮插畫的風(fēng)格展示，比如在針對(duì)節(jié)日類閃屏設(shè)計(jì)上，就需要參考大量的節(jié)日類插畫，選擇適合產(chǎn)品的形式進(jìn)行設(shè)計(jì)，比如產(chǎn)品是年輕時(shí)尚的品牌則傾向于扁平的插畫風(fēng)格。產(chǎn)品是偏傳統(tǒng)的品牌，則可以考慮純手繪或者帶有質(zhì)感的插畫風(fēng)格，更容易營(yíng)造別具一格的視覺(jué)風(fēng)格。并且根據(jù)節(jié)日的特征提取出相關(guān)的顏色，進(jìn)行不斷地比對(duì)與調(diào)試。搜集大量的節(jié)日元素，合理的放置到插畫之中，使畫面飽滿、豐富，能夠烘托出節(jié)日的氣氛。在閃屏的設(shè)計(jì)中，我們需要在整體的畫面結(jié)構(gòu)設(shè)定好之后，加入色彩上的合理設(shè)計(jì)。營(yíng)造出畫面想要傳達(dá)的大致感覺(jué)，拿給甲方進(jìn)行提案，商討畫面效果達(dá)成一致。[3]

在初稿與客戶產(chǎn)品達(dá)成一致，需要設(shè)計(jì)者進(jìn)一步調(diào)整的就是細(xì)節(jié)上的問(wèn)題，比如元素過(guò)多或過(guò)少，視覺(jué)中心夠不夠明確，產(chǎn)品的特色有沒(méi)有展現(xiàn)出來(lái)等等。協(xié)調(diào)好畫面的整體感覺(jué)。使傳達(dá)的信息能夠一目了然。讓客戶在打開(kāi)產(chǎn)品應(yīng)用程序中的體驗(yàn)過(guò)程有一個(gè)好的印象。并能過(guò)對(duì)產(chǎn)品產(chǎn)生興趣。確認(rèn)好畫面想要傳達(dá)的信息和傳達(dá)。目前，能夠有效的吸引到客戶群體，有良好準(zhǔn)確的定位與把控，這樣的閃屏設(shè)計(jì)才可以對(duì)客戶產(chǎn)生吸引力，留下一個(gè)好的印象。

四、總結(jié)

插畫設(shè)計(jì)成為了閃屏的界面中的運(yùn)用是最多的一種形式，它的出現(xiàn)可以使客戶對(duì)產(chǎn)品形成一個(gè)初步的印象。還可以使用戶對(duì)產(chǎn)品之間產(chǎn)生更多的好奇心與聯(lián)系性。這是對(duì)于提高產(chǎn)品用戶體驗(yàn)的一種有效方式。好的插畫設(shè)計(jì)不僅可以留住客戶的吸引力與注意力，同時(shí)會(huì)使用戶產(chǎn)生更好的產(chǎn)品體驗(yàn)。而插畫的形式有很多種，設(shè)計(jì)者需要利用好插畫的多種形式來(lái)進(jìn)行靈活的應(yīng)用，使產(chǎn)品的閃屏更加獨(dú)特、豐富、有趣。同時(shí)需要結(jié)合產(chǎn)品自身的調(diào)性、特點(diǎn)來(lái)擴(kuò)展更多的內(nèi)容。由于閃屏不僅僅局限于傳遞信息的功效，也需要更多與用戶之間的互動(dòng)與用戶的反饋，才能夠達(dá)成更好的效果，并與用戶產(chǎn)生更多的連接、交流與共鳴。增加用戶對(duì)產(chǎn)品的感情依賴。插畫設(shè)計(jì)就很好地滿足了這一點(diǎn)，這也就是為什么設(shè)計(jì)對(duì)插畫的需求越來(lái)越高。這和用戶群體的需求有著很大的關(guān)系，合理的將插畫運(yùn)用到閃屏設(shè)計(jì)中會(huì)成為app界面中的一大亮點(diǎn)。

參考文獻(xiàn)：

[1]（美）魯?shù)婪颉ぐ⒍骱Ｄ?藝術(shù)與視知覺(jué)[M].滕守堯，朱疆源，譯.四川人民出版社，2006（10）.

[2]李明，陳璞.商業(yè)插畫設(shè)計(jì)[M].浙江：浙江大學(xué)出版社，2007.

[3]王玉燕.創(chuàng)意產(chǎn)業(yè)下插畫設(shè)計(jì)的商業(yè)應(yīng)用[D].青島科技大學(xué)碩士論文，2013.