交互设计=UI设计？

UI设计和交互设计是两个很容易混淆的概念。交互设计不等同于UI设计：

UI设计主要针对用户界面设计，更偏向于视觉美化。可能对前期需求分析、原型制作参与的不多，主要参与完成高保真的用户界面设计。UI设计的主要目的是赋予产品良好的视觉体验。

交互设计，又称互动设计。主要研究用户需求与界面体验之间的关系，是设计和定义使用者如何使用产品达到其目标，完成某一任务的过程。交互设计的主要目的是为了提升产品的可用性。

再精美的设计，没有交互，就如同好看的皮囊没有灵魂。交互赋予设计生命力，生动地阐述用户与产品间的互动关系。两者相当于产品的左膀右臂，都是不可或缺的存在。

为什么要进行交互演示？

一款产品往往都从一个很小的想法萌芽，慢慢引发一系列的实践，来验证其可行性。这期间的种种创意，都需要准确、快速地传达给工作伙伴。快速成型、利用交互演示来说明，可以说是最高效的方法之一。

交互演示不仅仅是静态界面的展示，它的可操作性可以让人在很短时间内理解交互逻辑，并快速作出反馈，提升沟通的效率。

在一次次的演示中验证想法，迭代、优化原型，在投入开发前就可以极大规避体验上面临的问题。对于整个项目周期也起到了非常重要的作用。

工欲善其事，必先利其器。作为产品设计行业的领跑者，摹客在交互演示这方面做得非常到位。

摹客交互演示的六大特色

除了常规的交互设置功能，摹客还具备以下特色：

丰富的动画和手势 —— 15种动画效果、8种手势，为交互设置添彩；

满足多种场景 —— 倒计时、延迟跳转、建立滚动区等效果轻松实现；

快速创建交互 —— 针对已有的切图区域，鼠标双击即可直接创建交互。不用再重复去拖拉一个交互区域了。

交互可复制 —— 同样的交互不必再逐个设置，交互可复制，减少重复工作量；

离线演示 —— 不仅仅可以在线分享，还可以下载离线演示包。即便是无网络情况下，也可以快速查看演示；

Sketch交互支持 —— 对于Sketch中已经设置的交互，上传至摹客中交互仍保留。

摹客交互演示怎么玩？

用起来才是王道！下面我们就来一探究竟吧：

● 如何在摹客中设置交互

● 摹客的手势交互、动画效果

● 如何设置页面的自动跳转

● 如何实现滚动区的设置

● 摹客的演示方式

● 原型一键分享

1. 如何在摹客中设置交互

在摹客中创建交互非常地简单，拖拽即可。但这其中也有一些小细节：

1.1 通过图层快速创建交互

主要用途：

● 登录、注册、关闭、返回等通过设计软件直接上传的图层。

操作方法：

● 如果设计稿是通过Sketch、XD或者PS上传的，并且进行了切图。

● 在摹客中，可以直接双击切图图层，建立交互热区。

● 然后选择目标即可完成交互的设置。

● 注：Sketch中的交互在摹客中仍保留。

● 注：当设计稿切图区域有变化时，重新上传后，该区域创建的交互会自动同步到变化后的区域。

1.2 自定义绘制交互热区

主要用途：

● 没有切图的设计稿，或指定特殊区域的交互。

操作方法：

● 左键按住，直接绘制矩形，建立交互热区。

● 然后选择目标即可完成交互的设置。

1.3 页面交互

主要用途：

● 适用于触碰屏幕任意区域都会跳转的情况。

操作方法：

● 项目树上选中一个页面。

● 在右侧属性面板的“目标”中选择一个目标页面即可。

1.4 克隆交互

主要用途：

● 一个交互在多页面中重复使用的情况。

操作方法：

● 在交互区域上右键“复制”。

● 然后在同页面或其它页面右键粘贴。

● 注：同页面中，按住Alt键拖动，也可快速克隆一个交互。

2. 摹客的手势交互、动画效果

摹客提供了8种手势、15种动画效果，能满足大多数的交互需求。

主要用途：

● 演示时需要用到双击、点击、左划、右划等手势；

● 需要用到淡入、左推入、上推入、放大、缩小等翻页效果的情况。

操作方法：

● 创建好交互后，在属性面板“触发”的选项中选择任意一个手势。

● 在属性面板“动画设置”的选项中选择任意一个效果。

● 演示时，手势和效果便会生效。

3. 如何设置页面的自动跳转

主要用途：

● 适用于App首次打开的3秒广告弹屏、倒计时后跳转页面等场景。

操作方法：

● 创建页面交互。

● 在属性面板“延迟时间”的选项中设定一个延迟时间。

● 演示时，该页面便会按照设定的延迟时间再跳转下一页面。

4. 如何实现滚动区的设置

主要用途：

● 适用于长页面滚动，固定头部、底部，内容模块滚动等场景。

操作方法：

● 拖动页面左侧的游标，或手动输入游标距顶部的像素值。

● 两个游标之间的位置可滚动，其余区域则被固定。

5. 摹客的演示方式

● 查看当前页面的交互效果，可以选择从“当前页开始”演示；

● 若是给客户演示整个项目，可以选择“从首页开始”演示。

Android、iOS、平板等设备流畅切换，画面自适应，仅一个项目就可以查看多种设备上的演示效果。

6. 原型一键分享

原型交互制作完成，最重要的一个环节就是分享给同事、客户进行查看。不受地点、设备等等的限制，随时可以查看分享的原型，就是最理想的情况。

在摹客中一键分享便可以快速生成链接，该链接在PC端、手机端浏览器中都可以查看。

即使是在网络受限制的区域，也不用担心。摹客支持导出离线演示包，在无网络的情况下，也可以在PC端通过离线演示包查看原型。

总之，交互演示是一种高效的沟通方式，能很大程度上模拟真实应用。它涉及到界面结构和逻辑、用户的操作习惯与体验、不同场景的异常情况等等很多方面。在这些都完善了的情况下，即可快速、准确地将需求传达到位，并且还能有所体验。试试摹客，把你的交互演示做得更棒！

写在最后

摹客作为高效的设计协作平台，支持PS/Sketch/Adobe XD/Axure设计图、自动标注切图、高保真原型设计、设计规范管理。为了让更多设计师获得高效的设计协作体验，100人以下团队均可在摹客免费协作。 

点击链接，立即体验： https://app.mockplus.cn/app

Powered by Froala Editor