在模板页面的概要视图中可以看到名为“提示”的动态面板，需要显示的提示信息在这个动态面板中编辑就可以了。当前的动态面板中有一个“操作成功”的提示状态，如果在一个页面中显示多个提示，可以新增对应的状态然后修改相关的提示内容。

　　选中提示的动态面板的状态右击选择复制状态可以快速创建新的提示。建议对每个对应的提示状态进行命名，这样方便后续进行管理。关于轻提示的基本使用规范请参照前面的介绍内容。

　　Toast提示的显示方式设置很简单，只需要在对应的元件事件上加入以上的交互动作。首先设置提示动态面板中对应的状态，然后设置显示动态面板，显示时有一个逐渐的动画效果。

　　Toast提示显示以后会在3秒后自动逐渐隐藏，模板中的这个交互动作已经加在提示动态面板的显示时事件中了，不需要再单独的进行设置。

　　7.常用弹层交互设置

　　模态窗口交互效果

　　移动端的弹层共分为模态窗口、动作面板、弹出面板等几种不同的类型。在模板页面的概要视图中可以看到名为“弹层”的动态面板，可以根据需要创建更多其它的弹层状态，还能在对应的面板状态属性中设置透明背景的遮罩效果。

　　上面截图中的为比较常见的模态窗口弹层效果，设置方式是在对应的元件事件上加入以上的交互动作。另外，根据模态窗口、动作面板、弹出面板这几种弹层类型的弹出方式不同，需要设置显示时为向上滑动和逐步等动画效果。

　　8.导航栏切换交互设置

　　最后介绍一下如何实现内容区域滚动时，导航栏自动切换的交互效果。首先需要在导航栏的动态面板中创建对应的状态，然后选中内容框架动态面板，在它的滚动时事件中按照上面的格式加入对应的条件判断即可。

　　在这个设置用到了条件判断和函数，条件的详细设置见上方的截图。它的原理是当内容框架垂直滚动高度大于70时设置导航栏动态面板的显示状态为2，当内容框架垂直滚动高度大小于70设置导航栏动态面板的显示状态为1。其中用到的This.scrollY函数是获取当前元件的直滚动高度，70的值可以根据需要自己设置。

　　好了，到此这篇基于设备模板的移动端原型设计方法的分享基本介绍完了。最后提供的是iPhoneX And iPhone8 Mockup 原型模板的源文件下载，大家可以结合本文中的相关介绍进行使用。

　　下载地址：https://pan.baidu.com/s/1nvBVgYt

　　最后再给大家分享一套本人整理设计的移动端元件库，这套元件库中的相关元件是可以在这个模板中复用的，后续也会不断的进行优化和完善，有需要的朋友可以关注一下。

　　演示及下载：