Arthur's Blog

本文要给大家讲解的是，美化版高保真动态复选框的制作，enjoy~

01 相关介绍

今天给大家介绍一个高保真式的动态小组件，类似于单选框，不过已经是美化版的。

02 页面布局

新建一个页面，命名为【高保真动态复选框美化版】。

在【高保真动态复选框美化版】从元件内拉出4个矩形元件，分别命名为1、2、3、4，皆为同等大小。

03 样式美化

给4个矩形元件的【鼠标悬停】、【鼠标按下】、【选中】三个交互样式都设置成填充颜色为#06C1FA，矩形1的应用页面的状态为选中，将四个矩形化成一组，输入[选项]组名称为：abc。

04 实现复选框样式的动态交互

选中任何一个【矩形】元件，在【属性】中设定【鼠标单击时】的用例，配置相关的动作。

05 预览效果

06 结语

请路过的朋友们多多支持哈，卧枕江山在这里先谢谢了，以后会有更多优质的文章和产品在这个平台上进行发布，请尽请期待呦！

#专栏作家#

曾负责过多个项目的设计和研发，有丰富的动态交互设计的经验。

你知道如何用AXURE做一个饼图吗？一起来看看吧~

本文将教大家如何用AXURE做一个饼图。

在线演示地址：http://ije8g9.axshare.cn/#g=1&p=%E9%A5%BC%E5%9B%BE

功能介绍

图表不需要联外网，数据也不是写死的，只需在中继器或表格中填写数据即可自动生成图表，操作简单。大小、颜色、样式、交互可以自由变换。鼠标移入时能显示具体数据。

制作方法

1. 材料准备

准备n个半圆形填上不同的颜色，放置同一位置如下图所示。

2. 表格制作

如下图所示，根据需求做好表格，最大的值一定要发在一个个格子。

3. 设置表格总数

表格总数=各值加总

4. 旋转

旋转分两种情况：

1最大值占总值少于等于50%

以鸡尾酒为例，那么第一个图形旋转的角度就是500/总数*360，第二个图形旋转的角度为400/总数*360+第一个半圆旋转的角度，以此类推。

2）最大值占总值大于50%

这时，我们要复制一个和第一个半圆一模一样的半圆，影藏掉，当最大值占总值大于50%时，显示出来。然后在旋转第一个半圆。

以鸡尾酒为例，那么第一个图形旋转的角度就是500/总数*360-180，第二个图形旋转的角度为400/总数*360+第一个半圆旋转的角度，以此类推。

5. 标签制作

做一个标签，如下图所示，默认隐藏。

思路：鼠标移入矩形的时候，显示标签，标签跟随鼠标移动，让Item.no的值=文本标签2，Item.x的值=文本标签1，以此类推。

鼠标移出的时候，隐藏标签即可。

最后，制作完成后，以后使用方便，仅需简单填写中继器的内容，即可拥有完美的效果，所以强烈推荐给各位使用。

有需要原型的小朋友给我留言哦，谢谢阅读。

本文由 @梓贤Vigo 原创发布

上一期教会大家如何用axure做一个简单的柱状图，本文将教大家如何用AXURE做堆叠柱状图。

效果如下：

一、功能介绍

所有图表不需要联外网，数据也不是写死的，只需在中继器或表格中填写数据即可自动生成图表，操作简单。大小、颜色、样式、交互可以自由变换。鼠标移入时能显示具体数据。

二、制作方法

（1）先做出普通的柱形图原件，具体制作方法参考我上一篇文章——Axure 教程：怎么做超漂亮的柱状图

（2）中继器内材料：矩形1，复制多个柱形图里面的矩形，填充自己喜欢的颜色，放置于原来矩形一致的地方。

（3）中继器内表格设定

x是横坐标的值，no是各种产品的值

（4）在中继器外建一个文本框（命名为最大值）并隐藏，只用于逻辑处理。文本框的值填写no里面最大的总值，该案例为980。逻辑是找到最高的总值，让比它底的值调低高度。具体公式[[LVAR2.height*(Item.no/LVAR1)]]。

LVAR2.height指矩形的高度，LVAR1指no的最大值，Item.no指no的当前值。

（5）具体交互思路

中继器加载时，我们设置每个颜色柱状的尺寸，具体设计方法请看上一遍文章。然后我们让矩形2放在矩形1的上面，矩形3放在矩形2上面，以此类推。

（6）做一个标签，如下图所示，默认隐藏。

思路，鼠标移入矩形的时候，显示标签，标签跟随鼠标移动，让Item.no的值=文本标签2，Item.x的值=文本标签1，以此类推。

鼠标移出的时候，隐藏标签即可。

最后，制作完成后，以后使用方便，仅需简单填写中继器的内容，即可拥有完美的效果，所以强烈推荐给各位使用。

本文由 @梓贤Vigo 原创发布于 

轮播图在日常的原型设计中是最常见的了，今天和大家分享如何制作自动轮播+手工点击切换。

思路：

面载入时，图片会自动轮播；点击下方对应的图片，会跳转到图标对应的界面；点击左右按钮，既可朝左朝右有顺序的翻动界面。下面正式开始：

1. 所需组件，自己想做啥就做啥，不过有几个界面就有几个按钮，不要多也不要少。

2. 主界面矩形设置为动态面板，点击动态面板添加4个状态，每种状态可由颜色区分开来，或者做成你所要设置的样子。

3. 设置完成后，要让每个圆形图标对应到我们所设动态面板的每个状态，每个圆形对应一个状态（1-4圆形都这样设置）。

4. 设置主界面（动态面板）载入时进行轮播，这里的转动时间和交互动画随自己的喜好来慢慢调整既可。

5. 设置左右手工翻动轮播图，点击“>”，朝右翻动图片，朝左，同理。

6. 全设置完后，会是这样

7. 点击预览，轮播图效果就完成啦！

作者：妖怪口袋，微信公众号“妖怪口袋”

本文由 @妖怪口袋 原创发布 

本文给大家讲解一下如何在Axure中制作导航栏的收缩与展开，一起来看看~ 

本文将从以下3个方面展开：

需求分析；Axure关键点分析；效果展示。

1. 需求分析

我们在做原型设计的时候，通常会遇到这样的需求：点击导航栏的某个一级菜单，则展开其下面的二级菜单，同时收起其他一级菜单下面的二级菜单。

如果使用Axure软件来做原型设计，遇到此类需求的时候，我们应该怎么进行需求分析呢？怎么将需求与Axure的功能进行匹配呢？

我们仔细研究需求就会发现，需求的核心点在于：展开菜单的同时收起其他菜单，也就是说菜单的展开或者收起是有条件，在某些条件下需要展开或者收起。看到这里，我们是不是会想到Axure中的动态面板呢？动态面板可以实现元件的显示及隐藏，正好和需求的诉求点是吻合的。

看到这里，相信大家已经有思路了，用Axure的动态面板功能就可以实现该需求。下面接着讲Axure的实现方式。

2. Axure关键点分析

通过上面的需求分析，我们已经有了解决思路，即使用Axure动态面板功能来实现。其核心点在于什么时间点展开哪些动态面板，同时隐藏哪些动态面板。

下面为Axure关键点分析：

这里涉及到一级菜单和二级菜单，其中前者可以用矩形，后者需要用动态面板；二级菜单用的动态面板默认隐藏，在点击其对应的一级菜单的时候才设置为显示；点击一级菜单的时候，显示其对应的二级菜单动态面板，同时隐藏其他二级菜单的动态面板，并把下面的元件往上拉动；只需设置第一个一级菜单的交互，可复制至其他的一级菜单然后做一些修改即可。

动作为：设置面板状态

其他细节，如鼠标悬停一级菜单时背景颜色显示为淡蓝色而鼠标点击时显示为绿色，这个可以通过设置矩形的交互样式来实现。

3. 效果展示

效果展示网址为：https://2knrzw.axshare.com/

本文由 @翠baby 原创发布

笔者之前梳理过产品自查表，但是还是有很多小伙伴询问关于PRD的模板和资料。所以本文特地梳理了PRD的内容，希望能给你带来启发与思考。

John之前梳理过产品自查表，但是还是有很多小伙伴经常问John关于PRD的模板和资料。所以我今天梳理下PRD的内容，看完这篇文章，如果还不清晰，直接来找John吧。

不知道大家在读完《写了30+产品需求文档后，我对PRD有了新的认知》后，有没有相关的思考：

总觉得PRD是有规范的 ——其实没有规范，但是需要让团队的小伙伴能看懂。可能你PRD写了几万字，技术只花了10分钟就看完了。剩下的时间都在找你问细节。在产品评审时，你发现写的PRD忽然变得很陌生。……可能很多小伙伴下载一个所谓的PRD模板，把其中的内容进行替换，最后发现只剩下“产品功能”这部分自己还看得懂。其它地方连自己都不能理解。导致产品要么没有可读性，要么需求不明晰，团队沟通需求成本极高。

与其说是产品经理偷懒行为，不如说压根不清楚PRD，不得其法。接下来John根据自己的经验来聊下PRD文档如何更清晰地阐述。

一、PRD的定位

在John梳理的产品经理工作流中，PRD承接的是产品经理把业务需求梳理成产品需求对接给项目组的其他小伙伴。所以重要性不言而喻。首先你明确两个问题：

产品实现的过程中，谁会看PRD？——角色包括：产品伙伴、研发、UI、测试、运营和客服等团队成员PRD是否能清晰的表达这个版本的需求？——这版本需要做什么？用户路径是怎么样的？版本的整个功能架构，对应的原型和逻辑产品经理需要清晰地知道PRD最重要的包含哪些内容，才能在评审会上不至于有分歧。

二、PRD的结构

在现阶段一般是敏捷开发、注重的是项目管理和沟通高效。PRD最重要的是适合你的团队配合。但是最基础的PRD结构可以通过如下的脑图来总结：

其中整体呈现出来如下图所示（全部在Axure呈现出来）：

1. 产品历史版本规划

主要是说清楚每个版本功能迭代的目的是什么。其中包括编辑的时间、上线版本号、具体的内容、功能架构和用户路径（方便点击跳转）、原型版本号和修订人。如下图展示：

2. PRD阶段

经常有小伙伴问John，PRD是每个版本分开写还是聚合写在一起。其实你会发现，分开写之后，查看对应的文章就很麻烦，且不容易管理。所以John最后就采用这种管理方式。

2.1 功能架构图

首先建议输出功能需求池，说清楚有哪些功能需求。如下图：

然后针对需

本文是模仿微信的第四篇内容，主要讲的内容是下拉刷新，enjoy~

最近真的好忙，晚上又在忙着充电学Python，所以更新变慢了，不过木有事，小编虽然会迟到，但是绝不会缺席~O(∩_∩)O哈哈~

效果图：

提醒：因为我们每一次的更新都是在原有的原型基础上开展的，因此原型会越来越复杂。效果描述：本次我们展现下拉刷新效果，下拉列表，出现刷新icon，松开手指，页面弹回，刷新结束后，刷新icon消失。

实现逻辑

元件.top 函数：获取元件对象的上边界坐标值，拖动页面时，页面top值超过一定程度的时候，让页面弹回到初始位置。向下拖动页面的时候，出现下拉刷新icon。

步骤1：元件准备

准备元件，我们准备好朋友圈页面的内容，并将其转换成动态面板，准备一个返回icon，一个相机icon和一个下拉刷新的gif图。（gif图已经上传到附件内，我们就不具体演示了）

我们元件排序:返回icon、相机icon、下拉刷新icon（隐藏）在顶，朋友圈内容的动态面板在底。

步骤2：交互

先简单讲一下设置逻辑，我们再上图：我们在拖动内容动态面板的时候。可能向上拖动，可能向下拖动，虽然向上拖动和向下拖动是设置在同一个交互内的，但是我们为了做到下拉刷新自动弹回，那么就要设置两种条件。我们让动态面板沿着Y轴自由拖动，但是元件顶部超过一定的高度的时候，需要出现下拉刷新的icon，这就是下拉场景，同时在超过一定高度的时候，松开手，这时候页面会自动弹回。

我们一起来看，选择内容动态面板：

拖动时，if this.top≤0，让动态面板随着手指沿着Y轴移动，设置边界为顶部坐标≤250，底部坐标≥644，隐藏 下拉刷新icon。

else if，让动态面板随着手指沿着Y轴移动，设置边界为顶部坐标≤250，底部坐标≥644，显示下拉刷新icon。

如图所示：

拖动结束时，if this.top≥1，移动 动态面板 到 （0，0），等待 500ms，隐藏 下拉刷新icon。

（等待500ms是为了更好的模拟刷新等待的效果）

结语

本次原型内容做在了左侧的微信中。

注意哦，我们的原型只能用Axure RP 9打开哦。

最后：我们要不断努力，不要白白浪费我们吃的苦，共勉。

如何利用Axure中继器实现微信九宫格设计交互？一起来文中看看~

下面这张图就是大家熟悉的、不怎么用的、特值钱的微信支付九宫格截图（尤记得京东入住的故事）：

田同学说：“这原型效果还不简单，矩形+图片，添加链接，然后ctrl+c/+v * 9，over”。

这方法确实能实现这个样式，没问题，也是大家采用最多的、最原始的方式。这里采用中继器控件可以更加快速的、顺滑的完成，也可以锻炼你对中继器的使用和加深对中继器的理解。

他来了、他来了、他一步一步走来了～～～

Step 1

拖拽设置尺寸为 375*667-20 （这里以iPhone 逻辑分辨率进行长宽值，减20px是因为iphone 状态栏高度为20）的矩形控件，然后拖拽进中继器。

Step 2

双击中继器，进入编辑状态。

设置矩形尺寸为 125*125（自己喜欢就好，125px更好看些）；矩形文字位置为底端，内底边距为15px。

Step 3

设置中继器样式，点击中继器编辑页空白处。

进入样式设置，设置布局属性，由垂直-> 改为水平；勾选网格排布，每排项目数设置为3（这里模拟3行3列九宫格，可根据自己需要设置）。

Step 4

点击属性，在第一列添加行，并输入九宫格每一格的标题（默认按从上到下、从左到右排列）。

退出编辑页，可以看到已制作的九宫格。

Step 5

再进入中继器编辑页，为每一格加链接。

选中矩形和图片，右击执行组合操作（方便链接）。

新建九宫格对应的字页面，这里新建了前三个备用；在中继器属性中找到中继器添加列，在第一列后对应处右击选择引用页面，依次将其一一对应。

设置完后会看到链接列显示引用的页面名和类型。

这是真正设置链接，点击组合，按图进行设置，完成后退出编辑页预览原型就可以了。

预览图如下： 

早几期文章，我说没有我做不出的交互，于是有同学加我微信，说老师你能实现这个3D效果吗？我本来想怼她一顿，这是平面软件，但是一气之下我就把她说的3D效果做出来了。

首先看看效果：

动效分析：

咋一看效果挺炫，但其实实现很简单，只是元件移动距离，和图层关系的问题。主要是要画出正斜视图正方体，因为我是用Axure画的，懒得定位，所以有点不正，但不要在意这些细节，重点讲思路，这样以后遇到一些想实现的动效，你也会开始这样思考。

一、绘制

在画布添加一个矩形，选中矩形，然后用鼠标双击边，就可以变形了。

至于怎么才能画得正，我也想知道- -几何数学好的同学可以提供一下方法，反正我是靠手感。画出三个四边形拼起来就是正方体，然后复制顶面，作为阴影。

然后连续复制六个，大家可以看出参差不齐的样子，这叫艺术效果。

有同学会问：老师，效果图明明只有四个，为什么要复制六个？

这个问题问得好，多复制对角的两个主要是为了知道这两个位置的坐标，所以我们这里把它们隐藏，为以下元素命名如下所示：

二、添加交互

这里我们不做动态面板循环动画了，直接用一个按钮点击，添加一个按钮，并为之添加效果。

2.1 添加第一个移动

把1移动到2，把2移动到隐藏5，把3移动到隐藏6，把4移动到3。底部阴影跟上面一样，坐标大家点击元件就能查看了，这里移动线性1000ms。

2.2 添加第二次移动

对于空间想象能力不行的，可以参考第一个移动效果。

通过观察，第二次移动是：移动2到4，移动3到1（阴影同）。所以设置交互，等待1000ms，设置如下：

看看效果，我们发现有问题：

大家看了这个效果，可能会很困惑，不要被迷惑了，其实只是图层问题，设置下就好了。

移动2到4位置的时候，2应该置底。移动3到1位置的时候，3应该置顶。

大功告成！最终效果：

最后去掉不需要的文字，看动图就是无限循环的效果了。其实用Axure还可以实现其他3D效果，我还做了另一个，看起简单，其实比这个教程要难点。

大家可以思考一下上面这个怎么做！提示“变形”“位移”。

本期到此，喜欢的同学可以动动小手指点点赞！感谢观看~

本文由 @索大佩罗娜 原创发布于人人都是产品经理。 

本文给大家介绍一个，如何在Axure中实现页面上下活动和顶部吸附，一起来看看~

最终效果预览：https://xydq37.axshare.com/#c=2

元素准备

首先在画布中拖一个矩形框，宽度为375px，高度为675px，模拟手机屏幕大小；然后在矩形框内添加一个动态面板，宽度：375px，高度597px，命名为“首页外框”.在“首页外框”的state1里再添加一个动态面板，宽度：375px，高度1220px，命名为“首页内容”。

上下滑动效果

点击“首页外框”动态面板添加 拖动时用例 ，拖动时：选择移动“首页内容”为垂直拖动，添加边界：顶部<=0；顶部>=“首页外框”动态面板高度-“首页内容”动态面板高度。

在“首页内容”动态面板的state1中添加推荐卡片、导航栏和信息流展示面板，如下图所示：

为你推荐卡片左右滑动效果

点击外层动态面板（“为你推荐”），添加拖动时用例：在用力编辑器中选择移动内容动态面板 为水平拖动。

在移动的下拉菜单中选择水平拖动，并为其添加边界条件：左侧<=0;左侧>=[LVAR1.Width-LVAR2.Width]，点击右侧fx，进入编辑。首先添加局部变量LVAR1：元件选择为你推荐（外层动态面板），添加局部变量LVAR2：元件选择内容（内层动态面板），如下所示：

导航栏（用于顶部吸附）

导航栏由“全部”文本标签、“附近”文本标签、直线段（下称滑竿）、矩形框组成。

滑竿的动态效果有两种实现方式：

1）使用动态面板，单击菜单项进行动态面板切换

2）不使用动态面板，使用移动事件，即鼠标单击菜单项时，移动滑竿（直线段）到指定位置，具体操作如下：

a) 为“全部”添加鼠标单击时和鼠标选中时用例，如下所示。

鼠标单击时：选中当前元件，并设置选中时的字体颜色和粗体，取消选中“附近”。选中时：移动滑竿to x：[[This.x ]] y:[[Target.y]] （选择绝对位置），这里的This代表“全部”文本标签，Target代表被移动的对象：滑竿；（滑竿x坐标和“全部”x坐标保持一致，滑竿y坐标保持不变）。添加动画：线性，时间100s（自行设定）。

b)为“附近”添加鼠标单击时和鼠标选中时用例，与上面的“全部”设置完全一样。

信息流展示动态面板：命名为“content”

为“content”动态面板添加两个状态：state1和state2，用于内容切换。鼠标单击全部时，设置con