5步打造APP節日主題設計：以Lofter新年圖標設計為例

前言

2018年春節已遠去，一直想把lofter新年logo設計思路分享給大家，直到現在才整理出來，希望這篇文章能給大家一些思路和參考。

每當過節的時候，市場上大大小小的APP icon都進行了節日換裝，作為視覺設計師，如何設計出與產品品牌相符合併能營造出節日氛圍的設計是我們需要思考的。下面以lofter新年圖標設計為例，分享一下當時的設計思路和方法。

Lofter是網易產品中資歷比較老的一款產品了，主打興趣社區，鼓勵原創，讓有趣的用戶擁有屬於自己精緻圈子為目標。怎樣為lofter進行新年換裝，主要從以下五個階段來闡述設計過程。

1.設計背景

接到需求的時候，設計師會從以下三個方面進行進行分析該需求的核心問題：

1.1 業務層面：

這次換裝的目的是什麼，換裝這個行為符不符合lofter的品牌調性。經過溝通，業務方希望通過換裝來渲染新年的氣氛，引起用戶的關注，激發用戶和產品之間的互動，進而提高產品的日活躍度；

1.2 設計層面：

除了烘托節日氣氛之外，設計師應該設計出更加精緻，更具有創意性的設計，能夠更有效的傳達品牌的理念，傳遞給用戶正能量，增強用戶的情感認知。

1.3 用戶層面：

此次換膚需要考慮到用戶的接受度，能否讓用戶感知到產品的寓意，能否給用戶帶來更多的親切感。

2.設計分析

明確設計需求之後，需要針對需求進行分析，設計師從：主題聯想、關鍵詞提取、視覺素材提煉三步進行設計提煉。

2.1 主題聯想：

針對新年主題以及傳統文化進行思維發散，搜集與之相關的辭彙。如圖：剪紙、雪花、對聯、雪人、梅花、雲紋、復古窗戶、燈籠、鞭炮、禮花、大紅，燙金等等

2.2 關鍵詞提取：

根據思維發散辭彙進行色、形、質進行分類歸納：

顏色：顏色是用戶最表層的感知，根據Lofter的調性，我們把顏色定位在比較能夠體現節日氛圍的紅色系和比較高貴優雅的燙金色繫上

形狀：可以根據剪紙、對聯、雪人、復古門窗等元素進行提煉，進行方案設計。

材質：可以通過相關的圖案肌理進行裝飾，使設計更加精緻的同時，更能烘托節日的氣氛。比如說雲紋、回紋等。

2.3 視覺素材提煉：

針對提取的關鍵詞，進行視覺元素匹配，搜集相應的視覺素材作為設計參考，下圖僅為部分參考圖作為展示：

針對視覺素材提煉，形成三個設計方案方向：

方案一：通過春節對聯的元素以及燙金紋理進行方案設計；

方案二：通過剪紙和雲紋的視覺素材進行方案延伸；

方案三：通過復古門窗及雪人相關素材進行設計提煉。

3.設計執行

3.1 草圖繪製：

很多設計師在做設計的時候會忽略這一步驟，草圖的繪製雖不需要太精美但它卻是不可缺少的。設計師通過繪製草圖更簡單直接呈現自己的靈感、想法，並針對相關設計方案進行初步的設計評估，從而更好的把握設計的可行性和創意性。

針對設計分析所得出三個方案如下圖：

從草圖階段進行評估，設計的可行性都比較符合設計需求，設計的創意性需要通過設計圖的繪製進一步推敲。

3.2 設計稿的呈現：

設計初稿主要針對草圖繪製的方案進行軟體繪製，這次繪製主要是呈現大效果，細節可以後續仔細推敲。三方案如下圖：

針對設計初稿，視覺內部進行設計評審：

設計創意性上講：方案一創意比較中規中矩，缺少一些設計特色；方案二比較有想法，設計層次和主題表現需要進一步優化；方案三有一定創意性，元素魚主題的結合需要進一步的優化。

設計語言表達上講：三個方案都能夠凸顯節日主題，氛圍都比較濃厚，用戶感知也比較強。

從設計效果來講：方案一較於簡潔，設計特色相對弱一些；方案二有層次感，比較有特色；方案三有一定的特色，設計效果細節有待推敲。

針對視覺內部對設計方案的建議，針對三個方案進行了細節上的優化。

方案一：增加燙金質感，以及細節元素的搭配；

方案二：針對細節進行了調整，調整層次感；

方案三：在原有基礎上進行優化，使設計更有質感，更擬物化。

如圖所示：

針對以上方案，除了視覺組內部進行評估，還邀請需求運營方，產品方以及交互設計方進行多方位設計評估和建議收集。最終選擇方案二作為新年主題方案。

3.3 優化設計細節：

針對方案二進行設計細節優化，主要通過顏色、形狀、質感三個方面進行進一步推敲。

顏色：由於lofter品牌色為沉穩的綠色系，為了突出新年氣氛，顏色採用喜慶的色紅色系，色彩上進行反覆嘗試，找到視覺上最優的方案。

形狀：由於lofter是線條形的 logo，為了增強對比性，突出視覺效果，背景採用了塊面感的設計進行烘托。設計上主要採用視覺元素（梅花、雲朵、建築以及山川）進行塊面的疊加，在保證背景整體感的同時，又不失層次感和細節。

質感：圖案和肌理的運用，視覺上主要採用了剪紙元素進行設計，它不同於傳統剪紙在於運用了層次疊加的表現手法，使畫面更加豐富，也是當時比較流行的一種視覺表現。肌理上使用紋樣裝飾，在豐富細節的同時彰顯傳統設計元素的魅力。

以下為通過不同緯度進行細節推敲方案稿：

針對各方面的優化和推敲最終形成了我們的設計方案如圖：

4.設計延展

在最終敲定logo主題設計方案的同時，為了給用戶帶來一致性的體驗感受和濃厚的節日氛圍，系列的延展設計是十分必要的。設計上可以通過主題啟動圖、皮膚裝飾以及運營活動三方面進行延展。以logo主題為中心，通過不同層面的配套延展，相互烘托，使設計系列化、主題化。

4.1 手機啟動圖：

在新年logo方案上進行延展，用戶在打開APP的第一時間感受到節日的氛圍。根據lofter以往的品牌調性，開屏並沒有採用直接明了的祝福文案和節日畫面。而是通過視覺元素以及輕量級的動效從讓用戶去感知這一主題的寓意。啟動頁動畫演示：

GIF

4.2 皮膚裝飾：

產品設計中，為了烘托節日氛圍，通過底部導航 icon換裝是產品常用的設計策略。由於該產品換膚規則仍需完善以及設計時間成本考慮，很遺憾，本次主題沒有涉及此模塊的延展。但是作為系列延展之一，設計師針對這一模塊進行設計可以從品牌調性，視覺一致性上進行分析研究。

4.3 運營主題活動：

為了提高用戶的活躍度和用戶粘性，除了視覺層面的語言輸出配套的運營活動進行氛圍的營造是十分關鍵的。Lofter推出了新年記贏取福袋的活動，視覺風格與新年主題保持一致，活動涉及到各個標籤領域，通過時間推進的方式逐一展開，使節日氛圍保持著一定的熱度。如圖為活動的推廣 banner，H5等相關頁面：

5.設計落地

這一環節是設計中的最後環節，也是十分重要的環節。如何讓設計稿高還原度的展現給用戶需要設計師和前端工程師的一起努力。設計落地環節中主要會出現的問題：視覺還原度、頁面適配以及體驗流程順暢度。

5.1 視覺還原度問題：

其實還原度應有一個標準，因為工程師不可能100%還原視覺稿，所以需要設計師精細的走查，比如說還原度需要在95%以上這個標準後才開始申請上線。這是對自己設計工作的負責也是設計師需要培養的良好習慣和基本原則。

5.2 頁面適配問題：

因為市場上出現各種機型，適配工作也比較繁瑣和重要，這需要設計師和前端工程師一起溝通，最後達成一致為用戶提供完美體驗。

5.3 體驗流暢度：

其實不管是做運營活動還是產品設計，體驗流暢度至關重要。為了提高流暢度和新鮮感，設計師會針對一些界面增加轉場動效和點觸動效。運營活動基本上以H5實現為主，大多數情況不能像原生效果相媲美，因此動效層面的使用需要更加考究和精準，才不會本末倒置。

總結

通過整個設計過程可以了解到，設計並非是簡單的畫圖工作。如果要產出優秀的設計成果，需要一整套的設計方法來支撐自己的設計方案。雖然僅僅是一個簡單的新年主題logo，它並非一時的靈感突現就可以的，還要對整個業務需求，產品定位和設計理念等三方面進行深入了解和分析而產出的結果。我們需要做有依據，有邏輯，有理念的設計，需要發散思維，整合創意，嚴謹輸出，讓設計經得起推敲。

也希望每個設計師可以養成良好的設計習慣，跳出原有的設計思維，站在更高的層面上去審視和探究自己的設計。

寫在最後

在這個以數據說話的時代，其實大家肯定都想知道設計產出之後，效果怎樣？數據如何？

新年版本上線之後，加上運營活動的開展，雖然起初有部分用戶對這次的改變有點不適應，但是從數據上來看，上線當日，日活增加20%，在接下來的一段時間內也保持著高增長量（由於數據比較敏感，具體數據這裡就不詳細列出）。通過產品策劃、市場運營、交互和視覺的相互配合，此次設計方案達到業務需求，在渲染節日氛圍的同時，引起用戶的關注，激發用戶和產品之間的互動，進而提高產品的日活以及用戶粘性。同時也歡迎各位設計達人入駐網易Lofter，讓興趣變得更有趣！

撰文 ? 仨仨

圖片 ? 自繪

未 經 允 許 請 勿 轉 載 到 其 他 公 眾 號

請 給 該 公 眾 號 留 言 獲 取 內 容 授 權

···········································

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！