深入浅出!全方位科普移动端导航七种设计模式.pdfVIP

深入浅出 ！全方位科普移动端导航的七种设计模式 看了很多总结导航的文章 ， 实都基本雷同 ，但是都觉得不够细致 ，也不是从我们常用的产 品去分析的 ，因此用自己的思路重新分析了一遍 ，某些段落来自引用 ，比如拇指热区 ，某些 来自我读过的文章 ，但大部分的分析来自我的原创。这篇文章应该说是站在巨人的肩膀上 ， 自己的一些浅见。 任何A PP的组织信息都需要以某种导航框架固定起来 ，就像是建筑工人拔地而起的高楼大厦一样 ， 地基非常重要 ，之后你想要盖多少层楼、每层楼有多少间房 ，都在地基的基础上构成。而一个新的 产品也是这样 ，合适的导航框架 ，决定了产品之后的延伸和扩展。 不同的产品需求和商业目标决定了不同的导航框架的设计模式。而交互设计的第一步 ，就是决定导 航的框架设计 ，框架确定后 ，才能开始逐渐丰富血肉。 首先 ，我们要为组织信息分层 ，在这一步骤 ，一定要做好信息层级的扁平化 ，不能把所有的组织信 息都铺出来 ，这样做只会让用户心烦意乱找不到想要的重要操作 ，也不能把层级做的很深 ，用户没 有那么多耐心跟你玩躲猫猫。一定要将做核心、最稳固、最根本的功能要素放在第一层页面 ， 他 得内容收在第二层、第三层、甚至更深。 之后 ，根据层级的深度和广度来确定导航的设计模式。不要觉得这有多难 ，移动端的屏幕尺寸就这 么大 ，操作方式也无非就是点击、滑动、长按这些。因此导航模式一般也就分为以下7种 （当然你 可以在这七种的基础上互相组合 ）接下来我们可以具体分析一下这七种导航模式。 一、标签式导航 也就是我们平时说的t ab式导航 ，是移动应用中最普遍、最常用的导航模式 ，适合在相关的几类信息 中间频繁的调转。这类信息优先级较高、用户使用频繁 ，彼此之间相互独立 ，通过标签式导航的 引导 ，用户可以迅速的实现页面之间的切换且不会迷失方向 ，简单而高效。需要注意的是标签式导 航根据逻辑和重要性控制在5个以内 ，多余5个用户难以记忆而且容易迷失。 而标签式导航还细分为底部t ab式导航、顶部t ab式导航、底部t ab的扩展导航这三种。 1、底部t ab式导航 如果此时你观察一下自己手机中常用的A PP你就会发现Q Q 、微信、淘宝、微博、美团、京东等全 部都是底部t ab式导航 这是符合拇指热区操作的一种导航模式 ，那么什么是拇指热区呢 ？当你走在路上、单手持握手机并 操作;站在公交车上 ，一手拉扶手 ，另一只手操作等等这些场景时 ，你最常用的操作就是右手单手持 握并操作手机 ，因此 ，对于手机来说 ，为触摸进行交互设计 ，主要针对的就是拇指。 但在手机操作中 ，拇指的可控范围有限 ，缺乏灵活度。尤 是在如今的大屏手机上 ，拇指的可控范 围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。当用右手持握手 机的时候 （左撇子毕竟是少数 ，我们还是要为主流用户设计 ，拇指的热区如下图所示 ） 随着手机屏幕越来越大 ，内容显示变多了 ，但是单手操作变难了。这也就是为什么 ，工具栏和导航 条一般都在手机界面的下边缘 ，而将导航放置在屏幕底部即拇指热区 ，这样的方式为单手持握时拇 指操作带来了更大的舒适性。 将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性 ，还关系到另一个问题 ：如果放在上面 ， 用手指操作时 ，会挡住阅读的视线。如果控件在底部 ，不管手怎么移动 ，至少不会挡住主要内容 ， 从而给予清晰的视角。呈递内容的屏幕在上方 ，控制按键在下方。 这也是为什么我是个果粉的原因 ，iPho ne把一个需要按压的ho me键放在手机底部比A ndro id手机将 三个触摸式物理按键放在底部高明多了 ，这些接近屏幕边缘的物理按键挤在一起 ，手指非常不便于 操作。 （华为甚至直接将3个物理按键放在了屏幕里 ），尤 是在我玩游戏的时候总会误触发这3个 物理按键 ，造成无意退出 ，非常不爽。如果再将导航也放置在底部 ，只能对舒适性说拜拜了 （市面 上的主流A ndro id手机 ） 2、顶部t ab式导航 A ndro id的物理按键已经放在底部了 ，为了不产生堆叠 ，很多A ndro id应用运用了顶部t ab式导航 ，这 是一种妥协下的行为。 （下图为微信A ndro id和iO S图 ） 而如今 ，在妥协物理按键和拇指操作舒适中 ，微信A ndro id版抛弃了顶部导航的方式 ，和IO S保持了 一致 当然顶部导航也不是那么一无是处 ，Q Q音乐和酷我音乐现在用的就是顶部Tab式导航 ，为了更好的 浏览基本信息 （歌手、歌曲名 ）、以及支持快捷操作 （播放/暂停 ）播放器需要固定在底部,那么