整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
不久我进入一家创业型公司，我开始发现，老板不看xxx.Html 原型图的，老板只看视频版本的原型图，而给开发人员的原型图就是xxx.Html的，所以每次做原型的时候我都会做两套。一个简单的视频原型展示：
下面我来介绍一下，如何在Mac上制作视频原型图
一、使用工具介绍
二、制作原型图步骤&方法
三、总结
Mac系统下使用工具： Axure、 Final cut pro / iMovie、QuickTime Player
Win系统下使用工具：Axure、绘声绘影x6、xbox
先用Axure做原型并加上事件，然后用QuickTime Player/xbox进行录屏，录好后将视频分类命名整理，最后用 Final cut pro或iMovie进行制作打包即可
本篇文章主要是讲如何让原型图动起来，所以不详细说明原型图怎么画哈~
画一个带壳的原型图即可，然后将其他的原型图按照需要显示的顺序，叠加在带壳的原型图上。
将画好的原型图，设置事件
开始录屏了，为了视频能够流畅，录屏之前将原型先导出来，然后再打开index.html
打开QuickTime Player
选择新建屏幕录制
用数字排序后，直接导入视频编辑软件内方便合成视频做排序
推荐用
打开后，一个初始画面
点击此按钮将视频导入
然后将视频拖入视频编辑区域，在控件区域点击T图标，可选择不同的文字样式，选择一款拖入“视频编辑区域即可”
文字编辑完后，是这个样子就对了
之后可以加一些转场，切换页面用(最常见的渐变)
做到这个时候就差不多了
如果觉得原型图视频太枯燥可以加一点音乐，实在不知道加什么音乐可以去…（你的作品给谁看呢？客户？老板？）那么你就去他们的朋友圈逛逛，有没有分享的音乐，然后下载放入即可~(加音乐的方式与加文字的方式是一样的)
点击导出按钮
导出视频并设置参数(一般选择720p就可以了)
恭喜你大功告成，发了邮件后就等着涨工资吧
这个技能也不是产品经理必备的，不过我倒感觉挺加分的，比如一些外包公司，需要给客户提供一些方案，这个时候给一个能动的原型不是更有胜算吗？也方便客户理解，对于外行人来说，毕竟看一个原型图是比较费脑的，如果再配上设计师的高保真的UI做这个的话，效果更赞，比如
分享作品
作者：Bass，微信号：zouwei1228
本文由 @Bass 原创发布于人人都是产品经理。未经许可，禁止转载。
评估一位产品新人的原型时，发现对方竟然不知道Axure的很多实用技巧，导致很多效果都是用极其复杂或者笨拙的方式实现。Axure是产品经理的必备工具之一，熟练使用axure可以提高画原型的效率。那axure的这些实用技巧，你都知道吗？
为避免他人也有同样的问题，对Axure常用技巧做总结如下：
（1）点击某些按钮，或者鼠标悬浮时，显示某些隐藏的元件，元件被覆盖，这是因为元件层级太低，显示元件的用例注意勾选置于顶层（见红框）。
（2）可以批量居中页面，不需要每个页面都去设置一下居中样式。点击Project，再点击Page Style Editor，在弹出窗口中设置Page Align居中即可。
（3）弹窗类动态面板N多，聚在页面中央，且一层层覆盖在一起，想要改某个，需要挨个找。这类面板可以错落有致的放置在主页面右边，在Pin to Browser设置位置居中即可。
（4）Tab切换，所有Tab设置为选项组，给每个Tab设置点击选中事件，这样每次只有一个可以选中，选中和悬浮的样式可以在Interaction Styles里设置。
（5）不需要添加一横线，通过隐藏/显示事件，实现下图“年费会员”的效果。每个菜单一个矩形框，隐藏左、上、右边线，下边线设置为白色，在Interaction Styles里设置下边线选中或者悬浮样式。
（6）实现点击时显示，再次点击时隐藏，用Toggle即可实现。
（7）没有锁定背景框，移动时添乱。可以点击工具栏Lock锁定不需要移动的元件。
（8）可以用动态面板的Scrollbar属性实现拖动滚动条来查看容器中的元素。
（9）页面比较大时，将鼠标的光标放置在编辑窗口中，按住键盘的空格键，就能看到鼠标的光标会切换成手状。然后就可以用来抓着画面任意滑动，而且不会对任何的部件造成影响。
（10）经常会遇到几个部件重叠的情况，如何选择下层部件呢？可以在部件管理窗口中直接选择想要的部件，另外可以选择最上层的部件之后，稍等会再点击一次，就会选中下一层的部件。若选择再下一层的部件，做相同操作。
（11）需要在水平方向或者垂直方向上移动部件，可以按住shift键，拖动部件左右或者上下移动，这样可以直接平移部件。
（12）按住Ctrl键，拖动部件，可以快速复制部件。按住Ctrl+shift键，拖动部件，就会复制了一个新的部件，并将新部件进行平移。
（13）按住Ctrl键之后，将鼠标放在部件的边缘，就能够旋转部件了。
（14）生成HTML原型文件时，在“Logo”里可以添加logo和标题语，这样在导出的原型中，左上角会显示添加的logo和标题语。
（15）当几个部件组成一块大的元件时，可使用组合快捷键Ctrl+G，这样的好处是可以很方便地移动，不需要每次都全部选中后才移动。
（16）锁定部件快捷键Ctrl+K后，部件锁定后，不能被移动和复制，可以避开不需要复制的部件，提高效率。
（17）如何实现列表整行的点击效果呢？拖动热点控件到列表的记录中，覆盖列表的一行记录，然后设置热点的点击事件，就可实现整块的点击效果。
（18）Axure代替viso来做流程图，它提供了画流程图的控件，连线选择连接模式，选中控件，按住左键，拖到鼠标至下一个控件。
（19）重复比较多的地方请尽量使用母板，最好是非固定位置的母板。模板有三种类型：一种是固定位置的母版，一种是可以随意移动位置的母版，还有一种是可以随意移动并且母版元素可以拆解的母版。这三种可以根据需要设置，在模板右键鼠标—>拖放行为，进行选择。
（20）如果是团队协作，使用Project，会使整个项目效率显著提高且减少出错。
最后强调一点经常被大家忽略的问题，没有及时为组件和动态面板命名，用时，才手忙脚乱的添加，增加了维护原型的时间成本，切记，养成随时命名的好习惯。
Axure有些实用技巧是在使用过程中不断摸索出来的，多画原型，和他人多多交流，多看前辈的demo，可以在短期内提高自己。
本次总结只针对近期所见，axure还有大量的实用技巧，欢迎大家分享。
本文由 @柒柒是80后 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
辑导语：一个高颜值的原型图，能够在一定程度上体现出你的专业度，起到锦上添花的作用。那么，要如何画出高颜值的原型图呢？本文作者对此作出了分析，一起来看一下吧。
最近有朋友要转产品，自己在学习画原型，怎么说呢，原型画的确实差点意思。
虽说大多数内容临摹出来了，但是还有很多可以优化的地方，像对齐、颜色、间距就处理的不好。
那我们需不需要画出好看的原型？
我认为有必要！
高颜值的原型图在一定程度上会体现出你的专业度。
如果你在面试的作品集中画出好看的原型，加分；
如果你是新入职一家公司画出好看的原型，加分；
如果给老板、客户展示好看的原型，加分；
但是呢，要话说在前：好看的原型图仅是锦上添花。
原型是将需求转化成页面功能，最重要的能够表达出功能逻辑，让产品经理能够快速传达出自己的想法，让团队成员能够认识产品需求内容。
而好看的原型是在此基础上对原型页面进行视觉处理，让看原型的人能够获得更好的体验，毕竟“颜值即正义”。
画出好看的原型并不复杂，我们只需要掌握基本的UI设计原则，就能收获好看的原型。
我找到我刚学习产品时画的原型图，并按照下文的规范进行了优化，大家可看下对比效果：
我们接下来说说如何快速画出好看的原型，内容较多，建议收藏，随手帮忙点个赞~
在原型中，我们要明显区分出不同模块、不同元素重要程度。这样原型页面才有节奏感。
当层级关系不突出，对比不明显，会将所有的信息混杂在一起，显得凌乱。
左侧的原型层级关系太弱，没有视觉重点，右侧原型通过颜色、字体大小、使用分割线、调整间距大小等方法来达到层级划分的效果。
总结来看就是：突出重要元素，弱化次要元素。
层级关系的划分可以通过颜色、字号、字重、间距、分割线等方式。对应的层级关系可查看下图：
根据内容重要程度不同，选择不同的颜色、字号、字重、间距即可，这些内容我们下边会详细介绍。
对于内容关联性，我分为2个，一个是元素的关联性，一个是填充内容的关联性。
一致性是指原型中的组件内容保持一致，如字体相同、间距一致、各类组件相同，弹窗按钮位置相同等。
一致性让原型界面非常规范，有了一致性，我们就可以直接复用各个组件，制定出组件库，相同元素可直接复用，极大提高画原型效率。
不要过度追求到像素级标准，不要过度添加装饰性内容，不要过度追求动效。
首先对自己的设计要求严格是好事，但是我们需要明确得是原型的作用，它不是UI设计稿，它是你表达想法的可视化界面。
我不建议画原型到像素级别，是指用字体10px还是11px，圆角用10px还是8px等等。几个像素影响不到你的原型，抠像素是UI干的事，把抠像素的精力用在需求分析上会更有用。
另外不要过度追求装饰性内容，一个矩形就能表达出的内容，不建议为了更好的效果而添加复杂的个性化设计，原因就是费事。
还有不要过度追求动效，添加太多的动效费时费力，投入产出低，比上边提到的抠像素还要费事。
一定不要陷入动效的陷阱里，过度追求高大上的动效内容。原型使用基础的页面跳转、隐藏/显示、动态面板就可以了。
对于UI设计搞都有自己的设计规范，而对于原型设计，也是同样的。
但是原型的设计规范不需要像UI设计稿那么严格。我们接着看看有哪些规范：
1）手机端：宽375px，首屏高667px或者812px。
推荐375×667，因为UI设计稿也按照这个尺寸进行设计的。
虽然375×812尺寸在iOS机型中占的比例较多，UI设计稿也按照这个尺寸进行设计，但是我不建议使用。
原因是在这个机型中，状态栏变成了44px、底部又有安全区域，对我们原型设计没有任何好处。倒不如接着使用375×667。
为啥就是375×667这个尺寸，我简单说下，了解即可。
在开发时，使用的单位是pt，在屏幕上显示时，使用的单位是px。
UI设计使用375×667pt进行设计，最终在导出一倍图@1x、二倍图@2x、三倍图@3x的切图，就是将pt单位×1、×2、×3得到px单位的图片，提供给开发，用于适配不同机型。
375×667这个尺寸在iOS所有的机型中处于中间尺寸，向上向下都能很好的适配，所以就选择了它。安卓也是按照这个尺寸进行设计。
另外按照这个尺寸设计，我们在预览原型时，在屏幕上也能显示出全部内容。
在文章中提到的字号、间距等大小，都是基于375×667（1倍图）来制定的。
2）PC端：建议宽1440px，首屏高度900。
对于PC端的原型尺寸可按照宽1440px，首屏高900px进行设计即可，侧边导航栏建议200px，顶部导航栏建议60px。
3）平板：首屏768×1024px。
原型尽量使用黑白灰。在Axure的颜色色板里的黑白灰完全可以满足原型的使用，不建议自己单独弄一套颜色规范。
我将我常用的黑白灰颜色提取出来后，我们看下：
颜色从左到右以及变淡，在页面中表达的层级关系也依次降低。
在页面中层级最高、重要程度最高的，使用最左侧的纯黑，次重要内容使用灰色，依次递减。
颜色的选择也受底色的影响，上边的例子通过白色底进行设计的，对于其它底色，我们可以在调整，选择不同颜色进行对比突出。
对于遮罩的颜色，我们可以选择纯黑，调整为50%透明度。
有些文章说不建议使用纯黑，但是我认为纯黑能更好的体现出层级关系，大家可以根据自己需要来调整。
具体使用什么颜色，我们不建议严格按照色号，只要能够通过颜色区分出层级即可。
除了基本的黑白灰外，我认为原型中也是可以添加颜色的，像基本的语义色。
另外像按钮、tab页选中状态、复选框、单选等组件的选中状态，也是可以添加颜色的。
但是不要使用色调较高的颜色，而是采用色调适中，不刺眼的颜色。
如果你们公司有自己的品牌色，你可以找UI要下，使用到自己的原型中。
很多文章说，原型图中不要添加颜色，会影响到UI设计，高级的UI设计师是不会被影响的。
原型中使用1种字体就够了，你可以使用Axure默认的Arial字体。
如果你想更好看一点，推荐使用苹方字体，然后将苹方字体设置为默认字体。
如果你没有安装苹方字体，文末有获取方式，安装好字体后，重启Axure即可，然后将苹方字体设置为默认字体。
Axure默认字体设置方式：项目-元件样式管理-字体-选择苹方。
字号是指字体大小，常用大小为20px、18px、16px、14px、12px、10px。
字重是指字体重量，就是细体、中等还是加粗，经常用的是中等与加粗，细体没用过。
不同字号、不同字重也是用来区分不同层级关系的。
我们需要把颜色+字号+字重组合，就能得到一套完整的文字层级关系。
我建议如下：
示例如下：
不需要特意去记，在画原型时，根据层级关系与实际效果再去调整。
行间距：在Axure9中使用不同字体、字号时，会自动调整行间距。我们可以直接按照Axure9自动的行间距大小即可。
如果你想更好看些，可以按照字号大小的1.5倍调整行间距，如正文14px字号对应行间距为21px。
当字体内容较多时，可适当调大行间距。
还有字间距，可以不用管，如果你想更好看，自己手动调整看效果即可。
一个好看的原型一定是要有间距、对齐的。
为了保证内容的可读性，体现出留白，以及层级关系，我们在画原型时一定要把间距和对齐同时考虑到。
1）安全间距
在画原型前，我们先在原型两侧保留安全距离。可以选择10px，或者20px。
移动端我一般选择10px，可以通过拉出标尺线，或者放宽度为10px的热区进行限制。
2）具体间距
不同模块间的间距：推荐使用10px、20px，间距可按照10的倍数进行调整。
模块内各种间距：我分为3个，分别是模块内间距、子模块间距、子模块内元素间距。
对于模块内的间距，建议只关注上下左右的间距。左右间距相同，上下间距相同。
移动端大小推荐10px/15px/20px，但是不需要特别标准，在满足对齐后，间距能够区分出每组关系即可。
PC端可选择性放大到20px、40px。
子模块间距：不建议抠像素，能分出层级即可。
可直接选中每个子模块，然后水平分布/垂直分布让保证间距相同，但需要保证间距能达到分组的效果。
如果你想抠像素，可按照5px的倍数调整。
子模块内元素组件间距：不同元素间的间距我一般不关注，只要间距能达到分出层级的效果：相关元素靠近，不相关元素间距稍微大点。
你也可以按照5px的倍数进行调整，但是不建议这样做，没必要去抠像素。真要细抠的话，那你就不是画原型了，你是在搞UI了。
在Axure9中我们可以设置【标尺·网格·辅助线】勾上显示网格、元件对齐。
【元件对齐设置】中勾上元件对齐、边缘对齐，垂直与水平设置为5像素。
这样就可以显示出间距大小，并能自动吸附对齐。
对齐是一个原型中最基本的要求，就算你的字体、间距等都不规范，但是有了对齐，原型也会看起来好看很多。
对齐分为居左对齐、垂直居中对齐、居右对齐、顶部对齐、水平居中对齐、底部对齐。
在Axure中，可直接选中要对齐的组件，点击顶部导航栏，即可自动对齐；对齐时以第一个选中的组件为标准进行对齐。
同时在Axure9的设置中，把网格对齐、辅助线、元件对齐都勾上，这样就可以自动对齐。
有些对齐原则可以直接参考（以下内容引用Antdesign）：
1）表单类对齐
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
2）文案类对齐
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
3）数字类对齐
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
分布是指在垂直分布、水平分布，将组件内容按照相同间距排列。
当有相同内容≥3可考虑使用自动分布，比如多个icon排列时，可以直接使用水平分布。
使用自动分布时，建议不考虑的具体间距。
在实际画原型时，经常会将对齐与分布一起使用。
使用分割的作用还是突出层级关系，将相同内容在视觉上分组。
分割的方法有留白分割、线性、色块分割（也叫面性分割）。
在不同模块间我们考虑采用色块分割。这时需要考虑不同模块分割大小的一致性。色块间距可按照10的倍数进行设计进行设置。
色块分割是指一种视觉效果，我们在画原型时，并不是非要拖个矩形进行分割。
我们可以通过灰色底+白色底实现。通过颜色对比实现色块分割的效果。
同一模块内的子模块可以考虑大间距留白，或者是分割线。使用优先级是留白分割＞分割线。毕竟画原型时少个元素，就少些工作量。
（有分割线，放大看）
分割线粗细为1px，颜色建议使用#F2F2F2。
另外分割线样式通栏分割线、内嵌分割线、居中分割线。我们简单介绍下，大家了解即可，具体使用哪个对原型影响不大。
画原型时，不建议添加阴影，太费劲。
如果你想好看，可以使用这个阴影：色号#000000，透明度20%，X：0 ，Y：1 模糊：4。
在原型中，具体用圆角还是直角对原型的冲击不大。
如果想效果更好，可以根据圆角和直角的特性来判断：
推荐添加圆角，像Banner、按钮、封面、图片、头像等都可以适当添加圆角。
具体圆角的大小，不需要特别严格，选择元件后，通过拖动小三角标即可。
也可以按照半径5px的倍数，根据元素面积越大，圆角半径越大进行调整。
对于icon的使用，我有以下建议：
文案在画原型时就直接敲出来了，很多时候原型中的文案会使用到线上中，我们在画原型时，可以直接敲出好点的文案。
具体建议如下：
画原型时，不需要添加具体图片，使用占位符、或者矩形图代替即可，如果觉得表达不清楚，可以添加文字补充。
在使用占位符/矩形代替图片时，我们可以直接调整一个差不多的尺寸，如果想更好点，可以按照一定比例调整。
常见的比例有：
不过过度追求动效。关于使用动效我有以下小建议：
看原型的使用对象是谁，选择性的添加动效。
可以添加简单的效果，如链接跳转，隐藏/显示,切换动态面板、垂直滚动、水平滚动。
对于页面切换，PC端产品建议将每个页面单独画出，添加链接跳转到新页面，有利于写一体化需求文档。
App端页面较少时，可直接平铺在Axure画布中，通过箭头表达跳转关系。
建议动态面板仅用于交互展示，不要在动态面板的页面中添加需求文档说明，没人喜欢点击你的原型去找你的需求。
当用动态面板时，建议先把动态面板的所有页面都画好，然后在放入动态面板内。
动态面板中尽量别在加动态面板，修改时每个人动态面板去找很费劲。
对于动态面板中的页面进行切换时，可选择性添加Axure自带的切换动画以及动效效果。效果建议选择“缓进缓出”。
使用隐藏显示时：最好选中：置于顶层，避免被遮挡。可选择性添加显示与隐藏的动效，效果可选择“逐渐”，时间选择300ms
对于选择日期、选择日期等，如果没有好的组件，可直接使用axure自带的文本框，修改不同类型。
对于中继器、函数这种高级交互，不建议在画原型时使用。其它高级动效也不建议在画原型中使用，当然你可以自己学着玩。
再分享一张几年前做的会员落地页项目的原型图与UI图对比照。
（最左边是我当时领导画的，中间的是我改的，右边的是UI设计稿）
其它的话，就是画原型的首要前提是需求分析完整，功能架构划分清晰，流程确定清晰。这些我们不在这说，之后在细聊。
另外不要纠结原型工具。
原型工具有很多：Axure，sketch，摹客，墨刀、xd，即时设计、码前、MasterGo等。另外PPT、Excel也能画。
你工作中使用的工具、工具的版本都不是你一个人能决定的，而是看公司要求，或者是其他同事使用的什么工具。
现在主流还是Axure，Axure的使用技巧你可以看我之前的文章：
《产品必会的30个Axure使用技巧》
《产品必会的Axure使用技巧-第二弹》
《产品必会的Axure使用技巧-第三弹》
另外一点，就是使用组件库，页面中的组件翻来覆去就那些，每次使用时直接拖拽组件库即可，不用每次都画。
我建议每个要画原型的产品，都要有自己的组件库。我也整理了Axure组件库，文末提供了领取方式。
还有就是了解交互组件有哪些，以及交互设计原则。
对于原型中需要使用什么样式的交互组件，大家可以看下这篇文章《产品经理必会的30个组件（汇总）》http://www.woshipm.com/pd/5423893.html。
本文由 @王大鹿 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
*请认真填写需求信息，我们会在24小时内与您取得联系。
