【交互设计】七步打造手机网站

转载自：老二牛车教育 » 【交互设计】七步打造手机网站

编者按：随着大屏手机的普及，网站大都需要适配手机版（这简直是一定的）。不过在有限的空间上想将整个桌面端网页转移上去，设计师可需要下工夫了， 得择重避轻、全面考虑、无缝对接，等等等等。今天分享的好文，从7个方面帮你打造卓越的移动网站，文章很全面，设计师和产品经理都可以学习一下。

zchening（周晨）：现在手机上App很火爆，看到最近很流行的游戏很多人就会去装一个。可实际上不少应用都是一些偶发性的需求，比如我最近 要租房子装了个58同城，可我不可能天天租房子，租完房子之后这个应用我就几乎不会打开了。想想我们平常经常使用的应用也就3-5个，微博、微信、浏览器 等，一般最多不会超过7个。普通人的大脑无法同时处理七件以上的信息单位，人们在列出必须记牢的事项上多半只列到第七项：一周有7天，音乐有7个音符，电 话号码通常是7位数，世界奇迹是7个、七仙女、白雪公主和7个小矮人等。(更多请查看神奇的7±2法则)

一方面是用户偶发性的需求，一方面却是开发者面对移动互联网海量用户的渴求，如何平衡这两者之前的矛盾呢？专为移动设备优化的移动网站是可行的方案之一。

下面是几个案例。

2012年淘宝无线网站（m.taobao.com）的访问量增长了6.4倍，占淘宝流量的比例也从2%上升到11%，其中并不包含来自于App应 用的访问。携程也是个很好的例子，其手机网站（m.ctrip.com）推出后订单成交量增加了5倍。携程通过向访问手机网的消费者进行了调研，对预订过 程进行优化。并且采用了HTML5技术，访问网站可以很清晰的看到机票、酒店、航班动态、门票、火车篇、我的携程6个模块，看上去和APP非常像。如果别 人的案例不具有说服力那我就举我自己的例子：回来后特意去看了下公司的网站（视频网站），移动设备的日均PV浏览量达到了40万！要知道，我们的网站没有 针对移动设备做任何优化，而且这些视频在手机上都是无法观看的。

既然移动网站如此重要，那应该如何来优化移动站点，向手机用户提供良好的用户体验呢?这七条策略或许可以给大家一些启发：

一、考虑多元化场景

移动用户的访问场景经常是多元化的，公交车上、厕所、排队等人等各种场景都有，而且随时都可能被打断，更多的是利用碎片化的时间，所以网站简便快捷 非常重要。可以利用数据分析移动用户最感兴趣的内容，切记避免大量文字的堆积。如果不能避免大量文字，也要注重排版，分成多个节点来显示。尽可能地压缩图 片，帮助用户节省流量，加快载入速度。即使你的图片做的再精美但访问需要30秒那极有可能用户在看到网站之前就关掉了。电梯、公交车等场景还要考虑拥挤的 空间，你的按钮是否足够大，流程是否足够顺畅简单，以至于用户单手也能完成。另外你还需要考虑当用户切换手机屏幕方向时（如由竖屏切换到横屏）你如何处 理，是否需要对此进行适配，是否需要展示其他的一些内容（如图表）。还有就是通过文字、背景配色等方式，让用户在光线不足，甚至是阳光下也能有效捕捉信 息。

或许有人觉得这些情况过于极端，但在极端情况下如果仍旧能保证良好的用户体验，这样高标准下正常情况的体验也会相应提高，同时超出了用户的预期，用户对产品的好感度也会增加。

二、简化导航，减少输入

导航的目的就是方便用户从大量内容中快速找到自己需要的内容。移动站点受限于屏幕尺寸和用户习惯，导航要尽可能少而精。如果内容过多时还需要在显眼 处添加搜索框，支持诸如语音等方式搜索。如果你有两个导航方案不知道哪个更好，可以分别在两个时间点分别部署在网站上，看看页面访问量、持续时间等数据的 变化来辅助你做判断，一切用数据说话。当然这并不是让你频繁改版，频繁的改版会让用户茫然无措。

三、为不同设备优化

考虑为不同的设备做优化，比如塞班手机或者低端手机、大屏智能手机、iPhone、iPad平板电脑访问时分别显示什么。利用响应式网页设计（RWD） 等技术让页面自适应，同时针对不同的设备做不同的优化和响应（触屏、重力感应、定向等）。虽然前期实现成本相对大一些却一劳永逸，以后改动成本很小。通过 HTML5等强化页面表现层次、加强多媒体信息的展示（取决于网站定位和性质，一般的网站不建议用过多使用多媒体资源），改善人机交互体验等。移动设备访 问时可以通过重定向等方式引导到适合移动设备访问的站点。

另外，要提供其他版本的切换方式，如果用户用移动设备时需要切换到电脑版通常是因为他需要用到电脑版中存在但移动版舍弃的部分功能，也有可能是对用 户的设备进行了错误的判断。切到电脑版之后也要提供让他可以方便切回移动版的选项。比如移动购物网站，手机上搜索对于用户来说比较麻烦，所以大家更喜欢直 接去逛，因此对于无线的导购产品来说就需要把直接、精准、精品的货品交到客户的手上。另外，手机上通常小额的商品比如说彩票下单率比较高。这些都需要针对 不同的设备做出优化。

四、考虑跨平台问题

对于部分特殊的网站（有用户ID系统和同步需要），还需要考虑跨平台同步时的体验。如何让用户在多个设备间可以顺畅的切换。对于移动购物网站，不少 用户因为支付安全顾虑和网银习惯在手机上下单（可能在等公交车时下单），然后再用PC去付款（比如下班回到家）。这时候如何让用户在跨平台时流程顺畅特别 重要。再以多看阅读（虽然不是网站）为例，当你下班前在等公交车时用手机上看《乌合之众》看到第X页，晚上躺在床上拿出iPad看时会自动从服务器获取最 新的阅读进度。

五、转移复杂性

所谓转移复杂性，就是让每个平台（手机、平板、PC等）发挥自己最大的优势。比如移动平台（手机、平板电脑）等可以拍照，可以随时随地使用，能够精确识别位置和方向，但不方便输入大量文字，显示信息较少，而且数据传输速度有限。但这些缺陷却是PC的优点。

比如，在移动网站上输入大量文字是一件非常痛苦的事!如果你的网站经常需要用户输入大量文字，你可以给用户一些建议，将他引流到PC网站上。或者采 用语音的方式来输入文本。另外你不需要把PC网站上的内容原封不动地搬到移动网站上，而且这通常来说也很愚蠢。你可以通过数据分析和移动场景分析，来看看 移动网站上用户对哪些内容更感兴趣。在一些平台上很容易的事情在其他平台上往往会变得异常复杂，如何充分利用每个平台的优势，这需要网站设计者仔细考虑。

六、简化业务流程

结合网站业务特性，仔细考虑如何简化流程，让用户在站点上方便地完成操作。比如网站在PC上注册时需要填写大量信息，在移动网站注册时能否填写尽可能少的信息(比如移动设备访问时推荐用手机号码注册)，不用填验证码等。

七、培养热心用户，持续改进

互联网产品永远都是Beta版，你会发现也许之前设想得很好的方案结果到用户手里完全不是那么一回事。那就去听听用户的声音，根据用户的建议迭代开 发，当然不是所有的用户都愿意给你提供建议，最好培养部分忠诚用户给他们优先试用权和其他激励。不一定是物质上的，有时候他们的意见得到采纳也是对他们莫 大的鼓舞。当然，这并不意味你可以随意的添加功能一开发完就可以让他们使用。在开发前和原型阶段就可以邀请部分用户来测试，这样避免后期开发资源的浪费。 开发完也要进行必要的自测，避免到他们手上的是一个有各种bug完全不可用的产品。

转载请注明：老二牛车教育 » 【交互设计】七步打造手机网站