【摘要】 移动端表单表格设计考必过小编为大家整理了关于移动端表单表格设计的信息，希望可以帮助到大家！
本文写于今年1月，最近整理了自己工作记录想分享出来。
B端产品上表单、表格也许复杂的很令人厌烦，但它们是富含数据的文件中至关重要的构成元素，并且值得我们进行细致的设计思考。通过设计更高效、清晰、易于使用的表单、表格，能使用户在使用表单表格时快速分析理解大量数据的体验，提高办公效率。于是本文将分享出个人对表单设计原则与技巧，以下观点是个人观点，如若有更好的方法欢迎提出。
一、优化信息框架
旧版中TAB选项表形式单一，实际使用过程中长时间单一的选项样式会使用户产生视觉疲劳，降低体验快感。为了提升产品敏感度，修改为按钮图标文字式瓷片卡，增加用户紧迫感和对产品详情的了解欲望。
对于产品分类表单展示从视觉上进行了调整，主要体现在层级关系、亲密关系。目的是让用户表单填写过程中区分层级按钮，分类按钮颜色降低透明度，从视觉层级上更舒服，更精致。操作按钮放在右边更符合用户行为操作习惯，同时当多种产品分类表单时减少户在行动时的困惑和犹豫，确保用户在表单填写过程中的流畅体验，从而实现最终商业上的交易成就。
在旧版表单中分类按钮都用了纯色，按钮位置不统一，按钮本是辅助用户快速做出选项的，但在这个场景中却干扰了视觉。按钮降低透明度帮助用户预先区分出主要行动和次要行动，通过视觉语言强调主要按钮，弱化次要按钮，引导用户进行选择。修改“投保地址”减少手动输入，提供用户的历史输入项
在选项列表中，“是”“否”是选按钮必须是互斥的，这意味着当选择一个选项时，之前已选中的选项会被反选。因为有互斥的存在，选项内容只的两个，所以这一场景中用开关按钮更简洁。
旧版前资料上传列表，第一眼看到的是满屏文件夹，而这些并不能帮助用户进行浏览或操作，反而会造成视觉干扰。改版后对文件图标大小，缩略图尺寸，以及标题信息大小，进行整体调整，从而提升浏览效率。
调整文件图标占比，突显更为重要的标题信息。优化标题，时间信息文字比减弱，标题更明显，提升文件浏览查找效率。缩略图缩小排列与文件形式保持统一，视觉层级浏览理舒适。文件信息列表层级依次为：图标 > 标题 > 时间 。
在资料上传中文件与图存在着两种删除交互方式，给用户造成了困扰操作。改版后将图片与文件的删除操作展示形式统一，同时添加资料上传资料可全部清除功能，给用户减少了单独删除操作。
询价表单是销售人员最高频的路径，针对这个场景，视觉设计必须服从功能设计优先，紧跟设计潮流—极简风格，打造高级感的设计理念，通过视觉设计区分信息层级，让用户操作、浏览时更便捷。表单从以上几个维度进行优化：大小、重量、间距。
二、新增功能优化
在功能架构上进行视觉优化，整体设计中主要体现在：调整板块结构，运用图标设计、强化商机详情内容属性，提升点击率，简化设计，增强用户粘性。
商机详情的拜访列表，增加“点评商机”功能。仅在未关闭/未作废商机的拜访记录中增加“我要点评”，点击“ 点评”可对拜访记录入评论，200个字以内。
1.关于评论排序
看最新的评论
用户对于信息流的浏览方式永远都是自上而下。当信息流相对固定时，团E宝都是内部人员对商机的查看评论，属于熟人社交，评论数相对较少，在一屏内就可以看完全部的评论数，在这种情况下选择倒序没有必要。
看懂评论
针对已有的评论进行回复，评论之间的互动就导致评论之间不是相互独立的，彼此存在关联性。按照评论发布时间的正序排列，用户自上而下的浏览方向，先评论的先看到，更能体现出评论之间的逻辑关系，可以让用户更好的厘清之间的关系。
要看有用/好玩的评论
所有跟评论相关的信息都可以作为排序的依据：评论时间、点赞量、被回复数。除了前面提到的评论时间，另一个比较常见的排序指标就是点赞量。但在商机详情中却不以点赞量为依据，因为拜访记录是以正序往下按排的。
2.正序排列 or 倒序排列
线型结构
线型的评论列表，从样式来看，整齐划一，简洁明了。商机的评论虽没有社交APP多，但是存在评论中间隔了很多其他人的回复，想要看一个问题就要爬楼去找对应的回复关系。因此想要完整的查看你俩之间的回复记录是非常困难的，对于商机的及时性看清互动关系非常重要的。因此，一些产品选择使用了树型结构。
树型结构
树型结构的设计我们需要考虑的是次级评论的展示问题。一级评论像是树的主干，次级评论是依附于主干的分支。树型结构会聚合展示所有相关的次级评论，用户可以看到清晰的对话记录。虽然商机的评论少，但是商机的评论信息去对销售重要程度比较高，所以为了理清关系用了树型评论。
评论更新频率不是很高，基于产品定位，用户希望看到围绕一个观点大家的讨论记录，所以更加关注的是评论之间的逻辑性。因此采用的还是正序排列，按照评论的发表时间依次展示，帮助用户理解。
三、表单设计
1.标签分类样式
左标签：左标签在目前来说是最常见的一种标签样式。
顶部标签：与左标签相比，顶部标签可以给输入框的内容腾出足够的空间。会占据更多的纵向空间，之前一屏就可以展示的内容，现在用户需要滑动页面才可以看完。
行内标签：样式看起来很适合手机端的表单设计，因为它可以极大的减少了视觉噪音。但当用户点击输入状态后，就看不到这些标签了，那么用户记忆力会很吃力，不利于用户短期记忆。
2.输入域符合预期
如果用户输入的地址过长，就会造成信息的展示不完全，这对用户体验来说是致命的。因为用户在进行下一步操作之前都会对输入的内容进行审核确认，如果连完整的内容都无法获知或者获知的难度较大，则用户根本不会进行下一步操作，这就造成了操作流程的中断。所以，我们在使用左标签的时候，一定要考虑对多行文本的展示。输入域的长度与预期输入的内容成正比，确保输入字段长度符合用户心理预期，并能在表单中能完整呈现。
3.以简驭繁
以证件类型和证件号为例，分开展示输入会占用整体页面的高度，相对B端产品来说能节省空间就节省空间。而证件类型、证件号码两者同时存在的，合并在一起合理利用空间的同时能让用户快速做出选择，当用户进入页面时证件类型默认带出用户常选项。
4.*号的使用
在PC端沿用通用*符号习惯，来区分信息层级，但在移动端当表单中必填项多于非必填项时，每项表单中都加 * 只会给用户增加识别难度，让用户陷入迷惘无法快速完成表单。当表单设计中，必填项多于非必填项时，隐藏 * 号标记，转而通过暗提示语标记非必填项的形式来帮助用户识别。
5.*号的总结
6.预输入清除
根据需求可以在表单输入框上有些内容是系统已预填了信息，无需用户二次点击输入完成，但当用户需要修改时，需要对信息进行逐字修改或长按信息点全选再删除，这样修改太过于麻烦，这种情况下可以考虑在输入框内加一个删除的icon，点击icon直接清空当前列表框信息，这样表单设计更高效。
四、减少手动输入
1.联动键盘
移动端的虚拟键盘由于受限于屏幕尺寸，在各种类型键盘间进行切换的成本较高，且在数字和各类中英文标点符号的输入上效率较低。因此，在移动端长表单的设计中，需要更多考虑：默认调出哪种类型的键盘，才是当前场景下最为高效的选择。如下面的案例所示：改为联动键盘后，可以在同 1 个底部弹出层中，流畅地填写完 3 个表单项，有助于打造更为便捷高效地填写体验。当连续多个表单项的输入方式各不相同时，可考虑使用联动键盘。
2.键盘匹配
根据填写类型不同，呼出对应的键盘，省去用户收起点开键盘的重复动作和表单上下填写项的切换，让填写表单的过程更为顺畅，用户思考不被打断。不应该把所有的输入框都做成文本框样式，用户必须调起键盘一个字一个字地输入，这种体验是非常不友好的。
关于文本框是用全键盘还是九宫格，手机从最开始的功能机开始，就是直板手机，智能手机也是这样演变过来的，功能机的时候用的就是九宫格，很多人都已经习惯了，还有九宫格在手机上的布局更加合理，全键盘看起来是把所有的字母都展现出来了，可是手机本身就只有那么大，全部展现出来，就会导致键盘的字母很小，看都看不清，对于很多人来说都打不快。
3.系统自动识别
根据表单需求，收集姓名、性别、出生日期、身份证号四个输入项。可通过后台技术的一些手段从身份证号中提取出信息，用户原本要输入4个项目信息，现只输入2项信息输入。身份证的倒数第二位可以判断性别：奇数是男，偶数表示女，出生日期大家都能看出。而这样操作成本大大下降，减少误输可能性。
1-2位省、自治区、直辖市代码；3-4位地级市、盟、自治州代码；5-6位县、县级市、区代码；7-14位出生年月日，比如19820426代表1982年4月26日；15-17位为顺序号，其中17位（倒数第二位）男为单数，女为双数；
结合不同的场景去思考会发现无限多的做法，减少输入项个数的目的也只是为了让完成表单变得更加高效。
代替输入
由于 OCR 技术的发展，拍照识别文字的速度和准确度都有了较大的提升，最常见的就是各大金融服务应用中拍照识别银行卡号的功能。如下所示，被保人名称、身份证。证件有效期可以通过OCR识别。如果采用手动输入的方式，不仅效率低且输错可能性较大。在这里应用 OCR 技术，旨在降低输入成本，提升用户体验。提供当前场景下的常用选项，用选择代替输入是最为基本的思路。需要注意的是，如果常用选项不能涵盖用户可能填写的全部内容，那么手动输入自定义选项的功能也要提供给用户。
预输入
表单设计如：用户在填写长表单前已经在平台填写了联系方式、名称或其他信息，在用户进行信息录入时，可以提供合理的默认值有效简化操作步骤，减轻用户填写表单的负担，更快地帮助用户完成表单内容的填写。如果你确定对用户足够了解，在用户进行信息录入时，可以提供合理的默认值。因为对用户来说，填写信息永远都不是一件有趣的事情，设置合理的默认值可以节省用户的操作时间。
利用移动端设备能获取的信息
尽管移动端在输入上没有那么便捷，但获取到信息种类与精确度，却具有一定的优势。比如，移动端设备能较为精确地获取到用户当前的地理位置，这就为某些需要填写位置的表单提供了便捷（如收货地址、联系地址等）。再如，调用通讯录的功能也经常出现在各种需要填写手机号的表单中。
提供用户的历史输入项
一份表单中出现了多处相同类型的表单项，这时可以提供用户的历史输入项供其选择。另外，很多填单页也会将用户输入的信息自动保存为常用收货人等，同样也是用到了这一方法。
4.二次确认——多场景考虑异常情况
移动端的使用场景比较广泛，用户在填写场景较为不稳定，吃饭、行驶、过马路等场景填写，为了防止用户误操作而丢失已填信息的场景，需要在此时进行二次操作确认，确认用户操作意图。当然，如果用户没有对表单进行任何编辑，这样的退出操作是不需要二次确认的。
5.流程闭环
原页面表单填写提交后，提示成功的弹窗还停留在表单填写页面中，只能原路返回，甚至还可以重复提交。优化表单后，点提交按钮，跳转提交成功的提示页面，让流程形成闭环。同时在结束任务时应给予用户情感反馈，让表单设计带有温暖情感设计，需求给予用户积极向上的夸赞，在用户没有完成提交任务时，不应该给予用户负面情绪。
五、表格设计原则
1.数字要右对齐
数字右对齐是为了方便比较时，首先看个位，然后是十位、百位。大多数人们也是这样学习算术的——从右边开始，向左移动，动态地传递数据。所以，表格中的数字应该保持右对齐
2. 文字要左对齐
文本信息从左向右读。通常是按文字顺序排序的方法比较文本信息：如果两个条目以相同的文字开头，就比较第二个文字，以此类推。如果没有左对齐，对于有对数据进行比较时这种浏览文本会使人烦躁。
3.表头与数据对齐
表头通常应当遵循表格中数据的对齐方式。这是的表格垂直方向看起来更整洁，并提供了一致性和上下文环境。
4.不要使用居中对齐
居中对齐会使表格的行看起来“错落不齐”，浏览表格会给人造成胡里胡涂感，常常要使用额外的分隔线和图形元素。
5.有效的数字
有一种简单的方法能让你的表格看起来更整齐，就是保持一致的有效数字(一般情况下指小数点后的位数)，这样每一列数据中的小数点后位数都是一样的。有效数字细究起来就无尽无休，这里就不过多详述，我的简单建议就是：表格数字不是越精确越好，需要多少有效数字就显示多少，不必太多。股票基金的有效数据又不同于此。
如果表单表格浏览或者使用让人恼火烦躁，那是因为这些表格太烂了要背的锅，完全没有经过设计表单表格。设计是表格表单的关键，如果设计恰当，浏览比较复杂的数据会很容易，如果设计不妥，数据就无法理解且会传递错误的信息数据。在B端设计中对于信息繁杂利用如何利用狭窄的空间，仍然可以区分各元素，且不妨碍浏览使用，这就是设计时要考虑的。看似简单的背后是不简单的思考过程。
以上就是移动端表单表格设计的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！