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

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

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

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

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

【计算公式】

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

【基本尺寸】

40px是电量条的高度；

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

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

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

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

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

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

【计算公式】

第一步、（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】、从避免键盘遮挡文本框的角度来看，滑动键盘和打字键盘是不同的。

如上图所示

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

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

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

如上图所示

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

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

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

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

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