從2016年9月開始，滬江網(wǎng)校App默默地更新了一批空值頁(yè)，以小樹苗為原型的擬人化形象開始出現(xiàn)在每一個(gè)內(nèi)容為空的頁(yè)面，拉近滬江網(wǎng)校與用戶之間的距離。

為什么要更換空值頁(yè)？

空值頁(yè)，簡(jiǎn)單來(lái)說(shuō)就是無(wú)內(nèi)容或者錯(cuò)誤情況下出現(xiàn)的空白狀態(tài)，能夠在操作異常時(shí)給予用戶反饋，或者提示用戶添加內(nèi)容。這類頁(yè)面出現(xiàn)頻率較低，容易被忽略。網(wǎng)校設(shè)計(jì)團(tuán)隊(duì)的小伙伴們?cè)谥匦聦徱旳pp中的空值頁(yè)后，發(fā)現(xiàn)舊版的空值頁(yè)有以下幾個(gè)問(wèn)題。

1. 畫面沒(méi)有系統(tǒng)化

以前在設(shè)計(jì)過(guò)程中，空值頁(yè)往往是隨著其他功能頁(yè)面單個(gè)設(shè)計(jì)的。各個(gè)空值頁(yè)之間視覺(jué)上缺乏系統(tǒng)化的規(guī)劃。

2. 文案不夠友好

舊版空值頁(yè)的文案大多是平鋪直敘，更有些文案使用了專有名詞，不便于用戶理解。

3. 形式單一

舊版空值頁(yè)存在多種空值頁(yè)共用一個(gè)畫面的情況?？罩淀?yè)中使用的圖形是比較抽象的，以便通用多個(gè)頁(yè)面，這樣做，雖然節(jié)省了設(shè)計(jì)成本，卻犧牲了用戶體驗(yàn)，使用戶產(chǎn)生疏離感。

Redesign空值頁(yè)的目標(biāo)是什么？

對(duì)于舊版空值頁(yè)的問(wèn)題有了一定了解后，我們開始思考空值頁(yè)改版的目的是什么呢？

1. 系統(tǒng)化：統(tǒng)一視覺(jué)樣式

將所有空值頁(yè)系統(tǒng)化，重新規(guī)劃設(shè)計(jì)，使得所有頁(yè)面看起來(lái)更加整體，同時(shí)也可以更好的推廣品牌。

2. 更友好：優(yōu)化提示文案

一個(gè)好的文案不僅需要描述清楚事情的情況，更重要的是要有親近感，拉近與用戶的距離。

3. 場(chǎng)景化：不同內(nèi)容展示不同畫面

在不同的空值情況下展示不同的畫面，有助于用戶的理解，同時(shí)也增強(qiáng)了趣味性。

4. 有靈魂：用設(shè)計(jì)賦予產(chǎn)品靈魂

我們希望通過(guò)這次改版，賦予產(chǎn)品自己的性格、特點(diǎn)。

Redesign實(shí)戰(zhàn)

明確了改版的目標(biāo)后，我們開始進(jìn)入設(shè)計(jì)實(shí)戰(zhàn)。根據(jù)之前定的目標(biāo)，在視覺(jué)呈現(xiàn)上，我們希望所有的空值頁(yè)是系統(tǒng)化的，并且根據(jù)不同的場(chǎng)景有相應(yīng)的表現(xiàn)方式。這就需要空值頁(yè)有一個(gè)統(tǒng)一的形象作為載體，在不同的空值狀態(tài)下呈現(xiàn)不同的反饋狀態(tài)。

形象確定

滬江網(wǎng)校App用戶構(gòu)成。

根據(jù)2016年初的用戶調(diào)研，使用網(wǎng)校App的用戶主要有以下三個(gè)特點(diǎn)：

1. 女性用戶居多

女性用戶占到總用戶數(shù)的大部分。

2. 年輕用戶居多

20-25歲的用戶是主力軍。

3. 企業(yè)白領(lǐng)以及大學(xué)生是主要用戶群

有半數(shù)以上為在職用戶，其中以企業(yè)職員為主。

通過(guò)以上三組數(shù)據(jù)可以得知，網(wǎng)校多為年輕的大學(xué)生或初入職場(chǎng)的企業(yè)白領(lǐng)，女性較多。他們有強(qiáng)烈的好奇心，希望通過(guò)網(wǎng)校的課程能夠更好的完成學(xué)業(yè)、為職場(chǎng)助力或者為自己增加一門技能。他們不甘心浪費(fèi)業(yè)余時(shí)間，通過(guò)不斷的學(xué)習(xí)，充實(shí)自己，為自己投資，開拓視野。

關(guān)鍵字提取

滬江網(wǎng)校是一個(gè)學(xué)習(xí)的平臺(tái)，根據(jù)產(chǎn)品的內(nèi)容特點(diǎn)以及以上的用戶特性，網(wǎng)校設(shè)計(jì)組成員進(jìn)行了一輪頭腦風(fēng)暴，提取了一些關(guān)鍵詞。

我們希望網(wǎng)校的形象可以與用戶靠得更近。它需要能夠反映出用戶內(nèi)心對(duì)于成長(zhǎng)、學(xué)習(xí)的渴望，然而，太過(guò)于正面的形象往往會(huì)使普通人產(chǎn)生距離感，有優(yōu)點(diǎn)有缺點(diǎn)的形象才能夠使形象性格更完整，使用戶更有代入感。由此，我們根據(jù)主要用戶的特點(diǎn)，梳理出形象需要具備的特點(diǎn)。

網(wǎng)校的用戶在渴望成長(zhǎng)的同時(shí)，也不可避免懶惰、貪玩、缺少毅力等缺點(diǎn)。

形象確定

基于以上的性格特點(diǎn)，接下開始設(shè)定主形象。

網(wǎng)校logo是一顆成長(zhǎng)中的小樹苗，代表用戶的求知欲，所以在網(wǎng)校的形象當(dāng)中，小樹苗不可缺少。

考慮到小樹苗通常是長(zhǎng)在土里，物理上離用戶較遠(yuǎn)，在日常生活中不常見，容易產(chǎn)生疏離感。為了拉近與用戶的距離，我們決定——將小苗種在花盆里。一方面便于增加表情，另一方面，相比于種在地里的樹苗，放在花盆中的樹苗更加貼近用戶生活。

對(duì)于花盆的形狀和小苗與花盆結(jié)合的形式，我們做了一系列的嘗試。

對(duì)于花盆的形狀，我們?cè)趨⒖剂舜蠖鄶?shù)的花盆。

最終我們選擇了直筒型的花盆，并簡(jiǎn)化花盆的線條，更有利于表現(xiàn)花盆上的表情。由于眼鏡容易聯(lián)想到書呆子、學(xué)霸等形象，會(huì)使大部分用戶產(chǎn)生梳理感，所以在主形象中去掉了眼鏡，使形象更像普通人。

小樹苗可以映射用戶內(nèi)心渴望成長(zhǎng)、學(xué)習(xí)的一面，同時(shí)在學(xué)習(xí)過(guò)程中也會(huì)有一些小偷懶、小挫折，畢竟人無(wú)完人。相信大多數(shù)用戶在學(xué)習(xí)的過(guò)程中，都會(huì)遇到一位這樣的小伙伴，他是我們的“良師益友”，我們共同學(xué)習(xí)、共同成長(zhǎng)，遇到困難互相幫助，互相鞭策。

為了配合在空值頁(yè)中的場(chǎng)景，對(duì)主形象配色進(jìn)行修改，選用了灰色和飽和度較低的綠色作為主色調(diào)，飽和度較低的黃色作為輔助色，以此為標(biāo)準(zhǔn)色，擴(kuò)展了一系列空值頁(yè)相關(guān)形象。

文案優(yōu)化

在優(yōu)化文案前，我們對(duì)App內(nèi)的空值頁(yè)做了梳理。

空值頁(yè)主要分為兩個(gè)類別：

1. 內(nèi)容空白

內(nèi)容空白的空值頁(yè)，包括本身無(wú)內(nèi)容而造成的空值和因用戶無(wú)操作而造成的空值。
因用戶無(wú)操作而造成的空值，用戶往往有一定的預(yù)期。結(jié)合使用路徑和頁(yè)面標(biāo)題，用戶是可以理解頁(yè)面沒(méi)有出現(xiàn)內(nèi)容的原因，所以這種情況下，就不需要太直白的告訴用戶“沒(méi)有內(nèi)容”。我們希望這部分的文案有積極向上的激勵(lì)作用，符合小樹苗“良師益友”的定位，且對(duì)用戶有引導(dǎo)作用。結(jié)合學(xué)校的特點(diǎn)，我們想到了名人名言。就像學(xué)校中會(huì)在教室、校園中張貼名人名言一樣，我們希望能用這樣的方式，為用戶增添一些學(xué)習(xí)的氛圍，同時(shí)給予用戶正面的鼓勵(lì)。

因?yàn)闊o(wú)內(nèi)容而造成的空值，一般是由于老師或者課程安排的原因，出現(xiàn)不需要有內(nèi)容的情況，這里就可以加一點(diǎn)幽默的元素，引得用戶會(huì)心一笑，增加親切感。

2. 頁(yè)面錯(cuò)誤

當(dāng)頁(yè)面出現(xiàn)錯(cuò)誤時(shí)，空值頁(yè)需要明確告知用戶發(fā)生了什么事，如何做可以解決。這里就需要用明確的語(yǔ)言。

修改前后舉例對(duì)比

1. 我的筆記空值頁(yè)面

舊版頁(yè)面比較單調(diào)，文案提示生硬。我們?cè)谛掳骓?yè)面中加入了課堂記筆記的情景，將擬人化的小樹苗放在課堂中，配合做筆記相關(guān)的名人名言激勵(lì)用戶多做筆記。

2. 搜索無(wú)內(nèi)容頁(yè)

舊版中，只說(shuō)明了當(dāng)前的情況，沒(méi)有說(shuō)明解決的方案，并且圖中形象也沒(méi)有很好的跟“搜索”相結(jié)合。在新版中，文案上面增加了解決方法，并在圖中加入了放大鏡，對(duì)話框等元素，更好的表現(xiàn)“搜索不到結(jié)果”。

最后來(lái)看一下大合集。

作者：滬江網(wǎng)校設(shè)計(jì)團(tuán)隊(duì)

來(lái)源：微信公眾號(hào)【滬江UED】