交互逻辑轻松表达,一文看懂连接线的妙用之处!

MasterGo

官方 · 2023年02月27日

5-1.png

正如大家看到的,近期 MasterGo 上线了许多强大且实用的功能。

为了让大家更好地理解并快速上手,我们会不定期挑选一些常用、有趣的功能进行深度讲解。而本期想要向大家介绍的是,呼声很高且一上线就受到一致好评的硬核功能——「连接线」。

5-2.gif

如上图展示的一样,

简而言之,「连接线」就是快速在不同组件和页面之间创建连线并添加文字说明,从而直观展现其交互逻辑,让产品设计思路更可视化地呈现。

看似这只是个小功能,但却有很大用处哦!接下来,我们从应用场景和上手攻略两个方向开聊,希望这些信息能为大家提供更多使用参考~当然,如果你已经了解如何使用「连接线」,可以直接滑到文章末尾参与 MasterGo 中秋限时活动,将有机会获得精美礼品哦~

空行.png

01 更便捷的逻辑连线,交互关系直观呈现

在交互设计师和产品经理日常工作中,逻辑连线是会被频繁使用的表达页面逻辑、跳转层级等交互关系的方式。 MasterGo 新上线的「连接线」工具,不仅可以用来绘制页面逻辑关系,还有着如下贴心的细节设计。 空行.png

为多类图层添加连线

绘制页面交互逻辑时,除了为多个页面添加连线,还需要绘制页面与元素、元素与元素等跳转关系。

MasterGo 支持为矩形、圆、多边形、星形、图片、钢笔路径、组件/实例、容器/组等多种图层类型添加连接线,以便更详尽地展示逻辑关系,满足多样化页面交互需求。

5-3.png

空行.png

连接线跟随图层移动

绘制页面交互关系时,如果逻辑连线无法自动跟随页面移动,那么每次移动完页面还要手动逐一调整连线位置,十分费时费力。

考虑到这一点,MasterGo 连接线工具支持自动跟随页面/图层移动,无需手动调整,操作起来更方便!

5-4.gif 空行.png

自由调整连线路径

面对复杂交互设计,如果不能很好地整理连线路径,会让页面看起来杂乱无章,影响交互关系的清晰表达。

MasterGo 连接线工具支持通过拖动连线手柄调整连线路径,再复杂的交互页面也能干净规整地被展示。

5-5.gif

另外,这里还有一个隐藏小技巧,如果不满意调整后的路径,可以双击连接线手柄恢复到初始状态。 空行.png

便捷添加连线说明

添加说明注释时,采用单独创建文本的方式会存在一个弊端:连接线与文本是各自独立的,连接线位置若有变动,需要手动将文本调整到连接线上,操作起来会比较麻烦。

而使用 MasterGo 的连接线工具,双击连接线即可直接在线上添加说明注释,操作更简单便捷,还可自由拖动文本框,文本会始终保持在连接线上。

5-6.gif

总而言之,「连接线」工具可以很好地支持页面交互关系的绘制工作,给予交互设计师和产品经理更便捷的使用体验!

了解「连接线」的用途后,我们该如何使用「连接线」工具呢?请接着往下看 空行.png

02 如何快速上手连接线?

如何启动连接线工具?

点击工具栏中的连接线按钮,或使用快捷键 X,即可开启连接线工具。 5-7.png 空行.png

如何调整连接点?

鼠标拖动连接点,可以自由调整连接线起始点的位置。 5-8.gif

空行.png ■ *如何改变连接线路径?

鼠标拖动连接线上的蓝色手柄,可以调整逻辑连线的路径。 5-9.gif 空行.png

如何修改说明文字效果?

编辑连接线的说明文本后,想要修改文字效果时,可以在右侧属性面板中修改字体样式和颜色等等效果。 5-10.gif

空行.png如何改变连接线形状?

想要改变连接线的效果,可以在右侧属性面板处,像调整普通描边线一样,调整连接线的粗细、起始点形状以及自定义虚、实线。 5-11.gif