Mockplus实战案例：简单的交互要这样做

相信大家对百度官网首页不陌生吧，对设计师来说，不是关注网页内容有多丰富，而是在别的网站上给自己点启发，在设计的时候增添自己的元素才是最主要的。

下面以百度官网首页为例，讲一下简单的交互要怎样去做。

组件：形状组件、遮罩、内容面板和相应的图标。

自做的选项卡步骤省略。

上面一排是做好了的遮罩，中间是选项卡，下面是内容面板。

这里有几个简单的交互动作：

1 选中“我的关注”，组件右上角有个链接点：

鼠标点击后拖到对应的“遮罩”组件后弹出一个命令选择框：

点击“确定”后，下面会弹出交互面板，选择“显示”，然后和另外四个遮罩分别交互，选择“隐藏”，让看下图：

第一个交互“我的关注”就做完了，“推荐”“导航”“视频”“购物”的步骤都是一样的。区别就在于，选中到自己的时候，遮罩交互都是显示，其他遮罩都是隐藏。

2 选项卡和内容面板交互

添加内容面板，分别链接到“我的关注”“推荐”“导航”“视频”“购物”。

例如：选项卡中“我的关注”和内容面板交互，如图：

以此类推，这样选项卡和内容面板交互就完成了。

点击软件上面的三角符号或F5，开始演示。

哦，还有一步没做，把5个遮罩分别设为不可见：

然后分别移到“我的关注”“推荐”“导航”“视频”“购物”的上面。

大功告成。

可以预览了。