网易产品经理：iPhone Web App 导航设计探讨.pdfVIP

网易产品经理 ：iPhone Web App 导航设计探讨 【编者按】本文作者一叶苦雨 ，分享了网易产品经理 ：iPho ne Web A pp 导航设计探讨。产品中 摘录如下 ： 　　最近在做iPho ne端Web A pp的项目。由于产品形式新颖 ，技术环境不成熟 ，公司给与了较宽松 的研发时间。在一个月的交互设计阶段 ，每个环节都得到多次讨论推敲 ，我从中感悟颇多。导航系 统的设计是一个比较典型的点 ，拿出来与大家分享讨论一下。 导航系统所遭遇的挑战 iPho ne Nat ive A pp较常见的导航如下图所示 ： 　　手机屏幕底端 ：A 、B、C、D四个t ab组成该Nat ive A pp的全局导航 ，这是我们经常见到的t ab 导航栏。 手机屏幕顶端 ：主要有四种形式。第①种形式是在该位置中心显示产品的logo ;也可以将logo适当调 整位置 ，将常用操作或快捷入口放在该位置的右侧。第②种形式是在该位置有两或三个t ab选项。第 ③种形式是在该位置中间显示当前任务标题 ，在左右两侧放置导航控件或功能控件。第④种形式是 在该位置放置搜索框。 与以上的Nat ive A pp导航方式相比 ，Web A pp导航方式有着巨大的不同 ，如下图所示 ： 　　Saf ari浏览器的工具栏将一直占据着屏幕的底端位置 ，全局导航只能被动移动到屏幕的顶端位置 。这是影响Web A pp导航设计的最重要因素。 如果产品的功能比较少 ，且没有特别要突出的功能的时候 ，可以设计成上图中第①种导航方式。此 时存在的问题是如何表现出产品的品牌 ，毕竟在Saf ari浏览器登录某网站比运行一个Nat ive A pp给 人的品牌认同感弱很多。 如果将产品logo表现出来 ，且产品需要将用户常用功能突出(比如刷新功能或者发布入口) ，就需要 设计成上图中的第②种导航方式。 如果在A功能板块下 ，还需要设置子类别选项 ，则导航栏中又多一组t ab。此时的导航方式就如同上 图中的第③种了。 当然 ，在执行某一项任务的时候 ，全局导航可以暂时“归隐” ，只保留一行标题栏和左右两侧的导航 控件或功能控件。如上图中第④种导航方式所示。 在该产品设计中 ，为方便用户在各功能板块之间快速省力地切换 ，设计师希望全局导航栏可以保持 长久悬停 ，不要像一般wap网页似的让导航随网页滚动消失。这样的话 ，基于浏览器的Web A pp 导 航系统便捷性就和Nat ive A pp相媲美了。 然而 ，浏览器工具栏将全局导航逼到了屏幕的顶端 ，却又造成了导航头部过于沉重的问题。如下图 所示 ： 　　如果将logo栏中的常用功能(例如刷新或发布入口)和全局导航都设计为悬浮停留的形式 ，内容 区的信息展示空间就比Nat ive A pp减少了一行的高度 ，如上图中的①。而且 ，某些页面需要在全局 导航的下方出现二级导航;悬停不动的3行导航大大吞噬了屏幕本来就很宝贵的内容显示空间 ，如上 图中的②。 让用户在如此狭小的空间不得不频繁滑动屏幕浏览信息 ，这样的体验太糟糕了。这个严重的问题很 让设计师困扰 ，因此需要重新设计一下导航系统。设计过程主要包括 ：优秀竞品分析、方案遴选。 优秀竞品分析 首先 ，分析对比了三款优秀的Web A pp ：Google 、FT Web A pp、Tw it t er的导航方式。浏览环境 均为ipho ne Saf ari浏览器。 1.Google 　　导航系统特点 ： ￭全局导航单独形成一个页面 ，其他页面不出现全局导航; ￭导航栏沿用了ios系统原生控件的形式 ：标题 导航或功能控件; ￭标题栏在页面中悬停不动 优点分析 ： 保证了每个信息浏览页面的导航栏简洁轻薄 ，尽量少的占用信息详情的显示空间;保证了其核心功能( 此处是微博浏览功能)的良好使用体验。 缺点分析 ： 全局导航隐藏较深 ，降低了用户在不同功能板块快速切换的便利性;全局导航隐藏较深 ，用户看不到 其它板块功能 ，大大降低了用户点击使用其他功能的可能性。 2. FT Web A pp 　　导航系统特点 ： ￭Saf ari浏览器URL一栏一直悬停存在 ，并将品牌文字FT Web A pp显示在顶端; ￭全局导航被隐藏起来 ，点击功能键后在页面顶端出现; ￭二级导航出现在页面顶端; ￭全局导航和二级导航由于新闻板块数量较多 ，都采取了单行空间不完全呈现的方式 ，可滑动选择其 中某一项; ￭所有导航随页面滚动 ，不在屏幕中保持悬停; 优点分析 ： FT Web A pp导航设计最大的优点就是繁重导航的轻量化处理。全局导航和二级导航中的新闻板