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

https://appstore.lazycat.cloud/#/shop/detail/io.zeroc.app.penpot

我在之前的文章《[Penpot：用懒猫做专业设计](https://lazycat.cloud/playground/guideline/693)》中讲解了怎样用Penpot做专业的界面设计，但基本上是基于静态画面的。

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

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

![屏幕截图 2025-08-24 212538.png](https://dl.playground.lazycat.cloud/guidelines/319/0c2b1925-0996-489f-bf9a-b4305f55bedd.png "屏幕截图 2025-08-24 212538.png")

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

![屏幕截图 2025-08-24 212555.png](https://dl.playground.lazycat.cloud/guidelines/319/964349c3-43fd-4368-8367-8f331a1e955f.png "屏幕截图 2025-08-24 212555.png")

你可以随便画一个大小，然后在右栏中选择预设的尺寸。
![image.png](https://dl.playground.lazycat.cloud/guidelines/319/1be24e52-2554-48c9-8d42-5e335edb319b.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/3f546043-0026-48b5-be58-018c198107f3.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/b7d881f1-5283-4afe-9e25-a0ca36ee5384.png "image.png")

在画面上画一个主体矩形，在限制设置中让它居左下右三方对齐。
![image.png](https://dl.playground.lazycat.cloud/guidelines/319/638cd14f-a4bf-462e-be7c-25a6dddbeeae.png "image.png")

再画一个顶部的Header，居左上右三方对齐。
![image.png](https://dl.playground.lazycat.cloud/guidelines/319/32a749d6-9d10-4e96-9106-ac0adf8e6fdc.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/8895e366-f4f0-45cf-99df-3d353f8ec0d1.png "image.png")

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

![屏幕截图 2025-08-24 222042.png](https://dl.playground.lazycat.cloud/guidelines/319/5d753c0d-dd06-4ab5-b229-58700c8b751b.png "屏幕截图 2025-08-24 222042.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/c24d3d5a-d9ca-4664-b05c-4a16214538c2.png "image.png")


为了演示交互，我们再创建一个圆角矩形和文字，同时选中后创建组件，取名为listBtn。
![image.png](https://dl.playground.lazycat.cloud/guidelines/319/8ac954ee-b073-409c-a7de-8c80cbc5d1d8.png "image.png")


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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/58c3dad6-d17f-4a60-b826-4422aa8961c4.png "image.png")

双击进入组件编辑模式，改变一下圆形的颜色，可以看到在list界面的Logo也同时改变了颜色，说明组件是关联的，以后细化的时候可以随时修改。
![image.png](https://dl.playground.lazycat.cloud/guidelines/319/11727137-32eb-4ac8-b82a-54bea08d7fdb.png "image.png")

现在在右栏选择我们之前没有提到过的“原型”tab，在添加交互之前，这里是空的，只显示基本的使用方法。
![image.png](https://dl.playground.lazycat.cloud/guidelines/319/cea49716-ab22-49a4-933f-60a4bbcde621.png "image.png")
选中listBtn，它的右侧会出现一个小键头，把它拖拽到list界面上，就自动建立了一个页面链接。

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/dd5b48c3-b156-4860-ac89-91ecd33cb07a.png "image.png")

再从list页的小Logo上拖出线条，连接到home界面，一个基本的交互闭环就
![image.png](https://dl.playground.lazycat.cloud/guidelines/319/427be45c-542a-4c9f-932d-d757eb4f9001.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/68c1bf8f-ca7b-477c-99cf-dc6de5f9c387.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/039c1d48-5863-4575-94d7-ad6fe7b1804f.png "image.png")

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

https://dl.playground.lazycat.cloud/guidelines/319/b2b9ad93-8515-4774-8133-51eaf4a4cb3b.mp4

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/6cabc6a3-361d-4d38-865f-ca0a88adc52c.png "image.png")

同样按Ctrl+D把list界面复制一份，改名为settings，并在两个页面上分别加上标题以示区分。
![image.png](https://dl.playground.lazycat.cloud/guidelines/319/bf6a6b73-04c2-4f1e-b07b-2b8a1c69376b.png "image.png")

Settings页面上的logo会继承list上的互动，所以不需要管它，只需要把Settings按钮的链接关系从list改到settings界面。
![image.png](https://dl.playground.lazycat.cloud/guidelines/319/911f1b90-e3c9-4f14-9e50-6d595bc3d0a8.png "image.png")

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

https://dl.playground.lazycat.cloud/guidelines/319/5b638a76-a1eb-407b-b05a-63bf00aa0247.mp4

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

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/19d7e556-e2e4-4cbb-84b9-307f0189e9e5.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/dbcc1a8d-cb9d-4bb8-994d-ae8d32682283.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/186e83e7-d32e-492a-a307-e5f8e1c057bc.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/319/b8370fc8-ff26-4751-8cb8-ad5f669f6dff.png "image.png")

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

https://dl.playground.lazycat.cloud/guidelines/319/86d5a7a3-fc2a-4fc5-a440-67ebdc6c1490.mp4

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