人不风流枉少年

MasterGo要想内容支持滚动，必须将内容放入到容器内部（类似于App中的ScrollView组件逻辑），并设置滚动方向。

可变组件的文本内容其实就是在属性面板中可以修改文本值。

创建一个按钮在不同状态（“默认“、”点击“、”不可用“）下的按钮。创建一个新按钮并创建为组件。

打开另一个团队的另一个项目中的原型文件，如 我的团队- 餐饮小程序项目 - 新文件，订阅其它团队的团队库，订阅之后就可以使用其它团队的团队库了。组件创建成功后会在“资源” - “所有团队库” - “本地” 中显示出来。在绘制组件时尽可能使用容器而不要使用矩形，在使用矩形结合自动布局时会有问题。绘制一个容器再绘制一个文本，并设置文本为单行模式。组件库是放在某个项目下的，别的项目要想使用其它项目的组件库是需要发布到对一个项目的组件库中的。拖拽一个父组件后形成为子组件实例，是。，表示是一个父组件。

UI设计中常要设计符合项目风格的一套设计规范。MasterGo中支持对部分样式（圆角、填充、描边、特效）进行命名，然后在元素中统一引用同一个样式。MasterGo只有设计文件才可以自定义样式，原型文件是不能创建自定义样式的。

统一的样式规范能够保证整个系统提供一致的外观视觉感受。产品经理在绘制原型时要有一定的常识，下面是开源的设计提供的规范，Element 简单实用、Arco Design是按照使用场景来设计的，更贴合实际使用情况。

自动布局是用来表示 子元素与子元素之间互相影响的一种排版方式，是一种响应式布局技术。

约束是指当前元素相对于父容器的相对定位。

选中倒数第二个点和倒数第一个点，按着Shift + ↓ 来逐渐调整，大概按4下然后退出编辑模式，这里选择直角。双击矩形进入编辑模式，然后向左移动中间的控制点。因示例中矩形宽度为300，准备分为3份，故移动到100位置。选中工具栏中的钢笔，大概在135的位置打个点，然后双击结束打点。选中两个拐点修改圆角为10，这样拐点处就过渡比较自然。绘制一个矩形，设置圆角为20。

蒙版的作用：用于剪裁超出区域的内容。以底部组件为范围，将目标组件放入到底组件之上，目标组件如果超过底组件的范围将不可见。常用于2张图片之间切图的效果（一张图片作为背景另一张图片放在背景图边上只显示部分图片）。

6. 将选项组和下拉输入框组合在一起设为动态面板，作为展开状态。制作一个高保真的下拉多选需要具备多种交互事件。5. 设置鼠标经过时的每个选项有背景色。

在B端系统中通过菜单打开的页面常以标签页的形式打开，本文将实现如何动态添加和删除标签页。6. 删除标签页，为关闭图标添加单击事件。

填一些个人信息，以及可以访问的原型文件地址，每个值都要填，确保每个值都填正确，申请完需要等待审核，一般工作日一天可以审核，如果有问题可以联系他们的QQ账号。

为什么动态面板还要再内嵌动态面板？当主数据上下滚动时，左边表和右边的表也要跟着同步滚动，动态面板默认显示第一个状态，对于首列区中的第一个状态内容是一个表格，而表格是不支持滚动的，而动态面板是支持滚动的，所以还需要将状态1中的内容（表格）再次转化为动态面板。示例中的表格中的数据只有9条，中间也只有6列，为了能让动态面板可以滚动要么增加数据量，要么缩小动态面板的宽和高，两种方式都可以，这里选择缩小动态面板的宽和高。进入每个动态面板的状态1，然后再将内容转为动态面板，注意：不修改内嵌动态面板中的”不滚动“。

拖一个复选框，设置边框颜色浅灰色9796A0，文本颜色浅灰色91909B，圆角半径3，并设置选中的边框颜色为3366FF，复制多个复选框。为全选框添加选中或取消选中事件，让每个选项都切换选中true和false。

10. 整体测试下来按钮会显示”0秒“的情况，所以将if条件判断条件由原来的second > 0，改为 second > 1。5. 为动态添加事件，当动态面板切换时，修改全局变量的值并且更改全局变量second的值等于[[second - 1]]。当恢复完按钮的文本发现再次点击按钮无效是因为second的值已经为0了，所以要恢复全局遍历的second的值等于60。6. 动态面板会一直切换，所以值会为负数”-100秒“，所以要增加设置文本的条件，当值大于0时才允许修改。

拖入一个文本标签，文本颜色为515A6E。

3. 全选转为动态面板状态1命名为”关“

拖拽2个单选按钮并关联同一个按钮组，设置选中的边框颜色3366FF。

核心功能，如新增、保存等。拖拽一个矩形2，设置填充颜色为蓝色 3366FF，文本颜色FFFFFF，排版：水平居中，圆角半径：4，鼠标经过时填充颜色6690FF。

拖入一个向上的箭头图标作为增加按钮，再拖入一个矩形，将向上箭头图标放入矩形内。矩形：18x15，边框颜色DCDEE2,边框左下可见，箭头图标：8x5，矩形置底，组合在一起命名”增加“。将文本输入框设置为无边框放入到这个矩形壳子里，调整输入框的上下层级，将输入框位于矩形之上，并全选所有组件设置为一个组合。根据上面步骤制作”减少按钮“，边框可见性为上左，矩形边框置底，两个组件中间对齐，组合为”减少“。拖入一个矩形，作为整个数字输入框的边框，边框颜色为灰色DCDEE2，圆角半径为4。鼠标移入时边框为蓝色。

获取光标时边框颜色为蓝色并且四周带有模糊效果。

上面的单击事件的事件源是下拉菜单动态面板上，也可以将事件源设置为向下的箭头上，即点击“下拉菜单”是一种功能按钮，点击向下的箭头才展开下拉子项（此时可以将箭头宽高调整稍微大些便于点击w：9, h：5）。次步骤也不是必须的，有的时候可能就是要这种效果。当鼠标点击下拉选项时应该隐藏下拉选项，即切换成折叠状态。为所有下拉选项都添加鼠标单击事件。多个下拉选项为什么要转为动态面板？作为矩形容器盒子，可以设置边框样式。设置每个下拉选项鼠标悬浮（鼠标经过）时的填充颜色为灰色F3F3F3。设置下拉选项动态面板的圆角为2。

本示例模仿一下销售易官网的水平导航栏是如何制作的。

新版本Axure RP11安装之后原先导入的组件库可能会不存在，需要重新导入，导入时尽量一次导入一个防止一次导入多个长时间加载中或者闪退。

因为“左侧菜单栏容器”和二级菜单的x一样，宽度也一样，所以二级菜单的右边框就与“左侧菜单栏容器”的边框重叠在一起了。为什么一定要重叠在一起呢？因为二级菜单是个矩形，矩形的右边框是实线宽度为1，一旦二级菜单的x坐标和宽度和左侧菜单栏容器的x坐标和宽度完全保持一致，就会造成一种假象：二级菜单栏没有右边框的假象（因为二级菜单栏右边框和左侧菜单栏容器的右边框重合了，给人一种错觉，这个边框是左侧菜单栏容器的边框而不是二级菜单的边框）。选中一级菜单及图标和所有二级菜单，转为动态面板，并复制一份状态，并对状态名重命名。

一：共享Axure Share共享就是将原型文件发布到axshare.com中。首先要先注册账号，然后创建一个项目。axshare.com在国外访问速度慢，可以托管到中国的服务器上。共享是可以设置访问共享密码。发布后可以通过这里显示的地址来浏览。共享过一次后后面可以使用更新。二：AXURE原型托管 zptqhttps://www.zptq.com/ 单文件最大支持500M，总容量5G，多版本管理。新建项目。导入PR文件。三：Axhub（https://axhub

在公司中常会看到原型图平铺的情况，即一个需求只有一个静态页面没有任何交互动作，这个需求中的其它子页面都放在这个页面上，然后通过一根线来连接页面流转，使用标记来来备注需求说明。这样在子页面少的情况下没什么问题，当需求复杂子页面多的时候那么整个页面的内容就会变的很多，看着可能让人心烦杂乱。当功能复杂，子页面较多的时候，我们可以为页面添加点击交互事件页面跳转，不平铺页面而是通过点击按钮来跳转页面，然后通过为元件添加说明来解释需求。一：说明字段设置（可选）选中页面 -> 说明 -> 设置 -&g

产品经理在画原型时要不要加交互事件，不同的人有不同的观点，而且在实际工作中也不统一。一：UI和UEUI设计师：用户界面设计（User Interface Designer），常用来指设计界面美观的工作。UE交互设计师：常用来设计人与软件之间的交互方式。一般只有大公司才会有该职位。二：低保真和高保真原型的保真度一般体现在：内容、交互、视觉三个维度上，高和低就是成果物的质量程度，也就是保真度。低保真：一般是不带交互动作和视觉设计元素所制作的原型，多用线框图呈现，受项目节奏限制，完成的质量也.

在实际工作中有些公司使用Word文档来写需求文档（一般是大公司），有些公司使用Axure来写需求文档，他们习惯在画原型的时候在旁边写需求，并用辅助线来连接需求说明和对应的功能（组件），那么我们应该如何选择使用方式？？？一：使用Word文档写需求文档的优劣势1.1 优势方便存档，方便交接和传播（传递）；方便习惯使用Word文档的技术人员；方便发邮件做报告；还对于一些有较复杂流程，需要用到各种图示的产品项目，Word文档方便贴图。1.2 劣势原型和需求文档需要不断.

一：执行一个简单的js脚本为按钮添加一个单击事件，链接到URL或文件路径，输入js脚本，脚本的第一行必须是javascript:。javascript:alert('js被执行了');注意：js中的注释不能使用//, 只能使用 /* */，最好不要加任何注释。二：引入视频控件拖入一个矩形，命名为”videoCode“，并将以下html代码粘贴到矩形。<iframe src="https://www.runoob.com/try/demo_source/movie.mp4"

拖入一个矩形，W：40， H:40, 矩形内容为➖，设置字体颜色，R:153 G:153 B:153，设置矩形填充颜色：R:242 G: 242 B: 242，命名为”减号矩形“，并设置左边两个角为圆角。同理加号。拖入一个矩形，用来作为输入框的边框，矩形四角调为圆角，线段颜色：R:220 G:223 B: 230，将边框矩形放到加减矩形的正上方，并置于底部。在边框矩形中拖入一个文本框，取消边框(线段:None)，排版：居中对齐, 输入一个默认值6，元件命名”数值输入框“。为加号添加单击事件.

超链接非常容易制作，随便拉个”链接按钮“即可，但是如何实现鼠标悬停时鼠标又原来的箭头变为小手呢？拖入一个链接按钮，并修改文本为忘记密码，为忘记密码添加单击事件，注意只添加事件不加任何动作；右键”单击时“，添加情形时，添加完什么就不操作。预览。鼠标移入鼠标执行形状变为小手实现的原理就是为此添加一个单击事件，单击事件中不添加任何动作，为了让单击事件生效，只需要添加一个空的情形即可。类似于以下伪代码。<a onclick="forgetPassword()"> </a&g.

拖一个矩形，填充色为浅灰色，W: 375 H: 49, 命名为底栏动态面板，并转为动态面板，并复制3份State1。去阿里矢量图中搜索ic_tabbar，找到四组底部状态栏选中和未选中的图标，并统一修改尺寸 25x25，并配备名字，将文字和图标设置成一个组合。注意图标要和文字居中对齐，没组图标之间要水平对齐(即中间间隔相等，选中所有图标点击水平对齐)分别将每一组状态栏放到不同的状态上。为动态面板中的每个状态中除了当前选项外的所有图标添加鼠标单击事件，切换为对应的状态。以S..

验证码实现非常简单，只需要一个动态面板，添加几个状态，每个状态中放一张不同的图片，然后点击动态面板切换到下一个状态即可。拖拽一个动态面板，设置W：111，H：36。分别为State1、State2、State3 添加不同的图片验证码。3. 添加鼠标单击时交互事件。4. 预览...

1 更改页面尺寸，将Auto改为Web，页面布局改为左侧对齐。页面尺寸和页面布局都会对元件的位置有影响。拖一个动态面板作为左侧菜单导航栏的整体容器，设置x:0, y:50（这里留出50是给顶部导航使用的）w: 210，双击动态面板进入State1设置填充颜色R: 48 G: 66 B: 86，动态面板只有一个状态State1。页面载入时设置尺寸，设置高度为：[[Window.height - 50]]，至此左边导航栏的容器算是完成。双击导航栏容器进入State，拖拽一个矩形作为一级

制作一个二级菜单。为用户管理命名为一级菜单。选中所有矩形，统一为矩形设置选中的样式。将二级菜单转为动态面板，并命名为二级菜单。进入动态面板State1，选中所有矩形，设置选项组，设置的目的是二级菜单只能有一个被选中。设置二级菜单动态面板默认为隐藏。为一级菜单(用户管理)添加鼠标单击时事件，单击时设置选中状态并切换二级菜单的可见性。为每个二级菜单添加一个鼠标单击事件，单击时取消一级菜单的选中状态，设置当前二级菜单的状态为选中。这样一级菜单和二级菜单只能有一个可以选中。..

拖入一个矩形，设置文本为“菜单一”并命名为“菜单一”，拖入一个动态面板命名为“内容一”，放在矩形的整下方，填充动态面板状态的内容并默认设置为隐藏。复制菜单一矩形命名为菜单二并放在菜单一的正下方。在菜单二的正下方放置一个动态面板并命名“内容二”，填充一下State1的内容。复制菜单二矩形命名为“菜单三”放在菜单二的正下方。在菜单二的正下方再添加一个动态面板。为菜单一添加鼠标单击事件，让内容一切换隐藏性，隐藏其它(内容二和内容三)的动态面板。为菜单二添加鼠标单击事件，让内容二切换隐藏性，隐藏其它(.

拖拽一个矩形，设置填充为蓝色、无边框。将蓝色矩形转为动态面板并取消“自动调整为内容尺寸” ，进入State1，删除原来的蓝色矩形，并为State1设置同样蓝色的背景颜色。为动态面板设置100%宽度。往顶部导航栏左侧添加一个“Administrator”字样作为logo。在顶部导航栏的右侧放一个动态面板，State1中放一个头像和用户名，下面再放一个动态面板（下拉菜单）内容为设置和退出登录。下拉菜单默认隐藏。当鼠标移入头像时显示下拉菜单，当鼠标移出下拉菜单时隐藏下拉菜单。...