9種狀態(tài)的設(shè)計(jì)

2022-06-24    分類(lèi): 網(wǎng)站建設(shè)

現(xiàn)在的UI設(shè)計(jì)團(tuán)隊(duì)通常先設(shè)計(jì)組件,多數(shù)界面幾乎就是各種組件的結(jié)合。這會(huì)在用戶(hù)的“異常路徑”上留下不容小覷的斷檔。由于我們構(gòu)建的是整個(gè)系統(tǒng),而非幾個(gè)頁(yè)面,我們必須投入精力打磨這些常常被忽略的狀態(tài)的設(shè)計(jì),創(chuàng)造出組件的整個(gè)生命周期,來(lái)適應(yīng)每一個(gè)人。我所理解的生命周期是這樣的:

狀態(tài)

1. 初始狀態(tài)

一個(gè)組件做任何事情之前是怎樣的?可能這是用戶(hù)首次看到它?;蛘咚€沒(méi)被激活。根本上說(shuō)就是這個(gè)組件存在,但還沒(méi)有啟動(dòng)。

Jonas Treub的設(shè)計(jì)能確保你了解framer的最新動(dòng)向。

2. 加載中

令人厭惡的一種狀態(tài)。在理想狀況下,沒(méi)人會(huì)看到這個(gè)。哎,可我們這里是現(xiàn)實(shí)世界。有許多方法能使加載狀態(tài)微妙而含蓄。Facebook在這方面做得很好:

Facebook使用“假文章”來(lái)代替?zhèn)鹘y(tǒng)的轉(zhuǎn)圈圈。

3. 空狀態(tài)

組件已經(jīng)初始化,但是空無(wú)一物。沒(méi)有數(shù)據(jù),沒(méi)有項(xiàng)目。這時(shí)候正適合引導(dǎo)用戶(hù)采取行動(dòng)(“點(diǎn)這里!”),或者給他們鼓勵(lì)(“好樣的,一切正?!保?。

Luke Seeley就將它作為了一種捷徑。

4. 單一項(xiàng)目

開(kāi)始有些數(shù)據(jù)了。在輸入界面中,這或許是按下第一個(gè)鍵的狀態(tài)。在列表中,可能是只有一項(xiàng)(或僅剩一項(xiàng))時(shí)的狀態(tài)。

又是Luke Seeley,MetaLab項(xiàng)目。

5. 有一些數(shù)據(jù)

這通常是你首先考慮的狀態(tài)。某個(gè)組件的最理想狀態(tài)是怎樣的?數(shù)據(jù)加載了,也有內(nèi)容輸入,正是用戶(hù)熟悉的狀態(tài)。

UENO.舒適的大儀表盤(pán)。

6. 數(shù)據(jù)過(guò)多

哇!用戶(hù)似乎操作過(guò)頭了。產(chǎn)生了太多的結(jié)果(或許你現(xiàn)在正對(duì)它們分頁(yè)處理),太多的文字(可能顯示省略號(hào)?),諸如此類(lèi)。

不錯(cuò)的翻頁(yè)設(shè)計(jì),來(lái)自Pete Orme

7. 錯(cuò)誤狀態(tài)

組件出錯(cuò)了。產(chǎn)生了異常。

dunked.com的錯(cuò)誤狀態(tài)很棒。

8. 正確狀態(tài)

很好!這一項(xiàng)操作正確。

Ionut Bondoc ( ?IB )的設(shè)計(jì)

9. 完成狀態(tài)

應(yīng)用已經(jīng)接受了用戶(hù)的正確操作。他們不需要再為此操心了。

Igor Chebotarev給出了一些積極的反饋。

隨著不同頁(yè)面、用戶(hù)操作、數(shù)據(jù)更新還有任何你應(yīng)用的狀態(tài)改變,這些狀態(tài)都會(huì)反復(fù)出現(xiàn)。深思熟慮地設(shè)計(jì)這些變化,就能為用戶(hù)創(chuàng)造優(yōu)美的體驗(yàn),無(wú)論他們身處何種情況。

這其中許多狀態(tài)都沒(méi)有被考慮過(guò),被遺忘,或僅僅是被忽略了。這是個(gè)巨大的錯(cuò)誤,也是你趕超對(duì)手的機(jī)會(huì)。將狀態(tài)的思考納入你的設(shè)計(jì)流程,在與用戶(hù)產(chǎn)生共鳴的同時(shí),也能掌控好你的應(yīng)用。

這9種狀態(tài)的設(shè)計(jì)適用于所有設(shè)計(jì)項(xiàng)目和組件。即使你做出了清醒的決策要忽略其中某一種,遵循這套準(zhǔn)則也能確保你的確思考過(guò)那些異常路徑。

分享文章:9種狀態(tài)的設(shè)計(jì)
當(dāng)前鏈接:http://bm7419.com/news/170910.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動(dòng)態(tài)網(wǎng)站、用戶(hù)體驗(yàn)、定制開(kāi)發(fā)虛擬主機(jī)、企業(yè)建站網(wǎng)站收錄

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都app開(kāi)發(fā)公司