美文网首页
次级导航模式

次级导航模式

作者: orangesup | 来源:发表于2017-09-07 22:47 被阅读29次

翻页式

这种模式可以通过滑动手势快速导航内容页。表现这种导航模式的最常见方式是利用页面指示器 (Page Indicator,iOS里对一行小圆点的叫法)。卡片隐喻也同样适用于页面,比如Ness和Foodspotting中的设计。在这些例子中,部分可见的背景卡片或页

面用以引导用户去滑动屏幕。

iOS版Audible:主导航是选项卡式,次导航是翻页式。注意页面指示器 iOS版Ness和Foodspotting:部分可见的内容引导用户滑动屏幕

滚动选项卡式

安卓设计指南把这些次级导航控件称为滚动选项卡式,所以我延续它的叫法。在某一个模块中显示多种类别或视图时,这种模式非常有用。滚动选项卡一般比标准的标签栏要窄,因为它们没有

必要作为触摸对象。更典型的是将它们用作水平滑动指示。

在Google Play应用中,在导航抽屉中选择了一个菜单项(比如电影和电视剧)之后,滚动选项卡用来对结果进行筛选。Songza和TuneIn的例子展示了这种模式的其他应用。

安卓版Google Play、Songza和TuneIn:滚动选项卡式的次级导航

如果你要使用这种模式,请确保你的界面设计清晰地指示出了选中的标签项。

折叠菜单式

折叠菜单式(Accordion,又称手风琴式)能使用户在同一页面上查看到更多的信息。这种模式比跳转到另一页面再跳回去更高效。注意Elevatr、Flava和安卓Play Store这些例子,它们全都使用了常见的图标去指示面板的展开或收起状态。

OS版Elevatr:当面板展开时“+”号变成“-”号,而且标题变成反色 OS版Flava:向下的箭头指示面板展开 安卓Play Store:“新版变化”面板中的展开/收起

说明:

要使用常见的图标来指示折叠式菜单的打开或关闭状态。

相关文章

  • 次级导航模式

    翻页式 这种模式可以通过滑动手势快速导航内容页。表现这种导航模式的最常见方式是利用页面指示器 (Page Indi...

  • 移动应用UI设计模式

    本书主要介绍以下设计模式: 导航模式:了解主导航和次级导航的设计模式 表单模式:改掉行业内表单设计的不良习惯 表格...

  • ionic 次级导航栏固定

    ``` 全部 待分配 已分配 ```

  • App导航设计——二级航模式解析

    1、次级选项卡式 作为二级导航的导航控件,Android和IOS系统分别有各自的术语与规范,如果要使用这种导航方式...

  • iOS中导航设计模式

    平铺导航模式 UIPageController 标签导航模式 UITabBarcontroller 树形导航模式 ...

  • 移动设计的套路之次级导航模式 (二)

    上一篇的设计套路,想必大家还历历在目吧?(*^__^*) 嘻嘻……别着急,还有续集等着你呢!!话说导航有分为主...

  • 百度贴吧手机客户端某功能点需求分析

    这是IOS端百度贴吧进入首页(图一),可以看到,页面整体布局为顶部主导航栏加次级导航栏以及底部标签式导航,页面内...

  • iOS中导航设计模式

    平铺导航模式 UIPageController标签导航模式 UITabBarcontroller树形导航模式 UI...

  • iOS应用导航模式

    IOS导航模式: 标签导航模式、桌面式模式、抽屉式导航、列表式导航、 点聚式导航、下拉菜单式导航、轮播导航 接下来...

  • 移动应用UI设计模式图示

    移动应用UI设计模式: 1.导航设计模式:主要导航和次要导航模式。 1)主菜单导航模式: 跳板式 Springbo...

网友评论

      本文标题:次级导航模式

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