編者按：今天@騰訊ISUX?的同學(xué)從三個(gè)角度（What、Why、How）幫同學(xué)們搞定移動(dòng)缺省頁(yè)的設(shè)計(jì)。文中含大量豐富實(shí)例，可借鑒性非常高，強(qiáng)烈推薦同學(xué)們收藏唷 >>>

飯飯妥妥的：缺省頁(yè)面，是出現(xiàn)在用戶(hù)沒(méi)有提交任何資料或者網(wǎng)絡(luò)連接不通暢的情況下所展現(xiàn)的頁(yè)面。通常設(shè)計(jì)師們習(xí)慣用豐富的數(shù)據(jù)內(nèi)容把頁(yè)面設(shè)計(jì)得美觀(guān)實(shí)用，考慮的都是界面展現(xiàn)的“理想狀態(tài)”，往往會(huì)忽視沒(méi)有內(nèi)容的“缺省狀態(tài)”。未經(jīng)過(guò)精心設(shè)計(jì)的缺省頁(yè)面降低了用戶(hù)的使用體驗(yàn)，并可能給用戶(hù)帶來(lái)困擾，如下圖iOS系統(tǒng)郵件App，無(wú)郵件時(shí)界面上沒(méi)有任何有效反饋信息，用戶(hù)不能明確得知到底是網(wǎng)絡(luò)問(wèn)題還是賬號(hào)同步出錯(cuò)亦或者是收件箱內(nèi)確實(shí)一封郵件都沒(méi)有。同樣的情況也出現(xiàn)在Pinterest和出發(fā)吧的界面里。

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

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

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

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

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

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

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

Shadow Puppet可以把照片和視頻剪輯結(jié)合聲音、貼紙等制作成動(dòng)畫(huà)，制作簡(jiǎn)單，被譽(yù)為視頻版的PPT。它的首頁(yè)預(yù)置了展示用的視頻樣本，用戶(hù)可以通過(guò)觀(guān)看視頻案例對(duì)Shadow Puppet的視頻制作有感性的認(rèn)知。

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

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

多看閱讀的已購(gòu)和云空間缺省頁(yè)面直接告訴用戶(hù)：快來(lái)買(mǎi)書(shū)并上傳到云空間吧，這樣你就能有跨平臺(tái)同步書(shū)籍的體驗(yàn)了。

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

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

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

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

“樂(lè)動(dòng)力”的好友排行頁(yè)面，在沒(méi)有添加過(guò)好友的情況下，該頁(yè)面展示了一些社交網(wǎng)絡(luò)的圖標(biāo)和大大的添加按鈕提示用戶(hù)可以通過(guò)綁定社交賬號(hào)來(lái)找到更多好友一起PK運(yùn)動(dòng)量。

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

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

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

總結(jié)

缺省頁(yè)面的狀態(tài)多半是用戶(hù)剛開(kāi)始使用應(yīng)用時(shí)才會(huì)被看到，這時(shí)他們?nèi)匀粚?duì)你的產(chǎn)品有些耐心，設(shè)計(jì)師應(yīng)該把握住這個(gè)天然的與用戶(hù)對(duì)話(huà)的機(jī)會(huì)，可以從以下幾點(diǎn)入手設(shè)計(jì)出空而不空的缺省頁(yè)面。

1. What

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

2. Why

• 激勵(lì)用戶(hù)提交內(nèi)容。

3. How

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

超實(shí)用的指南好文合集！

色彩知識(shí)大科普！再也不做“色盲”啦！
《設(shè)計(jì)師配色寶典！教你從零開(kāi)始學(xué)配色（一）》

幫你全面搞定摳圖的那些事兒！
《從菜鳥(niǎo)到高手！PHOTOSHOP摳圖全方位攻略》

閱讀量過(guò)10萬(wàn)的超人氣自學(xué)指南！
《超贊！設(shè)計(jì)師完全自學(xué)指南》

原文地址：騰訊ISUX
作者：飯飯妥妥的

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量91萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：