App单个页面的最佳文本框个数是多少个?

摘要:  【文章摘要】 在Axure设计App交互原型的时候,会碰到注册信息的填写,支付信息的填写,登录页面的填写。在做页面的竞品分析的时候,会发现各类Ap

App单个页面的最佳文本框个数是多少个?

本文作者:张云钱,从前端到Ui到Ue,现任职上海某互联网公司,产品经理。

针对这个问题,我从三个方面进行拆分研究,从而得出App每页的最佳文本框个数。

【1】、不同大小的手机屏幕,对应的App每页最佳文本框个数,是不同的。

【1.1】如果是iPhone4的屏幕尺寸,分辨率为640x960px的时候, 文本框个数最大值为:2个文本框

App单个页面的最佳文本框个数是多少个?

【计算公式】

第一步、(960px屏幕总高度)-(40px的电量条高度)-(88px的顶部条高度)-(88px的下一步按钮的高度)-(键盘高度520px)=224px的文本框高度; 第二步、(224px的总文本框高度)/(88px单个文本框高度)=2.5个文本框≈2个文本框

【基本尺寸】

40px是电量条的高度;

44px的高度是普通屏幕可点击高度的最小值;

iPhone4是高清屏,所以可点击高度的最小值为88px;

即,可以点击的单个文本框的高度最小值为88px。

键盘高度为520px;分析键盘高度,是为了防止键盘弹起的时候,遮挡了文本框。

【1.2】如果是如果是iPhone5的屏幕尺寸,分辨率为640x1136px的时候,

文本框个数最大值为:4个文本框

App单个页面的最佳文本框个数是多少个?

【计算公式】

第一步、(1136px屏幕总高度)-(40px的电量条高度)-(88px的顶部条高度)-(88px的下一步按钮的高度)-(键盘高度520px)=400px的文本框高度;

第二步、(400px的总文本框高度)/(88px单个文本框高度)=4.5个文本框≈4个文本框

【1.3】如果是如果是iPhone6的屏幕尺寸,分辨率为750x1334px的时候, 文本框个数最大值为:6个文本框

【计算公式】

第一步、(1334px屏幕总高度)-(40px的电量条高度)-(88px的顶部条高度)-(88px的下一步按钮的高度)-(键盘高度520px)=598px的文本框高度;

第二步、(598px的总文本框高度)/(88px单个文本框高度)=6.8个文本框≈6个文本框

【综上所述】考虑到支持小屏幕iPhone4的手机,文本框个数的最佳范值是小于2个;

类似尺寸的Android屏幕,参考上述计算公式,即可算出对应文本框个数最大值。

【2】、从避免键盘遮挡文本框的角度来看,滑动键盘和打字键盘是不同的。

App单个页面的最佳文本框个数是多少个?

如上图所示

左边是【打字键盘】,没有可以点击【完成】输入的按钮,如果是3个文本框:那么需要上下滑动,才可以点击下一步按钮。为了不需要上下滑动,一个App的页面,文本框个数的最大值是2个。

右边是【滑动键盘】,点击有效期文本框示,弹出的滑动键盘上有可以点击的【完成】的按钮,如果最后一个文本框是类似【有效期】的可以弹出滑动键盘,有【完成】的按钮,那么最后一个文本框,在点击【完成】按钮之后,就可以出现【下一步】的按钮了。也就是键盘,就不会遮挡文本框了。在最后一个文本框是类似【有效期】文本框,可以弹出滑动键盘的时候,一个App的页面,文本框个数的最大值可以是3个。

【3】、最后一个文本框,是否是短信验证码的输入框。

App单个页面的最佳文本框个数是多少个?

如上图所示

左图只有1个文本框,右图有4个文本框。【左图】VS【右图】,右图的缺点有3个:

一是,【右图】因为文本框超过2个,所以键盘弹起时会遮挡文本框,需要不断上下滑动,才可以完成输入;

二是,【右图】的提示文字和文本框,呈现出文字在上,文本框在下的两行排列方式,实在是浪费了屏幕的高度。如果文字在左,文本框在右的一行排列方式,那就可以节省使用屏幕的高度了;

三是,【右图】的手机号文本框和短信验证码放在同一页,用户需要在填完手机号之后,点击一次【获取验证码】才可以发送验证码短信,而左图在只有一个短信验证码的文本框的情况下,用户跳转到这个页面的时候,短信验证码就在跳转的一瞬间,就发送到手机上了,为用户节省了点击一次【获取验证码】的时间。

【综上所述】如果文本框是短信验证码的输入框,那么文本框个数的最佳值是1个。