空狀態(tài)

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

如果因為一個系統(tǒng)錯誤不能顯示內(nèi)容，參見 app errors。

顯示空狀態(tài)

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

顯示空狀態(tài)

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

使用一個圖片：

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

包含一個標(biāo)語：

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

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

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

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

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

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

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

啟動內(nèi)容頁面

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

建議：

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

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

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

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

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

建議：

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

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

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

最佳匹配

如果沒有東西匹配用戶的查詢，是否存在一些稍微有點(diǎn)區(qū)別的查詢詞的結(jié)果？如果有，顯示結(jié)果，因為它們可能會幫助用戶找到想要的。

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

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

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

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