我們需要做有依據、有邏輯、有理念的設計，需要發散思維、整合創意、嚴謹輸出，讓設計經得起推敲。

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

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

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

一、設計背景

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

1. 業務層面

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

2. 設計層面

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

3. 用戶層面

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

二、設計分析

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

1. 主題聯想

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

2. 關鍵詞提取

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

• 顏色：顏色是用戶最表層的感知，根據Lofter的調性，我們把顏色定位在比較能夠體現節日氛圍的紅色系和比較高貴優雅的燙金色系上。
• 形狀：可以根據剪紙、對聯、雪人、復古門窗等元素進行提煉，進行方案設計。
• 材質：可以通過相關的圖案肌理進行裝飾，使設計更加精致的同時，更能烘托節日的氣氛。比如說云紋、回紋等。

3. 視覺素材提煉

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

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

• 方案一：通過春節對聯的元素以及燙金紋理進行方案設計；
• 方案二：通過剪紙和云紋的視覺素材進行方案延伸；
• 方案三：通過復古門窗及雪人相關素材進行設計提煉。

三、設計執行

1. 草圖繪制

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

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

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

2. 設計稿的呈現

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

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

• 設計創意性上講：方案一創意比較中規中矩，缺少一些設計特色；方案二比較有想法，設計層次和主題表現需要進一步優化；方案三有一定創意性，元素魚主題的結合需要進一步的優化。
• 設計語言表達上講：三個方案都能夠凸顯節日主題，氛圍都比較濃厚，用戶感知也比較強。
• 從設計效果來講：方案一較于簡潔，設計特色相對弱一些；方案二有層次感，比較有特色；方案三有一定的特色，設計效果細節有待推敲。

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

• 方案一：增加燙金質感，以及細節元素的搭配；
• 方案二：針對細節進行了調整，調整層次感；
• 方案三：在原有基礎上進行優化，使設計更有質感，更擬物化。

如圖所示：

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

3. 優化設計細節

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

• 顏色：由于 lofter 品牌色為沉穩的綠色系，為了突出新年氣氛，顏色采用喜慶的紅色系，色彩上進行反復嘗試，找到視覺上最優的方案。
• 形狀：由于 lofter 是線條形的 logo，為了增強對比性，突出視覺效果，背景采用了塊面感的設計進行烘托。設計上主要采用視覺元素（梅花、云朵、建筑以及山川）進行塊面的疊加，在保證背景整體感的同時，又不失層次感和細節。
• 質感：圖案和肌理的運用，視覺上主要采用了剪紙元素進行設計，它不同于傳統剪紙在于運用了層次疊加的表現手法，使畫面更加豐富，也是當時比較流行的一種視覺表現。肌理上使用紋樣裝飾，在豐富細節的同時彰顯傳統設計元素的魅力。

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

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

四、設計延展

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

1. 手機啟動圖

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

2. 皮膚裝飾

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

3. 運營主題活動

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

五、設計落地

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

1. 視覺還原度問題

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

2. 頁面適配問題

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

3. 體驗流暢度

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

總結

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

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

寫在最后

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

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

歡迎關注作者微信公眾號：「仨人行設匯」

「主題設計案例總結」

• 《一個App 閃屏的完整設計過程》
• 《如何給節日主題做設計，來看這篇超全面的分析！》
• 《首度揭秘！春節期間滴滴地圖小車圖標的換裝設計過程》
• 《ofo小黃車是如何打造情感化設計的？來看總監的自述！》
• 《實戰深度總結！如何設計和運營品牌形象？》
• 《設計節日閃屏？收下這份超全面的知識點總結！》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com