恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
B端基础 | 全套WEB表单设计基础
79.5°
2024-03-08 原创文章 经验/观点 举报 17570 52 218 0

生当作人杰、死亦为鬼雄。敢同恶鬼争高下、不向霸王让寸分。待到早莺争暖树、燕啄泥、花迷眼骑马漫步在浅浅青草堤岸。加油吧!伙其们。


第一部分 | WEB表单设计


在B的设计中、表单是我们最为常见的设计内容。下面我们来学习如何做好表单设计这部分内容。


1、什么是表单


我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。



表单是一种用于收集用户输入的HTML元素,通常用于创建用户与网页交互的表单。表单可以包含各种输入字段,如文本框、复选框、单选按钮、下拉列表和提交按钮等。当用户填写表单并提交后,数据将被发送到服务器进行处理。在web开发中,表单是实现用户交互和数据收集的重要手段之一。


1.1、常见应用场景


在我们的后台系统中、我们表单在70%的场景上都会使用到。采集录入数据信息、编辑数据信息等。如我们SaaS管理平台的学员录入、档案查询、奖励规则设置等。


2、表单设计原则


设计原则是任何一种解决方案的指路灯。我们在表单的设计中需要遵循以下原则、简洁明了、清晰高效、适应业务、及时反馈。



2.1、简洁明了


表单的设计应该简洁明了,避免过多的装饰和元素干扰用户填写表单。


2.2、清晰高效


表单中的各个字段和选项应该清晰可见。用户应该能够快速找到需要填写的字段和选项,并且填写过程中不会遇到过多的困难。


2.3、适应业务


应该符合我们的业务应用场景、满足我们的业务需求。


2.4、及时反馈


在用户填写表单的过程中,应该提供适当的反馈,例如输入验证、错误提示等,以便用户能够及时了解自己的输入是否正确。


3、表单构成


我们通常的表单都基本都是由、标签、域、提示、操作按钮这四个部分构成的。


3.1、标签


标签文本主要是解释输入项的含义,一般不宜太长,需要简明扼要,快速让用户理解。输入框标签在布局上可以分为左标签、顶标签、行内标签。这三种设计在许多情况下可以提高可读性和用户友好性,但也有一些潜在的缺点。


3.1.1、左标签

优点:可读性强、减少用户的认知负担。布局直观、提高填写速度。

缺点:不适合长标签、对业务场景适用性差。


3.1.2、顶标签

优点:节省空间、减少表单的长度和宽度。视觉层次清晰。

缺点:需要额外的间距、纵向空间利用率不高


3.1.3、行内标签

优点:节省空间、简洁易于阅读

缺点:可读性有限、对于长标签或复杂内容可读性降低、不适合大部分的场景。


3.2、域


表单的域表示的是一个空间。这个空间里可以是输入内容、选择内容、选则时间、选择数值、触发交互按钮(上传资料)等


3.3、提示


避免废话、给出结果以及处理方式。


3.4、按钮


一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。

在我们系统设计里。我是更愿意把按钮放在页面的底部。至于为什么可以看一下、我之前的《按钮的基础设计知识的文章》


4、设计细节


除了上面表单的基础知识外,为了我们表单设计的更好我们就需要在细节上下功夫了。毕竟优秀的设计师注重细节的表现的。


4.1、表单里标签后的冒号要不要加


最初是因为屏幕显示的原因所以才加的冒号、随着技术的进步。现在可加可不加。系统内统一就行。


4.2、如何设定输入框的宽度


输入框的宽度是自适应的、输入框的宽度是有暗示左右的。在真实场景中,大部分输入框是存在理想长度的,那么就应该向用户暗示所需输入内容的长度来减轻判断负担。下图就是典型案例,一个实际不需要花多少钱的金额输入框在左图中进行等宽处理,反而容易误导用户对输入金额的判断,造成一种不安全感。

                      

4.3、表单布局


在表单中我们采用多种布局方式。信息分组、内容列表、标签页、分步骤。在信息传递上。这集中布局方式本质都是一样的。将信息进行分类展示。来更好效的进行信息的传递和展示。理论支持、格式塔原理

我们如何选则适用那种布局方式呢。很简单需要展示内容的多少。


第二部分 | 表单交互


为了让我们表单的用户体验做到极致、我们还有注意这些交互上的细节。做好这些细节将大幅提升我们的用户体检。


1、错误提示


验证用户输入活提交信息是否正确、验证方法有三种、实时、提交后、服务器。因为他们时效性不同所以应用的场景也不同。

错误提示要适用积极地的语言、不清楚的告诉用户存在哪里、要如何修复。

2、更智慧、高效


之前好像看过一个什么定律忘了。他的大致意思是,如果系统能处理的问题尽量让系统去处理、不用留给用户去操作。


2.1、简化输入智能默认


如果可以带出来的信息可以尽力带过来。


满足多数人需要的地方放置选择,来帮助用户作出明智选择。互联网表单中有很多地方能利用智能默认减少必要的选择次数,加速表单完成过程。


2.2、个性化默认


保留用户登陆信息、重复填写内容。例如、之前去医院需要手机登陆的那段时间。在去过一次后。扫完填写信息制药填一个名字、其他信息都带出来了。


2.3、及时新增


我们在满足大部分用户的同时、在某些场景里还要提高额外的输入框给需要的人用。同时不会阻碍不需要的人。这类输入框常常被作为高级选项或者额外选项。


3、结构


一个结构充分的表单就像一个与用户的良好对话。所以记住这一点,仔细规划结构。


3.1、从简单开始到创建逻辑分类


从简单问题开始,用户已经很清楚答案了。将不相关的信息按逻辑分组展示。来帮助用户理解。


3.2、单步、多步、单列、多列


至于这些的方式的选择、总的来说还是信息呈现多少的不同。单步的转化率更高。但多步却更适合复杂信息的收集。


单列和多列基本也是一样的道理



第三部分 | 最后


守的莲开结伴游、约开萍叶上兰舟。每次写完一篇文章、都会有所收获。希望能和优秀的你一起前行。这里都是打工族纯一线设计师、也许能够帮助你。






Powered by Froala Editor

更新:2024-03-08

收藏

52人已收藏

KiNG UXD

我从山中来,带着兰花草。种...

  • 13

    作品

  • 37

    粉丝

  • 3

    关注

  • B端基础 | SaaS表格实战优化设计
  • B端基础 | 表格基础设计浅谈02
  • B端基础 | 表格基础设计浅谈01
  • B端基础 | 弹窗设计基础知识

    猜你喜欢

      2024-03-08 原创文章 经验/观点 举报 17570 52 218 0

      B端基础 | 全套WEB表单设计基础

      79.5°

      你确定要举报B端基础 | 全套WEB表单设计基础

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2024年03月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      218
      52
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录