当前位置:首页 > 经验学习 > 交互设计

iphone Web App 导航设计探讨

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

最近zai(在)做iphone端Web App的项目。由于产品形式新颖,技术环境不成熟,公司给与了较宽松的研发时间。在一个月的交互设计阶段,每个环节都得到多次讨论推敲,我从中感悟颇多。导航系统的设计是一个比较典型的点,拿出来与da(大)家fen(分)享讨论一下。
导航系统所遭遇的挑战
iphone Native App较常见的导航如下tu(图)所示:

手机屏幕底端:A、B、C、Dsi(四)个tab组成该Native App的全局导航,这是wo(我)们经chang(常)见到的tab导航栏。
手机屏幕顶duan(端):主要有四种形式。第①种形式是在该位置中心显示产品的logo;也可以将logo适当调zheng(整)位置,将常用操作或快捷ru(入)口放在该wei(位)置的右侧。第②种形式是在该位置有两或三个tab选项。第③种形式是在该位置中间显示当前任务标题,在左右两侧放置导航控件或功能控件。第④种形式是在该位置放置搜索框。
与以上的Native App导航方式相比,Web App导航fang(方)式有着巨大的不同,如下图所示:

Safari浏览器的工具栏将一直占据着屏幕的底端位置,全局导航只能被动移动到屏幕的顶端位置。这是影响Web App导航设计的最重要因素。
如果产品的功能比较少,且没有特别要突出的功能的时候,可以设计成上图中第①种导航方式。此时存在的问题是如何表现出产品的品牌,毕竟在Safari浏览器登录某网站比运行yi(一)个Native App给人的品牌认同感弱很多。
如果将产品logo表现出来,且产品xu(需)要将用户常用功能突出(比Ru(如)刷新功能或者发布入口),就需要设计成上图zhong(中)的第②种导航方式。
如果在A功能板块下,还需要设置子类别选项,则导航栏中又多一组tab。此时的导航方式就如同上图中的第③种了。
当然,在执行某一项任务的时候,全局dao(导)航可以暂时“归隐”,只保留一行biao(标)题栏和左右两侧的导航控件或功能控件。如上图中第④种导航方式所示。
在该产品设计中,为方便用户在各功能板块之间kuai(快)速省力地切换,设计师希望全局导航栏可以保持长久悬停,不要像一般wap网页似的让导航随网页滚动消失。这样的话,基于浏览器的Web App 导航系统便捷性就和Native App相媲美了。
然而,浏览器工具栏将全局导航逼到了屏幕的顶端,却又造成了导航头部过于沉重的问题。Ru(如)下图所示:

如果将logo栏中的常用功能(例如刷新或发布入口)和全局导航都设计为悬浮停留的形式,内容区的信息展示空间就比Native App减少了一行的高度,如上图中的①。而且,某些页面需要在全局导航的下方出现二级导航;悬停不动的3行导航大大吞噬了屏幕本来就很宝贵的内容显示空jian(间),如上图zhong(中)的②。
让用户在如此狭小De(的)空间不得不频繁滑动屏幕浏览信息,这样的体验太糟糕了。这个严重的问题很让设计师困扰,因此需要重新设计一下导航系统。设计过程主要包括:优秀竞品分xi(析)、方an(案)遴选。

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

导航系统特点:
?全局导航单独形成一个页面,其他页面不出现全局导航;
?导航栏沿用了ios系统原生控件的形式:标题+导hang(航)或功能控件;
?标题栏在页面中悬停不动
优点分析:
保证了每个信息浏览页面的导航栏简洁轻薄,尽量少的占用信息详情的显示空间;保证了其核心功能(此处shi(是)微博浏览功能)的良好使用体验。
缺点分析:
全局导航隐藏较深,降低了用户在不同功能板块快速切换的便利性;全局导航隐藏较深,用户看不到其它板块功能,大大降低了用户点击使用其他功能的可能性。
2. FT Web App

导航系统特点:
?Safari浏览器URL一栏一直悬停存在,并将品牌文字FT Web App显示在顶端;
?全局导航被隐藏起来,点击功能键后在页面顶端出现;
?二级导航出现在页面顶端;
?全局导航和二级导航由于新闻板块数量较多,都采取了单行空间不完全呈现的方式,可滑动选择其中某一项;

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: