iphone Web App 导航设计分享.docx

iphone Web App 导航设计分享.docxiphoneWebApp导航设计分享导航系统所遭遇的挑战iphoneNativeApp较常见的导航如下图所示:手机屏幕底端:A、B、C、D四个tab组成该NativeApp的全局导航,这是我们经常见到的tab导航栏。手机屏幕顶端:主要有四种形式。第①种形式是在该位置中心显示产品的logo;也可以将logo适当调整位置,将常用操作或快捷入口放在该位置的右侧。第②种形式是在该位置有两或三个tab选项。第③种形式是在该位置中间显示当前任务标题,在左右两侧放置导航控件或功能控件。第④种形式是在该位置放置搜索框。与以上的NativeApp导航方式相比,WebApp导航方式有着巨大的不同,如下图所示:Safari浏览器的工具栏将一直占据着屏幕的底端位置,全局导航只能被动移动到屏幕的顶端位置。这是影响WebApp导航设计的最重要因素。如果产品的功能比较少,且没有特别要突出的功能的时候,可以设计成上图中第①种导航方式。此时存在的问题是如何表现出产品的品牌,毕竟在Safari浏览器登录某网站比运行一个NativeApp给人的品牌认同感弱很多。如果将产品logo表现出来,且产品需要将用户常用功能突出(比如刷新功能或者发布入口),就需要设计成上图中的第②种导航方式。如果在A功能板块下,还需要设置子类别选项,则导航栏中又多一组tab。此时的导航方式就如同上图中的第③种了。当然,在执行某一项任务的时候,全局导航可以暂时"归隐",只保留一行标题栏和左右两侧的导航控件或功能控件。如上图中第④种导航方式所示。在该产品设计中,为方便用户在各功能板块之间快速省力地切换,设计师希望全局导航栏可以保持长久悬停,不要像一般wap网页似的让导航随网页滚动消失。这样的话,基于浏览器的WebApp导航系统便捷性就和NativeApp相媲美了。然而,浏览器工具栏将全局导航逼到了屏幕的顶端,却又造成了导航头部过于沉重的问题。如下图所示:如果将logo栏中的常用功能(例如刷新或发布入口)和全局导航都设计为悬浮停留的形式,内容区的信息展示空间就比NativeApp减少了一行的高度,如上图中的①。而且,某些页面需要在全局导航的下方出现二级导航;悬停不动的3行导航大大吞噬了屏幕本来就很宝贵的内容显示空间,如上图中的②。让用户在如此狭小的空间不得不频繁滑动屏幕浏览信息,这样的体验太糟糕了。这个严重的问题很让设计师困扰,因此需要重新设计一下导航系统。设计过程主要包括:优秀竞品分析、方案遴选。优秀竞品分析首先,分析对比了三款优秀的WebApp:Google+、FTWebApp、Twitter的导航方式。浏览环境均为iphoneSafari浏览器。+导航系统特点:￭全局导航单独形成一个页面,其他页面不出现全局导航;￭导航栏沿用了ios系统原生控件的形式:标题+导航或功能控件;￭标题栏在页面中悬停不动优点分析:保证了每个信息浏览页面的导航栏简洁轻薄,尽量少的占用信息详情的显示空间;保证了其核心功能(此处是微博浏览功能)的良好使用体验。缺点分析:全局导航隐藏较深,降低了用户在不同功能板块快速切换的便利性;全局导航隐藏较深,用户看不到其它板块功能,大大降低了用户点击使用其他功能的可能性。:￭Safari浏览器URL一栏一直悬停存在,并将品牌文字FTWebApp显示在顶端;￭全