Axure实战规范分享：后台web网站

编辑导读：后台web网站是互联网人工作中经常会用到的，本文作者分享如何用Axure做后台web网站，一起来看一下吧。

以下规范数值仅为参考，具体请根据自身产品灵活运用。

一、框架尺寸设计

目前 PC 端用户屏幕分辨率主要为：1920*1080、1600*900、1440*900、1366*768、1280*720等。那么我们的原型设计稿应该参考哪个尺寸设计呢？

这需要我们根据具体情况分析：

• 如果我们设计的原型主要是发给客户和领导看，那么按用户和领导的电脑分辨率设计即可。
• 如果我们设计的原型主要是自己查看，或者用自己的电脑演示给客户和领导看，那么按自己的电脑分辨率设计。
• 上面提到都是按照固定的尺寸设计原型，还有一种方法是使用 Windows.width 和 Windows.height 函数自适应不同屏幕尺寸，高度自适应，宽度按最小的适配尺寸1366设计界面，让界面元件尺寸自适应不同屏幕铺满或者拉伸宽度尺寸。

当然，对应的适配规则需要灵活处理，如表格在高分辨率增加显示的字段数或者卡片增加每行显示的列数。

二、页面信息组件尺寸

1. 栅格布局

栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。

需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。

谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。

详细可参考蚂蚁金服：https://ant.design/components/grid-cn/

2. 信息组件尺寸

顶部栏高度建议为 48+8n，侧边栏宽度 200+8n。个人常用尺寸如下：

• 顶部栏高度 64px
• 侧边栏宽度 200px，收缩状态宽度 56px
• 右侧内容尺寸为1126px（即1366px设计稿 – 200px侧导航 – 40px：内容左右两边20的间距）
• 搜索输入框尺寸：160px*32px，表单输入框：320px*32px。
• 按钮：80px*32px或者64px*32px
• 图标：小图标16px*16px

三、组件间距

页面元件间的边距以4的倍数：4、8、12、16、20、24、28、32等。

如：图标与对应文案间距为4px、表单上下两个输入框间距为20px。

四、按钮

常用按钮可分为填充按钮、线性按钮、文字按钮。交互状态包括默认、悬停、点击和不可用。

按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。

规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。

填充按钮之间间距最小为 10px。

五、字体

后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；

后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。注意：Axure中最小字体建议为12px，由于谷歌浏览器预览设置问题，小号字体会被强制变大。

行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。

六、表格

表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。

1. 行高

表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。

2. 行数

表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。

3. 列宽

列内容的长度固定时，列宽应大于固定宽度，如时间；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述）。

4. 列数

表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

5. 对齐方式

文本左对齐、数据右对齐、金额保留相同小数对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。

6. 详情入口

表格内部数据的详情入口，将能点击下钻查看详情的内容以蓝色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。

 

本文由@艾斯的Axure峡谷 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议