中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

APP設(shè)計(jì)之--導(dǎo)航

2022-06-22    分類: App設(shè)計(jì)

我們先來(lái)看看導(dǎo)航的定義。所謂的導(dǎo)航指的是:引導(dǎo)用戶訪問(wèn)APP的欄目、菜單、分類等布局結(jié)構(gòu)形式的總稱。

  也就是說(shuō),導(dǎo)航主要是引導(dǎo)用戶,告訴用戶怎么找到自己想要的信息或完成用戶自己想要完成的任務(wù)??梢?jiàn),導(dǎo)航在一個(gè)APP中的重要性是非常高的。導(dǎo)航設(shè)計(jì)的合理性關(guān)系著用戶是否能夠找到信息和完成任務(wù)。

  那么,導(dǎo)航設(shè)計(jì)究竟應(yīng)該如何做呢?這個(gè)說(shuō)實(shí)話,不同的APP,導(dǎo)航設(shè)計(jì)既可能是相似的,也可能是完全不同的。因此,導(dǎo)航設(shè)計(jì)究竟應(yīng)該如何做的答案只能是:根據(jù)APP的情況來(lái)定。

  不過(guò),雖然我們不能給出一個(gè)標(biāo)準(zhǔn)答案說(shuō):APP導(dǎo)航這樣設(shè)計(jì)就可以了。但在眾多的APP導(dǎo)航設(shè)計(jì)中,我們能夠找到一些常見(jiàn)的設(shè)計(jì)模式,以此來(lái)作為一個(gè)參考,輔助我們的APP導(dǎo)航設(shè)計(jì)。

  下面,我將就APP導(dǎo)航設(shè)計(jì)的常見(jiàn)模式進(jìn)行一個(gè)總結(jié)。

  首先,我將定義一個(gè)叫做原始導(dǎo)航的導(dǎo)航。原始導(dǎo)航是一個(gè)最最粗糙的導(dǎo)航,通過(guò)純文字的鏈接入口來(lái)導(dǎo)航。如下圖:

  看到原始導(dǎo)航,是不是覺(jué)得弱爆了,怎么可能有這樣的導(dǎo)航呢?所以,我把它定義為原始導(dǎo)航,然后在此基礎(chǔ)上通過(guò)不斷的演變來(lái)形成我們常見(jiàn)的導(dǎo)航模式。

一、標(biāo)簽導(dǎo)航(選項(xiàng)卡導(dǎo)航)

  有了原始導(dǎo)航,你可能會(huì)說(shuō),原始導(dǎo)航這種入口的擺放方式太占空間了,就五個(gè)入口就占據(jù)了整個(gè)界面。有沒(méi)有一種更加省空間的導(dǎo)航模式呢?當(dāng)然有。

  首先,我們將五個(gè)入口放到界面的下方,就會(huì)形成常見(jiàn)的底部標(biāo)簽導(dǎo)航。

  通常,底部標(biāo)簽導(dǎo)航有3~4標(biāo)簽,一般不會(huì)超過(guò)5個(gè),有更多的選項(xiàng)操作時(shí)可將最后一項(xiàng)設(shè)置為更多,將一些次要功能放置在更多里。這是一種非常常見(jiàn)的導(dǎo)航模式。如果你的應(yīng)用需要用戶頻繁的在不同分頁(yè)切換,可以采用這種導(dǎo)航。雖然它還是會(huì)占用一定的界面空間,但比起原始導(dǎo)航來(lái)說(shuō)好多了?,F(xiàn)在很多APP(包括iso和android)都在用這種模式。

  當(dāng)然,如果你在五個(gè)標(biāo)簽中,有一個(gè)標(biāo)簽是最重要或最頻繁使用的,想要重點(diǎn)突出,可以使用下面變形的底部標(biāo)簽導(dǎo)航。

  這種底部標(biāo)簽導(dǎo)航模式并不常見(jiàn),但在一些APP中還是可以看到它的應(yīng)用。比如微博的底部標(biāo)簽導(dǎo)航。

  其次,我們將標(biāo)簽放到界面的上方,就會(huì)形成常見(jiàn)的頂部標(biāo)簽導(dǎo)航。

  頂部標(biāo)簽導(dǎo)航在ios app中一般當(dāng)作二級(jí)導(dǎo)航。在android app中,這種導(dǎo)航模式以前被用作一級(jí)導(dǎo)航,但自從google推出了“抽屜導(dǎo)航”作為一級(jí)導(dǎo)航后,頂部標(biāo)簽導(dǎo)航就被常用為二級(jí)導(dǎo)航了。

  作為一個(gè)二級(jí)導(dǎo)航,頂部標(biāo)簽導(dǎo)航應(yīng)用于多種情境下,可以固定數(shù)量,展示有限的幾個(gè)標(biāo)簽。也可以擴(kuò)大一定的數(shù)量,變成向左滑動(dòng)展現(xiàn)更多標(biāo)簽。甚至可以像網(wǎng)易新聞那樣,衍生出訂閱功能。頂部標(biāo)簽導(dǎo)航也是一種非常常見(jiàn)的導(dǎo)航模式。

二、抽屜導(dǎo)航

  說(shuō)完標(biāo)簽導(dǎo)航,你可能會(huì)說(shuō),我是有六七個(gè)導(dǎo)航,但其中只有一個(gè)導(dǎo)航是主要的,別的雖然有用,但用戶非常非常少用。這種情況下能不能只顯示主要的內(nèi)容,其它導(dǎo)航隱藏起來(lái)呢?這樣還可以更近一步地節(jié)省頁(yè)面空間。

  當(dāng)然可以。在這種情況下你可以使用抽屜導(dǎo)航。

  抽屜導(dǎo)航是將菜單隱藏在當(dāng)前頁(yè)面后,點(diǎn)擊導(dǎo)航入口即可像拉抽屜一樣拉出菜單。這種導(dǎo)航的優(yōu)點(diǎn)是:節(jié)省頁(yè)面展示空間,讓用戶將更多的注意力聚焦到當(dāng)前頁(yè)面。比較適合于不那么需要頻繁切換內(nèi)容的應(yīng)用,例如對(duì)設(shè)置、關(guān)于等內(nèi)容的隱藏。缺點(diǎn)是:對(duì)于那些需要經(jīng)常在不同導(dǎo)航間切換或者核心功能有一堆入口的app不適用。抽屜導(dǎo)航設(shè)計(jì)需要注意的是一定要提供菜單畫(huà)出的過(guò)渡動(dòng)畫(huà)。

四:下拉導(dǎo)航

  講完抽屜導(dǎo)航后,還有另外一種類似的導(dǎo)航模式同樣可以節(jié)省頁(yè)面空間,并且隱藏次要入口,這就是下拉導(dǎo)航。

  下拉導(dǎo)航,與抽屜式導(dǎo)航的目的相同,都是為了突出內(nèi)容。一般位于產(chǎn)品頂部,通過(guò)點(diǎn)擊呼出導(dǎo)航菜單。導(dǎo)航菜單以浮窗形式位于界面上層,可通過(guò)點(diǎn)擊導(dǎo)航菜單以外的區(qū)域使其收起。下拉導(dǎo)航的菜單與界面的連貫性比抽屜式要好,容易讓用戶感知當(dāng)前位置。但由于是位于屏幕上方,相對(duì)隱蔽而且不能結(jié)合手勢(shì)操作,所以該菜單形式也不適合于頻繁的切換功能使用??紤]到導(dǎo)航菜單的可用面積較小,所以一般采用列表的形式展示菜單內(nèi)容。

  下拉導(dǎo)航有一種比較常見(jiàn)的變式,就是下來(lái)菜單中展示兩級(jí)甚至多級(jí)(一般就是兩級(jí),沒(méi)見(jiàn)過(guò)更多的),很多人稱其為超級(jí)菜單導(dǎo)航。如下:

  這種導(dǎo)航模式說(shuō)實(shí)話用得比較少。但最近在各種O2O形態(tài)的APP中有比較多的使用(可能跟分類級(jí)別多而且不好組織有關(guān))。比如:美團(tuán)、百度外賣等都有用超級(jí)菜單。

五、宮格導(dǎo)航

  我在原始導(dǎo)航里設(shè)定了5個(gè)入口??墒?,如果有7、8個(gè)甚至10多個(gè)入口呢?而且這些入口你也不好說(shuō)到底哪個(gè)對(duì)用戶是最重要的,重要性差不多,怎么辦?OK,宮格導(dǎo)航可以解決這個(gè)問(wèn)題。

  宮格導(dǎo)航將主要入口全部聚合在頁(yè)面,讓用戶做出選擇。這樣的組織方式雖然無(wú)法讓用戶第一時(shí)間看到內(nèi)容或執(zhí)行操作,用戶的選擇壓力也比較大。但卻能夠讓用戶整體上了解APP提供的服務(wù),從而選擇自己所需要的那個(gè)服務(wù)。

  目前來(lái)說(shuō),這種導(dǎo)航模式越來(lái)越少用在一級(jí)導(dǎo)航了。不過(guò),作為二級(jí)導(dǎo)航,作為一系列工具入口的聚合,或作為內(nèi)容列表的一種圖形化呈現(xiàn)形式,還是存在在各種APP里。如:zakeer的核心頁(yè)面就是宮格導(dǎo)航,但其與訂閱功能結(jié)合,沒(méi)有讓所有宮格斗展示出了。各種手機(jī)界面打開(kāi)后的app展示頁(yè)面基本上都是宮格模式的。

  由于受到卡片式設(shè)計(jì)的影響,宮格模式的變形也非常多。接下來(lái)簡(jiǎn)單說(shuō)一下這些變形。

  首先,可以將宮格的卡片變大,宮格與宮格時(shí)間不留空白,如下圖:

  是不是和錘子手機(jī)的宮格展示布局一樣了?

  上面這種展現(xiàn)方式所能展現(xiàn)的卡片數(shù)量有限。如果我們將其稍做調(diào)整,增加縱向滾動(dòng)功能,就可以增加卡片數(shù)量的展現(xiàn),可以說(shuō)是無(wú)限的。如下圖:

  優(yōu)酷安卓app里的“頻道”模塊采取的就是這種模式。

  如果更進(jìn)一步,是不是可以對(duì)上面這種無(wú)限的展示宮格進(jìn)行分類呢?當(dāng)然可以。然后我們就有了下面這種導(dǎo)航模式:

  當(dāng)然,每個(gè)分類下能夠展示的數(shù)量可以更多,并不限于3個(gè)。

  這時(shí),如果我們想要在分類下,展示更多的內(nèi)容,但又想多展示分類,怎么辦?可以在以上的導(dǎo)航模式中再進(jìn)一步變形,如圖:

  允許每行宮格橫向滑動(dòng)展示更多,這樣就擴(kuò)展了展示的數(shù)量,又不會(huì)減少分類數(shù)量的展示。

  宮格導(dǎo)航還有沒(méi)有別的變式呢?當(dāng)然有。比如:

  可以通過(guò)變化宮格導(dǎo)航中卡片的大小,來(lái)凸顯宮格中內(nèi)容的不同重要性。

  可以將宮格導(dǎo)航和訂閱功能結(jié)合,形成獨(dú)特的訂閱導(dǎo)航。

  ……

  變化形式根據(jù)不同的需要很可能有很多種。一般來(lái)講,常見(jiàn)的這些導(dǎo)航模式就夠了。

六、列表導(dǎo)航

  列表式APP導(dǎo)航是我們?cè)贏PP設(shè)計(jì)種必不可少的一個(gè)信息承載模式。當(dāng)然作為一個(gè)APP的導(dǎo)航也是非常方便的。這種導(dǎo)航模式從原始導(dǎo)航中很好轉(zhuǎn)換,只要將列表左對(duì)齊,增加向右箭頭表明是否還有下級(jí)即可。如圖:

  目前來(lái)看,列表導(dǎo)航通常用于二級(jí)頁(yè),由于它與宮格導(dǎo)航一樣,不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容,所以通常app不會(huì)在首頁(yè)使用它。這種導(dǎo)航結(jié)構(gòu)清晰,易于理解,冷靜高效,能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面。

  自然,如果你想要對(duì)列表進(jìn)行分類也是可以的。這樣邏輯上會(huì)更加清晰。如下:

  如果說(shuō)雖然可以分類,但實(shí)在不知道如何確定分類名稱。把分類名稱去掉也是可以的。只是用間距將每一組列表隔開(kāi)也能起到梳理邏輯的作用。

  對(duì)于列表導(dǎo)航來(lái)說(shuō),還有一種常見(jiàn)的變式:將列表下內(nèi)容中的核心內(nèi)容展示出來(lái),常見(jiàn)的是核心數(shù)據(jù)展現(xiàn)。如下:

  這種變式有時(shí)候也被成為儀表式導(dǎo)航,通過(guò)標(biāo)題和核心數(shù)據(jù)來(lái)展現(xiàn)核心內(nèi)容,同時(shí)作為導(dǎo)航使用。這種導(dǎo)航模式可以參見(jiàn)各種互聯(lián)網(wǎng)金融APP中的產(chǎn)品列表。

七、輪播導(dǎo)航

  如果我們將原始導(dǎo)航中的5個(gè)入口共處一個(gè)頁(yè)面變成每個(gè)頁(yè)面僅限一個(gè)入口可以嗎?或者說(shuō),我們將宮格導(dǎo)航變成一宮格呢?會(huì)有一種新的導(dǎo)航模式嗎?

  按照上面的假設(shè),我們會(huì)有一種常見(jiàn)的導(dǎo)航模式:輪播導(dǎo)航。如下:

  當(dāng)然,只有應(yīng)用信息足夠扁平,可以嘗試輪播導(dǎo)航。輪播導(dǎo)航如果應(yīng)用得當(dāng),能夠給人耳目一新的體驗(yàn)。輪播導(dǎo)航能夠大程度的保證應(yīng)用的頁(yè)面簡(jiǎn)潔性,操作也是最方便的,只需要手指左右滑動(dòng)。缺點(diǎn)也很明顯:承載入口的數(shù)量有限,超過(guò)10個(gè)可能就優(yōu)點(diǎn)多了。這種導(dǎo)航常見(jiàn)于查看圖片,也經(jīng)常與其他導(dǎo)航模式結(jié)合,作為banner廣告呈現(xiàn)。

八、點(diǎn)聚導(dǎo)航

  如果一個(gè)界面,因?yàn)閮?nèi)容或功能展示的需求,需要極端簡(jiǎn)化其入口,應(yīng)該如何做?點(diǎn)聚導(dǎo)航是一種選擇。

  當(dāng)層級(jí)框架比較復(fù)雜,幾個(gè)并列的模塊中都有用戶頻繁使用的核心內(nèi)容,但有需要簡(jiǎn)化頁(yè)面時(shí),會(huì)考慮使用點(diǎn)聚式導(dǎo)航。點(diǎn)聚式導(dǎo)航將多個(gè)核心功能聚匯到主界面中顯示,方便用戶呼出使用。由于點(diǎn)聚式占用空間小,一般會(huì)融入一些動(dòng)態(tài)的互動(dòng)效果,讓導(dǎo)航更具趣味性。很多圖片拍攝及編輯、視頻拍攝及編輯類APP會(huì)使用這類導(dǎo)航。

九、隱喻導(dǎo)航

  如果原始導(dǎo)航中的五個(gè)入口,變成游戲界面中的五個(gè)關(guān)卡,只是簡(jiǎn)單地將其按照上下順序列出來(lái)就會(huì)不太適用。游戲?qū)?dǎo)航的要求不僅要可用,更要和整個(gè)游戲的風(fēng)格等匹配。因此,有了隱喻導(dǎo)航這種模式,用頁(yè)面模仿應(yīng)用的隱喻對(duì)象。這種導(dǎo)航主要用于游戲,但在幫助導(dǎo)航 人們組織事物(如日記、書(shū)籍等),并對(duì)其進(jìn)行分類的應(yīng)用中也能看到。

十、關(guān)于導(dǎo)航的一些其它想法:

  雖然每個(gè)導(dǎo)航模式有常見(jiàn)的用法,但并沒(méi)有絕對(duì)的限定,要具體情況具體分析。比如頂部標(biāo)簽導(dǎo)航可以作為一級(jí)導(dǎo)航,但與抽屜導(dǎo)航結(jié)合的話,可能就會(huì)變成二級(jí)導(dǎo)航。

  就目前的情況來(lái)看,很少有APP能夠只用一種導(dǎo)航模式,至少需要兩種。絕大多數(shù)的APP都在混合使用多種導(dǎo)航模式。很多APP甚至可能使用多大七八種導(dǎo)航模式,有的一個(gè)界面就可能用三到四種導(dǎo)航模式。

  導(dǎo)航模式混合使用并不可怕,關(guān)鍵是要在設(shè)計(jì)上做好文章,確保用戶能夠獲得良好的用戶體驗(yàn)。

  導(dǎo)航的具體設(shè)計(jì)方式多種多樣,有只有文字的,有文字圖標(biāo)結(jié)合的,有圖片文字結(jié)合的,有圖片文字圖標(biāo)結(jié)合的、有只有圖標(biāo)的……具體的形式不在這里多談。用什么樣的形式取決于內(nèi)容需要什么樣的展現(xiàn)形式。

  文中的導(dǎo)航模式只是一種參考,這些模式其實(shí)還有各種各樣的變形。只要能夠引導(dǎo)用戶清晰明確地找到信息或完成任務(wù)的導(dǎo)航都是優(yōu)秀的導(dǎo)航,并不一定非得使用某種導(dǎo)航。

  關(guān)于導(dǎo)航就寫到這里。完。

文章題目:APP設(shè)計(jì)之--導(dǎo)航
分享網(wǎng)址:http://m.rwnh.cn/news/170386.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有App設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)
巴东县| 丁青县| 璧山县| 花莲县| 福州市| 仙居县| 临洮县| 古蔺县| 承德县| 赤水市| 团风县| 宝丰县| 昌江| 中卫市| 南阳市| 新源县| 马山县| 万源市| 平果县| 阿巴嘎旗| 芒康县| 大关县| 马鞍山市| 三台县| 潞西市| 陆丰市| 郯城县| 南华县| 云浮市| 七台河市| 军事| 滨州市| 凌源市| 张家口市| 门头沟区| 密云县| 文登市| 南溪县| 孟津县| 西乌珠穆沁旗| 潞西市|