產品設計常用的 5 種 UI 狀態｜EP13
2023/04/10閱讀時間約 2 分鐘
在製作 Wireframe、Mockup、PRD 時，通常產品經理會需要根據不同使用情境，事前想好不同使用情境以及對應的回饋方式，這篇會記錄我在規劃產品需求文件時，常會規畫到的 5 種 UI 狀態。
誰適合看這篇文章？
✔ 對產品經理、產品企劃、產品專員工作內容有興趣的朋友
✔ 對產品設計、產品規劃、UI 元件有興趣的朋友
一、哪五種 UI 狀態
五種 UI 狀態是從《打動人心的產品設計: 頂尖設計師打造成功產品的黃金法則》這本書發現的概念，主要分成：
- 理想狀態（Ideal State）：欄位內有正確的資料
- 空白狀態（Empty State）：初始畫面
- 錯誤狀態（Error State）：資料不符格式，或達到極限值
- 局部資料狀態（Partial State）：輸入一半的資料
- 載入中狀態（Loading State）：系統載入中的狀態
具體畫面可以參考下方示意：
二、什麼情況會需要依循這些 UI 狀態
我在使用 Figma 製作 Wireframe 或 Mockup 時，時時都在思考「有沒有什麼情境是我漏掉的」
以上面的「手機號碼」欄位來說，若欄位完全沒有限制，就可能會出現：
- 出現數字以外的字：像是中文、英文、特殊字元（!@#$%）
- 出現極端值：輸入 100 個以上的數字，或只有 2 個數字
上述這些狀況都是我們不願看到的，因此會在欄位加上諸多限制：
- 僅能輸入數字：因此使用者輸入中英文是完全輸不進去的
- 限制字數範圍：設定上下限，超過或低於都無法儲存成功
- 設定提示文字：透過 Placeholder 或 info 提示使用者該欄位要填什麼
- 設定警示文字：當資料不符格式，儲存後會跳出警示文字
三、總結
這篇比較簡短，單純紀錄畫 UI 的五種情境，提醒自己未來在發想功能時，都要時時記得有這些情境需要考慮到。
以上是單純我的學習心得，如對這系列有興趣，也可以持續觀看：
為什麼會看到廣告
67會員
131內容數
留言0
查看全部
