nine-states-of-design-1

編者按:現在做UI設計不僅要關注界面視覺,還得懂點交互和用研,今天@十萬個為什麼?這篇譯文,囊括了移動APP操作過程中該有的9種基礎狀態(加載中、空狀態、錯誤狀態等),附上追波的優秀設計案例供學習,來收!

現在的UI設計團隊通常先設計組件,多數界面幾乎就是各種組件的結合。這會在用戶的“異常路徑”上留下不容小覷的斷檔。由于我們構建的是整個系統,而非幾個頁面,我們必須投入精力打磨這些常常被忽略的狀態的設計,創造出組件的整個生命周期,來適應每一個人。我所理解的生命周期是這樣的:

1.?初始狀態

一個組件做任何事情之前是怎樣的?可能這是用戶首次看到它?;蛘咚€沒被激活。根本上說就是這個組件存在,但還沒有啟動。

Jonas Treub?的設計能確保你了解framer的最新動向。

2.?加載中

令人厭惡的一種狀態。在理想狀況下,沒人會看到這個。哎,可我們這里是現實世界。有許多方法能使加載狀態微妙而含蓄。Facebook在這方面做得很好:

Facebook使用“假文章”來代替傳統的轉圈圈。

3.?空狀態

組件已經初始化,但是空無一物。沒有數據,沒有項目。這時候正適合引導用戶采取行動(“點這里!”),或者給他們鼓勵(“好樣的,一切正?!保?。

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

4.?單一項目

開始有些數據了。在輸入界面中,這或許是按下第一個鍵的狀態。在列表中,可能是只有一項(或僅剩一項)時的狀態。

又是Luke Seeley,MetaLab項目。

5.?有一些數據

這通常是你首先考慮的狀態。某個組件的最理想狀態是怎樣的?數據加載了,也有內容輸入,正是用戶熟悉的狀態。

UENO.?舒適的大儀表盤。

6.?數據過多

哇!用戶似乎操作過頭了。產生了太多的結果(或許你現在正對它們分頁處理),太多的文字(可能顯示省略號?),諸如此類。

不錯的翻頁設計,來自Pete Orme

7.?錯誤狀態

組件出錯了。產生了異常。

dunked.com的錯誤狀態很棒。

8.?正確狀態

很好!這一項操作正確。

Ionut Bondoc ( ?IB )?的設計

9.?完成狀態

應用已經接受了用戶的正確操作。他們不需要再為此操心了。

Igor Chebotarev?給出了一些積極的反饋。(此處圖超大,壓縮后失真,同學們可直接到追波看)

隨著不同頁面、用戶操作、數據更新還有任何你應用的狀態改變,這些狀態都會反復出現。深思熟慮地設計這些變化,就能為用戶創造優美的體驗,無論他們身處何種情況。

這其中許多狀態都沒有被考慮過,被遺忘,或僅僅是被忽略了。這是個巨大的錯誤,也是你趕超對手的機會。將狀態的思考納入你的設計流程,在與用戶產生共鳴的同時,也能掌控好你的應用。

這9種狀態的設計適用于所有設計項目和組件。即使你做出了清醒的決策要忽略其中某一種,遵循這套準則也能確保你的確思考過那些異常路徑。

【本周最佳漲姿勢系列好文】

設計四大原則之對比:
《讓你不一樣!20個技巧幫你提升設計的對比度》

必讀趨勢之交互微知識!
《必讀趨勢系列!2016年設計師必須掌握的微交互知識》

提高設計效率的干貨好文!
《又快又好!手把手教你從3方面提升設計效率》

原文地址:medium
譯文地址:colachan

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量104萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 4

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏