侧边栏是一种比较经典的导航设计，它的形式通常为竖向的一列，展示在网站或者 APP 的右侧或者左侧，具体的位置当然是取决于整体的设计。

但一般来讲，由于视觉习惯和用户行为，侧边栏位于左侧更容易第一时间吸引用户注意力，因而也能很高效地给用户提供导航；而右侧的侧边栏则常被看做是二级导航，因而可以丰富网站的结构层次。

1. 下拉菜单

1.1 了解侧边导航栏

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

设计师的对设计的理解和审美决定了周围要留多少的空白。

1.2 绘制矩形框

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

1.3 文本行高

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

1.4 层级划分

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

1.5 确定距离

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

来看一下最终效果吧。

2. 分页

2.1 了解分页

侧边导航的讲完后来讲讲分页，分页有三种样式：普通分页、首末分页、跳转分页，名字是随便起的，能理解什么意思就行了，来让我们了解一下它的样式。

2.2 绘制普通分页

接下来我们学着画一下它。我把所有的分页分为三种尺寸（大中小），分别是 32px（小）、36（中）、40（大），每一个小按钮的曲率分别是 4px（小）、6px（中）、8px（大）。每个小按钮之间的间隔我用的是 4px，也可以用 8px，4px 虽然更容易误触，但视觉效果要比 8px 好很多。

当然了以上数值也不是绝对的。尺寸、曲率和间隔都是需要根据项目需求与设计师自身审美来决定的。

2.3 绘制首末分页

首末分页就是在普通分页的基础上加两个按钮，分别是“跳转到首页”和“跳转到末页”。只要注意把“数字按钮（分页）”与跳转首末页按钮”按优先级分隔就可以了，要把控好这首末按钮与数字按钮之间的距离，距离过短容易误触，距离过长会破坏整体性。

 

绘制首末分页

2.4 绘制跳转分页

跳转分页是在首末分页的基础上加上“总页数”与“跳转至指定页数”这两个功能。跳转分页前端显示总页数，后端显示跳转至指定页数。所有按钮模块的间隔都成倍递减，这样不同分页的功能，区分就会更明显一些，而且它们之间也有隐性的关联。

将分页组件与其他组件组合起来看一下最终效果。图片压缩效果不是很好，要与实际效果（原始比例）差很多。

3. 步骤条

3.1 了解步骤

步骤条相对比较简单，这里穿插一下讲了吧。步骤条的样式比较多，但他们的绘制方法都大同小异，我只单拿出一个来讲，就不一一的进行讲解了。

绘制步骤条

步骤条其实不难绘制的，注意对象和元素之间的距离就可以了。留的距离也要讲究一些，要匀称不能出现左面留太多而右面留太少的情况，具有关联性的部分距离差异不能太大。另外就要考虑视觉平衡性的问题，不能一味的采用水平或垂直居中。只要熟练把控好距离，知道什么需求下留多少的白，那绘制不同样式的步骤条，也会显得游刃有余，做出的东西也更自然舒服体验也更好。

做设计要精益求精，把每一个像素点都要考虑到并合理运用它们。