杭州做官網(wǎng)響應(yīng)式導(dǎo)航模式概述

在本文中，我想專(zhuān)門(mén)研究響應(yīng)式導(dǎo)航的問(wèn)題。我們將首先討論信息體系結(jié)構(gòu)，然后討論導(dǎo)航的目的，最后我們將討論隨著時(shí)間的推移效果很好的三種響應(yīng)式導(dǎo)航模式。

信息架構(gòu)挑戰(zhàn)

在移動(dòng)優(yōu)先世界中，或至少應(yīng)該受影響的第一件事是內(nèi)容和信息體系結(jié)構(gòu)策略。如果我們的應(yīng)用程序主要是為了簡(jiǎn)化任務(wù)和共享信息，那么我們必須首先關(guān)注它。

整個(gè)行業(yè)經(jīng)歷了巨大的趨勢(shì)和日益復(fù)雜的導(dǎo)航結(jié)構(gòu)，但是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)迫使我們重新考慮這種復(fù)雜性。為了保持有效，我們需要保持多少導(dǎo)航位置？一個(gè)應(yīng)用程序確實(shí)需要幾種不同類(lèi)型的導(dǎo)航，還是僅需一種就可以正常工作？您會(huì)發(fā)現(xiàn)大多數(shù)響應(yīng)式導(dǎo)航模式迫使我們簡(jiǎn)化和集中精力，這是移動(dòng)優(yōu)先方法的好處。

在創(chuàng)建導(dǎo)航時(shí)，有兩個(gè)問(wèn)題要問(wèn)：

• 您是否痛苦地清楚了每個(gè)標(biāo)簽的含義，并且訪客對(duì)它的價(jià)值主張（有時(shí)稱(chēng)為“ 信息氣味 ”）是否清晰？
• 如何盡可能降低導(dǎo)航的復(fù)雜性？如果您的導(dǎo)航結(jié)構(gòu)深七個(gè)級(jí)別，那么應(yīng)對(duì)這一挑戰(zhàn)的人就不多了。
• 您如何確保整個(gè)分辨率適應(yīng)過(guò)程中導(dǎo)航都不會(huì)丟失？
• 您是否進(jìn)行了徹底的測(cè)試，以確保導(dǎo)航與用戶(hù)訪問(wèn)網(wǎng)站的目標(biāo)相符？

導(dǎo)航的目的

讓我們花點(diǎn)時(shí)間思考一下導(dǎo)航的目的。這似乎很基本，但是我看到太多的應(yīng)用程序的設(shè)計(jì)師忘記了這些重要原理。我讀過(guò)的最好的文章來(lái)自十年前Derek Powazek寫(xiě)的一篇文章（這表明問(wèn)題的核心保持不變）。他寫(xiě)：

導(dǎo)航也分為三個(gè)部分，用于與用戶(hù)交流其過(guò)去，現(xiàn)在和將來(lái)。任何良好的全局導(dǎo)航方案都應(yīng)該一目了然地回答每個(gè)用戶(hù)在任何頁(yè)面上都想到的前三個(gè)問(wèn)題：

• 我在哪里？（當(dāng)下）
• 我可以去哪里？（未來(lái)）
• 我去哪了 （過(guò)去）

我們必須重新審視這些原則，因?yàn)槲铱吹酱蠖鄶?shù)響應(yīng)式導(dǎo)航解決方案對(duì)這些原則的處理都不一致。大多數(shù)解決方案都很好地處理了“我可以去哪里？”這個(gè)問(wèn)題，但是大多數(shù)網(wǎng)站甚至都不會(huì)在響應(yīng)式解決方案中顯示用戶(hù)當(dāng)前所在或去過(guò)的地方。當(dāng)您調(diào)整我們將要查看的某些模式時(shí)，請(qǐng)確保將它們模制以滿(mǎn)足這些重要條件。

斯蒂芬妮·林（Stephanie Lin）剛剛發(fā)表了一篇名為“ 現(xiàn)代航行規(guī)則 ”的文章，對(duì)本文進(jìn)行了很好的補(bǔ)充。她介紹了導(dǎo)航中要考慮的重要交互設(shè)計(jì)組件。

響應(yīng)式導(dǎo)航的首選模式

請(qǐng)記住，我們今天有很多用于響應(yīng)式導(dǎo)航的選項(xiàng)，但這是我對(duì)最佳模式的看法。布拉德·弗羅斯特（Brad Frost）為我們提供了所有服務(wù)，并在他的網(wǎng)站“ This Is Responsive”上列出了大多數(shù)（即使不是全部）這些模式。他還寫(xiě)了兩篇有關(guān)這些模式的文章：“ 導(dǎo)航模式 ”和“ 用于響應(yīng)式設(shè)計(jì)的復(fù)雜導(dǎo)航模式 ”。

1.“很少做”模式

在UX London 2017網(wǎng)站上已很好地說(shuō)明了這種模式。這是在小視口中的外觀。

為什么有效

我喜歡這種模式，因?yàn)樗鼜母旧鲜箤?dǎo)航成為優(yōu)先事項(xiàng)，并且不會(huì)將導(dǎo)航隱藏在任何漸進(jìn)式披露之后。大多數(shù)響應(yīng)式導(dǎo)航模式都涉及逐步披露，盡管披露是一個(gè)不錯(cuò)的選擇，但只有在沒(méi)有更好的選擇時(shí)才應(yīng)采用披露。我同意尼爾森·諾曼集團(tuán)（Nielsen Norman Group）在此問(wèn)題上的看法：如果可以顯示導(dǎo)航，請(qǐng)顯示它。沒(méi)有人訪問(wèn)此網(wǎng)站，不必懷疑導(dǎo)航在哪里。一個(gè)額外的好處是，它沒(méi)有客戶(hù)端依賴(lài)性，因此您可以保持較低的依賴(lài)性并減少故障點(diǎn)。

但是，對(duì)于許多響應(yīng)式應(yīng)用程序來(lái)說(shuō)，這是很難的。首先，它不能很好地處理復(fù)雜的導(dǎo)航。如果一次顯示的應(yīng)用程序中需要多個(gè)級(jí)別，則此模式不適合您。另外，它可能會(huì)占用應(yīng)用程序中的許多重要垂直空間，因此請(qǐng)確保您可以像UX London網(wǎng)站一樣實(shí)現(xiàn)它，并確保分配的空間受到控制。

2.多級(jí)切換

大多數(shù)應(yīng)用程序可以脫離兩個(gè)級(jí)別的導(dǎo)航，而我發(fā)現(xiàn)這是我的許多實(shí)現(xiàn)的最佳選擇。在小型視口中，此模式使用戶(hù)可以輕松切換小節(jié)并查看其中的內(nèi)容。白宮的網(wǎng)站就是一個(gè)現(xiàn)代的例子。

為什么有效

它可能不是最華麗的解決方案，但我發(fā)現(xiàn)它非常穩(wěn)定。這種模式對(duì)我需要支持的大多數(shù)導(dǎo)航都適用，并且可以有效地處理簡(jiǎn)單的兩級(jí)導(dǎo)航結(jié)構(gòu)（在大多數(shù)情況下，我很樂(lè)意超出此范圍）。另外，我們必須始終逐步構(gòu)建這些解決方案，以便即使支持它們的代碼失敗，它們也可以正常工作。

我曾經(jīng)使用FlexNav來(lái)實(shí)現(xiàn)此效果，但是該項(xiàng)目已被其所有者放棄。一個(gè)有前途的替代方法是SmartMenus，但是我還沒(méi)有使用過(guò)。如果您對(duì)純CSS版本感興趣，請(qǐng)查看CSS Script的代碼示例。

3.簡(jiǎn)單切換

這是另一個(gè)不錯(cuò)的選擇，實(shí)際上是以前模式的一種變體。在這種情況下，我們不需要多個(gè)級(jí)別，但是導(dǎo)航項(xiàng)仍然太多，以至于不允許“很少做”模式。在星巴克的網(wǎng)站上可以找到一個(gè)例子。

為什么有效

使用一些清晰的圖標(biāo)和顏色，此選項(xiàng)可以很好地實(shí)現(xiàn)，因?yàn)樗膶?shí)現(xiàn)和使用非常簡(jiǎn)單。這種模式的變化會(huì)將內(nèi)容壓低或重疊，我認(rèn)為兩者都是可以接受的。如果您想要一個(gè)好的腳本，請(qǐng)查看Responsive Nav。

請(qǐng)記住，您不一定必須在響應(yīng)解決方案中支持多個(gè)級(jí)別。例如，世界野生動(dòng)物基金會(huì)在較高視口分辨率下的導(dǎo)航有一個(gè)下拉菜單，但是在最低視口中，它只是進(jìn)行切換，頂層鏈接轉(zhuǎn)到著陸頁(yè)，其中顯示了剩余的導(dǎo)航項(xiàng)。您還可以提供其他導(dǎo)航方式，包括面包屑，這對(duì)于任何視口大小都可能是有用的補(bǔ)充。

榮譽(yù)獎(jiǎng)

如上所述，您可以從今天選擇許多方法來(lái)滿(mǎn)足項(xiàng)目的需求。即使我最喜歡以上三個(gè)，也有另外兩種可能性。

畫(huà)布外

這可能是最受歡迎的，但是某些實(shí)現(xiàn)比其他實(shí)現(xiàn)更好。它可以很好地完成，并且如果您需要腳本，我使用MMenu的效果很好。

優(yōu)先加

在過(guò)去的一年左右的時(shí)間里，這已經(jīng)蒸蒸日上，并且在某些情況下也可能很好。我在水平導(dǎo)航時(shí)間較長(zhǎng)的網(wǎng)站上使用了它，以避免在視口縮小時(shí)過(guò)早隱藏菜單項(xiàng)。此解決方案的唯一大問(wèn)題是，它迫使您對(duì)最重要的內(nèi)容進(jìn)行假設(shè)，因此請(qǐng)小心。我為此使用了PriorityNav.js腳本，并且運(yùn)行良好。

可怕的漢堡圖標(biāo)

我簡(jiǎn)直無(wú)法談?wù)擁憫?yīng)式導(dǎo)航，更不用說(shuō)圍繞漢堡圖標(biāo)的爭(zhēng)論了（響應(yīng)式“神秘肉”導(dǎo)航指示器還有其他變體）。真正的問(wèn)題是：圖標(biāo)本身傳達(dá)了足夠的含義，還是需要文本指示符？辯論本質(zhì)上是關(guān)于漢堡圖標(biāo)的普遍性和可識(shí)別性。對(duì)我來(lái)說(shuō)，很少有圖標(biāo)具有普遍清晰的含義，而沒(méi)有某種文字來(lái)支持它們，而漢堡包圖標(biāo)只是為什么最好不要僅依賴(lài)圖標(biāo)的另一個(gè)示例。問(wèn)問(wèn)自己，是否值得通過(guò)不包含訪問(wèn)者來(lái)使訪客感到困惑，還是我應(yīng)該僅僅包含它以增加被理解的可能性？我傾向于添加文字指示符。記住要始終評(píng)估應(yīng)用程序的上下文，以回答此類(lèi)問(wèn)題。

如果您想了解更多，這里有一些談?wù)撨@個(gè)問(wèn)題的文章：

• “ 顯而易見(jiàn)總是贏家，”盧克·沃布洛夫斯基
• “ 作為出色用戶(hù)體驗(yàn)的一部分的圖標(biāo)，” Smashing Magazine的Nick Babich
• “ 漢堡菜單和隱藏的導(dǎo)航按鈕UX度量標(biāo)準(zhǔn) ”，尼爾森·諾曼集團(tuán)（Nielsen Norman Group）的卡拉·珀尼絲（Kara Pernice）和拉盧卡（Raluca Budiu）
• “ 測(cè)試漢堡包圖標(biāo)以獲取更多收入 ”，CXL，Peep Laja

結(jié)論

好消息是，響應(yīng)式應(yīng)用程序中處理導(dǎo)航的選項(xiàng)比以往任何時(shí)候都多。只要您堅(jiān)持明確的信息體系結(jié)構(gòu)設(shè)計(jì)，測(cè)試和可靠的模式，就可以確保訪問(wèn)者現(xiàn)在和將來(lái)都可以輕松使用您的網(wǎng)站。下一步是開(kāi)始嘗試這些和其他模式，以了解哪種模式最適合您的特定應(yīng)用程序。行為和需求會(huì)隨著時(shí)間而變化，因此請(qǐng)不斷重新評(píng)估您使用這些方法的方式。Smashing Magazine上的另一篇文章“ 復(fù)雜網(wǎng)站上的響應(yīng)式導(dǎo)航 ”提供了案例研究和代碼，以使您走得更遠(yuǎn)。

感謝Ben Callahan和Jacqui Olkin對(duì)本文草稿的反饋。