说说抽屉式导航

Web端设计很多时候是在考虑如何将操作展示给用户，而mobile的设计更多的时候则是考虑如何将操作巧妙的隐藏起来。这种隐藏实际上是对核心功能的一种突出。

儋州网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作，到程序开发，运营维护。创新互联成立与2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

导航始终是产品设计的重头戏，不管在Web端设计还是在mobile的设计中。之前曾经在读《触动人心》的时候写过一篇"移动产品设计之ios导航模式"，其中的导航模式基本都是基于ios系统自身的一些模式，随着ios新产品的不断出现，新的导航方式也随之更新，这里说一下"抽屉式"的导航方式。

当然，抽屉式导航是我自己给这种导航方式取的名字，至于学名叫什么，我也不知道。这种导航模式一般采用将导航主体隐藏在app侧边的方式，以一个按钮来呼出导航，在使用完成之后在使用相同的按钮隐藏起来。一拉一缩，从形象上与抽屉类似，于是我这样称呼他。

根据我不完全的考证，这种导航方式始于Facebook。在最早的Facebook App中，一直采用了比较保守的九宫格导航方式，随着FB的发展，这种很重的导航方式会导致用户Timeline的展示被很大程度上弱化，虽然FB也曾尝试在用户进入App的时候直接进入Timeline而不是这个九宫格导航，但是，显然这种优化还不是足够好。于是，在2011年11月左右，FB发布了新的ios和android客户端，其中一个重要的变化就是导航模式的变化，推出了新的抽屉式的导航，同时强化了对Timeline的展示。

FB推出这种新的导航模式不久，Gmail的ios版本同样采用了这种导航模式，再之后path 2.0版本也采用了这种抽屉式导航并将其演变到极致。至此，这种抽屉式的导航模式迅速窜红与ios产品设计中。

简单的定义

一般控制抽屉的把手出现在App的左上角，以按钮的形式出现，点击按钮之后抽屉被拉开，按钮被拉到App的右上角，左侧区域被拉开（抽屉）后显示出导航内容。导航的内容可以是以列表形式展示的常规2级导航，也可以将一些非常用的快捷操作入口直接放进来，如FB的搜索。具体形式如下图

当然，这种抽屉也存在一些变种，目前以path和sparrow较为突出。path不仅将主导航作为一种抽屉，同时底部的操作按钮也是一种变种的抽屉；而sparrow则增加了抽屉的层级，在一级抽屉被打开之后还可以再继续拉开一层抽屉。另外，米途订酒店则将全部的酒店预订过程化作一种抽屉，也是一种很不错的形式。

另外，对于一些需要用到消息提醒的应用，抽屉的出现会给消息的展示带来新的麻烦，因此，很多的抽屉导航会将消息展示在Title区域里，以一个入口的形式来展示。典型的如Facebook、快捷酒店管家。

抽屉导航的核心思路

抽屉式导航的核心思路是"隐藏"。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。个人认为，隐藏的思维是移动产品设计中最核心的一个思想。上周在极客公园分享了关于如何应用缩小、隐藏、赋加的思路来做移动产品设计的话题，而这个思路中最最核心的恰恰是隐藏。

Facebook中，用户核心的操作是阅读Timline，所以抽屉里隐藏了所有其他的操作；Path中，用户的核心操作还是看好友的Timeline，所以抽屉里隐藏了其他的操作，同时UGC的操作又必不可少，因此path在左下角也用了一个抽屉；在Sparrow里，用户看新邮件的频率大于查看归档邮件的频率，因此抽屉里隐藏了邮件类型等操作，同时为了平衡发邮件的需求，在右下角单独留了一个入口；在快捷酒店管家里，用户的核心操作是通过地图寻找附近的快捷酒店，所以抽屉里隐藏了切换城市等其他操作……

3月份的时候我曾在微博上说，这种导航方式会逐渐流行，推测的依据就是随着移动产品设计的演进，越来越多的产品设计师开始认识到只有让核心更突出才能提高整体产品的体验，只有不断降低用户的干扰才能不断提高用户的使用效率。

不适合抽屉式导航的App

需要用户不断在导航间进行切换的App、没必要有太多导航的App、或者核心功能就是一堆入口的App。

文章来源：ikent.me

网站栏目：说说抽屉式导航
转载来源：https://www.cdcxhl.com/article48/chsdhp.html

成都网站建设公司_创新互联，为您提供品牌网站设计、网站建设、网站导航、服务器托管、Google、虚拟主机

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联