抽屜式導(dǎo)航的設(shè)計更能讓用戶專注于核心的功能
發(fā)布時間:2012-07-23 16:40:58 作者:@kentzhu
我要評論

導(dǎo)航是產(chǎn)品設(shè)計的重頭戲,Web端設(shè)計的時候是在考慮如何將操作展示給用戶,而Mobile的設(shè)計更多的時候則是考慮如何將操作巧妙的隱藏起來。但這種隱藏實際上是為了核心功能的突出。

iOS導(dǎo)航模式基本都是基于iOS系統(tǒng)自身的一些模式,隨著iOS新產(chǎn)品的不斷出現(xiàn),新的導(dǎo)航方式也隨之更新。在這里,說一下“抽屜式”的導(dǎo)航方式。
當(dāng)然,抽屜式導(dǎo)航是作者自己給這種導(dǎo)航方式取的名字,至于學(xué)名叫什么,小編也不知道。這種導(dǎo)航模式一般采用將導(dǎo)航主體隱藏在app側(cè)邊的方式,以一個按鈕來呼出導(dǎo)航,在使用完成之后在使用相同的按鈕隱藏起來。一拉一縮,從形象上與抽屜類似,于是就這樣稱呼他。
根據(jù)不完全的考證,這種導(dǎo)航方式始于Facebook。在最早的Facebook App中,一直采用了比較保守的九宮格導(dǎo)航方式,隨著FB的發(fā)展,這種很重的導(dǎo)航方式會導(dǎo)致用戶Timeline的展示被很大程度上弱化,雖然FB也曾嘗試在用戶進入App的時候直接進入Timeline而不是這個九宮格導(dǎo)航。
但是,顯然這種優(yōu)化還不是足夠好。于是,在2011年11月左右,F(xiàn)B發(fā)布了新的iOS和android客戶端,其中一個重要的變化就是導(dǎo)航模式的變化,推出了新的抽屜式的導(dǎo)航,同時強化了對Timeline的展示。
FB推出這種新的導(dǎo)航模式不久,Gmail的iOS版本同樣采用了這種導(dǎo)航模式,再之后path 2.0版本也采用了這種抽屜式導(dǎo)航并將其演變到極致。至此,這種抽屜式的導(dǎo)航模式迅速竄紅與iOS產(chǎn)品設(shè)計中。
簡單的定義
一般控制抽屜的把手出現(xiàn)在App的左上角,以按鈕的形式出現(xiàn),點擊按鈕之后抽屜被拉開,按鈕被拉到App的右上角,左側(cè)區(qū)域被拉開(抽屜)后顯示出導(dǎo)航內(nèi)容。
導(dǎo)航的內(nèi)容可以是以列表形式展示的常規(guī)2級導(dǎo)航,也可以將一些非常用的快捷操作入口直接放進來,如FB的搜索。具體形式如下圖


抽屜導(dǎo)航的核心思路
抽屜式導(dǎo)航的核心思路是“隱藏”。隱藏非核心的操作與功能,讓用戶更專注于核心的功能操作上去。個人認(rèn)為,隱藏的思維是移動產(chǎn)品設(shè)計中最核心的一個思想。上周在極客公園分享了關(guān)于如何應(yīng)用縮小、隱藏、賦加的思路來做移動產(chǎn)品設(shè)計的話題,而這個思路中最最核心的恰恰是隱藏。
Facebook中,用戶核心的操作是閱讀Timline,所以抽屜里隱藏了所有其他的操作;Path中,用戶的核心操作還是看好友的 Timeline,所以抽屜里隱藏了其他的操作,同時UGC的操作又必不可少,因此Path在左下角也用了一個抽屜;在Sparrow里,用戶看新郵件的頻率大于查看歸檔郵件的頻率,因此抽屜里隱藏了郵件類型等操作,同時為了平衡發(fā)郵件的需求,在右下角單獨留了一個入口;在快捷酒店管家里,用戶的核心操作是通過地圖尋找附近的快捷酒店,所以抽屜里隱藏了切換城市等其他操作……
這種導(dǎo)航方式會逐漸流行,推測的依據(jù)就是隨著移動產(chǎn)品設(shè)計的演進,越來越多的產(chǎn)品設(shè)計師開始認(rèn)識到只有讓核心更突出才能提高整體產(chǎn)品的體驗,只有不斷降低用戶的干擾才能不斷提高用戶的使用效率。
而不適合抽屜式導(dǎo)航的App則有
需要用戶不斷在導(dǎo)航間進行切換的App、沒必要有太多導(dǎo)航的App、或者核心功能就是一堆入口的App。
相關(guān)文章
AudioContext 實現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實現(xiàn)音頻可視化,要實現(xiàn)音頻可視化得先實現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext,下面詳細(xì)內(nèi)容2022-02-23- 這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流,文章內(nèi)容圍繞主題展相關(guān)資料,需要的小伙伴可以參考一下,希望對你有所幫助2022-02-23
- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范,用于鞏固對html,css頁面重構(gòu)時的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強團隊的開發(fā)協(xié)作,提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范,其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個部分。我們知道,當(dāng)一個團隊開始指定并實行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團隊遵循和約定的代碼書寫規(guī)范,意在提高代碼的規(guī)范性和可維護性,需要的朋友可以參考下2017-01-21
響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0,但是有安裝vtp6.0經(jīng)驗的朋友確很少,在安裝過程中總會出現(xiàn)這樣那樣的問題,基于這些問題,下面小編抽個時間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29