UI設(shè)計(jì)師指導(dǎo)你做啟動(dòng)頁(yè)

每當(dāng)我們打開(kāi)某些APP時(shí)，經(jīng)常能看各種精致的畫(huà)面一閃而過(guò)，最能讓我們記住的要數(shù)那些溫情并且扣人心弦的畫(huà)面，那就是節(jié)日閃屏。每逢節(jié)日的到來(lái)，這些精美的節(jié)日閃屏不僅向用戶傳遞著我們的祝福、渲染節(jié)日氣氛，同時(shí)能帶給用戶新鮮、有趣的情感，幫助產(chǎn)品拉近與用戶的距離，增加用戶對(duì)產(chǎn)品的粘性。這也是提高產(chǎn)品用戶體驗(yàn)的一種非常好的表達(dá)形式。

閃屏介紹 

我們知道閃屏根據(jù)傳達(dá)的內(nèi)容不同，閃屏的畫(huà)面也不盡相同，大概可以的分成：節(jié)日閃屏、日常運(yùn)營(yíng)、熱點(diǎn)傳播、品牌傳達(dá)等。

這些閃屏畫(huà)面中大多都包括：品牌logo+品牌定位語(yǔ)+內(nèi)容圖案。

在制作形式上通常是靜態(tài)的，當(dāng)然也有動(dòng)態(tài)的視頻和GIF。 接下來(lái)我將主要介紹我在做節(jié)日閃屏的設(shè)計(jì)思路 。

設(shè)計(jì)思路 

需求溝通

因每年的節(jié)日都是固定的，所以在需求溝通之前，我們可以事先了解這個(gè)節(jié)日的特點(diǎn)，收集相關(guān)素材，這樣在與產(chǎn)品溝通時(shí)會(huì)事半功倍。

在溝通中，我們需要充分了解需求方的想法。因需求方有些天馬行空的想法也許是不切實(shí)際的，或者實(shí)現(xiàn)起來(lái)非常困難。這時(shí)候與產(chǎn)品方一定要好好溝通，把話題引向自己擅長(zhǎng)的方向，讓雙方都達(dá)成共識(shí)。只有這樣大家才會(huì)比較滿意最后的結(jié)果。

梳理出的需求是：將中秋節(jié)和國(guó)慶節(jié)2個(gè)節(jié)日結(jié)合起來(lái)設(shè)計(jì)，表現(xiàn)出熱鬧、歡快的節(jié)日氣氛。

創(chuàng)意構(gòu)思

經(jīng)過(guò)第一回溝通之后，已經(jīng)明確了設(shè)計(jì)主題和方向，可以開(kāi)始展開(kāi)構(gòu)思畫(huà)面了。

第一步：收集相關(guān)素材。

這是以“國(guó)慶節(jié)”、“中秋節(jié)”搜索到的相關(guān)靈感素材。

第二步：了解產(chǎn)品的受眾用戶。

由上圖可知，趕集網(wǎng)主要是一群年輕、以男性為主的藍(lán)領(lǐng)用戶。

第三步：提取關(guān)鍵詞。

通過(guò)對(duì)素材和受眾用戶的分析，提取了天安門(mén)、月亮、孔明燈、看煙花、年輕、團(tuán)圓等關(guān)鍵詞。

第四步：頭腦風(fēng)暴。這步在什么階段都可以用，團(tuán)隊(duì)的力量是強(qiáng)大滴~大家經(jīng)常能碰撞出特別好的點(diǎn)子，帶給我意想不到的靈感。當(dāng)然如果自己有好的想法，這步也是可以省略啦~

草圖繪制

根據(jù)關(guān)鍵詞及頭腦風(fēng)暴之后的點(diǎn)子，將其想法簡(jiǎn)單的繪制了出來(lái)。在這個(gè)過(guò)程中，我們還需考慮畫(huà)面的構(gòu)圖、景別、透視、故事性等因素，讓畫(huà)面主次分明，更好的表達(dá)出主題。如下圖所示：

視覺(jué)呈現(xiàn)

在繪畫(huà)細(xì)節(jié)之前，首先要確定繪畫(huà)的表現(xiàn)形式，因每個(gè)節(jié)日都有它自己的調(diào)性，傳達(dá)的情感也都不一樣，所以在表現(xiàn)手法上也需要考慮，如采用純扁平or質(zhì)感繪畫(huà)？因繪畫(huà)的是晚上的場(chǎng)景，而采用帶質(zhì)感的形式更加能襯托出光感和節(jié)日氣氛。然后根據(jù)節(jié)日元素將顏色提取出來(lái)，作為色彩參考。

在給閃屏上色的過(guò)程中大致是分三個(gè)步驟：

第一步：把畫(huà)面的整體色彩基調(diào)鋪好之后，會(huì)給產(chǎn)品方看看大概的效果，確認(rèn)沒(méi)有問(wèn)題之后再繼續(xù)深入；

第二步：初稿完成之后給產(chǎn)品確認(rèn)，通常會(huì)有些細(xì)節(jié)的調(diào)整，如初稿中的畫(huà)面元素比較多，同時(shí)燈籠過(guò)于突出，會(huì)造成用戶的視覺(jué)焦點(diǎn)分散；

第三步：最后對(duì)初稿進(jìn)行修改之后，整個(gè)畫(huà)面既不太擁擠了，也很清晰地向用戶傳達(dá)了我們的祝福。

節(jié)日、品牌與運(yùn)營(yíng)的結(jié)合

1.在節(jié)日閃屏中融入產(chǎn)品的吉祥物，既能達(dá)到傳達(dá)節(jié)日祝福的目的，同時(shí)也加深用戶對(duì)我們品牌形象的印象。

2. 在節(jié)日閃屏中結(jié)合活動(dòng)運(yùn)營(yíng)的設(shè)計(jì)，既向用戶傳達(dá)節(jié)日祝福，也提升了活動(dòng)運(yùn)營(yíng)的點(diǎn)擊率，巧妙的結(jié)合不會(huì)讓用戶覺(jué)得反感。

除了這些重大節(jié)日，采取偏重的設(shè)計(jì)方式；如果我們想快速的產(chǎn)出閃屏，那就可以將閃屏模板化，如趕集網(wǎng)在節(jié)氣上就使用了更加輕量的模板。

 總結(jié) 

國(guó)內(nèi)節(jié)日閃屏大多是以繼承傳統(tǒng)、弘揚(yáng)中國(guó)文化、突出人文情感為主要的設(shè)計(jì)思路。在閃屏的內(nèi)容上，我們也可以結(jié)合自身產(chǎn)品的特點(diǎn)，來(lái)擴(kuò)展更多豐富的內(nèi)容，比如世界名人紀(jì)念、當(dāng)天世界上的重點(diǎn)發(fā)生事件等。閃屏不應(yīng)該僅僅只作為單方面?zhèn)鬟f信息給用戶，還需要得到用戶的反饋，和用戶互動(dòng)，比如可以通過(guò)點(diǎn)擊節(jié)日閃屏，跳轉(zhuǎn)到它相關(guān)的話題上，讓用戶產(chǎn)生更多的內(nèi)容，實(shí)現(xiàn)與用戶更深層次的交流，增加用戶對(duì)產(chǎn)品的情感依賴。
相關(guān)文章--《從產(chǎn)品的角度進(jìn)行搜索功能的UI設(shè)計(jì)》