产品之旅产品经理-产品设计产品拆解

APP框架之一导航方式

2015-08-27  本文已影响1015人  静默之思

宫格导航(facebook,ios的应用页面)

登录界面中的菜单选项是进入各个模块的起点

可以成比例的放大某些选项,彰显重要性

列表导航(更多用于二级导航)


个性化列表菜单

分组列表

增强列表

列表菜单使用用来显示较长或拥有次级文字内容的标题

列表适合应用于同类的数据类型或者数据类型组(图片,文本),目标是区分多个数据类型数据或单一类型的数据特性,使得理解起来更加简单。

tab导航(微信)

不同的操作系统有不同的规则

陈列式导航(一些内容类app)


优点:

1、直观展现各项内容

2、方便浏览经常更新的内容

缺点:

1、不适合展现顶层入口框架

2、容易形成界面内容过多,显得杂乱

3、设计效果容易呆板

舵式导航(微博,path,简书,人人)


在突出一个核心功能(一般是书写,发表)的同时,显示其他辅助功能,类似安卓的fab

轮播导航墨迹天气

该导航适用于一些小而美的应用,核心显示全部的信息,辅助页面是核心页面的扩展或比较次要内容

抽屉导航(知乎)


导航方式比较隐藏,但导航方式比较隐藏需要引导,但用户还是很难记住,适合一些核心功能远高于其他辅助的app。

隐藏非核心的操作与功能,让用户更专注于核心的功能操作上去。

一般控制抽屉的把手出现在App的左上角,以按钮的形式出现,点击按钮之后抽屉被拉开,按钮被拉到App的右上角,左侧区域被拉开(抽屉)后显示出导航内容。导航的内容可以是以列表形式展示的常规2级导航,也可以将一些非常用的快捷操作入口直接放进来,如FB的搜索。

其他一些零散的如仪表式(数据),隐喻式(游戏),超级菜单式(web),点聚式导航(fab)


还有一些更多用于次级导航的方式

页面轮盘式

页面加浮点,浮点显示页面数量,最好不要超过8个,第二个页面的打开机会不多,可能被忽略

图片轮盘式(美团影院页面的影片选择)

这个可以很好的展示图片并与下方的信息进行联动,而且这种在图片之间的滑动的交互感觉也挺不错

扩展列表式


很好的逐步显示某个内容项的更多细节或选项

这种方式其实更多用于web页面和pc应用,比如说淘宝的次级菜单,word的下拉菜单,在保证导航广度的同时降低深度


一些参考文章

8种移动APP导航设计模式大对比

抽屉式导航的衰退及大屏下的产品设计

UI设计模式

上一篇下一篇

猜你喜欢

热点阅读