看似最簡單的空白頁，騰訊微云的高手是如何設計的？

為空頁，簡單理解就是當前頁面內容為空白，分別會在初次使用、完成或清空內容、出錯的情況下出現(xiàn)。本文將簡要闡述關于「騰訊微云」6.1版本所更新的為空頁（內容為空）設計背后的故事，以及探索創(chuàng)新思維的過程與價值。

隨著騰訊微云6.0版本全新品牌形象升級的發(fā)布，6.1的更新將致力于提升品牌的體驗。項目成員細致入微地考慮著如何優(yōu)化整體品牌體驗的同時，也不忘將每個模塊細節(jié)都統(tǒng)一化、精品化。其中的為空頁面也在規(guī)劃當中。 以下將分別從「體驗 - 創(chuàng)新 - 設計」3大緯度對為空頁設計進行全面剖析。

一、體 驗——極 簡 易 懂

為空狀態(tài)并不是時刻都存在的，并沒有多少用戶能夠看到它們。但為空頁的設計是必要的，意義在于為用戶解釋說明當前頁狀態(tài)，用戶需要第一時間知道自己現(xiàn)所處位置、環(huán)境、情況，再而判斷自己接下來的行為。以最基本的功能角度來分析，為空頁應告訴用戶：此頁是什么內容？為何內容為空？怎樣獲取內容？

由于騰訊微云的功能和場景都較為豐富，APP 內也相對應存在著不少的空頁面。為了提升為空頁在整個 APP 的良好體驗，前期我們將微云內所有為空場景重新做了搜集整合，同時也根據(jù)場景對用戶的行為進行分析，把為空頁類型精簡為三種：

• 提示性圖文+操作按鈕引導；
• 提示性圖文；
• 純說明文字。

流程上希望盡可能去引導用戶快捷地完成操作，減輕用戶的認知負擔。

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

二、創(chuàng) 新——耐 人 尋 味

要想創(chuàng)造出具有創(chuàng)新意義的為空頁設計，并不是一件容易的事情，尤其為空頁原本就是一個比較常態(tài)和無聊的環(huán)節(jié)……當然，首先分析用戶心理是關鍵。我們把用戶分為兩大類別：新用戶&老用戶。

新用戶正在探索產品，任何操作體驗都會影響他們會否想留下，或許他不清楚這里的功能是什么，為什么會跳轉到這里，該怎么使用這里的功能等一系列未知項；

老用戶則對于功能、內容、操作等都相對熟悉，在某種意義上為空頁對于他們來講僅僅就是一個條件反射型提示，根本不會去留意畫面內容，甚至有的老用戶幾乎不會存在有為空場景的時候。

但無論是哪種類型用戶，都一定會有同種共性——好奇心。好奇心足以牽引著一個人對所產生事物的關注程度和好感度，從而使得他由被動接受信息直接轉型為主動了解信息。

我們以「好奇心」為出發(fā)點思考，提煉出設計關鍵詞——「耐人尋味」。也把為空頁的設計目標定位「為空彩蛋頁」。希望用戶在無趣中能夠找到一些小驚喜，會心一笑。

根據(jù)騰訊微云「智能融入情感」的品牌宗旨，在設計腦爆環(huán)節(jié)中我們不斷聯(lián)想生活中的事物與各為空頁出現(xiàn)場景的共性之處，并把它們都收集了起來（以下均為為空狀態(tài)表示）。當畫面與之文案相聯(lián)系一起閱讀的時候，所產生的幽默感和畫面感還是十分有意思的，簡單的圖文更能加大想象空間。

創(chuàng)意構思&草圖

以下為創(chuàng)意解釋：

• a.文件-時間：魔術帽內的兔子（隨時備份，隨拿隨到）
• b.筆記：正在削鉛筆（等著你新建筆記）
• c.共享組：滿是笑臉的插排（隨時共享，滿心歡喜）
• d.新建文件夾：沒有水的泳池（此處空間沒東西）
• e.文件-根目錄：已漏完了的沙漏（很長時間未動過）
• f.分享鏈接：未折好的紙飛機（未完成內容所以紙飛機無法成型和起飛-無法分享）
• g.搜索：孤獨的燈塔（附近什么都搜不到）
• h.視頻：未打板的場記板（等你來開拍）
• i.回收站：空牛奶箱（回收箱里沒有奶瓶）
• j.照片-相冊：疊成塔的照片堆（還沒整理成冊）
• k.地點-城市：樂高積木模擬建筑（你來到了假的城市吧）
• l.照片-地點：在迷宮中探索（毫無地點信息）
• m.收藏夾：空白郵票（沒有收藏意義）
• n.搜索-圖片：展覽內的空畫框（沒內容展示）
• o.相冊-人物：稻草人（假人-沒有人物信息）
• p.搜索-音樂：斷弦的吉他（沒法產生音樂）
• q.搜索-文檔：打印出來還是白紙的打印機（沒內容可打?。?/li>
• r.已下載文件：空雞蛋盒（下載-下蛋）
• s.文件保險箱：層層包裝的紙箱（多重保護）
• t.任務列表：天文望遠鏡內空空如也（沒有目標）
• u.相冊-智能分類：無法完成的魔方（難以識別完整樣貌）
• v.搜索-其他：就差一塊拼圖即可完成（結果只剩一塊明顯是對不上的）

當然在腦爆過程中，因為持續(xù)的創(chuàng)意思維發(fā)散，中間也關聯(lián)出許多其他有趣的關聯(lián)物體，而最終選定的物體也是精心挑選出來的，都是相對好理解的代表物體。

三、設 計——精 益 求 精

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

總覽插圖，雖然畫風一致，但會發(fā)現(xiàn)其產生了兩種不太一樣的視覺角度（正視+平行透視）。為了加強整體畫風的統(tǒng)一度和滿足所有元素角度的兼容性，我們把角度統(tǒng)一定為「平行透視」，且僅由一特定角度作為繪圖標準，在細節(jié)的體現(xiàn)上更勝一籌。

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

最終效果

四、總 結——秉 持 創(chuàng) 新

本篇文章著重介紹設計中的創(chuàng)新理念，項目雖小，但創(chuàng)意滿滿。當然也許還會有更棒的創(chuàng)意點子或者視覺呈現(xiàn)，但根本目的還是希望設計師能夠用創(chuàng)新的思維去探索設計方式，時刻秉持創(chuàng)新的出發(fā)點，以誕生更多有趣、特別、巧妙的設計作品。創(chuàng)新的維度也不要僅僅局限于視覺呈現(xiàn)和插畫風格，花點時間在思維上、細節(jié)上，或許會有令人意想不到的小點子或者玩法可以打破常規(guī)呢。

想了解更多頁面效果請下載最新騰訊微云 app 體驗。

（當然不提倡把文件全刪了冒風險來看彩蛋，或許給自己再開個新戶也是不錯的選擇）

「騰訊ISUX?實戰(zhàn)案例」

• 《火爆全網的天天P圖“前世青年照”是怎么設計出來的？》
• 《高手怎么做設計？來看騰訊文檔背后的品牌設計過程！》
• 《上億人使用的QQ iPad版「斗圖神器」原來是這么設計出來的！》
• 《揭秘完整過程！人氣過億的QQ主題是如何設計出來的？》

================明星欄目推薦================

優(yōu)優(yōu)教程網： UiiiUiii.com 是優(yōu)設旗下優(yōu)質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com