原型设计模板(原型设计模板下载)
【原型设计】善用母版，让你的工作事半功倍
母版可以用来创建重复使用的各类原型设计元素，并对其进行全局管理，是整个项目中重复使用的元件容器。母版常用于创建页头、页尾、导航、模板和广告等。你可以在任何页面轻松的使用事先创建好的母版，而不必再次辛苦制作或复制粘贴，这就是母版带给我们的便利，你可以在母版的版面对它们进行统一管理。对母版进行的任何修改结果，修改后的结果都会同步到引用的页面中。一个页面可以同时使用多个母版。当每个页面中有大量相同重复的元件时，使用母版能够节省时间，极大的提高我们的工作效率。
方法一：在母版面板中点击“新增母版”，为新建母版命名，双击母版进入编辑界面。
方法二：在设计区域中首先选中要转换为母版的元件，然后点击右键，选择“转换为母版”，在弹出框的对话框中设置母版名称，命名完成后，还可以设置母版的拖放行为，下文中会介绍拖放行为。
使用母版面板对其进行管理
设计区域添加母版
直接拖拽母版至右侧设计区域可以将母版添加到单个页面中；右键点击母版，选择“新增到页面”，在弹出的“新增母版到页面”对话框中选择想要添加母版的页面，可以实现母版的批量添加；右键点击母版，选择“从页面删除”，可以在页面中批量删除母版。
母版上的遮罩 ：通常，添加的母版上会覆盖一层粉红色遮罩，这是为了让我们能够在设计元素中快速区分哪些是母版。如果你不喜欢这种区分方式，可以通过点击菜单中的“视图遮罩”，取消粉红色的遮罩效果。同样的操作，在这里你也可以取消掉动态面板、中继器、图片热区这些元件容器的遮罩效果，见下图。
按照母版的拖放行为，可以将母版分为以下3类：拖放到指定位置、锁定母版位置、从母版脱离。要改变母版类型，右键点击母版。“选择拖放行为”，在弹出的菜单中进行选择。对模板类型的修改，只会影响到当前要拖放到设计区域的母版。
任何位置：拖拽至设计区域，可以放置在设计区域中的任意位置
锁定母版位置：拖拽至设计区域，固定在设计区域的某一位置，不可以随意移动
从母版脱离：拖拽至设计区域，即表示脱离了母版，在此处进行任何修改，均不会影响原母版内容
触发事件是创建在母版中，只有母版才具有触发事件，允许为母版的每个不同实例添加不同的交互。当你想让母版内元件的操作影响到母版外元件时，也可以使用母版触发事件。触发事件的效果是由母版内元件触发的。
例如，在母版中添加了3个按钮，并分别添加了鼠标单击事件，点击3个按钮时，影响着母版外一个文本的显示内容。这样做的好处是这里的按钮是一个母版，对其操作维护比较方便，可以应用到其它需要有类似效果的页面。虽然达到这种效果的方法有很多，但母版触发事件的强大之处在于可以多次重复使用，达到一劳永逸的目的。关于触发事件的一些重点说明如下：
触发事件只能用于母版内的元件创建
一个母版可以拥有多个触发事件
创建触发事件的步骤：1.在母版的元件上创建触发事件。2.将母版拖拽到页面的设计区域中，选中该母版，在元件交互面板中使用触发事件创建交互来影响当前页面的元素。
双击母版进入编辑状态，选中母版要触发的触发元件，然后在元件交互面板中添加想要触发的触发事件的事件，在弹出的用例编辑器中第二步，添加“触发事件”动作，然后在第四步配置动作中设定“触发事件”的名称，最后勾选事件名称前的复选框，点击确定，完成触发事件的创建。
此外，还可以双击母版，进入编辑状态。然后在菜单栏中的布局管理母版触发事件，对触发事件进行管理。
创建完触发事件后，将母版拖放到任意设计区域中，选中该母版，在元件交互面板中就可以看到刚刚添加的触发事件。触发事件的操作方法和平时操作其他事件是一样的。
为了帮助大家进一步理解什么是母版的触发事件及其重要性。在这个案例中将演示如何通过母版的触发事件影响着文本显示的内容。
step1：拖动3个按钮至设计区域，并在3个按钮内分别输入文字“发现”、“关注”和“消息”，拖动一个文本标签至设计区域，文本内容默认输入“这里显示按钮的文字”。
step2：选中3个按钮，右键设置为任意位置母版。双击母版，进入编辑状态，为按钮创建单击事件，在事件编辑框中添加最下方的“触发事件”，在配置动作中命名，这里我就偷懒，直接在系统默认名称后加上数字编号“NewEvent1”，选中事件名称前面的复选框，点击确定；同样的操作，为另外两个按钮添加触发事件，事件名称分别为“NewEvent2”和“NewEvent3”。
step3：返回到页面当中，选中母版为刚才添加的触发事件““NewEvent1”添加用例，在用例编辑面板中，添加设置文本动作，在配置动作中选择名为text的文本，设置文本的值为按钮1的文字，点击fx进入编辑文本弹框界面，在设置这个值之前需要将按钮1的文字定义为局部变量LVAR1，所以在配置动作中文本的值为局部变量LVAR1；按照同样的操作，为另外两个触发事件添加用例，需要提醒的是，设置文本时，文本的值分别设置为其按钮上的元件文字。
step4：至此，所有的设置已经完成，按下F5，预览测试下效果。
Axure8.0版本中称之为“触发事件”，也有一些中文版本翻译为“引发事件”，Axure7.0版本称之为“自定义事件”，虽然叫法不一样，但表达的意思是一致的。
请学会这样“画”纸面原型图
那么怎样让“纸面原型图”不再是没有迷惑的闲谈，而是真正有意义的快速表达创意想法的一个技能呢？配上我的项目实例、结合书中的一些要点提取及整理，供大家学习和探索。（关于纸面原型模版打印源文件，如有需要请留言即可^_^）
设计师在得到产品最初需求或若干个创意思路时，但他们还仍然是一些抽象的分析、概念或词汇，想要把他们变成比较直观的设计效果，则需要动手在速写纸上用笔把他们画成草图形式。
Wireframe 直译为线框图，由线条构成的草图或示意图、简单的阴影表现或者上色草图都属于wireframe，也称为纸面原型或原型草图。
“ 探索、过滤、验证、问题分析、设计机会 ”，产品设计规划为承前启后的阶段，将最初需求及创意一步一步变为现实。
1.具有可塑性、可多次修改重建。
2.短时间内验证设计的可行性。
3.方便与项目团队及其他人员交流讨论、沟通合作。
4.有笔和纸就可随时随地简单快速记录表达。
Idea是指好的设计创意、灵感 。创意可大可小，经常是严谨调研和苦想之后的拍案而起。那么，概念便是创意的载体。设计师的能力体现在想法和执行上，当我们有了一个好的创意也应通过概念把它呈现出来。
对于一个需求，交互设计师应尽量发散思维设计尽量多的方案，从主到次、从大到小将他们画出来，并主动召集团队成员一同讨论这些方案，尽快解决那些不确定的问题。不再是一味说着想法而是落到实实在在的概念想法图上，虽然看起来多一步，但绘画概念草图毕竟比低保真原型成本低很多，又可收集来自更多角度的智慧，发现概念有不足便快速修改，少走很多弯路。
1. 使用简单工具
纸面原型不需要什么高级的工具和复杂的技巧，可繁可简。可以使用最简单的铅笔（自动铅笔最好）、圆珠笔、签字笔、钢笔、纸张（速写本最好）（如下图1）
2. 粗细线条、空间体积、阴影
为了增强原型草图的表现力，我们善于变换不同的表现手法，使画面更加活跃而充满内涵。希望表达出界面的逻辑，可以使用马克笔、双头画笔等，运用粗细不等的线条和阴影关系，画出界面的层次关系； 同时，还要简单把物体、控件、图标的空间和体积感表现出来，譬如用铅笔涂抹少量的阴影、沿着造型的右、下边勾画双线，使用淡灰色马克笔等，当然最好可以把上述的这些技巧结合起来展示（如下图2）
3. 交互、动态
我们要把交互和旋转的动态表现出来，主要通过重叠、各种箭头来实现。重叠就是表现物体运动过程的重影，箭头的使用就比较广了，即可以表现物体运动的方向（如下图3-1），也可以表现不同界面间的交互关系（如下图3-2），还可以表现导航、进度和弹出等。希望表达出交互效果，可使用便签纸和小卡片，他们可以当做提示气泡、弹出层、模态窗口等，贴在绘图本的任何地方，也可以作为页面标注的工具及说明产品功能。
4. 声音、振动
纸面原型的手绘表现力是无穷的，除了上诉这些有形和具象的事物，有时还可以根据需要，勾画出一些无形和抽象的事物，譬如闪烁、声音和振动（如下图4所示）
1. 使用人群
由于纸面原型的快速灵活性，有些创业公司甚至已经抛弃了电子版的高保真原型，直接采用纸面原型作为交互设计师的最后交付物。这对于纸面原型有了更高的要求。另外，有很大一部分人不具备手绘能力而避开绘画技能的限制也可使用这些工具便事半功倍。
2. 来源、特点
由 Suki Kits 公司 生产的 原型设计模板套装 是一个比较好的选择（如下图6），不同的应用平台有不同的产品套装，包括iOS、iPhone、iPad、Android平台各版本、Windows Phone平台产品。
（1）模板由不锈钢制成，精度很高；
（2）模板上有：各应用平台的状态栏、标签栏、确认按钮等几乎所有基本控件样式；
（3）模板完美符合造型规范和大小规格，边缘还带有以像素（PX）为单位的刻度；
（4）套装里还配有印着手机或平板电脑图形的设计绘图纸（如图），规格与模板一致，便于使用者用模板直接在相应的产品图形里设计、勾画；
优点： 可以准确画出应用的真实大小、有助于进一步的细节推敲，也确实能达到快速精确、标准的效果 ；
缺点 ：绘图局限性大，毕竟模板的内容是有限的，而且容易禁锢一定的概念设计、创意及思维想象力 ；
1. 有连贯有情节的流程图
创意构思阶段完成，将进入设计的布局和调整阶段。在开始下一步细节之前，我们要把纸面原型草图整理好、查漏补缺，把所有页面按照创意和设计思路串在一起，使他们成为流程图。每一项功能的每一个动作都不要漏掉，做到前有因、后有果、中间过程有条理。（如下图7）
2. 利用纸面原型草图进行可用性测试
在原型草图阶段，就可以对应用进行简单的可用性测试。体验大致功能、导航、布局结构等，检验功能、布局是否合理？控件是否规范？导航是否正确？把原型草图中的每一个界面单独拍照，之后使用照片美化应用对照片稍加调整，譬如边缘裁剪、调整亮度、对比度等，使图片清晰完整。并在移动设备端的可交互原型应用工具，譬如：Pop (iOS)?(如下图9视频所示)、快现(Android)，一张张导入拍照图片，选取特定区域添加热区、手势操作、链接，就可以实现点击界面后跳转、切换等效果。直观的草图演示可以大大提升沟通效率。（如下图8）
如何设计出色的网站后台原型
我觉得，可以从三个方面入手：
1.独特新颖的设计创意?? 如果实在没有想法的话，可以多看看同类型的网站后台设计，寻找设计灵感。
2.高效实用的原型设计工具? 好的设计想法，也需要称手的原型工具进行制作、测试和迭代。这方面，摹客MOckplus就是不错的工具，操作简单快速、链接分享、反馈收集、真机演示等等，能够实现团队快速设计和迭代。
3.搜寻创意的原型设计模板?? 好的网站后台设计模板也是不错的切入点。但是要注意版权方面问题，弄清付费还是免费，再使用。