整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
章作者分享了一种基于设备模板的移动端原型设计方法，相信能够对你的原型设计工作带来帮助，值得马克。
在使用Axure设计移动端原型的应用方面，我总结出了两种常用的方法。第一种是更适合在移动端进行演示的设计方法，大家可以参考我之前已经分享过的一篇教程：使用Axure打造最佳的移动端交互原型教程，使用这种方法输出的原型在手机设备上进行演示时可以达到跟真实APP几乎一致的展示效果及交互体验。在今天我将分享另外一种基于设备模板的移动端原型设计方法。
什么是基于设备模板的移动端原型设计方法？简而言之就是在Axure的编辑界面中放置对应的机型模板，使输出的原型达到更规范和真实的演示效果。其实这是一种很常见的移动端原型的设计方法，很多同行在设计原型的时候也都用过。这篇分享教程将对个设计方法进行了总结和梳理，并基于这个方法制作了一套可快速复用的模板。这套模板具有几个方面的特点：
● 结构化，根据APP界面结构进行搭建；
● 标准化，非常方便进行编辑和维护；
● 高保真，可高度还原移动端交互效果；
在本篇分享的结尾我会提供模板的Axure源文件下载，其中包含了最新的IPhoneX和IPhone8等多套IOS设备机型，以及一些常见的界面元素和交互效果。在开始正式的介绍之前，大家可以查看使用这套模板还原IOS中两款官方应用的设计演示。
由于这套模板是基于IOS系统进行设计的，所以相关界面元素和交互方式均以IOS为标准。目前主流的移动端系统除了IOS还有Android，这两种系统设计标准和交互方式其实是存在一些差异的，不过目前市面上大部分APP在设计时并没有争对两种系统做单独的处理。
所以如果没有特珠需求的话，我们一般也只需要输出一套原型方案就可以了，不过设计过程中需要尽量兼顾这两个主流的系统。当然，如果你的产品明确需要按照Android的系统规范来设计，你也可以参照本教程设计一套Android的原型模板，相关交互方式可以参照Android版的交互指南规范。
在开始介绍模板的搭建和使用方法之前，需要先对APP的界面结构做一个简单的介绍，熟悉了界面结构可以方便我们后续的设计。常见APP的界面主要由以下元素或组件组成：
状态栏显示设备的关键信息，包含设备模型或网络提供商、网络信号强度、电池使用量、时间等。在特殊界面中可以对状态栏做隐藏处理，或根据需要自定义状态栏背景。
导航栏位于app内容区的上方，系统状态栏的下方，并且提供在一系列页面中的导航能力。可在导航栏中显示当前视图的标题，如果标题非常冗长且无法精简，可以空缺，避免用过多的元素填满导航栏。导航栏中可以添加文字和图标控件，相关控件的可点击区域需要大于控件的可视大小。
内容区域根据需要进行自定义设计，常见的设计形式有菜单列表、图标列表、卡片列表、图文组合等。
标签栏位于APP底部，方便用户在不同功能模块之间进行快速切换。标签栏一般用作APP的一级分类，数量控制在3-5个之间。建议使用Badge进行提示，让用户知道有内容更新。
工具栏一般会出现在视图的的底部，提供给用户相关可操作的功能按纽。如，邮件应用程序里的收件箱栏中有删除、分享、答复等等。
移动端的弹出层根据弹出方式不同，共分为模态窗口、动作面板、弹出面板等几种不同的类型。在实际使用中，可根据界面的交互方式选择对应的类型。
一种轻量级反馈提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。一次只显示一个轻提示，有图标的提示字数为4-6个，没有图标的轻提示字数不宜超过14个。
列表视图是移动端APP中一种通用的界面元素。很多应用程序在一定程度上，都有使用表视图来显示数据列表。常见的例如IOS的联系人应用中联系人信息列表，另外还有Mail中使用列表视图显示邮箱和邮件。列表视图不仅可以用来显示文本数据，也可以用来呈现图像数据。
以上是豆瓣APP的一个界面截图示例，界面的结构用颜色进行了区分，从上至下分别为：状态栏、导航栏、内容区、标签栏。
在介绍完APP的界面结构之后，接下来说明一下模板的搭建方法。在本篇教程的结尾会提供了已经制作好的模板的文件，大家可以下载并参考本部分介绍进行使用，也可以参照介绍制作自己的原型模板。
在制作模板时需要用到对应的机型设备的图片素材，可以通过Dribbble等设计分享平台找到对应的素材文件，然后对素材做一些简单的处理。处理的过程首先是去掉多余的元素，只保留机型设备的框架图片。另外还需要对图片的尺寸进行调整，例如在制作手机等移动端模板时我们将内容区域定为375px，需要根据所定的内容区域对图片的尺寸进行相应的调整。
为什么模板的内容区域是375px？这个问题我在上篇教程中进行过介绍，所以不再进行展开说明。但是需要记住的这个尺寸是一个重要的标准，后续在设计过程中相关元件的宽度尺寸都需要参照这个标准。机型设备的图片素材准备好之后，我们在Axure中创建一个对应的母版，然后将机型设备图片拖入到母版中。母版的名称可以按该机型设备的名称命名，后面在使用时在新建的页面中拖入该母版即可。
下一步需要创建前面介绍过的APP界面中常见元素或组件，首先大家可以看一下这张图片中已经创建好的模板，其中包含了机型母版、轻提示、弹层、导航栏、标签栏、内容框架等元素。
在这个模板页面的概要视图中可以看到相关的对象，所有对象我都创建了一个对应的动态面板。这样的处理主要出于两个方面的考虑，一是方便对相关元素进行编辑维护，二是相关对象的显示是有顺序的，这样可以方便在概要视图中进行排序处理。
界面的主要内容在内容框架动态面板中进行编辑和维护，由于该动态面板设置了自动显示滚动条，如果你的界面内容超出了一屏，在演示时可以通过在内容框架区域滚动鼠标滚轮查看更多内容。
模板中的界面元素的尺寸并没有非常严格的标准，以下尺寸是我根据比例进行设置的，仅供参考。IphoneX状态栏：44px、IphoneX标签栏：80px、Iphone8状态栏：28px、IphoneX标签栏：60px、导航栏：40px。另外，内容区域的高度因为机型设备的素材图片不统一可能略有差异，基本上可以忽略。
在设计原型时建议每一个界面创建一个对应的页面，通过添加页面链接进行界面跳转，这样方便对原型进行编辑和维护。不建议将多个界面用动态面板堆砌在一起页面内，这样会使输出的原型在演示时出现卡顿现象。
在概要视图中可以看到相关元素对应动态面板的层级顺序，在使用该模板的时候请尽量参照此顺序，否则可能在演示时出现显示错误的情况。
为了方便维护可以将标签栏创建为母版，然后添加到需要显示标签栏的页面中。另外，在对应的页面中需要显示对应的标签选中效果，只需要在该页面中的标签栏动态面板中添加一个选中效果的标签元件。
如果页面中添加了标签栏或工具栏，由于标签页的动态面板在内容框架的动态面板之上，在演示时会出现内容有一部分被挡住的情况。可以创建一个高度为100px的热区元件为母版，将母版拖入对应的页面底部，用来解决内容区域被挡住的问题。
经常有朋友向我咨询如何设计出更漂亮美观的原型，虽然原则上原型能完整的体现出需求细节即可，好看并不是我们在原型输出时应该关注的重点，但是如果能满足说明需求的同时能把原型做得更漂亮一些更好，这也算是体现专业程度和工作态度的一个方面，而且很多人对自己的输出物也是有强烈的美感追求的。
其实原型设计不需要了解太复杂的设计方法，只要掌握一点简单的技巧就能达到美观的效果，同时能让整体更统一和标准。在分享的这套模板中包含了一些基本的设计元素，我下面对其中的一些规范细节进行说明，供大家进行参考。
Axure中的配色板提供了一些常用的颜色色值，可用作一些常用元素的颜色配色。例如截图中标注1中的纵向的灰色色值可用于相关字体元素的颜色，标注2中横向的灰色色值可用于相关元素的背景和线条的颜色。另外，点击标注3中的更多按纽，可以将其它的常用色值加入到自定义颜色中，方便快速的使用。
在以前的教程中已经介绍过辅助线的使用方法，合理的使用辅助线可以帮助我们提升设计效率，同时能让输出的原型效果更标准，所以强烈建议大家在设计过程中使用。以下是模板中内容框架编辑区域的截图，是我常用使用辅助线用来排版的方式。截图中的辅助线均为横向x轴辅助线，可以看到其中共有4条，分别介绍一下它们的作用和位置：
这些辅助线的用法只是作为参考，可以根据自己的需要新建对应的辅助线。鼠标光标移动到编辑区域的左侧和顶部的标尺区域，按住鼠标左键并往编辑区域拖动时，就可以生成横向x轴或纵向y轴的辅助线，然后将辅助线拖动到对应的位置即可。辅助线还有一个特性就是当拖动元件靠近它时，元件会自动吸附到辅助线的边缘达到快速对齐的效果。
移动端原型中最常用的交互效果就是弹出层和轻提示两种，模板中已经包含了这种两交互效果的相关元件和事件，这里再单独简单的介绍一下。
在模板页面的概要视图中可以看到名为“提示”的动态面板，需要显示的提示信息在这个动态面板中编辑就可以了。当前的动态面板中有一个“操作成功”的提示状态，如果在一个页面中显示多个提示，可以新增对应的状态然后修改相关的提示内容。
选中提示的动态面板的状态右击选择复制状态可以快速创建新的提示。建议对每个对应的提示状态进行命名，这样方便后续进行管理。关于轻提示的基本使用规范请参照前面的介绍内容。
Toast提示的显示方式设置很简单，只需要在对应的元件事件上加入以上的交互动作。首先设置提示动态面板中对应的状态，然后设置显示动态面板，显示时有一个逐渐的动画效果。
Toast提示显示以后会在3秒后自动逐渐隐藏，模板中的这个交互动作已经加在提示动态面板的显示时事件中了，不需要再单独的进行设置。
移动端的弹层共分为模态窗口、动作面板、弹出面板等几种不同的类型。在模板页面的概要视图中可以看到名为“弹层”的动态面板，可以根据需要创建更多其它的弹层状态，还能在对应的面板状态属性中设置透明背景的遮罩效果。
上面截图中的为比较常见的模态窗口弹层效果，设置方式是在对应的元件事件上加入以上的交互动作。另外，根据模态窗口、动作面板、弹出面板这几种弹层类型的弹出方式不同，需要设置显示时为向上滑动和逐步等动画效果。
最后介绍一下如何实现内容区域滚动时，导航栏自动切换的交互效果。首先需要在导航栏的动态面板中创建对应的状态，然后选中内容框架动态面板，在它的滚动时事件中按照上面的格式加入对应的条件判断即可。
在这个设置用到了条件判断和函数，条件的详细设置见上方的截图。它的原理是当内容框架垂直滚动高度大于70时设置导航栏动态面板的显示状态为2，当内容框架垂直滚动高度大小于70设置导航栏动态面板的显示状态为1。其中用到的This.scrollY函数是获取当前元件的直滚动高度，70的值可以根据需要自己设置。
好了，到此这篇基于设备模板的移动端原型设计方法的分享基本介绍完了。最后提供的是iPhoneX And iPhone8 Mockup 原型模板的源文件下载，大家可以结合本文中的相关介绍进行使用。
最后再给大家分享一套本人整理设计的移动端元件库，这套元件库中的相关元件是可以在这个模板中复用的，后续也会不断的进行优化和完善，有需要的朋友可以关注一下。
文作者从设计原则、色彩、图标这3个角度对产品原型设计进行了拆解。
关于B端Web产品前期从流程上进行了复盘，这次从原型设计的角度来进行梳理。
原型设计是产品经理的硬技能，也是产品经理与各相关方沟通的直观桥梁。只有看到了原型demo，甲方爸爸们才会清楚的知道他们不要什么，可能还需要什么。
我的原型设计之路，从一开始的野路子，到目前的稍有章法，多亏了Ant design的组件库、设计语言，以及参照《写给大家看的设计书.第4版》一书中所进行的刻意练习。
特此给大家做个小小的分享，给入门的产品小白以参照，如有设计师出身的产品大大们还请拍砖。
目录：
参照基本的设计原则，可以帮助我们更高效、高质量的完成原型设计。
四大设计原则，是在《写给大家看的设计书.第4版》一书中由罗宾·威廉姆斯(RobinWilliams)提出的，包括亲密性、对比、对齐、重复，适用于印刷品、出版物，也适用于Web的产品设计。
含义：将相关的项组织在一起。彼此相关的项应当靠近，归组在一起；不相关的项，则远离。
作用：有助于组织信息，减少混乱，为读者提供清晰的结构。
表现：在一个页面上，物理位置的接近就意味着存在关联（实际生活中也是如此）。
问题：哪副图看起来这两位像亲密母子，哪幅像是路人？
图源自《写给大家看的设计书.第4版》
亲密性在Web页面的体现是横向、纵向的间距。信息的关联性越强，则间距越小，反之则间距越大。
间距规格分为小、中、大三种，对应8px、16px、24px，再大些可用32px、48px。也可以参照公式来设定间距 y=8+8 * n（n>=0），y为纵向间距。这个公式不等于y=8*n（数学学渣已经想了一遍） 来扩展间距。
踩过的坑儿：
一期设计时，对间距的认知是需要间距，标准自定义为10px的倍数，吭哧吭哧一顿调，还觉得页面比上实战课时画的好，羞愧。直到原型已经画完了，和UI同学请教，才发现标准是8px的倍数，再后来看到了Ant design上的建议，先按照着规范来。
亲密性bad case示例（图源自某产品试用版）
含义：任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。
作用：使页面统一而且有条理。
表现：在页面中无形的一条线，常见的有左对齐、右对齐、居中对齐。Ant design建议是文案左对齐，表单冒号对齐，数字取相同的有效位的右对齐，其中冒号对齐是一种特殊的右对齐。
踩过的坑儿：
对于表单的冒号对齐，官方解释是，能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项。
目前我的理解是，表单内存在输入前、输入中、输入后三种状态，输入前和输入中，需要了解填写哪些内容，固然是左侧的项目信息重要。而在输入后，左侧信息变为了辅助，而右侧输入框中的内容变为了主要，即使没有左侧的项目信息，你也依然能够轻松理解、校验其内容。
图源自Ant Design Pro（也可对比上一张图片，亲密性上有很大差异）
含义：页面上的不同元素之间要有对比效果，达到吸引读者的对比效果。
作用：不仅可以用来吸引眼球，还可以用来组织信息、清晰层级、在页面上指引读者，制造焦点。
表现：Ant design提供了主次、总分、状态这3种关系的对比示例。
踩过的坑儿：
主次关系对比，比如在页面操作区一共有5个按钮（可以用一个更多来隐藏3个按钮）。那5个按钮，谁是主，谁是次，需要产品经理去判断，去引导去告知用户这个页面的核心功能是什么。
主次关系不明确的bad case（优化方案有多种）：
状态对比，可通过改变颜色、增加辅助形状等方法来实现。一开始认为由文案来进行状态区分即可，颜色是非必需的。最近在学习了视觉认知的内容后，转变观念，确实可以运用颜色来进行辅助；例如贴近生活的红绿灯、自然灾害的蓝黄橙红预警，都能够让用户更好区分信息。
图源自Ant Design Pro。
含义：设计的某些方面需要在整个作品中重复。重复元素可以是一种粗字体、一条粗线、某个项目符号、颜色、图片、设计要素、某种格式、空间关系等。
作用：增加条理性，统一性，并增强视觉效果。
表现：大于1次、1个以上元素的多次出现；最常见、易被感知的是首页的介绍区。
图来自Ant Design Landing模板
踩过的坑儿：
初期在首页中原本预留了功能介绍的区域（如上图），因为一期只有一个大功能，就被砍掉了。在合适的时间做合适的展示就好。
目前的设计中的重复元素是页面的顶部格式，每个二级页面统一使用了色块和二级主菜单的文案为顶部内容区，打造了系统的统一性。
除了上文出现的4个基本原则，Ant design的设计语言中提到了6组进阶原则，分别是直截了当、足不出户、简化交互、提供邀请、巧用过渡、即时反应。
结合目前的经验，运用较多的是这3组原则——直截了当、提供邀请、即时反应。
1）直截了当
即简洁明了，不仅仅适用于原型设计，也是适用于文案的设计、异常信息的提示等。
B端距离用户近，如果设计不贴合业务，文案又难以理解，那么等待你的很可能是用户的狂轰乱炸，不断有人询问这操作是啥意思，这功能咋用。
最近在琢磨公司内部用户行为分析的平台，作为一个产品看不懂另一个产品的用户手册o(╥﹏╥)o。
2）提供邀请
官方解释是酱紫的，【邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么】。
提供邀请，体现在交互之前给出反馈，解决易发现性问题。
图源自中国大学MOOC网页端
动态邀请常见的是悬停（hover）邀请。如上图，从左至右依次命名为A、B、C。
A是默认展示效果，B是鼠标hover效果；对比A，B有了阴影效果和右上角的更多按钮。当点击B图中更多按钮后，出现的是C图，告知我们可以在这里查看课程介绍和退出课程。当你对老师的讲课风格不中意，学习精力分配不过来之时，就可以来尝试着退出课程咯。
3）即时反应
即在交互之后立即给出反馈。反馈过多对用户是打扰，没有反馈，则确定性较低，对用户是困扰。
举个例子：
友人发来一张有趣的图片，你想要保存；点击下载之后，系统刚好弹出一个toast提示【已保存到系统相册】，2s后提示消失，即没有过多打扰，也新增一枚斗图表情包。假设没有这个toast，强迫症患者（我）要么是多次下载，要么是从APP跳出进入相册中进行二次确认。
即时无法处理完时，产品如何解决用户焦虑？
一期遇到一个case，流程是用户导入数据，后台执行校验后执行增删改查操作。
当数据量级超过2万条时，处理时长达到2min，数据量级较低时2s可执行完毕。尽管在设计之初有双重的提示，操作完成后会进行邮件通知，然而2min内用户如何自处，是刷新当前页面，还是静静等待。
Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。系统级色彩体系主要包括了基础色板、中性色板；而产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色（进阶之选）。
对于产品小白，比如我，基础色板中共有120个颜色，可以充分满足日常所需喔，颜色是酱紫滴。
图源自Ant design（C位是亮点）
产品级色彩体系第一次实践，一开始选取的是沉稳大气的深蓝色为主体色（高大上的说法是品牌色），而后在UI同学提供首页的设计图后，采用了与首页设计图中主色调一致的颜色作为产品主色，代表着明亮、活力、科技。
图标，官方解释是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。
我的理解是调节枯燥的页面，图文结合。
目前遇到过的坑儿是，Axure中有好几套的图标库，每次都反复在几个图标库中寻找更合适的icon，时间上存在浪费。图标存在的意义是在于对系统有效，提醒自己切勿舍本逐末。可以先研究透一套icon，再进行拓展升级打怪。
我的进化史是这样的，一开始原型上除了图，无任何说明，文字说明依靠PRD；而后发现评审时大家更（只）喜欢看大原型，第二阶段原型上增加说明，并且是需说明之处的临近位置（页面显示有点吃藕）；第三阶段，在原型的底部固定区域，固定颜色标注关键页面说明。
第三阶段目前已固定，既可以提示关键信息，也可以提前整理PRD思路。
一个组件，可套用模板组件，也可手工画。个人建议，初期参照模板自己画，可以更快熟悉标准、规范，锻炼扎实的基本功；后期套用模板，高效、高质量的完成原型设计。
画图是个很耗时的工作，谁画谁知道，特别是有强迫症的同学。
组件是产品传达的基础，组件承载的信息，才是核心。表格很容易画出来，重要的是表格里展示哪些信息，又不展示哪些内容。
在产品的培训课中，当时属于初学阶段，画出的是低保真，已是满足；在工作中开始画原型时，看着低保真就觉得有些简陋了。所以，现在产出的原型大多为中保真，并且在逐渐接近高保真，页面的颜值有时候也是实力。
在没有UI同学的参与时，个人建议是由产品经理完成中保真页面的原型产出，借由较好的原型demo，以无形的压力督促前端同学，一起给产品打造个漂亮的面子。
有UI同学可合作时，产品经理按照业务逻辑、设计基本原则、中性色板提供原型，由UI进行逼格提升，各自安好~
产品设计经验尚浅，还请各位看官不吝拍砖。
共勉。
参考：
1. Ant design设计语言 https://ant.design/docs/spec/introduce-cn
2.《写给大家看的设计书.第4版》
本文由 @凉凉Lxy 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
Pxmu.js是一个专门为移动设备Web打造的消息提示框插件，无需任何依赖额外依赖,即可运行。由于全局使用flex布局，因此具备良好的兼容性，PC端也可以无缝运行。专注于打造提示组件，所以其能力要相对于其它的框架内组件稍强一些，具备精美的样式以及可以自定义动画、字体、颜色等！
https://github.com/shiyueGG/pxmu
Pxmu有常用的 toast、diaglog、success 、loading、copy 等。下面就简单说明下使用方式
<script type="text/javascript" src="pxmu.min.js"></script>
使用方法：
pxmu.toast({})
pxmu.toast('内容')参数可选：
{
msg: '操作成功', //内容 不能为空
time: 2500, //停留时间 默认2500毫秒
bg: 'rgba(0, 0, 0, 0.86)', //背景颜色 默认黑色
color: '#fff', //文字颜色 默认白色
location: 'bottom',//居中center 顶部top 底部bottom默认
}使用方法：
pxmu.diaglog({})//结果返回promise
pxmu.diaglog('内容')由于参数过多这里不便于展示，如图片不清晰可以查看官方文档：
使用方法：
pxmu.loading({})
pxmu.loading('正在加载。。。')参数可选：
{
msg: '正在加载', //loading信息 为空时不显示文本
time: 2500, //停留时间
bg: 'rgba(0, 0, 0, 0.65)', //背景色
color: '#fff', //文字颜色
animation: 'fade', //动画名 详见动画文档
close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
inscroll: false, //模态 不可点击和滚动
inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
}可手动关闭：
pxmu.closeload(100);//延时100毫秒关闭 默认0使用方法：
pxmu.success({})
pxmu.success('加载完成')参数可选：
{
msg: '加载完成', //loading信息 为空时不显示文本
time: 2500, //停留时间
bg: 'rgba(0, 0, 0, 0.65)', //背景色
color: '#fff', //文字颜色
animation: 'fade', //动画名 详见动画文档
close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
inscroll: false, //模态 不可点击和滚动
inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
}也可手动关闭：
pxmu.closeload(100);//延时100毫秒关闭 默认0Fail对标Success
pxmu.fail({});
pxmu.fail('加载超时');参数可选：
{
msg: '加载超时', //loading信息 为空时不显示文本
time: 2500, //停留时间
bg: 'rgba(0, 0, 0, 0.65)', //背景色
color: '#fff', //文字颜色
animation: 'fade', //动画名 详见动画文档
close: true, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
inscroll: false, //模态 不可点击和滚动
inscrollbg : 'rgba(0, 0, 0, 0.45)',//自定义遮罩层颜色 为空不显示遮罩层
}手动关闭：
pxmu.closeload(100);//延时100毫秒关闭 默认0快速复制一段文本，或复制指定dom下的文本内容
使用方法：
pxmu.copy({})<div data-pxmu-copy-text="复制的内容">点我复制</div>pxmu.copy({
el: '#test' //复制id为test下的内容，
});
//或者
pxmu.copy({
el: '.test' //复制class为test下的内容，
});快速回到页面顶部（带动画）
使用方法：
pxmu.totop()// 全局重叠设置
pxmu.overlap({
loading : true,//是否不重叠弹出层 默认true不重叠。为false时会重叠消息层
toast : true,//是否不重叠弹出层 默认true不重叠。为false时会重叠消息层
});pxmu是开发中常用的一个小插件，在某些项目中非常实用，特别是针对一些小页面小应用的场景，当然在大型应用中也可以使用。总体来说使用感受不错，样式也非常符合现代页面的审美，兼容性强，自定义能力强，同时还具备动画设计，是非常不错的一个小插件，推荐给部分需要的人！
*请认真填写需求信息，我们会在24小时内与您取得联系。
