邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用

2019,都在用 iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用

【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多

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

红旗飘飘 2016-07-12 08:24:33 阅读:68700

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

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

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

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

自做的选项卡步骤省略。

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

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

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

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

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

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

2 选项卡和内容面板交互

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

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

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

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

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

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

大功告成。

可以预览了。


【新年福利】高效的原型设计工具Mockplus为各位赠送新年福利啦~

Mockplus3.5新版本新增了智能标注功能,2019年Mockplus将全面升级为摹客RP,为大家带来更好的体验,Mockplus春节送福利,赶快领取Mockplus个人版激活码吧,数量有限,时间有限,先到先得!

专属激活码:Mockplus2019

激活数量:限量150个。

有效期:2019年1月31日。

激活地址:https://www.mockplus.cn/user/upgrade?hmsr=Anne

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:428164223 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶