交互设计工具篇

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速产品原型工具

优点：变化多端的操作，自带组件库并支持强大的第三方组件库，提供强大的交互支持，完整的教程及支持文档，支持原型预览。

缺点：学习难度相对有点高。

适用人群：适用于追求强交互效果及细节产品经理及设计师，需要具有一定经验或较强专业性。

Mockplus是一款简洁高效的免费产品原型工具。它为用户提供丰富的组件和图标资源，通过拖曳即可实现界面设计。

优点：学习成本低，快速上手，交互简单（只需拖曳），功能多样，组件资源丰富，支持8种预览方式和多种文件导出类型，支持团队协作。

缺点：不支持手势交互。

适用人群：各阶段的产品经理及UI/UX设计师，追求中低保真，交互效果，快速原型，新手或专业人群皆适宜。

POP是一款设计界面的原型工具，适用于iOS和Android平台。借助POP，开发者或设计师只需在纸上简单地描绘出创意或想法，拍下几张草图照片，并将照片按顺序放置，利用链接点描摹出各张图片之间的逻辑关系，就可轻松创建一个动态模型，点击播放即可演示整个模型。

优点：与Balsamiq等同类应用相比，POP的优势在于简单易用，学习成本低，生成快速且能被分享。

缺点：只支持低保真原型。对于被展示的客户或者团队成员，只知道产品的大概方向；交互效果复杂时不能很好地表达设计。

适用人群：追求手绘风格及快速原型的产品经理和设计师（对于短期内使用免费原型工具的人群来说，这也不失为一个好选择）。

另外sketch和XD也是可以实现简单的页面交互跳转效果的，而且易上手，对交互效果细节没有太多要求的情况下也是不错的一种选择。

AI：AI软件在UI设计工作中主要用来做UI界面设计、图标设计、字体设计、插画设计的

AE：AE软件在UI设计工作中主要用来做动效设计的

XD：XD或者sketch软件，Sketch（只能在苹果电脑上安装）XD软件可以在双系统上安装

Sketch和XD这两款软件功能是差不多的，XD的话是一款非常适合做UI设计工作，XD做图会非常快，因为XD的工具特别少，里面的工具是专门为做UI设计工作开发的一款软件，而且XD软件特别小，不会卡。

ARP：ARP或者默刀软件，ARP和默刀软件功能差不多二选一学习就可以了，这两款软件都是做原型设计的

UI设计是由很多很多界面组成的，这些界面每一步之间去交接的这个界面，如果说我们只做一个界面，UI设计师是可以做出来的，但是要做几十个上面个界面，如果我们一个个做是肯定会出问题的，所以需要先制作原型，我们根据原型再制作界面，这就是我们的前后联系，原型是不用做这个颜色，图标，细节的，只需搭建一个基础的版式就行，这个就是我们用ARP或者默刀软件做的。

C4D：C4D软件在UI设计工作中主要用来做建模的

蓝湖：蓝湖软件在UI设计工作中主要用来做标注设计的

就是我们做好了页面，这个页面的高底，宽度，包括页面的色值我们都需要标注出来，为什么需要标注呢，因为我们做的图，做完之后他就是张图片，这个图片我们用手机是点不了的，我们手机APP上的那些图之所以能点，那是因为有程序猿做了一个二次开发，这个东西我们不用懂，但是我们要标注出来，标注出来让程序猿知道你的颜色，你的色值，你的尺寸到时是多少，他才能开发出来。

一般来说，UI和UX都会用到这些工具

1. Mason

现如今，视觉稿（Mockup）和原型（Prototype）是网页和 APP 设计过程中最常用的方法。两种方式都很有效，不过也都可能会在时间和花销上对整个项目产生压力，影响团队和项目的整体推进，尤其是在时间和精力都非常有限而项目又非常复杂的情况下。

Mason 提供了一个更好的解决方案，它让你无需设计线框图、原型和视觉稿，而直接拿现成的组件来编辑和设计，并且确保最终输出的产品既具备功能，也是像素完美的，最后通过 Mason 的平台进行部署，甚至你都不需要有代码编写的经验。

Mason 的设计方法看起来很激进，但是实际上非常的易用。无论是调整还是维护，Mason 都能确保控件和元素都很容易处理。在 Mason 中修改、发布，然后就能正常使用。无需亲手编写代码，诸如注册、登录等各种常见的功能都能够正常输出使用。

这款工具并不会限制你将网站投放到特定的平台或者托管环境下，你可以在你最熟悉的服务器或者服务商那边部署。这可以大幅度节省管理费和时间，并且你会发现团队协作更加高效了。

2.摹客

这款国产的工具快速易用，Sketch / PS / XD / Figma / Axure / Mockplus设计稿一键上传 ， 设计评审讨论 ， 自动标注一键生成，手动标注自由发挥 。

1. 自动标注：

鼠标hover图层即可自动生成标注，一键转换为百分比标注，还可以放大镜查看细微标注。

2. 手动标注：

文字、坐标、颜色、尺寸、区域5种工具自由选择，信息传达更准确。

-用文字工具添加备注说明；

-用坐标工具添加位置信息；

-用颜色工具吸取图层，色值智能生成；

-用线段工具标注尺寸，数值自动生成；

-用区域工具标注局部图层，宽、高自动生成。

3. 单位自由转换：

支持iOS的pt，Android的dp，Web的rem，还可以保留0-3位小数，标注更自由。

4. 完整的标注属性：尺寸、边距、不透明度、字体大小、字重、行高、字间距等。相关属性一键复制即可使用。

除了智能的标注方式，摹客的切图、交互、全貌画板、文档管理等功能也很实用。最值得一提的是，摹客基础功能完全免费。

3. Overflow

设计师讲述故事最有效的办法之一，是将故事中的节点连在一起，将用户历程线性地呈现出来。这样的方式会让访客更好的理解他们所看到的内容，同时能够更加专注于细节的呈现，并且构建有效的反馈机制。

作为世界上第一个为设计师量身定制的用户流程图工具，Overflow 可以帮助设计师更好地讲述故事。它为设计师提供了一种全新的方式来更好的呈现作品，讲述故事，以交互式的流程同用户进行沟通，吸引用户的注意力。

Overflow 是一款跨平台的工具，可以与目前最流行的设计工具无缝地集成起来，允许设计师在同一个平台上完成设计、展示、共享和打印他们的用户流程。

4. UXPin

UXPin 可能是目前对于设计团队来说最理想的快速原型工具，尤其是当产品的 UX 设计和研发高度依赖快速反馈循环机制的时候。UXPin 可以让设计团队在向开发交付原型之前，充分地进行设计、共享和测试。

开发人员所需要的数据，实际上在每个项目设计完成之时，就会自动生成。所以，在将设计交付给开发人员之前，甚至可以使用检测工具，验证一下产品的部署是否和设计元素相互匹配。

UXPin 还提供一个完整的设计系统解决方案，帮助你保持整个产品的 UI 元素的一致性。而每个产品的 UI 组件都可以使用一段代码记录下来，因此可以更加轻松快速的扩展产品的功能。

5. Creately

UI/UX 设计当然不仅仅是线框图和视觉稿，它是动态的，系统化的，而这也是 Creately 这款工具的价值所在。这款图标工具适合生成工作流程，支持不同的图表类型，包括流程图、思维导图、UML 图标、线框图等。它所提供的图表功能和协同工作的功能，可以帮助设计师完成一半以上的工作。

使用 Creately 来创建图表，可以轻松创建出足够漂亮的图表，其中配备的1000多个专业的设计图表模板，可以快速地完成各式各样的 UX 设计项目。

6. PowerMockup

有许多 UX 设计师会使用 PowerPoint 来构建交互式原型，有了 PowerMockup 之后，你再也不需要寻找其他的工具来辅助你的工作了，它就可以帮你创建高效可共享的交互式原型。

在构建原型的时候，只需要从 PowerMockup 不断增长的资源库找到对应的形状或者设计元素，拖拽到 PowerPoint 当中，然后进行设计即可。为了实现互动，你所需要调用的也无非是 PowerPoint 当中的幻灯片和动画功能，很简单。

7. Visual Inspector

Visual Inspector 让设计师、开发者和负责维护的人员能够实时地在网站中检查和解决各种 UI 问题，并且同其他的工作人员随时共享信息。

这款工具不需要你懂得代码，只需要几秒钟就可以启用 UI 工具，并且几乎可以任何类型的网站（使用 HTML 代码，或者 WordPress 系统的）进行协同工作。这款工具不是免费的，终身授权的版本只需要付费49美元即可。

8. Fluid UI

Fluid UI 是一款可以用来设计线框图、原型图和视觉稿的综合性工具，它还为项目经理和分布式设计团队提供了非常完善的协作功能。它拥有非常全面的组件库，横跨桌面端、iOS 和 Android 等主流的、必须的平台。

WebFlow是一款 web app，你可以直接在浏览器中完成网站的视觉和交互设计，还包括实

时预览和代码编写功能。WebFlow的编辑器界面友好，所见即所得，设计师拥有完全的控制权。WebFlow一直在持续更新功能，包括Web字体，视频支持，交互的状态，W3C标准化，乃至于主机托管。

Marvel是一款免费的原型设计 Web 应用，可以进行网页设计和移动端的UI设计。和WebFlow一样，你可以使用Marvel完全在线完成设计，并且可以和你的Dropbox同步，可以方便你进行共享或者分享。值得一提的是，Marvel 支持PSD格式文档，也就是说你的视觉稿无需转换格式就可以使用。

Macaw 是一款桌面端的所见即所得的设计工具，实时代码预览，便捷输出。比较独特的是Macaw可以创建响应式设计，内置的断点编辑器可以帮你轻松地在不同尺寸的屏幕上实现完美的响应式显示。尽管Macow中的代码编辑功能并没有太大必要，但是最新版的Macaw在HTML和CSS代码编辑上体验还是蛮好的。

UXPin 是一款比较著名的设计类的web应用，用户可以借助UXPin在线协作完成线框图和原型的设计。UXPin旨在帮设计师快速便捷地进行线框图和原型设计，拥有完备的版本管理，支持响应式设计，通过拖拽预制控件进行UI设计。