兰亭妙微ui设计公司分享：12 个原型规范化方法：做好原型，不止追求好看

兰亭妙微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 设计师介入，区分两套配色思路：

1. 有 UI 参与项目：优先使用黑白灰中性色。 可以直接取用 Axure 自带色板，也可参考大厂设计系统的中性色定义，不必花费大量时间调试色彩。如果使用自定义色值，可以收藏到 Axure 色板，方便复用。

   

2. 无 UI 参与项目（大多后台管理系统）：可以适度增加功能色。 后台多为内部系统，一般基于 Ant Design、Element 等成熟组件库开发，可选用蓝色作为主色；红绿黄用作语义色，分别代表成功、警告、错误状态。

   

3. 文字规范

文字规范包含字体、字号、字重、行间距，直接决定页面信息层级。

• 字体：优先使用 Axure 默认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、常规字重、颜色变浅。画布尺寸放大时，字号同步上调。

• 行间距：原型中优先级较低，Axure 会根据字号自动适配；大段文本场景下，可手动加大行间距提升可读性。

  

4. 图标规范

原型图标追求表意，不追求精致还原：

1. 图标 + 文字组合：直接用圆形、矩形占位，不使用系统自带难看占位符，选用浅中性色。表意模糊时，直接附加文字标注（icon、扫一扫、设置等）。
2. 纯图标场景：从 iconfont、IconPark 下载 SVG 图标，粘贴进 Axure 使用。
3. 无 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 高保真图。对产品新人而言，原型是基本功，但功能方案永远是第一位。