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

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

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

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

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

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

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

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

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

第五种:APP混合组合导航

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

第九种 点聚式导航

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

APP导航设计九法的更多相关文章

  1. App导航设计全面梳理——附免费原型模版!

    生活中大家或多或少都会有迷路的经验,但你是不是从来没思考过迷路的定义是什么? 迷路的定义其实有两个核心: 1.想要到达一个目的地. 2.不知道自己在哪里,应该往哪走. 和生活中的迷路一样,我们在使用A ...

  2. 干货分享!关于APP导航菜单设计你应该了解的一切

    导航菜单是人机交互的最主要的桥梁和平台,主要作用是不让用户迷失方向.现在市面上产品的菜单栏种类繁多,到底什么样的才是优秀的导航菜单设计呢?好的菜单设计不仅能提升整个产品的用户体验,而且还能让用户耳目一 ...

  3. APP UI设计及切图规范

    APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 ...

  4. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  5. 超赞!聊聊WEB APP、HYBRID APP与NATIVE APP的设计差异

    编者按:这3类主流应用你都了解吗?设计师除了要有视觉功夫,对不同形式的APP也应当了然于胸,今天百度的同学写了一篇非常全面的总结,帮你迅速搞定3类主流APP的设计方法,附带一大波避雷针,带你巧妙跳过A ...

  6. app界面设计字体规范

    通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android ...

  7. Hybrid APP 架构设计思路

    关于Hybrid模式开发app的好处,网络上已有很多文章阐述了,这里不展开. 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考. 原文及讨论请到 github issue 通讯 作 ...

  8. 【新手指南】App原型设计:如何快速实现这6种交互效果?

    做App原型设计,那么页面切换.进度条.页面滚动.图片轮播,下拉菜单,搜索框这些交互效果必不可少.如何简单快速地实现这些效果呢?以下小编根据经验为大家提供了一些简单的设计方法,以供参考. 1.页面跳转 ...

  9. 8种移动APP导航设计模式对照

    当我们确定了移动APP的设计需求和APP产品设计流程之后,開始着手设计APP界面UI或是APP原型图啦.这个时候我们都要面临的第一个问题就是怎样将信息以最优的方式组合起来? 或许我们对照和了解了其它一 ...

随机推荐

  1. Running as a packaged application--- -Xdebug -Xrunjdwp:server=y,transport=dt_socket,address=8000,suspend=n

    19.2 Running as a packaged application If you use the Spring Boot Maven or Gradle plugins to create ...

  2. 重装huson遇到的一些错误及解决

    作者:朱金灿 来源:http://blog.csdn.net/clever101 服务器换了一块新硬盘,拷贝回原来的数据后结果发现Apache tomcat服务不能启动了,错误提示是:本地计算机上的A ...

  3. dotnet core 使用 sqlite 部署到 Centos 服务器

    原文:dotnet core 使用 sqlite 部署到 Centos 服务器 本文告诉大家如何创建一个 asp dotnet core 程序,这个程序使用 sqlite 保存,部署程序到 Cento ...

  4. php自动加载类文件探讨,spl_autoload_register自动加载原理

    spl_autoload_register函数是实现自动加载未定义类功能的的重要方法,所谓的自动加载意思就是 我们的new 一个类的时候必须先include或者require的类文件,如果没有incl ...

  5. TCL S960T刷机包 乐蛙OS5 稳定版 平滑 优化

    ROM简介 乐蛙OS5完美的最终稳定版 Ver14.10.17 温馨提示:一定要明确系统双成一个完整的包画刷入前开发版,否则会造成系统异常,请务必备份手机刷机前的信息和数据,刷机过程中,为了避免因数据 ...

  6. robot framework的使用说明

    robot framework安装说明1.安装python2.7.15运行安装包python-2.7.15.amd64.msi 2.robot framework(1)解压最新的压缩包如robotfr ...

  7. 在codefirst迁移的时候 为新增的属性添加一个默认值

    在模型中新增一个属性之后 通过add-migration ConsulationMsg_add_IsDel命令之后 会生成一个 日期+ConsulationMsg_add_IsDel的类文件 打开类文 ...

  8. CentOSserverMysql主从复制集群结构

    在配置Mysql数据库主从复制集群时间,以确保: 1.主从server操作系统版本号和位数一致. 2.Mysql版本号一致. 为了保证稳定性,最好server操作系统和Mysql数据库环境一致. Ce ...

  9. Java高级应用(一个)-文件夹监控服务

    最近.在研究一些比较成熟的框架.他们还发现,他们中的一些相当不错的文章.现在,对于一些在你们中间一个简单的翻译(版的英文文章,非常有帮助). 译:原文链接 你有没有发现,当你编辑一个文件.同一时候使用 ...

  10. 如何将任意文件固定在 Win10 的开始屏幕中

    虽然Wox和Launchy是我日常启动程序的主力方式,不过开始屏幕的图标方便归类,这是快速启动工具所不能提供的,因此我也会将最常用的程序在开始屏幕上分类固定. 最近需要将一个常用的批处理文件(*.ba ...