網(wǎng)站導(dǎo)航應(yīng)該如何設(shè)計

導(dǎo)航是產(chǎn)品設(shè)計的重頭戲，Web網(wǎng)站設(shè)計的時候是在考慮如何將操作展示給用戶，而Mobile的設(shè)計更多的時候則是考慮如何將操作巧妙的隱藏起來。但這種隱藏實際上是為了核心功能的突出。
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導(dǎo)航模式基本都是基于iOS系統(tǒng)自身的一些模式，隨著iOS新產(chǎn)品的不斷出現(xiàn)，新的導(dǎo)航方式也隨之更新。在這里，說一下“抽屜式”的導(dǎo)航方式。
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.

當(dāng)然，抽屜式導(dǎo)航是作者自己給這種導(dǎo)航方式取的名字，至于學(xué)名叫什么，小編也不知道。這種導(dǎo)航模式一般采用將導(dǎo)航主體隱藏在app側(cè)邊的方式，以一個按鈕來呼出導(dǎo)航，在使用完成之后在使用相同的按鈕隱藏起來。一拉一縮，從形象上與抽屜類似，于是就這樣稱呼他。
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.

根據(jù)不完全的考證，這種導(dǎo)航方式始于Facebook。在最早的Facebook App中，一直采用了比較保守的九宮格導(dǎo)航方式，隨著FB的發(fā)展，這種很重的導(dǎo)航方式會導(dǎo)致用戶Timeline的展示被很大程度上弱化，雖然FB也曾嘗試在用戶進入App的時候直接進入Timeline而不是這個九宮格導(dǎo)航。
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.

但是，顯然這種優(yōu)化還不是足夠好。于是，在2011年11月左右，F(xiàn)B發(fā)布了新的iOS和android客戶端，其中一個重要的變化就是導(dǎo)航模式的變化，推出了新的抽屜式的導(dǎo)航，同時強化了對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推出這種新的導(dǎo)航模式不久，Gmail的iOS版本同樣采用了這種導(dǎo)航模式，再之后path 2.0版本也采用了這種抽屜式導(dǎo)航并將其演變到極致。至此，這種抽屜式的導(dǎo)航模式迅速竄紅與iOS產(chǎn)品設(shè)計中。
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)

一般控制抽屜的把手出現(xiàn)在App的左上角，以按鈕的形式出現(xiàn)，點擊按鈕之后抽屜被拉開，按鈕被拉到App的右上角，左側(cè)區(qū)域被拉開(抽屜)后顯示出導(dǎo)航內(nèi)容。
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.

導(dǎo)航的內(nèi)容可以是以列表形式展示的常規(guī)2級導(dǎo)航，也可以將一些非常用的快捷操作入口直接放進來，如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
當(dāng)然，這種抽屜也存在一些變種，目前以Path和Sparrow較為突出。Path不僅將主導(dǎo)航作為一種抽屜，同時底部的操作按鈕也是一種變種的抽屜;而Sparrow則增加了抽屜的層級，在一級抽屜被打開之后還可以再繼續(xù)拉開一層抽屜?！?br /> 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.

另外，對于一些需要用到消息提醒的應(yīng)用，抽屜的出現(xiàn)會給消息的展示帶來新的麻煩，因此，很多的抽屜導(dǎo)航會將消息展示在Title區(qū)域里，以一個入口的形式來展示。典型的如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.

抽屜導(dǎo)航的核心思路(The core of the drawer navigation ideas)

抽屜式導(dǎo)航的核心思路是“隱藏”。隱藏非核心的操作與功能，讓用戶更專注于核心的功能操作上去。個人認(rèn)為，隱藏的思維是移動產(chǎn)品設(shè)計中最核心的一個思想。上周在極客公園分享了關(guān)于如何應(yīng)用縮小、隱藏、賦加的思路來做移動產(chǎn)品設(shè)計的話題，而這個思路中最最核心的恰恰是隱藏。
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里，用戶看新郵件的頻率大于查看歸檔郵件的頻率，因此抽屜里隱藏了郵件類型等操作，同時為了平衡發(fā)郵件的需求，在右下角單獨留了一個入口;在快捷酒店管家里，用戶的核心操作是通過地圖尋找附近的快捷酒店，所以抽屜里隱藏了切換城市等其他操作……
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...

這種導(dǎo)航方式會逐漸流行，推測的依據(jù)就是隨著移動產(chǎn)品設(shè)計的演進，越來越多的產(chǎn)品設(shè)計師開始認(rèn)識到只有讓核心更突出才能提高整體產(chǎn)品的體驗，只有不斷降低用戶的干擾才能不斷提高用戶的使用效率。
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.

而不適合抽屜式導(dǎo)航的App則有需要用戶不斷在導(dǎo)航間進行切換的App、沒必要有太多導(dǎo)航的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.
本文發(fā)布于北京網(wǎng)站建設(shè)公司尚品中國http://m.proteomeinstitute.com/