設計靈感|超好看的30款網站側邊欄設計

網站的佈局和導航十分重要,想要兼顧美觀簡潔的設計又要保障友好的用戶體驗,使用側邊欄導航會是一種不錯的選擇。目前,已經有大量的網站擯棄了傳統的導航模式,改為使用側邊欄導航,今天小摹精選了其中的30個作為靈感案例,一定會給你帶來啟發。


第一部分:為什麼需要網站側邊欄?

側邊欄其實就是一種比較經典的網站導航設計,它的形式通常為豎向的一列,展示在網站的右側或者左側,具體的位置當然是取決於整體的設計。

但一般來講,由於視覺習慣和用戶行為,側邊欄位於左側更容易第一時間吸引用戶注意力,因而也能很高效地給用戶提供導航;而右側的側邊欄則常被看做是二級導航,因而可以豐富網站的結構層次。但總體來講,側邊欄對網站的好處有以下:

● 放置導航菜單以快速引導訪客;

● 突出顯示關鍵信息,例如廣告、聯繫方式或最新消息;

● 刺激用戶進行點擊和瀏覽,降低跳出率,提升轉化;


第二部分:30個優秀的網站側邊欄設計


1.Anthony j rayburn

Anthony j rayburn的側邊欄位於網站右側,突出顯示了多種信息,包括logo、引導用戶的鏈接、社交按鈕和聯繫信息,使用了優雅、獨特的字體,搭配插畫風格的logo,比較精緻。

設計靈感|超好看的30款網站側邊欄設計

2.Dollyave

Dollyave 是一個展示攝影和音樂作品的在線媒體,整體設計高端大氣,使用粗文本作為側邊欄導航,與整個網站的設計融為一體。

設計靈感|超好看的30款網站側邊欄設計

3. Grace chuang

Grace chuang是一個作品集單頁網站,該網站佈局分為三大部分,左側為帶有logo和社交按鈕的側邊欄,中心是網站所有者的照片展示,右側是自我介紹。

設計靈感|超好看的30款網站側邊欄設計

4. Kate vass galerie

Kate vass galerie是一家當代在線藝術畫廊,為了幫助用戶輕鬆瀏覽藝術作品,左側的側邊欄展示了詳盡的分類。

設計靈感|超好看的30款網站側邊欄設計

5. Nice cream

Nicecream 是一家手工冰淇淋生產網站,圖文的佈局和搭配很好的凸顯了網站主題,側邊欄導航位於左側,引導用戶輕鬆訪問感興趣的內容。

設計靈感|超好看的30款網站側邊欄設計

6. Jasminestar

Jasminestar的側邊欄文本設計比較獨特,看起來像一個左旋90°的頂部導航欄,並且使用留白突出顯示,還提供了關閉按鈕,方便用戶以自己喜歡的方式瀏覽頁面。

設計靈感|超好看的30款網站側邊欄設計

7. Quinntonharris

Quinntonharris是一個非常美觀的個人網站,以大圖和文字講述網站主人的生活事蹟,側邊欄導航使用圓點,會有垂直翻頁的幻燈片的感覺。搭配攝影圖片,矩形色塊和帶有頁面序號文字,可以讓用戶始終清晰地知道自己所處的頁面位置。

設計靈感|超好看的30款網站側邊欄設計

8. Mike kelley

Mikekelley是攝影師Mike的個人網站,使用了比較常規的側邊欄,搭配高清的照片,整體看起來十分清爽。

設計靈感|超好看的30款網站側邊欄設計

9. The idle man

The idle man是一家網上商店,首屏使用了大面積的側邊欄展示最暢銷的商品和最熱門的商品,刺激用戶消費。

設計靈感|超好看的30款網站側邊欄設計

10. Love billy

Love billy也是使用粗體字作為側邊欄,既可以作為導航來指導用戶,也讓整個界面看上去很具有時尚感和個性。

設計靈感|超好看的30款網站側邊欄設計

11. Sophie kahn

Sophie kahn是數字藝術家和雕塑家Sophie Kahn創建的藝術網站,頁面採用大面積留白,顯得非常素雅,更容易體現靜態雕塑攝影的表現力。

設計靈感|超好看的30款網站側邊欄設計

12. Deanie chen

Deanie chen的側邊欄具有留白、簡單、素淨的特點,和右側輪播展示的色彩豐富的大圖形成了鮮明對比。

設計靈感|超好看的30款網站側邊欄設計

13. The life church today

The life church today是一個兒童網站,整個設計連同側邊欄都是極簡風格,但又有活潑的元素打破沉悶。

設計靈感|超好看的30款網站側邊欄設計

14. Mathieu stern

Mathieu stern是一個記錄攝影和電影的網站,它的側邊欄具有兩個層次結構,可以更好地引導用戶。

設計靈感|超好看的30款網站側邊欄設計

15. Charliewaite

Charliewaite是由設計師Charlie Waite創建的個人網站,他使用了大尺寸的側邊欄,展示了自我介紹、設計按鈕以及問候語。

設計靈感|超好看的30款網站側邊欄設計

16. Niche pod

為了讓界面更清爽,Niche pod的側邊欄是隱藏起來的,只留下一個圖標,點擊即可查看。

設計靈感|超好看的30款網站側邊欄設計

17. Cccog

Cccog的側邊欄白色字體和黑色背景形成鮮明對比,高亮度的白色文字和這種暗色系的網站設計非常搭配。

設計靈感|超好看的30款網站側邊欄設計

18. Dylan perlot

Dylan perlot展示了不計其數的時裝攝影作品,它的側邊欄在左側,多個導航下還具有下拉菜單,方便用戶更好定位。

設計靈感|超好看的30款網站側邊欄設計

19. Thomas defert

Thomas defert使用了非常詳細的側邊欄展示了該網站的藝術作品。

設計靈感|超好看的30款網站側邊欄設計

20. Goltz group

Goltzgroup的側邊欄具有少許透明的效果,緩和了和整體界面的分割。

設計靈感|超好看的30款網站側邊欄設計

更多網站側邊欄設計


21. Intechnic

Intechnic具有純文本排列的側邊欄,還有關閉選項。

設計靈感|超好看的30款網站側邊欄設計

22. Wiggs photo

Wiggs photo的側邊欄集Logo和導航於一體。

設計靈感|超好看的30款網站側邊欄設計

23. Pedron the world

Pedron the world的側邊欄不夠“側”,首頁位於頁面正中。

設計靈感|超好看的30款網站側邊欄設計

其他頁面側邊欄位於左側,如下圖:

設計靈感|超好看的30款網站側邊欄設計

24. Gresham smith

Gresham smith具有多級導航的側邊欄。

設計靈感|超好看的30款網站側邊欄設計

25. Rose datoc dall

Rose datoc dall使用了縮略圖和文本提示展示最新作品的側邊欄。

設計靈感|超好看的30款網站側邊欄設計

26. Paul David

Paul David具有非常簡潔的側邊欄,沒有過多的內容。

設計靈感|超好看的30款網站側邊欄設計

27. Cookie and kate

Cookieandkate具有佔據空間比較大的側邊欄,展示了profile,社交聯繫方希,以及最新推送。

設計靈感|超好看的30款網站側邊欄設計

28. Austin kleon

Austinkleon的左右各有一個側邊欄。

設計靈感|超好看的30款網站側邊欄設計

29. Pascal van gemer

Pascalvangemer具有比較經典的側邊欄,位於右側。

設計靈感|超好看的30款網站側邊欄設計

30. Elizabethy lin

Elizabethylin的側邊欄和整體設計融為一體,顏值很高。

設計靈感|超好看的30款網站側邊欄設計

第三部分:如何創建側邊欄?

側邊欄近來年更加流行,但要設計一個好的邊欄也並不容易,不僅有很多設計原則,還需要充分考慮網站整體的佈局和排版,甚至要考慮網站的性質。這裡推薦一個YouTube的視頻,詳細地講解了如何使用html、css和jQuery創建側邊欄側邊菜單。

https://www.youtube.com/watch?v=zPh0RbYiYGg

但如果你不會開發,也無大礙,可以使用設計工具製作,然後交付開發即可。快速呈現側邊欄設計,Mockplus會是一個不錯的選擇,它封裝了大量的組件,其中就有導航欄,直接拖拽即可快速佈局,全局查看界面設計,高效確認設計思路。這裡有一個之前做過的網站模板,其中包含了側邊欄元素:

設計靈感|超好看的30款網站側邊欄設計

此外,使用一些現成的導航模板也是一個不錯的方法,推薦這30個優秀Bootstrap導航模板,用戶訪問又快又準。


分享到:


相關文章: