必考考点!这些表单设计的基本准则你都知道嘛?

Date 2025-02-27 18:53:32

表单可能是日常用户界面设计中最常见的设计元素。其广泛的应用和多年的积累使得表单设计涉及到大量的常规设计规则。今天,让我们来谈谈这些最常见的表单设计标准~

表单可能是日常用户界面设计中最常见的设计元素。其广泛的应用和多年的积累使得表单设计涉及到大量的常规设计规则。今天,让我们来谈谈这些最常见的表单设计标准~

无论是注册网站还是内容输入,表单的UI控制都是不可避免的。表单几乎是每个数字产品不可避免的组成部分,其作用几乎是不可替代的。然而,表单的控制器应用广泛,涉及各个方面。因此,请注意,我们在今天的文章中提到的设计标准只是一般标准,每个标准实际上都有例外。然而,作为一般标准,它们可以很好地引导您设计一个可用的表单。同时,作为一名设计师,您还需要根据实际情况灵活调整细节。

接下来,让我们来看看这些标准包含了什么。

尽量使用单列设计

1-XhzxeTnAuWoaeJmlPBP0bw.jpeg

多列表单容易分散人们的注意力,不能完全垂直浏览一口气完成填写。

顶部标签对齐

2.jpeg

标签和输入框垂直排列在左对齐的设计比两者并排放置更好。一方面,这种设计在桌面和移动端都足够友好,另一方面,这种设计可以更好地兼容不同类型和长度的标签,方便用户的垂直扫描。然而,标签放置在输入框左侧的设计也有其优点:布局更紧凑,表单长度被压缩,显得更短,这可能是一个更好的选择在特定的页面布局需求。

相关标签和输入框

3.jpeg

使相互关联的标签和输入框更接近,组成分组,使不同的分组保持相对较大的距离,以确保用户不会感到困惑。

避免全大写字母

4.jpeg

所有字母大写都很难阅读和快速扫描。

展示不到6个选项

5.jpeg

当表格中需要选择不同的选项时,不要使用不到6个选项选择拉框,因为下拉框需要两次点击才能完成结果,直接选择更快。当超过5个选项时,选项太多,适合下拉框的显示形式。

避免使用标签作为占位符

6.jpeg

为了使布局更加紧凑,将标签作为占位符放置在输入框中是非常有吸引力的,但存在一些可用性问题:让一些用户困惑内容已经填写;点击输入时占位符消失,一些用户会忘记输入内容属性。

复选框应纵向排列

7.jpeg

纵向排列复选框让用户扫视内容更快,便于选择。

表达清晰的行为召唤按钮

8.jpeg

行为召唤按钮中的标签必须使用简短而清晰的词语,以便用户能够明确行为的意图和功能。

指出错误的内容

9.jpeg

当用户填写内容错误时,应指出错误的项目和错误的原因。

在用户填写后进行验证

10.jpeg

除输入过程中需要实时验证外,用户输入后还应验证内容的格式和属性。此时,尽量避免使用嵌入式验证。

不要隐藏基本的帮助文本

11.jpeg

直接显示基本的帮助文本,除非你的帮助文本超过100个单词,信息量太大。如果帮助文本内容过长,建议将其放置在靠近标签或输入框的地方,并在光标悬挂时显示。

区分主操作和次操作

12.jpeg

主要操作和次要操作应根据使用场景和需要进行分析和区分。

内容长度与输入框长度对应

13.jpeg

上一篇:想做出高大上的海报/PPT?

下一篇:并不简单!网页中为你指路的面包屑到底应当怎么使用?

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计

Floating Image