產品設計常用的 5 種 UI 狀態｜EP13
閱讀時間約 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 的五種情境，提醒自己未來在發想功能時，都要時時記得有這些情境需要考慮到。
以上是單純我的學習心得，如對這系列有興趣，也可以持續觀看：
為什麼會看到廣告
90會員
161內容數
《思維的創意想像》是工作之餘發起的 Side Project，因為近期快速吸收各種資訊跟商業知識（Input），但一直沒有地方輸出（Output），因此想透過這系列記錄學到的內容，包含商業知識、產業洞見，或是職場分享等等，目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
留言0
查看全部
你可能也想看
Google News 追蹤
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析，以及狀態和數據的區分，詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
本文講述了設計師進行產品規劃時需要融入商業策略，並深入瞭解用戶需求和使用方式的重要性。同時，透過使用者訪談和對各種競品的研究，設計師可以建立良好的商業策略思維，以實現產品的成長和用戶滿意度。
產品開發的成功，除了品質，更在於是否能夠在適當的時程內推出並滿足客戶需求。
身為開發、設計人員，從文中提供的三個角度來思考，以確保產品與公司的競爭力。
1.設計系統不用從頭開始
在設計產品時，有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師，負責各種產品或視覺設計工作時才逐漸領悟到的一點。
當時，我在購買UI Kits這件事情上猶豫不決，擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
在設計有四年快五年的時間，大部分都是從實戰經驗中去不斷摸索產品開發的流程。從視覺傳達的背景出來，在用戶體驗的經驗都是在實際開發中去摸索出來的。不是理論派，只是根據我本人的經驗摸索出來的設計方法，也不會用太多高深的詞彙說明。
以前搜尋怎麼做產品設計？究竟是要從什麼步驟開始的這件事情，大部分看到的
UI設計是一個令人著迷的過程，它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段，包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作，以幫助您更好地理解每個階段的作用和重要性。
產品製作的核心因素有三個重點，分別為：使用者（誰在用）、需求（為什麼用）、場景（在哪裡用）。這些因素對於任何產品的成功都是相當重要的。
本文探討初涉產品管理的新手在面對複雜問題時的困境，強調學習區分事情輕重緩急的重要性。建議培養這種辨識能力，並運用堅持和放棄的技巧，在兩者之間取得平衡。提及常見問題如何優先處理、如何在兩個同樣重要的選擇中做取捨，以及解決加班困擾的建議。總結指出，堅持和放棄是初學者在學習事務管理時的得力助手。
從事多年的消費性電子產品的研發設計工作，歸納出好的產品設計需要滿足產品的設計規格(包含工業設計，產品尺寸、重量、功能性)、成本以及量產期程，此外還需要考慮其他要素，羅列如下：
為製造設計 (DFM, Design for Manufacture)
為品質設計 (DFQ, Design for Q
本文介紹了在網站開發中如何運用狀態機的原則和設計方法。通過具體案例分析，以及狀態和數據的區分，詳細介紹了狀態機的設計原則和應用。讀者可以通過本文瞭解如何將狀態機應用於實際的網站開發中。
本文講述了設計師進行產品規劃時需要融入商業策略，並深入瞭解用戶需求和使用方式的重要性。同時，透過使用者訪談和對各種競品的研究，設計師可以建立良好的商業策略思維，以實現產品的成長和用戶滿意度。
產品開發的成功，除了品質，更在於是否能夠在適當的時程內推出並滿足客戶需求。
身為開發、設計人員，從文中提供的三個角度來思考，以確保產品與公司的競爭力。
1.設計系統不用從頭開始
在設計產品時，有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師，負責各種產品或視覺設計工作時才逐漸領悟到的一點。
當時，我在購買UI Kits這件事情上猶豫不決，擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
在設計有四年快五年的時間，大部分都是從實戰經驗中去不斷摸索產品開發的流程。從視覺傳達的背景出來，在用戶體驗的經驗都是在實際開發中去摸索出來的。不是理論派，只是根據我本人的經驗摸索出來的設計方法，也不會用太多高深的詞彙說明。
以前搜尋怎麼做產品設計？究竟是要從什麼步驟開始的這件事情，大部分看到的
UI設計是一個令人著迷的過程，它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段，包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作，以幫助您更好地理解每個階段的作用和重要性。
產品製作的核心因素有三個重點，分別為：使用者（誰在用）、需求（為什麼用）、場景（在哪裡用）。這些因素對於任何產品的成功都是相當重要的。
本文探討初涉產品管理的新手在面對複雜問題時的困境，強調學習區分事情輕重緩急的重要性。建議培養這種辨識能力，並運用堅持和放棄的技巧，在兩者之間取得平衡。提及常見問題如何優先處理、如何在兩個同樣重要的選擇中做取捨，以及解決加班困擾的建議。總結指出，堅持和放棄是初學者在學習事務管理時的得力助手。
從事多年的消費性電子產品的研發設計工作，歸納出好的產品設計需要滿足產品的設計規格(包含工業設計，產品尺寸、重量、功能性)、成本以及量產期程，此外還需要考慮其他要素，羅列如下：
為製造設計 (DFM, Design for Manufacture)
為品質設計 (DFQ, Design for Q