APP框架之一导航方式

作者: 静默之思 | 来源:发表于2015-08-27 14: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设计模式

    相关文章

      网友评论

      • 6d693918826f:页面轮盘式。翻到最后一个,会循环到第一个吗?
        静默之思:@赵小强 到最后一个内容时,返回到第一个,有点类似电商中常见的banner推荐。
        但考虑到这个操作是用户主动去操作查看的,如果跳过了第一个说明对第一个兴趣不大,再次出现意义不大。
        而且轮盘式一个同时出现多个,返回到第一个,顺序会有点奇怪。
      • beae8cc90f93:我曾经也总结过导航栏的设计,但却从来没有你这样整理过。向你看齐。:+1::+1:💪💪
      • 石英作曲家:多谢总结,已收藏
      • 静默之思:大家还有没有看到过其他有趣的导航形式,欢迎交流

      本文标题:APP框架之一导航方式

      本文链接:https://www.haomeiwen.com/subject/cjmhcttx.html