如何理解动态面板呢?动态面板有什么作用?
本节我们将基于这两个问题来展开介绍动态面板这一元件。
在开始之前,让我们先来看一组图片:
相信大部分人第一眼看到这些首页图片肯定都是下意识的把自己的身份归结为用户身份。
现在我们抛开日常的用户的眼光,换做产品的眼光去看这几张图片,再看一遍。
你发现了什么?
如果让你去设计这样一个首页原型,你将如何处理?
我们来看一下这些首页的构成,大体上无非都是些图片的链接、标签页的链接,导航的链接等等,如果这么多的元件都堆砌到你的原型中,将会非常的乱,非常的复杂,而且在你画到后面,想要选取某个元件或某几个元件的时候,出现选不准的情况,让人非常恼火。
所以我们要做的就是:分类
之前我们有讲到过通过组合的形式去给几个元件组合,但是现在我们有一种更加便于管理模块的方式,那就是利用动态面板。
当然,动态面板最重要的功能确不是分类,而是被用来设计一系列复杂的交互功能,比如轮播图的设计、展开目录(手风琴)的设计、标签页的设计、弹窗的设计等等。这一些内容,我将在进阶版中一一给大家介绍。
本节我们的目的就是理解动态面板的作用,并学会如何创建和取消动态面板。
1.创建动态面板
这里我们想要把“欢迎来到主页”标题和“开始”按钮放到一个动态面板中
创建动态面板有两种方式,下面一一介绍:
(1)从元件库中拖拽新增:
单击左键按住动态面板,拖动到画板上
双击动态面板进入动态面板编辑界面
(这时候,你会发现,无论你怎么选取,你永远选取不到动态面板外的元件,这样我们就可以专心地对动态面板内部元件进行操作不被打扰了)
点击右上角“关闭”退出动态面板编辑页
这时你会发现,无论你怎么选,也无法选取到按钮这个元件或者标题这个元件,你只能选中整个动态面板,所以当你在动态面板外操作时也不需要担心误改了动态面板内的内容
(2)右键转换为动态面板
第二种创建动态面板的方式就更简单了
选取两个元件,右键,下拉菜单下有个“转换为动态面板”,单击,即可完成转换
2.删除动态面板
我们直接按delete删除动态面板,会把动态面板里面的元件一并删除,如果只想删除动态面板但保留里面的元件时,右键动态面板,下拉菜单中选择“从首个状态脱离”即可完成删除。
以上是本节内容,认识动态面板,了解其作用,并学会如何创建和删除。感谢阅读。