見微知著,談移動缺省頁設(shè)計

0 評論 15289 瀏覽 38 收藏 8 分鐘

見微知著,談移動缺省頁設(shè)計

那什么內(nèi)容可以被添加進入缺省頁面從而使其“豐富友好”呢?Nathan?Barry?在?Designing?Web?Application?中提出了“WWH”的概念來幫助產(chǎn)品設(shè)計師解決此類問題。

告訴用戶什么樣的數(shù)據(jù)將會出現(xiàn)在這里(What)

首先,用戶很可能是第一次接觸你的產(chǎn)品,他們對于使用還不是很了解,而這正是你可以利用缺省頁面向他們提供說明的好機會。設(shè)計時可以使用簡單明了的文案告訴用戶這里將會放置什么樣的內(nèi)容?;c心思在這里,不要讓空白的缺省頁成為用戶最后看到的狀態(tài)。

下面是一些優(yōu)秀的范例:

支付寶錢包的電子券和行程單頁面通過票據(jù)圖形+文字清楚地說明該分類下會出現(xiàn)什么內(nèi)容,并在屏幕下方提供添加票據(jù)的按鈕。

見微知著,談移動缺省頁設(shè)計

Dropbox是筆者非常喜歡的一款網(wǎng)絡(luò)文件同步工具,產(chǎn)品面臨的問題是需要引導(dǎo)用戶上傳內(nèi)容。應(yīng)用在用戶首次使用收藏、相冊及提醒功能時通過灰階 加線條風格的圖示和淺白的文字說明告知用戶如何使用這三個功能,畫面在保持一貫品牌風格的同時也降低了用戶因為列表內(nèi)空無一物而產(chǎn)生情緒上的挫敗感。

見微知著,談移動缺省頁設(shè)計

除了簡單的圖標加文字說明之外,一些應(yīng)用還有一種更為快捷直接的方式:預(yù)置內(nèi)容,即讓用戶直接體驗真實的信息內(nèi)容,或是一些范例信息,而不需要憑空想象。

Shadow?Puppet可以把照片和視頻剪輯結(jié)合聲音、貼紙等制作成動畫,制作簡單,被譽為視頻版的PPT。它的首頁預(yù)置了展示用的視頻樣本,用戶可以通過觀看視頻案例對Shadow?Puppet的視頻制作有感性的認知。

見微知著,談移動缺省頁設(shè)計

?告訴用戶為什么要在這里提交內(nèi)容(Why)

在了解完信息的內(nèi)容形態(tài)以后,就要提供給用戶一個提交內(nèi)容的理由。缺省頁的設(shè)計應(yīng)該簡單告訴用戶建立內(nèi)容的好處,比如你可以認識更多人,可以更有條理也更高效地管理信息等等,幫助用戶產(chǎn)生使用目的。

多看閱讀的已購和云空間缺省頁面直接告訴用戶:快來買書并上傳到云空間吧,這樣你就能有跨平臺同步書籍的體驗了。

見微知著,談移動缺省頁設(shè)計

充滿情感的文案和圖示也可以激發(fā)用戶提交內(nèi)容的興趣。Headspace是由Headspace.com出品的一款專注于教人們怎么冥想并提供語音引導(dǎo)的應(yīng)用。它在缺省狀態(tài)下的朋友頁面就提供給了用戶這樣的理由,通過添加朋友,可以監(jiān)督和鼓勵彼此的冥想過程。看到這樣萌萌噠的缺省頁面,用戶還有什么理由不邀請好友一起來互相監(jiān)督呢?

見微知著,談移動缺省頁設(shè)計

或者可以像興趣社交應(yīng)用Same一樣,通過俏皮的文案來激勵用戶在自己的頻道添加內(nèi)容。

見微知著,談移動缺省頁設(shè)計

通過明確的步驟性的操作引導(dǎo)用戶如何提交內(nèi)容(How)

給用戶明確的操作指引,在界面中提供明顯的按鈕、箭頭指示用戶操作。指示內(nèi)容最好在一頁內(nèi)顯示完畢,如果步驟多,可以拆分到具體使用過程中進行指導(dǎo)。

“樂動力”的好友排行頁面,在沒有添加過好友的情況下,該頁面展示了一些社交網(wǎng)絡(luò)的圖標和大大的添加按鈕提示用戶可以通過綁定社交賬號來找到更多好友一起PK運動量。

見微知著,談移動缺省頁設(shè)計

Pocket是一個可以讓用戶把內(nèi)容(文字、圖片甚至視頻)一鍵保存下來,用于其他時間完成閱讀的工具。在初次使用時它的列表頁面內(nèi)沒有內(nèi)容時,會顯示一個“了解如何保存”的按鈕,點擊可以詳細了解添加列表的各種方法。

見微知著,談移動缺省頁設(shè)計

Taasky和Clear作為兩款交互優(yōu)秀的任務(wù)應(yīng)用,都擁有非常豐富手勢操作,它們沒有像別的軟件一樣在界面上加遮罩、標注做出冗長的用戶教育 頁,而是直接將操作指引嵌在一條條的任務(wù)里,用戶只要跟著當前任務(wù)的簡單描述滑動屏幕就能了解全部手勢操作,即充實了原本空白的缺省頁面又很自然地指導(dǎo)用 戶如何使用該軟件。

見微知著,談移動缺省頁設(shè)計

Orgami是一款折紙風格的記事App,在首次打開應(yīng)用時,筆記頁面內(nèi)并不是空空如也,當然這些預(yù)置內(nèi)容不單純是為了美觀,和應(yīng)用相關(guān)的操作指引也包括在這些便簽內(nèi)。

見微知著,談移動缺省頁設(shè)計

總結(jié)

缺省頁面的狀態(tài)多半是用戶剛開始使用應(yīng)用時才會被看到,這時他們?nèi)匀粚δ愕漠a(chǎn)品有些耐心,設(shè)計師應(yīng)該把握住這個天然的與用戶對話的機會,可以從以下幾點入手設(shè)計出空而不空的缺省頁面。

1.?What

  • 明確指出頁面內(nèi)會出現(xiàn)的數(shù)據(jù)。
  • 可以試著讓用戶直接體驗范例信息。

2.?Why

  • 激勵用戶提交內(nèi)容。

3.How

  • 操作引導(dǎo)。
  • 精簡步驟。

 

原文來自: 騰訊ISUX

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!