教你如何設(shè)計出優(yōu)秀的App導(dǎo)航欄

2 評論 9323 瀏覽 4 收藏 6 分鐘

導(dǎo)航的設(shè)計是 App 設(shè)計發(fā)展過程中很值得玩味的地方,由于移動設(shè)備特別是智能手機(jī)的屏幕尺寸有限,設(shè)計者們通常會將屏幕空間盡量留給主體內(nèi)容,優(yōu)秀的導(dǎo)航設(shè)計會讓用戶輕松到達(dá)目的地而又不會干擾和困惑用戶。

  經(jīng)典導(dǎo)航:tabbar

Tabbar 的導(dǎo)航方式是由誰發(fā)明的筆者不得而知,不過相信大家都同意是由蘋果將其傳播開來。不僅很多蘋果的官方應(yīng)用采用了這種設(shè)計,蘋果同樣大力推薦應(yīng)用開發(fā)者優(yōu)先采用這種方式。從某種角度來說,tabbar 基本就是導(dǎo)航的標(biāo)準(zhǔn)設(shè)計。

 優(yōu)秀的挑戰(zhàn)者:抽屜式導(dǎo)航

Tabbar 并不是完美的,它并不適用于過多的切換項。抽屜式導(dǎo)航通過縱向排列切換項解決了這一問題。不過這也意味著它不能和主體內(nèi)容同時出現(xiàn)在屏幕上。

  在大部分的設(shè)計當(dāng)中,通過點(diǎn)擊屏幕左上角的按鈕喚出切換項,有些也可以通過向右滑動手指來完成。一個簡單的滑動動畫,就像拉出一個抽屜,「抽屜式導(dǎo)航」這個名稱應(yīng)該就是來源于此。突破了數(shù)量的限制,更大程度上釋放了主體空間,也因此提高了操作成本。就作者個人感覺,如果能將主要功能項組織在 4 到 5 項,tabbar 的設(shè)計方式可能會更好,否則,就應(yīng)該優(yōu)先考慮抽屜式導(dǎo)航了。

  為頻繁操作設(shè)計:滑動式的導(dǎo)航

導(dǎo)航并不一定只發(fā)生在功能項之間。例如新聞類應(yīng)用需要在不同類別的新聞之間進(jìn)行切換瀏覽。通常來說,這種切換的頻率要比功能項切換更高,切換項的數(shù)量也會比較多,像常見的新聞類別就有 7,8 種。我記得在「網(wǎng)易新聞」早期的 iOS 版本中采用了「抽屜式導(dǎo)航」的方式進(jìn)行新聞類別的切換,這種方式在高頻率切換時需要過多的操作次數(shù),當(dāng)需要在相鄰類別連續(xù)切換時更是缺乏操作的連續(xù)性。新的 iOS 版「網(wǎng)易新聞」對新聞類別的切換重新進(jìn)行了設(shè)計。

  用戶通過在內(nèi)容頁面左右滑動手指即可在不同的類別之間進(jìn)行切換。這種方式的用戶體驗改進(jìn)了很多,尤其在連續(xù)切換時其操作方式的連續(xù)性比較強(qiáng),主體頁面的過渡也更加平滑,會產(chǎn)生更加流暢的體驗。當(dāng)然也會有一些缺陷,比如一次滑動只能切換到相鄰的類別,要想直接切換到對應(yīng)類別可以點(diǎn)擊上方的類別列表,不過由于類別過多,有時候可能需要滑動一下類別列表才能完成操作。不過總體而言,當(dāng)需要在具有相似屬性類別之間進(jìn)行較頻繁切換時,這種設(shè)計方式很值得參考。

  如何走得更遠(yuǎn)?

  iOS 系統(tǒng)中使用小的圓點(diǎn)圖來標(biāo)示當(dāng)前處于第幾屏,優(yōu)酷 iOS 版本中借鑒了這種設(shè)計方式,并將其創(chuàng)新地應(yīng)用到主體內(nèi)容的導(dǎo)航上。上面說到,像tabbar 這種橫向排列切換項的設(shè)計方式受制于手機(jī)屏幕寬度的限制,而通過使用占用空間更小的圓點(diǎn)圖,優(yōu)酷打破了這種限制,手指觸碰到圓點(diǎn)圖時,將會顯示類別提示,由于無法直接看到,可能無法按到正確的類別,通常需要移動一下手指,不過就作者的體驗來看,這個尋找類別的過程體驗非常平滑,基本不會產(chǎn)生困擾。只是類別提示有些小,并且有些視覺角度下可能會被操作的手指擋住,如果能將類別提示顯示在更容易看到的地方,比如在標(biāo)題中顯示一個指示或許能進(jìn)一步提升用戶體驗。

優(yōu)酷這種創(chuàng)新的導(dǎo)航方式應(yīng)用在類別的切換上取得了不錯的效果,它是否同樣適用于功能項的切換呢,它有可能在某種程度上代替「抽屜式」導(dǎo)航嗎?功能的和類別不同,相對于「電影」、 「電視劇」 、「體育新聞」這種用戶已經(jīng)非常熟悉的詞匯,功能描述通常有著更高的認(rèn)知成本,如果再將其用指示圖代替,無疑會進(jìn)一步提高這種認(rèn)知成本。并且功能之間通常沒有相似的屬性,將其用相同的圖標(biāo)來代替并不符合認(rèn)知習(xí)慣,而使用不同圖標(biāo)又會使界面過于雜亂??磥韱栴}重重,我們還需要更多的思考。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 這網(wǎng)站難道連個收藏的功能都沒有?還說是產(chǎn)品設(shè)計方面的網(wǎng)站。用戶覺得這文章不錯,居然只能選擇分享,而不能收藏,誰會記得你的網(wǎng)站?

    來自廣東 回復(fù)
    1. 分享的旁邊有一個大五角星就是收藏哥們。

      來自北京 回復(fù)