Blog

RSS feed
移动建站白皮书
build-design

手机网页的设计原则

在智能手机开始普及的今天,手机网页通常意味着:较小的显示空间。即使有的手机屏幕分辨率已经与电脑屏幕分辨率相当,但是手机屏幕的物理尺寸还是比电脑屏幕小很多。手指操作。用户使用手指在手机屏幕上点、滑、按,进行多点触控操作。

有限的网络速度。根据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. 要考虑跨载体的跳转。

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

Get in touch