本人并不是一个专业的产品经理，画原型也只是逼不得已，无奈之举。

好处

画原型对于一个产品来说还是非常非常重要的，原型可以帮你梳理产品逻辑，原型可以充分体现产品的功能，明确功能点。

无论是给前端看，还是给后端看 都非常重要，后端需要通过它来了解产品功能，设计数据库。前端需要通过它看到它的验证逻辑，功能开发等等。

如何画原型

这里我也就说明一下我通常是如何画原型的，那种高保真的原型我就不画了，可能我也画不好，在我认为原型体验具体功能，和交互验证逻辑就好了。

并不需要过渡修饰。

第一步（下载安装）：

我的原型是通过axure 画的 Axure RP 9 具体软件请自行查找下载，安装。

第二步（目录结构）：

如下图所示我的目录结构比较简单，首先全局 应该包含一些 基本介绍。

• 首页：小程序名称 简介 创建时间 作者等等信息。
• 信息结构图：就是把想法罗列为脑图形式的 流程图。
• 业务流程说明：就是一些功能逻辑的 流程图 体现。
• 组件规范：就是字体大小啊，配色呀 等等。

我认为如果觉得麻烦的画，可以只画个首页，个模块功能流程图即可，其它的可以不用画，主要体现出 产品功能 和 主题 就好。

后面就是具体小程序版本 和 目录构建。

我是根据 底部菜单分模块 然后 分别建立独立文件夹 画原型的。

因为我是自己给自己做的，自己画原型 自己开发，所以我没有在原型上做具体功能说明！如果你有需要建议 你在原型 边上加上必要的说明！

关于 元件 母版什么的 我用的基本都是 软件自带的，如果没有图标 我会简单的 用一个占位来代替 快速 方便。我不想做的那么花里胡哨，因为后面我写前端的时候 还是要找图标 找配色的。

关于UI设计 我如果是自己开发 我一般就不找UI设计了，毕竟前端干的也挺长时间的了，看看别的APP 或者 花瓣网上的 UI设计图 基本就知道怎么 写了。

而且我的UI功底也一般，所以我通常不想把时间浪费在UI设计上，基本上我都是在做前端的时候 把这一部分做了，当然这不可避免的会增加前端的调试时间！

第三步（如果画一个页面）：

通常我会建一个低图 也就是体现大致 手机的界面样式，这个地图 宽高 一般在 375*1440 如果 内容更高 你就适当 拖动高度 变高就好了！然后在给底图加一个外阴影 让它和北京图 出现色差让 浏览者可以看出来 这像一个手机。

然后位置你就靠左就好了，这样画出来 在预览的时候 它会默认居中 屏幕中间，虽然这我也不知道什么原因哈哈。

配置看下图：

然后你就可以画 了 首先小程序有个 标题 和 底部菜单， 我的小程序 有 一个首页 ， 发布页， 我的页面 所以只有这三个页面是需要底部菜单的。

这时候 拖动一个 矩形原件 调整高度 放到最底部 然后建立几个图标占位，写上菜单名字 就成了。当你画完的时候 建议 把底部tabbar 组合一个 。

选中 -》右击-》组合 就可组合成一个模块了下次想使用 直接复制组合就可以了。

其它的内容也一样 拖动矩形工具 放图片 放标题 等等 一般图片 直接搜 然后截图就好了！！！

目前完成情况

目前 小程序原型 基本完成了，其实我才花了一天不到 哈哈啊。做完一个 就复制改改 就好了。

有需要的可以去下载看下，自律君原型 入果你希望你的原型随时随地 都可以修改建议你放到线上仓库去管理。gitee就是一个不错的地方。

目前原型 已经做完

首页，动态详情，打卡发布，打卡主页，目标列表，目标详情，动态列表，我的，信息设置页面。

查看原型

如何发布原型预览

一种方式是你点击预览本地直接预览，第二种是你点击 发布-》生成html-》然后发布到一个站点下 就可以实现预览了。我一般是放我自己的服务器上面的。

讨论交流

如果大家想讨论交流可以 加我 v 在我主页。可以进讨论群。