9種狀態的設計

2021-07-10 04:10:12 字數 1160 閱讀 2646

**

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

乙個元件做任何事情之前是怎樣的?可能這是使用者首次看到它。或者它還沒被啟用。根本上說就是這個元件存在,但還沒有啟動。

jonas treub的設計能確保你了解framer的最新動向。

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

facebook使用「假文章」來代替傳統的轉圈圈。

元件已經初始化,但是空無一物。沒有資料,沒有專案。這時候正適合引導使用者採取行動(「點這裡!」),或者給他們鼓勵(「好樣的,一切正常」)。

luke seeley就將它作為了一種捷徑。

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

又是luke seeley,metalab專案。

這通常是你首先考慮的狀態。某個元件的最理想狀態是怎樣的?資料載入了,也有內容輸入,正是使用者熟悉的狀態。

ueno.舒適的大儀錶盤。

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

不錯的翻頁設計,來自pete orme

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

dunked.com的錯誤狀態很棒。

很好!這一項操作正確。

ionut bondoc ( ►ib )的設計

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

igor chebotarev給出了一些積極的反饋。

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

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

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

24種設計模式 狀態模式

當乙個物件的行為取決於它的狀態,並且它必須在執行時刻根據狀態改變它的行為時,可考慮用到狀態模式 include stdafx.h include using namespace std class job class afternoon state class night state class n...

23種設計模式 狀態模式

在軟體構建過程中,某些物件的狀態如果改變,其行為也會隨之而發生變化。比如文件處於唯讀狀態,其支援的行為和讀寫狀態支援的行為就可能完全不同。如何在執行時根據物件的狀態來透明地更改物件的行為?而不會對物件的操作和狀態轉化之間引入緊耦合?允許乙個物件在其內部狀態改變時改變它的行為。從而使物件看起來似乎修改...

網頁設計中最常見的9種設計風格

網頁設計中最常見的9種設計風格 扁平化設計可以說是時下最常用的網頁設計風格了,它弱化了材質 漸變 陰影,去除了冗餘資訊的圖形元素 排版。這種風格設計可以使畫面顯得更加平滑,提公升了 內容資訊的視覺層級,更加方便使用者快速尋找自己需要的內容。同時扁平化的介面能更好實現不同尺寸的轉化。這裡所說的3d風格...