常見(jiàn)的邊欄錯(cuò)誤及如何糾正

許多網(wǎng)站設(shè)計(jì)師忽略了適當(dāng)?shù)膫?cè)邊欄使用。側(cè)邊欄通常會(huì)比讀者知道如何處理更多令人分心的功能和內(nèi)容，這可能導(dǎo)致他們離開(kāi)頁(yè)面。即使讀者由于過(guò)于擁擠或不適當(dāng)?shù)膫?cè)邊欄設(shè)計(jì)而沒(méi)有離開(kāi)頁(yè)面，他或她也會(huì)忽略側(cè)邊欄。忽略側(cè)邊欄，您的讀者可能會(huì)錯(cuò)過(guò)與所有無(wú)用元素混合的重要信息。

邊欄放置

在您決定側(cè)邊欄的任何其他內(nèi)容之前，您應(yīng)該首先考慮它的位置以及與網(wǎng)站其他元素的集成。畢竟，真空中沒(méi)有任何東西存在，并且考慮不周的側(cè)邊欄可能會(huì)使整個(gè)網(wǎng)站設(shè)計(jì)失效。

您的第一個(gè)決定是是否有左右對(duì)齊的側(cè)邊欄。此決定受到您打算在側(cè)邊欄中包含的內(nèi)容及其相對(duì)重要性的影響。如果您的主要導(dǎo)航位于側(cè)邊欄中，則左側(cè)邊欄非常有用。因?yàn)樽x者更重視頁(yè)面左側(cè)的內(nèi)容，所以左側(cè)邊欄比內(nèi)容更重要。

正如您在示例中所看到的，使用左側(cè)邊欄，導(dǎo)航菜單不在頁(yè)面頂部。左側(cè)邊欄取代了它的位置。

與左側(cè)邊欄相關(guān)的主要問(wèn)題是它們是非典型的。讀者希望側(cè)邊欄位于右側(cè)，菜單位于頁(yè)面頂部。雖然與意圖和優(yōu)雅的期望相?？赡苁怯杏玫模瑐?cè)邊欄必須是非常高的質(zhì)量。如果不是，而不是表現(xiàn)出創(chuàng)新，你看起來(lái)就像你不了解基本的設(shè)計(jì)原則。

右側(cè)邊欄是最常見(jiàn)的。側(cè)邊欄對(duì)內(nèi)容非常重要，位于那里的信息很有用，但并不重要。廣告通常位于右側(cè)邊欄中。

一些網(wǎng)站設(shè)計(jì)師將菜單放在右側(cè)邊欄中。雖然這是一個(gè)大膽的設(shè)計(jì)選擇，但這可能會(huì)使讀者感到困惑，他們希望菜單至關(guān)重要。

使用兩個(gè)側(cè)邊欄時(shí)，牢記讀取層次結(jié)構(gòu)非常重要。菜單不應(yīng)位于右側(cè)欄中，廣告不應(yīng)位于左側(cè)欄中。確保您的重要內(nèi)容留下。當(dāng)您有一個(gè)頂級(jí)菜單時(shí)，最好只使用一個(gè)側(cè)邊欄。

側(cè)邊欄和滾動(dòng)

設(shè)計(jì)側(cè)邊欄時(shí)請(qǐng)記住滾動(dòng)類型。使用傳統(tǒng)的滾動(dòng)樣式，所有類型的側(cè)邊欄都是合適的，盡管使左側(cè)邊欄固定內(nèi)容可能效果最佳。使用傳統(tǒng)滾動(dòng)的網(wǎng)站的關(guān)鍵考慮因素是確保您的側(cè)邊欄，特別是右側(cè)邊欄，永遠(yuǎn)不會(huì)超過(guò)您的內(nèi)容。永遠(yuǎn)不要讓您的讀者無(wú)休止地向下滾動(dòng)以獲取輔助內(nèi)容。

水平滾動(dòng)有利于固定左側(cè)邊欄。右側(cè)邊欄永遠(yuǎn)不應(yīng)該與這種風(fēng)格一起使用，因?yàn)闆](méi)有讀者在頁(yè)面上滾動(dòng)之后想要遇到意外的側(cè)邊欄，固定的右側(cè)邊欄將同樣令人困惑和惱人。水平滾動(dòng)足以帶來(lái)挑戰(zhàn)和新奇。添加側(cè)邊欄可能會(huì)使其無(wú)法讀取。

視差滾動(dòng)有利于左側(cè)和雙側(cè)邊欄。左側(cè)邊欄應(yīng)該固定并使用此滾動(dòng)樣式保持不變。當(dāng)讀者每次滾動(dòng)時(shí)都進(jìn)入新頁(yè)面時(shí)，固定的左側(cè)邊欄可以成為錨定點(diǎn)，保持熟悉不斷變化的頁(yè)面和格式的東西。

右側(cè)邊欄經(jīng)歷了最大的變化。與視差滾動(dòng)一樣，每頁(yè)都可以引入新的側(cè)邊欄。如果您確實(shí)更改了每個(gè)頁(yè)面的右側(cè)邊欄，那么保持格式相同應(yīng)該是優(yōu)先考慮的事項(xiàng)。讀者可能會(huì)被介紹到新的內(nèi)容，但是每個(gè)頁(yè)面改變格式會(huì)使讀者和設(shè)計(jì)師都感到困難。偶爾更改側(cè)邊欄模板可能會(huì)起作用，但應(yīng)僅限于最重要的內(nèi)容更改，讓讀者知道何時(shí)添加了重要內(nèi)容而沒(méi)有額外的過(guò)度壓力。

包括什么

設(shè)計(jì)一個(gè)有用且吸引人的側(cè)邊欄需要仔細(xì)考慮每個(gè)元素的效用和位置?？紤]您的特定業(yè)務(wù)要求及其相對(duì)重要性。看看這個(gè)清單。有些項(xiàng)目很有用，但其中很多都沒(méi)有。

列表中的許多項(xiàng)目根本不屬于側(cè)欄。LOGO應(yīng)位于產(chǎn)品頁(yè)面上，鏈接和視頻也應(yīng)如此。其他一些信息可能屬于側(cè)欄，但不屬于所有側(cè)邊欄。

將這些限制在產(chǎn)品頁(yè)面的側(cè)邊欄上。如果您想詳細(xì)報(bào)價(jià)，他們應(yīng)鏈接到更大的“推薦”頁(yè)面。

社交媒體圖標(biāo)。可能有用，但應(yīng)占用最小的空間。如果您想在每個(gè)頁(yè)面上使用它們，請(qǐng)將這些圖標(biāo)放在固定的左側(cè)邊欄的底部。

其他文章。對(duì)論壇有用。使用產(chǎn)品頁(yè)面，鏈接到您網(wǎng)站上的其他產(chǎn)品也可能會(huì)有所幫助，但在這兩種情況下，審核都是關(guān)鍵。不要在側(cè)欄中放置最近和類似的帖子。確定哪個(gè)更重要，并將其他類別放在主要內(nèi)容頁(yè)面的底部。

聯(lián)系信息。您可以放在側(cè)邊欄中的最有用的信息之一。但是，它應(yīng)該僅限于電子郵件。您無(wú)需在每個(gè)頁(yè)面上放置您的電子郵件，公司地址和電話號(hào)碼。這就是“聯(lián)系我們”頁(yè)面的用途。

搜索框。另一個(gè)有用的信息。這可用于代替其他文章部分，因?yàn)樗加幂^少的空間并允許讀者選擇他或她希望看到的內(nèi)容。

請(qǐng)注意這些原則以及過(guò)度擁擠的側(cè)邊欄的危險(xiǎn)性。側(cè)邊欄中的三到五個(gè)項(xiàng)目被認(rèn)為是一個(gè)很好的數(shù)字。記住這個(gè)數(shù)字的優(yōu)先順序，你的側(cè)欄決策應(yīng)該更容易。