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设计模式

相关文章

  • APP框架之一导航方式

    宫格导航(facebook,ios的应用页面) 登录界面中的菜单选项是进入各个模块的起点 可以成比例的放大某些选项...

  • App常用导航框架

    文章目的:在整体上把握移动端App的导航框架,理解每种导航所具有的优点、局限性和其所适用的范围。 文章用心:典型A...

  • 高德地图导航组件没有导航语音声音

    内嵌高德地图导航组件时,导航没有声音(首次启动app没有导航声音,再次启动app有导航声音) 方式一(排查过程) ...

  • 使用 TabLayout 制作底部导航栏

    国内大部分应用使用底部导航栏, 底部导航栏 是国内 APP 常见的导航方式, 历经: TabActivity -...

  • 【React Native】React Navigation 5

    前言 在App中,底部TabBar导航和顶部的导航栏导航是最常见的页面导航方式,而React Native官方推荐...

  • 交互设计师设计APP(三)—浅谈界面导航

    前文说到多设备的导航差异,导航是界面的核心框架,再扩展聊一下。 一、Question 1、什么是导航? 2、app...

  • 地图和定位(五)

    一、导航 导航的三种方式: 1、使用系统APP导航 2、发送网络请求给苹果服务器获取导航路线 2.1、获取导航路线...

  • APP导航设计模式

    下图是八种导航设计模式对比图: 一、列表式导航 列表式导航是最常见的主导航形式之一,是APP设计中不可少的一个导航...

  • 1.7.1导航的设计形式和适用原则

    导航是一个APP的组织架构,合理的导航方式能够突出产品核心功能,使得用户操作更加方便快捷。 目前比较常用的导航方式...

  • 移动端设计模式——常见的几种导航形式

    在移动端,导航是APP最重要的区别。根据不同的内容,选择不同的导航方式。没有完美的导航,只有合适的导航。根据具体的...

网友评论

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

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

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