前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？-JieYingAI捷鹰AI

和 js 能有什么坏心眼儿呢，无非就是让你写了不必要的代码。“最好的食材往往只需要最朴素的烹饪方式。”

5.3.1、form 标签

可以最大限度的保证功能的正常执行。它具有 div+js+jquery 无法满足的功能，具有 action、method，同时 form 标签可以保证页面在 js 与 jquery 无法加载成功的前提下表单正常提交，而不依赖于整个前端框架的加载，这是一个分离的思想。

只谈技术，国内前端的标杆目前还是淘系团队。如下图所示，淘宝目前登录页使用的还是 form 标签，这就说明 form 承载淘宝这种大用户量级别的登陆需求是完全没问题的。

5.3.2、label 标签

标签可以实现点击聚焦，并且提供了 screen reader 等 AIRA 功能。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

注意：标签的 for 属性应当与相关元素的 id 属性相同。

<body>
<p>请点击文本标记之一，就可以触发相关控件：</p>
<form>
<label for="phone">手机号</label>
<input type="radio" name="sex" id="phone" />
<br />
<label for="password">密码</label>
<input type="radio" name="sex" id="password" />
</form>
</body>

注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

上面代码的运行结果如下图所示：

这就在之前的基础上大大增加了手指可触控的范围，提升用户体验。

AIRA 功能帮助具有阅读障碍的人群，提供包括 screen reader 在内的朗读功能。反之如果使用 div 则较难实现。

5.3.3、button 标签

明确含义，天生强大，为点击而生。

button 标签内的内容全可以自定义，如添加图标。同时其最佳的地方就是我们可以将其设置 submit。

5.4、兼容性

需要进行多个测试，甚至包括但不局限于使用抖音等内置浏览器来测试运行。

六、充满陷阱的输入框6.1、输入框太多

减少不必要的输入框，我们可以对大量的输入框表单做分屏处理。

6.2、focus 后效果不佳

输入框太多导致部分内容被遮挡。常见的如键盘挡住了表单的提交按钮，如下图所示：

而华为云 APP 就很好的解决了这个问题，如下图所示：

我们点击任意模块，屏幕都会自行调整到当前最合适的位置，如下图所示：

6.3、错误提示不可见

错误提示不可见的话就会导致用户以为当前页面无响应。用户输入信息之后毫无反应。

6.4、强制重复输入

PC 端直接照搬到移动端是不可取的，PC 端打字的成本要比移动端低很多。

现在的很多厂商，在用户输入密码后显示几秒钟之后自动进行加密处理，将明文转换为密文。既满足了提示用户的功能，也对用户的隐私安全做足了保障。或者摒弃密码输入，让用户通过手机验证码进行登录。

6.5、保存已填项

通过 cookie 来在本地实现，通过 session 来在远程服务期实现。在获取用户权限的情况下无需再次重复输入，如“记住登录密码”。

6.6、预览确认

用户在表单信息填写完成之后添加预览选项，供用户进行二次信息确认，这个要根据实际情况来决定，如票务系统、志愿填报系统等。

6.7、input 不仅仅是个输入框6.7.1、属性

具有 type、autocomplete 、autofocus 、name 、placeholder、… 等等一系列重要属性，开发者要将属性设置在该设置到的地方。

如用户重置密码不需要自动填充 autocomplete，autofocus 指引用户定位、进行操作。

而 placeholder 导致用户容易遗忘，要谨慎使用，减少用户的记忆负担，提升用户体验。

6.7.2、样式

可以设置整体尺寸、padding、margin、border、…

6.7.3、自带检查

:invalid、:not(:placeholder-shown)、…

我们还可以使用 required 达到对输入框快速检查的一个效果。而用户输入的信息校验，正则表达式任是首选。

对于数字的限定我们应采用 inputmode 而非 number。

更多关于标签的具体内容多去查看 mdn 文档。

六、“云层之下”-代码的逻辑流程

用户访问资源的流程如下图所示：

6.1、性能检查6.2、页面打开流程6.3、资源请求

根据上面的页面打开流程我们可以发现，资源请求主要在于请求数量和请求时间这两个部分的优化，它们之间是属于正相关关系。这时我们提升访问速度的着重内容，对此《人月神话》对这个工作量计算有明确的介绍和说明，建议大家观看，同时可以对企业管理的工作量有一个新的认知。

相同的资源，请求的数量越大，时间越短，用户的体验也就越好！

6.3.1、请求数量

增加请求数量可以从下面着手：

我们通过 Akamai 来测试相同网络环境下，不同 http 的加载区别：http2.akamai.com/demo

效果显而易见，如下图所示：

6.3.2、请求时间

减少请求时间可以从下面着手：

6.4、浏览器渲染6.6、开始浏览、交互6.7、后续行为

关于 abtest Obama 团队的操作就是一个亮点，在选举网站上修改的竞选标语提高了民众支持率，如下图所示：

总结

在以下我们分别从布局、编码、流程和目标方面对 H5 页面的注意事项进行一个总结。

对于页面布局对于设计编码对于结构流程程序员的目标

做前端程序员不是只写代码就可以。我们编写的也不仅仅是 H5 页面、小程序，而是一个和用户沟通，产生价值的产品，甚至是一个改变世界的梦想。比如，把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界，这是我们的追求！

我是白鹿，一个不懈奋斗的程序猿。望本文能对你有所裨益，欢迎大家的一键三连！若有其他问题、建议或者补充可以留言在文章下方，感谢大家的支持！

版权声明 1 本网站名称：捷鹰AI导航
2 本站永久网址：www.jieyingai.com
3 本站原创内容转载请注明出处，付费内容未经本站授权禁止转载二次发布
4 本站所有内容禁止用于任何非法用途！部分文章、素材、资源软件来自网络，仅供大家学习与参考。如有侵权，请联系站长QQ:1392478547进行删除处理
5 本站投稿禁止发布任何违法内容，如发现将立即封号处理，欢迎举报监督
6 本站附件资源、教程等内容如因时效原因失效或不可用，请联系留言或联系站长及时更新

THE END