近期於前端開發時常會被 PM 要求先提個 Mockup 來看看呈現效果之類的。有鑑於公司目前的人力配置一直沒有規劃到 UI / UX 這個領域,那就自己下來碰碰看吧。這篇筆記的是六角學院的 UI 設計入門:畫出有程式邏輯的設計稿 中關於「Form 表單」的介紹。
課程相關資訊
[連結]:https://courses.hexschool.com/courses/ui/lectures/13038990
本篇範圍:Chapter 5 ( 原子設計第二階段:分子 ) ,一共有 13 篇
請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。
筆記
1. 蒐集使用者資訊的重要元件,可以用於登入、回饋、填寫個資…等需要提供資料的流程
2. 表單多半會由輸入格、複選框、單選按鈕、下拉選單、提示訊息和按鈕一同組成
3. 表單一般會盡量使用單列的設計,避免使用者的視線混淆
4. 標籤統一放於表單上頭
5. 提示文字是不能取代文字標籤的
6. 輸入格長度要呼應內容
7. 不隱藏幫助文字
8. 區分選填和必填
9. 表單驗證是相當重要的環節,由提示文字、圖示和顏色組成變化