UI设计教程——侧边栏导航&分页

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

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

2.3 绘制首末分页

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

2.4 绘制跳转分页

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

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