时间：2022-09-24 06:17:16 | 浏览：669
以下规范数值仅为参考，具体请根据自身产品灵活运用。
目前 PC 端用户屏幕分辨率主要为：1920*1080、1600*900、1440*900、1366*768、1280*720等。那么我们的原型设计稿应该参考哪个尺寸设计呢？
这需要我们根据具体情况分析：
当然，对应的适配规则需要灵活处理，如表格在高分辨率增加显示的字段数或者卡片增加每行显示的列数。
栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 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/
顶部栏高度建议为 48+8n，侧边栏宽度 200+8n。个人常用尺寸如下：
页面元件间的边距以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。
表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。
表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。
表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。
列内容的长度固定时，列宽应大于固定宽度，如时间；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述）。
表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
文本左对齐、数据右对齐、金额保留相同小数对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。
表格内部数据的详情入口，将能点击下钻查看详情的内容以蓝色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。
本文由@艾斯的Axure峡谷 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议