海外移动设备B端长表单 UX/UI 设计实战

这个月参与了一个关于新加坡银行商户入网移动端to B的项目，涉及到长表单的设计，所以开一个表单专栏，详细讲讲表单设计。以下内容源自于自己资料查找以及实战总结出一些设计经验，希望能帮助到同样有困惑的设计师。

如何从交互与UI的层面来设计移动端长表单？

首先App移动端面临的两个问题：

1. 狭小的屏幕
2. 受限的输入方式

问题一解决方案

在移动端设计to B的表单，可谓是螺蛳壳里做道场。横向空间的受限，所以我们在设计表单时特别要注意这点。

1. 选择合适的标签对齐方式

多数情况下，移动设备上输入框标签顶部对齐，这是最好的选择，因为不需要占用狭窄的水平空间。

eg：通过点击图标触发提示。

问题二解决方案

能不让用户动手，就不让用户动手，能不动脑子就不动脑子。

移动端往往只能依靠触摸屏来完成输入，对于B端的录入来说这是非常痛苦的事情，可点击区域小且输入的东西又非常多。

1. 可以先从以下几个方面来减少输入的成本

（1）选择代替输入：维护一套数据，让用户从输入变为选择，保证格式规范。例如：银行列表。

eg：大部分选择都是manage，所以这里可以提供一个默认值，无需让用户再操作一次。

（3）技术手段：OCR（图像识别技术），语音输入，系统自动获取数据。

eg：系统自动获取数据（根据所填信息自动计算门店数量）

2. 解决了前面输入的问题，输入的过程中也要做到及时的反馈

（1）通过不同的样式来显示当前的状态，默认状态（Inactive）、输入状态（Focus/Active）、禁用状态（Disable）、出错状态（Error）。

出错状态（Error）的提示技巧：

• 错误提示需靠近输入框；
• 有些表单设计将错误提示设计成toast弹窗一闪而过，有时候用户都没注意到；
• 有的放在页头或者尾部，这样远离出错框，无法立马确认是什么问题；对色盲的人更加不友好，当时根本不知道发生了什么，等在其他地方看到提示，还需费神去茫茫表单中查找；
• 用户完成当前字段填写后再进行验证，而不是边填边报错，会让人觉得你这个表单很傻。

（2）同时注意输入的长度设计要符合预期；

在有些情况下还可以使用结构化格式，例如：日期、电话号码、信用卡号码等，这些有特定格式的输入；

更进一步在占位符中使用输入提醒来为用户提供更多的线索，例如“DD-MM-YYYY”，确保所填数据万无一失。

eg：日期与月份都是2位数字，而年份是4位数字，需要通过输入框长度暗示用户。

3. 注意适当的垂直间距，太少或者太多都会阻碍移动，输入框高度50%～75%作为问题之间的间隔

有节奏的流动需要有合适的间隔。

4. 如何提示输入框是必填还是选填

（1）如果表单的大部分输入字段要求必填，把少数可选项标明即可。

eg：表单输入框选填项示意。

（2）如果大部分输入字段是可选字段时，把必填项表示出来即可。

eg：表单输入框必填项示意。

交互与UI的层面来设计移动端长表单的实战部分就分享到这里，这只是大概讲了一下怎么做；

因为篇幅原因没有写明为什么要这么做，在后面分享的文章里面我会具体写写这么做的原因，

作者：Neko，支付产品经理/UI/UX；公众号：吱了一声

本文作者 @Neko 。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！