网易蜗牛读书品牌体验设计

来源：: Hipop Dueng
时间：: 2017-12-14 10:01:23
阅读：: 5385

最近这一年我一直在独立负责一款全新的阅读产品「网易蜗牛读书」的设计工作，包括品牌设计、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，主要作用于设计师和设计师之间的协作，保证设计风格的样式的一致。