唐老鸭

本文和咱们共享下运用级导航结构的特色,让咱们对其有个更明晰的知道和了解。

 

你好,欢迎来到沐风与体会规划。

上星期跟咱们共享了下图前4种运用级导航结构《5分钟学交互:手机交互组件概括 导航篇》,今天跟咱们共享后4种:

 

五、列表导航

这种导航,用在某个页面里比较多见(比方新闻列表页),但运用列表来对整个运用进行导航,即运用的最顶层选项以列表方式出现,仍是相对罕见的。

尽管罕见,沐风仍是找到了一些典型的比方:

QQ邮箱的导航是以列表的方式组织起来的👇

iOS自带的备忘运用,也是运用的列表导航方式。

别的,iOS体系的设置,以及Siri的启示页面,都运用了列表导航:

调查一下上面这些页面,它们有两个特色:

  1. 包括的项目数量多;
  2. 用户翻开运用,方针往往很清晰。比方,用户翻开备忘录,期望在哪个文件夹增加备忘,往往都是很清晰的;用户翻开设置,期望设置的项目一般也都是很清晰的。

在包括项目数量多这一点上,列表导航和顶部tab导航其实挺像的。只不过列表导航是竖向摆放,用户需求点击某个选项,进入二级页,才干看到选项里的内容;而顶部tab导航的选项是横向摆放的,而且每个选项里的内容是直接展现的。

那么,详细应该选用哪种?答案是:依照用户是“有清晰方针”仍是”无目的阅读”决议。

假如用户有清晰方针,那么列表导航能在一页展现多条项目,便利用户高效查找;而假如用户没有清晰的方针,仅仅随意的阅读,那么顶部tab要更友爱,因为每个tab里的内容都直接展现出来,便利用户检查。

可是,顶部tab导航里的选项,越靠后,阅读量越小。如下图所示,因为选项9需求用户接连划动8次,所以能够看到该选项内容的用户现已很少了。

 

六、宫格导航

这种导航方式,在东西类产品中运用较多,比方腾讯手机管家。

宫格导航的本质上和列表导航完全相同,仅仅体现方式上,宫格导航更杰出图标,列表导航更杰出文字。

 

七、轮播导航

轮播导航是一种很小众的方式,现在比较常见的用法是在气候运用中,用于切换不同城市。

其实这种导航和顶部tab导航千篇一律,仅仅把顶部tab换成了底部的圆点。但也因为换成了圆点,使得内容愈加杰出,但每个圆点的意义就不显着了。

因而运用这种导航有两个关键:

  1. 选项不宜过多;
  2. 需确保用户对圆点的内容有必定的预期。

关于第二个关键,比方气候运用,第一个圆点是你的所在地,后边的每个圆点都是用户重视的城市,这一点用户在切换前就已知晓。

假如底部对圆点都是展现同一类的内容,用户在看到第1和第2个,就能猜到后边也是同类的内容,那也是能够的。

 

八、抽屉导航(汉堡包导航)

抽屉导航是下图所示这种导航方式:点击三条横线(长得像汉堡,所以又名汉堡包导航),或许从屏幕左边边际向右划动,都能从页面左边呼唤出一个浮层,浮层里一般会包括多个选项。

这种导航的长处是节约页面展现空间,让用户将更多的注意力聚集到当时页面。缺陷是,被躲藏的选项点击率较低,选项里的内容曝光量会比较小。

在许久以前,网易新闻客户端就选用的抽屉导航。后来版别晋级,改为了底部导航栏方式。因为导航里的选项得到了更好的曝光(常驻在底部导航栏里),因而几个tab的拜访数据都得到了显着的提高。

关于抽屉导航,QQ运用是做得比较好的比方:QQ把底部导航栏和抽屉导航结合起来,当用户坐落底部导航栏中的恣意一个tab时,点击左上角的头像,或许从屏幕左边际向右划动,都能进入个人页。这儿的个人页是以二级页的方式出现的,而不是浮层。

这种规划,无形中加强了用户进入个人页的操作便利性,契合QQ需求杰出个人页的产品需求。

 

以上总结了4种导航结构:

  • 列表导航(包括项目多,用户方针清晰)、
  • 宫格导航(图标更杰出)、
  • 轮播导航(选项不宜多,对圆点需有预期)、
  • 抽屉导航(节约页面空间、更聚集,但被躲藏的选项点击率低)。

 

近期抢手文章

  1. 5分钟学交互:手机交互组件概括 导航篇(上)
  2. 把握了这个导航控件,你能够规划80%的运用导航
  3. 好的规划,不会过火打扰用户

 

原文地址:沐风与体会规划(微信大众号)

作者:小哥哥沐风

转载请注明:unibet网址网 » 5分钟学交互:手机交互组件概括 导航篇(下)

登录保藏
 
你或许喜爱的:
浅析儿童APP中图标的特色浅析儿童APP中图标的特色
移动端表单规划原则:酒店表单重构实践移动端表单规划原则:酒店表单重构实践
关于谈论,你应该知道这些关于谈论,你应该知道这些
百度AR小游戏规划进程全揭秘——《砸金猪积福分》百度AR小游戏规划进程全揭秘——《砸金猪积福分》
细节篇:儿童APP中的圆角规划细节篇:儿童APP中的圆角规划
移动运用结构部分的学习考虑移动运用结构部分的学习考虑
UI规划组件-文本框/输入框(下)UI规划组件-文本框/输入框(下)
2019最佳弹窗/弹出框规划20例【附教程】2019最佳弹窗/弹出框规划20例【附教程】
为什么你的登录页看起来和他人相同?为什么你的登录页看起来和他人相同?
4px网格规划办法,让规划复原更精准4px网格规划办法,让规划复原更精准