作为一个老司机级别的前端工程师，我特别懂手机页面怎么弄才好看。你看，手机和平板跟电脑不一样，它们的特点让我们在做设计时要注意很多小细节，才能给用户带来好的体验。今天，我就来聊聊我是怎么看待单容器页面结构、多容器页面结构、外部页面链接切换还有预加载和页面缓存这些问题的。
一、单容器页面结构
Jquery mobile 基本页面框架
标题
内容部分
页脚
在手机上，屏幕小，所以咱们就用单个大盒子装东西，全部的内容都放在这个大盒子里头。这样搞简单好整，但是设计的时候得想想怎么把这堆东西整理漂亮并让人容易操作。
把浏览器的缩放宽度和级别调好，就能让网页宽度跟手机屏幕一样宽，这样不管屏幕大小怎么变，网页都能正常显示。平时我都是用viewportmeta标签设定缩放比的，这样无论手机尺寸如何，网页都展现得美美的！
二、多容器页面结构
多容器页就是在单容器页的基础上搞出来的，把整个页面切成好几个小块，每个块包揽不一样的东东。这个方法好处就在于能让你的版面变得更灵活，但坏处就是页面管理会变得麻烦些。
说到多容器网页布局，你知道data-add-back-btn？就是用来判断是不是要在整个容器的顶左加个“后退”钮，常规默认为否。这个属性，就是为了方便大家快速返回上一页。不过具体加不加，还得看实际需求。还有，用data-rel属性也能实现后退功能，而且更自由，想怎么控制就怎么控制。
Jquery mobile 基本页面框架
标题
内容部分
下一页
页脚
标题
内容部分
页脚
三、外部页面链接切换
手机上网时，我们常用Ajax（异步JavaScript）技术来快速切换网页，这样浏览起来更舒服。不过有时候你可能想让浏览器直接跳转到新页面，这时只需给链接加上rel=”external”这个属性就好，浏览器就知道该怎么做了。
在搞开发时，我会看页面需求决定用不用AJAX，比如那些要大把数据或有复杂交互的页面，就直接用AJAX提升效率。至于简简单单的页面，我就直接扔个外链过去，省得页面加载慢。
四、预加载与页面缓存
手机上用预加载和缓存能大大提升页面速度！用了这个功能的话，DOM内容会变得更大。不过别忘了用的时候记得清理缓存，免得占太多内存。
把网页的data-dom-cache设成true会让页面内容存进缓存里，加速浏览速度！在实践过程中，我看访问页频次和内容更新的频率来决定用不用这个缓存功能。如果访问率高但内容更新少，那就开了缓存，提升用户体验；反之，更新多的话，就关掉缓存，保证大家看到的都是新鲜的信息。
Jquery mobile 基本页面框架
标题
内容部分
下一页
页脚
标题
页脚
五、用户体验与页面设计
做手机网页设计，用户体验最重要！不管你是用单个容器还是多个容器，目的当然就是让用户觉得方便舒服。所以我设计网页时候会特别注意用户的使用习惯，尽量简化操作步骤，让他们能更快找到想要的东西。
六、性能优化与资源管理
Jquery mobile 基本页面框架
外部页面
你好，感谢你的关注
手机开发中的性能优化很重要！预加载和缓存只是其中之一，还得学会控制网页上的各种资源，避免不必要的下载浪费。比如，我就喜欢把网页上的图片、脚本、样式表这些东西都给压缩并合到一起，这样就能减少HTTP请求的次数，让网页加载更快~
七、响应式设计与适配
现在手机太多样了，所以响应式设计很关键。我们得保证无论屏幕大小还是分辨率，页面看起来都好。定制不同设备显示的样式，我用媒体查询搞定，这样不管啥手机，页面都美美的！
八、交互元素的设计与实现
手机上的操作UI有好多互动元素，比如按的钮、滑的条、下拉的菜单什么的。这些咋设计和实现？直接关系到大家用得舒不舒服呐！我主要就是想好了各种设备怎么玩这类玩意儿，比如摸一摸、划一划啥的，让大家用起来顺手就行。
九、测试与迭代
说到做移动端开发，测试可是大头儿！得跑遍各种设备和浏览器去试，看网页能不能吃得消，稳不稳定。实践中，我可天天都在测，然后照着测试结果去调整页面，让它更好用、更给力！
十、总结与展望
明白了，给手机页面做设计可不简单，既要看懂技术，也得懂得怎么让用户用着舒服。而且，以后移动设备只会变得越来越厉害，咱们都会遇到更多的难题。但我相信，只要咱们多学多练，就能给大家带来更好的服务！
最后，给你们抛出个问题哦：用过这么多手机app，最让你们心动的交互是啥？快来评论告诉我！帖子也别忘了一键三连让更多小伙伴加入咱们的讨论~
评论0