抽屜式導(dǎo)航的衰退及大屏下的產(chǎn)品設(shè)計(jì)

2011年11月左右，F(xiàn)B發(fā)布了新的ios和android客戶端，其中一個(gè)重要的變化就是導(dǎo)航模式的變化，推出了新的抽屜式的導(dǎo)航，同時(shí)強(qiáng)化了對(duì)Timeline的展示。

FB推出這種新的導(dǎo)航模式不久，Gmail的ios版本同樣采用了這種導(dǎo)航模式，再之后path 2.0版本也采用了這種抽屜式導(dǎo)航并將其演變到極致。至此，這種抽屜式的導(dǎo)航模式迅速竄紅與ios產(chǎn)品設(shè)計(jì)中。

大部分APP會(huì)使用抽屜式導(dǎo)航，核心原因是為了突出核心功能，將其他的功能隱藏掉。

現(xiàn)在來(lái)看，這個(gè)說(shuō)法并不完全對(duì)。2011年到2012年，是中小屏幕移動(dòng)設(shè)備占絕對(duì)主導(dǎo)的時(shí)代，中小屏幕，單手完全可以操作，不存在太多的操作盲區(qū)。同時(shí)，中心屏幕使得可以展示的內(nèi)容有限，所以，抽屜式導(dǎo)航是最合適的做法。將導(dǎo)航收縮到一個(gè)入口，放在左上角最顯眼的位置，用戶操作也沒(méi)有困難，其他核心的內(nèi)容直接顯示出來(lái)。

2012年之后，大屏幕成為移動(dòng)設(shè)備的一個(gè)新趨勢(shì)。一方面手機(jī)從一個(gè)單一的工具，逐漸演變成人們生活的一部分，不可或缺的一部分，用戶在手機(jī)上處理的事務(wù)越多，使用的時(shí)間越長(zhǎng)；另一方面，屏幕尺寸和內(nèi)容消費(fèi)效率及閱讀舒適度極為相關(guān)。所以慢慢的，手持舒適度和攜帶便利在整個(gè)產(chǎn)品設(shè)計(jì)眾多決策里面的重要排序便沒(méi)有那么高。

所以，我們看到4寸屏、5寸屏越來(lái)越成為主流，尤其是iPhone6和iPhone6 plus的推出，大屏幕手機(jī)時(shí)代就這么不可阻擋的來(lái)了。有一篇老外的分析，點(diǎn)擊這里查看。

手機(jī)屏幕越來(lái)越大，帶來(lái)了哪些問(wèn)題呢？

最簡(jiǎn)單直接的就是，內(nèi)容顯示變多了，但是，單手操作變難了。曾經(jīng)有報(bào)告顯示，49%的用戶是單手操作手機(jī)的，現(xiàn)在，是改變單手操作的設(shè)計(jì)的時(shí)候了。

這張圖，非常直觀明了的告訴了我們，為什么抽屜式導(dǎo)航衰退了。因?yàn)椋粋€(gè)需要被經(jīng)常操作的入口，現(xiàn)在，處在了操作盲區(qū)。

那么，伴隨著抽屜式導(dǎo)航的衰退，在大屏幕時(shí)代，該如何去設(shè)計(jì)呢？這是每個(gè)產(chǎn)品設(shè)計(jì)師面臨的一個(gè)新的思考。我有幾點(diǎn)感受，可以分享出來(lái)

1、手勢(shì)操作將會(huì)變的更加重要。

Android上有單獨(dú)的back鍵，而iOS的返回一直依靠左上角的導(dǎo)航。大屏幕下，iOS的左上角點(diǎn)擊返回將非常低效，在屏幕邊緣右滑返回是最高效的模式。另外，針對(duì)信息流類產(chǎn)品，點(diǎn)擊頂部迅速返回到最開始的信息的模式，也是一種高效的交互。閱讀類產(chǎn)品可以考慮使用雙擊關(guān)閉這類的手勢(shì)交互。

相應(yīng)的，一個(gè)產(chǎn)品統(tǒng)一使用上滑、下滑來(lái)進(jìn)行導(dǎo)航的產(chǎn)品將會(huì)更多。

2、底部Tab模式導(dǎo)航重新受追捧

實(shí)際上，底部Tab模式導(dǎo)航在iOS和Android上一直是「最安全」的一種導(dǎo)航模式，他不怎么出彩，但是絕對(duì)不會(huì)犯錯(cuò)。在大屏幕時(shí)代，底部Tab模式的導(dǎo)航更能適應(yīng)，也更好設(shè)計(jì)。

3、浮動(dòng)導(dǎo)航入口有可能出彩

在path的3.0版本，那個(gè)浮動(dòng)在左下角的「+」號(hào)曾經(jīng)一度流行。在大屏幕時(shí)代，這種浮動(dòng)的入口很有可能出現(xiàn)優(yōu)秀的設(shè)計(jì)。

4、將提交類操作按鈕，放在彈出的鍵盤的頂部

這個(gè)模式，在Android中較為常見，但是同樣存在不同屏幕的適配問(wèn)題，需要仔細(xì)考慮。

5、語(yǔ)音交互，謹(jǐn)慎看好

語(yǔ)音交互，始終感覺沒(méi)有一個(gè)好的使用場(chǎng)景。