【设计资讯】三种表单设计规范

2022-05-26 分类：网站建设

创新互联提供一条，设计资讯: 三种表单设计规范。表单在移动端设计中最常见的界面，每个手机系统及应用对表单都有不同的设计，理应存在一套设计规范。然而规范要自己总结才是最好最深刻的，我拿手机系统及app的各种表单设计对比了一番，目标是总结出一套表单设计指南，以提高日后工作效率。

本文集中讨论移动端界面中的典型表单界面：多编辑项页面、登录&注册页面、发送&提交页面

移动端界面中常见表单类型

手机系统表单设计对比

首先对四家手机系统的表单设计进行对比：iOS，Android，MIUI，Flyme;对比范围是界面中的反馈策略、及界面布局和逻辑。

对比4个手机系统：iOS、Android、MIUI、Flyme

错误反馈

iOS：出现错误时统一使用弹框提示：提交?—?— 收起键盘?—?— loading?—?— 反馈;
Android：反馈通常显示在当前界面中，在对应的输入栏底部提示;
MIUI：兼容了多种反馈方式：普通错误反馈参照了Android;附带相关操作的提示在下方弹框;针对单个输入项在输入框底部的提示;
Flyme：反馈提示参照Android。

MIUI针对不同情况的反馈提示

值得一提的是，在android中，跳过第一个输入项时输入栏会即时给出反馈，用户能及时注意到遗漏。当提交的姓和名都不符合格式时，会直接提示“确定你输入的姓名无误吗?”，文案灵活且具亲和力。

小结

模态提示(弹框)的好处是：重点突出且能聚焦用户目光，避免用户进行其他操作而忽略掉反馈。当前界面反馈的好处显而易见：错误项一一对应，用户可清晰知道错误在哪，但是表单超过一屏时容易被忽略，也容易被键盘遮盖。

我认为“弹框提示好还是在当前界面提示好?”不是个好问题。判断设计好坏应该基于场景，合适就是好。在表单操作过程中，可即时反馈结果的项目适合当前反馈，如：手机号码格式、邮箱格式、验证码。提交时的反馈(结束流程)适合用模态提示，让用户明确感知到问题存在，同时可在当前界面针对每一项进行提示。

取消&完成

iOS：新建表单界面中，“取消&完成”几乎是标配格式，左上角取消右上角确认，即便注册页面也是，一致性非常高。内容项未满时，确认按钮灰显;
Android：不如iOS统一，登录注册的下一步、确认按钮在右下角然而新建日历事件，保存在右上角;另外，究竟是使用icon或者文字并没有统一。同样的是在内容项未满时，确认按钮灰显。另外，在某些应用中如短信，反馈和取消没有明确定义及区分。新建短信时，当联系人和正文都被填写，点击返回可保存草稿;如果仅填写联系人一项并点击返回，则不会保存草稿。
MIUI：与iOS一致，新建表单界面中标配“取消&完成”。
Flyme：表单中返回、取消同时存在，算是比较逆天的设计。

即便是iOS也有不规范的时候：

1.通用/键盘/文字替代/新建界面中，使用的是“返回&存储”而不是“取消&完成”;

2.新建便签：左上角是返回而非取消，右上角是完成。原因是iOS视作便签在新建的那一刻就已经完成了，而且无需保存，所以直接返回，完成按钮其实是完成编辑收起键盘的意思。

这种表达存在歧义，让人误以为完成及保存，建议改为收起键盘的icon或文字，相比之下flyme标签处理的更好。另外要吐槽一下：Android网络设置的新建页面多年来坚持用弹框展示，项目信息无法完全展示，实在让人难以接受。

小结

取消&完成如同两个出口，在任务流中明确标识出来让用户有充分的控制权。自动保存意味着离开当前界面只有一个出口，明确的暗示尤其重要，如“完成、ok”等带有正面含义的字眼，而不是还以不明的“返回”。

无意中找到iOS不遵循规范的界面便签：iOS vs Flyme

无意中找到iOS不遵循规范的界面

便签：iOS vs Flyme

线性任务流

关于登录注册流程，参考了：Android、美团以及大众点评。

登录页：google vs 大众点评 vs 美团

Google在无论登录或注册中使用线性任务流，线性任务流的好处是：分别对每个提交的信息检测并反馈，用户理解起来清晰安全，属于“can’t go wrong” 的设计，但其一步步的跳转容易给用户一种漫长的感觉。对比之下大众点评及美团拿任务流清晰度换取了便捷性。

取舍

线性任务流和集成任务究竟如何取舍，取决设计师如何平衡清晰度和便捷性。我的理解是：登录是留给老用户的，用户对应用有一定的熟悉度，另外结合场景分析，无论是主动触发或是在购买商品时被动触发登录，用户总是不耐烦的希望尽快结束此流程，因此登录流程约简短越好，选用集成任务;注册面对的是新用户，用户此刻更需要的是安全感，明确的说明和清晰的步骤比操作便捷更重要，因此选用线性任务流。