导航栏前端代码（设计语言-侧边导航栏）

2.2 绘制普通分页

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

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

2.3 绘制首末分页

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

2.4 绘制跳转分页

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

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

3.1 了解步骤条

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

3.2 绘制步骤条

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

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

谢谢阅读

感谢支持

喜欢的话多多关注噢~~