移动端表单设计原则与技巧！

感谢大家对UI范的支持，今天给大家推荐一篇关于移动端表单设计原则与技巧的文章，希望对你有所帮助！

 正文 

B端产品上表单、表格也许复杂的很令人厌烦，但它们是富含数据的文件中至关重要的构成元素，并且值得我们进行细致的设计思考。通过设计更高效、清晰、易于使用的表单、表格，能使用户在使用表单表格时快速分析理解大量数据的体验，提高办公效率。于是本文将分享出个人对表单设计原则与技巧，以下观点是个人观点，如若有更好的方法欢迎提出。

优化信息框架

旧版中TAB选项表形式单一，实际使用过程中长时间单一的选项样式会使用户产生视觉疲劳，降低体验快感。为了提升产品敏感度，修改为按钮图标文字式瓷片卡，增加用户紧迫感和对产品详情的了解欲望。

对于产品分类表单展示从视觉上进行了调整，主要体现在层级关系、亲密关系。目的是让用户表单填写过程中区分层级按钮，分类按钮颜色降低透明度，从视觉层级上更舒服，更精致。操作按钮放在右边更符合用户行为操作习惯，同时当多种产品分类表单时减少户在行动时的困惑和犹豫，确保用户在表单填写过程中的流畅体验，从而实现最终商业上的交易成就。

在旧版表单中分类按钮都用了纯色，按钮位置不统一，按钮本是辅助用户快速做出选项的，但在这个场景中却干扰了视觉。按钮降低透明度帮助用户预先区分出主要行动和次要行动，通过视觉语言强调主要按钮，弱化次要按钮，引导用户进行选择。修改“投保地址”减少手动输入，提供用户的历史输入项

在选项列表中，“是”“否”是选按钮必须是互斥的，这意味着当选择一个选项时，之前已选中的选项会被反选。因为有互斥的存在，选项内容只的两个，所以这一场景中用开关按钮更简洁。

旧版前资料上传列表，第一眼看到的是满屏文件夹，而这些并不能帮助用户进行浏览或操作，反而会造成视觉干扰。改版后对文件图标大小，缩略图尺寸，以及标题信息大小，进行整体调整，从而提升浏览效率。

调整文件图标占比，突显更为重要的标题信息。优化标题，时间信息文字比减弱，标题更明显，提升文件浏览查找效率。缩略图缩小排列与文件形式保持统一，视觉层级浏览理舒适。文件信息列表层级依次为：图标 > 标题 > 时间 。

在资料上传中文件与图存在着两种删除交互方式，给用户造成了困扰操作。改版后将图片与文件的删除操作展示形式统一，同时添加资料上传资料可全部清除功能，给用户减少了单独删除操作。

询价表单是销售人员最高频的路径，针对这个场景，视觉设计必须服从功能设计优先，紧跟设计潮流—极简风格，打造高级感的设计理念，通过视觉设计区分信息层级，让用户操作、浏览时更便捷。表单从以上几个维度进行优化：大小、重量、间距。

新增功能优化

在功能架构上进行视觉优化，整体设计中主要体现在：调整板块结构，运用图标设计、强化商机详情内容属性，提升点击率，简化设计，增强用户粘性。

商机详情的拜访列表，增加“点评商机”功能。仅在未关闭/未作废商机的拜访记录中增加“我要点评”，点击“ 点评”可对拜访记录入评论，200个字以内。

关于评论排序

看最新的评论

用户对于信息流的浏览方式永远都是自上而下。当信息流相对固定时，团E宝都是内部人员对商机的查看评论，属于熟人社交，评论数相对较少，在一屏内就可以看完全部的评论数，在这种情况下选择倒序没有必要。

看懂评论

针对已有的评论进行回复，评论之间的互动就导致评论之间不是相互独立的，彼此存在关联性。按照评论发布时间的正序排列，用户自上而下的浏览方向，先评论的先看到，更能体现出评论之间的逻辑关系，可以让用户更好的厘清之间的关系。

要看有用/好玩的评论

所有跟评论相关的信息都可以作为排序的依据：评论时间、点赞量、被回复数。除了前面提到的评论时间，另一个比较常见的排序指标就是点赞量。但在商机详情中却不以点赞量为依据，因为拜访记录是以正序往下按排的。

正序排列 or 倒序排列

线型结构

线型的评论列表，从样式来看，整齐划一，简洁明了。商机的评论虽没有社交APP多，但是存在评论中间隔了很多其他人的回复，想要看一个问题就要爬楼去找对应的回复关系。因此想要完整的查看你俩之间的回复记录是非常困难的，对于商机的及时性看清互动关系非常重要的。因此，一些产品选择使用了树型结构。

树型结构

树型结构的设计我们需要考虑的是次级评论的展示问题。一级评论像是树的主干，次级评论是依附于主干的分支。树型结构会聚合展示所有相关的次级评论，用户可以看到清晰的对话记录。虽然商机的评论少，但是商机的评论信息去对销售重要程度比较高，所以为了理清关系用了树型评论。

评论更新频率不是很高，基于产品定位，用户希望看到围绕一个观点大家的讨论记录，所以更加关注的是评论之间的逻辑性。因此采用的还是正序排列，按照评论的发表时间依次展示，帮助用户理解。

表单设计

标签分类样式

左标签：左标签在目前来说是最常见的一种标签样式。

顶部标签：与左标签相比，顶部标签可以给输入框的内容腾出足够的空间。会占据更多的纵向空间，之前一屏就可以展示的内容，现在用户需要滑动页面才可以看完。

行内标签：样式看起来很适合手机端的表单设计，因为它可以极大的减少了视觉噪音。但当用户点击输入状态后，就看不到这些标签了，那么用户记忆力会很吃力，不利于用户短期记忆。

输入域符合预期

如果用户输入的地址过长，就会造成信息的展示不完全，这对用户体验来说是致命的。因为用户在进行下一步操作之前都会对输入的内容进行审核确认，如果连完整的内容都无法获知或者获知的难度较大，则用户根本不会进行下一步操作，这就造成了操作流程的中断。所以，我们在使用左标签的时候，一定要考虑对多行文本的展示。输入域的长度与预期输入的内容成正比，确保输入字段长度符合用户心理预期，并能在表单中能完整呈现。

以简驭繁

以证件类型和证件号为例，分开展示输入会占用整体页面的高度，相对B端产品来说能节省空间就节省空间。而证件类型、证件号码两者同时存在的，合并在一起合理利用空间的同时能让用户快速做出选择，当用户进入页面时证件类型默认带出用户常选项。

*号的使用

在PC端沿用通用*符号习惯，来区分信息层级，但在移动端当表单中必填项多于非必填项时，每项表单中都加 * 只会给用户增加识别难度，让用户陷入迷惘无法快速完成表单。当表单设计中，必填项多于非必填项时，隐藏 * 号标记，转而通过暗提示语标记非必填项的形式来帮助用户识别。

*号的总结

预输入清除

根据需求可以在表单输入框上有些内容是系统已预填了信息，无需用户二次点击输入完成，但当用户需要修改时，需要对信息进行逐字修改或长按信息点全选再删除，这样修改太过于麻烦，这种情况下可以考虑在输入框内加一个删除的icon，点击icon直接清空当前列表框信息，这样表单设计更高效。

减少手动输入

联动键盘

移动端的虚拟键盘由于受限于屏幕尺寸，在各种类型键盘间进行切换的成本较高，且在数字和各类中英文标点符号的输入上效率较低。因此，在移动端长表单的设计中，需要更多考虑：默认调出哪种类型的键盘，才是当前场景下最为高效的选择。如下面的案例所示：改为联动键盘后，可以在同 1 个底部弹出层中，流畅地填写完 3 个表单项，有助于打造更为便捷高效地填写体验。当连续多个表单项的输入方式各不相同时，可考虑使用联动键盘。

键盘匹配

根据填写类型不同，呼出对应的键盘，省去用户收起点开键盘的重复动作和表单上下填写项的切换，让填写表单的过程更为顺畅，用户思考不被打断。不应该把所有的输入框都做成文本框样式，用户必须调起键盘一个字一个字地输入，这种体验是非常不友好的。

关于文本框是用全键盘还是九宫格，手机从最开始的功能机开始，就是直板手机，智能手机也是这样演变过来的，功能机的时候用的就是九宫格，很多人都已经习惯了，还有九宫格在手机上的布局更加合理，全键盘看起来是把所有的字母都展现出来了，可是手机本身就只有那么大，全部展现出来，就会导致键盘的字母很小，看都看不清，对于很多人来说都打不快。

系统自动识别

根据表单需求，收集姓名、性别、出生日期、身份证号四个输入项。可通过后台技术的一些手段从身份证号中提取出信息，用户原本要输入4个项目信息，现只输入2项信息输入。身份证的倒数第二位可以判断性别：奇数是男，偶数表示女，出生日期大家都能看出。而这样操作成本大大下降，减少误输可能性。

1-2位省、自治区、直辖市代码；3-4位地级市、盟、自治州代码；5-6位县、县级市、区代码；7-14位出生年月日，比如19820426代表1982年4月26日；15-17位为顺序号，其中17位（倒数第二位）男为单数，女为双数；

结合不同的场景去思考会发现无限多的做法，减少输入项个数的目的也只是为了让完成表单变得更加高效。

代替输入

由于 OCR 技术的发展，拍照识别文字的速度和准确度都有了较大的提升，最常见的就是各大金融服务应用中拍照识别银行卡号的功能。如下所示，被保人名称、身份证。证件有效期可以通过OCR识别。如果采用手动输入的方式，不仅效率低且输错可能性较大。在这里应用 OCR 技术，旨在降低输入成本，提升用户体验。提供当前场景下的常用选项，用选择代替输入是最为基本的思路。需要注意的是，如果常用选项不能涵盖用户可能填写的全部内容，那么手动输入自定义选项的功能也要提供给用户。

预输入

表单设计如：用户在填写长表单前已经在平台填写了联系方式、名称或其他信息，在用户进行信息录入时，可以提供合理的默认值有效简化操作步骤，减轻用户填写表单的负担，更快地帮助用户完成表单内容的填写。如果你确定对用户足够了解，在用户进行信息录入时，可以提供合理的默认值。因为对用户来说，填写信息永远都不是一件有趣的事情，设置合理的默认值可以节省用户的操作时间。

利用移动端设备能获取的信息

尽管移动端在输入上没有那么便捷，但获取到信息种类与精确度，却具有一定的优势。比如，移动端设备能较为精确地获取到用户当前的地理位置，这就为某些需要填写位置的表单提供了便捷（如收货地址、联系地址等）。再如，调用通讯录的功能也经常出现在各种需要填写手机号的表单中。

提供用户的历史输入项

一份表单中出现了多处相同类型的表单项，这时可以提供用户的历史输入项供其选择。另外，很多填单页也会将用户输入的信息自动保存为常用收货人等，同样也是用到了这一方法。

二次确认

多场景考虑异常情况

移动端的使用场景比较广泛，用户在填写场景较为不稳定，吃饭、行驶、过马路等场景填写，为了防止用户误操作而丢失已填信息的场景，需要在此时进行二次操作确认，确认用户操作意图。当然，如果用户没有对表单进行任何编辑，这样的退出操作是不需要二次确认的。

流程闭环

原页面表单填写提交后，提示成功的弹窗还停留在表单填写页面中，只能原路返回，甚至还可以重复提交。优化表单后，点提交按钮，跳转提交成功的提示页面，让流程形成闭环。同时在结束任务时应给予用户情感反馈，让表单设计带有温暖情感设计，需求给予用户积极向上的夸赞，在用户没有完成提交任务时，不应该给予用户负面情绪。

表格设计原则

数字要右对齐

数字右对齐是为了方便比较时，首先看个位，然后是十位、百位。大多数人们也是这样学习算术的——从右边开始，向左移动，动态地传递数据。所以，表格中的数字应该保持右对齐

文字要左对齐

文本信息从左向右读。通常是按文字顺序排序的方法比较文本信息：如果两个条目以相同的文字开头，就比较第二个文字，以此类推。如果没有左对齐，对于有对数据进行比较时这种浏览文本会使人烦躁。

表头与数据对齐

表头通常应当遵循表格中数据的对齐方式。这是的表格垂直方向看起来更整洁，并提供了一致性和上下文环境。

不要使用居中对齐

居中对齐会使表格的行看起来“错落不齐”，浏览表格会给人造成胡里胡涂感，常常要使用额外的分隔线和图形元素。

有效的数字

有一种简单的方法能让你的表格看起来更整齐，就是保持一致的有效数字(一般情况下指小数点后的位数)，这样每一列数据中的小数点后位数都是一样的。有效数字细究起来就无尽无休，这里就不过多详述，我的简单建议就是：表格数字不是越精确越好，需要多少有效数字就显示多少，不必太多。股票基金的有效数据又不同于此。

如果表单表格浏览或者使用让人恼火烦躁，那是因为这些表格太烂了要背的锅，完全没有经过设计表单表格。设计是表格表单的关键，如果设计恰当，浏览比较复杂的数据会很容易，如果设计不妥，数据就无法理解且会传递错误的信息数据。在B端设计中对于信息繁杂利用如何利用狭窄的空间，仍然可以区分各元素，且不妨碍浏览使用，这就是设计时要考虑的。看似简单的背后是不简单的思考过程。

来源：@木槿425
https://www.zcool.com.cn/article/ZMTE2MTc4NA==.html

本期分享结果，感谢你的阅读，欢迎添加我微信：

421978184

任意转发公众号文章或视频即可，邀请你入群

围观我的设计朋友圈，每天分享设计最新资讯与灵感等等...

共同进步，一起加油!

-------------------------------------------

精选推荐

-------------------------------------------