.hide{
 display: none; 
}

.hide{
 opacity: 0;
 filter:Alpha(opacity=0); 
}

.hide{
 visibility: hidden;
}

.hide{
 zoom: 0.1;
 transform: scale(0);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0); 
}

.hide{
 position: absolute;
 zoom: 0.1;
 transform: scale(0);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0); 
}

.hide{
 display: inline-block;
 width: 0;
 height: 0;
 padding: 0;
 margin: 0;
 overflow: hidden; 
}

. father{
 position: relative;
 overflow: hidden;
}
.hide{
 position: absolute;
 left: -200%;//或top: -200%; 
}

.hide{
 float: left;
 width: 150px;
 margin: 20px;
 clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); 
}

.father{
 width: 400px;
 height: 400px;
 overflow: hidden;
}
.hide{
 display: inline-block;
 width: 200px;
 height: 200px;
 margin-left: -200px;
}

人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】，BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營。

2012年，path首先使用了漢堡菜單作為產(chǎn)品的導(dǎo)航方式來替代原本的標(biāo)簽頁的導(dǎo)航方式。一時引起了各大廠商的跟風(fēng)，Youtube、facebook等App都紛紛把自己的導(dǎo)航改成了抽屜式導(dǎo)航。但由于沒有統(tǒng)一的規(guī)范，各個產(chǎn)品的抽屜導(dǎo)航設(shè)計(jì)也各不相同，為了控制Android平臺日益混亂的抽屜交互方式，2013 Google I/O大會之后，Google將Navigation Drawer納入了Android Design規(guī)范當(dāng)中，隨后大量應(yīng)用開始采用這種交互模式【1】。

不過慢慢的，包括youtube和facebook在內(nèi)的很多app都將抽屜式導(dǎo)航換回了原來的標(biāo)簽頁導(dǎo)航，從此，對于抽屜式導(dǎo)航的爭辯就一直沒有斷過。并且慢慢的，對于抽屜式導(dǎo)航的批評漸漸多于肯定【2】。我摘取其中的兩則批評如下。

...上圖的 APP 將選項(xiàng)卡（tab row）變成抽屜式導(dǎo)航菜單（drawer menu），用戶在相應(yīng)功能間的切換率急劇下降。...很多用戶還沒有建立起相應(yīng)的心理模型（尤其是抽屜式或者漢堡包菜單）盡量將 APP 的核心功能放在用戶可以看得到地方。

——能露出來， 就別藏著

觸摸操作中，手勢永遠(yuǎn)要比點(diǎn)擊優(yōu)先級低。現(xiàn)代觸摸操作習(xí)慣畢竟只流行了幾年，然而傳統(tǒng)PC上的操作習(xí)慣已經(jīng)實(shí)行了將近20年。所以通過滑動來切換Tab不會比點(diǎn)擊切換來的直觀。

——石頭們

總結(jié)一下，對于抽屜式導(dǎo)航的批評主要有如下幾點(diǎn)：

1. 可見性不好：

• 首先抽屜式導(dǎo)航的入口是三條杠，對于部分用戶來說，他們并不能準(zhǔn)確知道這三條杠可以呼出抽屜式導(dǎo)航；
• 抽屜式導(dǎo)航畢竟是隱藏起來的，沒有現(xiàn)有標(biāo)簽式導(dǎo)航來的明顯。

2. 操作復(fù)雜。抽屜式導(dǎo)航的切換可以直接點(diǎn)擊，如果Tab放在上方可以直接滑動切換。但是抽屜式導(dǎo)航的切換就要先呼出側(cè)邊欄，然后再點(diǎn)擊，相對比而言，操作更加繁瑣。

3. 與現(xiàn)有的交互方式?jīng)_突。抽屜式導(dǎo)航可以從屏幕左邊緣向右滑動喚出，與iOS的后退操作沖突。但是這本來就是Android的設(shè)計(jì)規(guī)范，并不一定適用于iOS，所以我覺得的這個批評不成立。

但是，正如那句老話“垃圾是放錯地方的資源”，我始終相信，沒有不好的交互設(shè)計(jì)，只有不適合產(chǎn)品使用場景的交互設(shè)計(jì)。所以抽屜式導(dǎo)航也是有它的正確使用方法的。

首先關(guān)于這個入口的問題，我覺得暫時是無解的，但是這是可以通過長期的用戶教育來實(shí)現(xiàn)的。正如現(xiàn)在的開關(guān)鍵（一個圓圈加一條杠），這個設(shè)計(jì)其實(shí)并不能一目了然地讓人知道這是開關(guān)鍵，但是經(jīng)過長期的使用，現(xiàn)在大部分人都會知道這是開關(guān)鍵。所以，這個問題就只能交給時間來解決了。

但是除此之外，上面的批評1，2總結(jié)一下就是切換麻煩（批評3不太站得住腳）。只是，如果產(chǎn)品的導(dǎo)航不需要頻繁切換呢？如果有其他的切換入口呢？那么問題就迎刃而解了。那么有沒有產(chǎn)品是這樣的呢？答案是：當(dāng)然有。下面我就結(jié)合一些例子來講講抽屜式導(dǎo)航的正確使用方式。

1. 導(dǎo)航模塊有主次

抽屜式導(dǎo)航的使用場景首先一點(diǎn)是：導(dǎo)航的模塊是有主次之分的。相對比于常用的標(biāo)簽式導(dǎo)航而言，抽屜式導(dǎo)航的模塊之間主次區(qū)分更加明顯。

1. 當(dāng)啟動應(yīng)用時，標(biāo)簽式導(dǎo)航的每個模塊入口都是可見的。
2. 標(biāo)簽式導(dǎo)航的模塊切換非常容易，通常是點(diǎn)擊（底部Tab）或者滑動操作。
3. 當(dāng)進(jìn)入某個模塊時，其他模塊的入口依舊清晰可見。

基于以上三點(diǎn)，標(biāo)簽式導(dǎo)航模塊之間的區(qū)分不是特別大。

但是對于抽屜式導(dǎo)航而言，以上三點(diǎn)都不成立。所以，相對而言，抽屜式導(dǎo)航的第一個模塊的重要程度要遠(yuǎn)遠(yuǎn)大于其他的模塊。也就是說，當(dāng)不同導(dǎo)航模塊之間存在明顯的主次之分時，才可以考慮使用抽屜式導(dǎo)航。

舉個例子，豆瓣一刻的導(dǎo)航模塊如下：

一刻的導(dǎo)航

如上圖，因?yàn)槎拱暌豢痰馁Y訊都是嚴(yán)格按照每天為單位的，一刻的目的也是希望你當(dāng)天閱讀完當(dāng)天的內(nèi)容。所以，一刻的核心使用場景是當(dāng)日事當(dāng)日畢，當(dāng)天的內(nèi)容（即“今日一刻”模塊）的優(yōu)先級遠(yuǎn)遠(yuǎn)大于其他模塊。其他模塊是為次要場景設(shè)計(jì)的，即使?jié)B透率不高，對于產(chǎn)品的影響也不大。

2、次要模塊可以有快捷入口

對于次要的模塊，我們并不需要嚴(yán)格保證模塊的滲透率。但是，假如我們可以提高次要模塊的滲透率，又何樂而不為呢？既然抽屜式導(dǎo)航的可見性不高，操作繁瑣，那為什么不可以另辟蹊徑？設(shè)置一個可以見高，操作便捷的入口呢？答案當(dāng)然是肯定的。

對于豆瓣一刻來說，模塊之間的優(yōu)先級如下：今日一刻>往期內(nèi)容>熱門作者、欄目瀏覽、我的喜歡。所以，往期內(nèi)容模塊的使用場景是僅次于今日一刻模塊，但是又遠(yuǎn)遠(yuǎn)高于其他模塊。所以，針對這個模塊，可以設(shè)置更加便捷的快捷入口。豆瓣一刻的處理方式如下圖：

次要內(nèi)容快捷入口

在每日一刻內(nèi)容列表的最下方設(shè)置了一個按鈕，作為往期內(nèi)容模塊的快捷入口。這樣的快捷入口，一方面不會干擾最主要的內(nèi)容，因?yàn)樗O(shè)置在頁面最后面。另一方面，當(dāng)用戶閱讀到最后的時候，假如用戶還有強(qiáng)烈的閱讀愿望，那么這個入口簡直就是沙漠中的甘泉。

最最巧妙的一點(diǎn)，為什么這里不用上拉刷新而是使用按鈕呢？因?yàn)樯侠⑿碌膬?nèi)容往往是銜接在當(dāng)前頁面下的，同時上拉刷新的操作成本很低。但是，往期內(nèi)容模塊與今日一刻的區(qū)分度又比較大，銜接在當(dāng)前頁面下并不合適，操作太便利的話又顯示不出模塊之間的區(qū)分度。所以，這里采用按鈕而不是上拉刷新。

3、應(yīng)用首次啟動進(jìn)行引導(dǎo)

當(dāng)然，為了解決可見性的問題，還需要在首次啟動應(yīng)用的時候進(jìn)行引導(dǎo)。對于抽屜式導(dǎo)航的引導(dǎo)，有兩種方式：

1. 啟動應(yīng)用自動打開導(dǎo)航；
2. 指引用戶點(diǎn)擊漢堡菜單按鈕，然后再彈出導(dǎo)航。

兩種引導(dǎo)各有利弊，當(dāng)然好處就是都可以起到引導(dǎo)作用。而壞處來說：

• 第一種方法的壞處是：即使使用動畫引導(dǎo)，引導(dǎo)的效果還是不如第二種，畢竟第二種用戶是親手打開導(dǎo)航的；
• 第二種的壞處就是：它需要強(qiáng)迫用戶先完成這個操作，然后才能進(jìn)行其他操作。

相對而言，這種脅迫會對用戶的控制欲造成一些傷害，用戶體驗(yàn)會打一點(diǎn)折扣。

自動打開指引

浮層指引

4、善用小紅點(diǎn)

最后一個方法也是為了解決可見性不高的問題，就是利用讓人又愛又恨的小紅點(diǎn)，英文名稱叫Badge Notification。小紅點(diǎn)有兩種形式：一種是帶數(shù)字的，另一種是不帶數(shù)字。帶數(shù)字的一般是跟消息有關(guān)系，比如還有兩條消息未處理，那么小紅點(diǎn)就會顯示一個“2”；不帶數(shù)字的一般就是引導(dǎo)作用，告訴用戶這里有東西需要你查看。

普通小紅點(diǎn)

帶數(shù)字的小紅點(diǎn)

由于小紅點(diǎn)對于用戶來說確實(shí)體驗(yàn)不太好，很多人都會有強(qiáng)烈的強(qiáng)迫癥要消滅這些小紅點(diǎn)。所以，針對用戶的這種心理，小紅點(diǎn)反而成為了產(chǎn)品的一種非常高效、簡潔的引導(dǎo)方式。

不過，有句話要說的是：小紅點(diǎn)雖好，可不要貪杯喲。適當(dāng)適量的引導(dǎo)可以處于一種“既觸發(fā)了用戶的強(qiáng)迫癥又避免讓用戶厭惡”的狀態(tài)。如果一旦超過這個度，產(chǎn)品就有可能會被拋棄，所以謹(jǐn)慎使用小紅點(diǎn)。

再次重復(fù)一下那句話，垃圾是放錯地方的資源。沒有錯誤的控件，只有使用不當(dāng)?shù)目丶Ｋ耘c其指責(zé)抽屜式導(dǎo)航的種種錯誤，不如找一個恰當(dāng)?shù)膱鼍叭コ休d它，讓它發(fā)揮自己的閃光之處。以上就是我對于抽屜式導(dǎo)航使用的一些心得。

【1】交互設(shè)計(jì)新手必看！探秘抽屜導(dǎo)航的前生今世 http://www.woshipm.com/ucd/92222.html

【2】哪些因素阻礙國內(nèi) BAT 的移動應(yīng)用采用 Material Design？-Kenny MacCormick的回答-知乎 https://www.zhihu.com/question/37376355/answer/71940532

本文由 @Autumn阿秋原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理 ，未經(jīng)許可，禁止轉(zhuǎn)載。