月度归档:2014年09月

移动产品设计之导航

导航对于一个应用来说非常重要,以下是常见的几种应用导航方式:

一、标签栏导航
苹果的App Store就是典型,早期的应用多是这种导航,甚至标签栏的高光投影都学的App Store,因为当时App设计属于新事物,大家都没怎么接触过。标签栏的Tab数量最多为5个,否则不好点击,这跟手机屏幕宽度有关。印象中当时大部分应用都是5个Tab,4个的显得尤其特别,包括微信、下厨房、米途订酒店等。标签栏导航的变式:Android中的Fixed Tabs。

二、九宫格导航
如早期的Facebook、大众点评。变式:1、去哪儿、艺龙等不规则的九宫格,重要功能面积更大;2、Zaker、360安全卫士3.0版等类Metro风格。

三、侧边栏导航
如Path 2.0。变式:1、12年突然火爆的两个App:唱吧(5月上线),侧边栏里的项目按方格排列。啪啪(10月上线),侧边栏的项目排在屏幕底部。2、Sparrow有两级侧边栏,右滑出现二级侧边栏,继续右滑出现一级侧边栏。Path 2.5左右边栏都可以滑出。

四、列表导航
如设置。某种程度上,九宫格导航是列表导航的变体,更美观。

五、卡片式导航
如天气,不同页面显示不同城市的天气。

说来很多应用都改过导航,网易新闻、WeicoPro最早是标签栏导航,现在是侧边栏导航;易信第一版、蝉游记测试版是侧边栏导航,现在都已改为标签栏导航;Facebook最早是九宫格导航,后来改过侧边栏导航,现在则是标签栏导航;而苹果的App Store却一直没变。应该说每种导航方式都有自己的特点,网易新闻有一版曾将体育科技等栏目放到侧边栏,首页仅显示头条,但后面又改了回去,相信是发现体育科技等栏目流量大幅度降低,因为用户要多点击一次,即便现在可以右滑打开侧边栏,作为网易新闻的重度用户,我也很少打开。

产品采用哪种导航方式,不是看潮流,也不单单是考虑用户体验,一切源于我们对产品的期许,我们希望它解决用户什么问题,解决公司什么问题,为了达到这些目标我们安排一些功能,这些功能组合在一起,结合产品流程、移动设备交互特点、用户使用我们产品的习惯等自然出现合适的导航方式。其中最主要考量的一点是主流程的数量,1-2个考虑卡片式导航、侧边栏导航;2-5个,考虑标签栏导航、列表导航;大于5个,考虑九宫格导航。

扩展阅读:
1、移动端主要导航模式
2、几种典型的iOS应用界面的交互框架
3、产品经理需要了解的移动交互设计知识
4、说说抽屉式导航
5、导航布局如何简化