如何设计规范的原型图？ 来看高手总结的方法！

首先需要互稿和原型图联系与区：按照常规工作流程，交互设计师最终交付物括任务流程图、信息架构图、页原型图、页交互说明、页流程图，这些都可以归纳到交互设计文档。此原型图是交互稿部分，本文将铺开阐述设计规范的原图应该注意哪些。

原型图设计遵循首要原则是：在满足将品需求转化为界功能需求时，尽可能维持原型图美观简洁，类始终往和追求切美好事物，即便是黑白世界，样会带美享受。

接下来将从「观的基础规范」和「微观的细节规范」两个度，说明何设计规范的移动端原型图。

一、基础规范

1. 绘制原型图尺寸

考虑到绘制与查看原型图便利性，以及大部分品与开发员使用小屏幕笔记本，前原型图尺寸般采用375*667px，相于 iPhone 6s 屏幕尺寸半，以 iOS系统为主，安卓系统个页单独做图说明。

2. 原图组件尺寸

指经使的通组件，如状态栏、顶导航栏、导航栏等，这里由于最大宽已经确定都是375px，因此注的是各通组件。状态栏可设置为母版是20px，顶导航栏44px， tab导航栏49px。

3. 对齐

页面中的模块或素不能随放置，要保持对齐性，这呈现出的效果才规整有序。

4. 亲密关联

也就我们常提到的「格式原理」的演变，指内属性可以划归一组的，置布局距离相近，不同属性内之间的距离相对远一些。如下图阅读类APP 的人中页面，按照消费行、人互动消息、系统操作分了不同模块，同一模块下相近属性归一组。

5. 对比和重复

页面不同元素之间要有对比效果，目的是更清晰的组织信息、使级关系明，能够引导用户浏览并且造焦点。

设的某些元素可能整页面中多次出。重复的元素可能某模块、一条分割线、某种粗字体、某类型图标标识。

如下图，的书评-的回复页面，通过背景色对比「贴以及针对贴的回复」，并且多个贴的回复式是重复排版的。

二、细节规范

1. 字或模块值

原型图模块背或元素一般采用黑白灰值，目的是避免给视设计师造成用干扰。

页面中重点凸显的内，如字体元素颜色加重，按钮或某模块采用深色块填充。下图中购买价格、余额重点信息，因此色加重；购买章节数以及购买按钮也关键内，因此给予色块填充。

这做的目的是视觉计可以快确页面素的重要性层，而不必一定要仔细阅读页面交互说。

作为交互计必须始终确，型图的重点是功能和逻辑结构的梳理呈现，用色不是应该考虑的。

2. 字体类型字号大

型图中使用相同的字体，保持所有页面字体呈现一致性。字号要依据体页面中素重要性的不同而定，一来说为便于清楚查，字号最12px。如下图红色框选部，标题简介不是相同的字体，给人觉页面跳，破坏了统一性。

总结

交互设师产出原型图时，满足产品业务需求的基础之，遵循一些普的规范原则，不仅使的原型图观简洁，交互设师专业性的体素之一。以我的一些验得，家如果好的观点补充，欢迎留言探讨。

欢迎关注作者的公众号：「Viksea」

图片素材作者：Gaeul Lee