微信作为我们日常使用频率*的App产品，每天的启动次数与使用时长几乎占据了使用移动终端的一半时间。学习产品设计的你，有没有想过有*我们自己也可以设计出可交互的微信原型界面。微信是一个超级庞大的App，由于时间原因本文只讲解到微信的二级页面，更深层次的页面不再展开，线框图的使用也不在此文中详细讲解，重点讲解如何通过Axure实现相关交互效果，讲述实现过程中的思路和方法。　　一、准备工作　　以1280*720为我们的设计尺寸，确定了尺寸后，打开Axure，设置全局辅助线，养成设置辅助线的习惯可以帮我们将原型做的更规范、更

　　如何在一个动态面板里面的三级菜单展开时，能够推动动态面板外部的其他元件呢?　　我的思路是这样。　　在三级菜单展开之前，先把外层动态面板隐藏并拉动元件。　　这样，所有二级菜单会变成收起状态。　　然后，让三级菜单展开。　　这时，外层动态面板自动适应展开后的尺寸(注意外层动态面板要设置自动适应内容尺寸)，高度变长。　　*，再把外层动态面板显示出来，这样就会按照展开之后的高度推动下方元件。　　不管你有没有看懂这个思路，都不妨碍下面的实现。　　你可以看下面的实现步骤时，对照一下上面的思路，将会更容易理解。

　　*章知识点　　1.1歌曲封面旋转效果　　1.2喜欢按钮交互效果　　1.3收藏按钮交互效果　　1.4关注按钮交互效果　　1.1歌曲封面旋转效果　　1.1.1设计思考　　这里没什么难点，Axure本身就有旋转的动作，主要就是要调试出图片旋转一圈的时间，让速度在一个舒适的范围即可。　　1.1.2素材准备　　(1)一张圆形的灰色底板50*50　　(2)一个图片元件21*21(大家在制作Axure原型的过程中也要陆续建立自己的元件库，这样复用起来效率会高很多，以下是我自制的图片元件，是不是比官方的好看N倍~面对各种背景色都能轻松拖拽)　　最终组合成以下形态

　　使用AxureRP8中的一些基本功能，我们实现一个动态切换的登录注册面板。　　效果图：　　有没有感觉很滑、很爽的样子?　　接下来，例行公事。　　先做分析，再实现步骤。　　问：用户做了什么?　　答：用户点击了两个标签。　　问：给用户什么反馈?　　两个顶部的标签被【鼠标单击时】要完成以下动作：　　被点击的标签需要放大尺寸，而另外一个标签需要缩小尺寸。　　与上一个动作同时，登录注册面板要对应的切换内容。　　好了，分析完毕，接下来我们看实现过程。　　一、准备元件　　两个标签用无边框矩形，分别命名为“LoginTag”和

　　在app原型设计时，百分比环形图是我们经常要用到的一种图形，那么用axure如何设计呢，可能你会去网上截个图代替一下，其实没必要，用axure可以很轻松的画出环形图，下面分享给大家。　　软件版本：Axure RP 8　　先看下效果　　完成此图，一共分三层：　　看到这里，我想很多人应该已经明白如何画了;下面看下步骤!　　*步，画个圆形：　　尺寸暂定200px *200px;去掉边线，填充颜色#E4E4E4　　第二步，复制这个圆形，然后将圆形设置为自定义形状：　　调整开口大小，用鼠标　　填充颜色渐变，颜色自己可以选择一下　　第三步，再复制一

　　先看下视觉效果(想怎么好看，完全看你的个人设计水平)　　图层原件　　复选按钮　　单选按钮　　开始制作，两种选框图层元素的是一样的，此处不做重复，拿复选框作案例　　1、 首先从元件库，拖一个复选框进来　　随便起个名字，这里我起的名字叫“原件”，并且将原件设置为隐藏　　2、画个圆角矩形，颜色随意，你自己喜欢　　起名为“背景”(叫什么不重要，重要的是方便)　　3、画个选中状态　　从元件库Icons里拖一个对号进来，起名为“选中”，调整合适大小，放到矩形的中间　　4、将矩形和对号编组，并起个名字　　5、给原件添加交

　　我在之前的博客中介绍过“保留边角”功能，其典型应是：调整按钮图片的大小，同时保留其边角样式。在编辑各种其他UI元素的截图时，我们还可以用这个功能来做一些很酷的事情。这里有一个很棒的应用介绍给大家：当你想插入一个额外的元素到一个窗体或对话框来快速地模拟出别人提出的修改意见时，使用这个功能可以快速搞定。　　我选择截图中间一条很窄的水平切片为“中心”部分，指定其余的几乎整个图像作为“边缘”。这意味着当我把图片拉长时，图片的大部分区域都会保持不变，但我选择的中心部分会被妥妥地拉伸。选中的部分承载了所有

　　首先，移动端内容的上下滑动，只需要将相应内容放入动态面板，并在该动态面板属性中添加垂直滚动条即可。这样，当我们在手机上打开原型时，即可通过手指的拖动而上下滑动。动态面板的滚动条必须设置，但在手机浏览器中并不会出现滚动条。　　注意，全屏内容上下滑动，需要将动态面板设置为标准尺寸，并在HTML设置中进行【移动设备】设置，勾选【包含视口标签】选项。　　然后，我们分析一下这个效果的交互过程。　　1、交互什么时候触发?　　答：动态面板内容滚动的时候。　　2、分别有几种情形?　　答：两种情形，一种是内容滚动超过

　　文本输入框：边框变色　　案例来源:　　百度-登录界面　　案例效果：　　光标进入文本框时　　案例描述：　　在登录界面中，包含用户名与密码的输入框。当焦点进入输入框时，输入框边框与内部图标变为蓝色;失去焦点时，恢复灰色。　　元件准备：　　页面中　　包含命名：　　矩形(用于账号输入边框)：Border01　　矩形(用于密码输入边框)：Border02　　思路分析：　　输入框的样式在两种不同状态下切换，可以通过交互样式来实现;(操作步骤1)　　文本框获取焦点时，呈现选中的样式(操作步骤2~3);　　文本框失去焦点时，呈现未选中的样式

　　我们经常需要在原型中使用各种各样的图标，所以往往需要大量的图标素材。并且，为了保证图标缩放不失真，这些素材*是矢量图。刚好*的Axure RP
8.0版本支持导入SVG矢量图，可以直接把SVG导入到原型中。　　那么，这里就给大家推荐一个SVG图标资源库。　　地址：http://www.iconfont.cn/collections/index这是阿里巴巴的矢量图标库，可以使用新浪微博账号和Github账号登录，登录之后才能够下载图标文件。该图库支持导出SVG，AI，PNG三种格式的文件。　　大家在查找图标的时候，可以使用阿里巴巴图标资源库的搜索功能，来搜索心仪的图标

　　构成元件就三个。　　1、一个背景(矩形，宽600，高30，圆角半径15)命名为beijing.　　2、一个进度条(复制背景，设置背景颜色为蓝色，宽度设置为30)命名为jindu。　　3、一个圆形。将圆形转换成动态面板。命名为yuanquan.　　黄老师的命名规则就是这么简单粗暴。　　为了方便理解，进度条是靠着Y轴的，这样可以少考虑一个参数。　　拖动圆形(动态面板)的时候，添加三个交互：　　1、移动当前元件，水平拖动。设置拖动边界，左侧大于等于0，右侧小于等于背景的长度。　　这一步是让这个圆圈在背景条上可以拖动起来。　　2、设置进度条的

　　写在前面的话：　　其实这个就是类似于程序猿的SVN和Git，便于其他成员去访问。　　记得当时使用这个制作的是一个垂直类的购物APP，页面非常多，而且每当遇到活动的时候很多页面都需要更改很多东西，一个人完成比较费时，当时是两个人一起做的。　　后来，由于Axure制作APP感觉不是特别方便，后来改用墨刀了 – – 这里不是打广告，确实是非常好用，但是有些效果是没法实现的。　　好了，废话不多说进入正题- -!　　1. 打开网络和共享中心　　2.更改*共享设置　　3.启用网络发现　　4.启用共享以便可以访问网络的用户可以读取和写入公

　　今天教大家一个非常实用的技能——模糊搜索。在这里，我们以英雄联盟这个游戏的数据为例，在这个游戏里英雄都有自己的名字，同时也有玩家在交流过程中形成的昵称。例如，战争女神在玩家口中的昵称就是轮子妈。如何在搜索时同时对英雄的名字和昵称一起模糊搜索呢?　　我们先创建一个中继器，把英雄的名字和昵称录入进去吧!再在上面加一个表头，便于我们知晓对应列数据的内容是什么。当然，我们还需要一个文本框，在文本框输入好内容回车后，将对应的淑女从中继器中筛选出来。　　中继器数据创建好之后，别忘记在【每项加载时】中把对应

　　Axure
作为产品经理交互设计师主要的吃饭工具，平日打交道多了，使用过程中必然会遇到工具偶尔“罢工装死”的情况，一旦不幸遇到了这些情况如何解决呢?下面是结合我们团队和自己使用过程中总结归纳的一些避免
Axure 软件运行缓慢和假死的一些经验教训，希望对遇到类似问题的同学有对帮助和启事。　　1. Axure 单个页面内不要有太多的 Group，尤其是嵌套的 Group，有次设计师在 Axure 7
中的一个页面打开和操作都巨慢无比，打开文件要花5分钟，操作就假死三分钟，经过排查发现就是因为一个模块中适用的 Group 太多了，而且是嵌套

　　文本框：带图标文字提示　　案例来源：淘宝首页-搜索框　　输入文字前：　　输入文字后：　　元件准备：　　页面中　　案例描述：　　在搜索框里面，文本框中的文字提示包含图标。　　思路分析：　　文本框可以添加文字提示，而图标字体中的图标也是文字。那么案例中的搜索图标，我们就可以使用图标字体来实现。　　操作步骤：　　1、双击安装FontAwesome字体文件，载入FontAwesome4.4.0图标字体元件库;　　2、切换到FontAwesome4.4.0图标字体元件库;　　3、从元件库中找到图标，拖放到画布;　　4、双击图标，复制里面的图标文字;　　

　　其实，我觉得这真是个卵用没有的东西，但是既然有人问了，那我就做一个，正好说下Axure8的优点。　　这个需要用Axure8做，为什么呢?因为Axure8可以多个动作同时进行。　　在Axure7里，如果想在向上移动的同时隐藏，是做不到的，只能是先移动到位了再隐藏。　　而Axure8就可以!请大家认真观察支付宝咻一咻，它的动画是一个圆圈一边放大一边变透明。　　那么，如何实现呢?　　需要弄个动态面板，2个状态，状态1是点击前的按钮样式，状态2是点击后的按钮样式。　　然后再弄2个圆圈，放在按钮下面。　　因为圆圈的动画是循环的，所以我们需

　　这个交互效果是使用Axure8制作的，模仿的一个国外网站登录页面，个人感觉非常有创意并且很可爱。　　由于个人比较喜欢阿狸，而又发现了刚好适用的素材，所以我就用阿狸作为本次实例的素材啦。　　素材图　　静态界面就不教大家如何制作啦，这只是非常简单的临摹工作而已，在此就不细说了的，给大家看一下静态元素的内容。　　在交互中，我们使用到的有：　　【left/right hand】　　左右手，因为在交互动画中有叠加层级的变化，所以需要独立出阿狸整体。　　【ALI组合】　　包含阿狸眼睛上的2条线的图片是纯为了美观而加，因为阿狸的眼

　　Axure是产品经理们最常使用的原型绘制工具之一，熟练掌握Axure会让产品经理在产品设计时事半功倍。笔者刚开始学习Axure时，常通过高保真还原一些现有的网页来提高自己的技能。下面将通过一个高保证还原一个真实实例来介绍Auxre的使用方法
，涉及页面布局、页面交互等常用技巧。如果你刚刚接触Axure，熟练掌握本文的案例和方法，你的Axure使用技能突飞猛进。　　案例任务：　　使用Axure 7.0高保真还原www.ohsame.com 首页(以下简称same官网) 的布局和交互。　　在开始做之前，我们首先观察一下same官网，将需要做的任务分解成为一个

　　页面向下滚动时导航顶部吸附效果，这是无论在Web端还是移动端都有一种效果。　　页面顶部是宣传图片，图片下方是导航菜单，当浏览器窗口滚动条向下拉动或鼠标滚轮向下滚动时(移动端为手指向上滑动屏幕)，一旦浏览器窗口顶部边缘超过导航菜单的位置，导航菜单开始固定在浏览器顶部边缘的位置，不再随页面向上移动。　　效果动画：　　说到这个效果，我想起有人问过：Axure有必要学函数吗?搞那么复杂有必要吗?　　那么，大家在看后面的内容之前，先思考一下。这个效果怎么实现?　　————————————我是风骚的分割线——————

　　如何用Axure绘制各种icon?　　Axure绘制技巧，主要在于方便每一次的快速修改原型。所以，对于Axure绘制的icon的要求，不需要高保真的icon，只需要简易的icon。也就是怎么样方便每一次的快速修改，就怎么样绘制icon。工作中的原型图，大部分情况是需要改动很多次的。所以，我在这里介绍一下如何用Axure快速绘制各种icon。1.组装式。2.
一步式. 3. 变形式。　　1，组装式。比如：如何用Axure绘制【搜索】按钮。　　2，一步式。比如：如何用Axure绘制【返回】按钮。　　3，变形式。比如：如何用Axure绘制【下拉】按钮。　　上面是用Axu