英文网站制作 官网,云服务器和网站备案吗,石家庄php网站建设,做网页设计可以参考哪些网站全篇阅读大概需要15min#xff0c;对表单设计不熟悉的同学看完后肯定会有不少的收获~~~说到表单其实在生活中可以接触到各种各样的表单#xff0c;比如#xff1a;驾照申请表、体检表、银行开户需要填写的表等等#xff0c;这些都是表单#xff0c;主要目的就是让用户填写…全篇阅读大概需要15min对表单设计不熟悉的同学看完后肯定会有不少的收获~~~说到表单其实在生活中可以接触到各种各样的表单比如驾照申请表、体检表、银行开户需要填写的表等等这些都是表单主要目的就是让用户填写来【收集用户信息】。驾照申请表做为基础组件的表单使用频率非常高对业务起到至关重要的作用如使用APP时登录页面、某宝下单支付时的页面、自媒体的同学上传自己作品时的页面这些都是基于不同业务场景下的不同类型的表单。初看这些表单你可能觉得很简单就是一些标签、非常基础的小组件但是在实际业务中想要将这些小组件组合拼装成合适的表单却需要推敲非常多的细节常常会让设计师陷入无限的纠结中比如文字标签是左对齐还是右对齐确定按钮是放左边还是右边控件颗粒长度是整齐划一还是与输入预期一样错落有致反馈内容怎么显示......等等以上虽说都是细节部分但是在设计表单时往往最不能忽略的就是这些细节因为细节处理好的话往往可以提升用户在填写表单的效率给用户带来不一样的用户体验。★ 所以针对这些问题我从【框架】【细节】的逻辑与大家一起探讨「如何设计一份体验好的表单」。表单拆分在UX Collective作者Taras Bakusevych 进行了详细的阐述对表单的组成部分进行了详细的拆解与说明 ↓ ↓ ↓1、标签标签文本主要是解释输入项的含义一般不宜太长需要简明扼要快速让用户理解还有一部分是告知用户哪些是必填项。2、占位提示直接展示在输入项中采用弱提示文本对所需信息描述、示意当用户输入信息时即消失。3、 校验对输入项进行验证并给出反馈提示如用户未填写格式错误、内容错误等常见的校验类型4、 基础组件可交互输入的区域是构成表单的核心内容主要有输入框、单复选框、上传、时间选择器、开关......5、 提示描述该输入项需要的输入类型如上传的文件类型6、 按钮用户完成输入后点击按钮进行提交、进入下一步等按钮一般是跟随的最后一个输入项后面若输入项超出一屏显示则按钮悬浮固定在底部按钮“确定”放左、右统一即可没必要过分纠结。表单类型看了很多文章对表单类型的划分主要是基础表单、分步表单、高级表单分组表单[1]基础表单常见于输入项较少的表单场景如登录、注册。如登录分步表单常用于输入项较多业务本身具有流程化特性如转账为了提高用户填写效率减少用户心理负担将一个冗长或用户不熟悉的表单任务拆分成多个步骤一步步指导用户完成。分步表单可以缓解用户需要填写较多内容时候的抵触情绪并且通过拆分步骤聚焦于每次填写的内容提升用户在不同模块间的浏览效率。来源Ant Design Pro高级表单分组表单主要用于需要一次性输入、提交 大批量数据的场景。高级表单与分步表单有点类似都是为了减轻用户填写压力将填写内容进行分块。不同的点在于分步表单的流程化明显后一步填写的内容都是基于前一步来填写、是前一步反馈。如站酷上传作品但是以上说的基础表单、分步表单、高级表单都是基于业务需要而进行选择但是实际在设计时往往还需要考虑的是这些表单应该是以什么承载结构展示是整页展示、弹窗展示、侧边栏展示表单内部布局方式一定是平铺的一栏么是否可以增加侧边目录这些都是设计师需要进行全盘考虑的问题所以在设计表单的时候需要先确定这些框架由外内层层深入再对细节进行处理。所以接下来我会针对如何由外内设计表单进行详细的陈述。表单页设计步骤在详细阐述如何设计表单页前先明确下我对于表单页的划分 ↓ ↓ ↓我将表单页大体划分成【页面框架】和【表单内容区】这样划分是出于我对 AJAX之父Jesse James Garrett在2007年出版了一本名为《用户体验要素》的书提出了从5个要素自下而上的建设用户体验即战略层、范围层、结构层、框架层、表现层这种逐层的思考逻辑对于设计表单是十分必要的因为在设计表单的时候常常需要考虑这个表单页所需承载的业务诉求战略上基础上去做后面的优化体验所以在设计表单的时候应明确该表单的业务类型因为不同的业务诉求的表单在设计中的展现形式会有不同即“页面框架”会有不同这也是我上面为何将表单页分成页面框架和表单内容区的原因在确定页面框架后就需要对表单需展示的内容进行明确的划分如表单的内容是否要展示流程进度表单内容是否有不同层级的导航确定了这些后我们表单内容的大致布局框架就可以确定下来我们才能进入下一步内容区具体的陈列方式的设计表单内容区主要是对输入项的陈列方式对齐方式进行体验优化最后对所有输入项进行统一整理检查是否与用户预期一致与其他输入项的关系是否清晰等。整体而言可以分为以下四步STEP1确定【页面框架】这里得页面框架指的是承载着整个表单页的页面框架即整页式新页面、弹窗式、侧边栏式。因为其页面面积大小不一样所以使用情境有所不同。[2]整页式最常用方式适用于绝大部分的表单可以支持构建复杂的表单。弹窗式通过小面积的弹窗进行轻量化的编辑方便快速进行增、删、改、查输入项较少一般不会有滚动条。侧边栏式与弹窗式相似通过小面积的侧边栏进行编辑可承载比弹窗更复杂一些的表单内容可以有滚动条。以上这些就是常见的表单页面框架我们在考虑采用何种样式时需要综合以下几个因素考虑内容多少 —— 内容较多不适合使用弹窗式与原页面关系强度 —— 需与原页面保留强关联建议使用弹窗式、侧边栏式表单内容区复杂程度 —— 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。STEP2确定【表单内容区布局】如上图所示一个正常的表单内容区主要有标题区、二级导航区、主内容区其中标题区是必须要有的标题区可以让用户快速明白该表单是需要收集什么内容二级导航可以根据业务需要进行配置主内容区则是表单填写的主区域通常我们直接将这个区域称之为“表单内容区”该区域布局样式可以分为三种1、通栏式即在页面中居中显示从上到下直接平铺控件颗粒。2、左右式即在表单域内容区左边放置导航栏、或在右侧放置辅助信息栏如流程节点展示。3、左中右式即分别在表单域内容区左侧放置导航栏右侧放置辅助信息栏。以上三种样式就是常见的表单内容区的布局采用哪种布局可以综合以下几个因素考虑内容多少——如果内容很多导致页面很长则可以考虑将内容分类作为左侧导航栏采用左右式布局。内容类型——导航作用内容必须放置左侧有些分步骤的表单也会将步骤条放置左侧而辅助信息的内容建议放在右侧因为人眼浏览习惯都是从 左 右所以信息重要度建议按照该视线路径放置★ STEP3确定【表单内容排列方式】在该步骤中主要确定表单内容区控件颗粒的排列方式单列布局 or 多列布局。在输入项不多的情况下建议采用单列布局因为单列布局用户填写的路径就是从上下的一条直线十分符合用户的视觉动线能够提高用户浏览与填写的效率。多列布局的表单会导致用户的视觉路径变长用户需以 Z 字形的视觉动线扫描表单会提高浏览与填写的效率并且多列表单容易造成用户填写时的混乱易填错体验差。但是有时部分业务诉求和某些特性的场景要求会需要在有限的空间上放入更多的控件颗粒来收集用户的信息这时就不得不使用多列布局的样式因为多列能够省纵向空间。so 根据单列布局、多列布局的优劣势结合实际业务需要来选择【单列布局】优视觉路径清晰填写效率高体验好劣占用纵向空间。【多列布局】优省空间能够放置更多的控件颗粒劣视觉路径模糊填写成本高填写易出错。在这个环节中除了需要考虑单列式布局还是多列式布局还有一个也是需要全盘考虑的——【标签的对齐方式】在设计时到底是采用左对齐、右对齐还是顶部对齐呢Matteo Penzo《Label Placement in Forms》文章中有对标签不同的方式方式优劣势进行了说明。[3][4]后续在这块纠结的时候则可以对照上面表格进行评估了其中详细原理你也可以点击下方链接进行查看UX Collectiveuxdesign.ccSTEP4确定【表单内容颗粒】最后一步只需要按照收集信息类型的需要选择正确的控件颗粒如如果是要收集用户购买数量则可以直接使用“数字步进器”、“输入框”。在选用控件颗粒时需要注意的是选用的控件颗粒应是用户可以最快输入的能点击完成就别输入完成表单中同个信息类型的控件颗粒应统一指意不明确的表单应搭配占位提示占位提示应是完整的陈述句 重要信息的输入项应该有错误提示校验这种一般用于错误率较高的情况避免用户反复填写。如在登录注册时我们填写手机号如果不满11位数就会报错。特定的输入型颗粒控件需要根据输入信息的特殊性给与格式的提示与限制如邮箱 http://qq.com这样有助于帮助用户提前感知减少表单填写错误。表单颗粒的宽度应该 暗示填写内容的长度与输入预期成正比在Ant Design 4.0 系列分享的文章[5]分析结论是错落有致的排版比整齐划一更舒适因为在视觉上我们更容易将下方有图的空间和内容视为一个和谐的整体但左图过度的对齐导致暗示隐性的截断我们会感觉表单列右侧空间缺了一大块。写在最后本篇文章从表单所在的页面形式 表单框架 表单内容区 逐层对表单进行剥离拆解帮助大家更加全面的认知表单并总结了日常工作中设计师常常会遇到的表单类型和布局设计师可结合文章中给出的建议参考并灵活应用。希望能够通过这边文章给到大家更多的启发。文章中如果有不严谨、错误的地方希望大家给与指正。最后作为一名刚刚将自己工作内容进行沉淀并分享给大家的设计师希望大家可以多多点赞评论鼓励下狗头保命参考^表单类型 https://preview.pro.ant.design/form/advanced-form^页面框架 https://www.uisdc.com/structured-approach-2^标签对齐选择依据 https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php^标签对齐优劣势 https://www.uisdc.com/middle-form#^整齐划一不如错落有致。| Ant Design 4.0 系列分享 https://zhuanlan.zhihu.com/p/110096160
