手机网页的设计原则，没有移动网站何谈移动营销-资讯中心-长春做网站、长春网站设计、长春网站建设、长春网页制作-吉林省新格网络公司

资讯中心 >> 手机网页的设计原则，没有移动网站何谈移动营销

手机网页的设计原则，没有移动网站何谈移动营销

点击率：1115 发布人：管理员发布日期：2014/2/24 15:45:07 【去百度看看】

在智能手机开始普及的今天，手机网页通常意味着：
较小的显示空间。即使有的手机屏幕分辨率已经与电脑屏幕分辨率相当，但是手机屏幕的物理尺寸还是比电脑屏幕小很多。
手指操作。用户使用手指在手机屏幕上点、滑、按，进行多点触控操作。
有限的网络速度。根据CNNIC于12年11月公布的《中国手机网民上网行为研究报告》，使用2G/2.5G、3G、Wifi上网的手机用户量分别为57、30.4、28.6，大半用户还是在用低速网络上网，即使是3G用户，也常常因为网络状况不好而遭遇上网速度慢。
融合手机特性。智能手机带来诸多便利，用户可以直接在网页上拨打电话、显示电子地图定位、进行一键社交分享、下载安装手机应用等。
直接在手机上显示电脑网页已经不能满足这些新的情况和用户需求。为了创造更好的用户体验，我们对手机网页的设计提出以下建议：

1. 要为手机屏幕优化。
使网页在手机上无论竖屏或横屏都能自适应，内容和功能正常显示，文字和图片清晰可读，重要的内容、功能和导航能在首屏呈现，尽可能将页面滚动局限于垂直方向。
不要直接用未经优化的电脑网页直接当做手机网页，可能因为网页太大，在手机上无法顺畅阅读；可能因为某些内容（比如flash或视频）、代码（比如Java）、插件在手机上不支持，导致网页显示出错或无法显示。

2. 要为多点触控优化。
为按钮、菜单标签、链接等可点击界面元素设置合适的大小，界面元素之间设置合适的间距。参考苹果、谷歌、微软、诺基亚各自的设计规范，可点击界面元素在屏幕上的实际显示尺寸不应小于9毫米、间距不应小于2毫米。可以请手指比较粗的男生和美甲的女生进行测试。
不要用较小的文字链接作为重要的功能或内容入口，不要密集的堆放文字链接，不要将重要的可点击界面元素做的过小、或放置在太过于靠近屏幕角落或边缘的地方（不易点击）。

3. 要让手机网页快速加载。
尽可能压缩手机网页的大小，为手机网页提供专门的小尺寸、经过压缩的图片内容，尽可能减少背景图和小动画等装饰性、但在手机上效果不佳的图片素材的使用，使手机网页能够更快的加载。用分步下载、提示加载状态等方式，使用户感觉网页加载很快，在等待的过程中有事可做，或至少让他们安心等待。
不要直接使用电脑网页的大图，不要让页面内容太多、加载缓慢，不要等到整个页面完全加载以后才显示给用户，不要在网页上使用手机浏览器不支持的内容、代码或插件，导致部分网页示出错或显示。

4. 要重新规划导航的层级、内容、容量、顺序和形式。
手机网页上没有鼠标悬停的状态，并且屏幕空间有限，无法像在电脑网页上那样同时看到多层、丰富的导航内容。手机网页上的导航以两层以内为宜，每层的导航内容以一屏之内可以显示为宜，导航的形式以纵向排列或者九宫格图标排列为宜，复杂网站可以加入搜索功能。因为用户在使用电脑和手机时的情景和需求不同，对于导航内容和顺序的需求也不同，在手机上重要、特色的导航和功能值得直接呈现或排列提前；而一些对手机使用无益的导航和功能就可以隐藏。放置醒目的“后退”和“首页”按钮，方便用户在各级内容间跳转。手机用户希望快速解决问题，所以尽可能直接展示给他们具体内容，而不是强制他们必须通过导航选择。
不要使用鼠标悬停功能，不要在手机网页的导航上使用过多的内容和层级，不要把在手机上重要的导航隐藏或显示在屏幕以外。

5. 要充分利用手机特性。
允许用户直接在网页上拨打电话可以显著提升转化率，并且中国用户更习惯于在电话中与人沟通，而不是通过填表与机器沟通；显示电子地图和用户的定位信息，能帮助用户更加直观的了解周围情况，并进行位置导航；向用户提供分享的内容并鼓励用户进行一键社交分享，能帮你赢得更多的客户；在页面提供下载安装你的手机应用的链接，能增加手机应用的曝光度。
不要显示电话号码却不能直接拨打，显示地图却只是一张图片，放置社交分享链接却不考虑向用户提供适合分享的内容。

6. 要谨慎使用弹出新窗口。
在中国，点击链接弹出新窗口的做法比较常见；但是因为在手机上进行多窗口操作比较困难，而且往往在多窗口切换的时候还会导致页面重新载入和等待，应尽可能避免在手机上不必要的弹出新窗口。
不要使用弹窗广告、浮动窗口广告。

7. 要注意颜色在手机上的显示效果。
手机设备众多、对颜色的显示效果各不相同，并且手机使用的光线环境复杂，要注意使网页内容具有合适的视觉对比度（比如深色背景、浅色文字，或浅色背景、深色文字），以便阅读；要注意颜色显示色差带来的负面影响，比如一个在电脑上看起来很愉悦的颜色，在手机上看起来却大相径庭。
不要以电脑上的视觉效果为准，必须在手机上测试效果，尤其是在不同价位、不同品牌的手机上测试。

8. 要注意文字在手机上的显示效果。
不同操作系统、不同品牌的手机往往内置不同的字体、拥有不同范围的字符集，需要确认网页文字所选用的字体、以及所用的文字是否能正常显示，尤其是繁体中文、特殊字符的内容。另外，文字内容尽可能精简，也会更适合手机阅读。
不要默认文字在手机上和电脑上显示的效果会一样。不要认为用户一定会有耐心在手机上读一大段的文字、并从中看到你认为重要的关键内容。

9. 要使手机和电脑网页保持视觉设计的一致性。
可以为手机网页做特别的、或符合手机操作系统规范的设计调整，但是必须让手机和电脑网页保持视觉设计的一致性，以使用户获得一致的品牌印象，以及延续对网页功能和内容的整体认知、无需重新学习或寻找。
不要在手机和电脑网页上使用不同的视觉设计风格，分裂品牌印象和用户认知。

10. 要考虑跨载体的跳转。
有的商家同时拥有电脑网页、手机网页、手机应用，分别对应不同的用户使用情景，就需要考虑用户在这几个不同载体对应的产品之间跳转时的体验。比如，在电脑网页上收藏的内容如何同步到手机网页上，在手机网页上如何无缝跳转到体验和功能更丰富的手机应用上。
不要让重要的功能在不同载体产品上的使用体验非常不同、甚至缺失，不要限制用户停留在手机网页上、而不能跳转到体验和功能更丰富的手机应用上。

【打印本页】【关闭本页】