[[表单设计 Forms Design.canvas]] ## 概念 - 十分重要，占据了桌面端 70%的设计工作。 ## 最佳实践 - [ ] 仔细审视信息，去除不必要的字段。 - 不同的信息量，有时候会影响到界面的布局。 - [ ] 长话短说 - 消除不必要的字段需要更多的时间，可以减少的用户工作量和提高的完成率，这件事值得。 - [ ] 进入表单时，自动聚焦第一个输入框，减少用户操作。 - 例如进入聊天详情页。 - 例如创建了一个新的表单。 - [ ] 在表单中不要随意出现红色的提示，会让人觉得是错误。 - 我在拉钩获取验证码，突然用红色提示我验证码已发送，我第一反应是咋地又错了。 - [ ] 智能化 - [ ] 用户输入明显不合理的数据，要给出反馈，例如电话格式不对。 - [ ] 实时反馈 ### 有用的水印提示  ### 标签位置 - 左对齐 - 顶对齐 - 右对齐 - 行内标签 - 悬浮标签 ### 合理的反馈 [[反馈设计 FeedBack Design]] ### 正确的输入类型 ![[Pasted image 20210907143306.png]] 不要什么都用文本字段！使字段的类型适应其内容。有许多内容类型具有特定的要求，需要特殊处理。以下是一些例子: - Phone number 电话号码 - Credit Cards 信用卡 - Website URLs 网站地址 - Countries 国家 - Dates 日期 - Colors 颜色 ### 突出限制 ![[Pasted image 20210907152216.png]] 大多数领域都有某种限制。字符限制、号码/日期范围、电话号码等。提前让用户意识到限制，以防止他们感到沮丧。现在就到这里吧，伙计们！ ## 资源 - [关于保存功能的设计，这篇可能是最全的总结！ - 知乎](https://zhuanlan.zhihu.com/p/49941122) #设计模式/表单保存 - [Label Placement in Forms :: UXmatters](https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php) 3 个标签位置的测试时长 - [[【超干货】B 端设计指南-表单篇]] - [[Mia 页面-表单设计]] - [Web表单设计——你不知道的冷知识 (qq.com)](https://mp.weixin.qq.com/s/eKLrUCsm2W12RORNdjqwUA?inApp=true&exportTheme=dark&isTablet=0) - [[网页表单设计的最佳实践]] - [Top UI & UX Tips to Design Better Forms (uidesign.tips)](https://www.uidesign.tips/blog/top-ui-ux-design-tips-for-better-forms)