iphone端Web App导航系统设计全面分析

http://www.itjxue.com  2015-08-07 21:05  来源:未知  点击次数: 

最近在做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行导航大大吞噬了屏幕本来就很宝贵的内容显示空间,如上图中的②。

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

(责任编辑:IT教学网)

更多