当前位置:文档之家› 小楼axure 图文教程(七)日历元件的制作(图像热区效果)

小楼axure 图文教程(七)日历元件的制作(图像热区效果)

小楼axure 图文教程(七)日历元件的制作(图像热区效果)
小楼axure 图文教程(七)日历元件的制作(图像热区效果)

小楼axure 图文教程(七)日历元件的制作(图像热区效果)

作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-11 22:48 ?6没有评论编辑示例原型下载:小楼原创元件-日历

实现目标:

1、点击日历图标出现日期选择面板,点击其中一个预先设定好的日期,日期在文本框显示。

2、点击日历图标中的清空,则删除文本框中的日期。

3、点击今天则文本框日期显示为当前日期(通过变量实现,未接触过变量的同学可略过)。

4、点击关闭,则关闭日期选择面板。

最终效果如下:(看不到动态效果时,请点击图片。)

实现过程:

首先,准备一个文本框,一个日历图标,一个动态面板,一个日期选择面板的图片(示例用图是从百度图片下载的),把这些元件的标签都设置好(不会设置标签参看教程:小楼axure rp教程(一)文本框焦点效果)。

准备好这些,我们就可以开始制作了。

1、双击动态面板,再双击打开状态1,然后,把日期选择图片粘贴到里面,并拖动到左上角的位置,点右键—顺序–设置为最底层。

2、从元件库里面拖出四个图片热区,分别调整成合适的大小后覆盖在清空、今天、关闭三个按钮和要选择的日期数字上。

3、分别设置每个热区的鼠标点击事件。

A点击清空上的热区时,删除日期文本框的文字。

B点击今天上的热区时,调用系统日期变量[[Year]]-[[Month]]-[[Day]],将当前日期填入文本框。如果要是填前一天的就是[[Year]]-[[Month]]-[[Day-1]]喽,当天是月初1号,就是[[Year]]-[[Month-1]]-[[Day-1]]。然后设置动态面板隐藏,可以加上500毫秒淡入淡出的动画效果。

(设置动态面板隐藏的图就不截了,不会的参照C步骤)

C点击关闭上的热区时,设置隐藏动态面板。

D点击日期数字上的热区时,直接设置文本框的值等于对应的日期就可以了。然后隐藏动态面板。

4、回到主页面给日历图标也加个鼠标点击事件,当鼠标点击时,切换动态面板可见性。

5、在动态面板上点右键—编辑选项—设为隐藏。

6、生成原型检验效果。

axure8基础培训

Axure8.0基础教程手册 目录 基础1.添加元件到画布 ------------------------------------------------------------------------------- 4 基础2.添加元件名称 ---------------------------------------------------------------------------------- 4 基础3.设置元件位置/尺寸--------------------------------------------------------------------------- 5 基础4.设置元件默认角度 ---------------------------------------------------------------------------- 6 基础5.设置元件颜色与透明 ------------------------------------------------------------------------- 6 基础6.设置形状或图片圆角 ------------------------------------------------------------------------- 7 基础7.设置矩形仅显示部分边框 ------------------------------------------------------------------- 7 基础8.设置线段/箭头/边框样式 ------------------------------------------------------------------- 8 基础9.设置元件文字边距/行距 --------------------------------------------------------------------- 8 基础10.设置元件默认隐藏 -------------------------------------------------------------------------- 9 基础11.设置文本框输入为密码 -------------------------------------------------------------------- 9 基础12.设置打开选择文件窗口 ------------------------------------------------------------------ 10 基础13.限制文本框输入字符位数 --------------------------------------------------------------- 11 基础14.设置文本框提示文字 --------------------------------------------------------------------- 11 基础15.设置文本框回车触发事件 --------------------------------------------------------------- 11 基础16.设置鼠标移入元件时的提示------------------------------------------------------------- 12 基础17.设置矩形为其他形状 --------------------------------------------------------------------- 12 基础18.设置自定义形状 --------------------------------------------------------------------------- 13 基础19.设置形状水平/垂直翻转 ----------------------------------------------------------------- 14 基础20.设置列表框的内容 ------------------------------------------------------------------------ 14 基础21.设置元件默认选中/禁用 ----------------------------------------------------------------- 14 基础22.设置单选按钮唯一选中 ------------------------------------------------------------------ 15

《制作活动日历》三年级数学

《制作活动日历》 教材来源:小学三年级《数学》教科书/人民教育出版社2013版 内容来源:小学三年级数学(下册)综合与实践 主题:制作活动日历 课时:1课时 授课对象:三年级学生 设计者:楚萍/新密市米村镇柿树湾小学 目标确定的依据 (一)课程标准相关要求 1.通过实践活动,感受数学在日常生活中的作用,体验运用所学的知识和方法解决简单问题的过程,获得初步的数学活动经验。 2.在实践活动中,了解要解决的问题和解决问题的办法。 3.经历实践操作的过程,进一步理解所学的内容。 (二)教材分析 本节课是一节实践活动课——制作年历。这节活动课是学生掌握了年、月、日知识后的综合应用。在制作过程中,学生会利用到大量年、月、日的知识,经历从年具体到月再具体到日的过程。体现了年、月、日之间的内在联系。这节实践活动课可以说既是对年、月、日这一单元知识的总结,又体现了数学的应用性与趣味性。 (三)学情分析: 三年级的学生具有一定的动手操作能力;有一定的小组合作意识和能力:具有一定的观家、发现、分析、交流和搜集资料的能力;同时还具有一定的生活经验,比较关注自己周围的事物,对自己熟悉的事物比较感兴趣,喜欢关注“有趣、好玩、新奇”的事物等,这些都为本次活动的学习得于顺利开展奠定了甚础。 学习目标 1.通过自主探究与合作交流,综合运用年、月、日的知识和正方体的特征解决问题,积累数学活动经验。 2.在探究日历制作方法的过程中,提高学生有条理地思考问题和解决问题的能力。

3.感受数学在生活中的应用,激发参与实践活动的兴趣。 评价任务 任务1:通过收集年历,展示年历,让学生更多、更直观的了解年历的形式、结构检测目标1的达成。 任务2:通过开办年历展示会让学生身处在一个展示交流的氛围中,更积极、主动的参与活动,让学生发挥想象。制作出有特色的年历检测目标2的达成。 任务3:通过制作、交流、欣赏、谈收获,让学生带问题离开课堂,继续进行学习与探索检测目标3的达成。 重点:掌报年历的组成要素,进一步提高学生的设计制作能力。 难点:掌据年历的制作方法。

新人教版数学三年级下册:《制作活动日历》教学分析

《制作活动日历》教学分析 (一)教学目标 1.让学生通过自主探索与合作交流,综合运用年、月、日的知识和正方体的特征解决问题,积累数学活动经验。 2.在探索日历制作方法的过程中,培养学生有条理地思考问题和解决问题的能力,积累数学思维活动的经验。 3.感受数学在生活中的应用,激发学生参与综合实践活动的兴趣。 (二)内容安排及其特点 “制作活动日历”这一综合与实践的主题活动,选择了4个小正方体木块作为活动材料,以“如何制作一个活动日历”为目标和载体,目的是让学生进一步感受数学在日常生活中的应用,体会运用年、月、日的知识解决简单问题的过程,积累活动经验。 教材提供了组织活动的基本线索和需要讨论的关键问题。 1.明确要完成的任务。教材一开始就提出“你能用像下面这样的4个小正方体木块(或纸盒)和一个底座制作一个日历吗?” 2.聚焦关键问题,展开探究活动。如何合理分配4个小正方体及充分利用它们的面,是整个实践活动的核心问题。教材通过两幅连续的情境图,呈现了学生通过讨论“关键问题”,逐步明确解决问题方法的过程,为教师组织活动提供抓手。 3.展示作品,分享经验。 (三)教学建议 这节活动课材料准备相对简单,但对学生的思维要求较高。教师要通过问题引领,关注学生的全程参与,让学生经历一个从分析问题到解决问题的相对完整的学习活动。为此,需要注意以下几点。 1.活动目标的拟订——强调联系与综合,但需要依托具体的数学知识。 “综合与实践”的教学,在总目标上非常强调联系和综合,具体到一节课或一个专题,究竟该“联系”到怎样的范围、“综合”到怎样的程度?这有一个很大的空间。但不管活动涉及哪个领域、哪门学科,采取哪些方式,一节课的时间有限,一个班又有四五十个学生,要使活动有效,教学目标还应该是具体和明确的,除了要让学生获得良好的情感体验、感受数学在日常生活中的作用以外,必须找准活动的落脚点,考虑好以什么数学知识为依托,保持其应有的“数学味”。本实践活动依托的是年、月、日的相关知识,在讨论时要充分考虑制作活动日历的三要素及这些要素的数据特点,再结合小正方体的特点(6个面),思考解决方案。 2.活动过程的设计——强调实践和体验,但需要有探索空间的“大问题”o

Axure RP 8.0函数大全 Axure函数手册用法及说明

Axure RP 8.0函数大全Axure函数手册用法及说明Axure RP 8.0函数大全是根据小楼老师的《Axure RP 8 函数速查表》整理而来,方便大家查询。这些函数不用去记,大概了解他们的用途即可。需要的时候再来查一下就可以了。 在做课件的时候,将所有的函数用途和参数注解,整理了一份表格资料。后来,觉得这个东西挺有用,所以,分享给大家当做参考资料。 函数能够提高原型的制作效率,但也容易导致画蛇添足。如果是单纯的学习,建议通过一些有趣味的原型,多加锻炼使用。这样在实际应用中,才能够手到拈来,随心所欲。如果是用于工作,在不熟悉函数使用的情况下,尽量避免纠结于某个函数的使用,以免影响工作效率,得不偿失。扎实学习,灵活使用。这句话不仅适用于函数,也适用于Axure以及其他的任何工具。 Axure函数的基本语法 在axure交互设计时,函数可以用在条件公式和需要赋值的地方,其基本语法是用双方括号包含,变量值和函数用英文句号连接。 例如:[[LVAR. Width]] 表示变量LVAR的宽度。 [[This. Width]] 当前元件的宽度 元件函数 This用途:获取当前元件对象。当前元件是指当前添加交互动作的元件。 Target用途:获取目标元件对象。目标元件是指当前交互动作控制的元件。 x用途:获取元件对象的X轴坐标值。

y用途:获取元件对象的Y轴坐标值。 width用途:获取元件对象的宽度值。 height用途:获取元件对象的高度值。 scrollX用途:获取元件对象的水平滚动距离(当前仅限动态面板)。scrollY用途:获取元件对象的垂直滚动距离(当前仅限动态面板)。text用途:获取元件对象的文本文字。 name用途:获取元件对象的自定义名称。 top用途:获取元件对象的上边界坐标值。 left用途:获取元件对象的左边界坐标值。 right用途:获取元件对象的右边界坐标值。 bottom用途:获取元件对象的下边界坐标值。 opacity用途:获取元件对象的不透明比例。 rotation用途:获取元件对象的旋转角度。 鼠标指针函数 Cursor.x用途:鼠标指针在页面中位置的X轴坐标。 Cursor.y用途:鼠标指针在页面中位置的Y轴坐标。 DragX用途:鼠标指针沿X轴拖动元件时的瞬间(0.01秒)拖动距离。DragY用途:鼠标指针沿Y轴拖动元件时的瞬间(0.01秒)拖动距离。TotalDragX用途:鼠标指针拖动元件从开始到结束的X轴移动距离。TotalDragY用途:鼠标指针拖动元件从开始到结束的Y轴移动距离。DragTime用途:鼠标指针拖动元件从开始到结束的总时长。

小楼axure 图文教程(十六)摇一摇效果

小楼axure 图文教程(十六)微信摇一摇效果 作者: 小楼一夜听春语分类:Axure教程发布时间: 2013-07-22 21:43?6没有评论编辑本教程axure原型百度云盘下载:小楼原创原型-微信摇一摇效果 本文出自诉客?产品经理的心声,转载时请注明出处及相应链接。 本来是想借着这个axure原型效果写一下拖动面板后通过变量让其他面板联动的的效果,结果做到一半,想起来,这个联动效果不用拖的,而是移动面板,糗P了。既然做了,就做下去吧,结果又碰到了一个软件的bug。我勒个去! 说一下这个axure6.5中的bug,就是无论你在动态面板的哪个事件(拖动开始,拖动时,拖动结束)中,只要设置了变量值,那么在这些事件中的内部框架加载页面就会失效。本来简单实现的功能,又不得不在框架上加了一个动态面板状态。 其实在这个效果中,实现方法没什么值得过多说的,不过有些值的我们注意的地方是很有价值的。 先说实现过程: 我的想法是这样的,先说内容页,内容页在主页加载时就要加载到内部框架里,但是不能动,当摇动结束时,重新加载内容页,这时候再让它动。为了实现这个效果就要加个变量作为开关,主页加载时没有变量,这时候加载内容页就可以通过内容页的onloadpage事件判断变量没有值不作任何动作。当摇动结束时,给变量赋值,并且重新加载内容页,这个时候在内容页的onloadpage事件中就能判断变量被赋值,执行动态的效果。 那么过程就应该是在主页放上手机外壳元件,里面放个框架,然后把他们一起转换成动态面板,在打开主页时,就把摇一摇的界面加载到框架里,在拖动这个动态面板时,让面板可以随意拖动(摇一摇),当拖动结束时,给指定的变量复制,并把内容页重新加载到框架。、

Axure基本使用教程+示例

Axure使用介绍文档 目录 一、Axure rp 的界面 (2) 二、Axure rp的线框图元件 (3) 三、Axure rp的元件触发事件 (4) 四、Axure rp的条件生成 (6) 五、系统函数与变量 (8) 六、动态面板的使用 (14) 七、母版的使用 (20) 八、中继器的使用 (28)

一、Axure rp 的界面 (界面显示各个区域可在主菜单工具栏-视图中找到) 1、菜单工具栏:同大部分软件类似,可选择Axure各个功能的工具区。 2、操作界面:绘制产品的操作区,所有元件、部件可拖与此区域操作。 3、站点地图:页面文件存放区域,可增加、删除、修改、查看页面;可设置页面级别。 4、元件库(部件库):主要分为流程图和线框图;可拖动元件库里的元件到操作界面进行产品绘制;为提高效率,元件库也可自行导入已经可使用的元件。 5、母版:母版的使用主要针对于顶部导航、底部导航,多个页面中重复出现的元素,可先绘制与母版中,再拖动到需使用的页面(比起重复操作,修改扩展行也更强)。 6、页面属性:可设置当前页面的注释、交互、与样式。 7、元件交互与注释:可对操作页面中用到的元件或元件与元件之间的交互事件进行设置(如动态面板显示与隐藏、鼠标点击事件、鼠标移入移出事件等)。8、元件属性和样式:可设置选中元件的基本样式与属性。

9、部件管理(动态面板管理):该区域可对已设置的动态面板状态进行操作,可添加、删除、进行排序,也可双击动态面板进入编辑。 二、Axure rp的线框图元件 1、图片:图片元件拖入编辑时,可双击载入本地磁盘的图片,载入图片是Axure 会自动提示将大图进行优化,避免原型文件过大;载入的图片可以选择原图大小也可以保持元件大小。 2、文本:标题1、标题2、单行文本、多行文本都属于文本类型的元件,在网页中的名称为lable,主要用于文字描述、文本链接等功能 3、矩形:矩形可用作背景、按钮等元件使用;双击矩形可输入文本;拖入矩形时默认是直角矩形,可通过左右拖动左上角的黄色小三角来改变圆角半径;也可通过右键选择形状来改变当前形状。 4、占位符:顾名思义,主要用于替代一些没有交互或交互比较简单的区域。

Axure教程axure新手入门基础(一)

Axure?教程axure??础(1)名词解释: 线框图:一般就是指?产品原型,比如:把线框图尽?快画出来和?把原型尽快?做出来是一?个意思。 axure?元件:也叫axu?re组件或?axure?部件,系统自带了?一部分最基?础常用的,网上也有很?多别人做好?的,软件使用到?一定阶段可?以考虑自己?制作元件,以便提高产?品原型的制?作速度。 生成原型:是指把绘制?好的原型通?过axur? e rp生成静?态的htm?l页面,检查原型是?否正确,同时,方便演示。建议生成时?选择用谷歌?浏览器打开?(第一次会有?提示安装相?关插件),ie会每次?都有安全提?示,不如谷歌浏?览器方便。 (一)Axure?rp的界面?

1-主菜单工具?栏:大部分类似?offic?e软件,不做详细解?释,鼠标移到按?钮上都有对?应的提示。 2-主操作界面?:绘制产品原?型的操作区?域,所有的用到?的元件都拖?到该区域。 3-站点地图:所有页面文?件都存放在?这个位置,可以在这里?增加、删除、修改、查看页面,也可以通过?鼠标拖动调?整页面顺序?以及页面之?间的关系。 4-axure?元件库:或者叫ax?ure组件?库、axure?部件库,所有软件自?带的元件和?加载的元件?库都在这里?,这里可以执?行创建、加载、删除axu?re元件库?的操作,也可以根据?需求显示全?部元件或某?一元件库的?元件。 5-母版管理:这里可以创?建、删除、像页面头部?、导航栏这种?出现在每一?个页面的元?素,可以绘制在?母版里面,然后加载到?需要显示的?页面,这样在制作?页面时就不?用再重复这?些操作。 6-页面属性:这里可以设?置当前页面?的样式,添加与该页?面有关的注?释,以及设置页?面加载时触?发的事件o?npage?load。 7-元件属性:这里可以设?置选中元件?的标签、样式,添加与该元?件有关的注?释,以及设置页?面加载时触?发的事件; A-交互事件:元件属性区?域闪电样式?的小图标代?表交互事件?;

axure新手入门基础

axure新手入门基础 名词解释: 线框图:一般就是指产品原型,比如:把线框图尽快画出来和把原型尽快做出来是一个意思。 axure元件:也叫axure组件或axure部件,系统自带了一部分最基础常用的,网上也有很多别人做好的,软件使用到一定阶段可以考虑自己制作元件,以便提高产品原型的制作速度。 生成原型:是指把绘制好的原型通过axurerp生成静态的html页面,检查原型是否正确,同时,方便演示。建议生成时选择用谷歌浏览器打开(第一次会有提示安装相关插件),ie会每次都有安全提示,不如谷歌浏览器方便。 (一) Axurerp的界面 1-主菜单工具栏:大部分类似office软件,不做详细解释,鼠标移到按钮上都有对应的提示。

2-主操作界面:绘制产品原型的操作区域,所有的用到的元件都拖到该区域。 3-站点地图:所有页面文件都存放在这个位置,可以在这里增加、删除、修改、查看页面,也可以通过鼠标拖动调整页面顺序以及页面之间的关系。 4-axure元件库:或者叫axure组件库、axure部件库,所有软件自带的元件和加载的元件库都在这里,这里可以执行创建、加载、删除axure元件库的操作,也可以根据需求显示全部元件或某一元件库的元件。 5-母版管理:这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素,可以绘制在母版里面,然后加载到需要显示的页面,这样在制作页面时就不用再重复这些操作。 6-页面属性:这里可以设置当前页面的样式,添加与该页面有关的注释,以及设置页面加载时触发的事件onpageload。 7-元件属性:这里可以设置选中元件的标签、样式,添加与该元件有关的注释,以及设置页面加载时触发的事件; A-交互事件:元件属性区域闪电样式的小图标代表交互事件; B-元件注释:交互事件左面的图标是用来添加元件注释的,在这里我们能够添加一些元件限定条件的注释,比如:文本框的话,可以添加注释指出输入字符长度不能超过20。 C-元件样式:交互事件右侧的图标是用来设置元件样式的,可以在这里更改原件的字体、尺寸、旋转角度等,当然也可以进行多个元件的

三年级下册《制作活动日历》教案(两套)

三年级下册《制作活动日历》教案(一) 【教学内容】: 人教版三年级下册P90页制作活动日历 【教学目标】: 1、让学生通过自主探索与合作交流,综合运用年、月、日的知识和正方体的特征解决问题,从而积累数学活动经验。 2、在探索日历制作方法的过程中,培养学生有条理地思考问题从而积累解决问题的经验和体会到事情解决所遵循的一般规律。 3、感受数学在生活中的应用,激发学生参与综合实践活动的兴趣。 4、对“尝试——调整”的策略有着丰富的感知和积淀。 【教学重点】: 会用四个小正方体木块和一个底座制作一个日历。 【教学难点】: 将正方体的特征与月、日、星期所展示出的数据进行对接,依据资源与数据特点设计相应的呈现方式。 【教具准备】: 四个正方体木块,0——9外加1、2共12个数字 【学具准备】: 每3人一组,每组一个学具袋(有4个小正方体木块和一支水性笔) 【教学过程】: 一、依托生活,充分感知,提取要素 (一)从生活入手对比感知 师:在学习年月日中我们一直在和它打交道,课件出示(月历),其实在我们生活中还有些地方出现了它的身影,课件出示(电子日历)。比较观察这两种日历,有什么相同点?有什么不同点吗?

生:都能清楚的告诉我们年月日的一些信息;不同的是电子日历还能特别清晰的、一目了然的告诉大家年月日的信息。 师:第一种台历必须至少知道其中的一种信息才能相应的知道其他的信息,而另一种即使我今天什么信息都不知道看到后都能马上知道所有的信息即:月份、日期和星期几。 板书设计:推导寻找 一目了然 (二)提取要素,为操作做好准备 师:那么今天我们就一起来制作一个日历(板书),但是今天我们要用的材料是它(出示正方体)。你对它有了解吗? 生:它有六个面、每个面大小相等 师:今天我们就用小正方体来做一个立体的,能活动的日历。要求:做完后要让看的人一眼就能看出几月、几日、星期几。(板书:月、日、星期) 二、依托设想,聚焦问题,确定方向 (一)初步设想,解读要素 1.师:如果就让你用这样的制作一个月历,满足我们刚才提出的要求:即便这个人在看之前什么信息也不知道,在他看到你所做的月历后也要一眼能看出月份、日期、星期几这几条信息。 请你先设想一下表示月份需要几块这样的小正方体呢?表示星期呢?表示日期又需要几块这样的小正方体呢? 2、学生说出设想的结果: 【监控】①月份12个——2块 12÷6=2块

小楼axure教程(五)动态面板的使用

小楼axure教程 (五)动态面板的用途 小楼一夜听春语分类: Axure教程发布时间: 2013-07-09 22:24?61条评论编辑 小楼axure教程 (五)动态面板的用途 写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解。 关于动态面板 动态面板是axure原型制作中使用非常频繁的一个元件,主要用途就是实现一些动态的交互效果。所以,如果动态面板使用不熟悉的话,对axure原型的制作会有很大的影响,那么动态面板都能做什么呢?主要有以下几个方面: 1、隐藏与显示 2、滑动效果 3、拖动效果 4、多状态效果 以上这些效果都在移动面板的元件属性里面体现。那通过这几个属性都能实现什么样的功能呢?简单的举几个例子。 1、显示隐藏效果 我们经常在做原型的时候,需要点击按钮后出现一些界面上没有的元素,比如:

登录功能在不填写用户名时点击登录按钮,显示出要求用户填写用户名的提示。 情景B: 当我们需要在用户的某一个操作时,弹出一个提示框。当用户点击提示框的确定按钮时提示框消失。 诸如以上情景都需要用到动态面板的显示隐藏效果。 动态面板初始状态是隐藏还是显示,可以通过右键单击动态面板—编辑选项—设为显示(或)设为隐藏来实现。 2、动态面板的滑动效果 与显示隐藏效果不同,动态面板的滑动效果一般是通过其他交互事件来激发的,可能是点击某个按钮,也可能是页面加载时实现。比如: 情景A: 情景B: 点击登录按钮,登录面板的弹出收起效果。 一般滑动效果都需要有复杂的激发过程,比如通过页面的onpageload事件。现在,在此不做过多讲解,以后通过案例来进行介绍,则更易懂一些。 3、动态面板的拖动效果 动态面板的拖动效果,对于移动互联网产品原型来说是必须的,主要用于APP的产品原型。用来实现面板被拖动时产生的一些效果。 情景A: 手机的滑动解锁功能。

Axure学习教程

Axure教程 axure新手入门基础(1) 2013-08-19 21:43Nairo分类:原型设计微信二维码 首先做个声明:此次教程里为了快速完成,借用了一些网上已有教程的图文,不是剽窃,只图方便。另外,因为汉化版本可能功能名称等略有差别,请自行理解。 名词解释: 线框图:一般就是指产品原型,比如:把线框图尽快画出来和把原型尽快做出来是一个意思。 axure元件:也叫axure组件或axure部件,系统自带了一部分最基础常用的,网上也有很多别人做好的,软件使用到一定阶段可以考虑自己制作元件,以便提高产品原型的制作速度。 生成原型:是指把绘制好的原型通过axure rp生成静态的html页面,检查原型是否正确,同时,方便演示。建议生成时选择用谷歌浏览器打开(第一次会有提示安装相关插件),ie会每次都有安全提示,不如谷歌浏览器方便。 (一) Axure rp的界面

1-主菜单工具栏:大部分类似office软件,不做详细解释,鼠标移到按钮上都有对应的提示。 2-主操作界面:绘制产品原型的操作区域,所有的用到的元件都拖到该区域。 3-站点地图:所有页面文件都存放在这个位置,可以在这里增加、删除、修改、查看页面,也可以通过鼠标拖动调整页面顺序以及页面之间的关系。 4-axure元件库:或者叫axure组件库、axure部件库,所有软件自带的元件和加载的元件库都在这里,这里可以执行创建、加载、删除axure元件库的操作,也可以根据需求显示全部元件或某一元件库的元件。

5-母版管理:这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素,可以绘制在母版里面,然后加载到需要显示的页面,这样在制作页面时就不用再重复这些操作。 6-页面属性:这里可以设置当前页面的样式,添加与该页面有关的注释,以及设置页面加载时触发的事件onpageload。 7-元件属性:这里可以设置选中元件的标签、样式,添加与该元件有关的注释,以及设置页面加载时触发的事件; A-交互事件:元件属性区域闪电样式的小图标代表交互事件; B-元件注释:交互事件左面的图标是用来添加元件注释的,在这里我们能够添加一些元件限定条件的注释,比如:文本框的话,可以添加注释指出输入字符长度不能超过20。 C-元件样式:交互事件右侧的图标是用来设置元件样式的,可以在这里更改原件的字体、尺寸、旋转角度等,当然也可以进行多个元件的对齐、组合等设置。 8 动态面板:这个是很重要的区域,在这里可以添加、删除动态面板的状态,以及状态的排序,也可以在这里设置动态面板的标签;当绘制原型动态面板被覆盖时,我们可以在这里通过点击选中相应的动态面板,也可以双击状态进入编辑。 Axure rp的界面就介绍到这里,界面中的各个区域基本上在做产品原型的过程中,使用都很频繁,所以建议不要关闭任何一个区域。如果不小心关闭了,可以通过主菜单工具栏—视图—重置视图来找回。

axure案例

axure案例 【篇一:axure案例】 下面是近收集到的最好的网页设计资源,希望大家能够喜欢。网页模板macbook pro retina 15 mockup (psd).stationary mockup templ 【篇二:axure案例】 用axure写产品需求文档实例-axure中文网 axure中文网axure官 方正版 快速原型设计工具 2015-12-22 分类:阅读(21824) 评论(10) 说来有些惭愧,写这篇文章是用来教大家写需求文档的。但其实, 我很少会写传统意义上的产品需求文档;甚至,我连word都很少用。用惯了axure的任意布局方式,再用word感觉非常别扭,尤其是 在添加图片时,简直感到捉急。当然,这不是我不用word写需求文档的根本原因。 简单来谈一下,为什么软件开发项目中,需要需求文档这么个东西?在稍微大一点的开发团队中,产品经理未必能向所有开发人员,传 达具体的产品开发需求。这时就需要一份文档来供所有的项目参与 人员阅读。而产品经理又常常爱拍脑袋、容易变卦,所以文档也是 开发人员约束产品经理的一项武器。在产品上线前的测试环节,测 试人员也同样会拿产品需求文档来验收产品质量。当团队进入新人时,文档也可以让新人更快地了解产品。 总的来说,产品需求文档有三个核心作用: 传达产品开发需求;保证各部门沟通有理有据产品质量控制有具体 标准由此可见,产品需求文档是必不可少的。那一份好的需求文档,就应该能准确传达出产品的开发需求。那么产品需求文档该用什么 方式写,才能更好地传达出产品开发需求呢? 就我所见,行业大多产品经理都是用word axure原型的方式组成产 品需求文档。那这种方式,是否真的能方便地表达出产品需求?我 问了很多程序猿,他们在开发时,一般都是看着效果图和原型图写 代码,只有在遇到问题时,才会查看word文档。也就是说,开发需要一边写代码,一边看效果图,一边看原型,还要时不时查看文档。而且,大多数程序猿都不会逐字逐句去读产品经理的长篇大论。那 产品经理写word真的合适吗?这样的用户体验真的好吗?花费大量时间写word真的有价值吗?在axure画原型的同时,我们为什么 不能直接在旁边标注呢?这样岂不是方便快捷很多吗?

小楼axure 图文教程(十一)新手入门基础(3)

小楼axure 图文教程(十一)新手入门基础(3)作者: 小楼一夜听春语分类:Axure教程发布时间: 2013-07-15 22:29?6没有评论编辑 本文出自诉客-产品经理的心声,转载时请注明出处及相应链接。 (三)Axurerp元件的触发事件 l OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发。比如点击按钮。 l OnMouseEnter(鼠标移入时): 鼠标进入到某个元件范围时触发,比如当鼠标移到某张图片时显示该图片的介绍。 l OnMouseOut(鼠标移出时): 鼠标离开某个元件范围时触发。比如鼠标离开图片时,图片介绍消失。 l OnKeyUp(按键弹起时): 文本框(单行与多行)编辑时,键盘按下某一个按键松开时触发,不支持其他axure元件。比如统计文本框输入的字数。 l OnFocus(获取焦点时): 当一个元件通过点击或切换获取焦点时触发。比如搜索框编辑时,清空“请输入关键字”的提示。 l OnLostFocus(失去焦点时): 当一个组件失去焦点时触发。比如用户名、密码的验证。 l OnChange(选中项改变时):下拉列表框或列表框的选中项改变时触发,不支持其他元件。比如选择地址时,选择不同的省份,显示对应的省内城市。 动态面板专属事件 l OnMove(移动时):当动态面板移动时触发。是指通过其他事件的触发控制面板移动时,比如当进度条移动时,进度比例的变化。

l The OnShow and OnHide events(显示或隐藏时):当动态面板隐藏或显示时触发。比如图片显示时按钮文字是关闭图片,图片隐藏时按钮文字变为打开图片。 l OnPanelStateChange(状态改变时):当动态面板更改面板的状态时触发。 比如通过改变动态面板状态实现的进度条效果,当状态改变时改变相应的进度比例。 l OnDragStart: Occurs when the drag begins(开始拖动面板时):当开始拖动动态面板时触发。比如在动态面板拖动开始时,显示“拖动开始”的文字提示。 l OnDrag: Occurs as the panel is dragged(面板拖动时):动态面板拖动时触发,比如拖动一块动态面板另外一块跟随移动。 l OnDragDrop: Occurs when the panel is dropped(面板拖动结束时):当拖拽结束时触发。比如滑动解锁,面板拖动结束时根据滑块的位置设置相应的效果。

小楼axure 图文教程(七)日历元件的制作(图像热区效果)

小楼axure 图文教程(七)日历元件的制作(图像热区效果) 作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-11 22:48 ?6没有评论编辑示例原型下载:小楼原创元件-日历 实现目标: 1、点击日历图标出现日期选择面板,点击其中一个预先设定好的日期,日期在文本框显示。 2、点击日历图标中的清空,则删除文本框中的日期。 3、点击今天则文本框日期显示为当前日期(通过变量实现,未接触过变量的同学可略过)。 4、点击关闭,则关闭日期选择面板。 最终效果如下:(看不到动态效果时,请点击图片。) 实现过程: 首先,准备一个文本框,一个日历图标,一个动态面板,一个日期选择面板的图片(示例用图是从百度图片下载的),把这些元件的标签都设置好(不会设置标签参看教程:小楼axure rp教程(一)文本框焦点效果)。 准备好这些,我们就可以开始制作了。

1、双击动态面板,再双击打开状态1,然后,把日期选择图片粘贴到里面,并拖动到左上角的位置,点右键—顺序–设置为最底层。 2、从元件库里面拖出四个图片热区,分别调整成合适的大小后覆盖在清空、今天、关闭三个按钮和要选择的日期数字上。 3、分别设置每个热区的鼠标点击事件。 A点击清空上的热区时,删除日期文本框的文字。

B点击今天上的热区时,调用系统日期变量[[Year]]-[[Month]]-[[Day]],将当前日期填入文本框。如果要是填前一天的就是[[Year]]-[[Month]]-[[Day-1]]喽,当天是月初1号,就是[[Year]]-[[Month-1]]-[[Day-1]]。然后设置动态面板隐藏,可以加上500毫秒淡入淡出的动画效果。 (设置动态面板隐藏的图就不截了,不会的参照C步骤) C点击关闭上的热区时,设置隐藏动态面板。 D点击日期数字上的热区时,直接设置文本框的值等于对应的日期就可以了。然后隐藏动态面板。

axure7.0教程(图文案例)

作者:陪学地址:https://www.doczj.com/doc/9c1198548.html,分类:axure交互设计 初学axure时会想如何快点实现做交互的效果,做交互要对部件的属性和axure 的基础功能有认识和了解才能更快的实现,我介绍这个案例主要用到的部件是“动态面板”需要对动态面板的属性有所了解。 切换面板在网页中算是非常常见的,如视频网站的电视剧分类标签、资讯网站的资讯分类等,当鼠标移入到这个标签的时候显示的内容会相应的变化,同时标签的样式也会发生变化;这些交互效果都可以利用动态面板的几个状态来进行相互切换得来。 步骤1:从部件库中拖拽一个动态面板到线框图编辑区中,并在“部件交互和注释”窗口中命名为“通知” 步骤2:双击动态面板“通知”,打开 动态面板管理窗口,点击“+”按钮,新增4个状态,并将状态命名为:公告、规则、论坛、安全、公益

步骤3:在“通知”动态面板管理窗口中,双击“公告”状态,打开“公告”状态,在公告状态中输入公告的内容 步骤4:选中公告中的文字,在“部件属性和样式”窗口中,点击“鼠标悬停时”,打开“设置交互样式”窗口,设置鼠标悬停时字体颜色:#FF4400;切换到标签“鼠标按键按下时”,设置字体颜色:#FF4400。 小技巧:经常看到在网页中,当鼠标悬停时两个或多个部件(例如图片和文字)的样式同时发生变化,要实现这个效果只要把要改变样式的两个部件放在动态面板同一个状态中,设置它的交互样式,同时在动态面板属性中勾选“触发鼠标交互

样式”这样就可以实现了 步骤5:打开“公告”状态,选中“公告”,在“部件交互和注释”窗口中,双击“鼠标移入时”事件,打开用例编辑器 步骤6:在用例编辑器中,第二步:点击新增动作—— 选择“动态面板”;第四步:配置新动作—— 勾选中“通知(面板状态)”,在“选择状态”后下拉选择“公告”;点击“确定”,保存设置,并关闭用例编辑器。

Axure 基础教程

Axure8.0基础教程 基础1. 添加元件到画布 在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。(图1-1) 基础2. 添加元件名称 文本框属性中输入元件的自定义名称,建议采用英文命名。 建议格式:PasswordInput01或Password01 名称含义:序号01的密码输入框 格式说明:“Password”表示主要用途;“Input”表示元件类型,一般情况下可省略,当有不同类型的同名元件需要区分或名称不能明确表达用途的时候使用;“01”表示出现多个同名元件时的编号;单词首字母大写的书写格式便于阅读。(图1-2)

基础3. 设置元件位置/尺寸 元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。(图1-3) x:指元件在画布中的x轴坐标值。 y:指元件在画布中的y轴坐标值。 w:指元件的宽度值。 h:指元件的高度值。 在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】。(图1-4) 基础4. 设置元件默认角度 方式一:选择需要改变角度的元件,按住键的同时,用鼠标拖动元件的节点到合适的角度。(图1-5)

方式二:在元件样式中进行角度的设置,元件的角度与元件文字的角度可以分开设置。(图1-5) 基础5. 设置元件颜色与透明 选择要改变颜色的元件,点击快捷功能区中的背景颜色设置按钮,选取相应的颜色,或者在元件样式中进行设置。(图1-6) 基础6. 设置形状或图片圆角 可以通过拖动元件左上方的圆点图标进行调整,也可以在元件样式中设置圆角半径来实现。(图1-7)

基础7. 设置矩形仅显示部分边框 在Axure RP 8的版本中,矩形的边框可以在样式中设置显示全部或部分。(图1-8) 基础8. 设置线段/箭头/边框样式 线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置。(图1-9) 基础9. 设置元件文字边距/行距 在元件样式中可以设置元件文字的【行间距】与【填充】。(图1-10) 行间距:是指文字段落行与行之间的空隙。 填充:是指文字与形状边缘之间填充的空隙。

小楼axure教程(五)动态面板的使用

小楼axure教程(五)动态面板的用途 作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-09 22:24 ?61条评论编辑小楼axure教程(五)动态面板的用途 写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而 忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解。 关于动态面板 动态面板是axure原型制作中使用非常频繁的一个元件,主要用途就是实现一些动态的 交互效果。所以,如果动态面板使用不熟悉的话,对axure原型的制作会有很大的影响, 那么动态面板都能做什么呢?主要有以下几个方面: 1、隐藏与显示 2、滑动效果 3、拖动效果 4、多状态效果 以上这些效果都在移动面板的元件属性里面体现。

那通过这几个属性都能实现什么样的功能呢?简单的举几个例子。 1、显示隐藏效果 我们经常在做原型的时候,需要点击按钮后出现一些界面上没有的元素,比如: 情景A:登录功能在不填写用户名时点击登录按钮,显示出要求用户填写用户名的提示。 情景B:当我们需要在用户的某一个操作时,弹出一个提示框。当用户点击提示框的确定按钮时提示框消失。 诸如以上情景都需要用到动态面板的显示隐藏效果。 动态面板初始状态是隐藏还是显示,可以通过右键单击动态面板—编辑选项—设为显示(或)设为隐藏来实现。 2、动态面板的滑动效果 与显示隐藏效果不同,动态面板的滑动效果一般是通过其他交互事件来激发的,可能是点击某个按钮,也可能是页面加载时实现。比如: 情景A:网站上的一些滚动文字的效果。 情景B:点击登录按钮,登录面板的弹出收起效果。 一般滑动效果都需要有复杂的激发过程,比如通过页面的onpageload事件。现在,在此不做过多讲解,以后通过案例来进行介绍,则更易懂一些。 3、动态面板的拖动效果 动态面板的拖动效果,对于移动互联网产品原型来说是必须的,主要用于APP的产品原型。用来实现面板被拖动时产生的一些效果。 情景A:手机的滑动解锁功能。 情景B:手机页面的纵向浏览功能。 情景C:手机页面的横向换页功能。

人教2011版小学数学三年级实践活动《制作活动日历》教学设计

实践活动: 《制作活动日历》教学设计 执教者:湖南省永州市东安县舜德学校蒋淑凤 教学内容:《义务教育教科书数学》(人教版)三年级下册第90页。 教材分析: 本节课是学习了“年、月、日”“24时计时法”及“简单的时间计算”之后安排的一个“综合与实践”活动。 “综合与实践”是一类以问题为载体、以学生自主学习为主要形式的教学活动。基于学生对年、月、日等知识的理解和运用,他们对此内容并不陌生,但活动日历大多数学生没见过,本节课对学生思维及操作上的挑战主要是在“活动”二字上。因此根据问题指向(用四个正方体制作一个活动日历),怎样把年、月、日的知识融于解决问题之中是本节课的教学重点。同时,教学时间不能单单局限于课堂上,可以课内外相结合,这也是“综合与实践”领域教学形式的特点之一。 学情分析: 《制作活动日历》人教版三年级下册第六单元《年月日》的最后一课时,在此之前,学生已经学习“年月日”的相关知识,前期认识了正方体,并有一定解决问题的能力。但三年级学生处于形象思维向抽象思维过渡的阶段,动手实践、合作交流的能力在逐步发展,具有思维活跃、模仿能力强,爱表现的心理特征,且本节实践活动学生已具备一定的知识基础。这些足以为活动开展奠定了良好的知识基础。但是三年级学生的数学活动经验参差不齐,因此,实践活动中教师要关注学生已有的活动经验基础,不断上升,促进学生实践能力的生成。 教学目标: 1.在制作活动日历的过程中,探索解决问题的思路和方法,进一步理解年、月、日之间的关系。 2.在活动中体验解决问题的过程,积累活动经验,培养学生动手操作、解决问题的能力。 3.感受数学与生活的联系,培养学生独立思考、反思质疑的学习习惯,激发学生参与综合实践活动的兴趣。 教学重点:理解制作活动日历的思路和方法,体会解决问题方法的多样性。 教学难点:能用恰当的方法在两个正方体上表示出一个月中的任意一日。

小楼axure 图文教程(二十)动态面板拖动效果(函数DragX,DragY)

作者: 小楼一夜听春语分类: Axure教程发布时间: 2013-07-31 12:00 ?6没有评论编辑今天是axure rp6.5新手教程的最后一节了,写了这么长时间,也不知道给大家帮上忙 了吗?在这最后一节,把之前没有讲的两个特殊函数说一说。至于在这20章教程里面没有 写到的东西,将会在axure7.0的教程里慢慢补全,敬请期待! 本教程案例原型下载:小楼axure 图文教程(二十)动态面板拖动效果(函数DragX, DragY) 今天的教程示例如下: 如图,是通过拖动任意一个面板,让另外一个面板镜像移动。 看似有些复杂的效果,其实非常简单就实现了。 首先介绍两个函数: DragX:获取被拖动面板左右瞬时挪动的距离; DragY:获取被拖动面板上下瞬时挪动的距离; 我们只需要在两个动态面板里各写上两个动作就好了。 左面的面板,我们当面板拖动时,将它设置为拖动状态,这样就能随意拖动了; 然后,让左面面板拖动的时候,右面的面板移动相对距离,因为我们是让两个面板上下 方向(Y轴)同方向移动,而左右方向(X轴)朝相反的方向移动。所以在相对距离里面X

轴我们要把DragX前面加上负号,这样就是反方向移动了。Y轴就直接获取DragY的函数值就可以了。 同理,我们在右边的面板上,也写上这两个动作,这样拖动右面板的的时候左面板也镜像移动了。

好了,让我们看看效果! 呵呵,axure 6.5教程完结,这周末之前,axure7.0教程就要开始和大家见面了,敬请期待! 我一定会回来的!!!!!!!!!!!! 本文出自诉客?产品经理的心声,转载时请注明出处及相应链接。

相关主题
文本预览
相关文档 最新文档