設(shè)計(jì)：Tintins

整理自：medium

文章來(lái)源：設(shè)計(jì)達(dá)人

現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)流行兼容手機(jī)端，一些導(dǎo)航或其它小元素都喜歡用側(cè)邊欄的方式展示。側(cè)邊欄就這么點(diǎn)大小，那么如何設(shè)計(jì)才更美觀且用戶體驗(yàn)更好呢？

今天設(shè)計(jì)達(dá)人網(wǎng)小編為大家整理一系列設(shè)計(jì)美觀的側(cè)邊欄UI設(shè)計(jì)作品，風(fēng)格多樣，如果你不知道怎樣制作，請(qǐng)看看這些精選，也許能給你帶來(lái)創(chuàng)造靈感哦，Enjoy!

VōID?—?Product Page

一個(gè)時(shí)尚的產(chǎn)品展示模塊，排版以居中為，多組留白來(lái)區(qū)域元素，不同的字體層級(jí)，看起來(lái)簡(jiǎn)約漂亮。

設(shè)計(jì)：Mykolas Puod?iūnas

Dribbble Chat Client

聊天應(yīng)用人側(cè)邊設(shè)計(jì)

設(shè)計(jì)：Dmitriy Kharaberyush

Instagram Web App

多級(jí)菜單的設(shè)計(jì)，這樣設(shè)計(jì)很簡(jiǎn)潔，但如果有三級(jí)會(huì)怎樣呢？所以估計(jì)這個(gè)界面因定最多為二級(jí)菜單。

設(shè)計(jì)：Dmitriy Kharaberyush

Web Wardrobe

整體設(shè)計(jì)效果很簡(jiǎn)潔，學(xué)習(xí)。

設(shè)計(jì)：Eugene Ledenyov

Music App Sidebar

帶透明感的側(cè)邊欄。

設(shè)計(jì)： Eike Drescher

Internal Tools?—?Iteration 2

admin 管理后臺(tái)界面?zhèn)葯谠O(shè)計(jì)。

設(shè)計(jì)：Dwinawan Hariwijaya

Dashboard?—?Form

設(shè)計(jì)：Dwinawan Hariwijaya 

Gmail Retake

儂個(gè)側(cè)欄功能還插多的。

設(shè)計(jì)：Gript Team

Home Desktop + Mobile

桌面與手機(jī)端的效果

設(shè)計(jì)：Chris Braniff

Timesheets Screen

重點(diǎn)以單個(gè)以圖標(biāo)形式展示，那這些 ICON 的可識(shí)別度必須加強(qiáng)。

設(shè)計(jì)： Adrian Goia

Shop Masonry Grid

設(shè)計(jì)：Chris Braniff

Product Page

只想說(shuō)很簡(jiǎn)約。

設(shè)計(jì)：Chris Braniff

Add Trade Page

也是單圖標(biāo)展示，但這個(gè)看起來(lái)更簡(jiǎn)單。

設(shè)計(jì)：Kálmán Magyari

Email Funnel

比較常見(jiàn)的方式：圖標(biāo)+字體，

設(shè)計(jì)：Gript

Integrations Screen [V2]

也是圖標(biāo)+字體，默認(rèn)狀態(tài)下，左圖標(biāo)是顏色比方字要淺一些。

設(shè)計(jì)：Adrian Goia

Wireframe Builder (WIP)

設(shè)計(jì)：Vincent Tantardini

Stand Up

設(shè)計(jì)：Jeff Lupinski

Home Page

Sidebar Animations

能讓用戶快速閱讀的側(cè)欄文章列表。

設(shè)計(jì)：Mike Davis

Bar Chart

設(shè)計(jì)：The Purple Bunny

Scrimbox App

導(dǎo)航菜單之間增加了一個(gè)標(biāo)題，這樣的可以為太長(zhǎng)的菜單分級(jí)，易于識(shí)別。

設(shè)計(jì)：Abhinav

Dashboard UI

設(shè)計(jì)：Abhijeet ~ Sokratus

Top & Sibebar (WIP)

第一組是有圖標(biāo)，第二組的菜單沒(méi)圖標(biāo)？

設(shè)計(jì)：Max

Music Web

設(shè)計(jì)：ALEX BENDER

NucleoApp Sneak Peek

設(shè)計(jì)：Sebastiano Guerriero

Que Chat?—?Green Sidebar

QQ群:387264038