彈出菜單已經(jīng)接管作為主要的導(dǎo)航模式。

彈出菜單已經(jīng)接管作為主要的導(dǎo)航模式的移動(dòng)布局 - 甚至是一些桌面布局已經(jīng)在船上跳下。

并有很好的理由：菜單是一個(gè)偉大的方式來(lái)保持上下文，同時(shí)給用戶提供了很多附加信息。

在這篇文章中，我們將討論為什么彈出導(dǎo)航已經(jīng)變得如此成功的一個(gè)導(dǎo)航模式，并顯示其潛力是這么多。從產(chǎn)品列表頁(yè)面過(guò)濾器，購(gòu)物車，以最近查看過(guò)的物品的清單，這種模式的潛力只受我們的驅(qū)動(dòng)器為先鋒。這時(shí)候，我們探討是多么遙遠(yuǎn)的畫(huà)布，我們可以走了。

你已經(jīng)看到了畫(huà)布彈出按鈕之前 - 你知道，那些在滑動(dòng)從屏幕的邊緣側(cè)邊欄？現(xiàn)在，他們甚至可以被認(rèn)為是司空見(jiàn)慣。還有一個(gè)原因，他們的知名度，最近爆炸：在移動(dòng)，一個(gè)窗口的概念已經(jīng)全部消失。市場(chǎng)上的大多數(shù)設(shè)備今天給我們幾乎無(wú)法控制的窗口。

相反，我們只有兩個(gè)主要層一起工作：視口和畫(huà)布。雖然這些提供充足的潛力，設(shè)計(jì)師們開(kāi)始對(duì)摩擦約束視口的限制。休帆布彈出 - 少用在桌面上 - 在這個(gè)景觀就顯得極為重要。

隨著移動(dòng)設(shè)備有限的平面，設(shè)計(jì)師認(rèn)為有必要打開(kāi)上行空間，不強(qiáng)迫用戶失去上下文或在屏幕上留下自己的位置提供相關(guān)信息。出場(chǎng)的帆布，使我們能夠做到這一點(diǎn)。在桌面上，我們很少去了帆布 - 只是沒(méi)有必要。在移動(dòng)，離畫(huà)布是一個(gè)突破性的概念。它創(chuàng)建的設(shè)計(jì)可能性的新領(lǐng)域。而且，與任何映射處女地，它提供了珍寶那些愿意承擔(dān)風(fēng)險(xiǎn)。對(duì)設(shè)計(jì)師來(lái)說(shuō)，這是一個(gè)難得的機(jī)會(huì)，創(chuàng)造新的東西。

早期的探險(xiǎn)

當(dāng)然，第一個(gè)人去畫(huà)布超越和勇敢的未知都輸給了我們。像美洲，我們只有那些誰(shuí)登陸，最有名的記得。因此，F(xiàn)acebook是我們的哥倫布。

Facebook的著手解決它發(fā)現(xiàn)手機(jī)屏幕一個(gè)非常具體的問(wèn)題。它的導(dǎo)航菜單很長(zhǎng)，有很多相關(guān)的內(nèi)容給用戶。用戶需要能夠探索導(dǎo)航不失其時(shí)間軸到位。如果他們決定不導(dǎo)航離開(kāi)，他們應(yīng)能跳右后衛(wèi)在何處。

Facebook的原休帆布彈出是很多像目前Facebook作為其移動(dòng)互聯(lián)網(wǎng)導(dǎo)航。今天，它仍然是它的通訊系統(tǒng)，以及它的Android應(yīng)用程序使用了帆布。

常見(jiàn)的導(dǎo)航模式是行不通的。菜單過(guò)長(zhǎng)流行在整個(gè)屏幕上，如果其他地方出現(xiàn)在畫(huà)布上，這將拉動(dòng)用戶斷章取義。該問(wèn)題的解決方法是鎖定畫(huà)布，并將其拉至右 - 揭示導(dǎo)航下方。使用彈出導(dǎo)航像，這是一種全新的概念。

圖表新界

它的工作原理的原因 - 為什么感覺(jué)那么自然 - 是因?yàn)閯?dòng)作是很自然的。移動(dòng)到東西方暫時(shí)重定向重點(diǎn)，同時(shí)保持一個(gè)什么樣的用戶在做之前驚鴻一瞥，是在物理領(lǐng)域一個(gè)非常普遍的行動(dòng)。我們將保持我們的地方在報(bào)紙上，因?yàn)槲覀兎揭粋€(gè)引用的部分。我們將保持我們的拇指在頁(yè)面上并翻轉(zhuǎn)到一本書(shū)的尾注。我們將伸延出一個(gè)表，我們?cè)噲D找到收據(jù)行項(xiàng)目在我們的報(bào)稅表。

這是一個(gè)什么樣的脫帆布彈出模擬所有的物理例子：節(jié)省你的位置，讓您可以馬上回你在做什么。休帆布彈出的是一個(gè)好的方式與移動(dòng)內(nèi)容進(jìn)行交互，因?yàn)樗鉀Q了一個(gè)非常明顯的問(wèn)題：焦點(diǎn)。

在移動(dòng)，我們所是重點(diǎn)。這使得維護(hù)方面非常努力。我們強(qiáng)制用戶上下滾動(dòng)，而我們隱藏和顯示內(nèi)容做所有我們希望用戶做的事情。滾動(dòng)條，這表明用戶所在的頁(yè)面上，通常是缺席，又回到了一個(gè)人的確切位置常常是困難的。上下文中重要的是要在使用者的心理的內(nèi)容的圖。如果沒(méi)有它，他們會(huì)迷路，脫落的網(wǎng)站。

隨著彈出導(dǎo)航展開(kāi)工具欄，我們保持上下文的頁(yè)面上，而呈現(xiàn)出巨大的新的信息的數(shù)組。彈出按鈕可容納值得一新的互動(dòng)和內(nèi)容的整個(gè)頁(yè)面，而不會(huì)迷失于所有的用戶。這是一個(gè)非常強(qiáng)大的模式，與潛在的，我們甚至還沒(méi)有開(kāi)始發(fā)掘。

平地球綜合癥

盡管這種潛在的，我們是不是真的愿意蹬帆布的界限。我們的設(shè)計(jì)師已經(jīng)開(kāi)發(fā)了一個(gè)不幸的趨勢(shì)，以避免試驗(yàn)。我們更愿意實(shí)施行之有效的模式，但我們不太可能批判性的思考，為什么一個(gè)模式是成功的。當(dāng)然，我們知道，彈出導(dǎo)航彈出是偉大的導(dǎo)航，但是這還不是全部這是很好的。

影未解決導(dǎo)航問(wèn)題時(shí)，它產(chǎn)生的圖案。它是解決一個(gè)交互的問(wèn)題。它需要一種方法來(lái)呈現(xiàn)大量的交互和信息不從他們的初衷分心用戶 - 時(shí)間軸。相反，彈出導(dǎo)航彈出一個(gè)導(dǎo)航模式的思維，我們需要把它當(dāng)做一個(gè)內(nèi)容戰(zhàn)略。我們?nèi)绾纬尸F(xiàn)更多的信息，用戶無(wú)需從什么是手頭分心呢？

Facebook的沒(méi)有飛出限制航行要么。它用它的消息聯(lián)系人列表中也是如此。這可能是一個(gè)更好的利用彈出的，因?yàn)橛脩羰歉叨葍A向于快速?gòu)棾龃蜷_(kāi)側(cè)邊欄，看看誰(shuí)在線，并返回到瀏覽時(shí)間線之前，他們通過(guò)系統(tǒng)快信。這樣的模式不是一成不變的。事實(shí)上，他們會(huì)得到更好的唯一途徑是，如果我們不斷地嘗試他們。Facebook的徹底改變了我們奠定了移動(dòng)內(nèi)容的方式，只有極少數(shù)的人攜帶的火炬前進(jìn)。

當(dāng)心高歌猛進(jìn)

這里有一個(gè)風(fēng)險(xiǎn)。我們不應(yīng)該使用斷開(kāi)帆布圖案，只是因?yàn)樗切≌f(shuō)或流行。正如在Web開(kāi)發(fā)大多數(shù)事情一樣，每一種方法都有其優(yōu)點(diǎn)和缺點(diǎn)。休帆布彈出是不是好的每一種情況。這是最好的時(shí)候，你需要提供大量的信息或復(fù)雜的相互作用，而不將用戶遠(yuǎn)離主要內(nèi)容。

如果你只有少數(shù)的導(dǎo)航項(xiàng)目，或者如果您所提供的補(bǔ)充資料是短暫的，那么該模式很可能會(huì)比方便更具破壞性。請(qǐng)記住，它提供了一個(gè)新的視圖，同時(shí)保持原始視圖的背景下 - 人們會(huì)失去一些流量，每當(dāng)他們打開(kāi)彈出。如果補(bǔ)充資料是最小的，然后使用一個(gè)酥餅或下推互動(dòng)，而不是和保留用戶的屏幕上。

另一件要記住的是，休帆布彈出需要更多的處理能力和瀏覽器功能比其他方法。雖然這主要是由一個(gè)很好的框架（見(jiàn)我在這篇文章的末尾推薦）緩解，這些問(wèn)題仍然站立。舊設(shè)備和設(shè)備不支持JavaScript可能被甩在后面，如果你不提供一個(gè)良好的后備這種模式。我建議逐步提高 -即提供舊的瀏覽器一個(gè)簡(jiǎn)單的解決方案，同時(shí)檢測(cè)對(duì)新功能的支持，并提供對(duì)瀏覽器，可以處理它更優(yōu)化的解決方案。

填寫(xiě)詳細(xì)資料

那么，什么是彈出的真的很好嗎？下面是該突出圖案的值的幾個(gè)例子。

購(gòu)物車

當(dāng)我工作的設(shè)計(jì)在今年早些時(shí)候Garmin的電子商務(wù)網(wǎng)站，我有一個(gè)聊天我的標(biāo)準(zhǔn)“測(cè)試用戶”（即我的女友）。我們討論了一些什么，她喜歡和不喜歡的手機(jī)網(wǎng)站電子商務(wù)。她帶來(lái)了大的問(wèn)題是，她經(jīng)常要檢查什么，她被放置在她的車，但要做到這一點(diǎn)，她有探望購(gòu)物車頁(yè)面，這需要她遠(yuǎn)離她目前正在瀏覽的內(nèi)容。

這引發(fā)了小小的“啊哈！”的時(shí)刻對(duì)我來(lái)說(shuō)。為什么不使用脫帆布彈出按鈕來(lái)保存所有的車的信息？用戶可以快速?gòu)棾龃蜷_(kāi)自己的購(gòu)物車，每當(dāng)他們想要的，瞄了一眼里面有什么。他們還可以立即開(kāi)始檢查 - 有效去除結(jié)帳過(guò)程整體的一步。如果您在電子商務(wù)工作，那么你就會(huì)知道，在結(jié)帳過(guò)程中的步驟較少，不太可能用戶會(huì)放棄自己的購(gòu)物車。

Garmin公司使用彈出的移動(dòng)，而不是一個(gè)獨(dú)立的購(gòu)物車頁(yè)面。用戶可以直接去結(jié)賬面積從這個(gè)彈出按鈕，無(wú)論他們?cè)诰W(wǎng)站上。

教有關(guān)此功能的用戶，我設(shè)計(jì)了車彈出，彈出打開(kāi)每當(dāng)用戶補(bǔ)上一到購(gòu)物車。這種剛剛在時(shí)間的指令是非常有幫助的，而時(shí)機(jī)是好的，因?yàn)橛脩舨⒉恍枰私獾能?，直到他們添加的東西給它。如果你正在構(gòu)建一個(gè)電子商務(wù)網(wǎng)站，那么你可能已經(jīng)有你需要做到這一點(diǎn)的一切。

許多網(wǎng)站顯示購(gòu)物車的預(yù)覽當(dāng)用戶將鼠標(biāo)懸停在購(gòu)物車圖標(biāo)或增加了一個(gè)產(chǎn)品它。您可以輕松地重復(fù)使用這些信息為在小屏幕上彈出按鈕。對(duì)于一個(gè)負(fù)責(zé)任的網(wǎng)站，有一個(gè)彈出購(gòu)物車的例子，看看Zazzle誕生。

Zazzle誕生有一個(gè)酥餅車的大屏幕和場(chǎng)外帆布彈出的小屏幕。

我們沒(méi)有獲得來(lái)自Garmin的桌面網(wǎng)站的頁(yè)面上現(xiàn)有的車的信息，所以我們用漸進(jìn)增強(qiáng)“Ajax”的跨頁(yè)的車信息。我們的工程團(tuán)隊(duì)存儲(chǔ)在本地存儲(chǔ)購(gòu)物車信息，這樣我們就不需要在每次加載頁(yè)面進(jìn)行檢查。每當(dāng)用戶執(zhí)行，將導(dǎo)致其改變的行動(dòng)，我們對(duì)其進(jìn)行更新。

這導(dǎo)致了一個(gè)快速和非常實(shí)用購(gòu)物車彈出。用戶可以做一切他們可以與普通車做 - 更新數(shù)量，添加優(yōu)惠券代碼 - 從任何網(wǎng)頁(yè)，他們都在。在彈出的添加功能以直觀的方式，而不采取任何遠(yuǎn)離用戶。

產(chǎn)品篩選

另一個(gè)很好的用途上的電子商務(wù)網(wǎng)站上的彈出按鈕，是房子過(guò)濾器分類頁(yè)和產(chǎn)品列表頁(yè)面。許多桌面布局有一個(gè)巨大的過(guò)濾器數(shù)量分析和選擇的產(chǎn)品列表中的用戶。傳統(tǒng)上，與這些交易有關(guān)的移動(dòng)已經(jīng)非常困難：你要么向用戶呈現(xiàn)的篩選器的一長(zhǎng)串或顯示的產(chǎn)品 - 永遠(yuǎn)兩個(gè)。

隨著彈出導(dǎo)航彈出，用戶可以彈出過(guò)濾器，切換他們想要的那些，然后輕松地返回到產(chǎn)品的更新列表。就不會(huì)失去自己的位置，他們會(huì)得到所有的桌面布局的功能。最重要的是，如果內(nèi)容的條子是顯示，用戶將獲得他們的行動(dòng)即時(shí)反饋。產(chǎn)品列表將實(shí)時(shí)為用戶切換過(guò)濾器更新。

頁(yè)面歷史

彈出導(dǎo)航彈出不限于電子商務(wù)的，當(dāng)然。一個(gè)設(shè)計(jì)的時(shí)候，我們的目標(biāo)Style.com的新的移動(dòng)網(wǎng)站是為了使用戶能夠時(shí)裝系列之間輕松切換，并深入探究展示畫(huà)廊。上下文切換是如此普遍，在這個(gè)網(wǎng)站，用戶需要一種方式來(lái)輕松地保持一切，他們一直在尋找的軌道。

開(kāi)發(fā)人員實(shí)現(xiàn)的休帆布彈出，可以滑出，并顯示每一件事該用戶已完成的網(wǎng)站上，按時(shí)間順序排列的縮略圖。找到一個(gè)以前查看過(guò)的集合是通過(guò)滾動(dòng)列表一樣簡(jiǎn)單。

紐約時(shí)報(bào)“的新網(wǎng)站已經(jīng)關(guān)閉，帆布彈出征求意見(jiàn)。有趣的是，這種模式是不使用在所有的移動(dòng)視圖，在那里它可能會(huì)更有效。

這種想法可以應(yīng)用于以后的博客和新聞網(wǎng)站。想象一下，讀一本科學(xué)論文或腳注的任何文字。每個(gè)鏈接可以打開(kāi)一個(gè)包含有關(guān)一個(gè)注腳彈出。用戶將能夠快速地獲得他們需要的信息，而不會(huì)永遠(yuǎn)失去了頁(yè)面的上下文。這實(shí)際上提高了閱讀體驗(yàn) - 的東西數(shù)字設(shè)計(jì)師夢(mèng)想的那種。

最后的邊境

所有上面列出的例子有共同性。用戶通過(guò)圖示列輔助，但他們的成功并不依賴于使用它們。他們可以訪問(wèn)他們的購(gòu)物車或他們的收視歷史或意見(jiàn)沒(méi)有彈出。彈出導(dǎo)航絕不必要的手段，但它使生活變得更加簡(jiǎn)單。用戶更可能留下來(lái)買東西，多讀一些文章和更多的廣告。

我們需要停止自滿。僅僅因?yàn)橐粋€(gè)彈出的作品真的很好的Facebook的導(dǎo)航不使它成為一個(gè)“導(dǎo)航模 式。”讓我們批判性的思考關(guān)于每個(gè)模式的功能以及為什么它是有效的。如果我們這樣做，那么我們會(huì)在建立在我們下奠定了基礎(chǔ)達(dá)到好的境地。這是特別重要的移動(dòng)，其模式是比臺(tái)式機(jī)的不太成熟的-有很好的理由：手機(jī)設(shè)計(jì)者根本就沒(méi)有被周圍的長(zhǎng)。

你會(huì)發(fā)現(xiàn)，我一直在談?wù)搩H約彈出導(dǎo)航展開(kāi)工具欄。這是一個(gè)有點(diǎn)懶惰，太。當(dāng)考慮了畫(huà)布，我們不由自主地想到圖示列的。但更可能的是與休帆布布局。無(wú)數(shù)的方法和模式，等待被強(qiáng)悍的設(shè)計(jì)師被發(fā)現(xiàn)。我們的油畫(huà)是各不相同的-當(dāng)然，他們有許多共同的地方，但每做一些事情略有不同。我們彈出導(dǎo)航的解決方案應(yīng)該是不同的，太。

作為網(wǎng)頁(yè)設(shè)計(jì)師，我們不斷踏著相同的路徑 - 也許發(fā)現(xiàn)了一個(gè)快捷方式，如果我們是幸運(yùn)的。但地圖通常保持不變。我們自滿，追溯那些誰(shuí)擁有了我們面前，穿著下來(lái)的道路越陷越深的步驟。我們需要先驅(qū)。正如Facebook的帶領(lǐng)我們過(guò)的畫(huà)布與展開(kāi)工具欄，我們需要探索新的領(lǐng)域。也許現(xiàn)在，我們只需要找到新用途展開(kāi)工具欄。也許以后，我們會(huì)發(fā)現(xiàn)全新的休帆布概念。也許真正的冒險(xiǎn)會(huì)發(fā)現(xiàn)一個(gè)全新的交互層。

本文作者來(lái)自北京網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián)，轉(zhuǎn)載請(qǐng)注明出處：創(chuàng)新互聯(lián)（www.muchs.cn）

文章標(biāo)題：彈出菜單已經(jīng)接管作為主要的導(dǎo)航模式。
瀏覽地址：http://www.muchs.cn/news31/80281.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、云服務(wù)器、微信小程序、企業(yè)網(wǎng)站制作、小程序開(kāi)發(fā)、網(wǎng)站制作

廣告

聲明：本網(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)