从0到1教Codex skill画原型图

​

这篇文章预计花费你五分钟时间，它将带你系统地认识原型图。​

​

一、什么是原型图​

二、怎么画原型图​

前面我列举了三款常用的原型工具，这里我用摹客来进行原型图制作讲解。​

步骤一​

点击新建，选择在线设计，选择需要的画板尺寸，进入到画板界面。​

​

​

步骤二​

​

💡

进入到画板后，我们能看到左侧有非常多的组件，通过这些组件我们就能很轻松的制作原型图，建议你可以挨个拖动每个组件到画布上，体验一下当它出现在画板上时具体的呈现和功能。​

​

例如：我拖动了图片组件到画板上，双击线框位置会弹出图像上传选项，选择准备好的本地图片就可以快速上传。​

​

​

​

​

33%

​

​

​

​

33%

​

​

​

​

33%

​

​

当你挨个体验过后，你会发现组件的使用非常简单，通过这种方法，实际上可以很快制作出原型图，将头脑中的想法具象地呈现出来。​

​

💡

除开组件的使用，还可以通过设计稿图层，快速建立热区。​

​

步骤三​

我们设计的每一个动作，都可以通过点击屏幕右上角的演示按钮，查看它在模拟的实际页面中的效果，方便你对设计进行修改，除此之外，你也可以使用快捷键CTRL+P来打开演示。这里顺带一提，摹客的快捷键非常多，点击F1就可以打开学习。​

（抖音原型图）​

上面这个原型是我花了半个小时参考抖音做的原型图，基本实现了各个页面及按钮的交互，在演示界面，不细看可以说是真假难辨，应付领导是没问题了，简直又快又舒服！​

步骤四​

经过摸索，我们已经把原型弄出来了，怎么样分享出去呢？​

摹客拥有两种分享和演示方法：​

（1）在线分享：复制演示链接发送给其他⼈，⽆需登录就可以查看原型演示。​

（2导出离线演示包：在⽆⽹络的情况下，也能打开演示⽂件进⾏预览。​

你可以根据情况，选择适合的演示方法。​

摹客的优点在于其不仅可以制作高保真原型，同时它也是一款非常不错的团队协作工具。​

为了便于工作推进，你可以邀请领导或其他同事加入你的团队，这种方法，可以让查看的每个人都能在线给出意见，无论他是产品经理、设计师、研发人员，都能通过一个渠道发声，精准定位问题，提升沟通效率。​