近期於前端開發時常會被 PM 要求先提個 Mockup 來看看呈現效果之類的。有鑑於公司目前的人力配置一直沒有規劃到 UI / UX 這個領域,那就自己下來碰碰看吧。這篇筆記的是六角學院的 UI 設計入門:畫出有程式邏輯的設計稿 中關於如何藉由改變頁面狀態來提升使用者體驗。
課程相關資訊
[連結]:https://courses.hexschool.com/courses/724307/lectures/13039055
本篇範圍:Chapter 7 ( 原子設計第四階段:模板 ) ,一共有 13 篇
請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。
筆記
1. 可以被使用者操作的介面,就會有狀態的差別。所以在設計上就得去規劃這些狀態的呈現,才能打造一個顧及使用者體驗的好產品
2. 狀態可分為:Ideal ( 理想 ) , Empty ( 空白狀態 ) , Error ( 錯誤狀態 ) , Partial ( 局部資料 ) , Loading ( 載入中狀態 ) , Maximum ( 極限狀態 )
3. Ideal ( 理想 ) 是最原始的狀態,也是稿件最為一開始的狀態
4. 空白狀態:第一次使用、空白、清除資料、搜尋不到內容
5. 局部資料:僅有少數資料的狀態,像是完成到一半的表單填寫…等
6. 標題文字和搜尋結果需要避免內文過長