不可错过的手机APP常见8种界面导航样式

不可错过的手机APP常见8种界面导航样式

大家好,又见面了,我是全栈君。

前言:相信每个移动开发project师都会遇到,当一个项目开发启动时,须要考虑搭建怎么的框架。一个好的框架。也会决定着一个APP的前途与命运。框架的风格,如今常见的有八种:标签导航、舵式导航、抽屉导航、宫格导航、组合导航、列表导航、tab导航、轮播导航。近期在网上收集到一些资料。正好和大家分享一下。感谢原作者的贡献。

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

或许我们对照和了解了其它一些经常使用的APP导航设计模式。

并且良好的APP导航设计模式决策对整个app的核心体验起到关键作用。

有一些优秀的app基于这些模式做了一些创新的优化方案。本文总结了眼下通用且流行的模式。并讨论了这些模式适用的场景,希望帮助交互设计师更快的作出较合理的信息组织决策。

先来看看8种移动APP导航设计模式对照图吧!

8种移动导航


8种移动导航

第一种:app标签导航

标签导航位于页面底部,通常包括5个标签是比較合适的数量。这样的导航是很常见的。假设你的应用须要用户频繁的在不同分页切换。能够採用这样的导航。它的缺点是会占用一定高度的空间。如微信最新版的APP界面设计图。

app标签导航

app标签导航

另外一种:APP舵式导航

眼下流行一种标签导航的变体。个人把它称为“舵式导航”,由于它的样式非常像轮船上用来指挥的船舵,两側是其它操作button。当页面有处于同一层级的几大部分内容,同一时候又须要一个非常重要且频繁操作的入口,就能够採用这样的APP导航模式。

例如以下图葡萄社APP。

app舵式导航

app舵式导航

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

抽屉导航是讲菜单隐藏在当前页面后,点击入口就可以像拉抽屉一样拉出菜单,这样的导航的长处是节省页面展示空间,让用户将很多其它的注意力聚焦到当前页面。比較适 合于不那么须要频繁切换内容的应用,比如对设置、关于等内容的隐藏。

这样的导航设计须要注意的是一定要提供菜单画出的过渡动画。

自从path应用以来,这样的抽屉式导航菜单很受到大家的喜爱。

app抽屉式导航

app抽屉式导航

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

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

app宫格导航

app宫格导航

第五种:APP混合组合导航

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

app混合组合导航

         

app混合组合导航

第六种:列表式APP导航

列表式APP导航是我们在APP设计种不可缺少的一个信息承载模式。

当然作为一个APP的导航也是很方便的。

只是眼下来看,列表导航通经常使用于二级页,因为它与宫格导航一样,不会默认展示不论什么实质内容,所以通常app不会在首页使用它。

这样的导航结构清晰,易于理解。冷静高效,可以帮助用户高速的定位去到相应的页面。列表项目可以通过间距、标题等进行分组。

app列表式导航


app列表式导航

第七种:tab导航

用于二级页,本质和标签导航同样,当应用层级较多的情况下,能够採用tab导航,典型场景是用于改变的当前的视图。或对当前页面内容进行分类查看。

                                                                                                                                   tab导航

tab导航

第八种:大图轮播导航或是 大图上面的导航设计

当你的应用信息足够扁平。可以尝试轮播导航。假设应用得当。可以给人耳目一新的体验。这样的导航可以最大程度的保证应用的页面简洁性,操作也是最方便的。

可是缺点是不可以高速的定位相应的分页内容。

大图轮播导航

大图轮播导航

——————————————————————

有什么问题,大家能够一起交流……

很多其它精彩关于关注博主的微信订阅号:很周末

微信搜索:很周末

你能够扫描一下关注就可以:

不可错过的手机APP常见8种界面导航样式

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115639.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ssl证书怎么安装到服务器_iis ssl证书

    ssl证书怎么安装到服务器_iis ssl证书Zimbra邮件服务器SSL证书部署

  • 前端json字符串转json对象_list对象转json

    前端json字符串转json对象_list对象转jsonjson字符串转json对象varobj=eval(‘(‘+str+’)’);或者varobj=str.parseJSON();//由JSON字符串转换为JSON对象或者varobj=JSON.parse(str);//由JSON字符串转换为JSON对象

  • tl494cn逆变器电路图_用TL494制作的逆变电源[通俗易懂]

    tl494cn逆变器电路图_用TL494制作的逆变电源[通俗易懂]TL494集成块广泛应用在开关电源,其内部集成有PWM、三角波发生器、电池欠压检测,+5V电压基准等电路,具有外接元件少,控制稳定的特点。笔者在网上查阅大量资料,自制了一款准正弦波300W逆变器,采用直流12V电瓶供电,可供小功率单相电机、日光灯等电感性负载用电,电路如附图所示。该逆变板工作频率由TL494⑤、⑥脚外接阻容元件确定,本例为2.2kHz左右。该频率的大小直接影响功率场效应管的功率损耗…

  • JVM之 方法区、永久代(PermGen space)、元空间(Metaspace)三者的区别

    JVM之 方法区、永久代(PermGen space)、元空间(Metaspace)三者的区别文章目录0、前言(JVM运行时区域)1、PermGen(永久代)2、Metaspace(元空间)3、总结0、前言(JVM运行时区域)阅读此文章时,必须已经了解了jvm运行时数据区域。 根据JVM规范,JVM运行时区域大致分为方法区、堆、虚拟机栈、本地方法栈、程序计数器五个部分。1)、方法区方法区是JVM所有线程共享。主要用于存储类的信息、常量池、方法数据、方法代码等…

  • Copy Rounting (BAPI:BAPI_ROUTING_CREATE)

    Copy Rounting (BAPI:BAPI_ROUTING_CREATE)FORMfrm_uploadUSINGvalue(ps_i_tabindex)LIKEsy-tabixvalue(pc_i_fieldname)TYPEslis_fieldnameCHANGING

  • 征途服务器架设_征途sf架设服务器的基本条件

    征途服务器架设_征途sf架设服务器的基本条件2、设置系统自动启动防火墙vi/etc/rc.d/rc.local增加一行/etc/rc.d/forward保存后退出3、设置文件打开数1)修改/etc/security/limits.conf增加2行:*   soft  nofile 4096*   hard  nofile 655352)修改/etc/pam.d/login增加1行sessionrequired pam_limit…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号