iphone Web App 导航设计分享

　　导航系统所遭遇的挑战

　　iphone Native App较常见的导航如下图所示：

　　手机屏幕底端：A、B、C、D四个tab组成该Native App的全局导航，这是我们经常见到的tab导航栏。

　　手机屏幕顶端：主要有四种形式。第①种形式是在该位置中心显示产品的logo;也可以将logo适当调整位置，将常用操作或快捷入口放在该位置的右侧。第②种形式是在该位置有两或三个tab选项。第③种形式是在该位置中间显示当前任务标题，在左右两侧放置导航控件或功能控件。第④种形式是在该位置放置搜索框。

　　与以上的Native App导航方式相比，Web App导航方式有着巨大的不同，如下图所示：

　　Safari浏览器的工具栏将一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。这是影响Web App导航设计的最重要因素。

　　如果产品的功能比较少，且没有特别要突出的功能的时候，可以设计成上图中第①种导航方式。此时存在的问题是如何表现出产品的品牌，毕竟在Safari浏览器登录某网站比运行一个Native App给人的品牌认同感弱很多。

　　如果将产品logo表现出来，且产品需要将用户常用功能突出(比如刷新功能或者发布入口)，就需要设计成上图中的第②种导航方式。

　　如果在A功能板块下，还需要设置子类别选项，则导航栏中又多一组tab。此时的导航方式就如同上图中的第③种了。

　　当然，在执行某一项任务的时候，全局导航可以暂时"归隐"，只保留一行标题栏和左右两侧的导航控件或功能控件。如上图中第④种导航方式所示。

　　在该产品设计中，为方便用户在各功能板块之间快速省力地切换，设计师希望全局导航栏可以保持长久悬停，不要像一般wap网页似的让导航随网页滚动消失。这样的话，基于浏览器的Web App 导航系统便捷性就和Native App相媲美了。

　　然而，浏览器工具栏将全局导航逼到了屏幕的顶端，却又造成了导航头部过于沉重的问题。如下图所示：

　　如果将logo栏中的常用功能(例如刷新或发布入口)和全局导航都设计为悬浮停留的形式，内容区的信息展示空间就比Native App减少了一行的高度，如上图中的①。而且，某些页面需要在全局导航的下方出现二级导航;悬停不动的3行导航大大吞噬了屏幕本来就很宝贵的内容显示空间，如上图中的②。

　　让用户在如此狭小的空间不得不频繁滑动屏幕浏览信息，这样的体验太糟糕了。这个严重的问题很让设计师困扰，因此需要重新设计一下导航系统。设计过程主要包括：优秀竞品分析、方案遴选。

　　优秀竞品分析

　　首先，分析对比了三款优秀的Web App：Google+、FT Web App、Twitter的导航方式。浏览环境均为iphone Safari浏览器。

　　1.Google+