收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1638|回复: 0

[界面] Mockplus实例之一看就会de五个交互功能

[复制链接]
发表于 2016-7-27 12:43:26 | 显示全部楼层 |阅读模式
实例来源:豆瓣新加日记

先看看豆瓣新加日记的网页:



再看看已经制作好的原型预览页面:



在原型制作中有五个有特色的交互功能:
1 题目和正文切换时,边框颜色变深
这里需要交互,就拿“正文”部分说吧,准备一个形状组件和输入框组件,放好位置,输入框组件边框设置为白色,输入框三个字去掉,然后合并为组;然后再把这个组复制,设置为不可见,组1和组2需要设置交互,点击组1时,组1设置为隐藏,组2设置为显示;点击组2时,组2隐藏,组1显示。


2 使用弹出面板
上传图片和添加链接都需要使用弹出面板,弹出面板里面的内容跟上面的制作方法类似,就不再重复了,重点说一下怎样关闭弹出面板。

交互链接都设置好后,右上角的“X”和确定、取消三个按钮都设置为把弹出面板关闭掉,具体的请看下图:

交互的时候必须要和弹出面板交互,而不是和弹出来的弹窗交互。设置为“切换”,这里不能选择“关闭”,如果选择“关闭”后,演示的时候只能点击一次。

3 单选按钮组的切换
需要这样设计:

下面一排单选按钮全部设为不可见。

为了更明白交互过程,我把上面的组件分别叫:A和A1;B和B1;C和C1
交互过程是这样的:
点击A,A隐藏,A1显示,B和C显示,B1和C1隐藏;
点击B,B隐藏,B1显示,A和C显示,A1和C1隐藏;
点击C,C隐藏,C1显示,A和B显示,A1和B1隐藏;
所有交互完成后,这两排组件重合在一起,上面的一排在最上面一层。

4 鼠标经过,字体和背景变色
这个功能在以前的实例送有提到过:
改变背景颜色:

改变字体颜色:

这两步做好以后,就用“《豆瓣原创声明》”和弹出面板交互:


5 弹出面板悬浮,网页滚动
很多人都说Mockplus不能做悬浮,其实错了,可以做。针对这个实例,就特简单。
做好的原型预览后,弹出面板会跟着网页一起滚动,这里教大家一个方法:当前页面全部放入到一个很大的内容面板里面去,内容面板链接这个演示页面,这样,预览时弹出面板就不会和网页一起滚动了(可以看看上面的原型视频)。

原网页还有一个交互功能,只是Mockplus目前无法实现,这里就省略了。如果以后有这个功能,我会添加到相关实例中的。
文中有哪些不妥的地方,希望指正,谢谢。
待续。。。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-7-11 10:47 , Processed in 0.109101 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表