一個App 閃屏的完整設計過程

每當我們打開某些APP時，經(jīng)常能看各種精致的畫面一閃而過，最能讓我們記住的要數(shù)那些溫情并且扣人心弦的畫面，那就是節(jié)日閃屏。

每逢節(jié)日的到來，這些精美的節(jié)日閃屏不僅向用戶傳遞著我們的祝福、渲染節(jié)日氣氛，同時能帶給用戶新鮮、有趣的情感，幫助產(chǎn)品拉近與用戶的距離，增加用戶對產(chǎn)品的粘性。這也是提高產(chǎn)品用戶體驗的一種非常好的表達形式。

 

一. 閃屏介紹

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

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

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

二. 設計思路

1. 需求溝通

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

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

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

2. 創(chuàng)意構思

經(jīng)過第一回溝通之后，已經(jīng)明確了設計主題和方向，可以開始展開構思畫面了。

第一步：收集相關素材

這是以「國慶節(jié)」、「中秋節(jié)」搜索到的相關靈感素材。

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

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

第三步：提取關鍵詞

通過對素材和受眾用戶的分析，提取了天安門、月亮、孔明燈、看煙花、年輕、團圓等關鍵詞。

第四步：頭腦風暴

這步在什么階段都可以用，團隊的力量是強大滴~大家經(jīng)常能碰撞出特別好的點子，帶給我意想不到的靈感。當然如果自己有好的想法，這步也是可以省略啦。

3. 草圖繪制

根據(jù)關鍵詞及頭腦風暴之后的點子，將其想法簡單的繪制了出來。在這個過程中，我們還需考慮畫面的構圖、景別、透視、故事性等因素，讓畫面主次分明，更好的表達出主題。如下圖所示：

4. 視覺呈現(xiàn)

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

在給閃屏上色的過程中大致是分三個步驟：

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

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

第三步：最后對初稿進行修改之后，整個畫面既不太擁擠了，也很清晰地向用戶傳達了我們的祝福。

5. 節(jié)日、品牌與運營的結合

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

在節(jié)日閃屏中結合活動運營的設計，既向用戶傳達節(jié)日祝福，也提升了活動運營的點擊率，巧妙的結合不會讓用戶覺得反感。

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

三. 總結

國內(nèi)節(jié)日閃屏大多是以繼承傳統(tǒng)、弘揚中國文化、突出人文情感為主要的設計思路。在閃屏的內(nèi)容上，我們也可以結合自身產(chǎn)品的特點，來擴展更多豐富的內(nèi)容，比如世界名人紀念、當天世界上的重點發(fā)生事件等。

閃屏不應該僅僅只作為單方面?zhèn)鬟f信息給用戶，還需要得到用戶的反饋，和用戶互動，比如可以通過點擊節(jié)日閃屏，跳轉到它相關的話題上，讓用戶產(chǎn)生更多的內(nèi)容，實現(xiàn)與用戶更深層次的交流，增加用戶對產(chǎn)品的情感依賴。