移动应用设计细节分析——表单

本文通过表单的系统表现以及用户输入交互两方面，分析表单设计的一些准则和优秀案例。

参考文章：表单经典原则是错的？来看这5个表单设计新规则

移动应用表单设计秘籍

表单交互设计之——校验思考

1.系统表现篇

1.1标签及提示文字

移动应用界面空间有限寸土寸金，表单项需要通过标签告知表单类型，通过提示文字告知表单格式，怎样排布才可以使信息呈现最友好呢？

原则：优先保证表单的可浏览性

①使用清晰易懂的字段

②符合用户的视觉纵线

经典标签

完全独立的标签与说明文字

（上方）独立标签+占位符说明

（左侧）独立标签+占位符说明

（内部）独立标签+占位符说明

内嵌标签（占位符）

内嵌标签（或placeholder作为一个字段标签），是位于表单域里面的文本，当用户输入的时候它会自动消失。

使用占位符（placeholder）

优点：节省屏幕位置，增加填写数据的展示空间；

缺点：①乍一看上去也会觉得像已经填写了的样子；

②空的输入框比有提示文字的输入框更能引起用户的关注，而且与空的输入框相比，用户更容易忽略有提示文字的输入框；

③一旦用户点击文本框，标签将消失，因此用户无法仔细检查所写的是什么、为什么被写入；

改进：①提示文字比普通文本的颜色较轻，但在白色背景下配浅灰色文本通常不符合被普遍接受的网络可访问性指南（正常文本对比4.5:1）；

②浮动标签

浮动标签是一个迅速获得普及的新的交互设计方式。在它的设计中，标签文字开始作为提示文字，然后一旦用户开始填写，标签将升到上面，解决了上述提示文字消失的问题。但是它不能解决上述文本框看上去已经被填补的问题。

一定程度上缓解认知障碍

1.2错误反馈

原则：即时、明显、清晰易懂。

行内检验

实时验证并立即通知用户提供的数据的正确性。

优点：用户可以即时了解错误的位置、错误原因、正确填写的方式，及时纠正，而不是辛苦填完提交后才被告知填写错误。

缺点：若反馈做的不够明显，用户可能会忽略。提示性没有模态提示好。

行内检验

限制操作

不可点击的保存按钮-提醒数据仍未正确

1.3必选项

原则：

①“ * ”是通用的必填符号；

②通篇无“ * ”，默认为全部必填；

③根据视觉走向，“ * ”放标签与表单中间最佳（独立标签时）；

④也可以选择标出“非必填”项目。

虽然丑，但设计是比较合理的

1.4明文确认密码

注册的时候，很多应用还需要两次输入密码，以预防误操作，防止输入错误的密码之后无法登录。但是真的需要输入两次密码来防止这个问题吗？

密码确认方法:

①最后一位明文显示；

②全部明文显示；

③默认暗文，可选明文 / 默认明文，可选暗文；

④对话框确认密码输入正确。

2.输入交互篇

用户输入设计的原则：

①选择一种适合的输入和数据录入方式；

②减少输入的工作量；

③高效的输入控件；

④控件不干扰或遮挡表单内容。

2.1智能激活键盘

不同键盘类型

键盘上的功能键

键盘上的操作栏（当表单项多于3项的时候，基本上就可以考虑增加键盘上的操作栏）

2.2预选项及默认值

①向用户提供预置默认值；

②基于已输入的数据生成预测选项，让用户更容易进行信息录入；

邮箱预填充

③自动补全必要信息；如区号（用户不习惯填写，但在某些环境中很重要）；

④保存历史输入的信息，当用户输入或搜索时，展现这些最近使用的选项，让用户免于再次输入。

2.3输入掩码

帮助用户格式化输入文本的输入掩码。

注意：掩码只出现在用户点击输入框的时候，避免浏览障碍的问题；其次，输入的文字自动应用正确的文本格式，让用户将填充字段时的焦点放在所需的数据上，这样更容易注意到错误。

填写电话号码时括号和破折号自动填充