在线咨询表单设计图（在线咨询表单设计图怎么做）

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

本文目录一览：

• 1、表单如何制作
• 2、FineReport怎么进行表单设计 FineReport的表单设计简单示例
• 3、表单设计2：表单的基本要素
• 4、最常见也最基础的表单设计-下拉列表

表单如何制作

在线表单是用户可以通过浏览器向服务器端提交信息的功能，如我们常用的用户注册、在线联系、在线调查表等都是在线表单的具体应用形式。在网页的HTML代码中，表单的内容位于标签之间。在网络营销中，在线表单与电子邮件一样可以作为一种在线顾客服务手段。
在线表单的作用
在线表单的作用与Email类似，顾客无需利用自己的电子邮件发送信息，而是通过浏览器界面上的表单填写咨询内容，提交到网站，由相应的顾客服务人员处理，由于可以事先设定一些格式化的内容，如顾客姓名、单位、地址、问题类别等，通过在线表单提交的信息比一般的电子邮件更容易处理，因此有为数不少的网站采用这种方式。
从功能上说，在线表单和电子邮这两种常用的在线联系方式都可以实现用户信息传递的目的，但从效果上来说却有着很大的区别，但如果处理不当，在线表单可能会存在很大的潜在问题，因此应该对此给予必要的重视。
作为市场、运营人员，相信大家对表单工具都不陌生，但如果你还认为表单工具只是做信息搜集、问卷调查时才会用到，那你就大错特错了。近两年，国内涌现出不少具有创新性的表单工具，比如为用户提供CRM解决方案的麦客，满足商家订单支付需求的金数据，人人秀将这些表单移植到h5页面中，推出了在线表单插件，方便用户在线使用，并且为企业提供更多创意、新颖的营销玩法。
制作在线表单的步骤
一、创建姓名框
首先打开人人秀制作页面，并选择好背景或者模板。
选择屏幕右侧的表单按钮，弹出选项栏，在弹出栏中我们可以看到输入框、单选、下拉菜单等一共14种表单类型和单页模板的链接按钮。我们现在需要姓名输入框，鼠标左键点选输入框。
选中我们添加的输入框，在右侧可以调节输入框类型，点击类型下拉菜单，并选择姓名。因为姓名是每个用户的基础信息，我们必须获得，所以勾选必填。然后把输入框调整到一个合适的位置。
二、创建手机框
再次创建一个输入框，将类型选择为手机，并调整至合适位置。
这样，人人秀系统就会知道您所需要的数据类型是手机号码，并自动帮您过滤部分虚假手机号。如果您需要邮箱账号，也可以选择邮箱，人人秀系统也会自动帮您识别用户填写内容是否为有效的邮箱格式。
因为每个手机号或邮箱号都只能对应一个有效用户。所以，您需要在右侧勾选唯一。这样，当有人重复填写手机号码时，就会得到人人秀的提醒，并禁止他填写此号码。
如果您需要所有的人都填写自己的手机，那么需要勾选唯一上方的必填。
三、创建选择框
获得用户姓名以及联系方式后，我们需要获得一些其他信息，比如性别、职业等。所以我们需要再次点选表单按钮，根据您的需求选择单选、多选、下拉菜单、多级下拉等类型的表单。

FineReport怎么进行表单设计 FineReport的表单设计简单示例

不同于普通报表设计，表单设计拥有很多普通报表设计无法企及的优势，如下：

整体性：普通报表是一个整体，无法实现局部刷新，表单是由各个组件组件，可以实现组件内刷新，即局部刷新；

自适应：普通报表无法实现自适应，表单可以完美的实现自适应，更好的支持移动端的使用；

控件：普通报表实现参数查询，只能将控件添加到参数面板中，表单不仅可以在参数面板中添加控件，同时还可以单独使用控件，实现数据的过滤；

联动：普通报表中单元格或图表无法直接与单元格实现联动，表单却可以实现报表块或图表块与报表块的联动。

打开设计器，点击文件新建表单，即可新建一张表单，如下图：

表单设计的一般步骤如下图所示：

新建表单：FineReport支持新建工作薄，即普通cpt模板，还支持新建表单，两种设计模式；

拖入组件：FineReport表单支持多种不同的组件类型，包括报表、参数、图表和控件，后续详细介绍；

定义数据集：定义各个组件数据来源，与普通模板的数据来源一样，图表组件数据即可来源于数据集，也可来源于单元格

设置表单样式：即设置表单的显示样式，详细请查看表单样式

表单设计2：表单的基本要素

上一篇文章我们讲到了表单设计的基本原则，这一篇我们来了解表单的基本要素。我们知道每个表单至少都有三个基本要素：标签、输入框和动作。标签用来提出问题，输入框用来填写答案，动作则用来提交答案。每一个要素的设计好坏都会对表单产生影响。下面我们详细说明：

标签应当采用简洁易懂的语言来提出问题，以便于回答。那在布局上标签是左对齐，右对齐，还是顶对齐？— —答案是根据需求而定。
这并不是一句废话，之前的文章中提过，脱离了业务需求和用户需求的设计是没有意义的，需求不同对表单的设计要求也不一样。比如：有的表单希望用户在最短时间内填完，而有的表单希望降低用户的填写速度，以此来让用户对每一个问题都能够深思熟虑的作答。
下面我们来看看标签的不同对齐方式都有哪些优缺点及其适用场景。

下图是网易云课堂申请开课的表单，其标签为左对齐标签

左对齐标签的优点：
（1）容易浏览
标签左对齐更方便用户浏览，用户只需要上下阅读标签便可快速浏览表单，而不会被输入框打断；
（2）占用的垂直空间较少
由于标签与输入框在同一行，在页面中占用的垂直空间相对更少；

左对齐标签的缺点：
填写速度最慢
左对齐标签与输入框之间的间距由最长的标签决定，这就导致部分较短的标签和输入框之间的距离较大，用户将标签和对应输入框联系起来的时间也就稍微长一些。

左对齐标签的适用场景：
虽然左对齐标签是3种方式中填写速度最慢的，但完成时间长并不一定是坏事。如果你希望用户仔细考虑表单中每个问题和答案时，左对齐标签是个好办法。
而当你选择采用左对齐标签时，你可以让标签长度尽量保持一致，来避免浏览不方便这一问题。
另外，如果表单中既有必填项也有选填项，而你想让用户能够很方便的整体浏览表单问题时，也可以采用左对齐标签。

下图是腾讯课堂申请开课的表单，标签采用了右对齐的方式。

右对齐标签优点：
（1）输入框与标签相邻
标签与输入框相邻，使用户能很好的将二者联系在一起，从而更快速的回答问题。采用标签右对齐方式设计的表单其完成速度是3种方式中居中的一个。
（2）占用的垂直空间较少
由于标签与输入框在同一行，在页面中占用的垂直空间相对更少；

右对齐标签缺点：
表单的可读性降低
由于大部分人的浏览习惯是从左到右，所以左侧不齐的话，用户的视线需要来回移动，降低了整体表单的浏览效率。如果标签文字折行的话，效率会更低。
（这里需要注意，整体浏览效率与表单完成率不是一个概念，整体浏览效率可以理解为表单的可读性，表单完成率可以理解为完成表单所需的时间）。

右对齐标签的适用场景：
如果希望用户快速完成表单填写，且占用更少的垂直距离时，可以采用右对齐标签，但是要注意，不要让标签文字折行而影响表单可读性。

下图是蓝湖网站意见反馈页面，是一种顶对齐标签方式的表单。

顶对齐标签的优点：
（1）完成表单所需时间最短
顶对齐标签与输入框之间的位置紧密相邻，使表单填写变得很快，而且用户的浏览顺序是一直向下的，使得表单有清晰的完成路径。
（2）横向空间可延伸
由于标签和输入框是垂直排列的，这样在横向上就有充足的空间，标签文字也可以有更大的扩展性。

顶对齐标签的缺点：
占用较大的垂直空间
相对于前2种方式，顶对齐标签会占用额外的垂直空间。
如果你选用了顶对齐标签的设计方式，那么要注意采用合适的垂直间距，最好使用输入框50%-75%的高度作为相邻输入框的间距。

顶对齐标签的适用场景：
如果希望用户最快速的完成表单，或者表单的标签很长（如英文标签），希望在横向上有更大的扩展性且垂直方向不受限制时，可以采用顶对齐标签。

标签的布局除上述三种外，还有输入框内标签和混合对齐标签。
输入框内标签适用于表单非常短，或屏幕空间极度有限的情况。如下图是新浪微博未登录时的首页，其中登录注册表单只占了很小的部分，所以采用了输入框内标签的方式。

如果你选择使用输入框内标签，需要注意以下几点：
（1）当焦点定位在输入框时，标签不要立即消失，而要保证用户能够看到问题（标签内容）；
（2）当用户输入时，标签应该消失，而不要成为答案的一部分；
（3）输入框内标签更适合只有一个输入框（比如搜索）或者用户对几个输入框的问题非常熟悉的表单（比如登录注册）；
（4）如果表单较长，不建议使用输入框内标签。因为用户会忘记要回答的是什么问题，而且填写完表单再检查时也会因为看不见问题而无法核对；

还有一种布局是混合对齐标签，我们是不建议使用的。因为混合对齐的方式浏览起来很不方便，也会破坏用户完成表单的明确路径。

常见的输入框类型有以下几种：

文本框： 允许用户输入任意数量（或限定数量）的字符；

单选框： 允许用户从2个或多个选项中选择一个，由于选项之间互斥，因此建议有默认选项。当选项不多或希望将选项全部展示出来时，建议使用单选框；
使用时应当保证点击单选框或者标签都能选中。

复选框： 允许用户选择一个或多个，或用于选择“是”或“否”的问题。
使用时应当保证点击复选框或者标签都能选中；

下拉菜单： 允许用户从2个或多个选项中选择一个。适用于选项较多时使用，但是要注意控制选项数量。

输入框不只被用来填写答案，其长度对用户填写答案还能起到暗示作用。
如下图所示：“手机号码”、“输入短信验证码”和“简介三个标签对应的输入框长度是不一样的，因为它们对答案的长度要求不同。

所以输入框的长度对人们填写答案时起到了有效的暗示，我们在设计时，如果答案有固定的规则（如邮编、电话号码、短信验证码、邮箱，备注、简介等），可通过长短不同的输入框来暗示用户。
如果答案没有规则无法暗示，则输入框应保持长度一致，足够填写答案即可，避免长度不一导致用户混乱。

动作是完成表单的关键一步，因为我们填写完表单之后要“提交”。我们可以把一些重要的行为视为“主动作”，如：提交、保存、下一步等。另一些与完成表单填写的目标相悖的行为可以视为“次动作”，如：取消、撤销、返回等。
还有一些在表单填写过程中的动作可以视为“进程中动作”，如：查询、上传附件等。

在动作设计时，需要注意以下几点：

表单中动作的数量不宜过多，不然会让用户无从选择。如果表单中既有主动作又有次动作，那么应该从视觉上区分。

表单设计应当为用户提供明确的完成路径，减少填表所花费的时间，上文的可用性测试实验也验证了主动作与输入框对齐是表单完成最快的方案。
这里需要说明，由于PC端屏幕可视区域较大，因此信息的展示方式是重要考虑的因素，应该便于用户浏览，方便用户在复杂的信息中快速找到需要的信息并完成操作。而在手机端，我们发现大部分主动作放在了右侧，是因为手机端屏幕有限，信息已经是极度精简后的内容，此时在有限的空间内方便操作则变得更加重要。

进程中的动作应该让进程可视化。当后台正在处理用户的某一“动作”时，用户是看不到的，所以我们最好能给予用户反馈，告知用户我们接到了指令并且动作正在进行，这样能够减少用户的焦虑，也可避免表单重复提交。
下图是邮箱上传附件的截图：

用户选择附件后能够看到当前上传的进程，这样既给了用户成功反馈，又能减少用户等待时的焦虑。

还有一种方式是把进程直接放在按钮上显示。如下图，正在登录和获取验证码按钮，用户点击按钮后有一个后台处理信息的过程可视化。将进程放在按钮上能够给予用户最轻量的提示，同时不会占用多余的空间。

关于动作按钮，还有一种常见的方式是禁用主动作，就是将主动作按钮置灰不可点击，只有当用户完成表单后才可点击。这时需要注意，后台要对每个问题的答案进行校验且要知道什么时候用户回答完所有问题。

关于表单的基本要素就写到这里。都是我在工作中的积累和总结。其实，表单设计还有很多细节，且不同的场景和目标对表单的要求也各不相同，我们要不断的积累，寻求更好的解决方案，做出更符合产品和用户需求的设计。

最常见也最基础的表单设计-下拉列表

前三篇说了表单中的"输入框"、“单选按钮”、“复选框”在线咨询表单设计图，那这次就说下拉列表。

下一篇说文本域和按钮。
众所周知没有任何人，愿意填写表单，输入框让过程看起来会变得很复杂。那此时就会用到另外一个组件就是 - 下拉列表。

在线咨询表单设计图他所包含的是选项，因为不需要让用户去进行输入，所以就可以防止用户在输入时带来错误这问题了。

实际在设计中，下拉列表也有很多的“弊端”，所以需要尝试不同的方法去解决问题。
· 下拉列表组成

· 下拉列表步骤

· 下拉列表提示也很重要

· 合理排列下拉选项

· 下拉列表选项数量

· 下拉列表还能做的更多

· 简单的数字可以输入

· 选日期没那么麻烦

· 步进器原则

· 步进器组成

· 滑块原则

· 滑块的细节

· 最后
下拉列表由标签[Label]、下拉的列表和选项组成，下拉列表常见的选择为单选。
呼出下拉列表的步骤在线咨询表单设计图：点击下拉列表控件→展开列表→滚动扫描列表选择选项关闭→关闭下拉列表。
在输入框中有个元素叫暗提示[placeholder]，作用是在用户填写信息时提供帮助，这条原则也同样适用于下拉列表。这个提示需要简短准确且告诉用户需要选什么，且在展开菜单之后依旧能够看得到选的是什么。

例如上图：“出发日期”就比“请选择”要好的多。
可以根据以往用户的选择数据进行分析，尝试将选择较多的选项放置在优先级靠前的位置。

选项较多时可以尝试只列出几个用常选的，好处在于90%的用户会立即选择满足自己目的的选项，还有10%的人可以选择“其他”(可以尝试加入一个下拉选择或输入框再满足目的)。虽然这样做会忽略10%的用户，但这样优先级排序能够提高90%用户体验。
90%以上的用户最常选的选项，就可以作为默认选项了。
避免在列表中放置太多的选项，当下拉列表中的选项超过15个时，他们将变得很难扫描。在Web端用户需要不断的滚动鼠标才可以找到满足自己目的的选项。再说在移动端有限的屏幕空间内滚动，体验可以说是非常不好了。

假设我们现在有个下拉列表，是需要收集用户的国家信息。一眼就能看出这个下拉列表是按照拼音首字母进行排序的，那“阿尔巴尼亚(A)”是排在首位的。当我要选择“中国(Z)”时候，就会很费力了。

当我要选择“中国”时在线咨询表单设计图？那我很清楚我需要选择的是什么，那就可以考虑把下拉选择改变成自动填充选择的列表？那这样只需要通过键盘输入一个“中”，就过滤出包含“中”(或者zhong)的候选选项了。通过简单的输入配合去提高选择的效率。

选项太多需要避免使用下拉列表，选项太少也避免使用下拉列表。

之前在 《最常见也最基础的表单设计-单选按钮》中说当2≤选项个数(单选)≤7时， 当下拉列表中选项少于7个时，可以考虑使用单选按钮了。

使用单选按钮，用户只需通过扫描就可以了解这问题有几个选项和每个选项是什么，从而可以去除点击触发下拉框的动作。

同样如果是简单的问题，需要回答(是/否)或(打开/关闭)时，就避免使用下拉列表了，使用复选框和开关。
通过程序的帮助去减少选择次数。

例如：如果在充值手机号必须需要用户选择运营商，当用户输入手机号后，那下拉列表就可以帮助用户选择运营商。如果在支付绑卡时需要用户选择银行，当用户输入了银行卡号后，下拉列表就可以帮助用户选择发卡银行和卡片类型了。对于不同的下拉选择会有着成千上万种的设计方法。

在移动端，我们也可以通过“调用位置”这个系统硬件功能来预填选项给到用户。
下拉列表中选项是简单数字的话，下拉列表相比输入费力度更高。可以考虑配合数字键盘输入，这样比下拉选择更简单。根据场景的不同有着不同的解决方法，适合 精确数值小范围调整 可以考虑使用步进器；那 不精确数值大范围调整 可以考虑使用滑块；选日期可以使用日期选择器。
选择日期肯定会也经常遇见，如果使用多个(年/月/日)下拉列表给用户带去的是非常不好的体验。那我们可以尝试去使用日期选择器(date picker)。

步进器[Stepper]由增加按钮、减少按钮和按钮控制的数值组成。每次点击增加按钮(或减少按钮)数字去增加(或减少)固定的数量。比方用户更喜欢在电商App里用步进器选择商品数量，此时步进器比起下拉列表更直观，使用起来也就更轻松了。
需要注意最大限制和最小限制，在最大或最小限制时，加入禁用增加(减少)按钮。如果能通过数据分析(90%用户经常选择的)预填一个默认值是提升效率的办法。

试想：步进器的默认值离用户预期的数值越远，点击的次数也就越多，那完成选择的效率也就越低。当默认值无法满足(10%用户经常选择的)，还可以把数值显示改成输入框，再配合上数字键盘输入去做精确的修改。
常见的滑块[Sliders]由可以拖动的按钮、轴、最大数值、最小数值组成。和单选按钮一样，滑块这个行为受现实生活的行为所影响。
场景：我在听歌声音有点轻，我想让声音响点。我使用滑块配和听觉在0%-100%这个区间内调整音量，而不是我要75%的音量这个精确值，这个范围内(近似值)就行，那此时滑块比起下拉列表使用起来更简单了。
根据不同的设计场景，精确值可能是很重要的，那滑块也可以满足。加入一个数值显示，数值随着每次滑动改变。同时数字也当可以点击变成输入框，再配合上数字键盘输入去修改滑块位置。
在移动端，建议把滑块的最大数值、最小数值的位置放置在上方。那在使用时永远可以保持可见。如果在下方就容易被手指遮盖。
拖动时，使用动效做加持，给与用户交互的反馈

选择比输入的效率高，但也不是说什么时候都可以使用下拉列表。根据不同的场景利用他们(下拉列表/步进器/滑块)的原则做出变形，选择也可以变很不一样。例如：可以在下拉列表中把相关的选项分组展示，也可以让下拉列表变形为多选控件等。方便好用的选择和表单目的一样：表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。

在上面提到一个日期选择器(date picker)没往细里说，之后在另外说一下。

以上的观点从我个人总结出发，虽说文笔拙劣，但是如果你有不同的意见，欢迎交流～

如果你看到这，下面就是其他组件的文章(广告)了：

《最常见也最基础的表单设计-输入框》

《最常见也最基础的表单设计-单选按钮》

《最常见也最基础的表单设计-复选框》

能放三条广告，心里觉得超爽了...

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

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