教你七步打造卓越的移动网站.doc

教你七步打造卓越的移动网站 编者按：随着大屏手机的普及，网站大都需要适配手机版（这简直是一定的）。不过在有限 的空间上想将整个桌面端网页转移上去，设计师可需要下工夫了， 得择重避轻、全面考虑、 无缝对接，等等等等。今天分享的好文，从7个方面帮你打造卓越的移动网站，文章很全面， 设计师和产品经理都可以学习一下。 zchening（周晨）：现在手机上App很火爆，看到最近很流行的游戏很多人就会去装一个。可实际 上不少应用都是一些偶发性的需求，比如我最近 要租房子装了个58同城，可我不可能天天租房子， 租完房子之后这个应用我就几乎不会打开了。想想我们平常经常使用的应用也就3-5个，微博、微信 、浏览器 等，一般最多不会超过7个。普通人的大脑无法同时处理七件以上的信息单位，人们在列 出必须记牢的事项上多半只列到第七项：一周有7天，音乐有7个音符，电 话号码通常是7位数，世 界奇迹是7个、七仙女、白雪公主和7个小矮人等。(更多请查看神奇的7±2法则) 一方面是用户偶发性的需求，一方面却是开发者面对移动互联网海量用户的渴求，如何平衡这两者 之前的矛盾呢？专为移动设备优化的移动网站是可行的方案之一。 下面是几个案例。 2012年淘宝无线网站（）的访问量增长了6.4倍，占淘宝流量的比例也从2%上升 到11%，其中并不包含来自于App应 用的访问。携程也是个很好的例子，其手机网站（ ）推出后订单成交量增加了5倍。携程通过向访问手机网的消费者进行了调研，对预订过 程进行 优化。并且采用了HTML5技术，访问网站可以很清晰的看到机票、酒店、航班动态、门票、火车篇 、我的携程6个模块，看上去和APP非常像。如果别 人的案例不具有说服力那我就举我自己的例子 ：回来后特意去看了下公司的网站（视频网站），移动设备的日均PV浏览量达到了40万！要知道， 我们的网站没有 针对移动设备做任何优化，而且这些视频在手机上都是无法观看的。 既然移动网站如此重要，那应该如何来优化移动站点，向手机用户提供良好的用户体验呢?这七条 策略或许可以给大家一些启发：  一、考虑多元化场景 移动用户的访问场景经常是多元化的，公交车上、厕所、排队等人等各种场景都有，而且随时都可 能被打断，更多的是利用碎片化的时间，所以网站简便快捷 非常重要。可以利用数据分析移动用户 最感兴趣的内容，切记避免大量文字的堆积。如果不能避免大量文字，也要注重排版，分成多个节 点来显示。尽可能地压缩图 片，帮助用户节省流量，加快载入速度。即使你的图片做的再精美但访 问需要30秒那极有可能用户在看到网站之前就关掉了。电梯、公交车等场景还要考虑拥挤的 空间， 你的按钮是否足够大，流程是否足够顺畅简单，以至于用户单手也能完成。另外你还需要考虑当用 户切换手机屏幕方向时（如由竖屏切换到横屏）你如何处 理，是否需要对此进行适配，是否需要展 示其他的一些内容（如图表）。还有就是通过文字、背景配色等方式，让用户在光线不足，甚至是 阳光下也能有效捕捉信 息。 或许有人觉得这些情况过于极端，但在极端情况下如果仍旧能保证良好的用户体验，这样高标准下 正常情况的体验也会相应提高，同时超出了用户的预期，用户对产品的好感度也会增加。 二、简化导航，减少输入 导航的目的就是方便用户从大量内容中快速找到自己需要的内容。移动站点受限于屏幕尺寸和用户 习惯，导航要尽可能少而精。如果内容过多时还需要在显眼 处添加搜索框，支持诸如语音等方式 搜索。如果你有两个导航方案不知道哪个更好，可以分别在两个时间点分别部署在网站上，看看页 面访问量、持续时间等数据的 变化来辅助你做判断，一切用数据说话。当然这并不是让你频繁改版 ，频繁的改版会让用户茫然无措。  三、为不同设备优化 考虑为不同的设备做优化，比如塞班手机或者低端手机、大屏智能手机、iPhone、iPad平板电脑访 问时分别显示什么。利用响应式网页设计（RWD） 等技术让页面自适应，同时针对不同的设备做 不同的优化和响应（触屏、重力感应、定向等）。虽然前期实现成本相对大一些却一劳永逸，以后 改动成本很小。通过 HTML5等强化页面表现层次、加强多媒体信息的展示（取决于网站定位和 性质，一般的网站不建议用过多使用多媒体资源），改善人机交互体验等。移动设备访 问时可以通 过重定向等方式引导到适合移动设备访问的站点。 另外，要提供其他版本的切换方式，如果用户用移动设备时需要切换到电脑版通常是因为他需要用 到电脑版中存在但移动版舍弃的部分功能，也有可能是对用 户的设备进行了错误的判断。切到电脑 版之后也要提供让他可以方便切回移动版的选项。比如移动购物网站，手机上搜索对于用户来说比 较麻烦，所以大家更喜欢直 接去逛，因此对于无线的导购产品来说就需要把直接、精准、精品的货 品交到客户的手上。另外，手机上