空狀態(tài)

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

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

顯示空狀態(tài)

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

顯示空狀態(tài)

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

使用一個(gè)圖片：

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

包含一個(gè)標(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)擊或者將會(huì)開始一段閑逛。

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

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

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

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

建議：

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

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

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

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

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

建議：

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

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

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

最佳匹配

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

通過這個(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é)任。