在UXUI界面设计中,表单输入框设计组件的对比

用户体验   2022-06-16

我们作为专业的设计咨询公司,已经在研究表单组件设计技巧和交互上积累了10几年,其中不乏一些为大型组织测试了许多表格。表单中经常出现的一个问题是:我的标签字段放在哪里?传统做法是,左对齐标签字段与上对齐输入框,那么随着产品的不断迭代,现在的做法又是怎样,和传统做法对比又何不同?

现在很多产品UI界面中喜欢使用“浮动式标签”,因为Google 的 Material Design在推广。但在这种情况下,我们建议在表单比较长的情况下,还是使用具有以下特征的常规文本字段:
1、清晰明确的告诉用户要输入什么
2、视觉上划分出明显的边界
字段标签表单设计

浮动式标签和传统输入框标签组合形式相比,更好看,更节省空间。但是缺点也很明显:
1、用户输入后立即消失,这可能会让人更难记住输入的用途,尤其是对于有认知障碍的用户;
2、可能被误认为是实际答案,导致用户意外跳过该字段;
3、变灰表示它是一个标签而不是一个答案——但这会使它更难阅读。
4、如果标签文字过长,很容易打破美观度。

再回来看传统的传统输入框标签组合形式,看起来像表单字段,并且标签易于阅读并且随时可用。美学很重要,但是把标签放在输入框里,并不会让它看起来美观多少,然而,能起到的作用缺很有限。

字段标签表单设计

所以我们建议在较少表单的界面里,如登录注册、留言,可以使用浮动式标签的形式,在字段比较多、相对复杂、和多种组合的表单里还是使用上下结构的,就是所谓传统的组合形式。

维好维可-用户体验体验创新设计

联系我们:

关注我们微信

关注我们,持续输出与分享

+86-21-51115850
©2010-2022 维好维可 | 用户体验创新设计咨询公司-版权所有
沪ICP备19006116号-1

请留下您的联络方式
我们将在两个工作日内安排专人与您联系

合作咨询
+86-21-51115850
© 2010-2022  维好维可 | 用户体验创新设计咨询公司
沪ICP备19006116号-1
维好维可-微信二维码