幾何

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

 

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

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

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

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

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

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

 

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

1.Anthony j rayburn

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

2.Dollyave

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

 

3. Grace chuang

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

 

4. Kate vass galerie

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

5. Nice cream

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

6. Jasminestar

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

7. Quinntonharris

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

 

8. Mike kelley

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

9. The idle man

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

 

10. Love billy

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

 

11. Sophie kahn

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

 

12. Deanie chen

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

 

13. The life church today

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

 

14. Mathieu stern

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

 

15. Charliewaite

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

 

16. Niche pod

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

 

17. Cccog

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

 

18. Dylan perlot

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

 

19. Thomas defert

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

 

20. Goltz group

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

 

更多網站側邊欄設計

21. Intechnic

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

 

22. Wiggs photo

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

 

23. Pedron the world

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

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

 

24. Gresham smith

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

 

25. Rose datoc dall

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

 

26. Paul David

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

 

27. Cookie and kate

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

 

28. Austin kleon

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

 

29. Pascal van gemer

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

 

30. Elizabethy lin

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

 

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

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

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

點擊獲取源文件,導入mockplus可自定義設計。

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

 

原文地址:UI中國

作者:摹客Mockplus

 

轉載請注明:學UI網 » 超好看的30款網站側邊欄設計

登錄收藏
 
你可能喜歡的:
UI設計適合女生學嗎?會不會很難?UI設計適合女生學嗎?會不會很難?
Apple 的設計哲學 · 網頁篇Apple 的設計哲學 · 網頁篇
中臺系統基礎知識- 文字規范系統中臺系統基礎知識- 文字規范系統
8個大膽的賽博朋克網頁設計案例8個大膽的賽博朋克網頁設計案例
產品體驗日記 01 期丨發現優秀的設計產品體驗日記 01 期丨發現優秀的設計
B端和C端產品設計有哪些差異?B端和C端產品設計有哪些差異?
讓你靈感爆表的創意進度條設計讓你靈感爆表的創意進度條設計
【UI/UX案例分析】設計提升轉化,看高手如何重設計網頁【UI/UX案例分析】設計提升轉化,看高手如何重設計網頁
UI設計、交互設計、UI交互設計的聯系和區別是什么?UI設計、交互設計、UI交互設計的聯系和區別是什么?
疫情退散—聯合創作特刊疫情退散—聯合創作特刊
?
类似钱咖的高额赚钱 广东36选7历史开奖 辉煌棋牌下载送28 …? 北京快3基本走势图 大赢家比分篮球即时比分 天天彩选4基本走势图 下载南京麻将四个人打 山西11选5开奖结果手机版 刘伯温开奖结果王中王 十大棋牌游戏排行榜 掌心福州麻将官网安卓