主流原型设计工具介绍

1.Mockplus

主要用于设计中低保真、快速的手机端和Web网站场景。是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。

特点：

1.审阅协作。

2.创建原型图、邀请、批注图钉，之后就可以协同工作了。所有的讨论、意见、版本，都会保留。

3.无缝真机预览。

4.可直接实现设计和移动设备之间的通讯，直接预览，不需要任何第三方设备。在设计过程中，设计者拿出手机就可以随时和Mockplus对接，将原型传递到移动设备，观察原型在移动设备中的真实状态。

 

使用教程：

 

https://www.jianshu.com/p/f0694a65d7f2

1.打开Mockplus，点击新建项目，选择“手机”项目类型与合适的页面尺寸，点击“确定”即创建成功。

2.底部导航栏制作：在左侧图标选项卡中搜索你想要的图标，配合单行文字组件，只需数秒即可完成底部导航栏制作。将图标与单行文字编为组，大小、样式、文字均可编辑。

 3.制作原型内容页面：在项目树中新建三个内容页面，在左侧的组件选项卡中搜索需要的组件，拖拽应用即可。

首页”页面用到的组件：形状组件、搜索框组件、图片组件、多行文字组件。

“发现”页面用到的组件：形状组件、图片组件、多行文字组件

“我的”页面用到的组件：图标组件、多行文字组件、按钮组件

Mockplus提供接近200个封装组件和3000个以上的图标素材，同时支持订阅组件库，在最大程度上满足您的原型设计需求。

 4.使用内容面板快速切换内容

4.1.拖出内容面板，点击“+”创建3个层，每层分别拖拽链接点连接到三个内容页面。

4.2.将底部导航栏的三个选项依次连接到内容面板的三个层

5.演示与分享

在Mockplus中，您可以通过8种方式演示与分享：

1.直接演示。

按下F5，或点击顶部工具栏中的“演示”即可。

2.在线发布为HTML5网页。

在主工具栏，点击“发布并分享”。发布完成后，即可获得一个网页链接地址，复制这个地址，将它发送给同事或客户。

3.导出HTML5的离线包

在主菜单中选择“导出”、“导出HTML演示”。

4.导出可独立运行的演示包（.exe或.app）。

在主菜单中选择“导出”、“导出演示包”。

5.输入原型码，在手机中查看原型。

在主工具栏，点击“发布”。发布完成后，即可获得一个原型码，将这个原型码发送给同事或客户。

6.扫描二维码在手机中查看原型

直接扫码。发布项目后，用手机在浏览器中扫码，或者把二维码截图发给同事或客户。

7.导出图片

主菜单，“导出”，“导出图片”。支持JPG和PNG两种格式。

8.导出项目树

主菜单，“导出”、“导出项目树”。

 

2.UXPin

 

主要用于响应体验设计。

 

特点：

 

1.元素状态：同一个元素或组件可以设置多组状态。这些状态可以用于交互动画中，也可以作为组件的样式覆盖，你甚至还可以嵌套组合不同的状态，来灵活使用它们。

2.支持变量和条件：变量的值支持表达式，UXPin 内置了一些基本表达式，比如数学中的绝对值、四舍五入，手机、邮箱、日期格式判定，以及设备窗口尺寸等。你可以使用这些表达式来处理变量，实现自己的定制化需求，让你的交互效果进入更高一级的层次。

3.无障碍：UXPin 提供了两个无障碍功能：色彩对比分析和色盲模拟。色彩对比分析会基于 WCAG 2.0 标准帮你自动判断文字颜色和背景色之间的对比度是否足够。色盲模拟则可以帮助你模拟不同色盲眼中你的设计稿的样子。

4.CSS样式：在 UXPin 中除了通过右侧属性面板给元素设置样式，你还可以直接编写 CSS 代码。

5.响应式断点：在 UXPin 中，你可以自己设置断点，并为每一个断点区间做样式调整。在预览时，你也可以通过切换断点来观看不同尺寸下的效果。

6.迭代：UXPin 提供迭代功能，也就是允许你在某一时刻创建一个版本，你可以随时找到它，进行查看或编辑。

7.文档：一般我们会在一些文档工具中书写需求 或产品文档，会把对应的设计截图贴在里面，这样就需要在多个工具中切换。UXPin 将文档功能融合进来了，你可以直接在里面写文档，并将段落直接关联到某个设计元素。

8.设计系统：你可以直接从现有的文件中创建，然后在里面继续添加一些其他的样式或组件。这样，在你的设计文件中就可以直接使用这里面的样式或组件了。

 

使用教程：

 

https://coffee.pmcaff.com/article/796716203752576/pmcaff?utm_source=forum&pmc_param=1

 

3.Flinto

 

主要用于高保真设计（手机或者桌面）。

 

特点：

 

1.手势交互：通过创建系统原生的手势滑动交互操作，来自然流畅地过渡您的转场动画或屏幕导航，一切都是丝丝顺滑，不会有丝毫的瑕疵或不适之处。

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

3.灵活滚动：最简单添加屏幕区域滚动的方式，一键快捷设置多个图层组竖向或横向滚动，支持滚动定位、弹性、进度条颜色等各选项调整。

4.Sketch导入:与Sketch无缝结合，Flinto For Sketch插件支持一键快速将设计稿导入Flinto画板，生成Flinto文件，供您专注交互原型创作。

5.实时预览：Mac和iOS同步实时预览，所有原型改动可直接在Mac预览窗口演示，或Wi-Fi连接iPhone/iPad上的Flinto应用，即可真机操作模拟演示。

6.分享原型：Flinto在iOS App Store中是免费下载的，所以你可以将原型作品分享给任何人的设备，在他们的iPhone上预览您的原型设计。

使用教程：

https://www.bilibili.com/video/av15814287/

 

 

总结：
 主要介绍这三种主流原型设计工具，三种工具分别用于不同的场景，可以根据场景特点进行挑选，用更适合的工具进行工作。