优秀竞品分析
首先，分析对比了三款优秀的Web App：Google+、FT Web App、Twitter的导航方式。浏览环境均为iphone Safari浏览器。
1.Google+
导航系统特点：
￭全局导航单独形成一个页面，其他页面不出现全局导航；
￭导航栏沿用了ios系统原生控件的形式：标题+导航或功能控件；
￭标题栏在页面中悬停不动
优点分析：
保证了每个信息浏览页面的导航栏简洁轻薄，尽量少的占用信息详情的显示空间；保证了其核心功能（此处是微博浏览功能）的良好使用体验。
缺点分析：
全局导航隐藏较深，降低了用户在不同功能板块快速切换的便利性；全局导航隐藏较深，用户看不到其它板块功能，大大降低了用户点击使用其他功能的可能性。
2. FT Web App
导航系统特点：
￭Safari浏览器URL一栏一直悬停存在，并将品牌文字FT Web App显示在顶端;
￭全局导航被隐藏起来，点击功能键后在页面顶端出现；
￭二级导航出现在页面顶端；
￭全局导航和二级导航由于新闻板块数量较多，都采取了单行空间不完全呈现的方式，可滑动选择其中某一项；
￭所有导航随页面滚动，不在屏幕中保持悬停；
优点分析：
FT Web App导航设计最大的优点就是繁重导航的轻量化处理。全局导航和二级导航中的新闻板块都非常多，若将这些板块都展示出来，恐怕要占用屏幕的一半显示空间。FT Web App于是将全局导航隐藏在一个功能键之后，二级导航也只给了一行的显示空间。
缺点分析：
展示给用户的导航只是其全部新闻板块的冰山一角，无法给予用户全部概况浏览的机会，也就无法很好的激励用户去尝试被隐藏的新闻版块；同时，用户寻找某一个新闻版块或者在页面底端回到页面顶端的操作成本略高。
3.Twitter
导航设计特点：
￭全局导航只有一行，品牌展示浓缩在主页图标中（Twitter小鸟图标）；
￭全局导航一直保持在屏幕顶端悬停不动，不随页面滚动而滚动；
￭二级导航在点击全局导航某tab后，以菜单列表形式出现。
优点分析：
在屏幕顶端悬停不动的全局导航，可以方便用户在不同的功能板块之间快捷切换，降低了用户的信息寻找成本；Twitter Web App的导航只有一行，为用户保证了尽量大的正文内容显示空间。
缺点分析：
一些常用的功能键被隐藏在二级导航中（比如新信息发布入口），一方面增大了用户的寻找成本，另一方面降低了这些常用功能对用户的激励使用效用。
基于对以上三款Web App产品导航系统的分析，设计师对目标项目的导航系统设计形成了以下框定：
￭全局导航方便用户快速寻找以及功能板块间的切换；
￭导航尽量轻薄化处理，尽量保证足够的正文内容区显示空间；
￭将用户经常使用的功能键呈现在前面。
本文链接：http://www.mobileui.cn/iphone-web-app-navigation.html本文标签: iPhone, Web App, 交互设计, 导航, 导航设计, 屏幕, 手机
