當(dāng)一名產(chǎn)品設(shè)計(jì)師沒(méi)有考慮到某種場(chǎng)景時(shí)厌漂，整個(gè)產(chǎn)品的 UI 會(huì)變得"awkward". 這意味著沿著某條線遵循的邏輯規(guī)則被打破了。
這個(gè)規(guī)則就是"UI Stack".
The UI Stack
基本上，你處理的每個(gè)產(chǎn)品的頁(yè)面都有5個(gè)狀態(tài)硅确，如上圖所示烧颖。
遵循 UI Stack 的規(guī)則和5個(gè)狀態(tài)，可以設(shè)計(jì)出人性化的一致性界面代嗤。
Ideal State
理想的頁(yè)面狀態(tài)是我們首次建立的棘钞，因?yàn)檫@是我們想要給用戶看得最多的狀態(tài)。
Empty State
空白狀態(tài)有3個(gè)版本干毅，第一是用戶第一次使用你的產(chǎn)品所看到的內(nèi)容宜猜；第二是當(dāng)用戶清除屏幕中的數(shù)據(jù)時(shí)所看到的；第三是沒(méi)有任何東西出現(xiàn)硝逢，比如姨拥，搜索結(jié)果。大多數(shù)時(shí)候渠鸽，處理這種狀態(tài)叫乌，要么出格，要么沒(méi)有應(yīng)對(duì)措施徽缚。
用戶第一次使用產(chǎn)品時(shí)憨奸，你需要用直白的語(yǔ)言鼓勵(lì)他進(jìn)行下一步操作，并讓他了解下一步操作的結(jié)果凿试。還可以利用產(chǎn)品本身的內(nèi)容指導(dǎo)用戶怎么做排宰。或者那婉，檢測(cè)用戶的操作進(jìn)程板甘，并適當(dāng)回應(yīng)，比如用戶停留某頁(yè)面太長(zhǎng)時(shí)間详炬，可以在線詢問(wèn)是否需要幫助虾啦。
第二種空白狀態(tài)就是當(dāng)用戶清空數(shù)據(jù)，這時(shí)候需要你獎(jiǎng)賞用戶或者引導(dǎo)用戶進(jìn)一步操作。第三種是有時(shí)候用戶在搜索時(shí)傲醉，沒(méi)有出現(xiàn)結(jié)果蝇闭。我們需要避免出現(xiàn)這樣的情況，搜不到時(shí)可以提供另一個(gè)選項(xiàng)硬毕。
Error State
用戶在操作過(guò)程中呻引，也會(huì)偶然出現(xiàn)錯(cuò)誤提示。特別是在用戶輸入表單信息時(shí)吐咳，要做到保護(hù)用戶輸入內(nèi)容的完整安全逻悠。另外出現(xiàn)的錯(cuò)誤提示要易懂，下圖windows是個(gè)反例韭脊。
Partical State
除了出現(xiàn)理想狀態(tài)和錯(cuò)誤狀態(tài)外童谒，有時(shí)還會(huì)出現(xiàn)部分狀態(tài)，例如只顯示幾個(gè)數(shù)據(jù)或圖片沪羔，你要避免用戶在個(gè)這階段退出產(chǎn)品饥伊。
Loading State
還有網(wǎng)頁(yè)在 loading 狀態(tài)時(shí)，可以用 skeleton screens 代替空白區(qū)域蔫饰。另外可以用工程技巧琅豆，提升用戶對(duì)產(chǎn)品的感知速度，比如點(diǎn)贊這個(gè)交互動(dòng)作篓吁。
所以不僅要設(shè)計(jì)出理想的狀態(tài)茫因，還要應(yīng)對(duì)其它四種狀態(tài)，并相互間流暢地運(yùn)做杖剪。
