干货！5大移动端表单设计原则及案例赏析

当我们在享受手机App为生活带来的巨大便利时，无形中已经经历了多种多样的移动表单设计形式。而表单设计又是移动应用设计中与用户产生最多交互的步骤，包括用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等。一个优秀的表单设计更有助于提升用户体验，提高转化率，达到更好的营销效果。

每一个表单设计的页面都有一个特定的目的，或是吸引注册，或是达成交易。考虑不周甚至是错误的设计有可能会导致用户的流失或交易失败。因此，我们需要了解一下表单设计的基本原则，避免自己在做设计的时候踩地雷。

1. 逻辑清晰

表单是同用户进行沟通的语言。和任何对话一样，它应当以符合逻辑的方式帮助双方完成交流。

 

2. 尽量使用单列设计

多列的表单容易容易让用户漏填，无法集中精力完成填写。而单列的表单填写路径单一、直接、相比而言更为高效。

 

3. 减少输入

表单越长越复杂用户完成整体表单的意愿就越低 – 尤其是在小屏幕上。最大限度地减少输入字段数，使你的表单载入更快速，尤其是当您向用户索取大量信息的时候保持表单越简短越好。

 

4. 提供合适的输入方式

在输入账号、密码，填写邮箱，输入昵称等，均需提供不同的键盘，尽量减少输入错误，帮助用户快速完成填写。

 

 

5. 避免将标签作为占位符使用

有一种设计模式是让标签作为占位符置于输入框中，当用户点击输入时候就自动消失。这种设计固然简约，但是用户在输入的时候很容易忘记他们需要输入的字段是什么，也会产生问题。

移动端表单设计案例欣赏 

1. Dropbox by Sam Atmore

 

 

 

设计原则：登陆、注册页面轮播展示

          明确的CTA提示 

在Sam的这个登陆/注册的表单设计中，登陆和注册的逻辑非常清晰。

一是单列的二选一表单设计。用户在开始使用App之前，只需要在两个可选项中选择其中一个，随标签提示进行下一步操作。即便是误触，也可以通过简单的轮播图滑动效果选择另一个选项。

其次，登陆和注册页面的CTA按钮表述非常明确，让用户明确行为的意图和功能，具有强烈的引导作用。 

2. Location Switching - by Nimasha Perera

 

 

设计原则：智能自动填充选项

表单设计中越来越融入科技化的元素。例如利用自动定位功能，可以根据当前位置进行信息智能填充。这项操作为用户省去了地理位置选择，以及货币转化的过程，节省了不少的时间和精力。而在传统的定位表单设计中，面对位置切换，往往是一长串的城市名，经常令人眼花缭乱。

2. Form Validation - by Emmanuel Torres

 

 

设计原则：明显可见的提示信息

用户在登陆或注册的过程中，理想状态是完成信息填写并提交。但实际操作中错误无可避免。所以我们的表单设计需要考虑到可见的、有辨识度的信息提示，及时提醒用户信息填写错误。而不是在他们完成全部信息填写之后再告诉他们出错了。

4. Show/Hide Password - by Claudio Scotto

 

设计原则：密码提示及忘记密码提示可视化

用户经常遇到的另一个问题是忘记密码，因为大多数密码输入字段由于安全原因会被屏蔽。

建议采取的措施是在密码字段旁边添加一个“显示密码”复选框或图标。 一旦用户点击它，他们将会取消屏蔽密码并查看他们错误的位置。此类设计对于移动端的小键盘简直是完美设置。

5. Explain Everything by Anny

设计原则：标签设计图标化

移动端表单设计样式中，有一种设计方案是是将标签设计成图标，这样一来画面就显得灵活而且更加简洁。因为图标的提示作用，输入框已有输入内容时用户也能很清楚已经输入的是什么字段的内容。而底部的多平台关联注册方式也为用户提供了更加简便的注册方式。使得用户能更便捷的完成应用注册。Mockplus设计的这款应用原型将两者融合在一起，也是一个非常明智的表单设计选择。

作为一款既适用于移动App设计也适用于网页项目设计的原型工具，Mockplus在表单设计的环节有其独特的优势。表单设计所需要的元素都能在软件中轻松找到。例如，占位符，图标，输入框，数字键盘等等。

结语：

无论是填写移动端表单还是网页表单的时候，用户的犹豫是不可避免的。作为设计师或开发人员，学会将这个过程变的便捷而轻松，达成设定目标才是最终的目的。我们应当让表单设计成为优势，而非弱点。一个高度有针对性的表单设计，贴心细致的细节和体验，坚持不懈的改良和调整，高效快速的提交，顺畅的流程，这些才是优秀表单应有的样子。