产品原型图设计的三个基本要素（写给PM的简要PPT指南）

我们都知道，当前很多的互联网产品经理（Product Manager），都必须做“设计产品原型”的工作。这一工作要使用到的工具很多，像Axure、AdobeXD、Proto.io、Invision、Sketch等等都是非常常用的。

但是如果一个初出茅庐的PM还不太会用这些产品原型设计工具，或者时间紧迫怎么办？

此时就完全可以用PPT来做。最起码，5分钟做好自己思路想法的一个示意，是没有任何问题的。

那么今天，我就用一个实际例子，把具体的做法分享给大家。我们来复刻下面这个网站的导航效果：

即点击右上角的“三横线”导航图标后，出来一个导航菜单，列出网站所有栏目。导航菜单此时会变为一个“X”号，意为点击此“X”号可以关闭导航菜单。我们来复刻这个网站产品原型的效果和操作逻辑。

首先，我们制作这样三个基础页面，分别是：“The Team”、“Portfolio”和“Products”。

在第一个页面即“The Team”这一页面的右上角，制作一个图标，由三个短横线构成。打组后，Alt F10进入选择器，命名为“Menu Icon”：

手动画一个全屏矩形或用OK插件的“全屏矩形”功能，使之无边框，填充为黑色，透明度设为“40%”，命名为“Dark Overlay”:

再插入一个覆盖右侧一半屏幕的矩形，无边框，填充设为白色，命名为“White Sidebar”：

在选择器中，把刚才的“White Sidebar”、“Dark Overlay”都设为隐藏（即在右侧的眼睛上点一下，使之出现一条斜线，见下图），然后选中“Menu Icon”，复制一份，取消组合，删除其中一条线，做成“X”号，命名为“Close Icon”，移动使之与原“Menu Icon”重合：

“Close Icon”添加后，按系统默认是在最上层的。所以如果此时恢复“White Sidebar”、“Dark Overlay”层的显示，它会在所有元素的最上层：

在白色矩形上添加三个文本框，分别输入下图所示的文字，并命名为“The Team”、“Portfolio”和“Products”：

OK，到此为止，所有需要用到的元素都添加完毕。

现在我们为所有元素添加动画和相关操作逻辑。

先说说动画效果和操作逻辑应该是什么样子：

1. 当点击页面最开始右上角的“Menu Icon”（即由三条横线构成的那个图标）时，出现“Dark Overlay”、“White Sidebar”、“Close Icon”这三个元素和三个文本框，并且这些元素从右向左滑入页面；
2. 当点击“Close Icon”时，上述所有元素从左向右滑出；
3. 当滑入页面时，点击其中的文本框进入对应页面。

好，明确了动画效果和操作逻辑，我们动手：

选中“Dark Overlay”、“White Sidebar”、“Close Icon”、“The Team”、“Portfolio”、“Products”这六个元素（或者说“层”），统一添加“飞入”动画，方向为“自右侧”，持续时间设为“0.3秒”：

按刚才讲的操作逻辑，这六层的动画应该是点击“Menu Icon”后出现的，也就是说，“点击Menu Icon”这个行为是这个“飞入”动画的“触发器”。

所以，在六层元素都保持选中的情况下，在“动画”标签页下的“触发器”按钮那里，选择“通过单击”命令—>“Menu Icon”。这就意味着，单击“Menu Icon”后，执行“飞入”动画：

之后，仍然选中刚才的六个元素，单击“添加动画”按钮，选择“退出”类动画中的“飞出”，方向选择“到右侧”，触发器选择“Close Icon”。

这些操作完成后，菜单弹出和缩回的效果就制作好了。此时的动画窗格应该是下面这个样子：

下面我们制作点击文本跳转页面的效果。

这一效果要插入“动作”。选中第二个文本框“Portfolio”，点击“插入”标签页下的“动作”按钮，然后按下图操作：

第三个文本框“Products”也做同样的设置即可。

好啦，所有的元素添加和动画的设置就是这样啦。我们总结一下里面的逻辑：

• 40%透明度的全屏黑色矩形（“Dark Overlay”）的作用是菜单弹出时使底部页面变暗；
• 白色矩形（“White Sidebar”）是弹出式菜单；
• 通过“触发器”来控制动画；
• 通过“动作”来实现页面的跳转。

我们看一下最终的效果：

OK，今天的内容就是这些啦，大家学“废”了吗？操作熟练之后，本文开头所说的“5分钟”，一点都不夸张。

有任何疑问，请大家随时留言哟！

---

————壹分钟了解@斜杠前线————

Far more than PPT， 始于PPT，不止于Power Point，我是斜杠前线。

如果喜欢我的文章，记得关注我哟，一个有知识、有情趣、不会让你失望的头条干货主讲人~

,