墨刀公测&设计大赛「优秀奖」— 苹果官网原型教程

墨墨姐：此篇教程来自墨刀公测&设计大赛的「优秀奖」获得者 刘钰德，作品很赞，教程写的也很清晰明了 大家一起来学习下吧 ～

首先感谢墨刀平台组织的本次活动，虽然没拿大奖，但是通过这次活动发现了墨刀一些令人惊喜的功能，比如获得一等奖获得者做的一个完整版游戏，只能说屌，大致看了其它一些参赛选手做的原型，仔细对比之后发现，感觉他们做的是高保真，我做的才是原型（手动捂脸）；总之，这次参赛还是收获颇多的。

先看下我做了个啥，见下图：

作品地址：点击查看
苹果官网：www.apple.com

为啥要做这个？也是临时想到的，当时墨刀官方发布了一个AirPods的奖品，我就灵机一动，决定要不仿个苹果官网的交互吧，毕竟苹果官网的交互还是很简洁大气的，于是乎我就开始仿苹果官网的交互了。

通过观察，决定选取以下5种交互动效来效仿，这些效果也是我们平时设计原型时经常用到的效果：

• 汉堡菜单；

• 载入之后的通知栏自动变色；

• 轮播图；

• 通过颜色切换表带颜色；

• 切换选中；

效果预览

设计思路

通过观察我们可以发现，顶部蓝色的一个通知栏在进入的时候是蓝底白字，经过2秒之后渐变成了灰底黑字。交互流程如下：

蓝底黑字 ——>等待1S ——> 切换成灰底黑字。

设计详解

• 新建一个动态组件，并转换为母版；并在其中新建两个状态，一个是白底蓝字，一个是灰底黑字。

• 在状态1设置定时器事件，等待1S之后自动切换为状态2，动效时长2S。

这样一个简单的定时变色的通知栏就做好了。

效果预览

设计思路

汉堡菜单的思路与通知的差不多，依然是状态1是汉堡菜单收起状态，状态2是汉堡菜单打开状态，通过点击事件来互相切换。

设计详解

• 新建一个动态组件，并转换为母版，同时新建两个状态，分别是未点击状态，点击展开状态，见下图：

• 然后将汉堡菜单的点击事件跳转到点击展开状态，动效时长2S，同样的，展开状态的收起按钮的点击事件也跳转至未点击状态，这样互相跳转一个汉堡菜单就做好了。

设计思路

轮播图可能是产品经理日常做原型中遇到的最多的一个场景了。不管是移动端APP还是后台设计，多少都离不开轮播图，轮播图通常又分为2部分，一部分是图片主体，另一部分是锚点，通过观察发现，锚点与图片是一一对应的关系，然后等待2秒之后进入下一张图片，依次循环。

设计详解

• 新建动态组件

• 分别在动态组件中新建3个状态，分别是手表正面，侧面，表带。

• 然后给每一个状态添加全局定时事件，让每一张图等待2秒的事件切换到下一张图，见下图：

都设置好之后一个轮播图的效果就完成了。

效果预览

设计思路

通过点击颜色切换按钮来切换表带的颜色，每点击一个颜色，表带就切换到相应的颜色。

设计详解

• 将当前页面复制4个页面状态出来，见下图，并将每一个页面中的表带选中颜色与页面状态颜色保持一致，比如第一个页面是柠檬黄色，第二个页面是冰洋蓝色。见下图：

• 
  

• 并将每一个颜色点击跳转到相应的页面，这样就简单的实现了通过选中来切换颜色。

效果预览

设计思路

在电商产品中经常会有这种切换选中的样式，就是点击不同的按钮切换选中。选中的时候给一个边框。

设计详解

• 新建一个动态组件，并转换为母版，并将两个按钮放入其中，其中一个样式设置为选中样式，见下图：

• 将另外一个未选中的点击事件跳转到另一个状态，见下图：

这样，按钮互相切换效果就做好了。

经过这次使用，发现墨刀改进了不少，尤其是状态这一块，越来越好用了，我们也可以用状态来做更多的效果，做起来也非常简便。

Powered by Froala Editor