為(wèi)空(kōng)頁，簡單理(lǐ)解就是當前頁面內(nèi)容為(wèi)空(kōng)白，分别會(huì)在初次使用、完成或清空(kōng)內(nèi)容、出錯的情況下出現。本文将簡要闡述關于「騰訊微雲」6. 1 版本所更新的為(wèi)空(kōng)頁（內(nèi)容為(wèi)空(kōng)）設計(jì)背後的故事，以及探索創新思維的過程與價值。

随着騰訊微雲6. 0 版本全新品牌形象升級的發布，6. 1 的更新将緻力于提升品牌的體(tǐ)驗。項目成員細緻入微地考慮着如何優化整體(tǐ)品牌體(tǐ)驗的同時(shí)，也不忘将每個(gè)模塊細節都統一化、精品化。其中的為(wèi)空(kōng)頁面也在規劃當中。 以下将分别從「體(tǐ)驗 – 創新 – 設計(jì)」 3 大(dà)緯度對為(wèi)空(kōng)頁設計(jì)進行(xíng)全面剖析。

一、體(tǐ) 驗——極 簡 易 懂

為(wèi)空(kōng)狀态并不是時(shí)刻都存在的，并沒有(yǒu)多(duō)少(shǎo)用戶能夠看到它們。但(dàn)為(wèi)空(kōng)頁的設計(jì)是必要的，意義在于為(wèi)用戶解釋說明(míng)當前頁狀态，用戶需要第一時(shí)間(jiān)知道(dào)自己現所處位置、環境、情況，再而判斷自己接下來(lái)的行(xíng)為(wèi)。以最基本的功能角度來(lái)分析，為(wèi)空(kōng)頁應告訴用戶：此頁是什麽內(nèi)容？為(wèi)何內(nèi)容為(wèi)空(kōng)？怎樣獲取內(nèi)容？

由于騰訊微雲的功能和(hé)場(chǎng)景都較為(wèi)豐富，APP 內(nèi)也相對應存在着不少(shǎo)的空(kōng)頁面。為(wèi)了提升為(wèi)空(kōng)頁在整個(gè) APP 的良好體(tǐ)驗，前期我們将微雲內(nèi)所有(yǒu)為(wèi)空(kōng)場(chǎng)景重新做(zuò)了搜集整合，同時(shí)也根據場(chǎng)景對用戶的行(xíng)為(wèi)進行(xíng)分析，把為(wèi)空(kōng)頁類型精簡為(wèi)三種：

提示性圖文+操作(zuò)按鈕引導；

提示性圖文；

純說明(míng)文字。

流程上(shàng)希望盡可(kě)能去引導用戶快捷地完成操作(zuò)，減輕用戶的認知負擔。


文案方面也進行(xíng)優化，從原來(lái)的「XXX空(kōng)空(kōng)如也」調整為(wèi)「沒有(yǒu)XXX」，目的一是為(wèi)了更快速直白地告知用戶此頁「無」的狀态，其二是希望能設計(jì)一系列有(yǒu)創意的插圖與之配合，簡潔的文案更能輔助烘托插圖的精彩。

二、創 新——耐 人(rén) 尋 味

要想創造出具有(yǒu)創新意義的為(wèi)空(kōng)頁設計(jì)，并不是一件容易的事情，尤其為(wèi)空(kōng)頁原本就是一個(gè)比較常态和(hé)無聊的環節……當然，首先分析用戶心理(lǐ)是關鍵。我們把用戶分為(wèi)兩大(dà)類别：新用戶&老用戶。

新用戶正在探索産品，任何操作(zuò)體(tǐ)驗都會(huì)影(yǐng)響他們會(huì)否想留下，或許他不清楚這裏的功能是什麽，為(wèi)什麽會(huì)跳(tiào)轉到這裏，該怎麽使用這裏的功能等一系列未知項；

老用戶則對于功能、內(nèi)容、操作(zuò)等都相對熟悉，在某種意義上(shàng)為(wèi)空(kōng)頁對于他們來(lái)講僅僅就是一個(gè)條件反射型提示，根本不會(huì)去留意畫(huà)面內(nèi)容，甚至有(yǒu)的老用戶幾乎不會(huì)存在有(yǒu)為(wèi)空(kōng)場(chǎng)景的時(shí)候。

但(dàn)無論是哪種類型用戶，都一定會(huì)有(yǒu)同種共性——好奇心。好奇心足以牽引着一個(gè)人(rén)對所産生(shēng)事物的關注程度和(hé)好感度，從而使得(de)他由被動接受信息直接轉型為(wèi)主動了解信息。


我們以「好奇心」為(wèi)出發點思考，提煉出設計(jì)關鍵詞——「耐人(rén)尋味」。也把為(wèi)空(kōng)頁的設計(jì)目标定位「為(wèi)空(kōng)彩蛋頁」。希望用戶在無趣中能夠找到一些(xiē)小(xiǎo)驚喜，會(huì)心一笑。


根據騰訊微雲「智能融入情感」的品牌宗旨，在設計(jì)腦(nǎo)爆環節中我們不斷聯想生(shēng)活中的事物與各為(wèi)空(kōng)頁出現場(chǎng)景的共性之處，并把它們都收集了起來(lái)（以下均為(wèi)為(wèi)空(kōng)狀态表示）。當畫(huà)面與之文案相聯系一起閱讀的時(shí)候，所産生(shēng)的幽默感和(hé)畫(huà)面感還(hái)是十分有(yǒu)意思的，簡單的圖文更能加大(dà)想象空(kōng)間(jiān)。

創意構思&草圖

以下為(wèi)創意解釋：

a.文件-時(shí)間(jiān)：魔術(shù)帽內(nèi)的兔子（随時(shí)備份，随拿(ná)随到）

b.筆記：正在削鉛筆（等着你(nǐ)新建筆記）

c.共享組：滿是笑臉的插排（随時(shí)共享，滿心歡喜）

d.新建文件夾：沒有(yǒu)水(shuǐ)的泳池（此處空(kōng)間(jiān)沒東西）

e.文件-根目錄：已漏完了的沙漏（很(hěn)長時(shí)間(jiān)未動過）

f.分享鏈接：未折好的紙飛機（未完成內(nèi)容所以紙飛機無法成型和(hé)起飛-無法分享）

g.搜索：孤獨的燈塔（附近什麽都搜不到）

h.視(shì)頻：未打闆的場(chǎng)記闆（等你(nǐ)來(lái)開(kāi)拍）

i.回收站(zhàn)：空(kōng)牛奶箱（回收箱裏沒有(yǒu)奶瓶）

j.照片-相冊：疊成塔的照片堆（還(hái)沒整理(lǐ)成冊）

k.地點-城市：樂高(gāo)積木模拟建築（你(nǐ)來(lái)到了假的城市吧(ba)）

l.照片-地點：在迷宮中探索（毫無地點信息）

m.收藏夾：空(kōng)白郵票(piào)（沒有(yǒu)收藏意義）

n.搜索-圖片：展覽內(nèi)的空(kōng)畫(huà)框（沒內(nèi)容展示）

o.相冊-人(rén)物：稻草人(rén)（假人(rén)-沒有(yǒu)人(rén)物信息）

p.搜索-音(yīn)樂：斷弦的吉他（沒法産生(shēng)音(yīn)樂）

q.搜索-文檔：打印出來(lái)還(hái)是白紙的打印機（沒內(nèi)容可(kě)打印）

r.已下載文件：空(kōng)雞蛋盒（下載-下蛋）

s.文件保險箱：層層包裝的紙箱（多(duō)重保護）

t.任務列表：天文望遠鏡內(nèi)空(kōng)空(kōng)如也（沒有(yǒu)目标）

u.相冊-智能分類：無法完成的魔方（難以識别完整樣貌）

v.搜索-其他：就差一塊拼圖即可(kě)完成（結果隻剩一塊明(míng)顯是對不上(shàng)的）


當然在腦(nǎo)爆過程中，因為(wèi)持續的創意思維發散，中間(jiān)也關聯出許多(duō)其他有(yǒu)趣的關聯物體(tǐ)，而最終選定的物體(tǐ)也是精心挑選出來(lái)的，都是相對好理(lǐ)解的代表物體(tǐ)。

三、設 計(jì)——精 益 求 精

創意過後，該如何選擇适合的設計(jì)風格去搭配才能既凸顯效果同時(shí)也不至于搶眼跳(tiào)脫？ 經過幾輪繪圖嘗試後，團隊果斷選擇了能代表「極客」屬性的單線極簡風格作(zuò)為(wèi)主視(shì)覺風格（表面工整冷淡，內(nèi)心情感豐富）。以下為(wèi)重新繪制(zhì)的插圖樣式。


總覽插圖，雖然畫(huà)風一緻，但(dàn)會(huì)發現其産生(shēng)了兩種不太一樣的視(shì)覺角度（正視(shì)+平行(xíng)透視(shì)）。為(wèi)了加強整體(tǐ)畫(huà)風的統一度和(hé)滿足所有(yǒu)元素角度的兼容性，我們把角度統一定為(wèi)「平行(xíng)透視(shì)」，且僅由一特定角度作(zuò)為(wèi)繪圖标準，在細節的體(tǐ)現上(shàng)更勝一籌。



顔色搭配上(shàng)，結合新品牌專屬品牌色（藍(lán)、綠、紫），将插圖中的最關鍵聯想區(qū)域加入品牌色進行(xíng)點綴和(hé)視(shì)覺中心提示，弱化插圖描邊的分量感。同時(shí)為(wèi)了避免枯燥，品牌色的選用也經過分析和(hé)精心搭配（并非平均分配，主要以品牌藍(lán)為(wèi)主，強化品牌關聯性），希望給用戶展現最清新極緻的插圖風格。


最終效果






四、總 結——秉 持 創 新

本篇文章着重介紹設計(jì)中的創新理(lǐ)念，項目雖小(xiǎo)，但(dàn)創意滿滿。當然也許還(hái)會(huì)有(yǒu)更棒的創意點子或者視(shì)覺呈現，但(dàn)根本目的還(hái)是希望設計(jì)師(shī)能夠用創新的思維去探索設計(jì)方式，時(shí)刻秉持創新的出發點，以誕生(shēng)更多(duō)有(yǒu)趣、特别、巧妙的設計(jì)作(zuò)品。創新的維度也不要僅僅局限于視(shì)覺呈現和(hé)插畫(huà)風格，花(huā)點時(shí)間(jiān)在思維上(shàng)、細節上(shàng)，或許會(huì)有(yǒu)令人(rén)意想不到的小(xiǎo)點子或者玩法可(kě)以打破常規呢。

想了解更多(duō)頁面效果請(qǐng)下載最新騰訊微雲 app 體(tǐ)驗。