入門:移動(dòng)APP中的各種導(dǎo)航

1 評(píng)論 11319 瀏覽 5 收藏 11 分鐘

即使是移動(dòng)應(yīng)用界面的原型設(shè)計(jì),導(dǎo)航的形式也可以多種多樣。盡管尺寸小,又必須緊湊排列大量數(shù)據(jù),它們似乎受到了緊密的約束,但依然有著形形色色的選擇。

人們?cè)?jīng)一度只會(huì)考慮一種形式——流行且廣泛使用的垂直導(dǎo)航,即側(cè)邊欄。盡管如此,還有其他可以提升用戶體驗(yàn)的形式,會(huì)讓用戶瀏覽你的APP變成小菜一碟。

列表型菜單

讓我們從一種基于列表的標(biāo)準(zhǔn)型導(dǎo)航開始論述,它在移動(dòng)APP作者中得到廣泛使用。這種解決方式建議逐一展示鏈接,讓用戶遵循從上到下的常規(guī)流程。

GIF Aimation by Sergey Valiukh

Sergey Valiukh的GIF動(dòng)畫設(shè)計(jì)只是一件概念設(shè)計(jì),卻完美地反映出列表型導(dǎo)航的實(shí)用性。結(jié)合了多種色彩和精細(xì)的線形圖標(biāo),還有稍顯粗重的字體,讓用戶輕松瀏覽APP,并且不會(huì)感到屏幕局限導(dǎo)致的不適。

Elevatr by Fueled

Fueled的Elevatr是一個(gè)時(shí)尚的APP,幫助企業(yè)家管理和跟進(jìn)商業(yè)會(huì)議。主屏的特點(diǎn)是彩虹色的菜單,清晰地逐行展現(xiàn)出控制面板的各個(gè)項(xiàng)目。背景圖受到坐標(biāo)紙的啟發(fā),與這種菜單完美搭配。

HabitClock App by Kutan URAL

Kutan URAL 的HabitClock App是個(gè)簡潔且有視覺感染力的APP,幫助你管理早晨的鬧鐘。盡管屏幕上的重點(diǎn)是頂部和底部的控制面板,但列表型導(dǎo)航(同時(shí)也是非常棒的通知工具)才是吸引注意力的核心。

Instagrab for iOS by Davis Yeung

橫條狀的布局方式,用來展現(xiàn)簡易側(cè)滑菜單上的一系列鏈接,這是多數(shù)設(shè)計(jì)師的人氣選擇,也是Davis Yeung設(shè)計(jì)的iOS版Instagrab主要組成。通常每一項(xiàng)都配有一枚易懂的小圖標(biāo),很好地區(qū)分每個(gè)鏈接。

矩陣或網(wǎng)格型菜單

占據(jù)全屏的網(wǎng)格型導(dǎo)航有助于強(qiáng)調(diào)導(dǎo)航,使它清晰易懂、顯而易見。當(dāng)你需要展示很多鏈接時(shí),這種方式也很管用,一系列同樣的網(wǎng)格,有效地將每一項(xiàng)與其他區(qū)分開來。

vectra - branding by Michal Galubinski and thoke design

Michal Galubinskiand thoke design的Vectra,有著不容忽視的導(dǎo)航。設(shè)計(jì)師不僅把菜單的6個(gè)項(xiàng)目伸展至全屏,還利用了巨大的扁平風(fēng)格圖標(biāo),很明顯是為了大部分在線用戶考慮。

Arrivo Mobile App

Marco La Mantia & Simone Lippolis的移動(dòng)APP設(shè)計(jì),Arrivo,巧妙地在嚴(yán)格的方形網(wǎng)格中組織大量數(shù)據(jù)。每個(gè)格子都扮演著功能性的作用;因?yàn)樗粌H僅是顯示數(shù)據(jù),也讓你通過底部滑出的一個(gè)小型控制面板調(diào)整它。顏色選擇也非常明智,因?yàn)闊崃业谋尘吧{(diào)有助于有效地分配內(nèi)容和區(qū)分網(wǎng)格。

Abracadabra App by Sergey Valiukh

Abracadabra,這個(gè)APP肯定是依照Sergey Valiukh心中的復(fù)古風(fēng)格來設(shè)計(jì)的,讓這個(gè)APP有種明顯的年代感。在此,設(shè)計(jì)師干練地將屏幕劃分成6個(gè)相等的網(wǎng)格,非常易于瀏覽。扁平風(fēng)格圖標(biāo)結(jié)合粗重的非正式字體,有助于提升易用性。

T R A V E R S E by  Willis

手繪風(fēng)貫穿了Willis設(shè)計(jì)的T R A V E R S E的每一個(gè)界面。這個(gè)APP基于明亮的單色背景和線形圖標(biāo),因此主菜單看不到任何分隔線,卻做到了井然有序,使得用戶相當(dāng)輕松順手地瀏覽這款A(yù)PP。

底部菜單

底部菜單主要是作為導(dǎo)航的輔助,用來區(qū)分內(nèi)部的功能區(qū)塊或獨(dú)立組件。

Badoo concept by Jakub Antalik

Jakub Antalík的Badoo概念設(shè)計(jì)有著位于屏幕底部的導(dǎo)航。它也包含了一組擴(kuò)展菜單,每一項(xiàng)都有它自己的控制面板。

Animated sliding tab bar by Virgil Pana

Virgil Pana設(shè)計(jì)的動(dòng)態(tài)滑動(dòng)標(biāo)簽,為重度信息展示型應(yīng)用提出了一個(gè)完美的解決方法,能夠包含大量統(tǒng)計(jì)數(shù)據(jù),或者通過圖表展現(xiàn)數(shù)據(jù),并仍然保持簡潔。常規(guī)大小的菜單從屏幕底部滑出,顯示出一個(gè)小型控制中心。

頂部菜單

既然我們習(xí)慣于從上到下瀏覽手機(jī)屏幕,放在屏幕頂部自然有一定優(yōu)勢(shì)。標(biāo)簽頁和每個(gè)控制中心獨(dú)有的圖標(biāo),是這種布局最重要的代表。

Horner by Cuneyt SEN

Cüneyt ?EN的Horner包含了可隱藏菜單,不過它能很妙地從頂部出現(xiàn)。由于明亮的顏色和有關(guān)聯(lián)性的巨大圖標(biāo),它與整個(gè)界面內(nèi)容形成了鮮明對(duì)比。

Discovery Channel

Enes Dan??設(shè)計(jì)的Discovery Channel將所有的基本導(dǎo)航和二級(jí)導(dǎo)航放在頂部,通過固定的位置來打消用戶的困惑。

Air flow calculation app for Bettertec by HAMZAQUE Designs

HAMZAQUE Designs為Bettertec設(shè)計(jì)的氣流計(jì)算APP,巧妙地運(yùn)用了占據(jù)頂部的標(biāo)簽頁。此外,它們被設(shè)計(jì)成黑白對(duì)比的色調(diào),和屏幕中其余部分相同。

Shario App by MING Labs&Pierrick Calvez

MING Labs&Pierrick Calvez的Shario APP,透露著簡潔的矢量風(fēng)格概念。整個(gè)導(dǎo)航通過頂部的幾個(gè)按鈕運(yùn)轉(zhuǎn)起來。

展開式菜單

對(duì)于處理大信息量APP和喜歡創(chuàng)作簡潔緊湊界面的設(shè)計(jì)師而言,展開式菜單確實(shí)是一項(xiàng)至寶。這種方案允許你把菜單圖標(biāo)放在任何地方,不過它通常是在左上角。

MuSeek by Al Power

Al Powerd的MuSeek是個(gè)音樂APP,需要為用戶提供大量可視化信息:專輯封面、描述、歌曲名稱、曲目列表等等,所以沒有空間來放置全屏菜單。在這個(gè)例子中,左上角的小圖標(biāo)就是一根救命稻草,平滑地展現(xiàn)出一列相當(dāng)巨大的菜單。

Univit UI by Mohammed Alyousfi & Alex Casabo

Mohammed Alyousfi & àlex Casabò的Univit UI設(shè)計(jì),這是一款優(yōu)雅的扁平風(fēng)格APP,使用了一個(gè)標(biāo)準(zhǔn)的滑出菜單,通過簡單的滑動(dòng)操作觸發(fā)。菜單采用了易懂且時(shí)尚的輪廓型圖標(biāo),比各自的標(biāo)題都大許多。這種方式使得菜單可以很自然地在設(shè)計(jì)中發(fā)揮作用,同時(shí)也提供更好的用戶體驗(yàn)。

SVOY app design by Alexandre Efimov

Alexandre Efimov設(shè)計(jì)的SVOY APP基于一套艷麗的配色方案,與深色的背景有效搭配。設(shè)計(jì)師讓菜單從左側(cè)展開。吸引眼球且逼真的折疊動(dòng)畫,也給設(shè)計(jì)增添了一些趣味。

Idokep by Attila Szabo

Attila Szabó的Id?kép又是展開式菜單的一個(gè)變種設(shè)計(jì),利用幾乎占據(jù)滿屏的夢(mèng)幻般“拉窗簾”效果來顯示菜單本身。

結(jié)論

每種方案都有自己的優(yōu)勢(shì)與劣勢(shì),這就是為什么每個(gè)項(xiàng)目都提倡它獨(dú)有的導(dǎo)航類型,可以有效地應(yīng)對(duì)任務(wù),并對(duì)用戶體驗(yàn)有幫助。

 

原文鏈接:http://designmodo.com/mobile-app-navigations/

#專欄作家#

可樂橙,微信公眾號(hào):可樂橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計(jì)師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設(shè)計(jì)師,至少是個(gè)快樂的設(shè)計(jì)師。

轉(zhuǎn)載請(qǐng)保留上述作者信息并附帶本文鏈接

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 還是有點(diǎn)收貨的。

    來自北京 回復(fù)