前端页面开发浅谈：PC 端设计如何“完美，2024年最新基于微信小程序设计与实现-优快云博客

本文链接：https://blog.youkuaiyun.com/tencentes/article/details/137507187

本文探讨了前端页面开发，特别是针对微信小程序的设计与实现。强调了在PC端设计时要考虑用户体验，如扩大可操作范围、处理输入框问题、优化编码结构。文章详细讨论了form、label和button标签的使用，以及兼容性和输入框的处理策略。此外，还涉及到了前端性能优化，包括资源请求、浏览器渲染和代码逻辑流程。最后，作者强调前端开发不仅仅是编写代码，更关乎构建与用户沟通的产品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这就需要我们开发者对于屏幕内容（菜单等信息）做出处理，扩大可操作范围，以满足用户的需求。

我们不仅需要在开发设计的阶段考虑这些问题，在项目上线之前也一定要在真机环境下测试，而非仅仅在浏览器中点点即可。

在这里插入图片描述
例如：我们日常所使用的微信，虽然底部 4 个菜单的占用位置不大，但是可触控的范围却是很大的，大家可以试一下，如下图所示：

在这里插入图片描述

5.2.2、特殊样式

实现多种特殊控件的交互，如多选、下拉菜单等等。

例如：如下图所示，在华为云官网的弹性云服务器的控制台这里就做了一个很好的处理，我们可以看到在 PC 端和移动端的交互方式也是不一样的。

PC 端的控制台如下图所示：

在这里插入图片描述
移动端的控制台如下图所示：

在这里插入图片描述
小结：曾经的我们是以简单的自适应来满足对系统功能的需求，而现在简单的自适应已经无法满足日益增长的用户移动端需求了。很多开发商都是专门做两套不同端的应用以满足用户。

5.3、编码

编码是开发人员的立足之本，只是“会写”是不行的，更要结构坚固、形式优美……

对于上面例子的表单内容，我们在代码方面做如下分析：

我们使用了如下几个熟悉的前端标签：<form>、<label>、<input>、<button>

可能有人会说，“哎你为什么不直接用<div>呢，<div> 和 js 不香吗？”

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

5.3.1、form 标签

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

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

在这里插入图片描述

5.3.2、label 标签

<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>明确含义，天生强大，为点击而生。

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 文档。

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

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

在这里插入图片描述

7.1、性能检查

PageSpeed Insights
Lighthouse
瀑布图

7.2、页面打开流程

DNS 解析
…
三次握手
发送资源请求
…
服务器返回内容
继续请求+进行渲染
…
渲染完成

7.3、资源请求

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

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

7.3.1、请求数量

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

缓存
懒加载
合并资源（雪碧图、打包工具）
http2、http3

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

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

在这里插入图片描述

使用多个资源域名，提高并发查询数量
…

7.3.2、请求时间

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

加快网速
减小访问资源的大小：webpack 压缩、gzip、资源再压缩，相同的资源，我们进行压缩之后效率会提升很多
CDN
骨架图
…

7.4、浏览器渲染

避免过多的 js 阻塞，将不重要的 js 放在尾部，减少加载阻塞
避免回流
标签属性如 defer、async、preload 等
懒加载，浏览器渲染过程中减少浏览器负担的方法
预加载，依赖资源的预处理

7.5、开始浏览、交互

操作前友好提醒，提醒用户去怎么做
操作中实时感知，用户跟着系统走
操作后及时反馈，用户信息输入是否正确的实时检验

7.6、后续行为

AB 测试
埋点上报、分析，做好科学的埋点规划以及多维度的全面分析
……

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

在这里插入图片描述

文章作者：白鹿第一帅，作者主页：https://blog.youkuaiyun.com/qq_22695001，未经授权，严禁转载，侵权必究！

总结

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

对于页面布局

一个不懂得合理规划页面的程序员不是好设计师
注意移动端的特点
站在使用者的角度再体验一次

对于设计编码

掌握基础
注意细节
有所追求

对于结构流程

理解整条链路
从哪里来，到何处去
明确目的是什么

程序员的目标

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

在这里插入图片描述

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

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数同学面临毕业设计项目选题时，很多人都会感到无从下手，尤其是对于计算机专业的学生来说，选择一个合适的题目尤为重要。因为毕业设计不仅是我们在大学四年学习的一个总结，更是展示自己能力的重要机会。

因此收集整理了一份《2024年计算机毕业设计项目大全》，初衷也很简单，就是希望能够帮助提高效率，同时减轻大家的负担。

既有Java、Web、PHP、也有C、小程序、Python等项目供你选择，真正体系化！

由于项目比较多，这里只是将部分目录截图出来，每个节点里面都包含素材文档、项目源码、讲解视频

如果你觉得这些内容对你有帮助，可以添加VX：vip1024c （备注项目大全获取）

自己能力的重要机会。**

因此收集整理了一份《2024年计算机毕业设计项目大全》，初衷也很简单，就是希望能够帮助提高效率，同时减轻大家的负担。
[外链图片转存中…(img-XVTaNZWB-1712556557150)]
[外链图片转存中…(img-ZsAJ323B-1712556557151)]
[外链图片转存中…(img-nmeSHSPd-1712556557151)]

既有Java、Web、PHP、也有C、小程序、Python等项目供你选择，真正体系化！

由于项目比较多，这里只是将部分目录截图出来，每个节点里面都包含素材文档、项目源码、讲解视频

如果你觉得这些内容对你有帮助，可以添加VX：vip1024c （备注项目大全获取）
[外链图片转存中…(img-X4RNW8ce-1712556557151)]