Web App动效设计原则 Web App的设计方法(3)

3.信息架构

讲导航和信息架构的文章众多，Mobile Web App既然要实现Native App的操作体验，照传统的移动客户端的设计模式去设计即可。只需要记住你设计的Web App需要运行在iOS, Android, Windows Phone等多个平台，多种设备上即可。

由于iOS相比其他平台，没有back按键，所以在iOS上运行需要保证界面内的导航能够实现闭环。所以Android上有些操作可以通过Menu键唤出，但是在iOS上就需要直接暴露出来。

下图左侧是Zaker的Android版，右侧是iPhone版。Android版的菜单栏需要点击Menu键才出现。

4.使用Native App的UI控件

使用Native App的UI控件，可以让Mobile Web App更有Native App的操作体验。常见的如Badge，Back button，Bubble，Picker，Indicator，Title bar，Dialog，Toast，Loading，Drap down to refresh，Notification等。

下图分别是Facebook的Native App和Web App，由于后者使用了客户端常见的一些UI控件，所以用户很难从视觉上识别出后者是Web App.

避免使用传统的Web UI控件，如面包屑、文字链：

另外，在控件尺寸上也应该像Native App那样提供尽量大点击区域的控件。参照经验和各平台的官方人机界面指南，可以知道适合用户手指点击的尺寸应该在7-9mm之间，不能小于7mm。相邻点击控件的行距不应小于2mm。

5. 针对浏览器优化

为了兼顾浏览器的性能和交互，需要注意以下几点：

页面使用尽量少的DOM元素；

简化动效；

避免与浏览器的交互冲突，如左右滑动，如浏览器的tab bar, action bar, 以及浏览器全屏后的虚拟按钮；

考虑保存用户的哪些数据：设置、个人数据、阅读锚点、跳出页面等。

规则图形用Canvas绘制，避免向服务器请求img.

注意离线数据存储，通过manifest定义需要被缓存的文件，以便用户离线时使用。

减少数据请求频率。

6. 其他

Track：建立Track机制可以快速获取用户的操作习惯和页面的浏览情况。从而方便设计师和产品人员快速改善产品。这一点比在Google Analytics获取到的数据更方便，更准确。

SEO：使用SEO提升Mobile Web App的曝光率。因为很多手机用户会通过搜索引擎进入你的website，而不是地址栏。

域名指向：m.site.com，mobile.site.com，site.mobi，www.site.com/mobile，3g.site.com，wap.site.com，shouji.site.com，www.site.com/mobile等带有明显手机网站含义的域名都应该指向你的Mobile Web App（或Wap站）所在站点。如果条件所限只能绑定一个的话，请使用m.site.com。ps.这一点来自Nielsen的《Usability of Mobile Websites》.