Axure中移动端原型设计方法（附IPhoneX和IPhone8最新模板）

Axure中移动端原型设计方法（附IPhoneX和IPhone8最新模板）

2018年4月16日luodonggan

Axure中基于设备模板的移动端原型设计方法（附IPhoneX和IPhone8最新模板）

文章做者分享了一种基于设备模板的移动端原型设计方法，相信可以对你的原型设计工做带来帮助，值得马克。

在使用Axure设计移动端原型的应用方面，我总结出了两种经常使用的方法。第一种是更适合在移动端进行演示的设计方法，你们能够参考我以前已经分享过的一篇教程：使用Axure打造最佳的移动端交互原型教程，使用这种方法输出的原型在手机设备上进行演示时能够达到跟真实APP几乎一致的展现效果及交互体验。在今天我将分享另一种基于设备模板的移动端原型设计方法。

什么是基于设备模板的移动端原型设计方法？简而言之就是在Axure的编辑界面中放置对应的机型模板，使输出的原型达到更规范和真实的演示效果。其实这是一种很常见的移动端原型的设计方法，不少同行在设计原型的时候也都用过。这篇分享教程将对个设计方法进行了总结和梳理，并基于这个方法制做了一套可快速复用的模板。这套模板具备几个方面的特色：

● 结构化，根据APP界面结构进行搭建；
● 标准化，很是方便进行编辑和维护；
● 高保真，可高度还原移动端交互效果；

在本篇分享的结尾我会提供模板的Axure源文件下载，其中包含了最新的IPhoneX和IPhone8等多套IOS设备机型，以及一些常见的界面元素和交互效果。在开始正式的介绍以前，你们能够查看使用这套模板还原IOS中两款官方应用的设计演示。

IOS11 AppStroe For iPhoneX 原型演示

演示地址：http://www.axureux.com/demo/TemplatesForIOS11/today.html

IOS11 Contacts For iPhone8 原型演示

演示地址：http://www.axureux.com/demo/TemplatesForIOS11/我的收藏.html

1.界面元素和结构介绍

因为这套模板是基于IOS系统进行设计的，因此相关界面元素和交互方式均以IOS为标准。目前主流的移动端系统除了IOS还有Android，这两种系统设计标准和交互方式实际上是存在一些差别的，不过目前市面上大部分APP在设计时并无争对两种系统作单独的处理。

因此若是没有特珠需求的话，咱们通常也只须要输出一套原型方案就能够了，不过设计过程当中须要尽可能兼顾这两个主流的系统。固然，若是你的产品明确须要按照Android的系统规范来设计，你也能够参照本教程设计一套Android的原型模板，相关交互方式能够参照Android版的交互指南规范。

在开始介绍模板的搭建和使用方法以前，须要先对APP的界面结构作一个简单的介绍，熟悉了界面结构能够方便咱们后续的设计。常见APP的界面主要由如下元素或组件组成：

StatusBar / 状态栏

状态栏显示设备的关键信息，包含设备模型或网络提供商、网络信号强度、电池使用量、时间等。在特殊界面中能够对状态栏作隐藏处理，或根据须要自定义状态栏背景。

NavBar / 导航栏

导航栏位于app内容区的上方，系统状态栏的下方，而且提供在一系列页面中的导航能力。可在导航栏中显示当前视图的标题，若是标题很是冗长且没法精简，能够空缺，避免用过多的元素填满导航栏。导航栏中能够添加文字和图标控件，相关控件的可点击区域须要大于控件的可视大小。

Body / 内容区

内容区域根据须要进行自定义设计，常见的设计形式有菜单列表、图标列表、卡片列表、图文组合等。

TabBar / 标签栏

标签栏位于APP底部，方便用户在不一样功能模块之间进行快速切换。标签栏通常用做APP的一级分类，数量控制在3-5个之间。建议使用Badge进行提示，让用户知道有内容更新。

Toolbar / 工具栏

工具栏通常会出如今视图的的底部，提供给用户相关可操做的功能按纽。如，邮件应用程序里的收件箱栏中有删除、分享、答复等等。

Modal / 弹出层

移动端的弹出层根据弹出方式不一样，共分为模态窗口、动做面板、弹出面板等几种不一样的类型。在实际使用中，可根据界面的交互方式选择对应的类型。

Toast / 轻提示

一种轻量级反馈提示，能够用来显示不会打断用户操做的内容，适合用于页面转场、数据交互的等场景中。一次只显示一个轻提示，有图标的提示字数为4-6个，没有图标的轻提示字数不宜超过14个。

TableView / 列表视图

列表视图是移动端APP中一种通用的界面元素。不少应用程序在必定程度上，都有使用表视图来显示数据列表。常见的例如IOS的联系人应用中联系人信息列表，另外还有Mail中使用列表视图显示邮箱和邮件。列表视图不只能够用来显示文本数据，也能够用来呈现图像数据。

以上是豆瓣APP的一个界面截图示例，界面的结构用颜色进行了区分，从上至下分别为：状态栏、导航栏、内容区、标签栏。

2.结构化的模板搭建

在介绍完APP的界面结构以后，接下来讲明一下模板的搭建方法。在本篇教程的结尾会提供了已经制做好的模板的文件，你们能够下载并参考本部分介绍进行使用，也能够参照介绍制做本身的原型模板。

在制做模板时须要用到对应的机型设备的图片素材，能够经过Dribbble等设计分享平台找到对应的素材文件，而后对素材作一些简单的处理。处理的过程首先是去掉多余的元素，只保留机型设备的框架图片。另外还须要对图片的尺寸进行调整，例如在制做手机等移动端模板时咱们将内容区域定为375px，须要根据所定的内容区域对图片的尺寸进行相应的调整。

为何模板的内容区域是375px？这个问题我在上篇教程中进行过介绍，因此再也不进行展开说明。可是须要记住的这个尺寸是一个重要的标准，后续在设计过程当中相关元件的宽度尺寸都须要参照这个标准。机型设备的图片素材准备好以后，咱们在Axure中建立一个对应的母版，而后将机型设备图片拖入到母版中。母版的名称能够按该机型设备的名称命名，后面在使用时在新建的页面中拖入该母版便可。

下一步须要建立前面介绍过的APP界面中常见元素或组件，首先你们能够看一下这张图片中已经建立好的模板，其中包含了机型母版、轻提示、弹层、导航栏、标签栏、内容框架等元素。

在这个模板页面的概要视图中能够看到相关的对象，全部对象我都建立了一个对应的动态面板。这样的处理主要出于两个方面的考虑，一是方便对相关元素进行编辑维护，二是相关对象的显示是有顺序的，这样能够方便在概要视图中进行排序处理。

3.模板使用细节说明；

在内容框架中编辑界面内容；

界面的主要内容在内容框架动态面板中进行编辑和维护，因为该动态面板设置了自动显示滚动条，若是你的界面内容超出了一屏，在演示时能够经过在内容框架区域滚动鼠标滚轮查看更多内容。

关于模板界面元素的尺寸说明：

模板中的界面元素的尺寸并无很是严格的标准，如下尺寸是我根据比例进行设置的，仅供参考。IphoneX状态栏：44px、IphoneX标签栏：80px、Iphone8状态栏：28px、IphoneX标签栏：60px、导航栏：40px。另外，内容区域的高度由于机型设备的素材图片不统一可能略有差别，基本上能够忽略。

每一个界面对应一个页面；

在设计原型时建议每个界面建立一个对应的页面，经过添加页面连接进行界面跳转，这样方便对原型进行编辑和维护。不建议将多个界面用动态面板堆砌在一块儿页面内，这样会使输出的原型在演示时出现卡顿现象。

关于元素的层级顺序；

在概要视图中能够看到相关元素对应动态面板的层级顺序，在使用该模板的时候请尽可能参照此顺序，不然可能在演示时出现显示错误的状况。

关于底部标签栏的设置；

为了方便维护能够将标签栏建立为母版，而后添加到须要显示标签栏的页面中。另外，在对应的页面中须要显示对应的标签选中效果，只须要在该页面中的标签栏动态面板中添加一个选中效果的标签元件。

热区占位符的使用；

若是页面中添加了标签栏或工具栏，因为标签页的动态面板在内容框架的动态面板之上，在演示时会出现内容有一部分被挡住的状况。能够建立一个高度为100px的热区元件为母版，将母版拖入对应的页面底部，用来解决内容区域被挡住的问题。

4.经常使用设计元素及规范

常常有朋友向我咨询如何设计出更漂亮美观的原型，虽然原则上原型能完整的体现出需求细节便可，好看并非咱们在原型输出时应该关注的重点，可是若是能知足说明需求的同时能把原型作得更漂亮一些更好，这也算是体现专业程度和工做态度的一个方面，并且不少人对本身的输出物也是有强烈的美感追求的。

其实原型设计不须要了解太复杂的设计方法，只要掌握一点简单的技巧就能达到美观的效果，同时能让总体更统一和标准。在分享的这套模板中包含了一些基本的设计元素，我下面对其中的一些规范细节进行说明，供你们进行参考。

配色方案

• ◆ 通常采用黑白灰的配色方案就可以知足基本设计要求了，可是若是能稍微得加上一些亮色的配色效果，可使原型更好的体现出视觉层级，这对UI是有必定的参考价值的。不要感受得配色效果可以影响UI的设计，若是UI会被原型中的配色影响，只能说明UI的设计能力有待提高；

• 整套原型中亮色主色调不要超过两个，对于主要按纽和重点提示能够加上主色调色值，次要元素统一使用#000000、#33333三、#999999等灰色辅助色；

• ◆ 模板中的这套模板方案中的主色调是从IOS11的UI设计规范中提取的，你能够根据本身的须要整理一套本身的配色方案，建议尽可能使用扁平化设计色值；

配色板使用

Axure中的配色板提供了一些经常使用的颜色色值，可用做一些经常使用元素的颜色配色。例如截图中标注1中的纵向的灰色色值可用于相关字体元素的颜色，标注2中横向的灰色色值可用于相关元素的背景和线条的颜色。另外，点击标注3中的更多按纽，能够将其它的经常使用色值加入到自定义颜色中，方便快速的使用。

字体元素

• ◆ 原型设计时的字体字号建议统一使用偶数，经常使用的标题字号为16px、18px、20px，经常使用的正文字号为12px、14px；

• 针对不一样字体大小的多行文本单独设置对应的行间距，例如12px的多行文本行间距建议设置为20，14px的多行文本行间距建议设置为28；

• 推荐中文字体统一使用微软雅黑，因为Axure的默认字体为Arial，能够经过生成HTML设置中的字体映射，将Arial映射为微软雅黑，这样就不须要在设计时去单独设置每一个元件的字体了。

其它元素

• ◆ 原型设计时元件的宽度建议统一保持为5和10的倍数，元件的间距建议为10px或20px；

• ◆ 使用键盘方向键移动选中的元件时每次移动距离为1px ，使用ctrl+键盘方向键每次移动距离为10px；

• ◆ 按住Ctrl+鼠标拖动能够快速的复制元件，按住Shift+鼠标拖动能够垂直或水平的移动元件；

对齐及分布工具使用

• 有对齐强迫症的朋友可使用顶部工具栏中的对齐及分布工具对元件进行处理，右击顶部的工具栏区◆ 域能够自定义显示或隐藏相关的工具图标；

• 选中多个元件时可使用对齐工具快速的对多个元件进行各类对齐处理，还可使用分布工具快速的对多个元件进行垂直或水平分布处理；

5.使用辅助线进行排版；

在之前的教程中已经介绍过辅助线的使用方法，合理的使用辅助线能够帮助咱们提高设计效率，同时能让输出的原型效果更标准，因此强烈建议你们在设计过程当中使用。如下是模板中内容框架编辑区域的截图，是我经常使用使用辅助线用来排版的方式。截图中的辅助线均为横向x轴辅助线，能够看到其中共有4条，分别介绍一下它们的做用和位置：

•  第1条辅助线是用来划分左边的内容留白区域，例如我通常习惯将左边留白为20px，这条辅助线位于x轴的20px位置。

•  第2条辅助线是内容居中辅助线，以前已经介绍过模板的设计宽度标准为375px，这条辅助线位于x轴的188px位置；（375px/2=187.5px）

• 第3条辅助线用来划分右边的内容留白区域，例如右边跟左边留白同样为20px，这条辅助线位于x轴的355px位置；(375px-20px=355px)

• 第4条辅助线是用来划份内容设计区域，例如模板的设计宽度标准为375px，这条辅助线位于位于x轴的375px位置；

这些辅助线的用法只是做为参考，能够根据本身的须要新建对应的辅助线。鼠标光标移动到编辑区域的左侧和顶部的标尺区域，按住鼠标左键并往编辑区域拖动时，就能够生成横向x轴或纵向y轴的辅助线，而后将辅助线拖动到对应的位置便可。辅助线还有一个特性就是当拖动元件靠近它时，元件会自动吸附到辅助线的边缘达到快速对齐的效果。

几点辅助线的使用小技巧：

• 右击辅助线能够将其锁定，以防止拖动元件时会将辅助线会跟着一块儿移动；

• 能够经过按住Ctrl拖动建立全局辅助线，全局辅助线就是在全部页面中产生一条相同的辅助线；

• 在“布局—栅格和辅助线—锁定辅助线”中选中能够将全部的辅助线保持锁定状态且没法删除；

• 在“布局—栅格和辅助线—删除辅助线”中能够清除全部页面中的辅助线；

• 在“布局—栅格和辅助线—辅助线设置”中能够修改辅助线的颜色或进行更多设置；

6.Toast提示交互设置；

移动端原型中最经常使用的交互效果就是弹出层和轻提示两种，模板中已经包含了这种两交互效果的相关元件和事件，这里再单独简单的介绍一下。

Toast提示显示效果

在模板页面的概要视图中能够看到名为“提示”的动态面板，须要显示的提示信息在这个动态面板中编辑就能够了。当前的动态面板中有一个“操做成功”的提示状态，若是在一个页面中显示多个提示，能够新增对应的状态而后修改相关的提示内容。

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

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

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

7.经常使用弹层交互设置

模态窗口交互效果

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

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

8.导航栏切换交互设置

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

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

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

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

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

演示及下载：http://www.axureux.com/home/librariesmoblite.html

 

一直以来Axure在对移动端原型设计方面的支持都不是十分理想，它没有像目前其它几类原型设计工具(Justinmind、墨刀等)同样提供移动端设备的模板和相关交互组件，可是Axure自由灵活的特性却一样的其它原型设计工具所没法取代的。经过掌握一些设计规范和方法，咱们一样能够经过Axure制做出很是完美的移动端演示原型。

首先你能够经过手机或电脑访问如下地址，这是我设计完成的移动端原型模板。

演示地址：http://www.axureux.com/demo/TemplatesMobEC/startapp.html

 

 

 

使用Axure打造最佳的移动端交互原型教程

1. 选择适合的设计分辨率

在开始设计原型以前咱们须要作的第一步是选择合适的设计分辨率，目前使用Axure设计移动端原型时广泛采用的是(宽)375px*(高)667px和(宽)414px*(高)736px两种分辨率尺寸，这两种尺寸分别是由目前主流的移动设备Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比缩放而定义出来的，同时也是Iphone7和Iphone7 PLUS的逻辑分辨率。

有朋友可能会疑惑在设计原型的时候为何不直接采用移动设备实际的分辨率呢？由于这主要考虑到设计时的便携性，毕竟咱们输出的原型主要是用于演示而不是视觉稿，因此不须要达到那么高的精度，另外若是按移动设备实际的分辨率进行设计，在对元件进行编辑和排版的时候会是一件很耗费时间的事情，同时也不方便在电脑浏览器上进行查看。

本人在进行原型设计的时候通常用的是375px*667px这个分辨率尺寸，由于Axure经常使用的元件默认的字号通常是14px或18px，这两种字号也恰好匹配Iphone7上经常使用字号的比例，并且这个分辨率尺寸在电脑浏览器上恰好一屏就能够显示完整。

2. 定义内容区域

上面已经介绍了为何选择375px*667px做为移动端原型设计分辨率尺寸，在开始设计以前咱们须要先按照这个尺寸在编辑区域中定义好内容区域。我通常是使用辅助线来定义内容区域的，例以下图是用辅助线定义好内容区域的效果。

事实上咱们在设计时其实不用去限制原型的高度，由于在经过移动端设备进行浏览时能够经过滚动页面查看超出高度部分的内容，这跟实际的移动端产品的操做方式是一致的。而在原型设计的时候，咱们仍是须要拖一条用于标识原型设计高度的辅助线，它的主要做且是为了标识出首屏的区域范围，这对于布局选择是有必定的参考价值的。

3. 神奇的辅助线

辅助线的做用除了用来定义内容区域以外，同时它也能帮助咱们快捷的进行布局。辅助线有一个特性就是当你拖动元件靠近它时，元件会自动吸附到辅助线的边缘达到快速对齐的效果，对于有对齐强迫症的朋友来讲这个特性会感受无比贴心。

辅助线的基本使用方法：鼠标移动到编辑区域的左侧和顶部的标尺区域长按并往编辑区域拖动时就能够生成横向或纵向的辅助线，将辅助线拖动到对应的位置便可。

通常除了用辅助线来定义内容区域的以外，我还会新建两条纵向的辅助线用于标识界面左右两侧的留白区域。建议两侧留白区域用10px或者20px，例如本人经常使用的是20px，所以这两条辅助线的位置分别在X轴的20px和355px的位置。除此以外，咱们的元件通常还须要设置左右各20px的填充，用来将文字的显示限定在界面留白区域内。

补充几点辅助线的使用小技巧：

• 右击辅助线能够将其锁定，以防止拖动元件时会将辅助线会跟着一块儿移动；

• 能够经过按住Ctrl拖动建立全局辅助线，全局辅助线就是在全部页面中产生一条相同的辅助线；

• 在“布局—栅格和辅助线—锁定辅助线”中选中能够将全部的辅助线保持锁定状态且没法删除；

• 在“布局—栅格和辅助线—删除辅助线”中能够清除全部页面中的辅助线；

• 在“布局—栅格和辅助线—辅助线设置”中能够修改辅助线的颜色或进行更多设置；

4. 更多基础设计规范

经过以上几点介绍了咱们如何使用辅助线来创建了一个基本的布局规范，而如下是我总结的其它关于移动端原型的基础设计规范。经过掌握这些规范或技巧，可使最终输出的原型效果更美观和标准，并且能让你的设计效率大大的提高。

另外，这些规范或技巧一样基本适用于WEB端的原型设计，不一样的主要是设计分辨率和内容区域的定义，之后有机会我会进行整理和分享。

• 列表菜单的高度为45px、导航栏的高度为45px、标签栏和工具栏经常使用高度为60px；

• 字号通常用偶数，经常使用的正文字号为12和14px，经常使用的标题字号为16px和18px；

• 元件的宽度和高度通常为5的倍数，例如45px、100px等；

• 元件的距间和行距通常为10的倍数，经常使用10px、20px，按住ctrl键经过方向键移动元件，每次移动的距离恰好是10px。

5. 页面属性的设置

为了方便进行设计我习惯将内容布局向左对齐，而在演示时内容居中显示更符合浏览习惯，因此须要在页面属性设置中将页面排列设置为水平居中,另外，页面的背景色推荐设置为#F9F9F9。

6. 导航栏的设置

导航栏是移动端APP中最多见的元件之一，它的位置通常是固定在界面最顶部的，因此建议将导航栏转换为动态面板，而后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“上”，具体设置以下图：

7. 标签栏或工具栏的设置

标签栏或工具栏的位置通常是固定在界面最底部的，一样咱们也须要将标签栏或工具栏转换为动态面板，而后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。

经过这样的设置之后在有标签栏或工具栏的页面中，若是你的页面内容已经超出了一屏的高度，咱们一般须要在内容正文区域的底部放置一个与标签栏或工具栏高度一致的热区元件看成占位符，它的做用是用来解决原型演示时标签栏或工具栏会挡住页面内容的状况。

8. 模态窗口交互设置

模态窗口交互是移动端产品中最多见的交互方式之一，它主要用做显示系统的重要信息，并请求用户进行操做反馈，例如：删除某个重要内容时，弹出对话框进行二次确认。在原型中咱们能够经过简单的设置，实现跟移动端APP一致的模态窗口效果。

移动端模态窗口演示效果：

首先一样须要新建一个模态窗口的动态面板，在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。而后再在触发模态窗口的交互事件中按如下方式进行设置，重点是勾选“置于顶层”选项和设置“灯箱效果”，灯箱效果的背景颜色和透明度能够根据须要进行自定义。关于具体的设置和演示效果，能够参照我将在后面推荐的移动端元件库。

9. 输出选项的设置

到此为止已经介绍了关于移动端原型设计的一些规范和经常使用元件及交互效果的设置，那么当咱们的原型设计完成之后在生成HTML以前咱们还须要进行几项简单的设置。

设置位置：发布—生成HTML-移动设备，在界面中勾选“包含视口标签”，设置宽度为：device-width，设置缩放为：no，其它选项为空就能够了。

另外，你还能够设置主屏图标，而后在IOS设备中经过safari浏览器打开原型，就能够直接将它添加到主屏幕中了。经过主屏访问原型时将不会显示浏览器的相关工具界面，最终的演示效果几乎是跟操做实际的APP是一致的，你甚至能够根据须要定义状态栏的颜色。

设置方式：启动safari浏览器打开原型地址—点击浏览器底部的设置图标(正中间)—添加到主屏幕——完成添加便可。你们能够尝试使用下方演示地址进行添加看看效果。

演示地址：http://www.axureux.com/demo/TemplatesMobEC/demo.html

添加到主屏和最终运行时的效果：

按照上述的设置以后，你将原型生成为HTML文件以后上传到你的服务器或原型托管平台，经过手机访问原型连接演示便可。

10. 其它的补充说明

若是咱们设计的移动端原型不须要考虑在手机上演示的场景，仍然能够参照本文中相关的规范。我通常会在编辑区域放置一个设备模板，新建一个内容框架的动态面板用来放置页面的主要内容，而这个内容框架的尺寸一样是咱们以前定义的内容区域尺寸(宽)375px*(高)667px。另外，内容框架的动态面板的属性中须要将滚动条设置为“自动显示垂直滚动条”，这样当框架的内容超出时能够拖动滚动条进行查看。

经过添加设备模板的设计区域效果

经过使用设备模板可让输出的原型效果更标准和规范，若是咱们在编辑界面中放置了设备模板，则再也不须要对导航栏、标签栏或工具栏、模态窗口等动态面板进行固定到浏览器设置，你只须要拖动到设备模板对应的位置并置于内容框架上方便可。