模型中的按鈕通常顯示一種狀態:預設狀態。在實際產品中,相同的按鈕會懸停、透過鍵盤對焦、按下、在表單不完整時停用,並在發送請求時載入。其中每一個都是一種 UI 狀態,每一個都需要一種設計。
它有助於區分兩組。互動狀態來自使用者:懸停、聚焦、按下和停用。資料狀態來自系統:載入、空、部分資料、錯誤和成功。例如,清單畫面需要針對何時載入、何時沒有項目、何時有一項、何時有數百項以及請求失敗時進行設計。
焦點狀態值得特別重視。使用鍵盤或開關設備的人依靠可見的焦點指示器來知道他們所在的位置。刪除瀏覽器焦點輪廓而不進行替換是最常見的輔助功能失敗之一。
狀態之間的變化也是設計的一部分。從預設到按下的短暫而清晰的過渡確認了點擊。順利轉變為成功的載入狀態告訴人們他們的行動有效。突然的跳躍或太慢的動畫會讓介面感覺不可靠。
避免遺失狀態的實用方法是在設計之前列出每個元件的狀態,或將元件建模為狀態機:一組狀態以及在狀態之間移動的事件。我們製作的ExodeUI就是這樣運作的。您在一個檔案中設計每個狀態以及它們之間的轉換,然後您的程式碼會傳送在實際應用程式中切換狀態的事件。