移动端 · 表单设计有方法
创始人
2025-05-19 12:02:44
0

移动端 · 表单设计有方法移动端 · 表单设计有方法

一、信息内容层级化

信息分层次、分步骤、分页面呈现

1、表单结构分层

从表单结构层面来看,内容过长的表单,信息可以分步骤、分页面处理。

使用条件

表单内容过长,用户填写有压力

操作步骤较多,需要给用户明确的步骤提示

中途需要多次跳转,接入第三方服务的表单

案例分析

做企业认证时,由于需要填写的项目较多,步骤繁杂,因此很多产品会采用分步骤的形式,提示用户当前进度。

移动端 · 表单设计有方法移动端 · 表单设计有方法

2、页面内容分层

每个页面的信息内容呈现,有层级,有重点。

使用条件

  • 表单填写内容较多
  • 页面内文字内容较多
  • 产品对于用户填写的内容有倾向(如对平台来说更有意义、更希望用户填写的信息)

案例分析

大众点评在设置用户信息时,虽然要填写的内容都是“设置”,但是重点需要设置的信息使用了链接颜色处理,做了强调。

移动端 · 表单设计有方法移动端 · 表单设计有方法

二、减少用户输入

用其他方式代替用户手动输入。

1、以选择代替输入

如果用户可以做选项时,就不要使用输入,可以充分利用移动设备的性能,比如 GPRS 定位、通讯录等,合理调用第三方或系统信息。

使用条件

填写的内容边界较为模糊,词语不确定性较高

  • 选项数量控制在 3-5 个之间
  • 可以调用第三方或系统信息

案例分析

案例一:知乎 App 博主认证 和 爱康国宾 App 个人信息都使用了部分选项替代填写:

移动端 · 表单设计有方法移动端 · 表单设计有方法

案例二:淘宝 App 可以调动系统定位,并提供几个最有可能的选项,让用户选择最佳定位。

移动端 · 表单设计有方法移动端 · 表单设计有方法

2、提供默认选项,替用户做选择

选取最大概率事件作为默认选项,减少用户的手动调整

使用条件

  • 系统能够确定出符合用户的较大概率选项
  • 选项数量控制在 3-5 个之间

案例分析

蚂蚁链实人认证在上传证件时会根据用户所在国家和地区,帮助用户默认选择概率最大的选项,不需要用户自己操作。

移动端 · 表单设计有方法移动端 · 表单设计有方法

三、定义键盘类型

根据调用内容调动不同的键盘类型

根据表单输入内容的不同,调用出系统不同的键盘类型。

使用条件 

填写的内容有明确的输入语言要求

案例分析

航旅纵横在航班查询的时候,由于航班号都是大写字母和数字的组合,所以键盘会默认调用出只有数字和字母的输入法,同时默认开启大写形式。蚂蚁链实人认证在用户手动填写身份证时也同理。

移动端 · 表单设计有方法移动端 · 表单设计有方法

四、避免重要信息被遮挡

重要的信息要始终可以被看到

需要避免输入项被键盘遮挡,也要避免将重要的输入提示作为占位符,不要在用户填写时被输入的内容遮挡。

使用条件 

  • 表单的填写位置刚好会被弹出的键盘挡住
  • 输入提示很重要,需要用户在输入时随时注意
  • 输入提示很长,用户短时间内记不住

案例分析

大众点评在写评论时,一些可以激励用户写点评的提示性文字,会在用户输入时始终存在。

移动端 · 表单设计有方法移动端 · 表单设计有方法

五、实时校验

重要的信息要始终可以被看到

当输入需要被判断和检验的信息时,系统最好可以针对信息做实时校验,避免用户一直到最后提交表单时才发现填写问题。

使用条件

  • 输入的信息需要判断,并会影响最终的表单填写通过率
  • 输入内容的质量需要用户知晓,如密码的强度

案例分析

证件号码输入错误时会给予相应的提示。

移动端 · 表单设计有方法移动端 · 表单设计有方法

相关内容

热门资讯

拼多多是真坏! 而且一开始不需要他人助力只要自己手机点点,就能把金额积攒到7...
2021趋势研判:扫地机器人市... 估算市场规模有多种测算方式,本篇内容从需求端出发来看看扫地机...
粘性标题?界面设计?诀窍都在这... 01、粘性标题粘性标题(或持久标题)是设计行业一种常见标题模...
浅谈IoT的过去、现在与未来 IoT的过去在知乎上有这样一个问题,人类为什么没有发展出攻击...
4000字讲透“会员制模式”到... 上个月,我写过一篇文章《你发现了吗,今年的618变味了》,分...
顶级品牌的不败奥秘 但这两个完全不同的品牌,价格定位和目标群体都不同,却能在各自...
手把手教你画活动图,再无难搞的... 每当遇到复杂多变的业务,面对冗长的流程,我总会拿出需求分析工...
抖音没有心智 如果把抖音的崛起归结是字节的算法推荐技术牛逼,我想字节其他项...
产品价值观:逻辑的一致性与产品... 本周推送的题有点大,本期想到多少写多少,后续慢慢完善。写这篇...
万字长文:重新定义中台产品 什么是业务中台中台并不是一个全新的概念,从国外互联网公司的实...
万字长文:说清军转企业应聘 在这个转变的过程中,我受到了很多老转的无私帮助,非常感谢企业...
互联网行业为背景下的数据分析通... 七、数据分析进阶01、数据分析进阶的阶段在入门阶段开始时,我...
9条思考:冷静献给如火如荼的私... 以下,是我对于私域9条冷静的思考,也许对于你有所启发。 0...
B端产品如何做好工作汇报(二) 二、讲什么 – 项目一个标准的季度工作汇报需要包...
从用户体验五层要素理解交互设计 在之前的OH卡活动上,为了解释交互设计这件事情,让不在信息技...
品牌策划方案怎么写? 品牌策划案是企业塑造品牌形象的基础,有根据的品牌策划案给消费...