首页 > 其他分享 >摹客RP丨强大交互功能,真实产品体验一步到位!

摹客RP丨强大交互功能,真实产品体验一步到位!

时间:2023-06-06 14:32:01浏览次数:55  
标签:RP 效果 摹客 一步到位 设置 交互 弹窗

动态交互效果是原型项目的灵魂,也是原型与设计产出物的关键区别。一个好的交互设置不仅能准确地传达静态界面难以表达的逻辑、流程和细节体验,还能呈现出丰富精彩的视觉效果,提高项目的质量。对于产品经理来说,学会交互设计是必不可少的技能。

在原型设计工具中,交互功能的重要性不言而喻。如果你正在寻找一款功能强大、操作高效且简单易用的原型设计工具,那么摹客RP是不可或缺的选择。

那么,摹客RP究竟提供了哪些交互功能?它能够实现怎样的效果?又该如何使用呢?

接下来我们一起走近摹客RP的强大交互功能吧!

交互设置的五大要素

摹客RP的交互设置由5大要素构成,分别是:

  • 触发源:用户主动施加操作事件的对象。如,点击按钮以显示弹窗的交互效果中,按钮就是触发源。
  • 交互目标:执行给定交互命令(动作)的元素。如,点击按钮以显示弹窗的交互效果中,弹窗就是交互目标。在一些情况下,触发源和交互目标可以是相同元素。

摹客RP丨强大交互功能,真实产品体验一步到位!_圆角矩形

  • 触发方式:使交互设置开始工作的要素。软件中常见的触发方式有点击、右键、滑动等。

摹客RP丨强大交互功能,真实产品体验一步到位!_圆角矩形_02

  • 命令:交互目标执行的具体动作。常见的交互命令有显示/隐藏、移动、旋转、缩放等。

摹客RP丨强大交互功能,真实产品体验一步到位!_自定义_03

  • 效果:交互设置所呈现的细节动态效果,主要受缓动、时长、延时影响。

摹客RP丨强大交互功能,真实产品体验一步到位!_自定义_04

通过这5大要素的组合,可以呈现出丰富多样的交互效果。而了解了这5大要素,我们就能更好地理解接下来的内容。

丰富的交互类型

摹客RP的强大交互能力,是由各种交互类型组合而成的,一共有四种交互类型:

页面交互

页面交互是原型设计中最常用也最简单的交互类型,主要是用于制作页面跳转、切换的效果。在摹客RP中,制作页面交互非常简单,简单三步,数秒就能完成:

  1. 选中交互触发源,拖动交互链接点;
  2. 链接到页面树的目标页面上;
  3. 在设置弹窗中,按需设置交互参数。

摹客RP丨强大交互功能,真实产品体验一步到位!_自定义_05

命令交互

命令交互是摹客RP交互功能的基础与核心,你可以将命令交互理解为元素与元素之间的交互,它可以让我们选定的交互目标去执行给定的交互命令。

命令交互的设置方式同样很简单:

  1. 选中交互触发源,并将交互链接点拖到交互目标上即可。
  2. 在交互设置弹窗中,我们可以根据需要选择不同的交互命令,通过让交互目标执行显示/隐藏、缩放、旋转等动作,并组合搭配起来,可以实现产品界面中非常多的动态效果。

摹客RP丨强大交互功能,真实产品体验一步到位!_圆角矩形_06

状态交互

状态交互是给同一个元素设置不同的状态,在演示的时候通过让元素切换状态,从而实现动态效果的交互类型。

想要设置状态交互,只需要选中图层,从顶部工具栏中打开状态面板。在状态面板中,可以启用并修改元素的预设状态,也可以添加自定义状态。

这里我们一起做一个悬停使元素变色的效果:

  1. 创建一个矩形组件;
  2. 选中矩形并打开状态面板,开启悬停状态;
  3. 在属性面板中直接修改填充色,就设置好啦!

摹客RP丨强大交互功能,真实产品体验一步到位!_圆角矩形_07

画板交互

画板交互是基于多画板模式的交互类型,也就是画板与画板之间的交互。

使用辅助画板可以很方便地制作弹窗效果。只需要选中触发源,拖动交互链接点并选中辅助画板,就能使辅助画板在演示时叠加在主画板上,从而实现弹窗效果了。

摹客RP所有的交互功能都逃不出以上四种交互类型。当然,越为复杂的效果,通常需要综合运用多种交互类型设置来实现。

摹客RP丨强大交互功能,真实产品体验一步到位!_原型设计_08

交互效果与设置

灵活地调整交互效果,能够让你的项目呈现更细腻、更真实的动态视觉效果。我们一起来看看摹客RP必须要掌握的3种交互效果设置吧。

  • 缓动:你可以理解为动作执行的速率。你可以控制交互目标线性(匀速)、减速或是变速运动。
  • 时长:用于控制交互动作执行的时间。通过设置时长参数,你可以控制元素从A点移动到B点时,是瞬间移动,还是在给定时间内完成移动。
  • 延时:用于设置停顿、间隔的效果。如果你想制作浮窗显示3s后自动隐藏的效果,只需要给浮窗先后添加显示和隐藏的命令,再给隐藏命令设置3000ms的延时效果就可以啦。

摹客RP丨强大交互功能,真实产品体验一步到位!_自定义_09

在交互面板的命令列表右上角,还有两个不得不提的交互设置,在一些情况能让你事半功倍。它们就是自动还原同时工作

  • 自动还原:能够让你交互设置在第二次被触发时,将所有的交互动作倒转回去。例:设置点击显示弹窗后,只需要开启“自动还原”,那么点击1次可以显示弹窗,再点击1次就可以使弹窗隐藏回去。
  • 同时工作:能够让所有的交互命令同时开始运行。默认情况下,所有的交互命令是依次执行的,而如果开启此设置,所有的命令就会同时开始工作了。

摹客RP丨强大交互功能,真实产品体验一步到位!_圆角矩形_10

如果觉得这些效果和设置还不太好理解,那么就接着看看下面的实操范例吧。

如何使用摹客RP自制开关组件?

接下来我们用命令交互+状态交互,为大家分步骤演示如何使用摹客RP自制开关组件。

  1. 准备好开关的构成元素:圆角矩形和圆形,并将它们编组;

摹客RP丨强大交互功能,真实产品体验一步到位!_原型设计_11

  1. 修改圆角矩形“选中”状态下的填充色为蓝色;

摹客RP丨强大交互功能,真实产品体验一步到位!_自定义_12

  1. 为圆形添加一个自定义状态“状态1”(自定义状态下可以单独为元素设置不同的位置),并修改此状态下圆形的位置至右侧。

摹客RP丨强大交互功能,真实产品体验一步到位!_原型设计_13

  1. 点击编组,拖动链接点,先将矩形作为目标,并设置切换至“选中”状态交互。

摹客RP丨强大交互功能,真实产品体验一步到位!_原型设计_14

  1. 再拖动编组的链接点,将圆形作为目标,并设置切换至“状态1”的交互。
  2. 在右侧交互面板中,开启“自动还原”和“同时工作”,就完成所有的设置了。

摹客RP丨强大交互功能,真实产品体验一步到位!_圆角矩形_15

想要看看实际的演示效果?那还不赶紧自己动手试试。

标签:RP,效果,摹客,一步到位,设置,交互,弹窗
From: https://blog.51cto.com/u_9540389/6424406

相关文章

  • BurpSuite设置禁止显示的域名
       在做测试时,经常出现一些不想显示的域名,需要对这些域名进行禁用。通过研究发现可以通过Burpsuite自身的设置来实现,但该方法仅仅支持设置一条记录。1.详细设置方法(1)about:config(2)network.captive-portal-service.enabled输入后,单击双向按钮,修改其值由true变成false即可。......
  • 13、基于 VRRP Script 实现其它应用的高可用性(Haproxy和Nginx)
    基于VRRPScript实现其它应用的高可用性keepalived利用VRRPScript技术,可以调用外部的辅助脚本进行资源监控,并根据监控的结果实现优先动态调整,从而实现其它应用的高可用性功能VRRPScript配置分两步实现定义脚本:vrrp_script:自定义资源监控脚本,vrrp实例根据脚本返回值,公共......
  • 欧奈儿行业 RPS 排名,一图览全貌 2023-06-05 ,继续跟踪总结
    自动复盘2023-06-05k线图是最好的老师,点击详情图可以看到行业20日RPS的排名,最底下子图是行业rps走势线跟踪板块总结:成交额超过100亿排名靠前,macd柱由绿转红公众hao:醉卧梦星河欧奈尔行业RPS排名天天更新追踪主力行业趋势更容......
  • 利用frp进行内网穿透,实现本地web服务向外提供(https)
    0x01先决条件有一台公网服务器0x02初始项目把frps放到公网服务器把frpc放到内网服务器0x03服务端配置[common]bind_port=2333#frp服务端口token=token@xxxx#认证口令allow_ports=443,80#开放的端口,限制后增加安全0x04客户端配置[common]server_addr=......
  • grpc 与http比较,具有哪些优势
    更高的性能:gRPC使用ProtocolBuffers作为默认的数据序列化工具,相比于JSON等文本格式,它的编码和解码速度更快,传输的数据量更小,因此可以更快地处理大量的请求和响应。更小的带宽占用:由于使用二进制数据格式,gRPC的数据传输量比HTTP更小,因此可以降低网络传输的带宽占用。支持......
  • 写给go开发者的gRPC教程-通信安全
    使用TLS安全传输数据什么是SSL/TLSSSL包含记录层(RecordLayer)和传输层[1],记录层协议确定传输层数据的封装格式。传输层安全协议使用X.509[2]认证,之后利用非对称加密演算来对通信方做身份认证,之后交换对称密匙作为会话密匙(Sessionkey[3])。这个会谈密匙是用来将通信两方交换......
  • brpc - ResourcePool
    资源池ResourcePoolResourcePool<T>::singleton()->get_resource(id,arg1);template<typenameT>classResourcePool{...}是个类模板,单例模式。主要成员:get_resource/return_resource有个LocalPool成员,依赖它实现get和return。LocalPool有一个概念是FreeChunk,......
  • DeRPnStiNK靶场实战
    实验环境靶机:10.10.10.147kali:10.10.10.128靶机地址:渗透过程1.主机发现netdiscover-ieth0-r10.10.10.0/242.服务探测nmap-sS-sV-p-10.10.10.147思路:21、22端口可能存在爆破。3.浏览器查看web服务目标主机开放了web服务,那就浏览器查看有没有什么漏洞或......
  • Install Elasticsearch 2.x on CentOS 6 by rpm
     http://techieroop.com/install-elasticsearch-2-x-on-centos-6/ ThisarticlewillcoverinstallElasticsearch2.xversiononCentOS6.AlsoguidelinetochangetoDefaultClusterandIndexsettingsinElasticsearch2.x.SoLet’sstartwithprerequisitesPrer......
  • 这一次,带你玩转gRPC框架
    前言大家好,先做一下自我介绍我叫BarryYan,目前是一名互联网公司的研发工程师,同时也是后端技术领域的狂热爱好者和技术博主,在GitHub、CSDN社区、51CTO博客社区、阿里云技术社区、掘金技术社区和InfoQ写作社区等都有自己的博客,原创200余篇。虽然刚刚大学本科毕业不到一年,但是算上实......