全套WEB表单设计基础

2024-10-23    蓝蓝小助手 移动端UI设计文章及欣赏

 
 
B端基础 | 全套WEB表单设计基础
第一部分 | WEB表单设计
在B的设计中、表单是我们最为常见的设计内容。下面我们来学习如何做好表单设计这部分内容。
1、什么是表单
我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。
B端基础 | 全套WEB表单设计基础
 
 
表单是一种用于收集用户输入的HTML元素,通常用于创建用户与网页交互的表单。表单可以包含各种输入字段,如文本框、复选框、单选按钮、下拉列表和提交按钮等。当用户填写表单并提交后,数据将被发送到服务器进行处理。在web开发中,表单是实现用户交互和数据收集的重要手段之一。
 
1.1、常见应用场景
在我们的后台系统中、我们表单在70%的场景上都会使用到。采集录入数据信息、编辑数据信息等。如我们SaaS管理平台的学员录入、档案查询、奖励规则设置等。
B端基础 | 全套WEB表单设计基础
 
 
2、表单设计原则
设计原则是任何一种解决方案的指路灯。我们在表单的设计中需要遵循以下原则、
简洁明了、清晰高效、适应业务、及时反馈。
B端基础 | 全套WEB表单设计基础
 
 
2.1、简洁明了
表单的设计应该简洁明了,避免过多的装饰和元素干扰用户填写表单。
 
2.2、清晰高效
表单中的各个字段和选项应该清晰可见。用户应该能够快速找到需要填写的字段和选项,并且填写过程中不会遇到过多的困难。
 
2.3、适应业务
应该符合我们的业务应用场景、满足我们的业务需求。
 
2.4、及时反馈
在用户填写表单的过程中,应该提供适当的反馈,例如输入验证、错误提示等,以便用户能够及时了解自己的输入是否正确。
 
3、表单构成
我们通常的表单都基本都是由、标签、域、提示、操作按钮这四个部分构成的。
B端基础 | 全套WEB表单设计基础
 
 
3.1、标签
标签文本主要是解释输入项的含义,一般不宜太长,需要简明扼要,快速让用户理解。输入框标签在布局上可以分为
左标签、顶标签、行内标签
。这三种设计在许多情况下可以提高可读性和用户友好性,但也有一些潜在的缺点。
B端基础 | 全套WEB表单设计基础
 
 
3.1.1、左标签
优点
:可读性强、减少用户的认知负担。布局直观、提高填写速度。
缺点
:不适合长标签、对业务场景适用性差。
 
3.1.2、顶标签
优点
:节省空间、减少表单的长度和宽度。视觉层次清晰。
缺点
:需要额外的间距、纵向空间利用率不高
 
3.1.3、行内标签
优点
:节省空间、简洁易于阅读
缺点
:可读性有限、对于长标签或复杂内容可读性降低、不适合大部分的场景。
 
3.2、域
表单的域表示的是一个空间。这个空间里可以是
输入内容、选择内容、选则时间、选择数值、触发交互按钮(上传资料)
B端基础 | 全套WEB表单设计基础
 
 
3.3、提示
避免废话、给出结果以及处理方式。
B端基础 | 全套WEB表单设计基础
 
 
3.4、按钮
一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。
在我们系统设计里。我是更愿意把按钮放在页面的底部。至于为什么可以看一下、我之前的《按钮的基础设计知识的文章》
 
4、设计细节
除了上面表单的基础知识外,为了我们表单设计的更好我们就需要在细节上下功夫了。毕竟优秀的设计师注重细节的表现的。
B端基础 | 全套WEB表单设计基础
 
 
4.1、表单里标签后的冒号要不要加
最初是因为屏幕显示的原因所以才加的冒号、随着技术的进步。现在可加可不加。系统内统一就行。
B端基础 | 全套WEB表单设计基础
 
 
4.2、如何设定输入框的宽度
输入框的宽度是自适应的、输入框的宽度是有暗示左右的。在真实场景中,大部分输入框是存在理想长度的,那么就应该向用户暗示所需输入内容的长度来减轻判断负担。下图就是典型案例,一个实际不需要花多少钱的金额输入框在左图中进行等宽处理,反而容易误导用户对输入金额的判断,造成一种不安全感。
B端基础 | 全套WEB表单设计基础
 
 
4.3、表单布局
在表单中我们采用多种布局方式。
信息分组、内容列表、标签页、分步骤。
在信息传递上。这集中布局方式本质都是一样的。将信息进行分类展示。来更好效的进行信息的传递和展示。理论支持、格式塔原理
B端基础 | 全套WEB表单设计基础
 
 
我们如何选则适用那种布局方式呢。很简单需要展示内容的多少。
 
B端基础 | 全套WEB表单设计基础
 
 
第二部分 | 表单交互
为了让我们表单的用户体验做到极致、我们还有注意这些交互上的细节。做好这些细节将大幅提升我们的用户体检。
B端基础 | 全套WEB表单设计基础
 
 
1、错误提示
验证用户输入活提交信息是否正确、验证方法有三种、实时、提交后、服务器。因为他们时效性不同所以应用的场景也不同。
B端基础 | 全套WEB表单设计基础
 
 
错误提示要适用积极地的语言、不清楚的告诉用户存在哪里、要如何修复。
 
2、更智慧、高效
之前好像看过一个什么定律忘了。他的大致意思是,如果系统能处理的问题尽量让系统去处理、不用留给用户去操作。
B端基础 | 全套WEB表单设计基础
 
 
2.1、简化输入智能默认
如果可以带出来的信息可以尽力带过来。
B端基础 | 全套WEB表单设计基础
 
 
满足多数人需要的地方放置选择,来帮助用户作出明智选择。互联网表单中有很多地方能利用智能默认减少必要的选择次数,加速表单完成过程。
 
2.2、个性化默认
保留用户登陆信息、重复填写内容。例如、之前去医院需要手机登陆的那段时间。在去过一次后。扫完填写信息制药填一个名字、其他信息都带出来了。
B端基础 | 全套WEB表单设计基础
 
 
2.3、及时新增
我们在满足大部分用户的同时、在某些场景里还要提高额外的输入框给需要的人用。同时不会阻碍不需要的人。这类输入框常常被作为高级选项或者额外选项。
B端基础 | 全套WEB表单设计基础
 
 
3、结构
一个结构充分的表单就像一个与用户的良好对话。所以记住这一点,仔细规划结构。
B端基础 | 全套WEB表单设计基础
 
 
3.1、从简单开始到创建逻辑分类
从简单问题开始,用户已经很清楚答案了。将不相关的信息按逻辑分组展示。来帮助用户理解。
B端基础 | 全套WEB表单设计基础
 
 
3.2、单步、多步、单列、多列
至于这些的方式的选择、总的来说还是信息呈现多少的不同。单步的转化率更高。但多步却更适合复杂信息的收集。
B端基础 | 全套WEB表单设计基础
 
 
单列和多列基本也是一样的道理
 
B端基础 | 全套WEB表单设计基础
 
 
第三部分 | 最后
守的莲开结伴游、约开萍叶上兰舟。每次写完一篇文章、都会有所收获。希望能和优秀的你一起前行。这里都是打工族纯一线设计师、也许能够帮助你。
B端基础 | 全套WEB表单设计基础
 
 
 


作者:彪形大汉pro
链接:https://www.zcool.com.cn/article/ZMTYwNzU2OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

image.png

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

image.png

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档