经验观点 2022年04月27日
0 收藏 294 点赞 4,334 浏览 653 个字
摘要 :

产品经理经常使用的效果 图片列表是产品经理常用的展示方式,今天就和大家分享一下,在摹客RP里如何制作一个鼠标hover到图片上能够查看大图的图片列表。 先看看效果: ……

产品经理经常使用的效果

图片列表是产品经理常用的展示方式,今天就和大家分享一下,在摹客RP里如何制作一个鼠标hover到图片上能够查看大图的图片列表。

先看看效果:

鼠标hover到图片上时,图片有一个放大的效果,鼠标离开图片后,图片恢复原来的尺寸。

上图是知乎文章详情页面下的“推荐阅读”,用的就是这种效果,下面我就以这个来说说怎么做的交互。

01 准备工作

需要准备的组件:图片组件

本地图片:4张

02  交互制作

1)设置好尺寸,选中图片,拖动图片组件右上角的链接点给自己做一个交互。

2)设置交互

  • 触发:鼠标进入
  • 目标:自己
  • 命令:调整尺寸(扩展点选择中间的点)
  • 宽度和高度:设置为所需要的尺寸
  • 缓动:线性(按需设置)
  • 时长:200 ms(按需设置)
  • 延时:0 ms(按需设置)

鼠标移动的交互设置完成。

按上面的步骤图片和自己再做一个鼠标离开的交互:

  • 触发:鼠标离开
  • 目标:自己
  • 命令:调整尺寸(扩展点选择中间的点)
  • 宽度和高度:设置为原尺寸或所需尺寸
  • 缓动:线性(按需设置)
  • 时长:200 ms(按需设置)
  • 延时:0 ms(按需设置)

整个交互完成。

要达到知乎“推荐阅读”的效果,你只需要把这个图片组件复制三份,分别导入图片就可以了。

实际的效果可以参考知乎的“推荐阅读”板块,也可以参考极致设计的首页图片列表效果。

觉得是不是很简单呢。

03)举一反三

点击任一图片,再弹出图片。

交互:图片和辅助画板做一个弹出的交互,再做一个点击图片隐藏的交互,如下图。

你学会了吗?需要什么交互也可以给我留言。

更多交互教程,待续中。。。 

Powered by Froala Editor

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.jizhisheji.com/140057.html

相关推荐
精选
互动投影的应用所表现出的四大特点
互动投影是集合了商业价值与娱乐特质的人机交互形式,其因绚丽的展示效果而深受到大众喜爱,它的实现主要依靠捕捉设备对目标影像进行实时的动作捕捉,…
日期:2022-06-26 点赞:196 阅读:2,749
精品
提高UI界面高级感的排版实用技巧
UI 界面中,排版设计同样重要。如何将至关重要的信息,有效地传递给用户,这是界面本身的职责,而在绝大多数时候,这通常是靠文本来完成。 这就是…
日期:2022-06-26 点赞:178 阅读:3,981
最新
汽车二手车租车小程序定制开源源码开发制作模板的UI功能设计
汽车二手车租车小程序APP定制开源源码开发制作模板需要哪些功能?——龙兵科技 龙兵科技,自主研发,源码交付,专注软件研发10年,各行业源码齐…
日期:2022-06-26 点赞:160 阅读:3,854
最新
房产报备新房二手房租房等小程序源码制作UI功能如何设计功能?
 龙兵科技,自主研发,源码交付,专注软件研发10年,各行业源码齐全网络销售公司该如何推销出去一个产品?是不是要针对客户的需求去讲解…
日期:2022-06-26 点赞:282 阅读:1,599
必看
机器人情感化设计
前段时间接到了一个企鹅岛的机器人项目,项目目标是要传递“机器人友好”的概念。那我们要如何从设计的角度去传递这个概念呢?友好其实是人对事物的一…
日期:2022-06-26 点赞:90 阅读:4,770
推荐
企业展厅设计用多媒体的方式实现有何帮助
  企业展厅是企业对外宣传的一种重要形式,其通过数字沙盘、弧幕影院、多点触控、全息投影等多媒体互动技术,让用户更好地参与其中,给用户带来沉浸…
日期:2022-06-26 点赞:280 阅读:4,665
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站