Axure RP 设计规范
设计规范的作用
在很多产品经理和 Axure 的文章中都不太被重视或提及，实际上它非常重要。制定设计规范 ≠ 高保真，也不代表低效率和重视界面设计，它有以下几个重要作用：
| 作用 | 说明 |
|---|---|
| 提升效率 | 减少产品设计过程中对元件位置摆放和尺寸大小的记忆与思考，有了设计规范，这些操作都事半功倍 |
| 提高可读性 | 极大提高整个原型文档的可阅读性，向开发团队传递统一的产品设计理念，便于理解 |
| 突出重点 | 将界面元素重点和逻辑重点凸显出来，不仅不会干扰 UI 设计，还能帮助 UI 设计师正确理解你重视的要素 |
| 团队协同 | 帮助产品团队高效协同，多人参与时保持高度的表达一致性，便于开发团队和 UI 设计理解 |
💡经验之谈
在缺乏经验的时候，就把设计规范带入产品原型设计，这是一个很好的开始。这个过程你一定会走一些弯路，因为你无法准确预见到一定会用到哪些元件，但不要气馁。
网格和格栅
在开始做产品设计之前，需要先定义产品适用的设备，了解产品的基本尺寸比例，然后据此设置好格栅和网格。这样就能将界面中的各要素按照既定规则摆放，呈现整洁、美观的效果，减少临时调整，也为做出高质量的高保真原型打下坚实基础。
例一：手机端（iPhone 12 Pro）
| 参数 | 设置 |
|---|---|
| 尺寸比例 | 390px × 844px |
| 网格 | 15px = 390 / 26，用作元件尺寸和间距的最小单位 |
| 无间距格栅 | 30px × 12；边距各 15px |
格栅效果：
根据格栅设计的示例（尺寸、间距都与网格和格栅定义一致）：
例二：Web 端（1920 × 1080）
| 参数 | 设置 |
|---|---|
| 尺寸比例 | 1920px × 1080px |
| 网格 | 24px = 1920 / 80，用作元件尺寸和间距最小单位 |
| 有间距格栅 | （格栅 48px + 间距 24px）× 26；边距各 24px |
格栅效果：
根据格栅设计的示例：
⚠️注意
- Axure 中只能使用 px 作为度量单位
- 红线为全局辅助线，背景的方格即为网格
- 格栅有很多种设计方法，主要是 UI 设计时应用，做原型一般只用概略格栅即可，目的是规范产品设计
- 本图仅为一个网格设置的示例，请根据实际需要去设计格栅和网格
颜色
我们经常见到一些草图上只有灰黑白三个色，实际在表达原型时，需要更多的颜色以突出或表达不同元件的可用性、操作性、重要性。
💡建议
以上只是一个例子，可以查阅设计资料，建立自己喜欢或适用于项目的颜色规范。常用的元件可以设置到自己的元件库中，无需重复设计样式。
元件尺寸与文字
元件尺寸
元件尺寸与网格和格栅有直接关系，元件的尺寸最好是网格的倍数关系，但不一定是整数倍。
文字规范
- 大部分基础元件可以直接在元件中输入文字——选中元件双击或敲回车即可
- 元件的文字最小字号只能用 12，即使选择更小的字号，预览时也会被还原到 12
- 因此元件尺寸不能太小，否则文字显示会受到很大的限制
📌小结
我们不需要过多地去考虑这个问题，因为原型不是设计图，表达正确的意图即可。了解以上三个基本点后，就可以开始准备原型的设计规范了。为了让设计规范有序制定并有效利用，还需要了解元件库的创建与母版的创建，以及它们的应用。