网页设计 & 灵感 » UI设计之Sidebar(侧边栏)设计灵感

UI设计之Sidebar(侧边栏)设计灵感

发表于: 网页设计 & 灵感. 评论
赞助商链接

现在网页设计流行兼容手机端,一些导航或其它小元素都喜欢用侧边栏的方式展示。侧边栏就这么点大小,那么如何设计才更美观且用户体验更好呢?

今天设计达人网小编为大家整理一系列设计美观的侧边栏UI设计作品,风格多样,如果你不知道怎样制作,请看看这些精选,也许能给你带来创造灵感哦,Enjoy!

扩展阅读:25个适用于手机网站的菜单插件

VŌID — Product Page

一个时尚的产品展示模块,排版以居中为,多组留白来区域元素,不同的字体层级,看起来简约漂亮。

设计:Mykolas Puodžiūnas

Dribbble Chat Client

聊天应用人侧边设计

设计:Dmitriy Kharaberyush

Instagram Web App

多级菜单的设计,这样设计很简洁,但如果有三级会怎样呢?所以估计这个界面因定最多为二级菜单。

设计:Dmitriy Kharaberyush

Web Wardrobe

整体设计效果很简洁,学习。

设计:Eugene Ledenyov

Music App Sidebar

带透明感的侧边栏。

设计: Eike Drescher

Internal Tools — Iteration 2

admin 管理后台界面侧栏设计。

设计:Dwinawan Hariwijaya

Dashboard — Form

设计:Dwinawan Hariwijaya 

Gmail Retake

侬个侧栏功能还插多的。

设计:Gript Team

Home desktop + mobile

桌面与手机端的效果

设计:Chris Braniff

Timesheets Screen

重点以单个以图标形式展示,那这些 ICON 的可识别度必须加强。

设计: Adrian Goia

Shop masonry grid

设计:Chris Braniff

Product page

只想说很简约。

设计:Chris Braniff

Add trade page

也是单图标展示,但这个看起来更简单。

设计:Kálmán Magyari

Email Funnel

比较常见的方式:图标+字体,

设计:Gript

Integrations screen [v2]

也是图标+字体,默认状态下,左图标是颜色比方字要浅一些。

设计:Adrian Goia

Wireframe Builder (WIP)

设计:Vincent Tantardini

Stand Up

设计:Jeff Lupinski

Home page

Sidebar Animations

能让用户快速阅读的侧栏文章列表。

设计:Mike Davis

Bar Chart

设计:The Purple Bunny

Scrimbox App

导航菜单之间增加了一个标题,这样的可以为太长的菜单分级,易于识别。

设计:Abhinav

Dashboard UI

设计:Abhijeet ~ Sokratus

Top & Sibebar (WIP)

第一组是有图标,第二组的菜单没图标?

设计:Max

Music Web

设计:ALEX BENDER

NucleoApp Sneak Peek

设计:Sebastiano Guerriero

Que Chat — Green Sidebar

设计:Tintins

整理自:medium

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,欢迎转载。