導(dǎo)航的智慧！35個(gè)網(wǎng)頁側(cè)邊欄創(chuàng)意設(shè)計(jì)欣賞

2014/8/26 15:55:20來源：優(yōu)設(shè)網(wǎng)

想必你也曾絞盡腦汁試圖設(shè)計(jì)出更吸引人的側(cè)邊欄吧？那些沉悶無趣的側(cè)邊欄設(shè)計(jì)也曾讓你倒胃口么？那么，這篇文章應(yīng)該就是你的菜了。下面35款高大上的側(cè)邊欄設(shè)計(jì)就是為了激發(fā)你的靈感而生的！
扒案例之前，先簡單總結(jié)一下側(cè)邊欄設(shè)計(jì)的影響因素吧：

尺寸大小

色彩樣式

排版設(shè)計(jì)

位置

這個(gè)清單基本覆蓋了設(shè)計(jì)側(cè)邊欄需要考慮的主要因素。

首先，側(cè)邊欄的寬度不宜過大，最好控制在主體內(nèi)容部分寬度的三分之一到二分之一以內(nèi)。

在色彩上，側(cè)邊欄與整個(gè)頁面應(yīng)保持和諧，使用簡單的色彩，配色上不要過于突出。這聽起來似乎和設(shè)計(jì)它的初衷有所背離，但事實(shí)上這種需求和色彩并不沖突——通常好的側(cè)邊欄都是通過排版、圖片、字體等因素，適當(dāng)?shù)匚脩舻奈?，而不是使用炫目的色彩來破壞頁面的平衡?br />
再次，在這方寸之地，排版無疑也非常重要。側(cè)邊欄是用戶獲取內(nèi)容的重要途徑，它經(jīng)常被使用，但是并非用戶的目標(biāo)，它很多時(shí)候常駐與頁面?zhèn)让?，需要根?jù)用戶習(xí)慣、網(wǎng)站的設(shè)計(jì)需求和整體風(fēng)格進(jìn)行系統(tǒng)化的排版設(shè)計(jì)。

最后說說位置。側(cè)邊欄的位置無非是左邊或者右邊，擱頂上那叫導(dǎo)航欄，放底下……估計(jì)沒多少人舍得做這樣的事情。通常用戶瀏覽頁面是從左向右，所以一般放在左側(cè)會(huì)獲得更多的關(guān)注度（在阿拉伯世界應(yīng)該是正好相反的）。但是它終究是引導(dǎo)用戶獲取內(nèi)容的渠道，放在右側(cè)獲得關(guān)注度相對少點(diǎn)，但是它對于整個(gè)網(wǎng)站視覺的影響也會(huì)少點(diǎn)，讓用戶更加專注于內(nèi)容。所以，左右位置各有優(yōu)缺點(diǎn)。

側(cè)邊欄的內(nèi)容，展現(xiàn)形式也都是需要設(shè)計(jì)師考慮的。在移動(dòng)端，由于屏幕尺寸的限制，側(cè)邊欄的設(shè)計(jì)千奇百怪，這也逐漸影響了桌面端網(wǎng)頁的側(cè)邊欄設(shè)計(jì)。在接下來的35個(gè)案例中，你會(huì)看到各種各樣的側(cè)邊欄設(shè)計(jì)，但是總會(huì)有幾款是你的菜，值得你拿來做參考。

閑話少敘，案例看起來！

SMOKE & CROAK BLOG WITH VARICOLORED HANDDRAWN SIDEBARS