在线文案表单制作（在线文案编辑）

本篇文章给大家谈谈在线文案表单制作，以及在线文案编辑对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享在线文案表单制作的知识，其中也会对在线文案编辑进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、关于Web表单设计的经验分享
• 2、有哪些网站留资表单设计优秀
• 3、[交互设计]PC移动端表单设计

关于Web表单设计的经验分享

表单在UI设计中的出现场景还是比较多的，尤其是在一些To B的产品设计中。最近自己有做大量web 表单设计，就想把自己学到的一些关于表单设计的知识点分享给大家～

一、什么是表单？

表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情，体验差，导致信息采集不成功甚至带来利益的损失。

二、表单的构成

表单通常由标签、输入域、操作按钮、这三部分构成。

标签

标签我们可以把它理解为标题，告诉用户该表单需要填写什么信息、该表单需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。
标签按所填信息的必要性分为必填项和非必填项，一般我们会在必填项的标签内容加上＊号。＊号的的摆放位置有下面两种情况：

1.当标签与输入域居中对齐时，建议把＊号放在标签左侧。

因为＊号比较显目，用户往往第一眼会先看到它，然后按照用户从左往右的阅读习惯，视觉落点分别为文字标签、输入域。考虑到表单的填写效率，＊号位于左侧的表单阅读起来会更加顺畅。所以当标签与输入域居中对齐时，把＊号放在标签左侧会更好。

2.当标签与输入域左对齐时，建议把＊号放在标签右侧。

由于人们纵向的阅读习惯，视线会成F型。＊号在左侧还是在右侧并不会对用户视觉落脚点造成太多困扰，另外考虑到对齐的形式，＊号放在标签右侧会更好。

输入域

输入域是录入用户各种类型信息的重要交互区域。输入域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等等。

不知道这些输入域的区别的小伙伴可以去ant design官网学习一下，传送门：

https://ant.design/components/overview-cn/
因为输入域是录入信息很重要的交互区域，在设计时我们应该考虑用户输入的多种场景去设计。我们可以将用户的输入过程分为输入前、输入中、输入后。根据每一种场景中细化我们的设计。比如在输入中：我们要考虑光标的设计、输入文字信息的设计，信息提示等，在输入后：我们要考虑信息输入错误应该给予怎样的视觉反馈等。总之考虑得越细致，越能提高信息录入的成功率。
操作按钮

操作按钮是在用户填写完表单各项内容后，所要进行的操作动作，来完成或者结束当前操作流程。操作按钮分为全局操作按钮与局部操作按钮。全局操作按钮控制整个表单，比如提交、发送等操作按钮。局部操作按钮是对某一范围的内容起作用，比如编辑、删除操作。

三、表单设计常见问题

1.标签采用哪种对齐方式更好？

在我们的实际项目中，通常会因为文案的长短不一，导致我们不知道该采用哪种对齐方式。标签的处理原则就是要要尽量对齐，采用哪种对齐方式应考虑具体的制约因素和目标来定。

左对齐

当标签采用左对齐的方式的时，因为文字标签的长度不统一，导致标签与输入框的间距是不可控的。这就会造成设计的通用性不强，以及横向空间的浪费。

如果采用左对齐的形式，就要尽量去保持文字标签的长度一致，比如通过字距的调整让文字标签的长度保持一致或者通过留足留白空间，这样设计上会更统一。以为例，采取左对齐形式，但是它留足了文字标签与输入域之间的距离，让表单看上去更统一和谐，不足的就是造成了部分空间的浪费。

顶对齐

采用顶对齐的形式，会让标签和输入域垂直显示，纵向布局的信息呈现效果会更好，从而提高用户填写的效率。顶对齐因为垂直排布，会造成纵向空间的浪费，但在横空间上比较节省，比较适用于横向宽度较窄的页面。

▵顶对齐

右对齐

右对齐跟左对齐一样会因为标签长度不可控。导致设计的通用性不强，以及横向空间的浪费，但节约了纵向空间。

▵右对齐

在这几种对齐方式中，用户浏览信息的速率顶对齐右对齐左对齐。顶对齐形式适合简易表单、右对齐与左对齐表单适合复杂表单。

2.操作按钮应该用哪种设计形式比较好？

对于全局的操作按钮会用常规的按钮样式，全局按钮分为主按钮与次按钮。

主按钮

主按钮是界面中比较重要的功能操作按钮，比如提交、保存等一些正向的操作。主按钮在视觉层级上最高，能够引导用户很快的找到核心的操作并点击。主按钮通常是纯文本或图文结合的面性形式。图文结合的形式能吸引用户注意，也帮助用户理解该按钮的操作含义。

次按钮

次按钮的层级相对于主按钮层级要弱一些，通常采用线性形式。在一个页面中可以出现多个次按钮。
对于局部操作按钮的设计形式可以是文字按钮、图标按钮，也可以是图标＋文字的形式。至于应该应用哪种形式就要结合具体端场景去考虑。

图标按钮

图标按钮就是用图标来代表该操作的含义，能够直观的表达按钮的功能。在设计的时候我们需要注意图标是易于理解的、是用户熟悉的。图标按钮的设计通常都会配上悬浮框设计，也就是当用户鼠标停留在该图标按钮上会出现对该按钮的文字释义的悬浮框。以微信公众号为例，当鼠标停留在编辑图标那时会出现黑色的悬浮框对其进行解释，让用户理解此按钮的意义，让用户放心操作。

在web设计中，由于按钮的种类与使用场景比较多，建议局部的操作按钮使用线性图标，让它的层级相对其他按钮要弱化一些。

文字按钮

文字按钮通常出现在列表的操作项中。文字的颜色通常是品牌色或者蓝色，因为蓝色在用户的认知中通常是可点击的。

图标＋文字 按钮

图文结合的按钮相对于纯文字按钮会更加直观，也能更吸引用户注意。

3.输入框应该设计几种状态？

考虑的状态越多，设计就会越细，能够及时的反馈信息给用户，从而提高表单填写效率。在考虑输入框的设计状态时，遵循及时反馈的设计原则去考虑。

为了避免用户填写完所有信息后，才反馈有错误，会造成时间浪费，表单填写效率低。通常会把输入框线变成红色，同时出现红色的说明文案，来引起用户的注意。

▵及时反馈错误信息

在设计中我们还需要考虑自动校验的成功与警告状态。颜色通常为绿色与橙色。

输入框到底应该设计几种状态我们也需要根据我们表单的复杂情况去考虑，对于简单的表单设计过于细化的状态是没有必要的。

写在最后的话

表单设计看起来简单，但实际在设计过程中还是有大量的点值得我们去学习与研究的。在这次做表单的过程中，觉得作为设计师我们不应该去挑活，不要觉得表单设计是一个很小的设计就不动脑的照着别人的设计规范抄一遍。像这种看似枯燥但又很重要的模块设计，我们在前期开始设计之前可以从交互层去考虑，再从视觉层面去考虑怎样的表单设计能让用户填得舒心又高效。在看别人的设计规范比如ant design的组件规范时，我们可以去留意他们的设计细节，比如表单上下之间的间距留的是多少？有什么规律吗？按钮的上下边距与左右边距有什么关系吗？通过这些思考，然后去观察总结，并转化为自己的小技巧，到下一次设计表单的时候，我们就会做得很好了。

往期解析

UI设计－首页解析

详情页设计技法解析

轻松get文字标签设计技法    

Get点9切图方法（内附切图神器）

有哪些网站留资表单设计优秀

Reverend Danger，Tim Biskup，Insite，Kettle。
几个高效实用的表单设计技巧:
1.表单设计尽量简短， 避免使用长表单。
2.表单信息尽量分组、分类排列，提升用户视觉体验。
3.表单文案设计尽量简洁易懂， 避免误会。
4.添加自动设计，尽量减少手动输入。
5.输入框自动聚焦。
6.提供必要提示和操作反馈。

[交互设计]PC移动端表单设计

手机App为生活带来巨大便利，多种多样的移动表单设计形式进入我们的工作与生活。表单是移动应用中与用户产生最多交互的地方，包括：用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等。

一个优秀的表单设计有助于提升产品用户体验，提高转化率，达到更好的营销效果。

每个表单都有特定的目的，或吸引注册，或达成交易。考虑不周或错误设计会导致用户流失或交易失败。

学习表单设设计，需要先了解表单设计的基本原则，避免做表单时进入雷区。

表单设计基本原则

1. 逻辑清晰

表单是产品与用户沟通的语言，和对话一样，表单应当符合逻辑，帮助双方完成交流。

  2. 尽量使用单列设计

多列表单容易让用户漏填，无法集中精力完成填写。单列表单填写路径单一、直接、相比更为高效。 

3. 减少输入

表单越长越复杂，用户完成表单的意愿越低（尤其在移动端产品中）。最大限度减少输入字段，使表单完成更快速，尤其向用户索取大量信息时，更要注意表单简洁。

4. 提供合适的输入方式

输入“账号、密码，邮箱，昵称”时应提供不同键盘，减少输入错误，帮助用户快速完成填写。 

5. 避免把标签当占位符使用

有一种设计模式是让标签作为占位符置于输入框中，用户点击输入时自动消失。这种设计比较简约，但用户输入时容易忘记需要输入的字段是什么，从而产生问题。

优秀案例：移动端表单设计 

↘Dropbox by Sam Atmore

交互设计分析 ：

Sam的登陆/注册表单中，登陆、注册逻辑非常清晰。

1.使用单列二选一表单设计。用户使用App前，只需要二选一随标签提示进行下一步操作。就是误操作也可以用滑动回到另一选项。

2.登陆、注册页面的主按钮明确，有强引导作用。 

↘Location Switching - by Nimasha Perera

交互设计分析：关键词“智能自动填充选项”

表单设计融入更多自动化元素。如：自动定位功能，根据当前位置智能填充信息。省去用户地理位置选择操作，货币转化操作，省时省力

↘Form Validation - by Emmanuel Torres

交互设计分析 ：关键词“明显可见的提示信息”

用户登陆、注册过程，理想状态是完成信息填写并提交。

但实际操作中错误不可避免，表单设计要考虑有辨识度的信息提示，实时提醒用户填写错误。而不是全部完成后再告诉他。

拆解表单组件样式

表单的主要特点是引导用户填写信息，设计上应考虑主要信息内容如何引导用户浏览。表单中的信息内容包括：

1) 输入字段： 包括文本字段、密码字段、复选框、单选按钮、滑块和其他需要用户输入的字段；

2) 字段标签： 说明用户输入字段的含义，如文本框前的“你的姓名”；

3) 外观和结构： 包括字段顺序、表单在界面中的样式及不同字段间逻辑关系；

4) 动作按钮： 至少有一个操作按钮（如提交按钮）；

5) 反馈信息： 将操作结果通知用户。如：“谢谢，表单提交成功！”、“你提供的数字不正确”。

l主流表单样式

↘上标题下提示内容的表单

优点：标题、提示内容可以很长，预览速度快，可以加功能按钮（如附件和照片添加）。

缺点：占据垂直空间较大。

多用于信息内容填写和维修工单信息填写，可以减少页面跳转。

↘左标题右内容（左右对齐）

优点：常用组件，前端可以直接套用，节省垂直空间，引导用户视觉左右移动，增加用户思考时间，对关键信息填写更加安全。

缺点：相比上下结构表单，用户视觉移动距离增加,行数量多，视觉会很乱。

适用于通用表单填写场景。

↘左标题右内容（全部居左对齐）

优点：强暗示可输入，视觉浏览速度快。

缺点：标题字段数量不能太过长短不一，会导致视觉不均衡。

主要适用场景：适合金额数字类和身份信息填写。

↘归类标题表单（内容归属一类）

将同类表单项合成小组内容，帮助用户分类理解填写内容。符合格式塔原理的相似性和封闭性原理。

多用于详情信息展示。

↘仅提示内容表单

优点：信息少，不需要思考。

缺点：当内容一多很容易出现用户“不知道产品要做什么”的困惑（表单无标题）。

用于登录页或内容较少，如修改手机号/修改姓名/填写备注等。

拆解表单组件交互

表单交互主要有两个目标：引导操作和反馈。

交互操作时，表单有3个交互阶段：输入前、输入中、输入后

↘输入前

引导用户输入内容，如：密码设置场景

输入框在默认状态提示文案引导用户输入相应的内容；或输入框外有提示，仅支持字母、数字、某某符号输入

↘输入中

点击输入框弹出键盘，光标闪烁，定位用户当前位置。

表单内容一般有字符数量限制，输入过程中超过字符限制实时报错提示。

如下图：聚焦请输入原密码时,线段颜色明显加重，做为输入中提示。

↘输入后

web端

输入框失焦即判断输入信息是否符合规则，不合规则报错提示。例如：

玩家用户名重复提醒，密码首字母没有大写，密码长度不符合要求；

输入成功则成功反馈，例如：

输入框右侧图标点亮

移动端

输入所有内容，不即刻做规则判断，先激活按钮。例如：

发布、完成、下一步按钮激活

用户点击操作按钮再进行输入信息合规判断。

案例：提升用户体验和客户转化的最佳表单设计

填写表单对于用户来说是一道槛，下面就来看一看提升用户体验和客户转化的注册、登录表单中最佳设计模式时应注意哪些设计、交互细节：

1.说明注册价值

用户最不想做的事就是注册。用明确的价值说明能激发注册行为。表达的价值主张：在这里，连接世界。

2.设置醒目登陆输入框

直接显示输入框，而不是设置“登录”链接给用户增加一次点击。

3.允许使用第三方账号注册、登录

允许用户使用现有的第三方帐户登录产品能给用户带来便利，记很多密码是令人头痛的问题。

4.用户名采用邮箱或手机号码

使用电子邮件、手机号码作为用户名比起一个新名字让用户轻松很多，因为新起的用户名往往已被占用。

5.登录、注册功能区分明显

登录（Sign in/Login）、注册（Register/Sign up）链接放在一起，很容易使用户混淆，尽可能将两者区别表达

6.高亮显示输入框，允许记住用户登录信息

用户在输入框输入内容时，文本框高亮显示提示正在该框内工作。允许该表单记住本人登录信息。

7.允许用户查看密码

密码总是以圆点显示，不能确认输入的密码是否正确，允许密码明文显示是充满人性的设计。

8.必要的信息提示

输入错误的信息提示，还包括一些重要的注意事项提示，例如以下三个表单：

9.显示密码强壮程度

10.少使用下拉选项

表单中某项目里只有3-4个参数要选择，不要使用下拉框更有利于用户体验。不要要求用户重复填写Email地址。

关于在线文案表单制作和在线文案编辑的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 在线文案表单制作的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于在线文案编辑、在线文案表单制作的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。