空狀態(tài)發(fā)生于一個(gè)常規(guī)內(nèi)容頁(yè)面不能顯示時(shí)。可能是一個(gè)沒(méi)有條目的列表，或者一個(gè)沒(méi)有返回結(jié)果的搜索。雖然這些情況不是典型的，但也是展示良好設(shè)計(jì)以避免用戶失望或者困惑的好機(jī)會(huì)。

如果因?yàn)橐粋€(gè)系統(tǒng)錯(cuò)誤不能顯示內(nèi)容，參見(jiàn) app errors。

顯示空狀態(tài)

避免完全空的內(nèi)容

顯示空狀態(tài)

最基本的空狀態(tài)顯示一個(gè)非交互的圖片和文本標(biāo)語(yǔ)。

使用一個(gè)圖片：

• 相對(duì)于背景來(lái)說(shuō)，顯得巧妙和素凈。
• 以一個(gè)生動(dòng)的方式傳達(dá)應(yīng)用的目的和意圖，就像你的應(yīng)用圖標(biāo)

包含一個(gè)標(biāo)語(yǔ)：

• 有積極的語(yǔ)氣
• 與你的品牌一致
• 傳達(dá)應(yīng)用的意圖，而不需要可操作

http://wiki.jikexueyuan.com/project/material-design/images/11_1.png" alt="" />

(上圖)可?。簣D片素凈并且明顯是背景的一部分。標(biāo)語(yǔ)傳達(dá)了應(yīng)用的意圖，并且沒(méi)有需要操作的意思。

http://wiki.jikexueyuan.com/project/material-design/images/11_2.png" alt="" />

(上圖)不可?。簣D片明亮并且標(biāo)語(yǔ)像是需要操作，讓用戶以為可以點(diǎn)擊或者將會(huì)開(kāi)始一段閑逛。

避免完全空的內(nèi)容

有好幾種情況，你可以提供給用戶完全空的內(nèi)容之外的選項(xiàng)。

啟動(dòng)內(nèi)容頁(yè)面

讓新用戶學(xué)習(xí)和著迷于你的應(yīng)用最有吸引力的方式是通過(guò)使用它的過(guò)程?？紤]提供一個(gè)啟動(dòng)頁(yè)面內(nèi)容，會(huì)讓用戶立即開(kāi)始探索你的應(yīng)用。

建議：

• 使用具有廣泛訴求的內(nèi)容，顯示最主要的功能。
• 給予用戶刪除或者替代這個(gè)內(nèi)容的能力。
• 如果可能的話，為用戶提供個(gè)性化的內(nèi)容。

http://wiki.jikexueyuan.com/project/material-design/images/11_3.png" alt="" />

一個(gè)書(shū)本閱讀應(yīng)用可以提供一些免費(fèi)流行的書(shū)籍，讓用戶立馬開(kāi)始探索應(yīng)用。

指導(dǎo)內(nèi)容

如果頁(yè)面的意圖并不能夠通過(guò)一個(gè)圖片和一個(gè)標(biāo)語(yǔ)傳達(dá)，考慮使用指導(dǎo)內(nèi)容來(lái)取代。

建議：

• 一旦有了內(nèi)容，幫助用戶理解他們可以做什么。
• 可以取消或者跳過(guò)內(nèi)容。
• 保持簡(jiǎn)潔。

http://wiki.jikexueyuan.com/project/material-design/images/11_4.png" alt="" />

一個(gè)用戶在一個(gè)電影應(yīng)用里看視頻之前，一個(gè)可以取消的卡片顯示出來(lái)解釋服務(wù)的特征和好處。

最佳匹配

如果沒(méi)有東西匹配用戶的查詢，是否存在一些稍微有點(diǎn)區(qū)別的查詢?cè)~的結(jié)果？如果有，顯示結(jié)果，因?yàn)樗鼈兛赡軙?huì)幫助用戶找到想要的。

通過(guò)這個(gè)方法，在結(jié)果的頂部清楚地傳達(dá)這個(gè)內(nèi)容與真實(shí)查詢結(jié)果的匹配，以確保不會(huì)被拼錯(cuò)。

http://wiki.jikexueyuan.com/project/material-design/images/11_5.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/11_6.png" alt="" />

提供“最佳匹配”是處理錯(cuò)拼查詢的很好方法，而不至于讓用戶承擔(dān)責(zé)任。