原型设计工具

一、什么是原型设计

原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物，交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导致该产品的可用性。

二、原型设计工具的方便之处

原型设计工具在项目分析阶段，用来做页面模板的，用它做出静态HTML很方便，可以直接用鼠标拖出要用的组件，放在相就的位置上就可以了，也可以实现简单的页面跳转，在初期阶段可以用它来对整个业务流程作出页面上一些简单的功能，基本上的工具都可以导出生成HTML代码，帮助简化复杂且易错的代码过程。

三、介绍主流的原型设计工具

3.1 Axure PR

Axure RP是美国Axure Software Solution公司旗舰产品，是一款专业的原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。首先让我们看一下Axure的一些操作界面。

（1）Axure中设置页面链接

先选中组件，然后到属性面板上去筛选目标页面

（2）设置组件交互

对于一般的交互，在Axure中可以通过弹窗来逐个筛选设置。稍微复杂的交互，则需要条件构建器来实现。Axure在交互设置中，可以添加条件判断，但需要用户有一定的编程常识，否则掌握起来有相当难度.

（3）添加多个用例

方法一：使用动态面板的状态。

在动态面板中，建立2个状态，然后用条件构建器判断动态面板状态，然后设置动态面板移动参数，最后通过点击换动态面板状态的可视性。

方法二：使用条件判断。

也需要用到条件构建器（Condition Builder）。实话讲，你需要一些编程的常识，比如：“变量”、“全局变量”、“赋值”，“初始化”、“条件判断”等。

使用Axure的原型设计案例

新版阿里云网站界面高保真原型

近期阿里云网站进行了全新的改版，改版范围包含了前台的产品展示界面、用户控制台、费用中心、产品导航等，新版风格以橙黄色系为主，整体布局更加简洁和扁平化。阿里云有着非常庞大的业务体系和丰富的产品类型，阿里云网站的导航体系和交互设计对于学习大型网站产品设计有很高的参考价值。为了方便大家进行学习和借鉴，我们使用Axure还原了阿里云新版网站的相关的主要界面，包含了网站首页、注册及登录、用户控制台、费用中心、消息中心等。

本套模板按照高保真效果进行还原设计，相关界面的布局和交互还原度达到了95%以上，且所有界面元素都是使用Axure重新制作的，避免使用任何的截图效果，所以相关的元素都是支持修改和复用的。本套作品是一套免费且没有任何保留的分享模板，通过本模板不仅可以学习如何在Axure中通过母版合理的创建大型网站的原型框架，同时可以学习到Axure中动态面板、全局变量、辅助线、中继器、函数的相关知识点和使用技巧

AxureUX中后台管理信息系统通用原型方案

本作品是一套通用型的中后台管理系统原型设计方案，可以帮助你快速输出标准和美观的中后台产品原型方案，极大的节省协作成本和提升工作效率。这套方案提供了12套不同类型的登录界面和系统框架，并涵盖了大量的常用组件和常用页面模板，可以满足各类中后台管理系统的原型设计需求，快速输出各种管理信息系统，如CMS、OA、CRM、ERP、POS等系统原型。

在2017年AxureUX发布了基于电商后台业务系统的原型模板，并总结分享了相关的设计方法和框架模板，收获了非常良好的用户反馈，并被很多产品同行应用到了实际的原型设计工作中。为了满足更多的中后台系统的原型方面的设计需求，我们参考了大量的案例并推出了这套全新的设计方案。这套作品保留了自适应布局框架和内联框架链接页面等特性，同时简化了相关的界面布局和交互事件，具有更易应用和维护等特点。同时，作品使用了较为安全的蓝色作为主色调，可以满足更丰富的应用场景。

除了提供不同类型的登录界面和系统框架之外，本套作品中还提供了丰富的常用页面模板，涵盖了各类典型的中后台系统使用场景。其中包含了各类中后台数据仪表和首页示例、数据管理的增删改查相关页面、团队协作功能流程相关页面，以及各类信息展示和提示反馈类页面。由于这套设计方案的所有内页都是通过框架页面进行链接的，所以相关的页面模板基本都是独立的，可以非常方便进行复用。在实际使用过程中，可以根据需要组合对应的框架和页面模板。

需要特别说明的是，本套作品中相关基础的交互元件全部使用的是静态元件，例如：输入框架、下拉选择器、下拉按纽、开关选择器、日历组件、通知提醒、表单验证反馈等。主要是考虑为了提升输出效率和方便维护等因素，在实际的后台原型设计中可以使用专门的示例页面将相关的交互样式呈现出来，列出相关的状态示例和交互说明，供UI和前端人员进行参考。

3.2 墨刀

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。

使用墨刀的优点

1、小白也会用！不用学习！简单易用的原型设计工具

无论是 PM 从 0 到 1 绘制原型、还是设计师导入设计稿制作交互，都可以快速轻松完成可交互原型。

2、电脑、手机、微信等多种设备完美演示

你可以将你的作品分享给任何人，无论在 PC、手机或微信上，他们都能随时查看最新版本。

3、工作流文档生成，关注产品全局

开发人员可告别复杂的需求文档，打开工作流便可看到全局状态和注释，实时同步进度和文档——工作流成为最有效的沟通语言。

4、在线团队协同，多人聚焦讨论

产品细节、新增需求、打点评论清晰可见。制作者可以第一时间收到细节反馈，方便意见的统一修改。

5、Sketch + 墨刀 = 交互批注利器

将 Sketch 的设计稿一键导入墨刀即可马上制作交互，工程师还可以通过开发者模式，看到完整的图层信息。

墨刀的基本使用

可以选择创建空白项目，因为墨刀拥有模板库，所以还可以从已有模板中创建项目

选择创建空白项目：填写项目名称，选择完机型、型号和系统后点击“创建”。

编辑页面

墨刀总结：

墨刀对于APP的原型设计真的是体验非常好，怎么说呢?就像有一个无形的人在帮助你，和你一起打造你的原型APP。(当然以后也适用微信小程序的设计)，其控件的拖拉、大小的调整，都会自然的去匹配相应的母版大小。无需去担心有多移动一点或多选择一点。并且墨刀的系统控件都是基于APP，以及系统平台IOS和安卓，因此在里面可以首先选择相应的设备布局，减少了不少工作环节

3.3 Flinto

Flinto遵循的美学与Sketch类似，甚至还提供了一些跟Sketch中类似的工具。让人吃惊的是，它甚至还有一些同样的键盘快捷键。仿佛像是从一个模子里出来的，但是这是一个加分项。

对于新手而言，直观明了，当用习惯了后就感觉特别顺手，菜单、工具和选项都变成最小化。用它完全可以设计出令人印象深刻的原型，避免陷入特点过多的境地，分散用户注意力。

Flinto最重要的特点就是Transition Designer。如果你是一名讨厌时间轴和编程的设计师，那么Transition Designer特别切合你的心意。Flinto很强大，精确控制每一层，能够制作出一些非常复杂的转换，对于整个项目都很有用。使用Flinto可以创建一些小的交互和动画，实现多屏APP的整体流动（comprehensive flows）

功能介绍

1、转场动画

动效设计全新突破：无需编程无需时间轴，所有简单或复杂的转场动画，都可以快速制作，甚至可通过弹性函数和贝塞尔曲线微调每处细节。