通过空值页赋予产品灵魂：以沪江网校 App 为例

2017-04-07 23:03:00

从2016年9月开始，沪江网校App默默地更新了一批空值页，以小树苗为原型的拟人化形象开始出现在每一个内容为空的页面，拉近沪江网校与用户之间的距离。

为什么要更换空值页？

空值页，简单来说就是无内容或者错误情况下出现的空白状态，能够在操作异常时给予用户反馈，或者提示用户添加内容。这类页面出现频率较低，容易被忽略。网校设计团队的小伙伴们在重新审视App中的空值页后，发现旧版的空值页有以下几个问题。

1. 画面没有系统化

以前在设计过程中，空值页往往是随着其他功能页面单个设计的。各个空值页之间视觉上缺乏系统化的规划。

2. 文案不够友好

旧版空值页的文案大多是平铺直叙，更有些文案使用了专有名词，不便于用户理解。

3. 形式单一

旧版空值页存在多种空值页共用一个画面的情况。空值页中使用的图形是比较抽象的，以便通用多个页面，这样做，虽然节省了设计成本，却牺牲了用户体验，使用户产生疏离感。

Redesign空值页的目标是什么？

对于旧版空值页的问题有了一定了解后，我们开始思考空值页改版的目的是什么呢？

1. 系统化：统一视觉样式

将所有空值页系统化，重新规划设计，使得所有页面看起来更加整体，同时也可以更好的推广品牌。

2. 更友好：优化提示文案

一个好的文案不仅需要描述清楚事情的情况，更重要的是要有亲近感，拉近与用户的距离。

3. 场景化：不同内容展示不同画面

在不同的空值情况下展示不同的画面，有助于用户的理解，同时也增强了趣味性。

4. 有灵魂：用设计赋予产品灵魂

我们希望通过这次改版，赋予产品自己的性格、特点。

Redesign实战

明确了改版的目标后，我们开始进入设计实战。根据之前定的目标，在视觉呈现上，我们希望所有的空值页是系统化的，并且根据不同的场景有相应的表现方式。这就需要空值页有一个统一的形象作为载体，在不同的空值状态下呈现不同的反馈状态。

形象确定

沪江网校App用户构成。

根据2016年初的用户调研，使用网校App的用户主要有以下三个特点：

1. 女性用户居多

女性用户占到总用户数的大部分。

2. 年轻用户居多

20-25岁的用户是主力军。

3. 企业白领以及大学生是主要用户群

有半数以上为在职用户，其中以企业职员为主。

通过以上三组数据可以得知，网校多为年轻的大学生或初入职场的企业白领，女性较多。他们有强烈的好奇心，希望通过网校的课程能够更好的完成学业、为职场助力或者为自己增加一门技能。他们不甘心浪费业余时间，通过不断的学习，充实自己，为自己投资，开拓视野。

关键字提取

沪江网校是一个学习的平台，根据产品的内容特点以及以上的用户特性，网校设计组成员进行了一轮头脑风暴，提取了一些关键词。

我们希望网校的形象可以与用户靠得更近。它需要能够反映出用户内心对于成长、学习的渴望，然而，太过于正面的形象往往会使普通人产生距离感，有优点有缺点的形象才能够使形象性格更完整，使用户更有代入感。由此，我们根据主要用户的特点，梳理出形象需要具备的特点。

网校的用户在渴望成长的同时，也不可避免懒惰、贪玩、缺少毅力等缺点。

形象确定

基于以上的性格特点，接下开始设定主形象。

网校logo是一颗成长中的小树苗，代表用户的求知欲，所以在网校的形象当中，小树苗不可缺少。

考虑到小树苗通常是长在土里，物理上离用户较远，在日常生活中不常见，容易产生疏离感。为了拉近与用户的距离，我们决定——将小苗种在花盆里。一方面便于增加表情，另一方面，相比于种在地里的树苗，放在花盆中的树苗更加贴近用户生活。

对于花盆的形状和小苗与花盆结合的形式，我们做了一系列的尝试。

对于花盆的形状，我们在参考了大多数的花盆。

最终我们选择了直筒型的花盆，并简化花盆的线条，更有利于表现花盆上的表情。由于眼镜容易联想到书呆子、学霸等形象，会使大部分用户产生梳理感，所以在主形象中去掉了眼镜，使形象更像普通人。

小树苗可以映射用户内心渴望成长、学习的一面，同时在学习过程中也会有一些小偷懒、小挫折，毕竟人无完人。相信大多数用户在学习的过程中，都会遇到一位这样的小伙伴，他是我们的“良师益友”，我们共同学习、共同成长，遇到困难互相帮助，互相鞭策。

为了配合在空值页中的场景，对主形象配色进行修改，选用了灰色和饱和度较低的绿色作为主色调，饱和度较低的黄色作为辅助色，以此为标准色，扩展了一系列空值页相关形象。

文案优化

在优化文案前，我们对App内的空值页做了梳理。

空值页主要分为两个类别：

1. 内容空白

内容空白的空值页，包括本身无内容而造成的空值和因用户无操作而造成的空值。
因用户无操作而造成的空值，用户往往有一定的预期。结合使用路径和页面标题，用户是可以理解页面没有出现内容的原因，所以这种情况下，就不需要太直白的告诉用户“没有内容”。我们希望这部分的文案有积极向上的激励作用，符合小树苗“良师益友”的定位，且对用户有引导作用。结合学校的特点，我们想到了名人名言。就像学校中会在教室、校园中张贴名人名言一样，我们希望能用这样的方式，为用户增添一些学习的氛围，同时给予用户正面的鼓励。