什麼是側邊欄，你的博客上需要一個嗎？

已發表: 2020-01-18

當您考慮典型網站的佈局時，您很有可能在主要內容區域的右側或左側包含一列重要鏈接或信息。這個元素被稱為“側邊欄”，在網絡上非常流行。但是，要使您的功能有效，了解此功能的工作原理至關重要。

並非所有網站都需要側邊欄，有些設計沒有側邊欄會好得多。考慮到這一點，我們將深入探討此功能的目的、應考慮使用哪些類型的網站，以及它如何影響當前的“移動優先”格局。

讓我們開始吧！

訂閱我們的 YouTube 頻道

什麼是側邊欄（為什麼有一個有用）？

簡而言之，側邊欄是放置在網頁主要內容區域右側或左側的一列。它們通常用於為用戶顯示各種類型的補充信息，例如：

網絡上十個最受歡迎的網站中有八個使用某種形狀或形式的側邊欄。維基百科用作導航菜單：

維基百科的側邊欄。

另一方面，Reddit 分享創收廣告以及相關帖子和升級帳戶的選項：

Reddit 側邊欄。

雖然我們之前討論的用途是網站使用側邊欄的一些最常見的方式，但它們有時也用於作者簡介、會員免責聲明和各種其他目的：

包含附屬披露的側邊欄。

將側邊欄納入網站設計的主要優勢在於，當用戶瀏覽您的網站時，它仍然可見。這使您能夠隨時提供關鍵信息和功能。

這就是為什麼側邊欄通常包含號召性用語 (CTA) 元素，例如電子郵件訂閱表單和廣告。導航功能在這裡也很有效，因為它們很容易找到，並且諸如附屬披露聲明之類的合法內容不太可能在隨機播放中丟失。

您可以在幾乎任何類型的網站上包含側邊欄。但是，它們在用戶可以從額外指導中受益的幾種不同情況下特別有用。這裡有兩個我們覺得值得一提的。

博客、新聞網站、在線雜誌和其他內容豐富的網站包含一個相當廣泛的類別。然而，他們都有一個共同點，那就是他們一直通過發表更多的文章來生存。

您擁有的內容越多，瀏覽您的網站就越複雜。在這種情況下，您可以將側邊欄用於：

側邊欄可以幫助用戶找到他們可能會錯過的參與機會，鼓勵訂閱並因此返回訪問者，並改進導航以讓讀者在您的網站上停留更長時間。所有這些結果都有益於您的網站，並可以增加您從中產生的任何收入。

網站並不比在線商店複雜得多。您的電子商務網站提供的產品越多，它將包含的頁面就越多。這使得側邊欄對於包含以下元素更有用：

電子商務網站設計的一個常見問題是涉及很多混亂。如果您快速瀏覽一下 Amazon 或 eBay，您會立即註意到我們的意思：

雜亂頁面的示例。

歡迎任何可以幫助您組織混亂並使您的頁面更加用戶友好的元素，側邊欄當然適合該法案。

儘管它們在歷史上很有用，但側邊欄最近還是受到了抨擊。反對它們的最有力論據是它們不能很好地轉化為移動設備。由於智能手機和平板電腦的屏幕空間有限，將超過三分之一的頁面用於次要內容是不切實際的。

相反，在較小的設備上，此信息通常移動到頁面底部，在那裡不太可能被找到。考慮到移動流量現在佔全球互聯網使用量的 51% 以上，這是網頁設計的一個重要問題。

作為回應，一些網站選擇根本不使用側邊欄。雖然這是有道理的，但這也意味著這些站點無法利用這種佈局提供的好處。如果您經營內容豐富的博客或電子商務商店，這可能會成為一個真正的問題。

處理此問題的一種選擇是在移動設備上隱藏側邊欄。這將使桌面用戶能夠查看您的次要內容，同時保持您的網站在智能手機和平板電腦上可讀。

另一種解決方案是在較小的設備上僅隱藏您的一些補充內容。例如，如果您的標題中有社交按鈕，您可以將它們從移動側邊欄中刪除以避免重複。

或者，您可以為您的移動網站使用可折疊的側邊欄。然後用戶可以根據需要選擇查看或隱藏它：

亞馬遜移動網站上的可折疊側邊欄。

最後，總有一個選項可以讓你的側邊欄保持完整併使其響應，以便它縮小以適應較小的屏幕。哪種路線最適合您的網站取決於側邊欄包含的內容類型以及整個網站的目標。

雖然您希望您的主要內容成為焦點，但您網站的用戶還需要很多其他信息。通過側邊欄，您可以在整個頁面中顯示關鍵元素，例如指向關鍵區域的鏈接、電子郵件註冊表單等。

在移動優先瀏覽方面，側邊欄可能有其缺點，但它們不會很快消失。相反，我們必須重新想像我們處理他們設計的方式。但是，使用正確的工具，您應該能夠迎接挑戰。

您對如何充分利用側邊欄有任何疑問嗎？ 將它們留在下面的評論部分！

文章縮略圖由 Kreetha Mahamud 先生/shutterstock.com 提供