在UI筹划中会经常碰着表单筹划 ，表单筹划是甚意思详手及事项指经由过程对表单的文字 、筹划 、解表寄排版与独霸举办筹划 ，单筹从而进步用户的划编集团屈就与完成度 ，并且在用户端也有好的制身体验 。在表单筹划中 ，表单不合的筹划独霸处景所对应的表单也有所不合 。
表单的中心下场是群集数据信息 ，可以算作是群集 、传递 、提交数据的中心序言 。其作为掉落踪掉落踪用户输进的次要交互编制 ，也担当着将问题和谜底举办配对的角色 。
表单但凡由标签 、输进域 、填写提示 、独霸按钮等几部分构成。
1 、标签
陈述用户该表单需求填写甚么圭表类型的信息 ，但凡放置在表单文本框以外居左或上方的职位 。极多半气候下也会放置于文本输进框内，激活输进框 ，则磨灭踪踪踪 。
标签但凡是每个输进项的称号（eg ：账号 、身份证号 、处事器称号） 。按所要填写信息的需求性又可分为必填项和非必填项 。看文生义 ，必填项是指用户必须求输进有效的文本信息，不然，该表单就不克不及正常提交 、保管等独霸；非必填项是指该项信息用户可填可不填 ，屈就用户的自愿和需求度来自愿选择填亦或不填 。
2、输进域
用来群集用户独霸的信息 ，每个输进域字段包含一圭表类型信息 。
输进域不单仅是文本输进框 ，从交互组件的角度来看 ，其包含文本输进框、单选框 、复选框 、开关 、选择器 、法度圭表类型条 、上传 、Tab切换（次要指按钮型）、滑块 、法度圭表类型条等多种 。
3 、填写提示
辅佐用户有效切确填写信息的带领内容或回响内容 。提示一样往常可分为带领提示和回响提示两类 。带领提示产生发火在用户输进前 ，带领用户切确输进信息或对输进信息的请求举办声明 。回响提示产生发火在输进中或输进后 ，界面屈就用户的输进而展示的提示信息 。
4 、独霸按钮
独霸按钮是指填写完表单各项内容后 ，所要举办的独霸行动来停止往后独霸流程或在流程傍边或此后开启新的下场独霸。独霸按钮包含提交按钮 、保管按钮 、复位按钮和一样往常按钮；用于将表双数据传送遍地事器上 。
表单的构成
屈就输进流程 ，可将用户的输进过程分为输进前 、输进中 、输进后 。
1、表单筹划方针
辅佐用户高效 、切确 、齐截 、安然的完成数据录进与数据编辑。
2 、表单筹划绳尺
(1)、高效性
经由过程公允的信息输进组件与页面筹划和交互编制可独霸户疾速完成表单页的信息填写义务。
(2)、切确性
表单的切确性默示有良多 ，次要指不要让你传递的信息产生发火歧义 ，让全数的用户看到这个信息后的用户行动贯穿连接齐截 ，回避用户犯错。
(3) 、齐截性
针对不合产品下的页面气焰/字号/组件独霸都要贯穿连接齐截 ，阻拦给用户构成同化添加邃晓成本 。
(4) 、安然感
要有必定的毁伤独霸呵护编制 ，比如 ，前去不保管表单的毁伤提示或即时保管表单的安然独霸阻拦数据丢损掉落踪落；同时针对不合的独霸处景添加前去上一步 、重置填写 、消弭填写等辅佐用户改削所长的悔怨药下场 。
表单页面的展示编制有三种页面跳转 、弹窗输进 、当场编辑 。影响页面编制的要素包含表单输进容量及独霸流程主次相干（即严密慎密密切度） 。
(1) 、页面跳转
一个下场的次要独霸流程在一个页面中展示 ，担保次要下场的独霸的流畅度 。同时 ，若输进内容较多，建议采取页面跳转 。页面跳转的信息承载身手强 ，对回响的及时性请求不高；体量感斗劲重 ，给人感应感染晃荡性更高一些，出格次要的下场表单填写确认建议用页面跳转 。
页面跳转包含两种 ：新页面翻开和往后页面跳转 。
新页面翻开为次要流程法度圭表类型中的分主流程 ，不会影响用户对主流程的延续独霸 ，页面下场具有必定的自力性。
往后页面跳转则为流程法度圭表类型中的关头法度圭表类型 ，提示用户已进进下一法度圭表类型 。页面间的跳转闪现了产品的根本独霸流程 ，关头流程关头路途建议在往后页面翻开 ，让产品流程愈加了然 ，更少的翻开页促进多余信息对用户寄看力的分袂 ，让用户聚焦在往后页面的信息中。
(2) 、输进弹窗
弹窗格式的输进表单诗往后页面的分支独霸 ，闪现了页面间的层级相干 。输进弹窗格式的表单，输进内容的若干很多若干良多若干很多若干良多若干很多若干处于页面跳转和当场编辑两种格式之间 。内容稍多 ，交互页面流程不契合当场编辑 ，一样也还没有抵达新页面的程度 ，建议选择输进弹窗 。
用户在不离开往后页的气候下延续拔出性独霸，为流程法度圭表类型中的分支行动 ，可由用户选择可否举办，不袒护用户已不雅不雅不雅不雅鉴赏内容。输进弹窗轻量化 ，信息承载较页面跳转弱 、较当场编辑强，输进内容数量有较除夜的弹性空间 。
该圭表类型的表单会打断往后的主独霸流程需务及时照顾，带给人的感应感染更狭隘一些，是以输进内容不宜过量 ，且不克不及过量地带离用户的寄看力 ，不然会给用户的主独霸流程构成较强的*** ，降低输进的流畅度 。
(3) 、当场编辑
当场编辑是轻量型信息群集表单 ，合用于输进内容较少 ，合用频率较低 ，同时属于主下场分支的场景 。其益处在于独霸便捷 ，随时启用与介入 ，可以担保用户对次要下场的独霸流畅度 。
当场编辑但凡是嵌进在列表内、卡片中 ，信息展示区域经由过程双击或点击特定的独霸按钮即变成激活编辑外形。其存在的意义在于完竣或加强主下场的独霸，而不是打断 。
1 、标签格式
屈就标签与输进域的职位相干 ，其对齐编制可分为：右对齐 、左对齐 、顶对齐三种 。每种对齐编制都有必定的益处与局现性 ，是以在契合的场景下选择契合的标签格式 ，可以汲引用户的输进屈就 。
标签格式
标签格式比照声明
(1) 、右对齐
当既要促进垂直空间，又要加快填写速度的场景 ，独霸右对齐 。采取右对齐编制标签的表单不雅不雅不雅不雅鉴赏时分 ，比顶部对齐标签的表单的时分长 ，但比左对齐编制所需的不雅不雅不雅不雅鉴赏时分短 。页面高度无穷的话无穷公司推荐这类对齐编制 。
益处 ：俭仆垂直空间 。
偏向偏向：降低可读性 ，标签长度和输进框弹性小。
举个栗子 ：腾讯蓝鲸的偏向自愈平台的告警收敛的新建收敛轨则表单页面，采取了左对齐的筹划 ，便独霸户疾速独霸 ，完成新建收敛轨则表单的填写 。
右对齐案例
（2） 、顶对齐
希看用户疾速填写表单 ，完成义务的场景独霸顶部对齐。顶对齐编制对眼球挪动的需求比其他对齐编制要更少。挪动端表单页面多独霸此种编制 ，手机为下拉式交互 ，垂直高度不受限制 。
益处 ：有最快的不雅不雅不雅不雅鉴赏和措置速度；标签长度弹性除夜 。
偏向偏向 ：特别很是占垂直空间 。
（3） 、左对齐
希看用户加快速度 ，细心思虑表单中的每个输进框的场景独霸左对齐圭表类型。采取左对齐标签编制的表单是三者傍边所需不雅不雅不雅不雅鉴赏时分最长的 ，但这类对齐编制可以在你想要用户加快速度不雅不雅不雅不雅鉴赏 ，细心思虑的时辰独霸（如一些次要的输进） 。
益处 ：文字开首按不雅不雅不雅不雅鉴赏视野对齐 ，利便不雅不雅不雅不雅鉴赏，俭仆垂直空间 。
偏向偏向：填写速度慢 ，标签长度和输进框弹性小。
举个栗子 ：腾讯云 ，采办云产品的表单界面 ，让用户细看 、严谨选择，采取了左对齐的编制 。
左对齐案例
2 、输进域格式
输进域是表单的主题与中心 。
(1) 、组件格式
表单罕有的组价格式包含文本框 、文本域 、选择器 、开关 、Checkbox 、Radio 、法度圭表类型条 、滑块 、上传 、标签页等 。对组建的选用 ，不才文中将会做具体参议 。
输进组件间距不宜窄 ，较除夜的文字输进框 、过度的留白空间会让人更有填写的欲看 。在表单间距措置上 ，各区块之前的间距 ，如单列中一组字段输进框与此外一组的间距 ，双列中左一列及右一列的间距需求出格寄看。
(2)、单例与多列筹划
在web页面中 ，因为页面的相干，招致跳转页面与弹窗的横向空间较除夜，纵向空间窘蹙 ，若展示较多的输进内容时 ，且不克不及采取分模块 、分法度圭表类型、初级等交互筹划时，有的筹划师会采取双列或多列表单 ，以进步横向空间的独霸 ，这也是可以领受的 。此时 ，要寄看列与列间距的公允性和屈就用户的视觉流，可以参照菲兹定律 。
可是作为表单 ，单列表单的不雅不雅不雅不雅鉴赏及填写屈就是最高的 。用户的视觉流较为顺畅，可以汲引填写屈就 ，同时可以促进用户的倦怠度 。是以 ，建议表单多采取单列筹划 。
(3)、分模块
对内容过量的表单输进组件 ，分类 、分模块的排版编制让用户感应感染更好 ，不是密密层层一除夜片，有层次。用户可以在填写好一段内容掉落踪队行心思上搁浅安眠 ，促进视觉倦怠和心思压力 。
举个栗子 ：网易七鱼客服平台的根本设置表单页面 ，分为迎接语设置 、未选择分类提示 、在线会话封锁二次确认 、几回征询辨认 、会话计时设置 、处事时分设置、转接确认设置 、会话接进提示等多个小模块 。层次了然 、邃晓 。
分模块案例
(4)、分法度圭表类型
对内容过量的表单输进组件，又有着了了的独霸前后相干 ，可以选用分法度圭表类型，每屏仅展示该法度圭表类型下的表单输进组件 ，同时校验回响也可分步举办 。
举个栗子 ：一样往常注册表单被分为账号设置 、完竣材料 、注册完成3个步，让用户分步填写 。每屏仅展示往后次序递次递次下的输进组件 ，让用户分步举办 ，了了用户行动 ，促进用户的心思担当 。回响校验及时 ，也阻拦了填写完才创作创造个中某项输进禁尽确。
(5)、初级（非次要必填项默许收起 ，点击展开）
对表单内容良多，且存在一些没那么次要的非必填项，可以选择默许湮没 ，用户有欲看填写时点击展开可举办输进填写 。或搜刮前提太多 ，默许收起 ，展示更多的信息内容；需求搜刮时，点击展开。
举个栗子：阿里云的云处事器 ECS采办表单页面里的具体价值总览模块 ，搜刮表单内容项良多 ，默许收起；用户点击展开过滤器按钮 ，则搜刮表单展开 。俭仆页面空间 ，让用户在默许气候下看到更多列表等其他次要信息 。
初级示例（默许收起）
初级示例（展开）
4、提示格式
从提示信息所处的职位和提示展示的机会 ，提示可分为输进框内提示 、输进框外提示 、激活输进框提示 、图标悬停提示及孤单区域提示等 。屈就前文的分类 ，提示格式分为带领提示与回响提示两种 。
(1)、带领提示
带领提示是对用户输进信息轨则的诠释与声明 ，在用户输进前 ，输进框内提示 、输进框外提示 、激活输进框提示可回为带领提示 。
可细分为 ：全局性提示和定位提示 。
● 全局提示 ：独霸处景以下 ：在陈述用户填写表单会带来若何的益处 ，无益于用户完竣相干表单内容（益处提示） 。在登录页等字段内容较少时或提示的内容项也不多 ，一样往常位于全数表单的上方（诠释声明） 。陈述用户信息群集的用处和独霸担保（安然提示） ，消弭用户输进记挂 。
● 定位提示 ：合用于表单内容斗劲多 ，字段内容较少时 ，应在照顾偏向职位举办提示 ，辅佐用户疾速定位到偏向内容。
(2) 、回响提示
回响提示是页面琐细对用户的输进授予校验 ，并对校验下场予以展示的提示编制 。回响提示是屈就用户输进而展示的提示，涌如今输进中与输进后 ，可细分为 ：即时校验回响 、部分校验回响和全局校验回响 。
较为罕有的即时校验回响是屈就输进字符数量而展示暗码强度 ，从而时辰提示用户往后暗码强度可否契合请求 。该编制的校验前提多在外埠 ，不须要及时向处事器发呼唤 ，以掉落踪掉落踪回响 。
● 部分校验回响：在注册账号时，输进无缺用户名往后 ，提示用户名可否可用 ，则为部分校验回响。校验内容存储在远端 ，法度圭表类型需求无缺的输进信息到远端举办考验 ，并给出回响 。
部分校验次要合用于输进项较多 ，且某个输进项具有先决前提 ，同时决意了接上往的输进 。该编制可以阻拦不无缺输进的即时回响给用户构成的烦扰，同时可以促进对处事器的压力 。一样往常注册 、登录 、web端页面页面会采取部分校验回响 。
● 全局校验回响 ：多指在输进完成或阶段性完成时，界面给出的输进回响 ，用户需求独霸触发 。在用户独霸回响行动按钮后 ，界面在照顾职位（但凡是单个输进框的下方或右边）一次性给出不契合请求的回响提示 。
5 、独霸按钮编制
独霸按钮 ：填写完表单各项内容后 ，所要举办的独霸行动（eg ：保管、消弭、提交 、断定等） 。
表单输进域完成后 ，必定要举做幻想下场的独霸回响，以便让用户了了本身所输进的数据信息可否有效保管仍是舍弃。独霸按钮无外乎保管 、消弭 、提交 、重置 、上（下）一步 、保管并提交等。
1 、 了了陈述要输进的信息内容
确保用户体味要供给甚么信息 ，和为甚么要供给这些信息 。
为初级用户／有时访谒的用户供给白话作为『标签』 ，为局限专家供给专业术语作为『标签』 。当需求用户供给敏感信息时 ，经由过程『输进提示』来声明琐细为甚么要这么做 。
2 、让用户能在凹凸文中获守信息 ，辅佐他完成输进
独霸『出色的默许值』 、『筹划化的格式』 、『输进提示』、『输进提示』等编制 ，阻拦让用户在空白中完成输进 。
3 、标签精练 、切确
标签字段精练 ，既利于标签排版的对齐 ，也加重用户的不雅不雅不雅不雅鉴赏与邃晓难度 。用词切确可以阻拦让用户有其他的解读 ，招致输进有误信息 。此外 ，在输进项较为了了的气候下，标签可省略 ，如登录的用户名和暗码。
4、必填项
必填项一样往常要有了了标识 ，除非全数是必填项 ，且必填项数量在7个以内 。选填项斗劲少时，互联网产品一样往常必填项不做标识 ，非必填项后背则标注选填字样 。
5 、具有容错性
对偏向敏感 ，并尽大年夜大年夜约宽容 ，具有容错性 。
经由历程度歧的『校验』轨则和编制举办回响，阻拦用户在点击提交后才刚才最早『校验』 ，让用户延迟改正偏向。按照『容错格式』 ，准予用户以多种格式和语法输进 ，比如 ：用户在德律风号码输进框中多输进了一个空格 ，琐细存储时可以主动删损掉落踪掉落格，可是不须要陈述用户这是一个偏向。
6 、精简不须要的输进项
在能无缺掉落踪掉落踪需求信息的前提下 ，输进项越少越好 ，可以对用户的输进信息举办充分的独霸 。比如 ：让用户输进了身份证号后 ，就不要让用户再一次输进诞辰 ，此时可以从用户的身份证号中读取用户的诞辰 ，从而促进用户的输进 。
7 、平允分类
输进信息的分类 ，是有效的促进用户独霸倦怠度的编制 。分类的维度有多种 ，屈就表单输进内容的相干性 、内容的所属类别 ，可以将同圭表类型的数据不合输进，促进用户输进信息的跨度 ，进步输进屈就 。
屈就输进信息的优先级或次要性 ，举办分类 ，将优先级高的放在后面，优先级低的放到末尾或折叠起来 ，将较罕用到或建议默许值的输进项放到里面 ，深化用户可以忽视这部分的输进 。
8 、平允分法度圭表类型
对输进表单举办分法度圭表类型的措置 ，可以降低用户的独霸频率，授予用户必定的安眠空间 ，用户会有阶段性的下场感 ，同时分法度圭表类型的输进另无益于促进信息的偏向率 。
假定输进表单的内容较多，同时输进内容有逻辑上的前后按序 ，此时可以思虑将输进表单举办分法度圭表类型措置。
9、主按钮的禁用绳尺
当输进框特别很是少时（一样往常少于 3 个） ，假定用户没有在必填项中输进内容，可禁用『提交』等主按钮 。当输进框特别很是多时（超出 5 项以上） ，不建议禁用主按钮 。
当输进框特别很是少时，用户一输进就会有回响 ，是以主按钮的禁用轨则特别很是了然 ，随便被用户邃晓 。
当输进框特别很是多时（不凡是输进项中交错了必填项和非必填项） ，全数回响链路烦复又宏壮 ，禁用轨则难以被辨认 ，随便激起思疑 。
10 、部分校验和全局校验
部分校验需了了平台相干内容不单一处是这类独霸编制，要不就会构成用户独霸上的困扰 。全局保管要了了相干按钮的了然程度，假定这个还需求用户往寻觅 ，那就是较着的体验上的问题了 。
1、视觉动线阻拦Z字形
在表单中不雅不雅不雅不雅鉴赏按序最好是从上到下的 ，假定是放置的 ，用户不雅不雅不雅不雅鉴赏体验就是 ，放置放置放置，用户动线就会变得斗劲宏壮 ，随便产生发火不雅不雅不雅不雅鉴赏倦怠 。
2 、问题独霸右对齐
问题举办右对齐可让用户更轻松地不雅不雅不雅不雅鉴赏页面并为你的表单成立对称的视觉层次筹划 。
3、提示文字色彩不要太重
提示文字不要太重，假定太重用户潜见识会感应是已输进好的文字 。
4 、独霸单一CTA
假定你需求更多的CTA按钮 ，建议把它作为赞助按钮 。比你的主CTA不凹陷 。
5 、选择切确的输进圭表类型
不要甚么都用文本字段 ！将字段的圭表类型与其内容相适应 。有良多内容圭表类型有特定的请求，需求出格措置 。
6 、输进字符提示
除夜除夜都局限都有某种限制 。字符限制 、号码/日期局限 、德律风号码等。让用户事前体味限制 ，以阻拦他们感应思疑和懊末路 。
优化猩SEO：表单筹划是UI筹划中经常会碰着的 ，一个精细的表单筹划可以进步用户的集团屈就与完成度，并且在用户端也有好的体验 ，从而辅佐用户将信息发送到网站或独霸 ，以完成幻想下场方针 。
参考链接 ：
5个方面叙说 ：Web表单筹划 大年夜大年夜师都是产品经理
http://www.woshipm.com/pd/1058591.html
若何计整洁份体验好的表单 ？来看这篇超全总结！ - 优设网
https://www.uisdc.com/form-design-5
表单筹划 - 优设网
https://www.uisdc.com/tag/%E8%A1%A8%E5%8D%95%E8%AE%BE%E8%AE%A1
改削于2025-09-09
