經(jīng)驗(yàn)分享丨趕集App中秋節(jié)的皮膚設(shè)計(jì)

5 評論 11135 瀏覽 61 收藏 9 分鐘

隨著移動(dòng)互聯(lián)網(wǎng)的迅猛發(fā)展,同一款產(chǎn)品,使用移動(dòng)端的用戶遠(yuǎn)超PC端,為了更好的提升APP的用戶體驗(yàn),情感化設(shè)計(jì)也得到了越來越多的關(guān)注,通過它來喚起用戶共鳴,帶給用戶愉悅的心情。

每逢節(jié)假日,在這個(gè)“黃金時(shí)段”,眾多APP除了會(huì)準(zhǔn)備很多活動(dòng)來增加人氣外;同時(shí),也會(huì)相應(yīng)設(shè)計(jì)一系列節(jié)日皮膚來渲染節(jié)日氣氛,這正是樹立口碑、增加品牌價(jià)值的好時(shí)機(jī)。節(jié)日皮膚設(shè)計(jì)風(fēng)格多種多樣,時(shí)不時(shí)給予用戶莫大的驚喜與愉悅的感官體驗(yàn),加強(qiáng)了用戶對產(chǎn)品的黏性。

趕集作為一個(gè)提供服務(wù)的綜合性平臺,與電商類產(chǎn)品有著較大的區(qū)別。所以,我們在設(shè)計(jì)趕集APP皮膚的時(shí)候,要保證界面的簡潔度,避免設(shè)計(jì)過度造成用戶眼花繚亂、心煩意亂。在設(shè)計(jì)皮膚之前,需要跟產(chǎn)品和研發(fā)先確定哪些是可以設(shè)計(jì)的,并且了解每一處切圖的尺寸。趕集主要對APP首頁的8個(gè)類別icon、底部tab和icon下拉刷新以及個(gè)人中心頭圖進(jìn)行設(shè)計(jì),同時(shí)要清楚知道這些需要配置的圖標(biāo)尺寸。開始做效果圖的時(shí)候,我們通常以iPhone6的分辨率為標(biāo)準(zhǔn)進(jìn)行。

下面我以趕集App中秋節(jié)的皮膚設(shè)計(jì)為例,向大家分享一下我的一點(diǎn)經(jīng)驗(yàn)。

趣味萌兔 喜迎中秋

中秋佳節(jié)是中國傳統(tǒng)節(jié)日中最受重視的節(jié)日之一,對于中秋節(jié)的相關(guān)設(shè)計(jì),也是鋪天蓋地。在這習(xí)以為常的節(jié)日設(shè)計(jì)中,怎樣做到與眾不同,從中脫穎而出是一件相當(dāng)不易之事,這考量著每一名設(shè)計(jì)師的綜合能力。

在設(shè)計(jì)之前,我們可以先了解中秋節(jié)的相關(guān)習(xí)俗、神話傳說以及詩詞典故等,比如:嫦娥奔月、吳剛砍樹、玉兔搗年糕、拜兔兒爺、賞月觀花以及月餅的由來等。接著去了解相關(guān)中秋節(jié)的設(shè)計(jì),可以從平面、動(dòng)畫、影視等多方面尋找創(chuàng)意靈感;同時(shí),可以不局限于對中秋節(jié)的搜索,其他節(jié)日的設(shè)計(jì)也許能帶來意想不到的靈感,比如說在表現(xiàn)手法、造型設(shè)計(jì)、色彩的應(yīng)用等。

對中秋節(jié)有了大致的了解之后,與該需求的產(chǎn)品經(jīng)理及其他設(shè)計(jì)師一起進(jìn)行頭腦風(fēng)暴,收集創(chuàng)意靈感。最終我們確定采用以兔子為主要元素,設(shè)計(jì)一套中秋兔子表情的皮膚。我們先以8個(gè)大類的icon為設(shè)計(jì)切入點(diǎn)。

1. 確定兔子造型

先收集兔子圖片,在本子上不斷提煉兔子的造型,了解它的身體結(jié)構(gòu),嘗試各種畫風(fēng)。由于主要icon的尺寸是96×96,所以要求兔子的造型必須簡潔,最終采用卡通萌萌的兔子造型。在給兔子上色的時(shí)候,發(fā)現(xiàn)只有淡的近白色的兔子才最可愛,這時(shí)候必須有背景色才能突出白色兔子。

近白色的兔子最可愛

必須有背景色才能突出白色兔子

2. 構(gòu)思創(chuàng)意點(diǎn)

中秋節(jié)最重要的元素是月亮,月亮代表團(tuán)圓。抱著嘗試的心情,進(jìn)行草圖勾勒,嘗試畫出月缺的變化圖。

第一排圖標(biāo)的背景從月缺變成月圓,也是意寓著人們從分離到團(tuán)圓的過程。則描繪它平時(shí)的生活特點(diǎn),畫出兔子各種可愛有趣的動(dòng)作,如:高興、睡覺、抱胡蘿卜、趴著。第二排背景表現(xiàn)出月亮從升起到降落的形式,其中月亮一直是月圓的狀態(tài)來表示中秋節(jié)團(tuán)圓的日子,來講述兔子與中秋相關(guān)的習(xí)俗,畫出搗年糕、望月、吃月餅、點(diǎn)燈籠的動(dòng)作。

?兔子的表情傳達(dá)出節(jié)日的趣味性與故事感

3. 確定色彩

顏色是表達(dá)節(jié)日氣氛的最直接表現(xiàn)手法,掌握好節(jié)日的顏色特征,能更直接、準(zhǔn)確表達(dá)出相應(yīng)主題內(nèi)涵。根據(jù)中國傳統(tǒng)顏色風(fēng)格,以紅、黃、青為主色,其中紅色表示白天、青色表示黑夜,紅青相間,畫面有節(jié)奏感,而不會(huì)太單調(diào);對于背景和兔子顏色都采用微漸變風(fēng)格,統(tǒng)一光源,既符合現(xiàn)在的設(shè)計(jì)流行趨勢,也不會(huì)顯得沉悶。

?顏色是表達(dá)節(jié)日氣氛的最直接表現(xiàn)手法

4. 豐富細(xì)節(jié)

到這一步之后,發(fā)現(xiàn)圓形的背景顯得比較單調(diào)和束縛,于是嘗試加入云的樣式來打破圓的結(jié)構(gòu),同時(shí)加入星星的點(diǎn)綴,使得整個(gè)圖標(biāo)活躍和豐富起來。

?豐富細(xì)節(jié)來使畫面豐富

最后是對底部tab的設(shè)計(jì),背景的創(chuàng)意來源于中國傳統(tǒng)山水畫,描繪的是中間為月亮升起來,兔子趴在月亮上睡覺,以月餅的形式,突出中秋快樂的文字。整個(gè)創(chuàng)意既與上面的圖標(biāo)相呼應(yīng),同時(shí)與背景相融合,毫無違和感,使得整個(gè)畫面更加生動(dòng),更好地烘托出中秋節(jié)的特點(diǎn)。

完稿之后,最終整體皮膚界面達(dá)到視覺一致性、圖形識別性強(qiáng),充滿了風(fēng)趣可愛,得到了產(chǎn)品的一致贊賞和認(rèn)可,身邊的同事也紛紛表示喜愛有加。

最終稿設(shè)計(jì)方案

趕集APP節(jié)日皮膚欣賞

?2016元宵節(jié)皮膚

?2016圣誕節(jié)皮膚

?2016元旦皮膚

?2017元旦皮膚

?2017元宵節(jié)皮膚

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心(微信公眾號@58UXD)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 秀秀秀

    來自四川 回復(fù)
  2. 哇塞,太可愛了,

    來自廣東 回復(fù)
    1. 謝謝關(guān)注哦

      來自北京 回復(fù)
  3. 不錯(cuò)不錯(cuò)

    來自廣東 回復(fù)
    1. 謝謝支持 ??

      來自北京 回復(fù)