原型图有设计规范吗？

怎样才能把做原型图的效率提高起来？

确实有办法：

1.打造一套属于自己的原型图设计规范

2.打造一套属于自己的元件库

3.打造一套属于自己长期从事行业的原型图模板，并不断优化

今天我们先来聊聊为什么要打造一套属于自己的原型图设计规范？

以及怎么做。

磨刀不误砍柴工，说的大概就是这种情况。

原来我也没有这个意识， 通常都是确定需求之后，看看竞品，做思维导图，划分功能模块，考虑逻辑关系和功能实现等，之后就可以开始做原型图了。

至于什么颜色字号字体，按键大小，色卡基本没考虑过。

甚至连尺寸也用最为基础的：手机端是750X1334，绘制原型图的时候375X667，PC端要么就用1440做屏宽，要么就要1000做屏宽。

但是每次做原型图的时候，还需要考虑美观问题，大小问题，搞得有点烦躁。这时候就看上了UI常用的UI设计规范。

这个好啊！

只要第一次做好之后，不用再考虑后面美不美观的问题了，只要第一次是简洁好看的，后面风格都一样，不用考虑字体字号，色彩，按键尺寸，要哪个直接按标准来就好了！

1.PC尺寸

见下图。产品经理做原型图时，一般用1440或者1024宽即可。

2.手机尺寸

一般使用苹果手机尺寸即可，省心，安卓的尺寸太多。常见尺寸见下，选个自己喜欢的尺寸作为标准就好。

推荐使用6s或者6sp的标准，规矩！

3.色卡

就是色卡元素颜色，从别人配好的方案拿过来用的。毕竟大部分产品的审美都不怎么样。

下面附带几个配色网站，可以对不满意的颜色方案自己搭配。都是非常科学非常专业的配色站，找个自己喜欢的颜色方案，更改一下色卡值即可。用的时候，用吸色工具往色卡吸一下即可。

如果公司有自己的UI设计规范，直接照着那个给自己来一套，方便。

PS：别和设计一样，把色值放在色块里，放在色块外面。不然改色卡方案容易手抖。

推荐几个配色方案网站：

peise：非常实用科学的色轮配色，单色、互补色等方案众多！

Adobe Color：Adobe出品，必属精品！轻松创建自己的色卡！

uigradients：可以配出好看的渐变色的网站！

4.字体大小标准

见下图，可以根据自己的喜欢，配置一套，一般字体大小偶数。Axure的字体默认，或者使用常见字体或者自己比较喜欢的字体。

思源黑体就不错！开源，商用免费。

5.常用按键配置一套

一般大中小三个尺寸，样式统一。PC和移动各一套！

6.微信和支付宝的UI组件备上

微信小程序组件和微信小程序设计指南，微信官方都提供，可以自己去下载。

如果有设计小程序的需求，直接用微信的UI规范，这个不用考虑是否会给设计造成困扰，毕竟这就是微信小程序本来的UI规范建议。基本也不会对设计造成困扰！因为这是微信原本的颜色。

7.icon常备网站

easyicon和阿里巴巴旗下icon库iconfont。

有两个就够了， 高保真时可用，低保真的时候，有个图代表是icon即可。

8.常用页面备上

比如一般想逻辑的时候，会遗忘的404和页尾。

这两个一般用户容易忽略，但很多情况是，如果产品不画，UI和技术是不会主动提的。技术会随便找个页面，比如某知名网站的走失页面……

所以做模板的时候就做上，常规操作。

做好规范之后，可以省去我们思考美观度和样式的时间，把精力集中到框架结构，功能模块， 逻辑，需要的元素，内在关联等上来。

而不是考虑这个按键不好看，那个图放的不是地方儿之类无关痛痒的问题。

所有东西规范之后，出来的效果就是干净整洁的。别和产品提审美，除了设计转过来的，几个产品有审美？注重设计交互，重点的是功能，而不是设计美丑。

产品最大的审美就是把图关键功能元素简单直观的表现出来。干净、舒服就是最大的肯定。

如果时间充裕，建议产品先把整个项目逻辑跑通，原型图先出来，之后再细化。写好PRD文档之后再给设计。

设计人员才是专业的，把用户画像特征，想要在功能模块取得的效果写明白给设计，把你考虑到的点告诉设计，剩下的就是信任和工期！

如果是0-1的项目，有经验的设计会在做完首页时，发个效果图问下意见，这时候有问题早点沟通，不然设计后面的工作没法儿做。

如果时间不够充裕，但是需要设计先做出效果图确定风格，起码产品应该先把主要模块图出来，和领导层确定真实需求，再让设计做事情。

有时候，慢一点把所有问题都考虑清楚且确定性高一点，可能比急吼吼做再返工还要快。