zoukankan      html  css  js  c++  java
  • APP导航设计九法

    近期在设计APP原型,用EXCEL,用Axure。但无论工具如何,产品本身的界面布局和交互设计确实逃不掉的!网络中有关于APP导航设计的总结:

    8种移动APP导航设计模式大对比,互联网的一些事

    第一种:app标签导航  易用性:★★★★★   趣味性:★

      标签导航位于页面底部,通常包含5个标签是比较合适的数量。这种导航是非常常见的,如果需要用户频繁的在不同分页切换,可以采用这种导航。它的缺点是会占用一定高度的空间。如微信最新版的APP界面设计图。

    8种移动APP导航设计模式大对比,互联网的一些事

    第二种:APP舵式导航  易用性:★★★★★   趣味性:★

    目前流行一种标签导航的变体,个人把它称为“舵式导航”,因为它的样式很像轮船上用来指挥的船舵,两侧是其他操作按钮。当页面有处于同一层级的几大部分内容,同时又需要一个非常重要且频繁操作的入口,就可以采用这种APP导航模式。如下图葡萄社APP。

    8种移动APP导航设计模式大对比,互联网的一些事


    第三种:APP抽屉式导航模式  

    抽屉导航是讲菜单隐藏在当前页面后,点击入口即可像拉抽屉一样拉出菜单,这种导航的优点是节省页面展示空间,让用户将更多的注意力聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用,例如对设置、关于等内容的隐藏。这种导航设计需要注意的是一定要提供菜单画出的过渡动画。

    8种移动APP导航设计模式大对比,互联网的一些事

    第四种:APP宫格导航(比如九宫格)

      这种宫格导航是将主要入口全部聚合在页面,让用户做出选择。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。

    8种移动APP导航设计模式大对比,互联网的一些事

    第五种:APP混合组合导航

      当用户需要聚焦内容,同时又需要一些快捷入口能够连接到某些页面时,就可以采用组合导航。组合导航上方用宫格的形式展现快捷入口,与标签导航不同的是,这些宫格入口之间不需要是平级的关系,也不必包含整个层级的内容,你可以将它理解为一种图形化的文字链。这种导航比较灵活,能适应架构的快速调整。

    第九种 点聚式导航

    026275555f09e300000136489fa6b3

      点聚式导航,它将多个核心功能聚汇到主界面中显示,方便用户呼出使用。由于点聚式占用空间小,所以它常出现在一些主要的流程界面中。一般会融入一些动态的互动效果,让导航更具趣味性。在渐渐的演变中,点聚式会搭载其他导航样式出现(如标签式)。在设计过程中,按照实际需求,结合内容选择最为合适的导航形式,切忌跟风或者先从形式入手从而忽略导航菜单自身的特点。

  • 相关阅读:
    Java——异步调用
    GTK3-demo 代码调用
    ef core code first 生成的数据库表去复数的方法
    nuxt全局挂载导航路由守卫
    vue导入,导出,列表展示excel数据
    JS之blob对象下载文件,解决word可能打开是乱码,xlsx文件打不开,图片显示格式不支持等问题
    程序猿的十一条浮躁表现
    RSA加密解密及加签验签
    冒泡排序
    Failed to parse source for import analysis because the content contains invalid JS syntax
  • 原文地址:https://www.cnblogs.com/kelite/p/5140876.html
Copyright © 2011-2022 走看看