手机表单设计（手机表格设计软件）

本文目录一览：

• 1、表单设置可以在手机端操作吗？

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

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

• 4、如何在手机上做表格的效果

• 5、钉钉如何表单设计？

• 6、北大青鸟设计培训：提高用户体验的八种表单设计技巧？

表单设置可以在手机端操作吗？

您好，目前支持管理员在手机端设置表单哦，可操作的内容有：查看假勤类套件明细、修改名称图标、添加/删除/修改控件名称以及内容。操作路径为：管理员打开手机钉钉-【工作】-【审批】-点击进对应的审批单-右上角【编辑】，如下图：点击进编辑后即可对表单进行编辑操作，如下图所示：【温馨提示】：1、审批意见、代提交、手写签名可以点击【高级设置】进行编辑设置；2、也可在手机端编辑表单的页面来设置审批流程；3、出勤套件、人事套件目前暂不支持在手机端进行删除、添加、修改，只支持排序；4、关联审批单和计算公式这两个目前还暂不支持在手机端进行配置。

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

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

标签应当采用简洁易懂的语言来提出问题，以便于回答。那在布局上标签是左对齐，右对齐，还是顶对齐？— —答案是根据需求而定。

这并不是一句废话，之前的文章中提过，脱离了业务需求和用户需求的设计是没有意义的，需求不同对表单的设计要求也不一样。比如：有的表单希望用户在最短时间内填完，而有的表单希望降低用户的填写速度，以此来让用户对每一个问题都能够深思熟虑的作答。

下面我们来看看标签的不同对齐方式都有哪些优缺点及其适用场景。

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

左对齐标签的优点：

（1）容易浏览

标签左对齐更方便用户浏览，用户只需要上下阅读标签便可快速浏览表单，而不会被输入框打断；

（2）占用的垂直空间较少

由于标签与输入框在同一行，在页面中占用的垂直空间相对更少；

左对齐标签的缺点：

填写速度最慢

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

左对齐标签的适用场景：

虽然左对齐标签是3种方式中填写速度最慢的，但完成时间长并不一定是坏事。如果你希望用户仔细考虑表单中每个问题和答案时，左对齐标签是个好办法。

而当你选择采用左对齐标签时，你可以让标签长度尽量保持一致，来避免浏览不方便这一问题。

另外，如果表单中既有必填项也有选填项，而你想让用户能够很方便的整体浏览表单问题时，也可以采用左对齐标签。

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

右对齐标签优点：

（1）输入框与标签相邻

标签与输入框相邻，使用户能很好的将二者联系在一起，从而更快速的回答问题。采用标签右对齐方式设计的表单其完成速度是3种方式中居中的一个。

（2）占用的垂直空间较少

由于标签与输入框在同一行，在页面中占用的垂直空间相对更少；

右对齐标签缺点：

表单的可读性降低

由于大部分人的浏览习惯是从左到右，所以左侧不齐的话，用户的视线需要来回移动，降低了整体表单的浏览效率。如果标签文字折行的话，效率会更低。

（这里需要注意，整体浏览效率与表单完成率不是一个概念，整体浏览效率可以理解为表单的可读性，表单完成率可以理解为完成表单所需的时间）。

右对齐标签的适用场景：

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

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

顶对齐标签的优点：

（1）完成表单所需时间最短

顶对齐标签与输入框之间的位置紧密相邻，使表单填写变得很快，而且用户的浏览顺序是一直向下的，使得表单有清晰的完成路径。

（2）横向空间可延伸

由于标签和输入框是垂直排列的，这样在横向上就有充足的空间，标签文字也可以有更大的扩展性。

顶对齐标签的缺点：

占用较大的垂直空间

相对于前2种方式，顶对齐标签会占用额外的垂直空间。

如果你选用了顶对齐标签的设计方式，那么要注意采用合适的垂直间距，最好使用输入框50%-75%的高度作为相邻输入框的间距。

顶对齐标签的适用场景：

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

标签的布局除上述三种外，还有输入框内标签和混合对齐标签。

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

如果你选择使用输入框内标签，需要注意以下几点：

（1）当焦点定位在输入框时，标签不要立即消失，而要保证用户能够看到问题（标签内容）；

（2）当用户输入时，标签应该消失，而不要成为答案的一部分；

（3）输入框内标签更适合只有一个输入框（比如搜索）或者用户对几个输入框的问题非常熟悉的表单（比如登录注册）；

（4）如果表单较长，不建议使用输入框内标签。因为用户会忘记要回答的是什么问题，而且填写完表单再检查时也会因为看不见问题而无法核对；

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

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

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

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

使用时应当保证点击单选框或者标签都能选中。

复选框： 允许用户选择一个或多个，或用于选择“是”或“否”的问题。

使用时应当保证点击复选框或者标签都能选中；

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

输入框不只被用来填写答案，其长度对用户填写答案还能起到暗示作用。

如下图所示：“手机号码”、“输入短信验证码”和“简介三个标签对应的输入框长度是不一样的，因为它们对答案的长度要求不同。

所以输入框的长度对人们填写答案时起到了有效的暗示，我们在设计时，如果答案有固定的规则（如邮编、电话号码、短信验证码、邮箱，备注、简介等），可通过长短不同的输入框来暗示用户。

如果答案没有规则无法暗示，则输入框应保持长度一致，足够填写答案即可，避免长度不一导致用户混乱。

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

还有一些在表单填写过程中的动作可以视为“进程中动作”，如：查询、上传附件等。

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

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

表单设计应当为用户提供明确的完成路径，减少填表所花费的时间，上文的可用性测试实验也验证了主动作与输入框对齐是表单完成最快的方案。

这里需要说明，由于PC端屏幕可视区域较大，因此信息的展示方式是重要考虑的因素，应该便于用户浏览，方便用户在复杂的信息中快速找到需要的信息并完成操作。而在手机端，我们发现大部分主动作放在了右侧，是因为手机端屏幕有限，信息已经是极度精简后的内容，此时在有限的空间内方便操作则变得更加重要。

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

下图是邮箱上传附件的截图：

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

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

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

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

[交互设计]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地址。

如何在手机上做表格的效果

对于经常出差的员工来说，用电脑制作表格是很不方便的。这就需要掌握在手机上制作表格的方法，能够在移动端随时随地在移动端创建、查看、共享和查看表单，以实现协作工作。下面就通过手机报表工具，来介绍手机怎么做表格。

1、app启动背景、表格封面

手机移动端的表单启动画面和报表封面，可以选择默认内置图片，也可以自定义上传图片。

上传图片要注意尺寸问题，要考虑与大多数手机一样的分辨率，才能达到最好的效果。

2、服务器配置

二维码配置是指，输入服务器名称和地址，即可生成二维码，手机报表软件扫描二维码，添加相应的服务器按钮，就可以在该服务器里制作报表了。

二维码配置是指，输入服务器名称和地址即可生成二维码，手机报表软件扫描二维码，添加相应的服务器按钮，就可以在该服务器里制作报表了。

3、表格主体

制作手机表格主体部分的数据、属性等，就是正常的点击-编辑-输入。

高级的手机表格软件，如FineReport，同样的模板，在PC和手机上都是自适应的，不需要反复调整。除了支持手机报表制作、显示外，还支持数十种图表类型，以及参数查询和数据过滤;支持填充数据。手机上有很多方便的手势，比如手势缩放。

4、导出格式

在手机表格软件中，可以自定义导出报表格式。

5、权限管理

对于企业用户，有报表软件提供了移动设备绑定功能，以确保数据安全性。如果管理员没有授权该设备，则无法登录。而且，移动终端将自动继承PC的权限设置。

此外，企业还可以限制手机端数据决策系统的使用人数。

6、移动端定位

在FineReport报表软件中，还可以手机签到。使用FR.location方法获取当前位置，使用移动终端登录系统，访问签到表单，获取当前地理位置和当前时间即可签到。

钉钉如何表单设计？

1/9 分步阅读

表单建立方法，来到了APP，点下【工作】，如图。

2/9

【工作】界面，我们接着来点击下【表单大师】，如图。

3/9

【表单大师】页面，我们接着可以点下【创建表单】，如图。

4/9

【创建表单】界面，输入表单标题，如图。

5/9

创建标题后，我们可以选择模板，也可以选择非模板，小编就选择模板了，接着点下【选好了】，如图。

6/9

这些模板有设置好了的，不好，可以删除，不够，点下【添加组件】，如图。

7/9

选择要添加的组件就好了，如图。

8/9

我们接着建立好了，点下【保存】，如图。

9/9

保存成功就可以使用了，如图。

北大青鸟设计培训：提高用户体验的八种表单设计技巧？

表单功能无论是在网页设计还是app软件开发领域都得到了大量的使用。

今天洛阳北大青鸟就一起来了解一下，符合用户体验的表单设计需要满足哪些条件。

1、表单标签需采用合适的展现形式根据表单的运用场景，标签应采用对应的展现形式，常见的展现形式有以下三种：左标签、顶部标签、行内标签。

A.左标签在一些网页表单当中，标签局左是常见的一种形式。

左标签的展示形式给人一种秩序感，也便于用户在填写表单的过程中快速的辨别标签内容。

左标签的这种形式一般用于网页当中，不适合在手机端或者小屏下的移动端出现，因为小屏幕的尺寸有限，标签居左会占用较大的空间，输入框就会受限。

B.顶部标签顶部标签指的是标签位于输入框上方，这种形式一般出现在一些移动端当中。

顶部标签可以使输入框的宽度变大，用户在填写信息也可以比较得到完整的展示。

但这种布局方式也有一个缺不好的点，就是这个表单可能需要滚屏，用户才可以看完。

C.行内标签行内标签常常出现在手机端的注册界面当中，这样的设计可以节省页面空间，所以大部分app的界面设计都采用这样的设计。

当然，部分网站pc端的表单设计中也会用到这种设计。

2、英文标签避免全部大写一些英文界面的表单设计，我们要避免标签的全大写。

全部大写的标签容易造成阅读和浏览上的困难。

3、特殊标签需使用合适的输入框长度对于特定的标签，像验证码、邮编这样的标签，在设计的时候需要采用合适的输入框长度。

毕竟这样的输入框是用户可预见的，所以输入框的长度可以不需要太长。

4、复选框排列需注意在表单中常出现复选框的设计，这样的情况需要特殊处理。

比如在注册的过程中，会有性别的选择，所以通常设计该表单的时候我们会将男女横排在一行。

但是对于内容多的情况下，就建议采用竖排的排序方式。

5、主按钮和辅按钮需要明确的区分在表单提交的时候，出现多个按钮的情况下，需要做明确的区分，这样有利于用户在操作过程中方便辨别操作步骤。

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