编辑导读:后端网站是互联网人在工作中经常用到的。本文作者分享了如何使用Axure作为后端网站，我们来看看吧。
以下规格值仅供参考，请根据自己的产品灵活使用。
一、框架尺寸设计目前PC用户的屏幕分辨率有1920*1080、1600*900、1440*900、1366*768、1280*720等。那么我们的原型设计稿应该参考哪个尺寸的设计呢？
这就需要我们根据具体情况来分析:
如果我们设计的原型主要是发给客户和领导看，那么按用户和领导的电脑分辨率设计即可。如果我们设计的原型主要是自己查看，或者用自己的电脑演示给客户和领导看，那么按自己的电脑分辨率设计。上面提到都是按照固定的尺寸设计原型，还有一种方法是使用Windows.width和Windows.height函数自适应不同屏幕尺寸，高度自适应，宽度按最小的适配尺寸1366设计界面，让界面元件尺寸自适应不同屏幕铺满或者拉伸宽度尺寸。当然，相应的适配规则需要灵活处理，比如增加表格中高分辨率显示的字段数，或者增加卡片中每行显示的列数。
二、页面信息组件尺寸1. 栅格布局网格系统用于解决适应性和响应性问题，从而更好地进行产品设计和产品开发。响应式网格由24列网格系统实现，以满足2、3、4、5、6分布等各种情况。固定宽度列，动态缩放间隔装订线。
要栅格化的内容的总宽度=23列(1列=1宽度列+1间距装订线)+1宽度列=24宽度列+23间距装订线。
Google规定模块和结构以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系统，中文微软雅黑，英文Arial；Mac字体，中文方平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. 详情入口在内部数据的明细条目中，可以点击下钻查看明细的内容用蓝色表示，在表行最后一列的操作按钮部分放置了一个查看按钮。
[div][div]
本文原由@ ace的Axure Canyon发表在《蜘蛛智慧链》上。未经允许禁止转载。
图片来自Unsplash，基于CC0协议。
