網(wǎng)易蝸牛讀書品牌體驗設(shè)計

 

最近這一年我一直在獨立負(fù)責(zé)一款全新的閱讀產(chǎn)品「網(wǎng)易蝸牛讀書」的設(shè)計工作，包括品牌設(shè)計、UI、動效、活動物料設(shè)計等。對個人來說，負(fù)責(zé)一個從 0 到 1 的產(chǎn)品是一件非常有趣而激動的事情。目前蝸牛讀書上線 9 個月，也得到內(nèi)部和外部的一些認(rèn)可，iOS 版獲得了蘋果 App Store 「2017 年度精選」「本土佳作」「四月最佳 App」「首頁新品推薦」等 8 次主動推薦，Android 版也獲得了豌豆莢設(shè)計獎、金米獎、極光獎、魅斯卡獎等，很受鼓勵，所以這次也想從品牌體驗設(shè)計的角度給大家分享一些設(shè)計和思考過程。

 

 

品牌體驗設(shè)計（BX Design）

 

先簡單介紹一下品牌體驗設(shè)計（Brand eXperience Design），我們平時可能聽到 UI Design、 UX Design、MG Design 等這些詞比較多，隨著近幾年開始越來越關(guān)注品牌，越來越注重全鏈路的品牌體驗，BX Design 也開始被更多的提及，品牌體驗設(shè)計不僅僅是 logo 及視覺識別，包含了UI/UX、圖形設(shè)計、影像設(shè)計、動態(tài)設(shè)計等與用戶接觸的每一個觸點的體驗，好的品牌體驗設(shè)計通過各個設(shè)計觸點的配合給用戶傳達(dá)融合、一致的感受和體驗。

 

品牌探索（Brand Research）

 

 

品牌定位

很多人會奇怪，我們明明已經(jīng)有網(wǎng)易云閱讀這個品牌了，為什么還要重新建立一個新的閱讀品牌。一方面是業(yè)務(wù)發(fā)展的訴求，另一面方面是有我們對讀書這件事的一些態(tài)度和嘗試。閱讀這個行業(yè)依然有非常多的細(xì)分領(lǐng)域，目前來說主要分為兩大塊，一是以網(wǎng)絡(luò)連載小說為主的快餐文學(xué)，還有一類是更加注重書籍本身質(zhì)量的傳統(tǒng)出版文學(xué)，通過典型用戶畫像我們可以發(fā)現(xiàn)兩者的核心目標(biāo)用戶雖有重合，但在需求和喜好上還是很大的差異，兩者傳遞的品牌調(diào)性也有所不同，區(qū)別開有利于后期品牌的差異化設(shè)計和精細(xì)化運營。蝸牛在品牌策略和定位上主打精選出版圖書的深度閱讀，并且首次提出時間付費的概念，以時間為軸打破書籍之間的界限，致力于為熱愛閱讀的用戶提供簡潔、安靜、無干擾的閱讀體驗。

 

 

品牌理念

品牌理念是一個品牌的靈魂，蝸牛讀書的理念是「不疾而速，讀點好書」，在這個忙碌浮躁快節(jié)奏的社會，希望大家可以做一只慢慢爬行的蝸牛，回歸自然，擁有一顆平和寧靜的內(nèi)心。

 

 

品牌定義

讀書是一件簡單純粹的事情，在設(shè)計理念上我們?nèi)ヌ剿髁瞬璧?、花道、禪宗等形而上的東方美學(xué)思想，結(jié)合相契合的部分作為設(shè)計美學(xué)指引。然后通過情緒版去發(fā)散和提煉品牌關(guān)鍵詞，透過關(guān)鍵詞去收集想傳達(dá)的風(fēng)格、色彩、影像或任何可以引起情緒反應(yīng)的資料，作為設(shè)計方向與形式的參考，探尋品牌感覺。我們給蝸牛定義的品牌關(guān)鍵詞是：簡潔、自然、素雅、安靜。

 

 

設(shè)計原則（Design Principle）

我們定義了「簡潔、友好、一致、美觀」的設(shè)計原則，作為設(shè)計指導(dǎo)準(zhǔn)則。雖然很多時候我們覺得設(shè)計原則很虛，但是作為設(shè)計系統(tǒng)的起點，設(shè)計原則可以幫助團(tuán)隊成員建立共同的設(shè)計世界觀，在設(shè)計過程中，可以通過反問的形式衡量設(shè)計的優(yōu)劣，比如信息呈現(xiàn)核心流程是否簡潔、失敗操作體驗是否友好、配圖是否美觀等。

 

 

品牌設(shè)計（Brand Design）

 

品牌色

品牌設(shè)計之初我們首先定義了品牌色，我們從品牌最原始和直接的品牌名入手，將「蝸?！购汀笗惯@兩個意象進(jìn)行場景化，然后從場景中去提取色調(diào)，結(jié)合情緒版，最終提煉定義了我們的品牌色，用戶通過名稱進(jìn)行場景相關(guān)的聯(lián)想很容易與品牌色建立聯(lián)系，加深品牌印象。

 

 

 

品牌標(biāo)識

在品牌圖形設(shè)計這個階段我們的大腦中會迸發(fā)出無限的靈感和創(chuàng)意，草圖可以幫助我們快速的呈現(xiàn)概念，這個階段不要限制你的想象力，也不要太關(guān)注繪畫的技巧，重要的是盡可能多的呈現(xiàn)創(chuàng)意和想法。這里我以「蝸?！埂笗埂笗r間」「速度」四個關(guān)鍵詞去進(jìn)行概念的發(fā)散和嘗試。

 

 

 

然后選取一些概念草圖進(jìn)行矢量化，通過篩選確定了左下角這種線性 logo 的方向，造型上也融合了蝸牛和書的意象。

 

 

選定一種形式和方向后，我們繼續(xù)進(jìn)行方案的迭代，我們嘗試做了加法，融入了速度的概念，希望在品牌 logo 中呈現(xiàn)「不疾而速」的品牌理念，蝸牛給人慢的印象和 logo 中速度概念的呈現(xiàn)給人以反差感，塑造更加深刻的品牌印象。經(jīng)過最終的評選，最后選擇了方案二更加簡潔的視覺呈現(xiàn)。

 

 

選定了造型上的方案后，接下來會對造型進(jìn)行提煉優(yōu)化，主要從蝸牛頭部身體比例以及線條的粗細(xì)去反復(fù)嘗試，找到一個視覺上的最優(yōu)方案。

 

 

這是最終確定的 logo，造型和意象上融合了蝸牛和書的概念，以流暢的線條風(fēng)格呈現(xiàn)一種簡潔優(yōu)雅的視覺效果。

 

 

logo 圖形確定后，我們還需要設(shè)計與之搭配的品牌文字，這里我們選擇現(xiàn)有的中文字體去和 logo 圖形進(jìn)行組合搭配，嘗試了幾十種組合，通過不同的組合探索各種不同可能性，這個階段最主要是找到跟品牌性格以及圖形風(fēng)格相契合的字體骨架。

 

 

最終我們選定了漢儀清雅體簡作為基礎(chǔ)的文字骨架，它骨架平穩(wěn)，字形簡潔優(yōu)雅，筆畫干凈利落的同時在撇捺折鉤處細(xì)微的粗細(xì)變化讓字體顯得不那么極簡現(xiàn)代，而有一分文化感。選定骨架后，我們從比例、字重以及品牌基因的融入去優(yōu)化，使其與 logo 的搭配更加和諧。

 

 

最終版本

 

 

然后我也設(shè)計了品牌標(biāo)識的動態(tài)表達(dá)，主要用于產(chǎn)品啟動頁品牌展示以及其他推廣傳播渠道。動相比靜更加能吸引注意，當(dāng)用戶對靜態(tài)圖形有了初步的品牌印象之后,再通過變化性、互動性的動態(tài)圖形加深品牌記憶，達(dá)到品牌傳播的目的。

 

 

APP設(shè)計（Application Design）

 

品牌基因

在互聯(lián)網(wǎng)產(chǎn)品設(shè)計越來越趨于同質(zhì)化的今天，做出有品牌個性和差異化的產(chǎn)品是我們每個設(shè)計師需要面對的挑戰(zhàn)。在蝸牛里面，我們通過品牌基因的提取，視覺語言的構(gòu)建去傳遞獨有的品牌氣質(zhì)。除了品牌色的植入，我們還從品牌意象和圖形 logo 入手，提取了「圓」的基礎(chǔ)圖形作為品牌基因，并將其貫穿在整體的品牌體驗設(shè)計之中。

 

 

在蝸牛的界面設(shè)計中到處都能看到「圓」這個視覺語言的融入，從圖標(biāo)、按鈕、頭像、書封、卡片、配圖等，到整個 APP 界面邊角圓角的處理，完整統(tǒng)一的視覺語言傳遞了更加和諧一致的品牌感。

 

 

這里還引入了一個比較特殊的圓角－－連續(xù)曲率圓角，應(yīng)用場景是在彈框、卡片等這些圓角較大的地方。

 

 

在我們平時做設(shè)計的時候，當(dāng)圓角設(shè)置稍微大一些的時候，總是會發(fā)現(xiàn)圓角并不是那么完美，直線和曲線的過渡很生硬，通過曲率梳狀圖，我們可以看到左圖常規(guī)的圓角曲率的過渡是突變到半徑值，而右圖圓角曲率則是平滑過渡，右圖用的就是連續(xù)曲率的圓角，雖然這是一個難以被發(fā)現(xiàn)的細(xì)節(jié)，在蝸牛的設(shè)計中我們還是希望盡量減少這種生硬的銜接帶來的切割感，提供更加友好和順滑的體驗。

 

 

排版布局

在排版布局上主要考慮層次和空間關(guān)系，我們在排版中引入了 4pt 的 UI 網(wǎng)格系統(tǒng)和 2pt 的基線網(wǎng)格系統(tǒng)，當(dāng)信息在空間中的排列有規(guī)律可循時，用戶則更容易找到想看的信息，基于系統(tǒng)的規(guī)則，可以給用戶提供更加一致的感受與體驗，一致產(chǎn)生重復(fù)，重復(fù)產(chǎn)生節(jié)奏，讓用戶與信息的交互更加高效和愉悅。

 

 

投影

在界面的設(shè)計中也用到了微投影去構(gòu)建視覺層級和營造空間感，基于品牌調(diào)性，我們希望界面中光影的感覺是自然和諧柔和的，一般真實的投影的衰減是曲線衰減的，而我們在軟件中模擬的投影是線性衰減的，所以這里會用到幾段線性的投影去模擬曲線衰減過程，為了使投影更加自然柔和。

 

 

界面設(shè)計的根本目標(biāo)，是以產(chǎn)品功能性為基礎(chǔ)去構(gòu)建使用體驗，以使用體驗為基礎(chǔ)去塑造視覺美感，蝸牛的界面排版設(shè)計中，在滿足產(chǎn)品功能性和可用性的前提下，盡可能的增加了界面的留白和對比，去塑造簡潔優(yōu)雅的視覺美感和傳遞品牌調(diào)性。

 

 

圖片設(shè)計

圖片的通用調(diào)性上都緊密與品牌的氣質(zhì)相結(jié)合，將品牌理念融合到所有圖片設(shè)計中。

 

 

動效設(shè)計

 

動效有很多作用，比如可以傳達(dá)狀態(tài)，提供反饋，傳遞層級關(guān)系，吸引視覺焦點等等，好的的動效設(shè)計可以提升整體的品牌體驗。

在蝸牛的動效設(shè)計中，主要遵循以下設(shè)計原則：

功能性：以功能性為前提，不做無意義的動效，不為了動效而動效；

克制：不做過度多余的動效；

順滑：遵循物理世界的規(guī)律，提供自然順滑的體驗；

 

 

根據(jù)不同場景，我們定義了 6 種不同的貝塞爾曲線，通過貝塞爾插值法進(jìn)行復(fù)用，保證局部場景的個性化定義和整體的一致性體驗。

 

 

在實現(xiàn)上，為了保證設(shè)計開發(fā)的還原度，我們也會給出完整的動效標(biāo)注文件，標(biāo)注文件中包括動畫屬性、動畫時間、動畫變化量、動畫曲線、觸發(fā)條件。

 

 

動效的設(shè)計制作上主要用到了 AE 和 Lottie ，Lottie 是 airbnb 團(tuán)隊開源的一個動畫庫，以往我們設(shè)計師設(shè)計好的一些比較復(fù)雜的動效通常會通過 Keyframes 或者 GIF 的形式輸出給開發(fā)同學(xué)，都面臨著導(dǎo)出文件大、適配性和擴(kuò)展性差、開發(fā)代價高的問題，讓一些好的動效因為時間和資源的問題都最終被擱置。而通過 Lottie ，設(shè)計師可以將 AE 里制作的動效通過 Bodymovin 插件導(dǎo)出一個非常小的 JSON 文件，工程師也只要通過簡單的配置就能100%的還原動效，大大降低了設(shè)計開發(fā)的成本，目前 Lottie 還支持網(wǎng)絡(luò)讀取 JSON 文件，做 A/B Testing 也更加方便。

 

 

接下來來看一下蝸牛 App 里面的一些動效設(shè)計：

 

 

 

設(shè)計規(guī)范（Design Guideline）

 

在品牌體驗設(shè)計過程中為了保持設(shè)計的一致性以及提升團(tuán)隊各角色之間的協(xié)作效率，基于不同的角色和目標(biāo)我們會制定不同的規(guī)范，比如品牌手冊、UI Style Guideline、Pattern Library 、動效規(guī)范、運營規(guī)范等等。設(shè)計規(guī)范本身是一個比較大且耗時的工程，所以建立規(guī)范的時機(jī)以及復(fù)雜度也是需要考慮的。

蝸牛的規(guī)范目前也在隨著產(chǎn)品的穩(wěn)定逐漸完善中，挑一些簡單說明一下。

這是蝸牛的 UI Style Guideline，主要作用于設(shè)計師和設(shè)計師之間的協(xié)作，保證設(shè)計風(fēng)格的樣式的一致。

 

 

書籍正文精編書的模版規(guī)范，主要作用于設(shè)計和開發(fā)的協(xié)作，這里我也用到了 html/css 語言去制定規(guī)范，省去了將設(shè)計語言轉(zhuǎn)化為代碼的過程，避免在這個過程中產(chǎn)生誤差，同時也節(jié)省了設(shè)計以及走查調(diào)整的工作量，另外也有正文設(shè)計的復(fù)雜度和特殊性的原因。

 

 

蝸牛精編書的配色規(guī)范以及標(biāo)簽規(guī)范，主要作用于設(shè)計師和運營編輯人員的協(xié)作。

 

 

品牌延伸（Brand Extension）

 

一些線上線下的活動和物料設(shè)計，它們也是品牌和用戶的觸點，同樣在設(shè)計的時候需要延續(xù)整體的品牌調(diào)性，傳遞出統(tǒng)一的品牌感。

 

 

設(shè)計驗證（Design Verification）

設(shè)計是一門感性和理性相結(jié)合的交叉學(xué)科，也是一個 「分析 - 研究 - 設(shè)計 - 驗證」 的閉環(huán)過程，設(shè)計師需要在產(chǎn)品不同時期把控體驗和產(chǎn)品目標(biāo)的平衡，通過反饋和數(shù)據(jù)去驗證每一個設(shè)計的合理性，然后不斷迭代優(yōu)化。

 

 

寫在最后（End）

目前線上最新版大家可能會發(fā)現(xiàn)品牌色進(jìn)行了調(diào)整，主要是出于集團(tuán)戰(zhàn)略上的一些考慮。

以上是我在設(shè)計蝸牛時的一些過程和思路，希望對大家有所幫助，品牌體驗設(shè)計其實還有很多方面，蝸牛也還有很大的提升空間，如果有什么好的想法和建議歡迎來跟我交流。

 

 

本文轉(zhuǎn)載自「網(wǎng)易UEDC」，搜索「NetEase_UEDC」即可關(guān)注。

作者：俞樹峰