聊聊、APP最常用的9種狀態設計

發布時間:2017-06-20 20:00 來源:互聯網 當前欄目:網頁設計教程

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

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

  1. 初始狀態

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

聊聊APP最常用的9種狀態設計 電腦高手網

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

兔兔電影網[www.aikan.tv/special/tutudianyingwang/]

  2. 加載中

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

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

  3. 空狀態

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

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

  4. 單一項目

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

  又是Luke Seeley,MetaLab項目。

  5. 有一些數據

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

  UENO. 舒適的大儀表盤。

  6. 數據過多

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

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

  7. 錯誤狀態

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

  dunked.com的錯誤狀態很棒。

  8. 正確狀態

  很好!這一項操作正確。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、