【授人以渔or鱼】web消息通知 展开/收起效果 原型 免费

xiaobai668 产品大牛 18天前 307

新手交流,大神勿笑。

在我之前的一篇贴文《授人以渔or鱼】web-顶部&侧边导航切换效果》中,除了讲述顶部导航和侧边导航的切换效果外,附带讲述了一下折叠面板的效果。为了更直观的与大家分享,今天就专门来讲一下这块内容。

折叠面板有两种细微差别:可以当一条内容展开而其他内容收起;也可以一条内容展开其他内容样式不受影响。具体请大家下载原型后进行体会。


组件效用

采用折叠面板,常用于一些需要将部分内容折叠的场景。如消息通知的 通知标题和通知详情,侧边导航的一二三级菜单,以及表单列表展示时隐藏详细内容。

axure版本

请使用axure 8.0打开

主要组件

动态面板

主要交互

动态面板的鼠标单击事件、面板状态切换时的推动/拉动元件

通知中心A详细步骤:

1、创建动态面板

创建动态面板并命名,勾选【自动调整为内容尺寸】

2、设置面板状态

为面板新增2个状态,分别命名为【展开】、【收起】。值得说明的是,无论是产品小白还是产品大牛,养成良好的命名习惯是很必要的。否则当你完成一个复杂的项目时,你会发现自己给自己挖了个深坑。

在每个状态里,编辑好要展示的内容


3、设置交互【鼠标单击时】

如下图,为动态面板设置鼠标单击交互,红框中的部分是重点。

选择状态为【next】【向后循环】。这样做的目的是让每次的点击都触发动态面板展开/收起状态的轮循。

勾选【推动/拉动元件】。这里是实现整体交互的关键点。 如果不勾选该选项,我们会发现因为展开/收起的内容不一致,会出现空白。所以加了此功能后,当切换不同状态时,会保证中间不会留空


4、复制动态面板

复制制作好的动态面板,并分别重命名,然后对齐排列好即可。

通知中心B详细步骤:

1、创建动态面板

同上

2、设置面板状态

同上

3、设置交互【鼠标单击时】

因为要实现每次单击只有一条内容展开,因此需要为每个动态面板设置响应单击事件

首先在1、2步骤完成后复制N个动态面板,重命名。

然后参照下图, 通过编辑条件判断当前面板的状态:

当前面板如果是收起状态,那么单击后该面板要处于展开状态,其他面板必须处于收起状态

当前面板如果是展开状态,则单击后只需要收起该面板即可

具体的设置条件同上,也可以参照原型。这只是一种在我看来比较可行的办法,如果有大神有更好的实现方法,可以分享交流,我也学习一下。


好了,今天的分享就到这里。欢迎大家一起交流。下载原型不是目的,下载后揣摩领会才是目的。

上传的附件:
快速回复
最新回复 (32)
全部楼主
  • chenjbok 普通用户 16天前
    0 引用 2
    good
  • 破布 普通用户 16天前
    0 引用 3
    看看怎么样
  • blackhorsed 普通用户 16天前
    0 引用 4
    感谢分享,谢谢!
  • wolf 普通用户 15天前
    0 引用 5
    谢谢
  • 鱼莫莫 普通用户 15天前
    0 引用 6
    看看实际效果
  • alicezhangxc 普通用户 15天前
    0 引用 7
    谢谢分享        !
  • zxfkeke 普通用户 14天前
    0 引用 8
    谢谢分享
  • 微风春雨 普通用户 11天前
    0 引用 9
    谢谢分享
  • i51i51 普通用户 11天前
    0 引用 10
    谢谢分享!!!学习……
  • Natalie 普通用户 11天前
    0 引用 11
    感谢分享
  • Stellar.瑷 普通用户 11天前
    0 引用 12
    感谢分享
  • 北坳人 普通用户 11天前
    0 引用 13
    谢谢
  • ༺l༻ 普通用户 11天前
    0 引用 14
    【表情】
  • 喂!_Rena 普通用户 10天前
    0 引用 15
    谢谢
  • yjm820604 普通用户 10天前
    0 引用 16
    看看怎么样
  • 青山 普通用户 10天前
    0 引用 17
    感谢分享
  • lf 普通用户 10天前
    0 引用 18
    ffff
  • 可乐王子 普通用户 9天前
    0 引用 19
    11
  • wangweiqi 普通用户 8天前
    0 引用 20
    666
    6
  • 735994852 普通用户 8天前
    0 引用 21
    66666
  • ghostbeg 普通用户 8天前
    0 引用 22
    66666666666666
  • magical222 普通用户 8天前
    0 引用 23
    感谢分享
  • 康永波 普通用户 7天前
    0 引用 24
  • 你的...软萌乖 普通用户 4天前
    0 引用 25
    感谢
  • andy 曾志军 普通用户 3天前
    0 引用 26
    好东西
  • 林楠 普通用户 3天前
    0 引用 27
    学习下
  • 相声大师 普通用户 2天前
    0 引用 28
    不错
  • 王广华 普通用户 2天前
    0 引用 29
  • xingxing 普通用户 1天前
    0 引用 30
    看看实际效果
  • kaisa 普通用户 1天前
    0 引用 31
    666666666666666666666
  • ht 普通用户 17小时前
    0 引用 32
    1
  • 欧豪有 普通用户 15小时前
    0 引用 33
    11
返回