Penpot进阶：简单制作交互模型

我在之前的文章《Penpot：用懒猫做专业设计》中讲解了怎样用Penpot做专业的界面设计，但基本上是基于静态画面的。

实际上Penpot还有一个强大的功能是交互设计，只需要简单的拖拽就可以做出可以交互的原因，在界面设计上非常有用。

首先让我们参照前文的方式登录并打开Penpot：

这次主要会用到“画板”这个工具，画板在做视觉设计时是一个图片的容器，但在交互时就相当于一个界面。

你可以随便画一个大小，然后在右栏中选择预设的尺寸。

让我们选一个基本的1024x768尺雨的web界面，这次我只是做一个演示性的界面，我们在左栏中给这个界面取名为home。

选中home画板后，只需要按Ctrl+D，就会在旁边建一个完全同样大小的画板副本，让我们给它取名list。

在画面上画一个主体矩形，在限制设置中让它居左下右三方对齐。

再画一个顶部的Header，居左上右三方对齐。

最后再画一个圆，做为Logo的替代品，把它放在中央合适的位置。

分别选择Logo和Header，在右键菜单里找到“创建组件”把它们分别建成两个组件。

可以看到左栏中的图标样式发生了变化，变成了组件的图标。

为了演示交互，我们再创建一个圆角矩形和文字，同时选中后创建组件，取名为listBtn。

将Header和Logo复制到list页面，并改变Logo的大小和位置，让它居于Header的左方。

双击进入组件编辑模式，改变一下圆形的颜色，可以看到在list界面的Logo也同时改变了颜色，说明组件是关联的，以后细化的时候可以随时修改。

现在在右栏选择我们之前没有提到过的“原型”tab，在添加交互之前，这里是空的，只显示基本的使用方法。

选中listBtn，它的右侧会出现一个小键头，把它拖拽到list界面上，就自动建立了一个页面链接。

再从list页的小Logo上拖出线条，连接到home界面，一个基本的交互闭环就

此时点击位于界面最右上角的“执行”图标，就可以在新窗口中打开交互原型了。

交互原形中是我们首页的样子。

测试一下操作，交互很正常。

接下来我们复制一下List按钮，先要将它从原来的组件“解绑”（在右键菜单中），然后重新创建组件，我们叫它SettingsBtn。

同样按Ctrl+D把list界面复制一份，改名为settings，并在两个页面上分别加上标题以示区分。

Settings页面上的logo会继承list上的互动，所以不需要管它，只需要把Settings按钮的链接关系从list改到settings界面。

看一下效果，一个多页面的交互原型就做好了。

界面间的交互我们学会了，那本页内的界面怎么办？

让我们画一个简化了的模态窗口，这上面只有一个红色的“关闭”按钮，并把它生成组件。

双击进入模态窗口的组件编辑，选择关闭按钮，在右栏中给它手动添加这样的交互，让它“关闭自己”（这里是指模态组件本身）

再给首页的主LOGO加上这样的交互，让它被点击后可以打开这个模态窗口。

因为上一步设置了打开时相对home界面的中心，所以模态窗口不一定要放在画面当中，可以拖到画布之外。这样来看更直观一些。

最后测试一下，发现点击主logo可以正常打开模态对话框，在对话框中点击关闭按钮或外侧空白处，都可以关闭这个对话框。

是不是很简单，一个流畅的交互原型就这样做好了，可以用来指导具体的视觉设计和编码了。