leadwhite

任何一款互联网产品在设计之初的时候都会遇到一个问题：如何根据产品自身的核心功能选择适合的设计模式，同时通过遵循不同平台的设计规范削减用户的学习成本、改善交互体验。这一问题落实到手机移动端的交互设计上，就会细化成一些更加具体的问题：

1、 相对于web平台，手机端的产品应当进行哪些内容和布局方面的改进，以贴合用户的使用习惯？

2、同一产品在IOS与安卓两大平台上，是应当采取相同或相似的设计模式，还是针对不同平台的实际情况和设计规范，分别进行设计？

在这里我主要选取“穷游网”及其IOS平台、安卓平台的手机app作为案例，来分析三个主流平台不同的设计规范。我选择分析同一产品在不同平台的具体表现，如此我们可以清晰地看到产品在投放到不同平台时，在交互设计方面需要进行的调整。相对于选取三个不同平台的不同产品，我认为这种控制变量的做法更有利于我们看清事物的本质。

穷游网创立于2004年，最初是一个供网友分享国外旅游指南和攻略的交流平台，此后逐渐发展为提供多种旅游产品的综合性网站。2014年穷游推出整合web端内容的移动应用“穷游App”。可以看出，穷游的发展路径在近年的互联网产品中非常有代表性，遵循由web版创始，之后逐渐转向移动端的态势。

因此，我将首先分析穷游web版（穷游网）的设计模式，继而讨论移植到移动端的穷游app与穷游网在内容取舍与页面结构上的区别。最后，我会对比穷游app在ios和安卓平台上采用的不同设计模式，并分析不同设计模式背后的原因。

1.穷游网的设计模式

穷游网首页的截屏（2016/05/26）

作为旅游咨询的提供者、旅游服务的供应者，穷游网可以被看成一个结合了电商类网站和资讯类网站的混合体。我们可以从穷游网首页看出如下设计模式：

A． 强调搜索

穷游网有许多产品和功能，然而却把搜索框放置在最显眼的首页首屏位置，可见穷游web版对用户需求的预期。穷游认为通过PC访问穷游网的用户可能是有出游计划，有几个意向旅游目的地，却没有完全拿定主意的。在这种场景下，穷游网在首页提供显眼的搜索框，它的首要任务是帮助用户快速查找和确定旅游目的地。

B． 宽屏显示的大幅banner

同样考虑到web用户目的地不明确的情况，穷游网首页首屏布置了超过屏幕一半大小的banner图，一方面营造一种鼓励用户旅游和消费的氛围，另一方面为用户提供一些目的地选择。

C.页面顶部的一级导航和登录功能

穷游网顶部的一级导航呈现了一些子产品，如“目的地”、“锦囊”、“酒店”、“预订”等，这些子产品提供多种不同的功能。进入子产品页面后，它们的页面布局和设计模式各有特色，各取所需。

2、IOS版穷游app

移动端的穷游app与web版穷游网相比，在内容和布局上都有较大不同，针对移动端用户的特点做了许多调整。下面我以IOS版穷游app的设计模式为例，阐述web产品移植到手机app上需要注意的方面。

A．页脚Tab栏的四个一级导航

IOS版穷游app采用Tab栏盛放一级导航，和穷游网的一级导航相比，穷游app的Tab栏标签缩到仅仅四个，分别为“推荐”、“目的地”、“社区”、“我的”。

“推荐”、“目的地”、“社区”三个页面都提供了大量的图文阅读内容，非常适宜用户利用碎片化时间浏览，与web版穷游网极力引导用户进行有目的的搜索相比，穷游app更注重给无目的的用户提供用于消遣的旅游读物。

B．导航栏的搜索框

IOS版穷游app采用了IOS平台常用的搜索控件（可与安卓版搜索控件进行对比）。

C．特色功能区

穷游app将穷游网的部分一级导航从Tab栏里抽出，放置在app首页中央的显眼位置。这个特色功能区包含“看锦囊”、“抢折扣”、“订酒店”、“旅途中”四个色彩鲜艳的按钮。这些入口不同于Tab栏里的“目的地”、“社区”等阅读推荐模块，更注重实用的功能，它们是服务于旅途中的用户的。身处异国他乡的游客可以使用这些功能随手查询所在城市的情况，或预定最近的酒店。

可以看出穷游app并不算简单地把穷游网上的内容复制在手机上，而是针对移动端用户可能身处的情景、特殊的需要专门进行了设计。

3、安卓版穷游app

不同于许多ios端与安卓端设计一致的app，穷游app针对安卓端进行了特殊的设计，其页面布局、导航嵌套结构都与ios端有诸多不同。

A.页面顶部的导航/操作栏

安卓版穷游app将“推荐”、“目的地”、“社区”三个一级导航，以及“我的主页”入口、搜索功能一并放在页面顶部。这样既节省屏幕占用，又防止底部Tab栏与虚拟键相近产生的误操作。

B．“社区”模块里导航嵌套结构的改变

IOS版中的“社区”模块中，所有专题以扁平化的方式平铺在一级页面中。而在安卓客户端，用户进入“社区”后首先看到的是精华帖的推荐，要点击“进入版块”才能看到社区专题列表。相对而言社区专题的层级变深了，然而这也使专题列表不必和搜索框及其他按钮挤在同一个页面，新开社区专题页面使设置二级导航成为可能。

在社区专题版面，安卓版穷游app在页面左侧设置了导航条放置二级导航，而没有采用ios端的扁平化布局，这一导航方式可能是对抽屉式导航的一种变化和活用。

概括来说，安卓端穷游app的“社区”模块层级变深了，不方便用户进入，然而同时换来了放置二级导航的机会。这种改动究竟是利大于弊还是弊大于利，还需要承受检验。

C.借鉴Material Design

安卓端穷游app在一些细节处借鉴了Material Design的原则，例如“发起帖子”按钮采用了Material Design的经典按钮，即层级高于其他信息的圆形悬浮按钮。

总结

由以上分析可见，同一产品落实到web、IOS、安卓三大平台上，应该针对不同平台的特征，在交互设计上做出一定区分，既要在一定程度上遵循平台设计规范，又要分析不同平台用户的使用习惯，做出有利于改善用户体验的设计。