——了解原型设计的工具
[Jewish]SHOU
目录：
——原型设计的重要性······················1
1.了解移动应用设计工具····················2
2.AxureRP实例讲解··························3
3.墨刀实例讲解································4
4.两个原型设计软件比较····················5
5.总结············································6
6.感悟············································7
page1原型设计的重要性
一个好的产品，一定离不开原型设计。
①原型设计是什么？
原型设计是软件开发的初始阶段，根据需求为软件创建原型的过程，原型通常用于演示，测试，沟通等。原型通常只是表现了产品的一部分特性，但原型设计的投入在整个的软件开发过程占比较小，且直接确定了之后的软件开发方向，投入产出比非常高，所以这个过程非常重要。
②原型设计的类型有哪些？
低保真原型：制作成本低，速度快，修改也方便。适合任务简单，整个团队沟通顺畅，个人能力较强的情况。
中保真原型：添加了更多细节，界面有一定的细节，而且使用者已经能完整体验到最终的产品，可以验证产品的可行性，确保了不会在后面的开发过程中发现重大失误。缺点是花费时间会多一些。
高保真原型：完全按照最终产品来制作的原型，保真度越高就意味着需要花更多的时间和开发精力，而且一旦有修改也会更加耗费时间。
3.原型设计优点：
可以将设计师的想法和创意形象化显示出来，让其他人查看和反馈，从而改进，一定程度上也减少了开发成本。让用户实实在在的感受产品，用于测试，提早找到产品的问题。
4.原型设计缺点：耗费时间，做的越细，设计师发挥的空间越小。
Page2了解移动应用设计工具
①Axure RP
a.简介:Axure RP是一款专业的快速原型设计工具，人们可以通过本软件快速创建应用软件或Web网站的流程图以及原型等，Axure RP有一个特点：可以支持多人协作设计和版本控制管理。
b. Axure RP安装
下载方式一：
百度云盘提取码：70vx
下载方式二：
官网下载：https://www.axure.com.cn/3510/
启动AxureRP-SetUp.exe，有注册Key的用户可以使用用户Key激活正式版，在“Welcome”界面上边框找到“Liscence”，点击注册，界面如下：
（选择右上角的Enter License）
以下是激活码（不过推荐购买正版）：
License：University of Science and Technology of China (CLASSROOM)
Key：DTXRAnPn1P65Rt0xB4eTQ+4bF5IUF0gu0X9XBEUhM4QxY0DRFJxYEmgh4nyh7RtL
c.使用AxureRP新建第一个原型项目，界面熟悉以及结果如下：
站点地图区域：对页面进行添加、删除、重命名和组织页面层次；
界面工具集：拖动向页面添加组件
模块区域：在该面板中可进行模块的添加、删除、重命名和组织
主菜单工具集：文件打开、保存等操作
界面工作环境：可以设计线框图、流程图、自定义部件、模块；
页面注释与页面交互：添加与该页面有关的注释
互动设计：设置标签、样式，添加注释
物件注释：添加、删除动态面板的状态
d.部件说明：
e.Axure事件
OnClick：鼠标点击事件
这个事件用的非常多，用户许多交互都通过这个完成。
OnMouseOver：当光标在上面时
主要做页面交互效果，当鼠标滑过时，它的样式发生怎么样的改变。
OnPanelStateChange：状态改变时
这个事件针对动态面板，当动态面板的状态改变时触发。
②墨刀：
a.简介：墨刀和Axure一样也是一个快速设计原型的应用，它相较于Axure，也有一些优点：操作十分简单（小白也会用，也可以快速完成可交互原型）、支持设备多（兼容性好，可以在电脑、手机、微信上直接演示）、界面简洁、也支持在线共同编辑，支持插件扩展。
b.安装：
点击该网址获取下载：https://modao.cc/downloads
使用墨刀新建第一个原型项目，结果如下：
操作界面熟悉：
控件区：提供文本、矩形基础组件元素，利用基础组件创建原型，下面的平台组件库，包括iOS组件库等已经构造好的组件库方便用户直接用。
Page3 Auxure实例讲解
我们在这里介绍一下列表页面的设计与实现：我们在设计原型的时候经常会用到列表表示选项，例如下面的结果图：
步骤一：在读书页面，使用列表展示可以更新的书本内容，在页面中拖入一个中继器组件，命名为“读书列表”
步骤二：双击“读书列表”打开中继器，默认是一个矩形框。点 击矩形框外的页面，出现中继器数据集编辑区域。在中继器数据集中添加列名，在行中添加内容。
步骤三：接下来我们设计中继器的项。将原来的矩形框删除，添 加1个Box2作为底色，添加1个Heading1、4个label，分 别命名为：书名、作家、书记类型，并调整其位置、文 字大小、颜色等，最后在底端添加一条水平线分割数据行 （如左图）。此时，返回“读书”页面，效果如右图所示。
步骤四：下面将中继器的项与中继器数据集绑定。在“读书”页面设置触发 事件，OnPageLoad中添加Case1，选择Set Text ，设置“标题”的 值(value)为中继器数据（repeater/dataset）中的“item.title”。用 同样的方法设置其他字段。
之后点击Preview键盘就实现了之前的界面。
Page2墨刀实例讲解
我们在墨刀实例这里介绍一下轮播的实现，相较于Axure中的轮播板，墨刀做起来更容易，例如下面的结果：
步骤一：找到组件中轮播板
步骤二：转换为母版
步骤三：双击组件进入模板设计，右边放入需要轮播的图片即可，可以设置轮播方式和参数，最后运行可以得到我们开始时候效果：
Page5两个原型设计软件比较
墨刀和Axure好像是美图秀秀和photoShop的区别，墨刀操作简单，入手方便，适合新手上手，而Axure在交互等功能比墨刀更多更细，适合做带有技术的高保真原型，比如墨刀不能只做带有条件的交互效果；墨刀内置更多素材，使用方便，就像美图秀秀内置很多贴纸及素材等，用户只需要拖动就可以实现想要的效果，因此墨刀制作原型时速度更快，操作比Axure更加友好；由于Axure使用基数多，所以Axure通用性会更好一些。
除此之外，墨刀可以说是为了移动端产品原型而生的，免费版自带部件等功能基本满足移动端产品原型的设计要求，并且墨刀控件都是基于APP，墨刀也偏线上产品，只要有账号密码，就可以随时随地在不同设备上设计之前设计的作品。而这正也是墨刀的缺点，墨刀不*，仅限移动端产品原型，交互效果等也不如Axure灵活，不适用PC端。
Page6总结
以上是基于自己对这两款软件学习中的收获和见解，总的来说，对于原型工具的选择，可以考虑两个原则：一是适合产品，及其使用场景；二是适合自己。
Page7感悟
不论移动端UI还是网页UI制作，使用原型制作是很重要的，可以将设计师的想法和创意形象化显示出来，让其他人查看和反馈，从而改进，一定程度上也减少了开发成本。原型设计在软件开发过程中是非常必要的，应该充分考虑产品的需求和团队的情况选择适合的原型设计类型。同时选择一款优质的原型工具能够节省大量的时间和成本，可以多尝试几款工具后再做选择。既然原型制作那么重要，我们也需要拥有一个适合自己的原型设计应用，在这里我们主要介绍了两款，墨刀和Axure RP，其中Axure中还介绍了一个实例，从上手来说，墨刀更加适合新手，而Axure更加适合追求高保真和技术的人员。