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

石又祎

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

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

一、閃屏的功能概述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、總結(jié)

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

參考文獻(xiàn)：

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

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

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