看似最簡單的空白頁,騰訊微云的高手是如何設計的? - 優設網 - UISDC

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

2018/05/27 18400評論區

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

隨著騰訊微云6.0版本全新品牌形象升級的發布,6.1的更新將致力于提升品牌的體驗。項目成員細致入微地考慮著如何優化整體品牌體驗的同時,也不忘將每個??橄附詼紀騁換?、精品化。其中的為空頁面也在規劃當中。 以下將分別從「體驗 – 創新 – 設計」3大緯度對為空頁設計進行全面剖析。

一、體 驗——極 簡 易 懂

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

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

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

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

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

二、創 新——耐 人 尋 味

要想創造出具有創新意義的為空頁設計,并不是一件容易的事情,尤其為空頁原本就是一個比較常態和無聊的環節……當然,首先分析用戶心理是關鍵。我們把用戶分為兩大類別:新用戶&老用戶。

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

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

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

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

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

創意構思&草圖

以下為創意解釋:

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

當然在腦爆過程中,因為持續的創意思維發散,中間也關聯出許多其他有趣的關聯物體,而最終選定的物體也是精心挑選出來的,都是相對好理解的代表物體。

三、設 計——精 益 求 精

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

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

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

最終效果

四、總 結——秉 持 創 新

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

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

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

騰訊ISUX?實戰案例」

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

優優教程網 UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄??裘夥炎匝縷?,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備: //hao.www.utsvcz.com.cn

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/weiyun-empty-states-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計達人 設計師干貨 web前端開發 配色 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里