9.10导航模式分类设计

1、APP设计之四：导航设计2016UI设计（从基础到精深）一、导航？What is the Tabbed navigation？也叫tab式导航，导航一般位于页面底部，通常包含5个是比较合适的数量。这种导航是非常常见的，如果你的应用需要用户频繁的在不同分页切换，可以采用这种导航。它的缺点是会占用一定高度的空间。如版的APP界面设计图。大多数app都会选择选项卡式导航，也叫导航，方便用户在不同分页里频繁切换。原生android系统是不会使用这类导航形式的，因为沿袭了PC端网页导航模式，所以用户很容易上手。曾经尝试在android使用非式导航，这也是一种向大多数用户妥协的结果。总之来说，只有跟紧用户

2、的使用和大众的审美主流，才能推动应用产品不断更新换代，更加适合用户。PAGE 02导航 一、导航？What is the Tabbed navigation？导航PAGE 02一、导航？What is the Tabbed navigation？这种导航形式最常见，主要有上栏导航和下导航两种形式。资讯类网易、购物类淘宝、即时通讯类等在全局导航上都是采用这种方式。PAGE 02一、导航？What is the Tabbed navigation？优点：1. 清楚当前所在的位置2. 轻松在各间频繁跳转且不会迷失方向3. 直接展现最重要的内容信息缺点：1. 功能过多时，该模式显得笨重不实用2. 会占

3、用一定高度的显示面积3. 不利于大屏幕进行单手切换操作PAGE 02一、导航？What is the Tabbed navigation？1. 底部tab导航：如果此时你观察一下自己中常用的APP你就会发现、淘宝、美团、京东等全部都是底部tab式导航。这是符合拇指热区操作的一种导航模式，那么拇指热区呢？车上，一手拉扶手，当你走在、单手持握并操作;站在另一只手操作等等这些场景时，你最常用的操作就是右手单手持握并操作，因此，对于来说，为触摸进行交互设计，主要针对的就是拇指。但在操作中，拇指的可控范围有限，缺乏灵活度。尤其是在如今的大屏上，拇指的可控范围还不到整个屏幕的三分之一主要集中在屏幕底部、与

4、拇指相对的另外一边。当用右手持握的时候（左撇子毕竟是少数，热区如下图所示）还是要为主流用户设计，拇指的PAGE 02一、导航？What is the Tabbed navigation？PAGE 02一、导航？What is the Tabbed navigation？要注意的是，下部栏的导航最多放置个，多于5个用户难以记忆而且容易迷失；如果同时放置了上下两个导航，如网易，则下部导航的层级要高于上部导航，即上部导航是作为二级导航，这个顺序不能颠倒，此时上部导航的数量不受限制。上部除了点击切换外还可通过手势滑动切换，下部只能通过点击切换。导航方式能够让用户一眼就看出产品的功能，同时能够方便的在几

5、个之间快速切换。有些产品会针对中间的进行一些功能的变换，如的，喜马拉雅则是作为底部的中间按钮就是用来发布界面的快捷键。PAGE 02一、导航？What is the Tabbed navigation？随着屏幕越来越大，内容显示变多了，但是单手操作变难了。这也就是为什么，和导航条一般都在界面的下边缘，而将导航放置在屏幕底部即拇指热区，这样的方式为单手持握时拇指操作带来了更大的舒适性。将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性，还关系到另一个问题：如果放在上面，用手指操作时，会挡住阅读的视线。如果控件在底部，不管手怎么移动，至少不会挡住主要内容，从而给予清晰的视角。呈递内容的屏幕在上方，

6、控制按键在下方。把一个需要按压的home键放在底部比Android将三个触摸式物理按键放在底部高明多了，这些接近屏幕边缘的物理按键挤在一起，手指非常不便于操作。（甚至直接将3个物理按键放在了屏幕里），尤其是在玩的时候总会误触发这3个物理按键，造成无意退出，非常不爽。如果再将导航也放置在底部，只能对舒适性说拜拜了PAGE 02一、导航？What is the Tabbed navigation？PAGE 02一、导航？（下图为Android和iOS图）What is the Tabbed navigation？2. 顶部tab导航： Android的（虚拟）物理按键已经放在底部了，为了不产生堆叠

7、，很多 Android应用运用了顶部tab式导航，这是一种妥协下的行为。PAGE 02一、导航？What is the Tabbed navigation？而如今，在妥协物理按键和拇指操作舒适中，Android版抛弃了顶部导航的方式，和IOS保持了一致PAGE 02一、导航？What is the Tabbed navigation？当然顶部导航也不是那么一无是处，音乐和酷我音乐现在用的就是顶部Tab式导航，为了更好的浏览基本信息（歌手、歌曲名）、以及支持快捷操作（/暂停）器需要固定在底部,那么顶部tab导航不失为一个好选择（如下图）PAGE 02一、导航？What is the Tabbed

8、 navigation？还有腾讯闻这种和网易新类APP，由于内容、分类较多，运 用顶部和底部双tab导航，而切换频率最高的tab放 在顶部，这是为什么呢？因为在每个tab都是沉浸式阅读，最常用的操作是在一个tab中不断滑阅读内容，将常用的tab放在顶部，加入手势切换的操作，反倒能带来更好地阅读体验。PAGE 02一、导航？What is the Tabbed navigation？3. 底部tab式导航的扩展形式：在有些情况下，简单的底部tab式导航难以满足的操作功能，这个时候就需要一些扩展形式来满足需求。如和空间、都做了这种扩展，也因此给设计增加了一些个性化的亮点（如图）PAGE 02一、导

9、航？What is the Tabbed navigation？在这些APP中，为了让用户更简单的贡献内容，突出了按钮的设计，让平淡的栏多了几分趣味。导航总结：实际上，底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式，他不怎么出彩，但是绝对不会犯错。在大屏幕时代，底部 Tab模式的导航更能适应，也更好设计。适用于：分类数目不多，可以控制在5个以内，且用户需要在间频繁切换来执行多个任务需要注意：结构太过复杂而且不稳定的应用不适合式导航PAGE 02一、导航？What is the Tabbed navigation？小结：在两种情况下可以选择tab式导航1. 某项功能必须固

10、定在底部，那么其他tab只能固定在顶部，但为了方便操作，顶部tab导航最好支持手势操作，即滑动即可切换。当然，点击切换是最好的方式，2. 该APP是沉浸式体验，如体验，可以将tab放在顶部。、小说等，为了带给用户更好的阅读PAGE 02一、宫格导航？What is the Scratchable latex navigation？即跳板式导航，这种导航模式非常常见，但是却不常用。常见是因为，无论你用的是 Android还是iOS，每天一打开，宫格式导航就会蹦跶出来。PAGE 02宫格式导航一、宫格导航？What is the Scratchable latex navigation？宫格式导航

11、PAGE 02一、宫格导航？What is the Scratchable latex navigation？几乎每一个APP都是一个宫格，这些宫格在中心页面，用户只能在中心页面进入其中一个宫格，如果想要进入另一个宫格，必须要先回到中心页面，再进入另一个宫格。每个宫格相互独立，它们的信息间也没有任何交集，无法跳转互通。因为这种特质，宫格式导航被广泛应用于各系统的中心页面，这就是为什么说他常见。但是为什么不常用呢，大家可以翻一下里的APP，看看哪个APP的主导航用了宫格式导航？你可能只能找到一个最常用的，尤其是爱自拍的亲们-美图秀秀。PAGE 02一、宫格导航？What is the Scrat

12、chable latex navigation？PAGE 02一、宫格导航？What is the Scratchable latex navigation？经常使用美图秀秀的人都会有一个共同的烦恼，例如拍了一张 需要美图一下，那么心里认为的步骤是：进入美图秀秀-打开一张-先祛斑祛痘、放大眼睛、瘦个脸-最后加上特效（自然/甜美可人/，系）-保存。但是美图秀秀给的实际步骤却是这样的:进入美图秀秀-打开一张-进入人像美容-祛斑祛痘、放大眼睛、瘦个脸-保存-再进入美化图片-加个特效-再次保存。这样做的结果是流程复杂，而且还多存了一张没用的，还要到里进行删除。这就是宫格式导航的缺陷，信息互斥，无法相互

13、通达，只能给用户带来了的操作步骤。PAGE 02一、宫格导航？What is the Scratchable latex navigation？优点：1、清晰展现各2、容易记住各位置，方便快速找到缺点：1、无法在多间灵活跳转，不适合多任务操作2、容易形成更深的路径3、不能直接展现4、不能显示太多内容次级内容PAGE 02一、舵式导航？What is the The rudder type navigation？舵式导航是卡式导航的一种变体。中间的作为重要且操作频繁的，一般都用图形或者颜色凸显出来。它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。当页面有处于同一层级的几大部分内容，同时又需

14、要一个非常重要且频繁操作的，就可以采用这种APP导航模式。当app存在比较多同级别的功能时，需要舵式导航，可以将部分相对不重要或者使用频率不频繁的功能隐藏掉，留下重要且使用频繁的功能icon。PAGE 02舵式导航 一、舵式导航？What is the The rudder type navigation？PAGE 02一、舵式导航？What is the The rudder type navigation？1. 重要且操作频繁的很显眼。2. 较大限度的引导用户进行操作。中间按钮极其显眼，按钮周围的俩个按钮点击率较低。对中间按钮的设计要求比价高，需要有高度的设计美感，否则显得不协调。PAGE

15、 02缺点优点一、旋转木马式导航？What is the The carousel type navigation？也叫轮播式导航，以及平铺式导航，当应用程序信息足够扁平时可以 尝试轮播导航，如果应用得当，能够给人耳目一新的体验，这就是旋 转木马式导航，这种导航能够较大程度保证应用页面的简洁性，得到 极为流畅的用户体验和直观的流程，实现概览和细节界面的无缝过渡。页面式更换，适用于有少量页面的导航，可以用来作为展示某些情况，如系列性产品。这种导航方式很容易带来高大上的视觉体验，最大程度的保证了页面的简洁性和内容的完整性，且一般都会结合滑动切换势，操作起来也非常方便。PChouse是一个家居杂志的

16、APP，杂志休闲随意的特质，非常适合平铺式导航，最大限度的保持了的完整性。PAGE 02旋转木马式导航一、旋转木马式导航？What is the The carousel type navigation？PAGE 02一、旋转木马式导航？What is the The carousel type navigation？但缺点是用户只能切换的相邻页面，很难跳转到非相邻的页面，很容易迷失位置，因此平铺式导航都会添加几个小点来指示当 前位置。如墨迹天气中切换城市的操作就运用了平铺式导航， 优点是可以在一个页面完整展示当前城市的情况，快速切换到 其他城市。但如果你设置的城市比较多，就很难快速定位到某

17、个城市，但所幸手势操作切换方便，且正常情况下，用户最多 只会设置2-3个页面，不会造成太大的负担。最多不要超过8个页面。淘宝中的也使用了平铺式导航，虽然有40个之多，但用数字表达出了明确位置的同时，也加入了手势切换，增加了易用性和趣味性。PAGE 02一、旋转木马式导航？What is the The carousel type navigation？PAGE 02一、旋转木马式导航？What is the The carousel type navigation？单页面内容，整体性强。线性的浏览方式有顺畅感和方向感。不适合展示过多的页面。不能跳跃性的查看间隔的页面，只能按顺序查看相邻的页面。

18、由于各页面结构相似，容易忽略后面的内容。PAGE 02缺点优点一、旋转木马式导航？What is the The carousel type navigation？总结：轮播式导航比较适用于足够扁平化的内容和随意浏览的阅读模式需要注意的是：无法跳转至费相邻页面，如果间需要反复跳转，则不适合这种模式该导航适用于一些小而美的应用，显示全部的信息，辅助页面是页面的扩展或比较次要内容PAGE 02一、陈列式导航？What is the The display type navigation？即陈列馆式导航，（特点）陈列式导航是通过直接在界面上显示各个内容实现导航的。宫格导航活。的是规则或者不规则的网格

19、，陈列馆式的布局则更加灵适用范围：主要用于展示文章，菜谱，和产品等。PAGE 02陈列式导航一、陈列式导航？What is the The display type navigation？PAGE 02一、陈列式导航？What is the The display type navigation？PAGE 02一、陈列式导航？What is the The display type navigation？直观展现各项内容。方便浏览经常更新的内容。1. 不适合展现顶层框架。容易形成界面内容过多，显得杂乱。设计效果容易呆板。PAGE 02缺点优点一、列表式导航？What is the The Th

20、e list of navigation？列表式APP导航是在APP设计种必不可少的一个模式。当然作为一个APP的导航也是非常方便的，几乎可以在所有的app中都能看到它的应用。不过目前来看，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组。PAGE 02列表式导航一、列表式导航？What is the The The list of navigation？列表式APP导航是在APP设计种必不可少的一个信息承载模式。当然作为一个A

21、PP的导航也是非常方便的。不过目前来看，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组。PAGE 02一、列表式导航？What is the The The list of navigation？PAGE 02一、列表式导航？What is the The The list of navigation？层次清晰。可展示内容较长的标题。可展示标题的次级内容。同级内容过多时，用户浏览容易产生疲劳。排版灵活性不是很高。3. 只能通过

22、排列顺序、颜色来区分各重要程度。PAGE 02缺点优点一、点聚式导航？What is the The Gathered at the potype navigation？点聚式导航，其交互方式以path为代表，设计规范android在material design定义了这种导航交互方式。希望原生android系统的它将多个功能聚汇到主界面中显示，方便用户呼出使用。由于点聚式占用空间小，所以它常出现在一些主要的流程界面中。一般 会融入一些动态的互动效果，让导航更具趣味性。在渐渐的演变中，点聚式会搭载其他导航样式出现（如式）。在设计过程中，按照实际需求，结合内容选择最为合适的导航形式，切忌跟风或者

23、先从形式入手从而忽略导航菜单自身的特点。PAGE 02点聚式导航一、点聚式导航？What is the The Gathered at the potype navigation？PAGE 02一、点聚式导航？What is the The Gathered at the potype navigation？又叫悬浮icon导航，是将导航页面分层，无论你到达app的哪个页面，悬浮icon悬浮在上面，你依靠悬浮层随时可以去想要去的地方。同时，为了让悬浮icon不遮挡某个页面的操作，通常悬浮icon都可以在屏幕边缘移动。ios系统就运用了这种导航模式-Assistive Touch，Assisti

24、ve Touch是在ios5出现之后搭载的新的辅助功能，知乎上很多人吐槽这个悬浮方块非常碍事还有很多人说这是因为home键质量不佳而且并没有明确提出有效的解决方案，所以Assistive Touch是曲线，单说悬浮icon在大屏中部浏览，你想回幕时代发挥的作用，当你单手持握，拇指在到主屏幕，单手手指却难以到达屏幕底部，悬浮方块在这个时候就能为你提供快捷操作。PAGE 02一、点聚式导航？What is the The Gathered at the potype navigation？PAGE 02一、点聚式导航？What is the The Gathered at the potype n

25、avigation？而且你可以在AssistiveTouch里自定义顶层菜单，Assistive Touch从iOS5一直活到iOS9，不是一个鸡肋的功能。在Android的Material Design中，同样提出了悬浮icon的设计概念。PAGE 02一、点聚式导航？What is the The Gathered at the potype navigation？尽管现在很难看到悬浮icon作为导航的设计，但我相信随着大屏的发展，悬浮式icon一定会越来越广泛的使用.悬浮式icon是一个非常便捷的操作但需要注意的是:，也适应大屏幕时代。1. 悬浮式icon会遮挡某些页面的操作，在设计的时

26、候应该考虑进去，比如无论在那个页面为悬浮icon留有位置。2. 在某些信息层级繁多且复杂的APP，让用户决定是否需要调出悬浮式icon，或者让用户自定义菜单会更加符合用户的心理预期。PAGE 02一、点聚式导航？What is the The Gathered at the potype navigation？1. 流畅的动画使展示方式显得更加有趣。2. 节省空间，避免了导航占用空间大。3. 具有更强的引导性，避免了抽屉导航引导性。1. 隐藏了框架中的内容。2. 对交互的功能可见性要求高。PAGE 02缺点优点一、瀑布式导航？What is the The waterfall type nav

27、igation？瀑布式，又称瀑布流式布局，是一种比较流行的页面布局。这种布局适用于小数据块，每个模块内容相近且没有侧重点，而且每个模块之间的高度不一样，视觉表现为参差不齐的多栏布局，通常，随着页面的向下滚动，这种布局还会不断加载数据块并附加到当前页面。所以，给这种布局起了一个形象的名字，叫瀑布流式布局，目前大量运用在看图类应用中。设计方案：的屏幕宽度有限，所以一般采用一栏或二栏布局形式。另外，每个模块中的宽度是有固定值的，根据这个高度极限值拉伸或缩小，由于有的值，超过这个高度就截取中间部分。高度非常高， 一个极限PAGE 02瀑布式导航一、瀑布式导航？What is the The waterfall type navigation？适用场景：多图：基本上不做为顶级导航，的是多图内容。PAGE 02一、瀑布式