童话说说技术创业美文职业
快好知
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

APP导航设计的对比总结

1月5日 吴梦筱投稿
  纵观应用市场上的APP,导航设计的模式总是几种的组合使用。
  导航设计的目的就是需要突出产品的核心,扁平化用户的任务路径。让用户能够顺利的在产品中畅行,让用户时刻清楚自己在应用中所处的位置,及如何前往目的页面。
  产品的导航系统,是产品的信息结构在用户界面上的展现方式。移动端产品导航的设计没有最好之说,只有最合适,根据你的产品采取最合适的导航设计。
  纵观应用市场上的APP,导航设计的模式总是几种的组合使用。下面我们来看一下常见的几种导航设计模式。
  01底部标签(Tab)导航
  描述:
  当产品的整个体验流中是以几个常用功能模块(一般不超过5个)贯穿的,意味着用户需要在多个标签入口之间来回切换;为了保证切换的效率,将贯穿产品整个体验的流的模块平铺在TabBar位置,保证了用户任务路径的扁平。
  iOS原装AppPodcast,5Tab。
  优点:
  可见性好,位置明显,易于发现,它能让用户直观了解到APP的核心功能;
  操作性好,用户很方便就能触及到这个区域,并可在几个标签中快速切换且不会迷失方向,简单而高效;
  符合习惯、ios原生控件,开发简单;
  优先级较高、用户使用频繁,彼此之间相互独立。
  缺点:
  容纳个数有限,一般最多五个(不然需要结合其他方式,运用层级和收放)。
  占据高度空间略大,一般都是文字图标的形式。
  02顶部标签(Tab)导航
  描述:
  顶部Tab是谷歌提出来的,为了区分与iOS的区别的一种导航模式,由于在顶部,手指难以触及,所以谷歌对应地提出了手势操作的解决方法:通过在屏幕左右滑动来切换标签。
  实际项目中,顶部与底部配合使用的挺多。
  优点:
  扩展性好:标签的个数没有上限,不过太多的话,越是后面的页面渗透率会越低;
  占据空间小:相比于底部Tab,顶部Tab一般占据的空间更小(因为不需要考虑手指点击,所以可以把区域缩小,只选用图标或者文字即可),可以把更多的空间安排给内容展示。
  手势操作非常方便。
  缺点:
  可见性略逊:这是空间占据的区域变小之后的后果。
  03舵式导航
  描述:
  点聚式它将多个核心功能聚汇到主界面中显示,方便用户呼出使用。会搭载其他导航样式出现(如标签式)成为舵式导航。
  与标签导航类似,就点聚工导航与标签导航的结合体,其中一个导航标签蕴含更多的操作选项,也可以理解为标签中蕴含更多二级导航标签。当页面有处于同一层级的几大部分内容,同时又需要一个非常重要且频繁操作的入口,就可以采用这种APP导航模式。
  优点:
  把类似生产内容的主功能按钮放在中间,标签更加突出醒目;
  同时该主功能标签做了功能扩展,也因此给设计增加了一些个性化的亮点。
  缺点:
  占据高度空间略大,一般都是文字图标的形式。
  04轮播导航
  描述:
  当你的应用信息足够扁平,可以尝试轮播导航;
  优点:
  能够最大程度的保证应用的页面简洁性,操作也是最方便;
  缺点:
  不能够快速的定位对应的分页内容;
  05宫格导航
  描述:
  宫格式导航被广泛应用于各平台系统的中心页面;
  用在二级页作为内容列表的一种图形化形式呈现,或作为一系列工具入口的聚合;
  用户频繁切换的概率是比较低;
  在不同的文章中可能被称作:跳板(图标卡片式)、磁贴式。
  优点:
  扩展性非常好,便于组合不同的信息类型(运营位、广告位、内容块、设置等);
  视野范围内可以展示的功能入口多,能够让用户整体上了解APP提供的服务,从而选择自己所需要的那个服务;
  静态、动态结合可以展示出丰富的信息,同时保持视觉统一;
  跨平台不受平台限制。
  缺点:
  每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通;
  当排布过多的时候,用户容易眼花缭乱,选择压力较大;
  06陈列馆式导航
  描述:
  宫格导航的变式吧,可用来呈现实时内容,比如新闻、菜谱、文章或照片,可以采用网格布局(比如一直播和ins)或轮盘布局(比如格瓦拉电影),还可以采用幻灯片模式进行展示。
  陈列馆式设计模式最适合呈现经常更新的、视觉效果直观、彼此独立的内容。
  优点:
  相较于列表导航、宫格式导航的不同在于,陈列馆式导航有更丰富的表现形式、更加随意的组合效果(瀑布流等)以及丰富的动态效果(轮盘、幻灯片形式);
  直观展现各项内容。
  缺点:
  不适合展现顶层入口框架;
  容易形成界面内容过多,显得杂乱;
  设计效果容易呆板。
  07抽屉导航
  描述:
  抽屉式也是谷歌提出来的一种导航模式,由于虚拟按键的存在,所以在安卓上使用底部Tab会造成双底栏,视觉观感不佳;
  一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能,或者不那么需要频繁切换内容的应用,例如对设置、关于、个人信息等内容的隐藏;
  更多的被应用于信息流产品设计中,这类产品注重核心内容的展示,用户的任务路径较为单一,几乎都是用于浏览产品的核心内容;至于其他比较低频的模块入口则会隐藏在当前界面后方,避免冗余的模块抢夺用户的眼球;
  在不同的地方可能被称为:扩展菜单、侧边导航、汉堡导航;
  “28”法则告诉我们,80的用户只用那些20功能,这20功能就是信息流里面的核心功能;如果那80不常用的功能也占用着最重要的位置,那么用户就会被打扰,产生臃肿感,甚至会放弃使用产品。
  优点:
  节省页面展示空间,让用户将更多的注意力聚焦到当前页面;
  由于导航界面是隐藏在屏幕之外,展开之后整一页面都是导航菜单内容,所以可扩展和个性化的空间很大;
  扩展性好,导航的个数没上限。
  缺点:
  用户不易发现,使用次功能需要二次点击,给用户在切换功能带来了操作成本;
  可见性太差,用户还没能把汉堡菜单按钮和侧边栏联系起来,所以,侧边栏的渗透率很低;
  不直观、不适用于主导航、如遇频繁操作的功能,用户不断开关抽屉体验不好。
  08下拉导航菜单导航
  描述:
  与抽屉式导航的目的相同,都是为了突出内容。一般位于产品顶部,通过点击呼出导航菜单;
  通常用来筛选同一信息模块下不同类别的信息,或者快速启动某些常用的功能模块,而不需要频繁的页面跳转;
  Android中对应的控件为spinner控件,但该控件用于同一类别下不同视图之间的切换,而不是跳转至完全不同的视图。iOS中下拉菜单为自定义控件,可以实现不同类别之间的切换;
  下拉导航还有一种变式,就是下来菜单中展示两级甚至多级,一般在电商产品中比较常见,因为品类和筛选条件众多。
  优点:
  菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置;
  缺点:
  位于屏幕上方,相对隐蔽且不能结合手势操作,不适合于频繁的切换功能使用;
  考虑到导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容。
  09列表导航
  描述:
  作为信息组织框架,是我们在产品设计中必不可少的一个信息承载模式。
  适合用来显示较长或拥有次级文字内容的标题,每行可以融入较多信息。
  与宫格导航类似,常用于二级页面,不会默认展示任何实质内容,所以通常app不会在首页使用它;
  无论ios开发和android都有现成的列表布局插件和模板。
  优点:
  由上至下查看符合习惯;
  结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。
  缺点:
  条目太多或分布不合理会导致用户查找困难;
  不适合需要频繁切换任务的情况。
  总结
  导航可能不单单只有这几种,可能大家的叫法也不同,而且每种导航都有其存在的意义,不是它不够好,而是它可能不适用于你的产品。真正在实际项目中,还是得根据产品的实际情况综合去运用。
投诉 评论 转载

设计小结:新闻资讯类App的UX浅析工作到现在已经负责过2个资讯类新项目了,每次做完项目感觉都有很多缺憾,这次就对新闻资讯类app做一个UX总结解析,希望能对大家有所帮助。行业背景、用户分析背景……给知识音频产品设计播放页有多难?音频产品播放页面设计,怎么做才更合理?播放页设计在设计网站上一搜一大堆。而且从留声机开始,经历了录音带、CD、MP3到现在的手机,已经经历了无数次迭代,已经有了非常深入人……产品理念:MVP已死,MAP当道今天这篇译文是关于MVP产品和MAP产品的,在读到这篇文章之前,我确实只知道互联网产品有MVP产品这么一说,不过这篇文章的作者抛出的MAP产品的概念,确实让我眼前一亮,一言以蔽……在设计上,Facebook必须要采取的4个改变编者按:这是对于Facebook的建议,也是对其他社交媒体平台的建议。本文作者KatharineSchwab在“The4DesignChangesFacebookShouldR……语音交互实例:从切换播放模式细节想到的这一段项目时间不是很紧张,比较有时间去探讨一些细节的问题,有些东西可以做有些东西可以不做,去探究背后的原因是一件很有趣的事情。一、简单介绍VUI想必大家对于语音交互……后台交互设计:关于中后台系统设计的4个原则最近几个月一直在做中后台系统的交互和视觉设计,也找了很多国内外的参考资料,今天翻译的是behance上的一篇文章,链接将附在文章底部。第一次投稿,如有不足,还请各位看官多……如何正确设计下拉菜单?表单中使用的下拉菜单有优点,但同样的它也有一些缺点和关注点,那我们要怎样才能正确设计下拉菜单呢?在表单中使用下拉菜单有很多优点:它们在UI上占用的空间不多;支……脑洞:腾讯视频限制多用户登录的几个猜想如何既能限制用户共享付费账号,又能避免被用户骂,这可能是很多视频网站的产品经理都在思考的问题。而腾讯视频的这一招可谓一举两得啊!腾讯、爱奇艺、优酷等的产品经理可能每天都在……APP导航设计的对比总结纵观应用市场上的APP,导航设计的模式总是几种的组合使用。导航设计的目的就是需要突出产品的核心,扁平化用户的任务路径。让用户能够顺利的在产品中畅行,让用户时刻清楚自己在应……电商后台设计难?搞清这7个点再说(附RP源文件下载)电商产品的后台设计较为复杂,考虑的因素有很多。本文通过对具体设计原型的拆解分析,从商城首页、商品详情购物车管理、支付结果、地址管理、订单管理、红包管理、后台等7个方面,全面介绍……定制需求设计实现的案例分享在金融行业中,大众化的理财产品往往不能满足高端客户资产保值、增值的需求,为了做好这部分客户的留存,投资机构会根据客户的投资需求,发行专属的定制产品。在实际执行时,一般是由客户专……一款出色的结账表单都具备什么特点?对于客户来说,购买东西的流程越容易,他们就越容易进行购买。毫无疑问,结账体验是所有网上商店最重要的一部分,表单的设计直接关系着电子商务网站的转换率更快,更方便用户填写的表……
产品汪要如何优雅的提需求?贷后系统总结:经历过的3个坑如何对产品需求进行复盘?这里提供了一个有效的复盘思考框架项目管理5阶段鹅厂高级项目经理4年升级打怪的经历浓缩利益、权利、关系驱动方式对项目的影响产品经理进行时间管理的6个核心点如何从用户的“功能需求”中,找到真正的需求?PM硬技能篇:从底层看需求分析以用户体验五要素的思路,如何编写产品需求文档(PRD)3个套路,教你学会做“高人一等”的产品经理如何拆解产品需求?三个角度4个角度阐述:AI产品经理的定义和分类
吃什么可以淡化色斑盘点4种可以有效淡斑祛斑的食物詹姆斯队连续4年获得全明星赛胜利字母哥能否卫冕MVP追平威少梅里山鹰好词好句wps文档页眉怎么设置为艺术字wps文档页眉设置艺术字的方法越减越胖?你是不是轻信了这5点关于秋分的作文秋分习俗童年趣事作文400字夫妻个人财产主要包括哪些2020北风吹白云,万里渡河汾。意思翻译、赏析看刘亦菲如何永葆18岁?【歌词】青春美梦歌手:施文强热传聚热点网 led节能灯灯珠一直闪是什么原因

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界