表单设计（web表单设计）

本文目录一览：

• 1、提高用户体验的八种表单设计技巧
• 2、航天桥北大青鸟分享提高用户体验的八种表单设计技巧？
• 3、有哪些表单设计的注意事项?

提高用户体验的八种表单设计技巧

表单功能无论是在网页设计还是app软件开发领域都得到了大量的使用。今天昆明北大青鸟就一起来了解一下，符合用户体验的表单设计需要满足哪些条件。

1、表单标签需采用合适的展现形式根据表单的运用场景，标签应采用对应的展现形式，常见的展现形式有以下三种：左标签、顶部标签、行内标签。

A. 左标签在一些网页表单当中，标签局左是常见的一种形式。左标签的展示形式给人一种秩序感，也便于用户在填写表单的过程中快速的辨别标签内容。左标签的这种形式一般用于网页当中，不适合在手机端或者小屏下的移动端出现，因为小屏幕的尺寸有限，标签居左会占用较大的空间，输入框就会受限。

B. 顶部标签顶部标签指的是标签位于输入框上方，这种形式一般出现在一些移动端当中。顶部标签可以使输入框的宽度变大，用户在填写信息也可以比较得到完整的展示。但这种布局方式也有一个缺不好的点，就是这个表单可能需要滚屏，用户才可以看完。

C. 行内标签行内标签常常出现在手机端的注册界面当中，这样的设计可以节省页面空间，所以大部分app的界面设计都采用这样的设计。当然，部分网站pc端的表单设计中也会用到这种设计。

2、英文标签避免全部大写一些英文界面的表单设计，我们要避免标签的全大写。全部大写的标签容易造成阅读和浏览上的困难。

3、特殊标签需使用合适的输入框长度对于特定的标签，像验证码、邮编这样的标签，在设计的时候需要采用合适的输入框长度。毕竟这样的输入框是用户可预见的，所以输入框的长度可以不需要太长。

4、复选框排列需注意在表单中常出现复选框的设计，这样的情况需要特殊处理。比如在注册的过程中，会有性别的选择，所以通常设计该表单的时候我们会将男女横排在一行。但是对于内容多的情况下，就建议采用竖排的排序方式。

5、主按钮和辅按钮需要明确的区分在表单提交的时候，出现多个按钮的情况下，需要做明确的区分，这样有利于用户在操作过程中方便辨别操作步骤。

航天桥北大青鸟分享提高用户体验的八种表单设计技巧？

表单功能无论是在网页设计还是app软件开发领域都得到了大量的使用。

今天航天桥北大青鸟就一起来了解一下，符合用户体验的表单设计需要满足哪些条件。

1、表单标签需采用合适的展现形式根据表单的运用场景，标签应采用对应的展现形式，常见的展现形式有以下三种：左标签、顶部标签、行内标签。

A.左标签在一些网页表单当中，标签局左是常见的一种形式。

左标签的展示形式给人一种秩序感，也便于用户在填写表单的过程中快速的辨别标签内容。

左标签的这种形式一般用于网页当中，不适合在手机端或者小屏下的移动端出现，因为小屏幕的尺寸有限，标签居左会占用较大的空间，输入框就会受限。

B.顶部标签顶部标签指的是标签位于输入框上方，这种形式一般出现在一些移动端当中。

顶部标签可以使输入框的宽度变大，用户在填写信息也可以比较得到完整的展示。

但这种布局方式也有一个缺不好的点，就是这个表单可能需要滚屏，用户才可以看完。

C.行内标签行内标签常常出现在手机端的注册界面当中，这样的设计可以节省页面空间，所以大部分app的界面设计都采用这样的设计。

当然，部分网站pc端的表单设计中也会用到这种设计。

2、英文标签避免全部大写一些英文界面的表单设计，我们要避免标签的全大写。

全部大写的标签容易造成阅读和浏览上的困难。

3、特殊标签需使用合适的输入框长度对于特定的标签，像验证码、邮编这样的标签，在设计的时候需要采用合适的输入框长度。

毕竟这样的输入框是用户可预见的，所以输入框的长度可以不需要太长。

4、复选框排列需注意在表单中常出现复选框的设计，这样的情况需要特殊处理。

比如在注册的过程中，会有性别的选择，所以通常设计该表单的时候我们会将男女横排在一行。

但是对于内容多的情况下，就建议采用竖排的排序方式。

5、主按钮和辅按钮需要明确的区分在表单提交的时候，出现多个按钮的情况下，需要做明确的区分，这样有利于用户在操作过程中方便辨别操作步骤。

有哪些表单设计的注意事项?

一、表单设计的注意事项——保持秩序

1. 单柱浏览

表单的主要功能是向用户清楚地传达信息。保持单列表单的顺序更有利于用户的浏览。它帮助用户识别和填写内容。但是，多列表单会破坏用户填写规则，影响效率。

2. 垂直布局

当表单中有多个选项供用户选择时，将每个选项垂直放置在每个选项下会使用户更容易阅读和浏览。

3.一致的操作

填写表单时，避免在填写过程中更改按钮的样式和颜色。一致的操作行为需要用户的确认，可以有效减少用户在操作时的困惑和犹豫，保证用户在填写表单过程中的顺畅体验，从而实现最终的业务交易结果。

二、表单设计的注意事项——描述很清楚

1. 标题不可替换

虽然使用占位符而不是标题扩展了表格的填充空间并减少了视觉干扰，但这种方法不利于用户的短期记忆。一旦用户触发输入并且占位符消失，用户可能会对这里要填写的内容感到困惑。您必须删除所有输入，然后才能再次显示标题。显然，这是违反人性的。

2. 输入字段符合预期

输入字段的长度与预期的输入内容成比例，以保证输入字段的长度符合用户的心理期望，并能在形式上得到充分的体现。

3.不要隐藏基本的帮助信息

用户在购买过程中有明确的需求确认和信息收集。因此，在设计过程中，应强调或显示用户填写表单的基本帮助信息，避免因隐藏帮助信息而引起客户投诉。

以上便是关于表单设计的注意事项介绍了，希望它能帮助我们开拓，并确定属于我们自己的设计风格，这一点非常重要。如果您想了解更多关于ui设计的相关设计技巧及素材等，也可以点击本站的其他文章进行学习。