常见问题: 在设计表单时,你是否会有如下疑问或思考:
一、表单设计原则
二、表单的组织
三、标签对齐每个表单至少都有三个基本要素:标签、输入框和动作。 标签负责提出问题,输入框供给人们填写信息,而动作允许人们提交答案,还有一类——无标签表单。 1. 顶对齐标签顶对齐标签由于输入框和标签的位置非常近,处理起来毫不费力,所以填写整个表单很快很容易,是最能减少填写时间的方式。 顶对齐标签还提供了大量的横向空间,可以扩大或收缩标签文字,而不会对整个页面的布局产生负面影响。大量横向空间可用于以多种方式组合相关输入框。 但是,顶对齐标签也会占用额外的垂直空间,若可使用的垂直屏幕空间较小,应当谨慎使用顶对齐标签。 顶对齐标签还应当采用合适的垂直间距。表单输入框之间的间距太少或太多都会阻碍移动。一般而言,最好使用输入框50%~75%的高度作为相邻输入框的间距。 2. 右对齐标签右对齐标签同样有输入框与标签相邻的有点,因此也能快速填完且减少垂直屏幕空间的占用,但是速度没有顶对齐快。 由于右对齐布局造成左侧参差不齐,会降低快速浏览表单问题的效率,还会产生灵活性问题,如果标签需要两行字,浏览表单会更加困难。 3. 左对齐标签如果人们不熟悉表单要收集的数据,或者问题无法分成易处理的内容组,左对齐标签浏览表单问题会更容易,只需上下浏览标签左栏,不会被输入框打断。 三种方案中,左对齐表单填写速度最慢,人们一般将左对齐布局中的标签与相应输入框联系起来,只是花费时间较长。 但是,完成时间较长也不是坏事,也有适用场景。如果希望人们速度放慢,并仔细思考表单中的每个输入框,特别是表单含有大量可选输入框、类似“使用偏好”或者高级设置陌生数据时。 4. 输入框内的标签如果屏幕空间宝贵,应当将标签和输入框组合成单一的用户界面元素。光标放入输入框时,标签要迅速消失,以便用户能轻松填写。 填写输入框时,输入框内的标签会消失,因此答案情境也会消失;如果忘记了要回答什么问题或者检查答案时,体验也是不好的。 因此,如果表单较长、甚至中等长度,输入框内标签并不是好的解决方案。输入框内标签更适合用于只有一个问题(例如,搜索框)或者几个输入框的表单或者问题非常熟悉的表单(例如,通讯录) 四、输入框表单中何时使用文本框、复选框、单选按钮、下拉菜单、列表框呢?
五、动作标签列出表单要求人们回答的问题,输入框让人们填写答案,完成表单的单一职责属于动作。
六、帮助文字常见帮助文字是在标签或输入框旁增加帮助文字,告诉应该如何回答问题。 帮助文字最合适解释人们不熟悉的数据,例如,为什么要问这些问题、安全和隐私、建议回答问题的方式及说明可填项。
七、即时验证直接反馈有助于再次确保人们的回答有效。这种实时的沟通方式即为即时校验(Inline Validation)。
八、多余输入/额外输入
总结表单的设计方式多种多样,不能完全按照设计规则来进行产品设计,需要具体分析应用场景,填写情境来设计。 感谢各位花费时间来阅读,希望对您有帮助!
作者:pabo呀,技术转产品一枚;公众号:一米八的姜pabo 本文由@pabo呀原创发布于人人都是产品经理,未经作者许可,禁止转载 |
|
来自: 昵称69894743 > 《交互设计/规范》