產品設計常用的 5 種 UI 狀態｜EP13
在製作 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 的五種情境，提醒自己未來在發想功能時，都要時時記得有這些情境需要考慮到。
以上是單純我的學習心得，如對這系列有興趣，也可以持續觀看：
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
82會員
148Content count
《思維的創意想像》是工作之餘發起的 Side Project，因為近期快速吸收各種資訊跟商業知識（Input），但一直沒有地方輸出（Output），因此想透過這系列記錄學到的內容，包含商業知識、產業洞見，或是職場分享等等，目前已有產品開發、客戶成功、社群行銷、思維增長、職場日記等系列文章。
留言0
查看全部
你可能也想看
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
這篇文章主要討論大學設計系學生進入職場的優勢與能力，並提出了在大學四年應該要培養的能力。作者分享了自己的分析，認為大學設計系學生應該要把握機會發揮自己的創造能力，成為一位maker。文章內容鼓勵學生勇於實踐自己的想法，並給予了具體的建議和示例。這篇文章對於設計系學生來說具有很高的參考價值。
當前的工業設計傾向於圓滑和曲線，這種趨勢雖然為眾多產品賦予了一種美感，但卻可能使每個品牌的設計失去獨特性和個性。
車廠仿佛只是在為了跟隨所謂的時尚潮流而努力，只能保留一兩個所謂的經典元素，仿佛是在追求某種形式的前進，而非真正展現品牌的獨特文化和語言。
或許值得思考的是，過去那些在壓抑時期誕生的設
人生如同一場永無止境的旅程，在這旅途中，不斷地追尋意義與存在的價值。
然而，在這漫漫長路上，往往被種種迷惑所困，失去了自我，迷失了方向。
而正是當停下腳步，凝視內心深處時，才能發現那些被忽視的真實。
因為，每一個人的內心都藏著一片迷失的深淵，只有當勇敢地面對自己的內在黑暗，接受自己的脆弱與
複雜 / 簡單 / 幾何 / 構圖 / 點綴
椅子該具備甚麼功能或者概念?做得舒服?還是要有感覺?設計是為了設計?還是為了留下火光.
Complexity / Simplicity / Geometry / Composition / Embellishment
What is
在畫這個時，本來想的是利用動畫原理，在你投入硬幣存錢的當下，壓動下沉的力道，推動畫面使其被動撥放前方的畫面。
畫面可設計又更邁進夢想一步了，又或者是小插畫之類的。但來不急提案就胎死腹中只能自己畫開心。
很多想法都有~~有時就是技術類無法突破，腦中有畫面但就是沒能做出產品去推動，可能跟先天數理較弱
簡單造型的產品能夠給使用者帶來許多好處。一方面，簡單的外觀能讓產品更容易理解和使用，尤其是對於那些沒有使用過類似產品的人來說。這能夠減少使用者的學習曲線，並讓他們更容易上手。另一方面，簡單的外觀也能讓產品更容易維護和保養，因為它沒有過多的細節和零件需要特別處理。
80/20 法則告訴我們僅有 20% 的變因操縱著 80% 的局面，在軟體的產品設計上，也可以利用 80/20 法則來對 UI 與 UX 做優化，這篇文章分享了 80/20 法則在別人產品的應用，以及對於我們自己開發產品時 80/20 法則的實踐。
身為產品經理很常收到來自四面八方的想法，雖然非常歡迎這些好意，卻又不得不作出殘酷的抉擇。對於新產品的構想，哪些概念是有價值的？哪些又是必須捨棄的呢？也許我們可以參考以下三個條件。
今天的主題延續上一篇關於無障礙網站的主題，想要跟大家聊聊關於alt圖片替代文字應該寫些什麼比較好呢？
看完本篇文章你將會收穫：
・什麼是 alt 圖片替代文字
・什麼場合會需要用到alt圖片替代文字？
・alt替代文字的失敗案例
・應該怎麼去寫alt 圖片替代文字？
適合讀者：想進入產品經理的專案經理、剛入門到進階的產品經理和產品設計師
整理來自各個大神推薦的 PM 書單， PM 技能又深又廣，再加上各種領域課程無法每場都參與，所以只能選擇用閱讀來補充相關知識。
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
這篇文章主要討論大學設計系學生進入職場的優勢與能力，並提出了在大學四年應該要培養的能力。作者分享了自己的分析，認為大學設計系學生應該要把握機會發揮自己的創造能力，成為一位maker。文章內容鼓勵學生勇於實踐自己的想法，並給予了具體的建議和示例。這篇文章對於設計系學生來說具有很高的參考價值。
當前的工業設計傾向於圓滑和曲線，這種趨勢雖然為眾多產品賦予了一種美感，但卻可能使每個品牌的設計失去獨特性和個性。
車廠仿佛只是在為了跟隨所謂的時尚潮流而努力，只能保留一兩個所謂的經典元素，仿佛是在追求某種形式的前進，而非真正展現品牌的獨特文化和語言。
或許值得思考的是，過去那些在壓抑時期誕生的設
人生如同一場永無止境的旅程，在這旅途中，不斷地追尋意義與存在的價值。
然而，在這漫漫長路上，往往被種種迷惑所困，失去了自我，迷失了方向。
而正是當停下腳步，凝視內心深處時，才能發現那些被忽視的真實。
因為，每一個人的內心都藏著一片迷失的深淵，只有當勇敢地面對自己的內在黑暗，接受自己的脆弱與
複雜 / 簡單 / 幾何 / 構圖 / 點綴
椅子該具備甚麼功能或者概念?做得舒服?還是要有感覺?設計是為了設計?還是為了留下火光.
Complexity / Simplicity / Geometry / Composition / Embellishment
What is
在畫這個時，本來想的是利用動畫原理，在你投入硬幣存錢的當下，壓動下沉的力道，推動畫面使其被動撥放前方的畫面。
畫面可設計又更邁進夢想一步了，又或者是小插畫之類的。但來不急提案就胎死腹中只能自己畫開心。
很多想法都有~~有時就是技術類無法突破，腦中有畫面但就是沒能做出產品去推動，可能跟先天數理較弱
簡單造型的產品能夠給使用者帶來許多好處。一方面，簡單的外觀能讓產品更容易理解和使用，尤其是對於那些沒有使用過類似產品的人來說。這能夠減少使用者的學習曲線，並讓他們更容易上手。另一方面，簡單的外觀也能讓產品更容易維護和保養，因為它沒有過多的細節和零件需要特別處理。
80/20 法則告訴我們僅有 20% 的變因操縱著 80% 的局面，在軟體的產品設計上，也可以利用 80/20 法則來對 UI 與 UX 做優化，這篇文章分享了 80/20 法則在別人產品的應用，以及對於我們自己開發產品時 80/20 法則的實踐。
身為產品經理很常收到來自四面八方的想法，雖然非常歡迎這些好意，卻又不得不作出殘酷的抉擇。對於新產品的構想，哪些概念是有價值的？哪些又是必須捨棄的呢？也許我們可以參考以下三個條件。
今天的主題延續上一篇關於無障礙網站的主題，想要跟大家聊聊關於alt圖片替代文字應該寫些什麼比較好呢？
看完本篇文章你將會收穫：
・什麼是 alt 圖片替代文字
・什麼場合會需要用到alt圖片替代文字？
・alt替代文字的失敗案例
・應該怎麼去寫alt 圖片替代文字？
適合讀者：想進入產品經理的專案經理、剛入門到進階的產品經理和產品設計師
整理來自各個大神推薦的 PM 書單， PM 技能又深又廣，再加上各種領域課程無法每場都參與，所以只能選擇用閱讀來補充相關知識。