认识达内从这里开始

认真做教育专心促就业

南昌达内培训导航栏设计用法与注意事项

发布：南昌达内IT培训
来源：互联网
时间：2022-06-20 11:32

导航栏设计在许多网页设计和app软件设计中都是会经常出现的一个设计功能，今天我们就通过案例分析来了解一下，导航栏设计用法与注意事项。

南昌达内培训导航栏设计用法与注意事项

1、了解侧边导航栏

侧边导航栏就是固定在侧边或从侧边划出的导航栏，一般应用在企业网站的触发型导航栏上，或后台页面/系统的左侧功能性导航栏上。侧边导航栏的方向是根据业务需求来做调整的，方向在那边就往哪边对齐。我们先了解一下侧边导航栏的样式。

2、绘制矩形框

矩形框的高度可以随着屏幕高度的变化而变化，所以不需要考虑。那只定义矩形框的宽度就行了，宽度分别是：小(240px)、中(280px)、大(280px)。当我们决定采用哪种尺寸后，就要定义矩形框与内容之间的距离了。下图所示的例子是以中等尺寸来做参考的。

3、文本行高

当我们绘制好矩形框，就要往里填内容了。文本行高上一章已经讲过了，就不多说了。文字的行高是由鼠标状态(Hover)的高度来确定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，侧边导航栏的文本左右多留一下白，不能使导航栏看上去太紧凑，给人感觉太压抑，就会显得不是很美观了。

4、层级划分

因为侧边导航栏中有树形结构，一个主级别可以分散为多个子级别，所以就需要划分一下层级。划分层级的方法也有很多，可以改变字号、改变颜色、改变字形、改变距离，那我用的方法是改变距离。采用哪种方法还是要看具体需求，像那种需要想突出层级且对比强烈的需求，可以采用改变字号和改变字形(加粗)。

5、确定距离

当我们把矩形框绘制好，文本也填进去后，就要确定每一个层级的距离了，我们要做出1>2>3的感觉出来，细微调整每个层级的间距，使它们的差异突显出来。确定距离指的是每个层级左侧的距离，这就像楼梯一样，在上层的楼梯往往优先级是高的。层级1(收藏夹)与层级2(艺术类)之间多留了4px的空白，目的是为了突显主级别与子级别之间的差异，稍微强化了一下主级别。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。

< 上一篇：南昌达内Java培训关系型数据库数据同步都有哪些注意事项

下一篇：南昌达内IT培训Java内存模型设计与应用分析 >