在響應式設計中處理導航的技術

已發表: 2017-08-10

導航是響應式設計的關鍵元素。 這是因為，衡量響應式網站設計的有用程度在很大程度上取決於移動和桌面佈局之間的過渡是否容易。

有效的響應式導航需要平滑地調整到較低的分辨率，然後再放大到更大的屏幕，例如台式機的屏幕。

什麼樣的導航對響應式設計有用？

網站導航管理有不同的趨勢和技術。

極簡主義的導航方法

這種導航方法被認為是極簡主義的，因為在導航上完成的工作最少，以確保平滑、乾淨的切換。 導航的切換並不突然； 隨著屏幕尺寸的變化，做得相當精緻。 因此，該方法是對導航元素進行最小程度的改造，以帶來最大、優雅和微妙的效果。 導航鏈接的大小保持最小，並且很好地適合頁面。 這種方法可用於希望保持優雅和簡潔並選擇推廣某些精選功能的網站。 例如， CrossTrees網站顯示了非常簡單的導航菜單，專注於基本要素，並為展示圖像內容保留了主要空間。 將用戶的注意力轉移到他們想要傳達的主題上，並且不會讓用戶失去焦點。 除了房地產網站，藝術家、設計師和攝影師等也可以使用這些網站。

CrossTrees

如您所見，該網站強調極簡主義； 重點是圖像和標語，即“格拉斯哥的聯排別墅辦公空間”。 訪問導航欄的便利性被最小化，但清晰。

另一個例子是網頁設計網站Hashtag17 ，它還提供多種其他服務。 挑戰在於在一個頁面中展示所有提供的服務，而不會使頁面混亂。 該機構採用的技術是在網站底部以白色背景顯示所有服務的快照，這將幫助用戶從這個單一區域導航到 17 個頁面中的任何一個。

Hashtag17

這裡的優點是，單次查看將向查看者顯示該公司提供的所有 17 項服務。 白色背景提供了一種不會分散注意力的方法，用戶可以立即發現他們可能正在尋求幫助的區域。

當導航欄承受著網頁的重量！

大多數響應式網站將導航菜單置於頂部。 這樣做有明顯的優勢，例如易於實現、不依賴 JavaScript 和簡單的 CSS。 然而，對於房地產是一個挑戰的手機來說，這並不是最佳定位。 正如作者 Luke Wroblewski 所建議的，在響應式網站設計中處理導航的一種有趣方式是將其推到網站底部。 導航欄在桌面上佔用的空間較小，因此可以放在頂部。 此外，這也是用戶會尋找它的地方。 但在較小的設備上，最好將其推到不會佔用太多空間的底部。 導航列表位於網站頁腳或頁腳上方。 在網站的標題部分有一個指向它的錨鏈接。 這可以通過使用絕對定位和邊距來完成，如下所示：

#access li a {
   padding: 0;
   margin: 0;
   font-size: 16px;
   height: 57px;
}
.container {
   padding-bottom: 549px;
   position: relative;
}
.nav-strip {
   position: absolute;
   bottom: 0;
}

這樣做的好處是在網站的折疊部分有更多內容的空間； 同時，導航更容易、更容易接近和謹慎。 另一個優點是用戶可以閱讀整個內容並滾動到頁面底部，並在其中找到導航欄。 這將為他們提供更多點擊選項。 其他優點是這種方法不需要使用 JavaScript，因此更易於管理和排除故障。 這種方法更容易設計響應式網站，因為頁眉和頁腳（固定）的位置可以輕鬆轉換。

這種導航元素排列的尷尬之處在於，一個人需要來回跳轉，才能訪問鏈接。 因此，這是一種尷尬的交互方式，在移動端可能會比較麻煩，可能會影響移動端導航的流暢性。 另一個缺點是，如果用戶沒有閱讀內容，他可能不會滾動到屏幕底部，因此可能會錯過導航欄，現在知道在哪裡尋找它。

這可以通過使用切換菜單來糾正

在這裡，菜單在標題本身中打開，並通過顯示/隱藏功能提供乾淨、優雅的外觀。 它很容易編碼並且是一個平滑的過渡。 但挑戰在於 Android 可能無法通過 CSS 動畫提供如此平滑的過渡。

使用 Toggle 的一個很好的例子是Starbucks ：

Starbucks

此外，如果菜單很大，它仍然會佔用很多空間。 這個問題可以通過為不同的設備創建不同的菜單來解決。 一種有效的方法是使用響應式選擇菜單插件。

另一種方法是通過使用選擇菜單方法。

與其他導航方法不同，此技術涉及使用 Javascript。 它使我們具有表單屬性。 它將菜單列表轉換為選擇元素。 儘管它可能是每個瀏覽器中性能最好的元素，因為它們是從下拉菜單中派生的，但由於難以在不同瀏覽器之間進行自定義，設計人員會發現它們受到限制。 這些菜單在響應式網站設計中的最大優勢是它們可以工作。 另一個積極的一點是，當導航鏈接過多時，它們可以用來控制導航鏈接； 這可能是 TopNav 方法的問題。 它們還為網頁佈局騰出了很多空間，可用於網頁設計。 選擇菜單可以針對不同的設備進行定制——不同的移動瀏覽器將以不同的方式處理選擇菜單。 這是響應式網頁設計和導航的優勢。

使用 Select Menu 的一種簡單方法是通過TinyNav ，一個 JQuery 插件。

在加載您的 jQuery 版本後包含 JS 文件，然後編寫以下代碼：

<script>
$(function () {
  $("#nav").tinyNav();
});
</script>

在 CSS 中添加幾行。 隱藏 tinynav 類。 將其設置為在您想要的任何斷點處顯示：

/* styles for desktop */
.tinynav { display: none }

/* styles for mobile */
@media screen and (max-width: 600px) {
	.tinynav { display: block }
	#nav { display: none }
}

缺點是它們可能不像其他導航菜單技術那樣整潔和美觀。 它們最適用於具有單頁面佈局的簡單頁面，例如ApacheCoube 。

ApacheCoube

內容管理對於響應式網站的高效導航至關重要。 在規劃響應式網站的線框時，確定桌面需要哪些內容以及移動佈局更喜歡哪種內容。 確保只放置滿足特定目標的內容。 在這方面，導航可以遵循類似的方法。 為了簡化手機的響應式導航菜單，確保手機導航菜單只顯示最重要的鏈接； 不太重要的需要被排除在外。 因此，移動用戶可以在他們的網站上看到他們想要的東西。

您需要確定哪些內容對於放置在人們最大程度地觀察到的網站部分中是絕對關鍵的，無論是在桌面還是移動設備上，然後執行此操作。

在響應式網站上工作以確保順利導航時，需要記住一些關鍵點：

  • 統一設計：某些類型的設計在設備和屏幕尺寸之間保持統一。 選擇這樣的設計很容易，您可以獲得流暢的導航並且可以響應。 克羅地亞公司Flip採用了這樣的設計。
  • 下拉菜單：下拉菜單，特別是具有多層效果的下拉菜單，簡單有效。 它們佔用最小的屏幕空間，單擊一個按鈕以分層、下拉的方式打開其他子按鈕。 這種風格由Microsoft使用。
  • 內容優先：只顯示必要的和真正重要的。 跳過無用或可能會在小屏幕上分散注意力的內容。
  • 使用圖標：使用乾淨簡單的圖標可以消除大體積文本的使用。

  • 適應你的設計：你的設計應該能夠在美學上適應不同的屏幕尺寸，即使這意味著它們的設計定位會因設備而異。 舊版本的 Oliver Russell 具有靈活的設計，可根據屏幕尺寸進行調整。

    Adapt your design

在大型網站上處理響應式設計有哪些挑戰？

大型網站對響應式設計提出了不同的挑戰。 簡單的選項是不可能的，因為導航非常複雜，因為需要呈現的內容量非常大。 此外，還有導航層要管理，屏幕要管理很多。 在復雜網站中為響應式導航開發導航需要與員工進行廣泛的討論，並且需要與客戶在各個方面進行更多的微調和討論。 打破這一點的步驟圍繞著了解複雜網站需要為其目標受眾提供什麼。 因此，這些步驟包括進行受眾研究以確定受眾對他們希望在網站上看到的內容的期望。 這可能涉及大量內容，需要仔細選擇要呈現的內容類型。 這種研究和工作是在醫院綜合網站的設計中進行的。

為大型網站設計響應式設計的一種方法是使用模板和組件。 這可以通過將功能和內容變化分成更小的組件，然後測試每個組件在小屏幕上的外觀來完成。 Quidco採用了這種設計方法，使用 40 個組件來合理化其內容變化。 大型網站需要對其功能保持敏捷。 例如，Facebook 中的聊天窗格會根據視口大小更改其位置。

電子商務網站，尤其是大型電子商務網站，在確保導航順暢方面也面臨挑戰。 遵循某些關鍵步驟有助於增強此類網站的用戶體驗。 其中一個步驟是創建產品的視覺層次結構，以便用戶可以清楚地看到他們感興趣的產品。 使用更多的空白空間和最小的混亂是必不可少的。 使用清晰的字體和正確的字體大小。 避免使用長文本塊。 優先考慮基本功能並將它們放在頂部，例如搜索欄和購物車。 根據價格、相關性或評級對產品進行分類也應該很容易獲得。 還要重視客戶可能需要的領域，例如客戶服務的細節。

處理導航是設計人員和開發人員可以不斷完善以改善用戶體驗的領域。 關鍵是您要根據您所在的行業和買家的人口統計數據來選擇您想要的風格。