主流原型设计工具介绍

一.简介

原型设计是交互设计师与PD、PM、网站开发工程师沟通最好的工具。原型设计让设计师和开发者将基本的概念和构想形象化的呈现出来，让参与进来的每个人都可以查看、使用并且给予反馈，并且在最终版本定下来之前进行必要的调整。原型是帮助网站与APP设计最终完成标准化和系统化的最好手段，它可以有效地避免重要元素被忽略，也能够阻止你作出不准确不合理的假设。目前常见的原型设计工具有axure、墨刀、Mockplus、Sketch等，其中最常用的原型图工具包括axure和墨刀。本篇博客也将主要介绍axure和墨刀的特点和使用方法。

二.详细介绍

 

Axure 是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。Axure作为老牌的原型设计工具，功能最齐全，交互最多样，模板资源最丰富，基本任何想要的效果都可以实现，尤其在制作pc端原型图上有优势。Axure的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的线框图。不用进行编程，就可以在线框图上定义简单连接和高级交互。在线框图的基础上，可以自动生成HTML原型和Word格式的规格。Axure的工作界面主要由主菜单和工具栏、站点地图面板、控件面板、模块面板、线框图工作区、页面注释和交互区、控件交互面板、控件注释面板组成。

墨刀是一款在线设计编辑原型的工具，特点方便快捷，适合一些APP，小型pc工程，以及一些频繁迭代的产品，优点协同办公效率比较高，目前国内个别大公司以及中小企业都有用到，个人版本免费，但是使用页面数量有限，编辑后产品都是保存直接保存在云上，十分方便。

作为两个热门的原型设计工具，两个软件自然各有千秋。在组件方面，墨刀自带了很多成熟的组件，例如键盘、开关、手机模型等，而axure在这方面稍显单薄，只有一些基础元件。在交互方面，墨刀简单快捷，axure则比较灵活。墨刀做交互特别简单，只要拖动其各种元件右边的这根线，即可链接打开各种页面。Axure要做交互，则需要设置各种条件，或者输入各种用例，通过条件，动态面板状态，隐藏，切换等功能才能形成交互效果。有利有弊，虽然操作麻烦一点，但是特别灵活，可以在一个页面完成各种交互。总的来说，墨刀简化了基础的操作，像是封装好的函数，可以直接使用。Axure则是将内部的逻辑结构表示得更加清晰。     

三.举例说明

接下来，我将使用墨刀对简单的登录系统进行原型设计

 

中间的是项目的编辑页面，中部的左侧以及顶部边框标注着的数字是像素，用来准对页面的宽度与高度以及页面内组件的位置；最左侧一列素材工具栏——用于直接将素材拖入页面中，页面栏——用于编辑和切换各页面；右侧工具栏包含组件及图标等素材，最右侧外观栏——当你选中某个组件时可在其中编辑外观的各种参数；上方工具栏最右侧的运行按键可以模拟运行时的页面操作。

以下是我创建的简单的登录注册界面：