专业游戏门户,分享手游网游单机游戏百科知识攻略!

嗨游网
嗨游网

UI设计之Sidebar(侧边栏)设计欣赏

来源:小嗨整编  作者:小嗨  发布时间:2023-09-07 04:47
摘要:现在网页设计流行兼容手机端,一些导航或其它小元素都喜欢用侧边栏的方式展示。侧边栏就这么点大小,那么如何设计才更美观且用户体验更好呢?今天设计达人网小编为大家整理一系列设计美观的侧边栏UI设计作品,风格多样,如果你不知道怎样制作,请看看这些精...

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

UI设计之Sidebar(侧边栏)设计欣赏

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

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 PageSidebar 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

文章来源:设计达人


本文地址:软件教程频道 https://www.eeeoo.cn/ruanjian/1053531.html,嗨游网一个专业手游免费下载攻略知识分享平台,本站部分内容来自网络分享,不对内容负责,如有涉及到您的权益,请联系我们删除,谢谢!


软件教程
小编:小嗨整编
相关文章相关阅读
  • 设计教程资源网(设计教程网站有哪些)?

    设计教程资源网(设计教程网站有哪些)?

    设计教程资源网(设计教程网站有哪些)?随着互联网的快速发展,设计行业也日益繁荣。越来越多的设计师和设计爱好者希望在网上找到优质的设计教程资源,以提高自己的设计水平。本文将为您介绍一些国内优秀的设计教程资源网站,助您在设计道路上更进一步。设计...

  • 机械设计软件有哪些软件(机械设计软件哪个好)?

    机械设计软件有哪些软件(机械设计软件哪个好)?

    机械设计软件有哪些软件(机械设计软件哪个好)?机械设计常用的三大软件分别是CAD、SW、UG,下面带来十款好用的机械设计软件。机械设计软件推荐一、SolidWorksSolidWorks软件是世界上第一个基于Windows开发的三维CAD系...

  • 建筑设计软件有哪些软件(建筑设计软件哪个好用)?

    建筑设计软件有哪些软件(建筑设计软件哪个好用)?

    建筑设计软件有哪些软件(建筑设计软件哪个好用)?在建筑效果图制作过程中,为了追求精细化和高效率,设计师们通常会使用多种软件协同作业。本文将介绍六款好用的建筑设计软件。每款软件都有自己的擅长之处。结合各自优势来完成效果图中不同环节的制作。第一...

  • 包装设计软件免费版(包装设计软件哪个好用)?

    包装设计软件免费版(包装设计软件哪个好用)?

    包装设计软件免费版(包装设计软件哪个好用)?小白如何一键做包装设计?下面给大家介绍一款非常好用的包装设计工具——ArtiosCAD,简单易上手!ArtiosCAD是用于设计包装的全球最流行的结构设计软件。 ArtiosCAD拥有专为包装设计...

  • 三维设计软件有哪些(三维设计软件哪个好用)?

    三维设计软件有哪些(三维设计软件哪个好用)?

    三维设计软件有哪些(三维设计软件哪个好用)?三维设计软件种类繁多,功能各异,很难说谁家最强,这取决于具体的使用场景和需求。以下是一些比较受欢迎的三维设计软件:一、SolidWorksSolidWorks是一款非常受欢迎的三维CAD软件,广泛...

  • 我的世界房子设计图教程(我的世界房子设计图简单漂亮)

    我的世界房子设计图教程(我的世界房子设计图简单漂亮)

    我的世界房子设计图教程(我的世界房子设计图简单漂亮)玩过MC我的世界的朋友都知道,搭建属于一个自己的生存小屋是必不可少的,如果你还只是停留在挖个地洞带个床的阶段,不妨看看这篇文章,这篇文章将教会你如何搭建一个简单实用的生存小屋!第一步,先打...

  • 平面设计用什么软件好(平面设计5大软件)?

    平面设计用什么软件好(平面设计5大软件)?

    平面设计用什么软件好(平面设计5大软件)?下面推荐五款备受好评的平面广告设计软件,易于使用!1.即时设计即时设计是国内一款UI设计工具,像PC端的网页,移动端的App、小程序页面,都可以通过即时设计高效完成。现在,也有越来越多的设计师,用即...

  • pcb设计软件有哪些(pcb设计软件哪个好)?

    pcb设计软件有哪些(pcb设计软件哪个好)?

    pcb设计软件有哪些(pcb设计软件哪个好)?随着电子科技的迅速发展,印刷电路板(PCB)设计成为电子设备制造的至关重要的环节。高效且精确的PCB设计软件能够有效帮助工程师进行电路设计、布局布线及优化分析等工作。以下介绍一些目前市场上广受欢...

  • 周排行
  • 月排行
  • 年排行

精彩推荐