每逢節(jié)假日,在這個(gè)“黃金時(shí)段”,眾多APP除了會(huì)準(zhǔn)備很多活動(dòng)來(lái)增加人氣外;同時(shí),也會(huì)相應(yīng)設(shè)計(jì)一系列節(jié)日皮膚來(lái)渲染節(jié)日氣氛,這正是樹(shù)立口碑、增加品牌價(jià)值的好時(shí)機(jī)。節(jié)日皮膚設(shè)計(jì)風(fēng)格多種多樣,時(shí)不時(shí)給予用戶莫大的驚喜與愉悅的感官體驗(yàn),加強(qiáng)了用戶對(duì)產(chǎn)品的黏性。
趕集作為一個(gè)提供服務(wù)的綜合性平臺(tái),與電商類產(chǎn)品有著較大的區(qū)別。所以,我們?cè)谠O(shè)計(jì)趕集APP皮膚的時(shí)候,要保證界面的簡(jiǎn)潔度,避免設(shè)計(jì)過(guò)度造成用戶眼花繚亂、心煩意亂。在設(shè)計(jì)皮膚之前,需要跟產(chǎn)品和研發(fā)先確定哪些是可以設(shè)計(jì)的,并且了解每一處切圖的尺寸。趕集主要對(duì)APP首頁(yè)的8個(gè)類別icon、底部tab和icon、下拉刷新以及個(gè)人中心頭圖進(jìn)行設(shè)計(jì),同時(shí)要清楚知道這些需要配置的圖標(biāo)尺寸。開(kāi)始做效果圖的時(shí)候,我們通常以iPhone6的分辨率為標(biāo)準(zhǔn)進(jìn)行。
下面我以趕集App中秋節(jié)的皮膚設(shè)計(jì)為例,向大家分享一下我的一點(diǎn)經(jīng)驗(yàn)。
中秋佳節(jié)是中國(guó)傳統(tǒng)節(jié)日中最受重視的節(jié)日之一,對(duì)于中秋節(jié)的相關(guān)設(shè)計(jì),也是鋪天蓋地。在這習(xí)以為常的節(jié)日設(shè)計(jì)中,怎樣做到與眾不同,從中脫穎而出是一件相當(dāng)不易之事,這考量著每一名設(shè)計(jì)師的綜合能力。
在設(shè)計(jì)之前,我們可以先了解中秋節(jié)的相關(guān)習(xí)俗、神話傳說(shuō)以及詩(shī)詞典故等,比如:嫦娥奔月、吳剛砍樹(shù)、玉兔搗年糕、拜兔兒爺、賞月觀花以及月餅的由來(lái)等。接著去了解相關(guān)中秋節(jié)的設(shè)計(jì),可以從平面、動(dòng)畫(huà)、影視等多方面尋找創(chuàng)意靈感;同時(shí),可以不局限于對(duì)中秋節(jié)的搜索,其他節(jié)日的設(shè)計(jì)也許能帶來(lái)意想不到的靈感,比如說(shuō)在表現(xiàn)手法、造型設(shè)計(jì)、色彩的應(yīng)用等。
對(duì)中秋節(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),嘗試各種畫(huà)風(fēng)。由于主要icon的尺寸是96×96,所以要求兔子的造型必須簡(jiǎn)潔,最終采用卡通萌萌的兔子造型。在給兔子上色的時(shí)候,發(fā)現(xiàn)只有淡的近白色的兔子才最可愛(ài),這時(shí)候必須有背景色才能突出白色兔子。
近白色的兔子最可愛(ài)
必須有背景色才能突出白色兔子
2. 構(gòu)思創(chuàng)意點(diǎn)
中秋節(jié)最重要的元素是月亮,月亮代表團(tuán)圓。抱著嘗試的心情,進(jìn)行草圖勾勒,嘗試畫(huà)出月缺的變化圖。
第一排圖標(biāo)的背景從月缺變成月圓,也是意寓著人們從分離到團(tuán)圓的過(guò)程。則描繪它平時(shí)的生活特點(diǎn),畫(huà)出兔子各種可愛(ài)有趣的動(dòng)作,如:高興、睡覺(jué)、抱胡蘿卜、趴著。第二排背景表現(xiàn)出月亮從升起到降落的形式,其中月亮一直是月圓的狀態(tài)來(lái)表示中秋節(jié)團(tuán)圓的日子,來(lái)講述兔子與中秋相關(guān)的習(xí)俗,畫(huà)出搗年糕、望月、吃月餅、點(diǎn)燈籠的動(dòng)作。
兔子的表情傳達(dá)出節(jié)日的趣味性與故事感
3. 確定色彩
顏色是表達(dá)節(jié)日氣氛的最直接表現(xiàn)手法,掌握好節(jié)日的顏色特征,能更直接、準(zhǔn)確表達(dá)出相應(yīng)主題內(nèi)涵。根據(jù)中國(guó)傳統(tǒng)顏色風(fēng)格,以紅、黃、青為主色,其中紅色表示白天、青色表示黑夜,紅青相間,畫(huà)面有節(jié)奏感,而不會(huì)太單調(diào);對(duì)于背景和兔子顏色都采用微漸變風(fēng)格,統(tǒng)一光源,既符合現(xiàn)在的設(shè)計(jì)流行趨勢(shì),也不會(huì)顯得沉悶。
顏色是表達(dá)節(jié)日氣氛的最直接表現(xiàn)手法
4. 豐富細(xì)節(jié)
到這一步之后,發(fā)現(xiàn)圓形的背景顯得比較單調(diào)和束縛,于是嘗試加入云的樣式來(lái)打破圓的結(jié)構(gòu),同時(shí)加入星星的點(diǎn)綴,使得整個(gè)圖標(biāo)活躍和豐富起來(lái)。
豐富細(xì)節(jié)來(lái)使畫(huà)面豐富
最后是對(duì)底部tab的設(shè)計(jì),背景的創(chuàng)意來(lái)源于中國(guó)傳統(tǒng)山水畫(huà),描繪的是中間為月亮升起來(lái),兔子趴在月亮上睡覺(jué),以月餅的形式,突出中秋快樂(lè)的文字。整個(gè)創(chuàng)意既與上面的圖標(biāo)相呼應(yīng),同時(shí)與背景相融合,毫無(wú)違和感,使得整個(gè)畫(huà)面更加生動(dòng),更好地烘托出中秋節(jié)的特點(diǎn)。
完稿之后,最終整體皮膚界面達(dá)到視覺(jué)一致性、圖形識(shí)別性強(qiáng),充滿了風(fēng)趣可愛(ài),得到了產(chǎn)品的一致贊賞和認(rèn)可,身邊的同事也紛紛表示喜愛(ài)有加。
最終稿設(shè)計(jì)方案
2016元宵節(jié)皮膚
2016圣誕節(jié)皮膚
2016元旦皮膚
2017元旦皮膚
以上就是上海海淘網(wǎng)站設(shè)計(jì)提供的內(nèi)容,如果想要了解關(guān)于手機(jī)網(wǎng)站建設(shè)案例及官方微博運(yùn)營(yíng)方案,可直接點(diǎn)擊查看