8000字教你画出高颜值原型图

内容导航：

8000字教你画出高颜值原型图

如何用axure画app原型图

初级产品经理-如何高效绘制AXURE原型

如何画好原画

一、8000字教你画出高颜值原型图

编辑导语：一个高颜值的原型图，能够在一定程度上体现出你的专业度，起到锦上添花的作用。那么，要如何画出高颜值的原型图呢？本文作者对此作出了分析，一起来看一下吧。

最近有朋友要转产品，自己在学习画原型，怎么说呢，原型画的确实差点意思。

虽说大多数内容临摹出来了，但是还有很多可以优化的地方，像对齐、颜色、间距就处理的不好。

那我们需不需要画出好看的原型？

我认为有必要！

高颜值的原型图在一定程度上会体现出你的专业度。

如果你在面试的作品集中画出好看的原型，加分；

如果你是新入职一家公司画出好看的原型，加分；

如果给老板、客户展示好看的原型，加分；

但是呢，要话说在前：好看的原型图仅是锦上添花。

原型是将需求转化成页面功能，最重要的能够表达出功能逻辑，让产品经理能够快速传达出自己的想法，让团队成员能够认识产品需求内容。

而好看的原型是在此基础上对原型页面进行视觉处理，让看原型的人能够获得更好的体验，毕竟“颜值即正义”。

画出好看的原型并不复杂，我们只需要掌握基本的UI设计原则，就能收获好看的原型。

我找到我刚学习产品时画的原型图，并按照下文的规范进行了优化，大家可看下对比效果：

我们接下来说说如何快速画出好看的原型，内容较多，建议收藏，随手帮忙点个赞~

01 原型图要保证的原则

1. 层级关系

在原型中，我们要明显区分出不同模块、不同元素重要程度。这样原型页面才有节奏感。

当层级关系不突出，对比不明显，会将所有的信息混杂在一起，显得凌乱。

左侧的原型层级关系太弱，没有视觉重点，右侧原型通过颜色、字体大小、使用分割线、调整间距大小等方法来达到层级划分的效果。

总结来看就是：突出重要元素，弱化次要元素。

层级关系的划分可以通过颜色、字号、字重、间距、分割线等方式。对应的层级关系可查看下图：

根据内容重要程度不同，选择不同的颜色、字号、字重、间距即可，这些内容我们下边会详细介绍。

2. 内容关联性

对于内容关联性，我分为2个，一个是元素的关联性，一个是填充内容的关联性。

元素的关联性：元素是指原型中的组件元素是指对界面元素内容进行分组，从视觉上将关联内容合并在一组中，其最终目的也是为了划分层级关系。填充内容的关联性：比如将文案按照真实内容进行填充；这个并不是必须要做的，你也可以直接用文字直接说明内容是什么。

3. 设计一致性

一致性是指原型中的组件内容保持一致，如字体相同、间距一致、各类组件相同，弹窗按钮位置相同等。

一致性让原型界面非常规范，有了一致性，我们就可以直接复用各个组件，制定出组件库，相同元素可直接复用，极大提高画原型效率。

4. 不要过度

不要过度追求到像素级标准，不要过度添加装饰性内容，不要过度追求动效。

首先对自己的设计要求严格是好事，但是我们需要明确得是原型的作用，它不是UI设计稿，它是你表达想法的可视化界面。

我不建议画原型到像素级别，是指用字体10px还是11px，圆角用10px还是8px等等。几个像素影响不到你的原型，抠像素是UI干的事，把抠像素的精力用在需求分析上会更有用。

另外不要过度追求装饰性内容，一个矩形就能表达出的内容，不建议为了更好的效果而添加复杂的个性化设计，原因就是费事。

还有不要过度追求动效，添加太多的动效费时费力，投入产出低，比上边提到的抠像素还要费事。

一定不要陷入动效的陷阱里，过度追求高大上的动效内容。原型使用基础的页面跳转、隐藏/显示、动态面板就可以了。

02 掌握基本的设计规范

对于UI设计搞都有自己的设计规范，而对于原型设计，也是同样的。

但是原型的设计规范不需要像UI设计稿那么严格。我们接着看看有哪些规范：

1. 尺寸

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。

2. 颜色

原型尽量使用黑白灰。在Axure的颜色色板里的黑白灰完全可以满足原型的使用，不建议自己单独弄一套颜色规范。

我将我常用的黑白灰颜色提取出来后，我们看下：

颜色从左到右以及变淡，在页面中表达的层级关系也依次降低。

在页面中层级最高、重要程度最高的，使用最左侧的纯黑，次重要内容使用灰色，依次递减。

颜色的选择也受底色的影响，上边的例子通过白色底进行设计的，对于其它底色，我们可以在调整，选择不同颜色进行对比突出。

对于遮罩的颜色，我们可以选择纯黑，调整为50%透明度。

有些文章说不建议使用纯黑，但是我认为纯黑能更好的体现出层级关系，大家可以根据自己需要来调整。

具体使用什么颜色，我们不建议严格按照色号，只要能够通过颜色区分出层级即可。

除了基本的黑白灰外，我认为原型中也是可以添加颜色的，像基本的语义色。

另外像按钮、tab页选中状态、复选框、单选等组件的选中状态，也是可以添加颜色的。

但是不要使用色调较高的颜色，而是采用色调适中，不刺眼的颜色。

如果你们公司有自己的品牌色，你可以找UI要下，使用到自己的原型中。

很多文章说，原型图中不要添加颜色，会影响到UI设计，高级的UI设计师是不会被影响的。

3. 字体、字号、字重、行间距

原型中使用1种字体就够了，你可以使用Axure默认的Arial字体。

如果你想更好看一点，推荐使用苹方字体，然后将苹方字体设置为默认字体。

如果你没有安装苹方字体，文末有获取方式，安装好字体后，重启Axure即可，然后将苹方字体设置为默认字体。

Axure默认字体设置方式：项目-元件样式管理-字体-选择苹方。

字号是指字体大小，常用大小为20px、18px、16px、14px、12px、10px。

字重是指字体重量，就是细体、中等还是加粗，经常用的是中等与加粗，细体没用过。

不同字号、不同字重也是用来区分不同层级关系的。

我们需要把颜色+字号+字重组合，就能得到一套完整的文字层级关系。

我建议如下：

一级标题：20px、加粗，颜色#000000主标题：18px、选择性加粗，颜色#000000次标题：16px、选择性加粗，颜色#000000小标题：14px、选择性加粗，颜色#000000正文：14px、选择性加粗，颜色#000000/#333333辅助文字：14px/12px，不加粗，颜色#333333/#555555次级文字：12px/10px，不加粗，颜色#555555/#7F7F7F

示例如下：

不需要特意去记，在画原型时，根据层级关系与实际效果再去调整。

行间距：在Axure9中使用不同字体、字号时，会自动调整行间距。我们可以直接按照Axure9自动的行间距大小即可。

如果你想更好看些，可以按照字号大小的1.5倍调整行间距，如正文14px字号对应行间距为21px。

当字体内容较多时，可适当调大行间距。

还有字间距，可以不用管，如果你想更好看，自己手动调整看效果即可。

3. 间距、对齐、分割、分布

一个好看的原型一定是要有间距、对齐的。

为了保证内容的可读性，体现出留白，以及层级关系，我们在画原型时一定要把间距和对齐同时考虑到。

1）安全间距

在画原型前，我们先在原型两侧保留安全距离。可以选择10px，或者20px。

移动端我一般选择10px，可以通过拉出标尺线，或者放宽度为10px的热区进行限制。

2）具体间距

不同模块间的间距：推荐使用10px、20px，间距可按照10的倍数进行调整。

模块内各种间距：我分为3个，分别是模块内间距、子模块间距、子模块内元素间距。

对于模块内的间距，建议只关注上下左右的间距。左右间距相同，上下间距相同。

移动端大小推荐10px/15px/20px，但是不需要特别标准，在满足对齐后，间距能够区分出每组关系即可。

PC端可选择性放大到20px、40px。

子模块间距：不建议抠像素，能分出层级即可。

可直接选中每个子模块，然后水平分布/垂直分布让保证间距相同，但需要保证间距能达到分组的效果。

如果你想抠像素，可按照5px的倍数调整。

子模块内元素组件间距：不同元素间的间距我一般不关注，只要间距能达到分出层级的效果：相关元素靠近，不相关元素间距稍微大点。

你也可以按照5px的倍数进行调整，但是不建议这样做，没必要去抠像素。真要细抠的话，那你就不是画原型了，你是在搞UI了。

在Axure9中我们可以设置【标尺·网格·辅助线】勾上显示网格、元件对齐。

【元件对齐设置】中勾上元件对齐、边缘对齐，垂直与水平设置为5像素。

这样就可以显示出间距大小，并能自动吸附对齐。

5. 对齐

对齐是一个原型中最基本的要求，就算你的字体、间距等都不规范，但是有了对齐，原型也会看起来好看很多。

对齐分为居左对齐、垂直居中对齐、居右对齐、顶部对齐、水平居中对齐、底部对齐。

在Axure中，可直接选中要对齐的组件，点击顶部导航栏，即可自动对齐；对齐时以第一个选中的组件为标准进行对齐。

同时在Axure9的设置中，把网格对齐、辅助线、元件对齐都勾上，这样就可以自动对齐。

有些对齐原则可以直接参考（以下内容引用Antdesign）：

1）表单类对齐

冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。

2）文案类对齐

如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。

3）数字类对齐

为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

6. 分布

分布是指在垂直分布、水平分布，将组件内容按照相同间距排列。

当有相同内容≥3可考虑使用自动分布，比如多个icon排列时，可以直接使用水平分布。

使用自动分布时，建议不考虑的具体间距。

在实际画原型时，经常会将对齐与分布一起使用。

7. 分割方式

使用分割的作用还是突出层级关系，将相同内容在视觉上分组。

分割的方法有留白分割、线性、色块分割（也叫面性分割）。

留白分割：就是我们上边提到的“间距”，相同组的内容减少间距，不同组的内容拉大间距。分割线：使用水平线、或者垂直线进行分割，可用于模块分割、子模块分割。色块分割（面性分割）：可以理解为粗的分割线。常可用于分割不同模块。

在不同模块间我们考虑采用色块分割。这时需要考虑不同模块分割大小的一致性。色块间距可按照10的倍数进行设计进行设置。

色块分割是指一种视觉效果，我们在画原型时，并不是非要拖个矩形进行分割。

我们可以通过灰色底+白色底实现。通过颜色对比实现色块分割的效果。

同一模块内的子模块可以考虑大间距留白，或者是分割线。使用优先级是留白分割＞分割线。毕竟画原型时少个元素，就少些工作量。

（有分割线，放大看）

分割线粗细为1px，颜色建议使用#F2F2F2。

另外分割线样式通栏分割线、内嵌分割线、居中分割线。我们简单介绍下，大家了解即可，具体使用哪个对原型影响不大。

通栏分割线：也叫全出血分割线，用于分隔完全独立的模块。内嵌分割线：当在同一模块内的有重复的子模块内容，如图文列表，或者是联系人列表时，使用内嵌分割线，分割线从文字部分开始进行对齐。居中分割线：分隔线在页面内居中对齐。

8. 阴影

画原型时，不建议添加阴影，太费劲。

如果你想好看，可以使用这个阴影：色号#000000，透明度20%，X：0 ，Y：1 模糊：4。

9. 圆角

在原型中，具体用圆角还是直角对原型的冲击不大。

如果想效果更好，可以根据圆角和直角的特性来判断：

圆角：柔和、友好、识别度高，设计感强，活泼调性直角：正式、严肃、专业性强、冲突性强，冷系调性

推荐添加圆角，像Banner、按钮、封面、图片、头像等都可以适当添加圆角。

具体圆角的大小，不需要特别严格，选择元件后，通过拖动小三角标即可。

也可以按照半径5px的倍数，根据元素面积越大，圆角半径越大进行调整。

10. 图标

对于icon的使用，我有以下建议：

刚开始画原型时，先不使用icon，使用文字、占位符或者圆形代替，最终原型确定后再替换icon。icon要表意清晰明确，好理解。使用多个icon时，尽量选择风格一致的icon，如果使用线性图标，就全部使用线性图标。推荐使用iconfont网站、iconpark网站，iconpark可以调整icon的线段粗细、风格、颜色，但是图标种类有限。iconfont更丰富，也支持按照不同风格筛选。使用svg矢量图，别让icon失真。在iconfont或者iconpark中复制svg代码，粘贴到Axure中，然后变换图片为SVG形状。这样就可以修改icon颜色、调整大小也不会失真。使用icon调整大小时同比例缩放扩大，别让iocn变形。

11. 文案

文案在画原型时就直接敲出来了，很多时候原型中的文案会使用到线上中，我们在画原型时，可以直接敲出好点的文案。

具体建议如下：

填充的文案内容尽量贴合实际场景，并考虑使用实际内容填写文案。对于日期时间、数字我们可以随便敲出来，但是可别写出“2月31日”、“17点知道77分88秒”。提示文案要简洁精炼，字数不宜太多。语法使用动词+名词，如“添加用户”“编辑信息”，且语序要保持一致，而不是“添加用户”“信息编辑”。数字使用阿拉伯数字，如“3天后开启活动”。而不是“三天后开启活动”。别采用负面词语，像“你没资格参与活动”，改为“签到完成后即可参与活动，立即签到”。文案内容传达积极的暗示，如“剩余70%未学”修改为“已学完30%”。当出现报错提示时，要让用户知道为什么错、如何解决。别弹出个“error ”。使用专业名词要确定名词的准确性，另外也要考虑到名词的大小写规范，是iOS，而不是ios。别有错别字，如“登录”，不是“登陆”；“请稍后重试”而不是“请稍侯重试”；“请稍侯，马上回来”而不是“请稍后，马上回来”。提示内容句尾别加标点，“今日预约已满，可预约明天”而不是“今日预约已满，可预约明天。”，但是可以加表达委婉的符号，比如“~”。第二人称可以使用“你”，而不是“您”。文案语气可以根据场景、人群、产品调性选择不同的语气，如果是年轻化的产品，可以使用活泼的语气；如果你老年人产品，语气就正式严肃。

12. 图片

画原型时，不需要添加具体图片，使用占位符、或者矩形图代替即可，如果觉得表达不清楚，可以添加文字补充。

在使用占位符/矩形代替图片时，我们可以直接调整一个差不多的尺寸，如果想更好点，可以按照一定比例调整。

常见的比例有：

16:9，常使用于视频封面、照片封面。3:2或4:3，常用与图片封面，图文列表封面、banner等。画原型时建议使用3:2，在相同宽度下，比4:3的高度更小，能留更多面积让我们画原型。1:1，常用于用户头像、商品主图等。

13. 动效

不过过度追求动效。关于使用动效我有以下小建议：

看原型的使用对象是谁，选择性的添加动效。

可以添加简单的效果，如链接跳转，隐藏/显示,切换动态面板、垂直滚动、水平滚动。

对于页面切换，PC端产品建议将每个页面单独画出，添加链接跳转到新页面，有利于写一体化需求文档。

App端页面较少时，可直接平铺在Axure画布中，通过箭头表达跳转关系。

建议动态面板仅用于交互展示，不要在动态面板的页面中添加需求文档说明，没人喜欢点击你的原型去找你的需求。

当用动态面板时，建议先把动态面板的所有页面都画好，然后在放入动态面板内。

动态面板中尽量别在加动态面板，修改时每个人动态面板去找很费劲。

对于动态面板中的页面进行切换时，可选择性添加Axure自带的切换动画以及动效效果。效果建议选择“缓进缓出”。

使用隐藏显示时：最好选中：置于顶层，避免被遮挡。可选择性添加显示与隐藏的动效，效果可选择“逐渐”，时间选择300ms

对于选择日期、选择日期等，如果没有好的组件，可直接使用axure自带的文本框，修改不同类型。

对于中继器、函数这种高级交互，不建议在画原型时使用。其它高级动效也不建议在画原型中使用，当然你可以自己学着玩。

03 总结

再分享一张几年前做的会员落地页项目的原型图与UI图对比照。

（最左边是我当时领导画的，中间的是我改的，右边的是UI设计稿）

其它的话，就是画原型的首要前提是需求分析完整，功能架构划分清晰，流程确定清晰。这些我们不在这说，之后在细聊。

另外不要纠结原型工具。

原型工具有很多：Axure，sketch，摹客，墨刀、xd，即时设计、码前、MasterGo等。另外PPT、Excel也能画。

你工作中使用的工具、工具的版本都不是你一个人能决定的，而是看公司要求，或者是其他同事使用的什么工具。

现在主流还是Axure，Axure的使用技巧你可以看我之前的文章：

《产品必会的30个Axure使用技巧》

《产品必会的Axure使用技巧-第二弹》

《产品必会的Axure使用技巧-第三弹》

另外一点，就是使用组件库，页面中的组件翻来覆去就那些，每次使用时直接拖拽组件库即可，不用每次都画。

我建议每个要画原型的产品，都要有自己的组件库。我也整理了Axure组件库，文末提供了领取方式。

还有就是了解交互组件有哪些，以及交互设计原则。

对于原型中需要使用什么样式的交互组件，大家可以看下这篇文章《产品经理必会的30个组件（汇总）》http:///pd/5423893.html。

本文由 @王大鹿 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

一、如何用axure画app原型图

多学习，多练手

画好原型后

1.下载Axure

2.如果是给itouch或者iPhone用的，比较好办，直接用320×480的分辨率画好辅助线，然后画原型

3.按F5生成原型的时候，在“Mobile/Device”选项中可以设置适配移动设备的特殊原型

4.设置说明见下图：（页面大小显示我的这个设置是按320×480的大小，默认不缩放）

5.用你的移动设备访问你生成的原型链接（如本地服务器，或Dropbox托管）

6.把该页面创建一个桌面快捷方式7.完成（有icon，有闪屏）

另：想做鼠标动作或者复杂的页面交互比较麻烦，不推荐，尽量简洁。

二、初级产品经理-如何高效绘制AXURE原型

      原型是产品经理或者交互设计师所设计的某一需求或者某一问题的具体的解决方案。绘制原型的工具有很多，我们公司大多的产品用的都是Axure。用这个软件，高保真或者低保真原型都能做的很好。那么，怎样的原型才适合团队交流？

      毕竟绘制出来的原型并不是只给自己看的，还要讲解给团队里的成员，UI/前端/开发。特别是进行小组内评审的时候，通过演示原型，需要向他们讲解产品内部的逻辑、具体的页面、动效等，还要向他们询问设计是否合理，能否实现等，静心倾听他们的意见。这时候，原型就是一个思维传达的工具，将你的想法，翻译并灌输给你的团队成员。同样，原型是也团队的交流工具，针对绘制出来的原型，每个人都可以谈谈自己的看法，交流思想，完善原型不足的地方。

      所以原型绘制出来，必须要有基本的交付标准。

一、原型设计的基本交付标准

1.清楚------让他人能明白产品是干什么的，包括什么功能，有哪些页面。

需要清楚地表达页面有哪些内容模块

需要清楚地表达模块内部的构成元素

2.清晰------让队友知道具体有哪些要求，指导他们如何做

【1】功能操作

  某一个功能可以进行哪些操作，点击/鼠标悬浮/拖动等操作，以及页面会有什么反应。（方便开发的工作）。

【2】操作路径

       有一些操作是要跳转页面，跳转的路径需要标清楚，跳到哪去了，涉及哪些页面，页面之间是如何联系的。防止用户迷失。

【3】点击状态

一些链接，按钮，需要标明它初始的时候是什么样，鼠标悬浮有什么效果（颜色/下划线/提示语等），点击的样式变化，以及点击后的样式。（这些可以为前端的工作提供方便）

【4】信息组合

相关的信息需要组合在一起，比如一些基本信息，姓名/性别/年龄等最好放一块，不要分开。不相关的保持距离。

【5】位置排序

页面的布局应该适应用户的习惯，浏览方式、工作任务。突出强调重点，方便用户的工作。一些数据可以思考一下它们的排列方式，按什么排序，能方便用户查找，仍旧是“以用户为中心”。

3.周全-----产品的各种细节，不能疏忽

【1】交互状态

     某些重要的操作，交互样式是怎样的，效果如何，最好单独抽出来做成高保真，演示给他人看，让他们对产品有深入的体验和感受。

【2】数据显示

原型上涉及的相关数据做好有真实的案例，将需要获取的关键数据全部展示出来，比如一篇文章，需要的数据：作者、发布时间、浏览量、喜欢数、收藏数等，方便开发准备必要的数据接口。

【3】异常考虑

需要考虑一些突发情况的应对，比如断网、加载太慢、数据已经被删除了、数据找不到了、没有访问权限等等情况。

【4】配套页面

产品里的一些功能可能和其他产品有关联，需要将可能涉及的其他页面包括到项目内。比如页面在wap上手机的浏览样式、一些发送给用户的消息/短信的内容和样式等等。

4.基本审美

【1】对齐

【2】间距

【3】颜色

【4】字体

推荐大家看看《写给大家看的设计书》这类易上手的书籍。

5.基本规范

【1】页面尺寸

       web的宽度有960px、1000px、1200px，App有安卓、iphone5、iphone6等，需要与已有的产品保持统一的尺寸。

【2】字体大小

     标题可以是18px或者16px，内容可以是14px。既要考虑用户是否看到清，又要考虑美观。

【3】颜色

     原型不要有太多的颜色，坚持黑白灰，除非要突出，可以用其他的颜色。

【4】弹窗

     弹唱的样式最好做统一，弹窗名+内容+操作按钮+关闭

【5】元件

   不在原型正文添加过多的截图、图标样式，会对UI的设计造成干扰。

二.Axure的快捷使用技巧

       工欲善其事必先利其器，工具使用的越娴熟，才能节省大量时间用于方案的思考。下面将简要分享Axure绘制原型时的一些快捷操作：

      首先在顶部菜单栏中找到<视图>，把需要的部件显示，就可以设置了。

1.组件库的建立（能提高效率，保证产品层面的统一一致）

2.母版的使用（适用于多页面通用的部分，修改后，集体自动更新）

3.设置页面样式（页面的字体、背景能一次性设置好）

4.元件的交互样式

5.元件组合

       把要组合的原件用鼠标框在一起，按住ctrl+G，成为组合后就可方便复制拖动了。许下按住ctrl+shift+G，也可以点击选中后，点击下图的两个图标来组合和取消组合。

6.对齐、居中、平均分布

选中要对其的内容，选择一种分布样式，就能快速得到整齐的原型样式，而不用一个个手动调整。

7.输入框类型的设置（预设好类型）

一些输入框，可能需要设置默认文字，可以直接选中了输入框后，在原件属性里设置提示文字和一些限制。

8.元件的提示语

        有些文字需要有鼠标悬浮显示提示语的动作，可以直接在原件的属性里设置“原件提示”，输入要显示的内容，即可。

三、制作原型的过程

1.梳理功能点-------------------将需求转化为功能清单，标出重要等级（前提是需求已经梳理清楚）

2.规划产品结构----------------用Xmind或者笔和纸等工具画出产品有几个页面，每个页面包含哪些元素

3.整理原型目录----------------用Axure添加原型的几个页面，考虑页面之间的跳转关系

4.设计页面的布局（打格子）-----用不同的色块，方框来表示这部分将要表示什么板块，设计好页面的布局

5.填充各模块的细节----------在方框里把具体的信息和数据填充完整

6.增加少量的交互动作--------------体现在一些涉及到任务的操作

7.页面注释-------------完善交互说明

8.审查自检------------------功能是否覆盖完全；页面有没有缺失；流程是否明确；状态是否完备

四、原型应用中的经验

      因为我多是负责后台系统的优化，所以是直接和开发打交道，如果涉及前台页面，就需要UI先将原型做成图片，再由前端制作含有动效的demo，开发再按照demo开发。但是不论哪种，绘制出来的原型一定需要让队友都明白你的逻辑和要表达的重点。

      第一次负责项目的时候，我用的是高保真，画完整的原型就花了一星期多，各种动作和交互，恨不得做个虚拟的产品。但是和开发讲了原型后，等来验收项目的时候，才发现，开发大部分都没有按照原型上的动作来，甚至连细节都有遗漏。一个个催着补上后，我开始思考这种方式是不是不太划算，太费事费力，结果又不太好。

       后来我看了我上级绘制的原型，都是以静态页面为主，可以说是低保真，但是每一种情况都详细地用图文描述清楚，点击之后是什么样子，将要获取什么数据，失败了会怎么样都有。而且这种方式，完成的特别快。于是我就选取低保真模式的开始画原型，结果发现，开发有时候并不能将一些动作做好。

       于是我开始“T式原型 ”。“T式原型 ”就是大部分是以低保真铺展开，将整个产品的逻辑都直接呈现出来，再在某些需要重点描述的地方用高保真描述深入。所以，我的原型大部分是以 低保真+注释说明和高保真+动作演示 的组合。 不过对于交互简单的产品来说，低保真模型足够了 。

       每个产品绘制原型的习惯和风格都有所不同，但关键还是需要进行小组会议来向队友们讲解原型和逻辑，在开发的过程中，需要多沟通。

       另外，分享大家关于AXURE学习的网站，可以在里面找到免费的软件安装包和教学课程。



如果对文章感兴趣，欢迎评论留言，坚持喜欢的事情，加油~

三、如何画好原画

想画好原画，如果只是想简单的入个门，培训一两个月时间都可以了。

软件技术前期都是比较简单的，熟悉界面操作即可，越往后越困难。如果是想做原画师的话建议进行系统学习，可以在很大程度上缩短学习时间，提高学习效率。自己摸索的话光入门可能都需要半年以上，如果想在这个行业立足并稳定高薪工作，建议在实力雄厚的大机构培训4-6个月更靠谱。

如何能快速入行并胜任行业的工作要求呢？专业的事一定要交给最专业的人去做，在国内，学原画还是行业龙头培训机构王氏教育更靠谱——

为什么选王氏教育，首先他的王牌专业就是原画培训，而且做了十几年原画教育。你让一个教英语的培训机构教好原画那是扯淡的。在cgwang.com你可以真实看到王氏教育历年来老师的教学案例和学生作品，风格之丰富，实力之强大，学习保障之全面碾压好多同业培训机构。有些小机构为了招生效率，会把效果夸大或者虚假宣传，这个时候就需要擦亮双眼，认真选择。

培训机构很多，但是出于对自己负责的态度，一定要选更专业，更资深，而且更适合自己的原画培训大机构去学习。王氏教育是一所有着19年历史的知名原画教育品牌，至今在全国13个一二线城市都拥有直营校区。想知道王氏教育实体培训有多强，去校区现场考察下就知道了，如果暂时抽不出时间，也可以先在官网跟在线老师详细了解。

王氏教育较同类培训机构的优势：无论是创始人还是管理层都是原画专业的专家，了解整个产业，需求，就业，无缝深入到市场，做到投资型教育机构所不能企及的细致入微。王氏教育的课程研发也一直是行业争相模仿的对象，每个专业都由一线公司的项目总监参与研发和用人对接，学员无缝输送对应企业。学员遍布全国各大原画公司。

即便你现在没法去线下学习，也能在手机应用市场下载到王氏教育实实在在的教学研发产品：“绘学霸APP”——苹果商店和应用市场均可下载，里面对应专业的视频教程多达8000多套，涵盖了所有的数字艺术类型，上面有十多年来的新老学员在里面交流和学习，还有成千上万的公司在上面招聘，光这些真不是随便成立三五年的培训机构可以复制出来的。

学技能的路很长，参加培训一点也不能将就，选一个有着多年口碑和教学研发实力的面授培训机构更对得起自己的未来。