APP导航设计对比总结
导航设计的目的是突出产品的核心,扁平化用户的任务路径。让用户流畅的导航产品,让用户时刻知道自己在应用中的位置,如何到达目的页面。
产品导航系统是在用户界面上展示产品信息结构的方式。移动产品导航没有最好的设计,只有最适合的设计。根据你的产品采取最合适的导航设计。
纵观应用市场的APP,导航设计模式永远是几种的组合。让我们来看看几种常见的导航设计模式。
描述:
1.当产品的整个体验流程被几个常用的功能模块(一般不超过五个)渗透时,意味着用户需要在多个标签入口之间来回切换;为了保证切换的效率,贯穿整个产品体验的流的模块平铺在标签栏位置,保证了用户任务路径的扁平化。
2,iOS原创App播客,5Tab。
优势:
1,可视性好,位置明显,容易找到,它让用户直观地了解APP的核心功能;
2、可操作性好,用户可以轻松触摸到这个区域,可以在几个标签间快速切换而不迷失方向,简单高效;
3、符合习惯,ios原生控件,开发简单;
4、优先级高,用户使用频繁,相互独立。
缺点:
1,座位数量有限,一般最多五个(否则需要结合其他方法,使用层次和回缩)。
2、占用稍大的高度空间,一般以文字+图标的形式。
描述:
顶部标签是谷歌提出的一种导航模式。为了区别于iOS,由于手指很难到达顶部,谷歌相应的提出了手势操作的解决方案:通过在屏幕上左右滑动来切换标签页。
在实际项目中,顶部和底部经常一起使用。其实是holo的文章。
优势:
扩展性好:标签数量没有上限,但是太多的话,后面的页面越多,渗透率越低;
占用空间小:与底部标签页相比,顶部标签页一般占用空间较小(因为不需要考虑手指点击,可以缩小区域,只需选择图标或文字),因此可以安排更多的空间进行内容展示。
手势操作非常方便。
缺点:
能见度稍逊:这是空间占用面积较小的结果。
描述:
1,点聚合,将多个核心功能聚合到主界面进行展示,方便用户调出。它将与其他导航样式(如标签)一起出现,成为方向舵导航。
2.类似于标签导航,点击综合导航和标签导航的组合,其中一个导航标签包含更多的操作选项,也可以理解为标签包含更多的二级导航标签。当页面有几个主要内容在同一个层级,需要一个非常重要且经常操作的入口时,可以采用这种APP导航模式。
优势:
1,把类似制作内容的主要功能按钮放在中间,标签更突出;
2.同时扩展了主功能标签,为设计增加了一些个性化亮点。
缺点:
1,占用的高度空间略大,一般是文字+图标的形式。
描述:
当你的申请信息足够扁平化时,可以尝试轮播导航;
优势:
可以最大程度的保证申请页面的简洁,操作也最方便;
缺点:
无法快速定位相应的分页内容;
描述:
1,宫殿导航广泛应用于各平台系统的中央页面;
2.在二级页面中用作内容列表的图形形式,或用作一系列工具条目的集合;
3.用户频繁切换的概率比较低;
4、在不同的文章中可能被称为:跳板(图标卡)、平铺式。
优势:
1,非常好的扩展性,容易组合不同的信息类型(运营位、广告位、内容块、设置等。);
2.视野范围内可以展示的功能入口很多,使用户能够整体了解APP提供的服务,从而选择自己需要的服务;
3.动静结合,可以在保持视觉统一的同时,展示丰富的信息;
4.跨平台不受平台限制。
缺点:
1,每个细胞都是相互独立的,它们的信息之间没有交集,无法跳跃和交流;
2.排列过多时,用户容易眼花缭乱,选择压力大;
描述:
1是网格导航的一种变体,可用于呈现实时内容,如新闻、食谱、文章或照片,并可以网格布局(如直播和ins)或轮盘布局(如格瓦拉电影)显示,也可以幻灯片模式显示。
2.画廊式的设计模式最适合呈现经常更新、视觉直观、独立的内容。
优势:
1.与列表导航和宫殿导航相比,展馆导航具有更丰富的表现形式,更多的随机组合效果(瀑布流等。)和丰富的动态效果(轮盘和幻灯片形式)。
2.直观显示所有内容。
缺点:
1,不适合展示顶级入口框架;
2.内容太多容易形成界面,比较乱;
3、设计效果容易平淡。
描述:
1,抽屉式也是Google提出的一种导航方式。因为虚拟按键的存在,在Android上使用底部Tab会造成双底栏,视觉感受差。
2.一般用于将用户不常用的功能或者核心放置到产品中,或者不需要频繁切换内容的应用中,比如隐藏设置、信息、个人信息等。
3.更多用于信息流产品的设计,注重核心内容的展示,用户的任务路径比较简单,几乎都是用来浏览产品的核心内容;至于其他低频模块入口,会隐藏在当前界面后面,避免冗余模块抢用户眼球;
4.可能叫:扩展菜单、侧边导航、异地汉堡导航;
5.“2/8”法则告诉我们,80%的用户只使用那20%的功能,这是信息流中的核心功能;如果那些不常用的80%功能也占据了最重要的位置,那么用户就会受到干扰,感觉臃肿,甚至放弃使用产品。
优势:
1,节省页面显示空间,让用户更专注于当前页面;
2.因为导航界面隐藏在屏幕之外,扩展后整个页面都是导航菜单内容,所以扩展和个性化的空间很大;
3、扩展性好,导航数量没有上限。
缺点:
1,用户不好找,二级功能的使用需要两次点击,给用户切换功能带来运营成本;
2.可视性太差,用户还没能把汉堡菜单键和侧边栏连接起来,所以侧边栏渗透率低;
3.不直观,不适合主导航,在频繁操作的情况下,用户不断开关抽屉的体验也不好。
描述:
1,和抽屉导航的目的一样,都是为了突出内容。一般位于产品顶部,点击调出导航菜单;
2.通常用于过滤同一信息模块下的不同类型信息,或者快速启动一些常用的功能模块,无需频繁跳转页面;
3.Android中对应的控件是spinner控件,但这个控件是用来在同一类别的不同视图之间切换,而不是跳转到完全不同的视图。iOS中的下拉菜单是自定义控件,可以在不同类别之间切换。
4.还有一种下拉导航的变体,就是下拉菜单中显示两级甚至更多级,这种情况在电商产品中普遍存在,因为类别多,筛选条件多。
优势:
1,菜单与界面的连贯性优于抽屉,便于用户感知当前位置;
缺点:
2.位于屏幕上方,相对隐蔽,无法与手势结合,不适合频繁切换功能;
3.考虑到导航菜单的可用区域较小,菜单内容一般以列表的形式显示。
描述:
1作为一种信息组织框架,是我们产品设计中不可或缺的信息承载模式。
2.适合显示长标题或者有次要文字内容的标题,每行可以集成更多的信息。
3、类似网格导航,常用于二级页面,默认不会显示任何实质性内容,所以通常app不会在首页使用;
4.ios开发和android都有现成的列表布局插件和模板。
优势:
1,自上而下的视图符合习惯;
5、结构清晰,通俗易懂,冷静高效,并能帮助用户快速定位并前往相应页面。
缺点:
1,物品过多或分布不合理,用户难以找到;
2.不适合需要频繁任务切换的场合。