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个。
来源于近乎;近乎源码下载地址:http://www.jinhusns.com/Products/Download/?type=xcj
App单个页面的最佳文本框个数是多少个?的更多相关文章
- JavaScript实现在页面上的文本框中输入小写字母自动变为大写字母
<script language="javascript" type="text/javascript"> $(function () { $(&q ...
- 页面中word文本框的编辑,两种方式
大致效果图(对其中的功能可以增减): 实现方法1:调用js <link href="../../platform/js/kindeditor/themes/default/defaul ...
- html和jsp页面中把文本框禁用,只能读不能写的方法
方法常用有三种: 第一种,使用 onfocus="this.blur()" <input name="deptno" type="text& ...
- Lodop输出页面input文本框的最新值
默认使用Lodop打印页面上的文本框等,会发现虽然页面上文本框输入了值,打印预览却是空的,这是由于没有把最新的值传入Lodop. 如图,演示的是Lodop如何输出文本框内的新值,这里整个页面只有inp ...
- 文本框defalutValue的使用
以下页面中的文本框的值无论怎么改变,点击“原始值”按钮始终会得到初始页面的时候的值,即“ffffffffffffff” <!DOCTYPE html> <html> <h ...
- 如何去掉IE文本框后的那个X css代码
在IE10以上版本中,页面上的文本框控件在输入文字时候会被自动加上一个X.但是IE这个自作聪明的功能有时候会让我们的页面爆掉,比如当文本框宽度过小,X显示不下时候会顶掉你的文本. 要隐藏这个X可以用I ...
- cognos report利用文本框提示优化日期维度
为了尽量减少手工对日期维度的维护,在日期维度表中年份已经到了2099年,把年份作为下拉框或者月份作为下拉框的时候,选择起来颇为麻烦(当然也可以在此基础之上设置默认为当前月) 如图:提示页面以及html ...
- 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
随机推荐
- [硬件项目] 2、汽车倒车雷达设计——基于专用倒车雷达芯片GM3101的设计方案与采用CX20106A红外线检测芯片方案对比
前言 尽管每辆汽车都有后视镜,但不可避免地都存在一个后视镜的盲区,倒车雷达则可一定程度帮助驾驶员扫除视野死角和视线模糊的缺陷,提高驾驶安全性.上一节已经分析清倒车雷达的语音模块(上一节),本节将深入分 ...
- MFC CString::GetBuffer() 内存数据异常
问题描述 在项目中的一个文件路径存储在CString的对象中,这个对象在函数间传递了几次,当传递出来的时候,因为要使用到字符指针,所以GetBuffer获取字符串的指针,但是通过调试,发现,CStri ...
- IOS Socket 04-利用框架CocoaAsyncSocket实现客户端/服务器端
这篇文章,我们介绍CocoaAsyncSocket框架的使用,主要介绍实现客户端/服务器端代码,相信在网上已经很多这样的文章了,这里做一下自己的总结.这里介绍使用GCD方式 一.客户端 1.下载地址 ...
- 大数据平台R语言web UI应用架构 设计与开发
1. 系统拓扑图 在日常业务分析中,R是非常常用的分析工具,而当数据量较大时,用R语言需要需用更多的时间来完成训练模型,spark作为大规模数据处理框架,采用内存计算,可以短时间内完成大量的数据的处理 ...
- FIR.im Weekly - 劳动节我们也没有停下来
五一到五四的节假日对勤劳的开发者们似乎是零存在,各种干货好资源也并未因假期的到来而减少,所以这周的 Weekly 依然多产. Swift 样式指南:2015年4月更新 这是 @开发技术前线 收录的由 ...
- 快速入门系列--MVC--01概述
虽然使用MVC已经不少年,相关技术的学习进行了多次,但是很多技术思路的理解其实都不够深入.其实就在MVC框架中有很多设计模式和设计思路的体现,例如DependencyResolver类就包含我们常见的 ...
- dropdownlist同时绑定数据库和自定义内容
在有些时候,我们需要dropdownlist里面包含“全部”这个字段,但是数据库中不存在“全部”,只存在具体的分类项. 这种情况下就需要先把数据库的数据源绑定到dropdownlist中,然后再在后面 ...
- 深入理解javascript函数系列第一篇——函数概述
× 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...
- Oracle工具之DBNEWID
DBNEWID是Oracle提供的一个用于修改数据库DBID和DBNAME的工具. 在引进该工具之前,如果我们想修改数据库的数据库名,必须重建控制文件.但即便如此,也无法修改该数据库的DBID.众所周 ...
- Yii的学习(1)--安装配置
之前在sina博客写过Yii的文章,来到博客园之后,没再写过关于Yii的文章,正好端午假期没啥事,就结合以前的博客,Yii的官方文档,再加上最近的关于Yii的收获总结一下,写个系列~~ Yii是一个基 ...