兰亭妙微ui设计公司分享：UI 设计有成熟的设计规范，原型图同样也需要一套自己的设计准则。
一切图形化表达的载体，制定规范最大价值就是提升信息传递效率。人是视觉动物，排版整洁的原型更容易获得关注；而杂乱无序的原型，会给阅读者直接传递出逻辑混乱的主观感受，这就是原型的 “卷面分”。
本文就来聊聊原型图的规范化怎么做。 所谓规范，就是建立一套统一执行标准，涵盖元素样式、布局排布、色彩运用等维度。 但原型不等于 UI 高保真，不需要做到像素级抠细节。绘制原型要兼顾时间成本与工作效率，产品经理的核心精力应当放在方案设计、需求文档撰写上。规范只是一套参考标尺，我们在绘制时尽量向标准靠拢即可。
手机、PC、平板、车机等不同终端产品，首要差异就是画布尺寸，绘制原型前要先确定画布基准。
375×667px（iPhone8 基准尺寸），这是原型最小首屏高度，内容过长直接向下延伸画布高度即可。
该尺寸流传广，大量 Axure 组件库基于此开发，适配性更好，也可选用其他主流手机尺寸，不作强制限制。
1440×900px。 虽然当下主流显示器分辨率为 1920×1080，但 1440 宽度可以实现 “原型画布 + 需求说明” 在同一屏幕完整展示，无需左右滚动查看，评审体验更佳。
768×1024px。
根据项目是否有 UI 设计师介入，区分两套配色思路：
文字规范包含字体、字号、字重、行间距，直接决定页面信息层级。
Arial；苹方、微软雅黑显示效果更好，但如果协作方设备未安装对应字体，导出后会发生字体错乱，这点需要留意。
字号 & 字重（基于 375×667、1440×900 基准画布）
表格
| 层级 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 一级标题 | 20px | 加粗 | #000000 |
| 主标题 | 18px | 可选加粗 | #000000 |
| 次标题 | 16px | 可选加粗 | #000000 |
| 小标题 | 14px | 可选加粗 | #000000 |
| 正文 | 14px | 可选加粗 | #000000 / #333333 |
| 辅助文字 | 12‑14px | 常规 | #333333 / #555555 |
| 次级备注文字 | 10‑12px | 常规 | #555555 / #7F7F7F |
简易记忆技巧：以 14px 正文为基准；层级越高，字号 + 2、加粗、颜色加深；层级越低，字号‑2、常规字重、颜色变浅。画布尺寸放大时，字号同步上调。
原型图标追求表意，不追求精致还原：
原型中不需要真实业务图片，统一用矩形占位，标注img/ 封面 / 头像等说明文字，不使用 Axure 自带图片元件。 可以约定图片宽高比例：1:1、4:3、3:2、16:9，不强求严格执行，用于统一页面观感。
圆角在原型中权重很低，UI 阶段才会精细定义。如果要设置圆角，建议选用 2 的倍数，直角、圆角两种形式原型均可。
原型阴影非必需。如需添加，统一设置色值#000000，透明度 30%，模糊 5，保持全局统一。
对齐是版式基础，善用工具对齐功能：左对齐、右对齐、顶部对齐、底部对齐、居中对齐。
Axure 实操提示：多选元素后使用顶部工具栏对齐；以第一个选中组件作为对齐基准；不同模块先
Ctrl+G组合，再执行对齐。
重复出现的同类元素，使用水平 / 垂直平均分布，保证元素间隙完全一致，页面更加整齐。
实操提示：不同子模块需要先组合，再执行分布。
间距区分模块间、子模块间、元素内部间距。 移动端建议以5px 倍数调整间距；PC 端画布更大，以10px 倍数调整。 遵循亲密性原则：同一信息组间距小，不同信息组间距拉大；也可以配合对齐、分布工具自动生成间距，不必死记像素。
组件就是可复用的元件组合，对应设计领域的原子化设计思路。 把尺寸、颜色、文字、间距等基础规则确定后，把基础元件拼装成按钮、弹窗、表单、卡片等通用组件，搭建个人 / 团队组件库，后续绘制原型可以直接复用，保证全项目原型风格统一。
原型尽量填充贴近上线的真实业务内容，重点覆盖极值场景：数据最多、文字最长、多状态并存等边界情况。
建立规范是为了高效落地，不是僵化束缚。绘制原型时尽量向标准靠拢，长期训练形成良好习惯。一份整洁规范的原型，在面试、项目评审中，都是非常重要的加分项。
但切记不要过度拘泥规范，原型的核心使命是清晰表达产品功能逻辑，它不是 UI 高保真图。对产品新人而言，原型是基本功，但功能方案永远是第一位。
转载：人人都是产品经理
