網(wǎng)易蝸牛讀書品牌體驗(yàn)設(shè)計(jì)

 

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

 

 

品牌體驗(yàn)設(shè)計(jì)（BX Design）

 

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

 

品牌探索（Brand Research）

 

 

品牌定位

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

 

 

品牌理念

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

 

 

品牌定義

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

 

 

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

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

 

 

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

 

品牌色

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

 

 

 

品牌標(biāo)識(shí)

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

 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

最終版本

 

 

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

 

 

APP設(shè)計(jì)（Application Design）

 

品牌基因

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

 

 

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

 

 

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

 

 

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

 

 

排版布局

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

 

 

投影

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

 

 

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

 

 

圖片設(shè)計(jì)

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

 

 

動(dòng)效設(shè)計(jì)

 

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

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

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

克制：不做過度多余的動(dòng)效；

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 

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

 

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

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

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

 

 

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

 

 

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

 

 

品牌延伸（Brand Extension）

 

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

 

 

設(shè)計(jì)驗(yàn)證（Design Verification）

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

 

 

寫在最后（End）

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

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

 

 

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

作者：俞樹峰