一、确定字体和字号
一般中文使用“微软雅黑”字体比较通用,英文的话使用“Helvetica Neue”字体。
管理后台的默认字号可以稍微调大到14px,普通网站的默认字号为12px。有了默认字号就可以根据默认字号使用到整个网站项目中了。

在Axure中设置元件样式

二、排版规范
行高是字体的1.5倍给人的视觉舒适感最强,段落间距是字号的一倍。比如:字号=14px 行高=21px 段落间距=28px

另外在对齐方式上要注意数字格式为右对齐。
三、布局
导航和菜单
- 顶部导航(大部分系统):一级导航高度 64px,二级导航 48px。
- 顶部导航(展示类页面):一级导航高度 80px,二级导航 56px。
- 顶部导航高度的范围计算公式为:48+8n。
- 侧边导航宽度的范围计算公式:200+8n。
四、软件技巧
1.设置显示网格并调整网格的宽度
2.善用辅助线功能,设置辅助线对整个页面的排版效率大大提高

3.制作自己的元件库
部分内容参考自:Ant Design