网站导航应该如何设计

导航是产品设计的重头戏，Web网站设计的时候是在考虑如何将操作展示给用户，而Mobile的设计更多的时候则是考虑如何将操作巧妙的隐藏起来。但这种隐藏实际上是为了核心功能的突出。
Navigation is the product design of LPS, the Web design is in considering how to show the user will operation, and the design of the Mobile more of the time is considered how operation clever is hidden. But this is actually the core functions in order to hide the outstanding.

iOS导航模式基本都是基于iOS系统自身的一些模式，随着iOS新产品的不断出现，新的导航方式也随之更新。在这里，说一下“抽屉式”的导航方式。
IOS navigation mode is based on the basic of iOS system itself some mode, with iOS new product appear constantly, the new navigation way also will update. Here, said the "upper" navigation way.

当然，抽屉式导航是作者自己给这种导航方式取的名字，至于学名叫什么，小编也不知道。这种导航模式一般采用将导航主体隐藏在app侧边的方式，以一个按钮来呼出导航，在使用完成之后在使用相同的按钮隐藏起来。一拉一缩，从形象上与抽屉类似，于是就这样称呼他。
And, of course, is the author of the upper navigation to the navigation way the name, as to learn what name, small make up also don't know. The navigation mode general use of the main body hidden in the app will navigation on the way to a button to exhale navigation, in use by using the same after completion of the button is hidden. Pull a shrink, from image and drawer similar, so they call him that.

根据不完全的考证，这种导航方式始于Facebook。在最早的Facebook App中，一直采用了比较保守的九宫格导航方式，随着FB的发展，这种很重的导航方式会导致用户Timeline的展示被很大程度上弱化，虽然FB也曾尝试在用户进入App的时候直接进入Timeline而不是这个九宫格导航。
According to incomplete research, the navigation way begins with Facebook. In the first Facebook App, has been adopted more conservative JiuGongGe navigation systems, along with the development of the FB, this heavy navigation way can lead to users of the display of the Timeline is greatly overshadowed, although FB also tried in the App users to directly into the Timeline and not the JiuGongGe navigation.

但是，显然这种优化还不是足够好。于是，在2011年11月左右，FB发布了新的iOS和android客户端，其中一个重要的变化就是导航模式的变化，推出了新的抽屉式的导航，同时强化了对Timeline的展示。
But, obviously this optimization still isn't good enough. Then, in November 2011 or so, FB issued new iOS and android client, one of the important change is the change of pattern of navigation, released new drawer navigation, it also strengthens the Timeline for the show.

FB推出这种新的导航模式不久，Gmail的iOS版本同样采用了这种导航模式，再之后path 2.0版本也采用了这种抽屉式导航并将其演变到极致。至此，这种抽屉式的导航模式迅速窜红与iOS产品设计中。
FB launched the new navigation mode soon, Gmail iOS versions of the same this navigation mode, after again path version 2.0 also adopted this drawer navigation and its evolution to the extreme. So far, the drawer navigation model is rapidly change red and iOS product design.

简单的定义(Simple definition of)

一般控制抽屉的把手出现在App的左上角，以按钮的形式出现，点击按钮之后抽屉被拉开，按钮被拉到App的右上角，左侧区域被拉开(抽屉)后显示出导航内容。
General control drawer handle appeared in the top left corner of the App, with the form of a button, click on the button was opened after the drawer, button is pulled into the top right-hand corner of the App, the left open area (the drawer) after the show navigation content.

导航的内容可以是以列表形式展示的常规2级导航，也可以将一些非常用的快捷操作入口直接放进来，如FB的搜索。具体形式如下图
The content of the navigation is the form of the list can show regular grade 2 navigation, also can use some very fast and operator put directly to come in, such as the FB search. Specific form the following figure
当然，这种抽屉也存在一些变种，目前以Path和Sparrow较为突出。Path不仅将主导航作为一种抽屉，同时底部的操作按钮也是一种变种的抽屉;而Sparrow则增加了抽屉的层级，在一级抽屉被打开之后还可以再继续拉开一层抽屉。　
This, of course, there are also some variant drawer, at present by the Path and Sparrow is serious. Path will not only capital navigation as a drawer, at the same time, the operation of the bottom button is also a kind of varieties of drawer; And the Sparrow increased by the drawer level, and in a drawer was after open also can continue to open a layer of the drawer.

另外，对于一些需要用到消息提醒的应用，抽屉的出现会给消息的展示带来新的麻烦，因此，很多的抽屉导航会将消息展示在Title区域里，以一个入口的形式来展示。典型的如Facebook、快捷酒店管家。
In addition, for some need to use the application of news remind, drawer presence would give the news show brings new trouble, so, a lot of drawer navigation will show in the Title in the regional news, in the form of a portal to the show. The typical such as Facebook, quick hotel housekeeper.

抽屉导航的核心思路(The core of the drawer navigation ideas)

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。个人认为，隐藏的思维是移动产品设计中最核心的一个思想。上周在极客公园分享了关于如何应用缩小、隐藏、赋加的思路来做移动产品设计的话题，而这个思路中最最核心的恰恰是隐藏。
The core idea of the upper navigation is "hidden". Hidden non-core operations and function, allow the user to focus more on the core function up. People think, hidden thinking is mobile product design is the heart of a thought. Last week, in a guest park share about how to shrink and the application and fu hidden with of thought to do mobile product design topic, and this idea of most core is just hide.

Facebook中，用户核心的操作是阅读Timline，所以抽屉里隐藏了所有其他的操作;Path中，用户的核心操作还是看好友的Timeline，所以抽屉里隐藏了其他的操作，同时UGC的操作又必不可少，因此Path在左下角也用了一个抽屉;在Sparrow里，用户看新邮件的频率大于查看归档邮件的频率，因此抽屉里隐藏了邮件类型等操作，同时为了平衡发邮件的需求，在右下角单独留了一个入口;在快捷酒店管家里，用户的核心操作是通过地图寻找附近的快捷酒店，所以抽屉里隐藏了切换城市等其他操作……
Facebook, the users of the core operation is reading Timline, so the drawer hide all other operation; The Path, and the user's core operation or see Timeline of friends, so the drawer hide other operation, at the same time, the operation of the UGC and indispensable, therefore Path in the bottom left corner also used a drawer; In the Sparrow, users see the new mail more than view the file frequency mail frequency, so the drawer hide mail type operation, at the same time, in order to balance the needs of E-mail, alone in the lower right corner left a entrance; In the quick hotel tube home, the user's core operation is through the map to find the hotel near fast, so the drawer hidden switch over city, the other operations...

这种导航方式会逐渐流行，推测的依据就是随着移动产品设计的演进，越来越多的产品设计师开始认识到只有让核心更突出才能提高整体产品的体验，只有不断降低用户的干扰才能不断提高用户的使用效率。
The navigation way will gradually popular, speculation is based on the evolution of the product design with mobile, more and more product designers started to realize that only let core more outstanding to improve overall product experience, only by continuously reduce the interference can improve efficiency in the use of the user.

而不适合抽屉式导航的App则有需要用户不断在导航间进行切换的App、没必要有太多导航的App、或者核心功能就是一堆入口的App。
And do not suit drawer of navigation App is the need to users to switch between unceasingly in the navigation of the App, don't need to have too much of the navigation App, or core function is a pile of the entrance of the App.
本文发布于北京网站建设公司尚品中国http://www.sino-web.net/