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

在設(shè)計(jì)移動(dòng)端APP的時(shí)候，最重要的一點(diǎn)是確保界面和交互足夠有用又清晰直觀(guān)。如果這兩個(gè)基本的特征都無(wú)法達(dá)成，用戶(hù)是沒(méi)有足夠的理由來(lái)使用它的，更不用說(shuō)額外的價(jià)值體現(xiàn)了。不過(guò)，在確保可用性的前提下，學(xué)習(xí)曲線(xiàn)太過(guò)陡峭，用戶(hù)的留存率則不會(huì)太高，畢竟學(xué)習(xí)成本擺在那兒放著。良好的UI設(shè)計(jì)，通常會(huì)幫助用戶(hù)解決問(wèn)題，確?？捎眯院鸵子眯?，而這些經(jīng)過(guò)設(shè)計(jì)師反復(fù)打磨和驗(yàn)證過(guò)后的相對(duì)經(jīng)典的設(shè)計(jì)最佳實(shí)踐，則被視作為設(shè)計(jì)模式。設(shè)計(jì)模式的好處在于，它經(jīng)過(guò)了驗(yàn)證，并且具備突出的特性。了解如今所流行的設(shè)計(jì)模式，能夠讓你的APP在投放市場(chǎng)之后獲得更多的支持，擁有更強(qiáng)的競(jìng)爭(zhēng)力。

今天的文章會(huì)著重介紹移動(dòng)端APP導(dǎo)航的設(shè)計(jì)模式。無(wú)論你所設(shè)計(jì)的APP是什么樣的類(lèi)型，或多或少都繞不開(kāi)導(dǎo)航設(shè)計(jì)。作為APP中最常用也是最重要的模塊，導(dǎo)航甚至可能直接影響到用戶(hù)會(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)告知用戶(hù)如何使用這一產(chǎn)品，是一個(gè)頗為有效的方式。Secret 和 Youtube 這兩個(gè)應(yīng)用就面對(duì)著這樣的局面，在新用戶(hù)打開(kāi)界面之后，設(shè)計(jì)師將關(guān)鍵性的UI控件標(biāo)注出來(lái)，通過(guò)交互式的引導(dǎo)來(lái)幫助用戶(hù)熟悉這些功能。而 Carousel 和 Duolingo 則采用了展示性的幻燈片來(lái)幫助用戶(hù)體驗(yàn)其中的核心功能。當(dāng)APP中部分功能對(duì)于用戶(hù)而言不夠明顯的時(shí)候，可以采用這種教程和引導(dǎo)模式來(lái)幫助用戶(hù)，在簡(jiǎn)化APP的復(fù)雜性和易用性上有明顯的效果。這種設(shè)計(jì)模式的另外一個(gè)優(yōu)勢(shì)在于，能夠幫助開(kāi)發(fā)者和設(shè)計(jì)師搜集到更多有效的用戶(hù)數(shù)據(jù)，進(jìn)而找到更加便捷的交互，提升用戶(hù)體驗(yàn)。

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

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

3、滑塊

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

4、彈出框

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

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

TED的官方應(yīng)用當(dāng)中，就采用了這樣的設(shè)計(jì)模式。當(dāng)用戶(hù)在瀏覽內(nèi)容列表的時(shí)候，可以以淡入淡出的形式彈出視頻信息，用戶(hù)可以臨時(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)鍵的信息。

【這些趨勢(shì)好文，讓你的設(shè)計(jì)走到用戶(hù)心里】

1. 《這3種獨(dú)特的趨勢(shì)，能讓網(wǎng)頁(yè)設(shè)計(jì)增色不少》
2. 《2017年最后幾個(gè)月，網(wǎng)頁(yè)設(shè)計(jì)師值得注意的趨勢(shì)》
3. 《這3個(gè)流行趨勢(shì)雖然好，但依然要注意這些細(xì)節(jié)》
4. 《看了那么多的設(shè)計(jì)趨勢(shì)，你知道怎么落地實(shí)踐嗎？》

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com