动态面板实践--Axure自学--学会20%的功能，满足80%的日常使用（4）

新建了站点： https://congge-ready2learn.com/，已经将已发布的axure学习内容同步到，欢迎收藏看看。

2.3.4 动态面板–大容器元件

通过跟着Axure自学的第（1）、第（2）、第（3）篇文章一起操作后，应该对Axure的应用有了基础的了解。一开始小白如我应该对产品设计没什么概念，那么对成熟产品的模仿及学习，是学习的最快途径。
接下来通过App–《下厨房》的界面，来入手动态面板这个元件吧！

2.3.4.1 模仿学习的思路

如何通过模仿学习，来辅助Axure的学习之路呢？
我个人的方法是：

1. 寻找对象–找一个自己喜欢的产品
2. 分析对象–分析产品的功能，并进行功能模块的拆解
3. 实现功能–一点点实现第二步的拆解出的小功能

2.3.4.1 第一步：寻找对象

这次选择的是帮助了额众多厨房小白度过了饥寒交迫但是要自己做饭吃的日子，《下厨房》App。😃

2.3.4.2 第二步：分析对象

一个App的功能是很多的。总想着能够一蹴而就，或者在没有任何基础的情况下能够一步到位，一次性实现所有功能的展示，往往很容易被失败及挫折束缚住继续学习的步伐。
这次的目的是入手动态面板，那么我拆解出的小功能就是： 通过点击底部标签按钮，实现App页面内容的切换 。

2.3.4.2 第三步：实现功能

2.3.4.2.1 动态面板介绍

在实现功能之前，先对 动态面板(Dynamic Panel) 进行一个简要的介绍。动态面板就像其他元件一样，有一些常规属性，如改变动态面板的自身的大小、在画布中的位置。另外，它还有它特有的属性–状态(State)。
先从元件库中拖出一个动态面板，可以看到一个透明的蓝色区域展示在画布中。把动态面板比作一个容器，那么蓝色区域就是这个容器的范围。

当双击动态面板元件的蓝色区域，画布便进入了动态面板的 状态(State) 编辑模式。在工具栏下方会出现一条蓝绿色的状态框，在这里可以进行 添加状态 操作以及退出状态编辑模式操作。画布上会出现一块高亮区域，提示动态面板元件的边界区域。

怎么去理解动态面板及状态这两个概念呢？川剧变脸大家应该都知道，如果把动态面板比作表演者的脸，状态比作脸谱，表演者的脸作为载体，这块区域可以承载着不同的脸谱，不同的脸谱可以在作为载体的脸上切换。
动态面板作为载体，可以承载许多状态，每个状态可以理解为是相互独立的的画布，但是这个画布的展示区域就只有动态面板的大小，而不是整个屏幕的大小，。不同状态可以通过设置交互来进行切换展示。
动态面板的大小就像窗口，我们只有通过这个窗口才能看到里面的状态内容。既然每个状态的展示区域（可视区域）只有动态面板这么大，那么怎么查看每个状态的全貌呢？他有一个右键属性：设置滚动。我们可以通过设置横向滚动/纵向滚动来查看状态的在动态面板区域外的内容。
下面通过实现《下厨房》的小功能例子来直观地理解动态面板的概念。

2.3.4.2.2 元件准备

我从互联网上找了其他大佬分享的手机外壳元件，同时截图了《下厨房》App的部分界面，并拖出一个动态面板元件，放置在画布上。我将底部的五个页面的入口按钮简化为五个文本元件，放在手机外壳内部的底部区域，主要作用是 用来进行动态面板的状态切换的。

2.3.4.2.3 安置动态面板，添加所需状态数量

1. 首先，将动态面板如下图所示，放置在手机内容展示的位置。
   
2. 双击进入动态面板状态编辑模式。动态面板默认自带一个状态State1。
   根据分析，《下厨房》底部入口需要切换五个界面，那么我们为动态面板建立五个状态，分别放置这五个界面的内容截图。
   a)建立状态，并给状态命名
   
   b)分别点击每个状态，将相应的内容截图放置在状态的画布内。上文提到，每个状态之间是相互独立的，所以点击状态切换了画布之后，是看不到其他状态的内容的。
   
   c)放置好每个状态的页面截图后，点击画布右上角的 close 按钮，退出动态面板状态编辑。
   退出编辑状态后，在动态面板上，会默认展示第一个状态的内容。
   

2.3.4.2.4 交互设置

设置交互，首先要分解所需要实现的交互效果：

1. 点击底部“下厨房”按钮，手机内容展示：下厨房页面
2. 点击底部“市集”按钮，手机内容展示：市集页面
3. 点击底部“课堂”按钮，手机内容展示：课堂页面
4. 点击底部“收藏”按钮，手机内容展示：收藏页面
5. 点击底部“我”按钮，手机内容展示：我页面
6. 让“下厨房页面”可以展示完全。《2.3.4.2.2 元件准备》中的截图所示，“下厨房页面”是很长的，需要进行垂直滚动才可以查看其全部内容。

Step1： 点击底部“下厨房”按钮，手机内容展示：下厨房页面
选中“下厨房”按钮–新建交互–选择“鼠标单击“–设置面板状态

然后在弹出的目标元件筛选列表中，选择App页面内容动态面板。

最后选择状态为：下厨房

以上操作的解释就是：当鼠标单击底部”下厨房“文字时，设置手机界面动态面板内容为”下厨房“状态，也就是承载着”下厨房“这页截图的状态。

Step2： 通过复制交互面板内容，实现第2-5的状态切换。
2.点击底部“市集”按钮，手机内容展示：市集页面
3.点击底部“课堂”按钮，手机内容展示：课堂页面
4.点击底部“收藏”按钮，手机内容展示：收藏页面
5.点击底部“我”按钮，手机内容展示：我页面

元件上的交互面板内容，是可以通过复制，黏贴到其他元件上的。在交互对象是相同，且交互动作是一致的时候，就可以偷个懒，用一下ctrl+c和ctrl+v。
具体实现方法是：单击上一步在”下厨房“按钮上新建的 鼠标单击交互，按ctrl+c；或者通过右键进行复制。

选中“市集”按钮，按ctrl+v，并将复制过来的“下厨房”状态，修改为“市集”状态。

“课堂”、“收藏”、“我”按钮的交互设计重复上一步。最后每个底部按钮的交互如下图所示。

Step3： 设置滚动。
此时点击预览，到浏览器中点击底部按钮，手机页面已经可以成功切换。但是有一个小问题：“下厨房”页面其实很长（见2.3.4.2.2 元件准备），但是预览时却无法进行滚动查看。那么只需要设置动态面板的滚动属性即可。
对动态面板进行右键点击–滚动条–垂直滚动（此处是希望它垂直滚动，另外还有按需滚动和水平滚动，可以按照实际情况自行选择）。

设置完之后可以看到右侧有个垂直滚动条展示出来，如果觉得有点丑(…)，可以把动态面板横向拉宽，把滚动条拉到手机边框处，这样预览的时候手机边框会把它挡起来，就美观一些。

2.3.4.2.5 完成！预览！

照例放上链接：点击预览
密码：liucong
可以自己尝试实现一下！