讓APP中內(nèi)容呈現(xiàn)更友好易用的5種常見(jiàn)導(dǎo)航設(shè)計(jì)模式

翻譯:陳子木

今天的文章會(huì)著重介紹移動(dòng)端APP導(dǎo)航的設(shè)計(jì)模式寞蚌。無(wú)論你所設(shè)計(jì)的APP是什么樣的類型,或多或少都繞不開(kāi)導(dǎo)航設(shè)計(jì)钠糊。作為APP中最常用也是最重要的模塊挟秤,導(dǎo)航甚至可能直接影響到用戶會(huì)不會(huì)喜愛(ài)你的APP。

1眠蚂、產(chǎn)品演示和教程引導(dǎo)

可用性是APP是否取得成功的關(guān)鍵性影響因素煞聪。但是有的應(yīng)用當(dāng)中本身就包含著相對(duì)復(fù)雜的功能和多樣的內(nèi)容,這個(gè)時(shí)候逝慧,通過(guò)產(chǎn)品演示和教程引導(dǎo)來(lái)告知用戶如何使用這一產(chǎn)品昔脯,是一個(gè)頗為有效的方式。Secret和 Youtube

這兩個(gè)應(yīng)用就面對(duì)著這樣的局面笛臣,在新用戶打開(kāi)界面之后云稚,設(shè)計(jì)師將關(guān)鍵性的UI控件標(biāo)注出來(lái),通過(guò)交互式的引導(dǎo)來(lái)幫助用戶熟悉這些功能沈堡。而 Carousel 和 Duolingo則采用了展示性的幻燈片來(lái)幫助用戶體驗(yàn)其中的核心功能静陈。當(dāng)APP中部分功能對(duì)于用戶而言不夠明顯的時(shí)候,可以采用這種教程和引導(dǎo)模式來(lái)幫助用戶诞丽,在簡(jiǎn)化APP的復(fù)雜性和易用性上有明顯的效果鲸拥。這種設(shè)計(jì)模式的另外一個(gè)優(yōu)勢(shì)在于,能夠幫助開(kāi)發(fā)者和設(shè)計(jì)師搜集到更多有效的用戶數(shù)據(jù)僧免,進(jìn)而找到更加便捷的交互刑赶,提升用戶體驗(yàn)。

2懂衩、基于內(nèi)容的導(dǎo)航

無(wú)論你的APP當(dāng)中包含著怎樣的內(nèi)容撞叨,你總希望整體的用戶體驗(yàn)是順暢的,內(nèi)容足夠清晰浊洞∏7螅基于內(nèi)容的導(dǎo)航指的并非是系統(tǒng)性的導(dǎo)航,而是在瀏覽過(guò)程中法希,讓概覽模式和詳情模式下無(wú)縫轉(zhuǎn)換的一種導(dǎo)航模式枷餐。以Tinder這款應(yīng)用為例,在用戶的個(gè)人頁(yè)當(dāng)中苫亦,你首先看到的是概覽模式毛肋,其中用戶的圖片占據(jù)著絕大多數(shù)的區(qū)域奕锌,再點(diǎn)擊一下之后,圖片縮小村生,你可以看到更多和用戶相關(guān)的信息,著是詳情模式饼丘。各有側(cè)重的兩種模式滿足不同的需求趁桃,無(wú)縫地切換引領(lǐng)用戶到不同的內(nèi)容。

3肄鸽、滑塊

在Uber當(dāng)中卫病,你常常會(huì)看到三到四種不同的乘車服務(wù),設(shè)計(jì)師并沒(méi)有采用四個(gè)不同的界面來(lái)進(jìn)行呈現(xiàn)典徘,而是設(shè)計(jì)了一個(gè)可供用戶來(lái)回?fù)軇?dòng)的滑塊蟀苛,用戶只需要左右滑動(dòng)就能夠快速切換不同的服務(wù)。這也是一種經(jīng)典的移動(dòng)端導(dǎo)航設(shè)計(jì)逮诲,只需要使用手指輕輕掃動(dòng)帜平,就能無(wú)縫切換。最關(guān)鍵的是梅鹦,這種模式是非常直觀的裆甩,學(xué)習(xí)成本幾乎為零。

4齐唆、彈出框

并不是所有的彈出框都是“壞”設(shè)計(jì)嗤栓。有的時(shí)候,為了讓用戶和界面之間更好的交互箍邮,彈出框是最佳的解決方案茉帅。當(dāng)有最新的推送信息出現(xiàn),用戶在瀏覽當(dāng)前頁(yè)面而不想跳出的時(shí)候锭弊,使用彈出框來(lái)呈現(xiàn)臨時(shí)介入的信息堪澎,是一個(gè)兩全其美的方案。不過(guò)廷蓉,這種彈出框所遵循的設(shè)計(jì)模式是這樣的:用戶執(zhí)行特定的操作或者到達(dá)應(yīng)用的特定位置的時(shí)候出現(xiàn)彈出式窗口全封,顯示與當(dāng)前操作/位置相關(guān)的信息。

彈出框位于前景桃犬,而用戶所瀏覽的原始內(nèi)容則在背景中依然存在刹悴,關(guān)閉彈出框之后,用戶可以繼續(xù)查看之前未看完的內(nèi)容攒暇。彈出框是一種足夠引人矚目的控件土匀,在用戶真正需要的時(shí)候提供幫助,如果濫用則會(huì)非常惱人形用。與此同時(shí)就轧,彈出框的關(guān)閉也必須足夠便捷证杭,最好是輕掃或者點(diǎn)擊就能輕松關(guān)閉。

TED的官方應(yīng)用當(dāng)中妒御,就采用了這樣的設(shè)計(jì)模式解愤。當(dāng)用戶在瀏覽內(nèi)容列表的時(shí)候,可以以淡入淡出的形式彈出視頻信息乎莉,用戶可以臨時(shí)查看這些視頻內(nèi)容送讲,關(guān)閉之后繼續(xù)查看信息流不受影響。

5惋啃、側(cè)邊欄和抽屜控件

同電視和桌面端的電腦相比哼鬓,手機(jī)的屏幕尺寸太小了。所以边灭,在這些小屏幕上進(jìn)行設(shè)計(jì)的最大的問(wèn)題异希,始終是如何在有限的區(qū)域內(nèi)有效而優(yōu)雅地放置更多的內(nèi)容。為了避免在屏幕上混雜大量的信息绒瘦,設(shè)計(jì)師們常常是選擇側(cè)邊欄称簿、下拉框和抽屜控件來(lái)承載更多的內(nèi)容。而我們最常見(jiàn)的惰帽,是如今幾乎無(wú)處不在的漢堡菜單予跌、滑出菜單的箭頭和側(cè)邊欄,其中大都承載了更多的選項(xiàng)和更深層級(jí)的內(nèi)容善茎。通過(guò)這樣的信息收納方式券册,讓主界面上可以更好的顯示關(guān)鍵的信息。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末垂涯,一起剝皮案震驚了整個(gè)濱河市烁焙,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌耕赘,老刑警劉巖骄蝇,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異操骡,居然都是意外死亡九火,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門册招,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)岔激,“玉大人,你說(shuō)我怎么就攤上這事是掰÷嵌Γ” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)炫彩。 經(jīng)常有香客問(wèn)我匾七,道長(zhǎng),這世上最難降的妖魔是什么江兢? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任昨忆,我火速辦了婚禮,結(jié)果婚禮上杉允,老公的妹妹穿的比我還像新娘扔嵌。我一直安慰自己,他們只是感情好夺颤,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著胁勺,像睡著了一般世澜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上署穗,一...
    開(kāi)封第一講書(shū)人閱讀 49,031評(píng)論 1 285
  • 那天寥裂,我揣著相機(jī)與錄音,去河邊找鬼案疲。 笑死封恰,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的褐啡。 我是一名探鬼主播诺舔,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼备畦!你這毒婦竟也來(lái)了低飒?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤懂盐,失蹤者是張志新(化名)和其女友劉穎褥赊,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體莉恼,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡拌喉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了俐银。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尿背。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖捶惜,靈堂內(nèi)的尸體忽然破棺而出残家,到底是詐尸還是另有隱情,我是刑警寧澤售躁,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布坞淮,位于F島的核電站茴晋,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏回窘。R本人自食惡果不足惜诺擅,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望啡直。 院中可真熱鬧烁涌,春花似錦、人聲如沸酒觅。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)舷丹。三九已至抒钱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間颜凯,已是汗流浹背谋币。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留症概,地道東北人蕾额。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像彼城,于是被迫代替她去往敵國(guó)和親诅蝶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,504評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)募壕、插件秤涩、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,024評(píng)論 4 62
  • 1 UI設(shè)計(jì)基礎(chǔ) 1.1 為iOS而設(shè)計(jì) 1.1.1 iOS包含以下3條設(shè)計(jì)原則: 遵從,UI應(yīng)該有助于人們理解內(nèi)...
    Willry閱讀 3,554評(píng)論 1 48
  • Apple:世界上草食動(dòng)物多,還是肉食動(dòng)物多呢习柠? Mum:差不多的吧…… Apple:我覺(jué)得草食動(dòng)物多一些的匀谣。 M...
    茉莉的Apple閱讀 760評(píng)論 0 0
  • 其實(shí)長(zhǎng)這么大從來(lái)沒(méi)有寫(xiě)過(guò)什么東西,空間也好资溃、微博也罷武翎,總覺(jué)得好像沒(méi)有準(zhǔn)備好就一點(diǎn)頭緒都沒(méi)有,寫(xiě)東西是自我心靈慰藉呢...
    夏日里的兔子閱讀 244評(píng)論 1 3