在做课件的时候，将所有的函数用途和参数注解，整理了一份表格资料。后来，觉得这个东西挺有用，所以，分享给大家当做参考资料。函数能够提高原型的制作效率，但也容易导致画蛇添足。如果是单纯的学习，建议通过一些有趣味的原型，多加锻炼使用。这样在实际应用中，才能够手到拈来，随心所欲。如果是用于工作，在不熟悉函数使用的情况下，尽量避免纠结于某个函数的使用，以免影响工作效率，得不偿失。扎实学习，灵活使用。这句话不仅适用于函数，也适用于Axure以及其他的任何工具。下载地址：http://pan.baidu.com/s/1nveutHR---------------------------------------------------- End ----------------------------------------------------转载请注明：Axure原创教程网»Axure RP 8 函数速查表小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>> ...继续阅读 (92)

案例79. 省市列表的选择联动案例来源:360官网-个人中心-详细资料案例效果：初始状态/选择“请选择”时：（图5-181）选择省市列表项时：（图5-182） 案例描述：省市区县列表的初始选项为“请选择”，改变省市列表的选项时，区县的列表内容跟随改变。元件准备：页面中：（图5-183）动态面板“DistrictPanel”的状态：（图5-184）动态面板“DistrictPanel”各个状态的内容：（图5-185）包含命名：动态面板（用于放置各市区县列表）：DistrictPanel动态面板状态（用于放置“请选择”列表）：请选择动态面板状态（用于放置“北京市”列表）：北京市动态面板状态（用于放置“天津市”列表）：天津市动态面板状态（用于放置“上海市”列表）：上海市动态面板状态（用于放置“广东省”列表）：广东省 思路分析：省市列表的选项改变时，让动态面板显示状态名称与选项名称相同的状态；（操作步骤1）在更换选项时，还要将市区县列表中的选项恢复为第一个。（操作步骤2） 操作步骤：1、为省市下拉列表的【选项改变时】事件添加“用例1”，设置动作为【设置面板状态】；{选择状态}为【Value】，{状态名称或序号}中填写“[[p]]”；公式中“P”为局部变量，其内容为“当前元件”（This）的【被选项】；局部变量设置：（图5-186）2、继续上一步，添加动作【设置 ...继续阅读 (26)

案例73. 全选与取消全选效果案例来源:百度音乐-音乐盒 案例效果：初始状态/取消全选时：（图5-117）全选后取消任一选项时：（图5-118）全选/单选全部选中时：（图5-119）案例描述：列表中相邻的行具有交替的背景颜色；点击列表中复选框时，可以切换复选框的勾选状态，复选框被勾选时整行变为灰色，取消勾选时恢复默认颜色；列表中的复选框被全部勾选时，列表左下方的全选复选框变为被勾选状态；列表中的复选框有任何一个取消勾选时，全选复选框都会变为未勾选状态；全选复选框被主动勾选时，列表中所有的复选框均被勾选，全选复选框被主动取消勾选时，列表中所有的复选框均被取消勾选。另外，本案例中当列表中某一行被双击时，该行为播放状态，歌曲名之前显示播放图标，并且显示听相似歌曲与看现场翻唱的按钮。 元件准备：页面中：（图5-120）中继器“PlayList”中：（图5-121）中继器“PlayList”数据集中：（图5-122）中继器“PlayList”样式设置中：（图5-123）包含命名：复选框（用于全选的复选框）：SelectAll文本标签（用于记录列表中复选框被勾选的数量）：SelectNumber中继器（用于歌曲列表）：PlayList组合（用于歌曲信息部分的同一操作）：InfoGroup组合（用于其它按钮部分的同一操作）：ButtonGroup图片（用于播放状态显示的频谱图 ...继续阅读 (56)

案例51. 字符串函数：手机号码验证(2)案例来源:见案例50。 案例效果：见案例50。 案例描述：见案例50。 元件准备：见案例50。包含命名：文本框（用于输入手机号码）：NumberInput文本标签（用于显示验证结果的提示）：MessageLable 思路分析：案例50中我们对手机号码前两位的判断是通过函数提取出首位和第2位字符分别进行判断；在本案例中，我们采用截取前两位字符串的方法，对前两位字符进行判断，前两位字符符合条件的组合有：13、14、15、17、18、19。 操作步骤：删除案例50中操作步骤4与操作步骤5设立的两个条件内容，重新添加一个新的条件判断【值】“[[This.text.substr(0,2)]]”【是】【之一】，点击【自定义选项】按钮，在输入区域不同的行中输入“13”、“14”、“15”、“17”、“18”和“19”；这一步为判断前两位字符是“13”、“14”、“15”、“17”、“18”和“19”六个数字之一；修改完后，即完成了本案例。条件判断设置：（图4-143）函数说明：This：表示当前元件对象，指事件交互所在的元件；text：获取元件对象上当前的文字，使用方法“[[元件对象.text]]”；substr(参数1,参数2)：获取从起始位置开始指定长度（个数）的字符；参数1为起始位置，参数2为获取的 ...继续阅读 (73)

案例50. 字符串函数：手机号码验证(1)案例来源:360-个人中心-详细资料 案例效果：（图4-131）案例描述：原网站中通过点击保存修改按钮触发验证，另外验证结果的提示也有弹出和页面上显示两种；在我们的案例中，我们略作改动，将对手机号码的验证放在光标离开输入框时，验证提示也仅限页面上一种。具体内容如下：当输入的手机号码格式错误时，显示错误提示；否则，显示正确提示；正确格式要求：输入的文字全部为数字；字符长度为11位；第1位字符必须为1；第2位字符不能为0,1,2或6。 元件准备：（图4-132）包含命名：文本框（用于输入手机号码）：NumberInput文本标签（用于显示验证结果的提示）：MessageLable 思路分析：限制文本框内可输入文字位数最多11位；（操作步骤1）根据案例描述进行条件判断；（操作步骤2~5）设置满足全部条件时，给出验证正确的提示；（操作步骤6）设置不满足必须的条件时，给出验证错误的提示；（操作步骤7）设置光标进入文本框时，清空验证提示。（操作步骤8）  操作步骤：1、在元件“NumberInput”的属性中，设置{最大长度}为“11”；元件属性设置：（图4-133）2、为元件“NumberInput”的【失去焦点时】事件添加“用例1”，设置第1个条件判断为【元件文字】“当前元件”（This）【是】【数 ...继续阅读 (23)

原标题：如何写1份出色的交互设计文档，给程序员以美的享受？什么是交互设计文档?我们先来统一一下概念以及名词，以免后续因为说法不够一统造成误解。交互设计文档一般是指：交互设计说明文档（交互设计师产出的规范文档），又称DRD（Design Requirements Document），工作中一般称之为”交互设计文档”。看个小例子：• V1.0 没有交互说明文档的版本（可能由产品经理PRD代替）产品需求的描述是这样的需求说明：在封面图片上点击图片之后翻转一圈。（文字描述交互与需求）开发人员根据这句话脑补怎么翻转？360°？从左边还是从右边？转速怎么样？这些都需要找PM问清楚，如果遇见专业的PM还可以能讲清楚，但如果遇到经验不足的PM，就会说让开发人员你看着做一个就行……。• V2.0 没有交互说明，但是有UI设计的版本UI设计出图是这样的。对于需求和期望达到的效果，静态可视化的说明要比纯文字更容易理解，需要给开发人员一个具象化的目标，否则程序员做出来的东西很容易与期望目标偏离，即想要的A而开发给的却是B。• V3.0 交互原型加演示DEMO动态demo。输出HTML文件预览。小结：编写交互文档是为了将更丰富的人机交互动作、事件准确地传达给开发人员，确保实现边界。若只是语言或静态图片交付给开发、测试人员，那么他们很难构建一个产品形态，不好把控开发方向，另 ...继续阅读 (15)

案例33. 翻转：图片翻转效果案例来源:百度文库VIP-首页 案例效果：翻转前：（图3-45）翻转中：（图3-46）案例描述：鼠标移入图片时，图片水平向右翻转为另一张图片；鼠标移出图片时，图片向右水平翻转回初始状态。 元件准备：页面中：（图3-47）动态面板的状态“State1”中：以左侧第1个为例。 （图3-48）动态面板的状态“State2”中：以左侧第1个为例。（图3-49）思路分析：在动态面板的两个状态中，分别放入翻转前与翻转后的图片；（操作步骤1~3）鼠标移入时，翻转到动态面板下一个状态；（操作步骤4）鼠标移出时，翻转回动态面板上一个状态；（操作步骤5）每个动态面板交互完全相同。（操作步骤6） 操作步骤：1、拖入一个图片元件，导入第一张图片；在图片上点击<鼠标右键>,将其【转换为动态面板】；2、双击动态面板，点中“State1”后，点击复制按钮；这样就出现了一个包含了同样尺寸图片的“State2”；3、双击状态名称“State2”，进入状态编辑界面导入翻转后的图片；4、点中动态面板，为其【鼠标移入时】事件添加“用例1”，并添加动作【设置面板状态】“当前元件”为“Next”，{进入动画}与{退出动画}均为“向右翻转”；用例动作设置：（图3-50）5、继续为动态面板的【鼠标移出时】事件添加“用例1”，添加动作【设置面板状态】“当前元件 ...继续阅读 (31)

案例28. 组合：弹出菜单效果案例来源:网易云课堂-用户功能列表 案例效果：鼠标移入头像前：（图3-1）鼠标移入头像后：（图3-2）案例描述：鼠标移入用户头像时逐渐显示用户面板，鼠标移出时隐藏用户面板。 元件准备：页面中：（图3-3）包含命名：组合（用于统一显示面板内所有内容）：UserGroup思路分析：如果想让一组元件统一显示与隐藏，可以将这组元件进行组合或转换为动态面板，然后对组合或者面板进行可见性的动作设置。在这个案例中，这里我们通过组合来实现。 操作步骤：1、选取所有需要统一显示或隐藏的元件，按快捷键<Ctrl+G>键将它们设置为同一组合，默认隐藏组合并命名组合；2、为“头像”元件的【鼠标移入时】事件添加“用例1”，设置动作为【显示】组合“UserGroup”；设置{动画}为【逐渐】显示，{时间}为“500”毫秒；设置{更多选项}为【弹出效果】。用例动作设置：（图3-4）---------------------------------------------------- End ----------------------------------------------------转载请注明：Axure原创教程网»AxureRP8实战手册-案例28（组合：弹出菜单效果）小楼老师倾力打造AxureRP7.0精品课程系 ...继续阅读 (30)

案例23. 全局变量：账号登录验证（1）案例来源:站酷-注册界面 案例效果：初始状态时：（图2-1）焦点进入时：（图2-2）输入为空时：（图2-3）已被注册时：（图2-4）验证通过时：（图2-5） 案例描述：注册面板中的用户名输入框，在光标进入输入框以及离开输入框时，输入框的边框都会有相应的变色，并有相应的提示图标和文字提示。元件准备：页面中：（图2-6）包含命名：文本标签（用于显示提示图标）：MessageIcon文本标签（用于显示提示文字）：MessageText全局变量（用于存储预置账号）：UserName 思路分析：根据案例效果，输入框需设置三种状态下显示的颜色；（操作步骤1）根据案例效果，需要有预置的用户名，与输入的用户名进行比较；（操作步骤2）光标进入文本框时，边框呈现黄色；（操作步骤3）光标离开文本框时，如果是用户名未输入，边框要呈现红色，并有淡红色的填充；同时，显示错误的红色提示图标“”和文字“请输入用户名”；（操作步骤4~6）光标离开文本框时，如果是用户名已注册，边框要呈现红色，并有淡红色的填充；同时，显示错误的红色提示图标“”和文字“账号已经存在”；（操作步骤7~9）如果不是以上两种情况，则显示灰色的边框，显示正确的绿色图标“”和灰色文字“通过验证”。（操作步骤10~12） 操作步骤：1、元件边框默认设置为黄色；然后，在元 ...继续阅读 (24)

案例25. 局部变量：账号登录验证（2）案例来源:站酷-注册界面 案例效果：见案例23。 案例描述：在案例23的基础上，解决输入部分账号名称（例如“xiao”），也提示“账号已经存在”的错误。 元件准备：见案例23。 包含命名：见案例23。 思路分析：在案例23的全局变量“UserName”中账号的格式是以“<账号名称>”的格式存储；如果判断条件为全局变量“UserName”包含“<输入的账号>”，则能够进行完全的匹配，不会再出现输入部分账号名称也提示错误的问题。所以，需要将输入的账号加上“<”与“>”后再进行判断。需要修改的条件判断：（图2-31）操作步骤：1、将判断条件更改为判断【变量值】“UserName”【包含】【值】，点击【fx】进入“编辑文本”的界面；条件判断设置：（图2-32）2、在编辑文本的界面中【添加局部变量】“n”获取【元件文字】“当前元件”（This），然后在值的输入框中输入“<[[n]]>”完成条件的编辑；当用户输入“xiao”时，被判断的内容为“<xiao>”，不会再产生错误。局部变量设置：（图2-33） ---------------------------------------------------- End ---------- ...继续阅读 (34)

案例22. 中继器：选择对比商品（3）案例来源:京东-商品列表页 案例效果：取消/删除时：（图1-191）清空对比时：（图1-192） 案例描述：取消选中或点击对比栏中的“删除”按钮都可以删除对比栏中的商品信息；点击“清空对比栏”按钮，可以删除对比栏中所有的商品信息。 元件准备：见案例20与案例21。 包含命名：见案例20。 思路分析：在案例21中，我们设置了中继器“GoodsList”【每项加载时】事件的“用例3”，如果状态值是“True”就选中图片“CheckImage”；在当前的案例中，我们需要做删除对比信息的效果；而删除对比信息时，要对应取消选中图片“CheckImage”；（操作步骤1）点击“清空对比栏”需要删除全部商品信息；同时，需要取消商品列表中“对比”按钮复选框的选中状态；（操作步骤2~3）点击“删除”按钮，可以删除当前的商品信息；同时，需要取消商品列表中对应的“对比”按钮复选框的选中状态；（操作步骤3~4）点击“对比”按钮时，如果复选框是选中的状态，则取消复选框的选中状态；同时，删除对比栏中对应当前的商品信息。（操作步骤5~6） 操作步骤：在案例21的基础上继续进行操作：1、为中继器“GoodsList”【每项加载时】事件添加“用例4”，软件会自动设置条件为“Else If”，与“用例3”形成关联；在“用 ...继续阅读 (23)

案例21. 中继器：选择对比商品（2）案例来源:京东-商品列表页 案例效果：见案例20。 案例描述：在上个案例的基础上（见案例20），添加对重复添加对比商品的限制。 元件准备：在案例20的基础上新增内容：（图1-182）包含命名：见案例20 思路分析：中继器在每项数据加载时，可以通过对列值进行判断对元件进行控制；所以，如果想限制“对比”按钮被点击时，不会重复添加数据，我们可以单独在中继器数据集中添加一列，用于记录选中的状态（见元件准备）；然后，通过对这个状态值的判断，进行不同的交互：如果状态值为“True”，说明商品已添加，该项数据加载时，要对复选框图片进行选中的操作；（操作步骤1）如果状态值为“False”，说明商品未添加，可以进行添加对比商品信息的操作；（操作步骤3）每个商品的选中状态值，初始时为“False”，成功添加对比商品信息时，要将状态值更新为“True”。（操作步骤4） 操作步骤：1、在中继器“GoodsList”的【每项加载时】事件中，添加“用例3”；为用例添加条件判断【值】“[[Item.IsSelected]]”【==】【值】“True”；设置符合条件时的动作为【选中】图片“CheckImage”；最后，在该用例上点击<鼠标右键>，选择【切换为<If>或<Else If>】,将 ...继续阅读 (16)

标题够长吗？和我一样长！污呼呼呼呼呼呼呼！不过，骚年，先别急着下载！先到这里体验一下效果！http://www.iaxure.com/share/yzm8/是不是非常逼了个真？这个验证码有以下细节，你发现了吗？1、包含大小写字母以及数字；2、无重复噪点背景；3、验证码文字带有随机倾斜；4、可以进行验证；5、支持输入后回车验证；6、验证时，如果验证失败光标回到文本框，并选中错误的验证码。另外，这个其实不仅仅是作为参考的案例，也能复制到原型中当做自定义元件使用，只需要稍稍修改一下文字提示等等。不知道大家喜欢吗？如果喜欢的不要不要的，那就下载吧！链接：http://pan.baidu.com/s/1eR5v9Fs密码：zml1---------------------------------------------------- End ----------------------------------------------------转载请注明：Axure原创教程网»小楼制作的随机字母加数字带噪点无重复字母不固定角度可验证的验证码小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！ ...继续阅读 (28)

案例20. 中继器：选择对比商品（1）案例来源:京东-商品列表页 案例效果：添加商品前：（图1-163）添加商品后：（图1-164）案例描述：点击某个商品的“对比”按钮时，页面下方向上滑出对比栏，选中的商品将在对比栏中出现。点击对比栏“隐藏”按钮时，关闭对比栏。 元件准备：页面中：（图1-165）动态面板“ContrastPanel”中：（图1-166）中继器“ContrastList”中：（图1-167）中继器“ContrastList”中的数据集：（图1-168）动态面板“ItemPanel”中：（图1-169）中继器“GoodsList”中：（图1-170）中继器“GoodsList”的数据集：（图1-171）包含命名：中继器（用于商品列表）：GoodsList中继器（用于对比列表）：ContrastList图片（用于商品列表的商品图片）：GoodsImage图片（用于商品列表的促销图标）：PromotionImage文本标签（用于商品列表的商品价格）：GoodsPrice文本标签（用于商品列表的商品名称）：GoodsName文本标签（用于商品列表的商品简介）：GoodsSynopsis文本标签（用于商品列表的评论数量）：CommentNumber图片（“对比”按钮的复选框图标）：CheckImage动态面板（用于对比栏的位置固定以及显示/隐藏）：Cont ...继续阅读 (55)

案例19. 中继器：商品类型筛选案例来源:美丽说-宝贝搜索 案例效果：筛选前：（图1-156）筛选后：（图1-157）案例描述：选中一个筛选条件后，将满足该条件的商品筛选出来。并且，多个筛选类型可以叠加。 元件准备：页面中：（图1-158）包含命名：见案例16与案例17。 思路分析：如果需要实现按类型的筛选，就需要在中继器的数据集中存储不同类型的数据；根据案例效果，每一种类型都应该在数据集中有对应的一列类型数据，记录每个商品是否此种类型；在这里我们仅以前两种类型（“11新款狂欢节”与“秋冬新款”）为例，省略其它类似操作。（操作步骤1）在每一种类型的复选框被选中时，都要添加该种类型的筛选；（操作步骤2）同理，在每一种类型的复选框取消选中时，也要相应的取消筛选；（操作步骤3）做好一个复选框的交互后，其它复选框也要相应的进行设置。（操作步骤4）  操作步骤：1、先在数据集中添加2列数据，列名分别是“Promotion”与“NewStyle”，表示促销与新款的数据列；具有属性的商品列值为“True”，不具有属性的商品列值为“False”；（图1-159）2、根据案例17，我们知道底层的复选框会被进行选中状态的切换；那么，我们在“11新款狂欢节”底层复选框的【选中时】事件中添加“用例1”，设置动作【添加筛选】到中继器“GoodsList”；配 ...继续阅读 (51)

案例18. 形状：自定义复选框（3）案例来源:美丽说-宝贝搜索 案例效果：鼠标移入方框或文本时：（图1-147）鼠标点击方框或文本时：（图1-148）鼠标再次点击方框或文本时：（图1-149）案例描述：鼠标进入复选框或者选项文本时，复选框呈现另一种颜色，离开时恢复原色；鼠标点击复选框或者选项文本时，复选框在切换选中样式。 元件准备：复选框的制作：（图1-150）包含命名：矩形（用于复选框）：BelowShape矩形（用于鼠标移入效果）：AboveShape 思路分析：使用图标字体“ ”做成未选中状态的复选框“BelowShape”；然后，设置元件选中时的交互样式；这样在元件“BelowShape”选中状态切换时即可显示不同的样式；（操作步骤1）在鼠标移入选项文本和元件“BelowShape”时，都要显示元件“AboveShape”；（操作步骤2~3）实际上，可以点击的元件只有“AboveShape”和选项文本，所以，在这两个元件被鼠标点击时，切换元件“BelowShape”的选中状态。（操作步骤4~5）将做好的元件内容复制多个，变成不同的选项；（操作步骤6）效果图片中的“11新款狂欢节”不是文本，而是图片；将上面做好的元件复制一份，然后将文本换成图片。（操作步骤7）操作步骤：1、在元件属性中添加【选中】的交互样式，可参考元件准备（图1-150）中元件“ ...继续阅读 (69)

案例17. 中继器：商品列表排序案例来源:美丽说-宝贝搜索 案例效果：默认：（图1-135）价格从低到高：（图1-136）价格从高到低：（图1-137） 案例描述：鼠标移入“价格排序”按钮，显示选项列表。选项在鼠标进入时显示粉色文字，点击选项，商品列表进行相应的排序。 元件准备：页面中：（图1-138）动态面板“SortPanel”中： （图1-139）中继器“GoodsList”中：（图1-140）中继器“GoodsList”的数据集中：（图1-141）包含命名：中继器（用于商品列表）：GoodsList动态面板（用于排序选项）：SortPanel图片（显示商品图片）：GoodsImage图片（显示商品类型）：GoodsTypeImage文本标签（显示商品名称）：GoodsName文本标签（显示商品销量）：GoodsSales文本标签（显示商品价格）：GoodsPrice 思路分析：完成中继器数据集与元件的关联；（操作步骤1）并设定好模块的排布与间隔；（操作步骤2）鼠标移入“价格排序”按钮，需要显示排序的选项，并能够在鼠标移出选项时自动隐藏选项；（操作步骤3）为每个排序选项添加鼠标移入时的样式；（操作步骤4）点击每个排序选项时，需要中继器进行相应的排序，并隐藏排序的选项列表。（操作步骤5~6） 操作步骤：1、为中继器的【每项加载时 ...继续阅读 (28)

案例16. 中继器：制作商品列表案例来源:百度外卖-菜单 案例效果：商品列表：（图1-125）案例描述：包含商品图片、名称、推荐人数、销售数量、价格以及添加按钮的商品模块列表。 元件准备：页面中：（图1-126）中继器“GoodsList”中：包含命名：中继器（用于商品列表）：GoodsList文本标签（显示商品名称）：GoodsName文本标签（显示推荐人数）：GoodsRecommend文本标签（显示商品销量）：GoodsSales文本标签（显示商品价格）：GoodsPrice图片（显示商品图片）：GoodsImage 思路分析：中继器可用来实现重复的项目列表。可以将自身数据集中的数据通过项目交互与编辑好的元件模板进行绑定；并且，可以调整列表的布局、间距等；中继器的操作分为以下几步：在中继器的编辑区中，拖入元件创建单个项目的模板；（操作步骤1）添加列表的数据、图片到数据集中；（操作步骤2~3）添加交互将数据集中的数据关联到相应的元件；（操作步骤4~8）设置中继器的排列布局与间隔。（操作步骤9） 操作步骤：1、参考元件准备中的图1-127拖入元件创建模板，并进行命名；2、打开本案例素材中的Excel数据表格，复制里面的数据；接下来，回到Axure中，双击中继器“GoodsList”，在检视面板中打开数据集，点中数据集的首行首列，按下快捷键& ...继续阅读 (41)

案例15. 动态面板：元件样式联动案例来源:京东-商品列表页 案例效果：初始及鼠标离开时：（图1-115）鼠标移入时：（图1-116）案例描述：鼠标进入“对比”/“关注”/“加入购物车”的按钮区域时，图标、文字与背景都呈现另一种样式。其中“关注”按钮中的图标在鼠标进入时，红色心形图标为向上滑动显示，鼠标离开时，向下滑动消失。 元件准备：页面中：（图1-117）包含命名：图片（用于心形图标）：HeartImage 思路分析：鼠标进入每个按钮区域，改变边框和文字颜色；“对比”按钮的图标也有改变颜色的效果；（操作步骤1）按钮上的文字靠右并距离边框有一定距离；（操作步骤2）鼠标移入图标或者矩形时都能呈现鼠标悬停的效果；（操作步骤3）鼠标进入“关注”按钮时，红心图标向上滑入效果；（操作步骤5）鼠标离开“关注”按钮时，红心图标向下滑出效果；（操作步骤6） 操作步骤：1、每个按钮矩形的元件属性中设置【鼠标悬停】的交互样式；“对比”按钮中的图标单独设置【鼠标悬停】的交互样式；（图1-118）2、设置每个按钮矩形的元件样式为文字【右侧对齐】，填充{R}为“4”；（图1-119）3、矩形与图标同时显示鼠标悬停的效果，可以在动态面板的元件属性中勾选【允许触发鼠标交互】；（图1-120）4、以上设置完毕后，鼠标移入按钮变换样式时，会发生边框互相遮挡的情况；解决办法是 ...继续阅读 (35)

案例14. 动态面板：拖动滑块解锁（1）案例来源:淘宝-注册界面 案例效果：拖动前：（图1-97） 拖动中：（图1-98） 拖动到终点后：（图1-99）  案例描述：拖动滑块进行解锁验证。包含以下情形：拖动滑块时，滑块仅允许水平拖动，且不可超出灰色边框两端；拖动滑块时，有绿色的背景随滑块移动；拖动滑块时，如果滑块到达最右端，显示白色文字“加载中”，等待半秒钟后显示白色文字“验证通过”，并且滑块上的图标变为绿色对勾；同时，启用“获取短信验证码”的按钮；拖动结束时，如果滑块未到达最右端，滑块回到拖动前的位置。元件准备：页面中：（图1-100） 动态面板“SliderPanel”中：（图1-101） 动态面板“BackgroundPanel”中：（图102）包含命名：动态面板（用于拖动）：SliderPanel动态面板（用于显示绿色背景条）：BackgroundPanel矩形（用于滑块形状）：SliderShape矩形（用于绿色背景）：GreenShape矩形（显示验证提示）：CheckTip矩形（用于下一步按钮）：NextButton热区（用于验证触点）：Contact 思路分析：1、本案例比较复杂的就是在同一区域的元件叠放，由最底层开始分别是：灰色矩形，作为模块的背景；动态面板“BackgroundPan ...继续阅读 (152)

案例13.   动态面板：保持固定位置案例来源:知乎-话题精华 案例效果：拉动窗口滚动条时：（图1-93）案例描述：拉动滚动条，页面内容滚动时，导航栏始终保持固定在顶部位置。 元件准备：页面中：（图1-94）思路分析：如果想将某些内容不随着页面滚动而改变位置，可以将这些内容添加到动态面板的状态中，并在动态面板的属性中进行固定到浏览器的设置。 操作步骤：1、将导航栏的图片放入画布，然后在导航栏图片上点击<鼠标右键>，选择转换为动态面板；这样操作等同于拖入动态面板，将图片放入动态面板默认的状态“State1”中；（图1-95）2、在动态面板属性中（或者右键菜单中）点击【固定到浏览器】，打开设置页面，将动态面板固定到水平居中/垂直顶部的位置上。（图1-96）补充说明：因为，本案例主要讲解如何将某些内容固定在页面的指定位置上，不随着页面滚动而改变位置；所以，页面中的两部分内容均使用图片代替。特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。---------------------------------------------------- End ----------------------------------------------------转载请注明：Axure原创教程网»AxureRP8实战手册-案例1 ...继续阅读 (37)

案例12.   动态面板：自动图片切换案例来源:淘宝-首页 案例效果：页面打开时：（图1-82）案例描述：固定区域循环播放一组图片（幻灯片效果），圆形分页标签随着播放不同的图片，而对应改变样式。 元件准备：页面中：（图1-83）元件命名：动态面板（多状态添加图片）：SlidePanel矩形（圆点分页标签）：Tag1~Tag5思路分析：利用动态面板可添加多个状态的特性，创建5个状态；（操作步骤1）将5张需要展示的图片放到各个状态里面；（操作步骤2~3）将圆点分页标签做成只能唯一被选中的效果，并设置第一个圆点默认被选中；（操作步骤4）页面打开后，开启图片循环播放的效果；（操作步骤5）每次切换到新的图片时，根据状态名称选中圆点分页标签，呈现橙色效果。（操作步骤6~10）操作步骤：1、拖入动态面板到画布，命名为“SlidePanel”，双击动态面板（或者在概要面板中鼠标双击动态面板名称），点击【+】图标，为动态面板添加5个状态；（图1-84）2、双击进入状态“State1”，添加一张图片到画布左上顶点的位置；（图1-85）3、参考上一步，将剩余四张图片分别放入到状态“State1”~“State5”中；（图1-86）4、拖入一个矩形，设置为圆形，在元件属性中为其设置【选中】的样式，{设置选项组名称}为“Tag”，并调整为合适的大小；点中此元件，按<Ctrl+D&g ...继续阅读 (59)

案例11.   动态面板：登录面板切换案例来源:淘宝-用户登录 案例效果：快速登录：（图1-70） 账户密码登录：（图1-71）  案例描述：点击“快速登录”与“账户密码登录”按钮时，在两个登录面板间切换。 元件准备：页面中：（图1-72） 动态面板“LoginPanel”各个状态中：（图1-73） 包含命名：动态面板（用于制作登录面板）：LoginPanel动态面板状态（用于包含快速登录内容）：State1动态面板状态（用于包含账户密码登录内容）：State2 思路分析：动态面板可以添加多个状态；（操作步骤1）每个状态中可以添加不同的内容；（操作步骤2~4）设置两个登录按钮的样式切换；（操作步骤6）点击不同的登录按钮切换不同的状态。（操作步骤7~9） 操作步骤：1、拖放一个动态面板元件到页面中，双击动态面板，打开面板状态管理；将动态面板命名为“LoginPanel” ，然后，点击【+】添加一个状态；然后，双击状态名称“State1”进入这个状态的编辑界面；（图1-74）2、为“State1”添加元件，组成相应的内容；完成后，关闭“State1”的标签回到页面中；（图1-75）3、参照“操作步骤1”双击动态面板，打开面板状态管理界面，双击状态名称“State2”，进入进入状态“State2”的 ...继续阅读 (27)

 案例10.   内联框架：嵌入百度地图案例来源:百度糯米-商品详情 案例效果：页面打开时：（图1-59） 案例描述：在页面中嵌入百度地图页面，地图可以使用<鼠标左>键按住拖动，也可以通过<鼠标滚轮>进行缩放。 元件准备：页面中：（图1-60）操作步骤：1、鼠标双击框架打开链接属性设置界面；界面中选择【链接到url或文件】，{超链接}中填写“mymap.html”。（图1-61）  2、打开百度地图开放平台，网址：http://developer.baidu.com/。在【开发】菜单中选择【地图生成器】；（图1-62） 3、接下来“html”文件的制作：设置地图中心点，此处以“国贸”为例；（图1-63） 设置地图尺寸、显示的内容以及其他功能；（图1-64） 设置地图的标注；（略）点击【获取代码】按钮，获取地图代码。代码中需要写入地图API的密钥，点击【申请密钥】进行获取；如果不知道如何获取，可以查看页面上的“了解如何申请密钥”。（图1-65） 在本地新建一个文本文档；将地图代码复制，粘贴到新建的文档中；将申请的密钥添加到文档中指定位置；（图1-66） 将文档保存，然后将文档名称修改为“html”。（图1-67） 4、将制作好的原型生成HTM ...继续阅读 (58)

 案例1.   文本标签：添加文本链接案例来源:百度-注册百度账号 案例效果：点击《百度用户协议》前：（图1-52） 点击《百度用户协议》后：（图1-53）  案例描述：在注册页面点击蓝色文字《百度用户协议》，在浏览器的新标签页中打开注册协议页面。 元件准备：注册页面：（图1-54） 协议界面：（图1-55） 思路分析：为文本中的部分文字添加链接，链接到新打开的页面。 操作步骤：双击文本标签，点住<鼠标左>键，划选需要添加链接的文字，在属性中点击【插入文本链接…】；（图1-56） 设置{打开位置}为【新窗口/标签页】；勾选【链接到当前项目的某个页面】；点选列表中的页面名称，指定打开的页面。 （图1-57） 完成以上设置后，就实现了点击文本中的部分文字打开新页面的效果。（图1-58） 补充说明：为元件文字设置文本链接之后，这部分文字会自动变为蓝色，无需单独设置。如果需要改变为其他颜色，可以用鼠标划选这部分文字在快捷功能或样式中重新设置颜色。 ---------------------------------------------------- End ---------------------------------------------- ...继续阅读 (21)

案例8.   形状：制作环形进度条案例来源:中国移动APP-流量管家 案例效果：整体界面效果：（图1-41）原型实现效果：（图1-42）案例描述：环状带缺口的背景条与进度条。 元件准备：页面中：（图1-43）思路分析：通过自定义形状功能可以实现环形进度条的制作。 操作步骤：拖入一个矩形到画布，转换为带缺口的圆形；（图1-44）调整圆形尺寸为宽260*高260，缺口为1/4大小；（图1-45）拖入一个椭圆形到画布，尺寸设置为宽230*高230，将其与带缺口的圆形中心对齐；（图1-46）先点击选中带缺口的圆形，再点击选中内部的圆形；然后，在属性中点击【去除】的图标将两个形状改变成一个新的环形形状；最后，为圆环设置灰色的边框与背景色；（图1-47）再次拖入两个矩形，转换成半圆形，尺寸为宽15*高10；然后，将两个半圆形旋转为合适的角度，摆放到环形形状缺口的两端；点击选中圆环，再分别选择两个半圆形，点击属性中的【合并】图标，完成背景形状的制作。（图1-48）在样式中设置元件的角度{Rº}为225度，变成缺口朝下的效果。（图1-49）参照步骤1~4完成进度条的制作，并将其放到与背景条重合的位置上。（图1-50）最后添加其他元件，完成整个案例的制作。（图1-51）补充说明：注意在做形状的合并与去除时，元件的选择顺序不能颠倒。先选择主体元件，再选择被合并或者去除的部 ...继续阅读 (86)

 案例7.   形状：唯一选中项案例来源:京东APP-手机充值 案例效果：整体界面效果：（图1-35） 原型实现效果：（图1-36）   案例描述：点击每一个金额按钮时，当前按钮变为红色背景与白色字体，其它按钮恢复白色背景与黑色字体。 元件准备：页面中：（图1-37） 思路分析：按钮有两种状态与样式，可以通过元件的交互样式来实现；（操作步骤1）点击按钮时，通过设置当前的元件为被选中的状态使其变色；（操作步骤3）只允许有一个按钮呈现被选中的样式，可以通过给所有按钮元件设置选项组名称来实现效果。（操作步骤2） 操作步骤：在页面上添加一个矩形元件，在元件属性中为其设置【选中】的样式，可参考基础23；（图1-38）在元件属性中，{设置选项组名称}为“Price”；（图1-38） 为元件的【鼠标单击时】添加“用例1”，设置动作【选中】“当前元件”。（图1-39） 最后将此元件复制多个，排列整齐，更改金额文字；（图1-40） 将第一个元件的【选中】勾选，让其在页面加载时即为已选中的状态。（图1-38） 补充说明：本案例中的按钮默认样式设置包括：圆角半径：5；阴影：偏移(0,0)；模糊(5)；本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字 ...继续阅读 (19)

 案例6.   形状：自定义复选框（2）案例来源:多米音乐-用户注册 案例效果：选中前：（图1-28） 选中后：（图1-29）  案例描述：案例中的复选框在未选中时和选中时，呈现不同的样式。 元件准备：页面中：（图1-30）  包含命名：矩形（用于制作复选框）：CheckBox 思路分析：复选框中的“√”可以使用特殊符号输入到矩形的元件文字中；当矩形中没有文字时，设置元件文字为“√”；（操作步骤1~3）否则，设置矩形的元件文字为空白的。（操作步骤4~5） 操作步骤：为元件“CheckBox”的【鼠标单击时】添加“用例1”；为“用例1”添加条件判断，判断元件“CheckBox”的【元件文字】【==】“”（空值）；条件设置截图：（图1-31） 为“用例1”添加满足条件时的动作，【设置文本】到元件“CheckBox” 为【值】“√”；用例动作设置：（图1-32） 继续为元件“CheckBox”的【鼠标单击时】添加“用例2”；设置不满足“用例1”的条件时执行的动作，【设置文本】到元件“CheckBox” 为【值】“”。用例动作设置：（图1-33） 完成以上操作，即实现了整体效果。事件交互设置：（图1-34） 补充说明：本案例中矩形元件“CheckBox ...继续阅读 (30)

本站发布的IauxreFontV1.1版图标字体元件库在制作过程中，因为未卸载较早版本的字体文件，所以导致元件库发布后无法正常使用。请大家重新下载最新发布的1.2版本元件库，该版本经测试没有问题，请放心下载使用！给大家带来的不便，敬请谅解！请某些同学不要以此为由，找我索要种子作为赔偿。谢谢！---------------------------------------------------- End ----------------------------------------------------转载请注明：Axure原创教程网»关于IauxreFontV1.1版图标字体元件库问题的公告小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>> ...继续阅读 (30)

 案例5.   形状：变换样式的按钮（2）案例来源:花瓣网-登录界面 案例效果：初始状态：（图1-23） 鼠标进入按钮时：（图1-24）案例描述：登录面板中的登录按钮在鼠标移入时和鼠标按下时，显示不同的颜色。 元件准备：页面中：（图1-25） 思路分析：元件的属性中包含【鼠标悬停】与【鼠标按下】的交互样式，在用户进行这两个动作时，能够触发显示预先设置好的交互样式。 操作步骤：（图1-26）设置矩形的【鼠标悬停】的交互样式，改变填充颜色，颜色代码#EB5055。（参考基础23）设置矩形的【鼠标按下】的交互样式，改变填充颜色，颜色代码#DA3539。（参考基础23） 补充说明：设置颜色时可以直接在界面中输入颜色代码选取颜色。（图1-27） ---------------------------------------------------- End ----------------------------------------------------转载请注明：Axure原创教程网»AxureRP8实战手册-案例5（形状：变换样式的按钮②）小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！《Axure ...继续阅读 (29)