摘要：品牌體驗設計不僅僅是 logo 及視覺識別，包含了UI/UX、圖形設計、影像設計、動態設計等與用戶接觸的每一個觸點的體驗，好的品牌體驗設計通過各個設計觸點的配合給用戶傳達融合、一致的感受和體驗。
最近這一年我一直在獨立負責一款全新的閱讀產品「網易蝸牛讀書」的設計工作，包括品牌設計、UI、動效、活動物料設計等。對個人來說，負責一個從 0 到 1 的產品是一件非常有趣而激動的事情。目前蝸牛讀書上線 9 個月，也得到內部和外部的一些認可，iOS 版獲得了蘋果 App Store 「2017 年度精選」「本土佳作」「四月最佳 App」「首頁新品推薦」等 8 次主動推薦，Android 版也獲得了豌豆莢設計獎、金米獎、極光獎、魅斯卡獎等，很受鼓勵，所以這次也想從品牌體驗設計的角度給大家分享一些設計和思考過程。
品牌體驗設計（BX Design）
先簡單介紹一下品牌體驗設計（Brand eXperience Design），我們平時可能聽到 UI Design、 UX Design、MG Design 等這些詞比較多，隨著近幾年開始越來越關注品牌，越來越注重全鏈路的品牌體驗，BX Design 也開始被更多的提及，品牌體驗設計不僅僅是 logo 及視覺識別，包含了UI/UX、圖形設計、影像設計、動態設計等與用戶接觸的每一個觸點的體驗，好的品牌體驗設計通過各個設計觸點的配合給用戶傳達融合、一致的感受和體驗。
品牌探索（Brand Research）
品牌定位
很多人會奇怪，我們明明已經有網易雲閱讀這個品牌了，為什麼還要重新建立一個新的閱讀品牌。一方面是業務發展的訴求，另一面方面是有我們對讀書這件事的一些態度和嘗試。閱讀這個行業依然有非常多的細分領域，目前來說主要分為兩大塊，一是以網絡連載小說為主的快餐文學，還有一類是更加注重書籍本身質量的傳統出版文學，通過典型用戶畫像我們可以發現兩者的核心目標用戶雖有重合，但在需求和喜好上還是很大的差異，兩者傳遞的品牌調性也有所不同，區別開有利於後期品牌的差異化設計和精細化運營。蝸牛在品牌策略和定位上主打精選出版圖書的深度閱讀，並且首次提出時間付費的概念，以時間為軸打破書籍之間的界限，致力於為熱愛閱讀的用戶提供簡潔、安靜、無幹擾的閱讀體驗。
品牌理念
品牌理念是一個品牌的靈魂，蝸牛讀書的理念是「不疾而速，讀點好書」，在這個忙碌浮躁快節奏的社會，希望大家可以做一隻慢慢爬行的蝸牛，回歸自然，擁有一顆平和寧靜的內心。
品牌定義
讀書是一件簡單純粹的事情，在設計理念上我們去探索了茶道、花道、禪宗等形而上的東方美學思想，結合相契合的部分作為設計美學指引。然後通過情緒版去發散和提煉品牌關鍵詞，透過關鍵詞去收集想傳達的風格、色彩、影像或任何可以引起情緒反應的資料，作為設計方向與形式的參考，探尋品牌感覺。我們給蝸牛定義的品牌關鍵詞是：簡潔、自然、素雅、安靜。
設計原則（Design Principle）
我們定義了「簡潔、友好、一致、美觀」的設計原則，作為設計指導準則。雖然很多時候我們覺得設計原則很虛，但是作為設計系統的起點，設計原則可以幫助團隊成員建立共同的設計世界觀，在設計過程中，可以通過反問的形式衡量設計的優劣，比如信息呈現核心流程是否簡潔、失敗操作體驗是否友好、配圖是否美觀等。
品牌設計（Brand Design）
品牌色
品牌設計之初我們首先定義了品牌色，我們從品牌最原始和直接的品牌名入手，將「蝸牛」和「書」這兩個意象進行場景化，然後從場景中去提取色調，結合情緒版，最終提煉定義了我們的品牌色，用戶通過名稱進行場景相關的聯想很容易與品牌色建立聯繫，加深品牌印象。
品牌標識
在品牌圖形設計這個階段我們的大腦中會迸發出無限的靈感和創意，草圖可以幫助我們快速的呈現概念，這個階段不要限制你的想像力，也不要太關注繪畫的技巧，重要的是儘可能多的呈現創意和想法。這裡我以「蝸牛」「書籍」「時間」「速度」四個關鍵詞去進行概念的發散和嘗試。
然後選取一些概念草圖進行矢量化，通過篩選確定了左下角這種線性 logo 的方向，造型上也融合了蝸牛和書的意象。
選定一種形式和方向後，我們繼續進行方案的迭代，我們嘗試做了加法，融入了速度的概念，希望在品牌 logo 中呈現「不疾而速」的品牌理念，蝸牛給人慢的印象和 logo 中速度概念的呈現給人以反差感，塑造更加深刻的品牌印象。經過最終的評選，最後選擇了方案二更加簡潔的視覺呈現。
選定了造型上的方案後，接下來會對造型進行提煉優化，主要從蝸牛頭部身體比例以及線條的粗細去反覆嘗試，找到一個視覺上的最優方案。
這是最終確定的 logo，造型和意象上融合了蝸牛和書的概念，以流暢的線條風格呈現一種簡潔優雅的視覺效果。
logo 圖形確定後，我們還需要設計與之搭配的品牌文字，這裡我們選擇現有的中文字體去和 logo 圖形進行組合搭配，嘗試了幾十種組合，通過不同的組合探索各種不同可能性，這個階段最主要是找到跟品牌性格以及圖形風格相契合的字體骨架。
最終我們選定了漢儀清雅體簡作為基礎的文字骨架，它骨架平穩，字形簡潔優雅，筆畫乾淨利落的同時在撇捺折鉤處細微的粗細變化讓字體顯得不那麼極簡現代，而有一分文化感。選定骨架後，我們從比例、字重以及品牌基因的融入去優化，使其與 logo 的搭配更加和諧。
最終版本
然後我也設計了品牌標識的動態表達，主要用於產品啟動頁品牌展示以及其他推廣傳播渠道。動相比靜更加能吸引注意，當用戶對靜態圖形有了初步的品牌印象之後,再通過變化性、互動性的動態圖形加深品牌記憶，達到品牌傳播的目的。
APP設計（Application Design）
品牌基因
在網際網路產品設計越來越趨於同質化的今天，做出有品牌個性和差異化的產品是我們每個設計師需要面對的挑戰。在蝸牛裡面，我們通過品牌基因的提取，視覺語言的構建去傳遞獨有的品牌氣質。除了品牌色的植入，我們還從品牌意象和圖形 logo 入手，提取了「圓」的基礎圖形作為品牌基因，並將其貫穿在整體的品牌體驗設計之中。
在蝸牛的界面設計中到處都能看到「圓」這個視覺語言的融入，從圖標、按鈕、頭像、書封、卡片、配圖等，到整個 APP 界面邊角圓角的處理，完整統一的視覺語言傳遞了更加和諧一致的品牌感。
這裡還引入了一個比較特殊的圓角－－連續曲率圓角，應用場景是在彈框、卡片等這些圓角較大的地方。
在我們平時做設計的時候，當圓角設置稍微大一些的時候，總是會發現圓角並不是那麼完美，直線和曲線的過渡很生硬，通過曲率梳狀圖，我們可以看到左圖常規的圓角曲率的過渡是突變到半徑值，而右圖圓角曲率則是平滑過渡，右圖用的就是連續曲率的圓角，雖然這是一個難以被發現的細節，在蝸牛的設計中我們還是希望儘量減少這種生硬的銜接帶來的切割感，提供更加友好和順滑的體驗。
排版布局
在排版布局上主要考慮層次和空間關係，我們在排版中引入了 4pt 的 UI 網格系統和 2pt 的基線網格系統，當信息在空間中的排列有規律可循時，用戶則更容易找到想看的信息，基於系統的規則，可以給用戶提供更加一致的感受與體驗，一致產生重複，重複產生節奏，讓用戶與信息的交互更加高效和愉悅。
投影
在界面的設計中也用到了微投影去構建視覺層級和營造空間感，基於品牌調性，我們希望界面中光影的感覺是自然和諧柔和的，一般真實的投影的衰減是曲線衰減的，而我們在軟體中模擬的投影是線性衰減的，所以這裡會用到幾段線性的投影去模擬曲線衰減過程，為了使投影更加自然柔和。
界面設計的根本目標，是以產品功能性為基礎去構建使用體驗，以使用體驗為基礎去塑造視覺美感，蝸牛的界面排版設計中，在滿足產品功能性和可用性的前提下，儘可能的增加了界面的留白和對比，去塑造簡潔優雅的視覺美感和傳遞品牌調性。
圖片設計
圖片的通用調性上都緊密與品牌的氣質相結合，將品牌理念融合到所有圖片設計中。
動效設計
動效有很多作用，比如可以傳達狀態，提供反饋，傳遞層級關係，吸引視覺焦點等等，好的的動效設計可以提升整體的品牌體驗。
在蝸牛的動效設計中，主要遵循以下設計原則：
功能性：以功能性為前提，不做無意義的動效，不為了動效而動效；
克制：不做過度多餘的動效；
順滑：遵循物理世界的規律，提供自然順滑的體驗；
根據不同場景，我們定義了 6 種不同的貝塞爾曲線，通過貝塞爾插值法進行復用，保證局部場景的個性化定義和整體的一致性體驗。
在實現上，為了保證設計開發的還原度，我們也會給出完整的動效標註文件，標註文件中包括動畫屬性、動畫時間、動畫變化量、動畫曲線、觸發條件。
動效的設計製作上主要用到了 AE 和 Lottie ，Lottie 是 airbnb 團隊開源的一個動畫庫，以往我們設計師設計好的一些比較複雜的動效通常會通過 Keyframes 或者 GIF 的形式輸出給開發同學，都面臨著導出文件大、適配性和擴展性差、開發代價高的問題，讓一些好的動效因為時間和資源的問題都最終被擱置。而通過 Lottie ，設計師可以將 AE 裡製作的動效通過 Bodymovin 插件導出一個非常小的 JSON 文件，工程師也只要通過簡單的配置就能100%的還原動效，大大降低了設計開發的成本，目前 Lottie 還支持網絡讀取 JSON 文件，做 A/B Testing 也更加方便。
接下來來看一下蝸牛 App 裡面的一些動效設計：
設計規範（Design Guideline）
在品牌體驗設計過程中為了保持設計的一致性以及提升團隊各角色之間的協作效率，基於不同的角色和目標我們會制定不同的規範，比如品牌手冊、UI Style Guideline、Pattern Library 、動效規範、運營規範等等。設計規範本身是一個比較大且耗時的工程，所以建立規範的時機以及複雜度也是需要考慮的。
蝸牛的規範目前也在隨著產品的穩定逐漸完善中，挑一些簡單說明一下。
這是蝸牛的 UI Style Guideline，主要作用於設計師和設計師之間的協作，保證設計風格的樣式的一致。
書籍正文精編書的模版規範，主要作用於設計和開發的協作，這裡我也用到了 html/css 語言去制定規範，省去了將設計語言轉化為代碼的過程，避免在這個過程中產生誤差，同時也節省了設計以及走查調整的工作量，另外也有正文設計的複雜度和特殊性的原因。
蝸牛精編書的配色規範以及標籤規範，主要作用於設計師和運營編輯人員的協作。
品牌延伸（Brand Extension）
一些線上線下的活動和物料設計，它們也是品牌和用戶的觸點，同樣在設計的時候需要延續整體的品牌調性，傳遞出統一的品牌感。
設計驗證（Design Verification）
設計是一門感性和理性相結合的交叉學科，也是一個 「分析 - 研究 - 設計 - 驗證」 的閉環過程，設計師需要在產品不同時期把控體驗和產品目標的平衡，通過反饋和數據去驗證每一個設計的合理性，然後不斷迭代優化。
寫在最後（End）
目前線上最新版大家可能會發現品牌色進行了調整，主要是出於集團戰略上的一些考慮。
以上是我在設計蝸牛時的一些過程和思路，希望對大家有所幫助，品牌體驗設計其實還有很多方面，蝸牛也還有很大的提升空間，如果有什麼好的想法和建議歡迎來跟我交流。
本文轉載自「網易UEDC」，搜索「NetEase_UEDC」即可關注。
作者：俞樹峰