8种移动APP导航设计模式
当我们确定了移动APP的设计需求和APP产品设计流程之后,开始着手设计APP界面UI或是APP原型图啦。这个时候我们都要面临的第一个问题就是如何将信息以最优的方式组合起来?
也许我们对比和了解了其他一些常用的APP导航设计模式。
而且良好的APP导航设计模式决策对整个app的核心体验起到关键作用。
之前跟大家分享过6个超实用的APP导航设计方案和3种常见的APP导航设计方案优劣势分析
有一些优秀的app基于这些模式做了一些创新的优化方案,本文总结了目前通用且流行的模式,并讨论了这些模式适用的场景,希望帮助交互设计师更快的作出较合理的信息组织决策。
先来看看8种移动APP导航设计模式对比图吧!
第一种:app标签导航
标签导航位于页面底部,通常包含5个标签是比较合适的数量。这种导航是非常常见的,如果你的应用需要用户频繁的在不同分页切换,可以采用这种导航。它的缺点是会占用一定高度的空间。如微信最新版的APP界面设计图。
第2种:APP舵式导航
目前流行一种标签导航的变体,个人把它称为“舵式导航”,因为它的样式很像轮船上用来指挥的船舵,两侧是其他操作按钮。当页面有处于同一层级的几大部分内容,同时又需要一个非常重要且频繁操作的入口,就可以采用这种APP导航模式。如下图葡萄社APP。
第三种:APP抽屉式导航模式
抽屉导航是讲菜单隐藏在当前页面后,点击入口即可像拉抽屉一样拉出菜单,这种导航的优点是节省页面展示空间,让用户将更多的注意力聚焦到当前页面。比较适 合于不那么需要频繁切换内容的应用,例如对设置、关于等内容的隐藏。这种导航设计需要注意的是一定要提供菜单画出的过渡动画。
自从path应用以来,这种抽屉式导航菜单非常受到大家的喜爱,25学堂之前也重点介绍了9种最佳移动APP侧边栏设计方案。
第四种:APP宫格导航(比如九宫格)
这种宫格导航是将主要入口全部聚合在页面,让用户做出选择。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。
第五种:APP混合组合导航
当用户需要聚焦内容,同时又需要一些快捷入口能够连接到某些页面时,就可以采用组合导航。组合导航上方用宫格的形式展现快捷入口,与标签导航不同的是,这 些宫格入口之间不需要是平级的关系,也不必包含整个层级的内容,你可以将它理解为一种图形化的文字链。这种导航比较灵活,能适应架构的快速调整。
第六种:列表式APP导航
列表式APP导航是我们在APP设计种必不可少的一个信息承载模式。当然作为一个APP的导航也是非常方便的。
不过目前来看,列表导航通常用于二级页,由于它与宫格导航一样,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组。
第七种:tab导航
用于二级页,本质和标签导航相同,当应用层级较多的情况下,可以采用tab导航,典型场景是用于改变的当前的视图,或对当前页面内容进行分类查看。
第八种就是:大图轮播导航或是 大图上面的导航设计
当你的应用信息足够扁平,可以尝试轮播导航,如果应用得当,能够给人耳目一新的体验。这种导航能够最大程度的保证应用的页面简洁性,操作也是最方便的。但是缺点是不能够快速的定位对应的分页内容。
相关推荐
也许我们对比和了解了其他一些常用的APP导航设计模式。而且良好的APP导航设计模式决策对整个app的核心体验起到关键作用。之前跟大家分享过6个超实用的APP导航设计方案和3种常见的APP导航设计方案优劣势分析有一些...
为此,研究者们提出了一种基于安卓平台的校园导航APP设计方案。该方案旨在通过集成地图查询、校园导航等功能,为用户提供更加便捷的地图资源服务。 #### 关键技术与背景 - **移动互联网技术**:移动互联网技术是...
APP 导航设计模式是指在移动应用程序中设计导航结构的方式,以便用户可以更方便地浏览和使用应用程序。常见的 APP 导航设计模式有标签导航、舵式导航、tab 标签导航、抽屉导航和下拉导航等。 标签导航是一种常见的...
我觉得《移动应用UI设计模式》真是一本设计师必备的工具书,不过由于行业发展速度太快,里面的有些配图和模式已经发生不少的变化,根据这书的基本理论总结了一些在ios和Android两个主流系统中app设计中经常用到的...
在构建移动应用时,Vue.js 是一种非常流行的前端框架,以其简洁的语法和强大的功能而备受开发者喜爱。本文将深入探讨如何配置 Vue.js 用于移动应用程序,并结合 Android 开发工具 (ADT Bundle) 进行集成,以实现更加...
"Axure RP 8 App 产品设计元件库"是针对移动应用设计的专业资源集合,包含了iOS和Android平台的设计元素,帮助设计师快速构建出真实感十足的手机应用原型。 在描述中提到的"最全的手机app产品设计元件库"意味着这个...
侧边导航通常指的是在应用界面左侧滑出的菜单,用于展示不同类别的商品或者功能,是电商应用中常见的设计模式。 【描述详解】 描述中提到的 "uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master...
第2~7章对基本UI组件、导航控件、列表及表单等各类界面元素做了分类详解,并配以大量实例,帮助读者深入理解各种界面设计模式的特性与适用情景。第8~10章说明了图标选用、界面切换动画设计及界面设计风格等贯穿...
【移动端旅游导航Web_APP的设计】主要探讨的是在当前信息技术高速发展的背景下,如何设计并实现一个轻量级的旅游导航Web应用程序。这个应用充分利用了移动端的便捷性,旨在替代部分原生APP,为用户提供更加高效、...
在实际开发过程中,需遵循敏捷开发模式,进行需求分析、设计、编码、测试和维护等阶段。同时,根据用户反馈持续优化和迭代,以满足不断变化的用户需求。 总结起来,"互联网+"背景下的智慧校园移动服务APP开发是一项...
此外,Vue.js 2.x还引入了Vuex,这是一个专门为Vue.js设计的状态管理模式。在"vue-chinaMobile"中,Vuex可能被用来集中管理应用的状态,如用户登录状态、菜单的展开状态等。通过统一管理和共享状态,Vuex帮助开发者...
Sidetap可能是一个基于某种前端框架(比如React Native)的移动应用模板,提供了侧滑菜单(sidetap)的功能,这对于许多移动应用来说是很常见的导航模式。junior-master可能是一个针对初学者的项目,旨在教授基础的...
以上介绍了三种常见的APP界面设计模式:标签导航、舵式导航和抽屉导航。每种模式都有其独特的优势和适用场景。设计师在选择合适的界面框架设计时,应考虑应用的具体需求、目标用户群体以及预期的用户行为等因素,...
2013年及以后,手机App界面设计的趋势向着更加简洁和直观的方向发展,Windows 8的界面设计风格对许多应用产生了影响,如左侧导航菜单的设计模式,已经在许多应用中得到采用,如百度新闻、100tv和印象笔记等。...
8. 交互设计元素:尽管Photoshop主要是静态设计工具,但可以通过添加交互元素的概念,如点击状态、过渡效果等,来预演APP的基本交互流程。 9. 设计规范与模板:遵循平台的设计规范(如Google的Material Design或...
### 快递类APP产品UI设计模式及分析 #### 一、快递类APP产品介绍 在当前数字化时代,快递行业迅速发展,为了更好地满足用户的快递服务需求,各大快递公司纷纷推出了自己的移动应用。这些应用不仅提供了便捷的快递...
"移动横着长导航特效仿网易二级导航"是一个针对这种设计模式的实现案例,主要用于解决导航栏因内容过多而无法在一个屏幕内完全展示的问题。通过引入滑动机制,用户可以左右滑动来查看和切换不同的导航项,从而提供更...