vc6.0mfc中单选按钮如何分组_UI进阶干货如何做好表单设计？

最新推荐文章于 2023-12-25 21:16:19 发布

weixin_39725154

最新推荐文章于 2023-12-25 21:16:19 发布

阅读量208

点赞数

文章标签： vc6.0mfc中单选按钮如何分组表单提交php404错误

随着B端的兴起，和表单打交道的人也越来越多，那么作为设计师，如何设计出来好的表单呢？

本文将根据在B端产品设计中踩过的坑整理出来，目的是为了帮助那些刚迈入职场的设计师，对表单能有一个更好的了解，从而避免在工作中进入误区。

1、表单的结构 表单通常可以被拆解成三个最基本要素：标签(标题)、输入框和按钮。

标签(标题)：是用来告诉用户这个列表项是什么的；
输入框：是供用户完成信息录入的，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
按钮：是供用户完成信息录入后点击进入下一个流程的，包括提交按钮、保存按钮、复位按钮和一般按钮。

2、标签 根据标签对齐的方式，通常分为：左标签、顶标签和行内标签。

左标签在B端设计表单中来说是最常见的一种标签样式，特别是在PC端。因为 pc 端，横向空间很大，需要考虑到协调的关系如果采用上下结构，在内容过多的情况下，就会出现重心偏左的视觉效果。

顶部标签是指位于输入框上方的标，一般常用于内容较少或标签名称较长时，需要考虑纵向空间占比，方便展示全部内容。

行内标签：行内标签又可以称为提示性文字，主要用于提示用户应该输入什么内容。但当用户输入的内容较多时，通常会忘记提示语，需要删除已输入内容才能显示提示语。所以行内标签通常用于简单输入框，如登录、注册。

3、输入框 3.1选择合适的输入框 输入框的作用是供用户完成信息录入的，包含文本框、密码框、隐藏域、多行文本框、复选框等。在这里我们需要注意一点，因为有许多设计师在这里会因为偷懒而都采用了文本框，将会导致开发会全部按照文本框的样式开发，这样的体验将会是非常差的。输入框我们需要根据实际应用场景选择合适的组件样式。在这里就不一一细说了。 3.2输入框的尺寸 用户通常会根据输入框的宽度，来判断输入内容的多少，所以在做输入框设计，需要根据需要输入内容的长度，来决定输入框的宽度。在Ant Design上，对输入框定义了三种尺寸(大、默认、小)，高度分别为 40px、32px 和 24px。不过我们可以更加项目的实际情况设计高度

4、按钮 4.1 按钮的位置 按钮的摆放位置是设计师在设计表单时常常纠结的一个问题。其实在14世纪西方活字印刷术的发明人约翰·古腾堡提出一个概念古腾堡法则(Gutenberg Diagram)，又称对角线平衡法则。它指出用户在浏览页面或一些布局时，视线往往趋向于从左上角到右下角进行扫描。左上角是第一视觉落点区(主视区)，而右下角是最终视觉落点区(终点区)。与之相对，右上角和左下角则是视觉盲点。用户的视觉移动端规则是从上到下，从左到右。 4.2 按钮的主次 根据操作的主次，我们需要对按钮在视觉做主次设计、突出主操作按钮，弱化次操作。

5、表单布局 在进行表单设计时，我们需要根据实际的业务场景，选择合理的布局样式。 5.1 单列布局 在实际业务中当表单字段较为简单且时可使用，表单字段至上而下单列排列布局，用户只需纵向阅读填写，填写完成率较高。注意：当需要用户输入内容较多时，我们可以将信息进行整理与拆分，一步一步引导用于去输入，比一次线将所有内容都展示出来，用户更容易接受。

5.2 多列布局(较复杂) 垂直空间有限并且表单含有较多填写字段的复杂表单时，可将具有相关联字段放在一个卡片区域中进行归类，将多个字段组合在一行，形成多列排布的暗提示帮助用户更好理解。

5.3 区域分组布局(复杂)

表单含有较多填写字段的复杂表单，可将具有相关联字段进行分类并以标题区分的形式进行字段分组，并且表单字段都在一个卡片区域内。

6、表单设计中的注意事项 6.1 尽可能将提升语展示出来 在B端产品主要讲究的是工作效率，所有用户很少会关注问号，只会关注自己需要填写信息。所以我们在做表单设计时，需要尽可能将提示语展示出来。

6.2 及时反馈结果 用户在完成表单填写，并提交后，需要及时给用户反馈，比如完成提交时的祝贺，提交失败时的原因。

并且提交失败时，一定要将之前所填写好的数据保留下来！！！不要让用户输入第二次！！！ 6.3 容错性设计 在理想状态下，用户填写完表单信息，然后点击“提交”按钮，系统显示提交成功。但是，现实情况却是用户在填写过程中经常会发生错误，所以我们在做表单设计时需要将容错性原则融入其中。如我们进行邮箱时，可以展示可选邮箱后缀，避免了用户手动输入造成的错误。 能让系统完成的任务，就尽量不要让用户来操作 。

6.4 关于必填项 大多数情况下，一般用“*”标记必填字段。但星号并不适合所有类型的用户，记得我曾经为一家服装公司做ERP系统设计，在进行产品演示时，一个用户就问我星号是表示输入错误的意思吗？因为当时大多数的用户的年龄在40多岁，在他们的印象中红色就表示错误的含义。为了避免这种误解，可采用文本框内暗提示。它也是一个比较清晰标志必填项的方式，并且还很节省空间，同时也可以减轻视觉负担。