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