BEST PRACTICES FOR FORM DESIGN
https://static.lukew.com/webforms_lukew.pdf
Top Aligned Labels
-
定案：
-
有限的宽度
-
Input 数量不多
-
需要更多的高度空间
-
从上到下的扫描，非常顺
-
Label 空间较多，合适语言替换（有些语言比较长对比英文）
-
适合新手或不长使用的用户
https://uxdesign.cc/everything-you-need-to-know-about-form-design-16ce7b5a227f -
强制用户一定要读 label
Right Aligned Labels
-
定案：
-
在复杂同时多 input 的情况下使用
-
在 create 时使用。因为用户需要快速扫描 label
-
用户需要用 z 字形的方式扫描，不方便
-
无需额外高度，对比 top align
Left Aligned Labels
-
定案：
-
Edit 时使用。
-
用户需要快速扫描 label
-
找到 label 后要去找 input，会有一段距离
-
某 ERP 项目用了 dash 去连线
-
用户扫描 label 非常快
-
无需额外高度，对比 top align
Required Form Fields
-
小部分是 required 就放 required
-
小部分是 optional 就放 optional
Field Lengths
-
定案：
-
宽度依据内容而定
-
3x, 4x, 5x 个字
-
30% 预算给 number
-
用户通过 input 宽度判断要输入的内容长度
Content Grouping
-
组合可以把不同类型的内容给区分，让用户容易去区分表格内容
-
重要的可以被组合在一起，同时放在第一个位置
-
使用最少的视觉元素来传达有用的关系（尽可能的少用元素在组合排版），参考一下图片
Actions
-
操作分为重要和次要
-
次要包括：取消，回头，重设
-
重要包括：保存，继续，提交
按钮怎么摆放？
-
A，B，C 比较好，因为用户移动视线在一个范围
-
注意：场景都是 top align
-
按钮摆放在 input 的下面
Help & Tips
-
用户不清楚表单提问什么，或是要填写什么时，这能帮助
-
提示填写内容格式
-
太多提示会让表单很混乱
Automatic inline exposure
-
Focus 后出现提示，这样表单干净
User-activated inline exposure
-
点击或者悬停 icon 显示
Interaction
Path to Completion
-
Remove Unnecessary Inputs
-
Smart Defaults
-
flexible data entry
-
清晰的完成路径
Tabbing
-
Tab 功能可以加快填写表格，尤其是第二次填写时
-
用户可以不用滑鼠操作
-
让用户明确知道 tab 去下一个的地方
-
所有能点击的都能够被 tab
-
Shift + tab 也是需要被重视的
Progressive Disclosure
-
空间有限，通过操作去展现内容
-
整洁排版，让影响排版的内容隐藏
-
用户不一定看完你所有的内容，隐藏内容是最好的方法
-
方法
-
Advanced option
-
Dialog
-
渐进式披露：Step by step 去显示内容
Selection Dependent Inputs
-
没有明白
Feedback
Inline Validation
-
用户在操作时，马上给出反应，让用户安心
-
当在做 unique 时，每 key up 一个字就马上做出反应，这样用户就能安心
-
Autocomplete 和 dropdown 能让用户不用去烦恼要填写什么
-
显示字数，因为用户不会在填写时同时去计算
Errors
-
错误提示需要容易被发现，可以通过
-
明显的颜色
-
粗大的文字
-
Scroll to position
-
背景换成警告色
-
清晰解释错误信息
-
放置一些 icon，让色盲的用户可以很好区分
https://uxdesign.cc/everything-you-need-to-know-about-form-design-16ce7b5a227f
Progress
-
要等待的地方需要让用户知道，比如上载图片，ajax 加载……
-
Disabled 提交按钮已阻止用户操作
Success
-
明确的给出完成表单的反馈信息
