移动端制作手机版专题页面的优化要点|运营狗

虽然手机本身有局限，会让我们做手机网页的时候唯唯诺诺，但手机的功能确实越来越强，可以预见在不久的未来，手机可以全部实现目前PC中的功能，网络环境也会越来越好，加载速度的加快也有利于设计师发挥更大的空间。

移动端制作手机版专题页面的优化要点

如今越来越多的移动设备出现在我们身边，作为设计师对网站专题的设计进入到一个新阶段，需要考虑更多的用户访问环境，输入设备，分辨率等不同因素。

响应式网页是目前热门的解决方案，好比一双男生的休闲鞋，可以与所有裤子进行随意搭配，但是对于专题设计来说，响应式设计并不合适。

专题网页的设计通常是短平快，在特定时间达到一些运营需求，而响应式设计通常需要考虑更多不同分辨率下的响应效果，花费的设计和开发时间成本可能是双倍的，而且专题设计具有很强的形式感，响应式设计的流体布局，必然会对视觉造成限制，所以对于专题来说做成响应式的网站需要慎重考虑。

最高效的办法就是传统的为手机版单独做一版设计稿，让手机版网页满足通用的移动设备分辨率。

一、PC版和手机版页面保持一致性

看用户的访问数据来定，一般情况下都是先做PC版的页面再做手机页面，PC端网页可以呈现更丰富的内容，用户浏览网页时更专注，达到最好的体验。

但有很多情况下，页面的访问更多的来自手机端，比如手游的专题，用户通过微信、手Q入口进入，如果开始就先做PC版的专题，想必手机版的内容将是一个移植的PC版网页，让移动版的体验大打折扣。

举个例子，twitter与instagram的PC页面都是从手机端的延展，继承了手机端的交互，保持了一个很好的一致性体验。

二、移动端专题页面的形式

首先，我们要先确定移动端专题页面的形式，基本上移动端网站有3个选项：

1、响应式网站，即网站的域名和URL都不变，只是根据浏览设备而自动调整页面的大小和内容，这主要是靠HTML5和CSS代码实现的（具体可查看马海祥博客《响应式设计时代该如何进行网站设计》的相关介绍）。

2、网站的域名和URL不变，但是根据用户的设备来进行判断，给用户不同的页面，即URL不变，但是HTML页面发生了变化。

3、启用新的子域名，如http://m.mahaixiang.cn，根据用户的设备来进行判断，然后进行跳转。

在这里，我想重点说一下，第一种方式是最佳的方式，但是这种方式也有很多的挑战，而国内普遍采用的是第三种方式，这种方式从网站优化上和成本上都不是非常好，但是客观现实的影响，却比较普遍。

还有就是国内的移动网络的网速实际还比较慢，所以移动端的网站需要进行精简，这样的话对桌面端的网站进行适配是肯定不行的。

1、第一种方式面临的问题是非智能机的浏览器和台式机的IE6等浏览器对HTML5和CSS的支持是存在问题的。

2、第二种方式，我是持谨慎态度的，因为我会担心网站对百度蜘蛛的处理问题，因为百度蜘蛛没有区分移动和桌面的蜘蛛，这样在判断跳转上可能会出现问题，从而对网站的排名和权重有不利的影响。

3、第三种方式，其实是个无奈之选，但是从技术上绝对不是最佳之选。

其实第三种方式最大的挑战就在于使搜索引擎蜘蛛正确的判断我们的网站为移动端网站。

三、跳转方式

根据用户访问设备来进行的跳转的时候，可以采用两种方式HTTP重定向和Javascript重定向。

HTTP重定向就是我们通常说是的301和302重定向，但是我会建议大家采用302重定向的方式，因为如果搜索引擎蜘蛛对页面的判断出现了问题，无法准确判断是移动端网站的时候，采用301跳转回有比较大的风险。

而Javascript重定向这种方法，对某些搜索引擎而言不是很友好。如果对搜索引擎的蜘蛛判断不准确时，即无法判断是否为移动端蜘蛛时，让其返回适配版的HTML版网站即可，无需跳转回桌面版。

四、URL规划

移动端的URL规划最好与桌面端保持一致，除了前面的域名不同以外。如：http://www.mahaixiang.cn/abc.html和m.mahaixiang.cn/abc.html，同时需要注意的是，不要给移动端的URL添加很多追踪参数，使用规范、简单的url，尽量去除与页面内容无关的参数，如用来区分手机型号、区分访问用户，方便统计等的参数（如果需要添加参数的处理方式，可以采用其他的方法）。

我们再帮着搜索引擎判断我们为移动端网站时，主要有2种方法，建议最好是同时采用。

1、DOCTYPE声明

使用DOCTYPE声明有助于搜索引擎识别该页面是否适合手机浏览。

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

例如：

xhtml协议的手机页面中可以使用如下DOCTYPE：<http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

wml协议的手机页面可以使用如下DOCTYPE：<http://www.wapforum.org/DTD/wml_1.1.xml”>

而HTML5协议的DOCTYPE为：<!DOCTYPE HTML>

需要注意的是HTML5的网站容易被搜索引擎判断为是响应式网站，即一个网站可以适配不同的浏览设备。所以，最好还是添加<link>标签。

2、<link>标签

例如：桌面端的页面的可以写为：

移动端的页面的可以写为：

五、安全宽度与扩展区域让页面适应主流分辨率

与PC上网页的做法一样，确定一个安全宽度，把重要信息控制在640PX宽度内(以iphone分辨率为安全宽度，可以根据具体页面投放的渠道做响应的首屏高度。

六、屏幕大小

每个手机都有不同尺寸的屏幕，有的手机会有两种方式的转换：纵向和横向。

所以，你的网站不能是固定的像素宽度，使用百分比和EMS会更好，这种方法能使你的网站适应各种屏幕尺寸（具体可查看马海祥博客《关于移动设备页面尺寸参数和viewport的理解》的相关介绍）。

七、布局

由于网页本身和外在的因素影响，用手机浏览网页可能会是一件比较耗时的事情，所以记住，让您的移动网站设计得方便使用者。

比如，把所有你想让手机用户看到的最重要的信息放到页面顶部；最大限度的避免在界面的左右两侧放置导航，因为为了方便浏览，我们更多需要把页面内容设计成单一的分栏形式。

也应该减少表格的使用，如果一定要加入表格，也不应超过2列，同时避免行与列的融合。

由于屏幕大小的限制，很多情况下铺天盖地的菜单是不被允许的。菜单可能必须采用垂直的方式，但如果每一个单页都需要用户去向下滚动菜单才能看清所有的内容，这可能又会很不舒服。所以，如果你的网站只有三个或者更少的链接，可以采用一直浮在可视窗口形式的菜单，在这种情况下，它恰巧可以是横向的。

比如，在第一页使用导航，在其他页面的顶部使用链接或者面包屑连接到首页。

八、页面的Title和Description设置

Title & Description最好也跟桌面端的网站保持一致，但是可以在网站名称的部分加入手机站的表述，如：

桌面端的网站：<title>马海祥SEO博客-专注于研究SEO的自媒体博客</title>；

而移动端网站则可以写成：<title>手机马海祥SEO博客-专注于研究SEO的自媒体博客</title>或<title>马海祥SEO博客手机版-专注于研究SEO的自媒体博客</title>

九、面包屑导航

面包屑导航是很重要的，其实面包屑导航在不管是桌面端还是移动端都非常重要，但是很多人在移动端容易忽略面包屑导航（具体可查看马海祥博客《移动端网页界面常用的六种导航模式》的相关介绍）。

十、块级化a标签

请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

十一、控制图片的大小

正常情况下大多数手机载入的图片对它们来说都非常繁重，所以在相关地方使用的图像要尽可能的小，而且图片应该是JPEG、GIF或者是PNG格式的，因为这些格式的图片很轻盈。

专题的头图一般有很强的视觉，对于手机用户来说，加载一张图片的等待时间比PC上成本大很多，如果一个页面加载时间超过5秒，70%的用户会选择关闭，那么再出彩的专题也没办法呈现再用户面前了，所以需要对设计稿做折中的处理。

在做头部的延展区域(超出640px范围)，推荐使用纯色，渐变，可以平铺的素材，以便于减少头图的大小，提高加载速度，并且延展区域可以无缝连接，模糊的背景可以最大限度的压缩图片质量。

另外，确保你的图片被压缩过，以免图片在页面中变得很大。还有值得一提一点是：用户经常会浏览到没有打开的图片，因此，最好始终使用alt文本，这是一个值得推荐的做法。

十二、内容

因为用户在浏览你的网页时可能正处于行走的状态，所以应该确保网站上的信息很容易阅读和浏览，并且让用户快速的识别并轻松的找到想要的信息。

要确定好最终要在移动界面上展示的内容，合理地规划好的菜单和文本，避免由此造成的不合理缩放变化。

至于所呈现文本的版式，可以考虑用标题来控制字体大小。

十三、字体

手机中的字号一般上电脑中的两倍，一般在电脑中用的12px的字体在手机网页中就该使用24px。在设计的过程中，也要使用iOS和安卓默认渲染的字体，以便更真实的还原真实环境。

在规范手游移动版专题中，主要字号控制在3个，大中小都有一个区间，避免随意用字体字号，并且字号必须上整数。

十四、控件交互区域适合触控

手机专题的主按钮高度大于80px，并且根据活动的需求放在首屏内，文字链接上下的间距大于80px，手指在屏幕上热区最小感应是44px（具体可查看马海祥博客《手机网站制作的常用方法及优化技巧》的相关介绍）。

十五、如何去除Android平台中对邮箱地址的识别

看过iOS webapp API的同学都知道iOS提供了一个meta标签，用于禁用iOS对页面中电话号码的自动识别。

在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中：

十六、移动端网页少用跳转

手机用户的网络环境不如PC用户，页面的跳转会对用户产生更大的心理效力，如果在手机页面中能吧信息合理的展示在一个页面中最佳。

如果非要跳转，咱们可以用些假装不是跳转的方式，比如展开，浮出等，减少用户产生的不安全感（具体可查看马海祥博客《我对网站移动端建设的一些看法》的相关介绍）。

十七、iOS中如何彻底禁止用户在新窗口打开页面

有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空。

但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮，这个技巧仅适用iOS对于Android平台则无效。

十八、页面大小

为一个移动网站指定风格时，保持所有的东西简洁，尽量追求小页面是非常有必要的。移动页面最大容量是20KB，所以要确保一切尽量满足这一点。如果可能的话，页面的大小可以小于10KB。

要知道，用户在移动网络上的数据费用是以KB为单位收取的。

总结

虽然手机因为性能，网络等限制因素，不能达到PC专题那么优秀的效果，但手机网页还是有他独有的优势，手机网页也是可以动起来的，而且还可以通过手机特有的重力感应功能做视差滚动效果的交互，看起来很优雅，通过手机控制PC页面的浏览也是一种新体验，不妨试试挖掘更多可能性。

-END-

特别申明：本站的主旨在于收集互联网运营相关的干货知识，给运营小伙伴提供便利。网站所收集到的公开内容均来自于互联网或用户投稿，并不代表本站认同其观点，也不对网站内容的真实性负责，如有侵权，请联系站长删除，转载请注明出处：移动端制作手机版专题页面的优化要点：https://www.zcly.cn/67662.html。