原型设计-如何能用axure实现复杂的tab切换效果.doc

word软件界面原型是交互设计师与需求工程师，产品经理，研发工程师沟通最直观的工具，在做一个产品成型的框架之前，先做一个简单的框架，这个框架包括产品的界面排版和布局，页面元素，业务流程，甚至可以表现最终产品需要实现的各种效果，一个完整的，优秀的界面原型能够帮助设计师，软件工程师等更好的了解产品需求，从而最大限度的实现预期的功能。能制作原型的工具有很多，一纸一支笔就可以画草图，但是太粗糙，也可以用visio，excel等，可是实现起一些复杂的交互操作就显得心有余力不足了，比如TAB标签的动态切换、定位页面锚点、全选效果，登陆框效果、图片轮播等等，因此，专业的axure原型设计工具在设计原型的过程中使用方便，效率高，而且能模拟的效果很多，目前我使用axure 6.5 版本由于AXURE入门比拟简单，而且互联网上有很多根底教程，在这里，我主要写一些在日常工作中使用AXURE设计产品原型经常用到又有一些设计复杂度的，结合我的使用经历，介绍给大家如何实现TAB切换的动态效果AXURE RP 6.5 软件一个首先想好一个需要tab切换效果的主题，这里我选择学生查看任课教师对他上交的作业的批改情况，需要查看的包括教师给自己作业的分数和评语，教师对全班作业的点评以与发布哪些同学的作业可以参考，最后能看到自己本次作业提交了什么容，根据这个主题，进展三种容的切换。拖拽三个矩形，调整成高35，宽110的按钮样式，并列排好，在按钮上分别写上“作业批阅结果“作业总体点评“我的作业容，然后在按钮的下方再拖拽一个矩形，我们将在矩形区域显示不同的容，如如下图：1. 在矩形区域添加第一个按钮要显示的容，然后选中容和矩形，右键转换为动态面板！注意： 为什么不直接拖拽一个动态面板呢？直接拖拽也是可以的，但是先添加动态面饭再往里面写容的鼠标操作比这么做要麻烦，这里提供一种便捷方法，后面还会陆续提到其他的便捷方式来提高原型制作效率。2. 转换成动态面板后，双击面板，在弹出的动态面板管理对话框中对面板进展命名“学生查看已批阅作业，然后对面板的状态1重命名为“作业批改结果，代表这个状态里面包含的作业批改结果相关信息3. 接下来，还要在这个面板管理对话框中增加两个面板状态，分别用来显示作业总体点评信息和学生的作业容信息，并按照步骤3进展重命名，如如下图4. 接下来给步骤4新添加的两个状态添加显示容，再axure界面的右下方有一个动态面板管理区，可以看到我们刚刚做好的动态面板的名字以与所包含的所有状态，双击状态“作业总体点评添加容，然后重复本步骤将所有的容添加好，如如下图：5. 下面是最关键的设置了，点击按钮显示对应的容首先选择按钮“作业批阅结果，在页面的右侧部件属性面板中对 “onclick(点击时)事件添加用例，在弹出的用例面板中选择“设置面板状态为指定状态，在右侧配置动作下找到刚刚我们添加的 “学生查看已批阅作业动态面板，在选择状态中指定显示第一个状态“作业批阅结果。如如下图：如果你希望点击后显示容时有点特效，在进展进展动画中进展设置6. 接下来设置第二个按钮“作业总体点评，按照步骤6设置显示动态面板的状态2“作业总体点评，然后设置第三个按钮，如如下图：7. 生成原型，在浏览器中预览这个TAB切换效果吧，生成原型时可以选择浏览器，不过有些浏览器需要一些设置，如chrom，这里选择IE，如如下图在IE中我们点击三个按钮，看到容已经随着按钮变化了，而且还有淡入淡出的效果哦如何实现TAB切换时按钮跟着变换样式？不过，细心做原型的你是不是发现按钮没有什么效果呢，点击与不点击都一样呢？如果鼠标移入有效果，点击后也有效果，那么交互就更好了，原型也更接近真实体验了，那么下一节介绍如何在TAB切换时同时变换按钮的样式，如如下图原型设计2 如何实现TAB切换时按钮跟着变换样式？前言： 软件界面原型是交互设计师与需求工程师，产品经理，研发工程师沟通最直观的工具一个完整的，优秀的界面原型能够帮助设计师，软件工程师等更好的了解产品需求，从而最大限度的实现预期的功能。AXURE 原型设计工具能够实现很多复杂的交互效果，比如TAB标签的动态切换、定位页面锚点、全选效果，登陆框效果、图片轮播等等， 由于AXURE入门比拟简单，而且互联网上有很多根底教程，在这里，我主要写一些在日常工作中使用AXURE设计产品原型经常用到又有一些设计复杂度的，结合我的使用经历，介绍给大家继续上一节：如何实现TAB切换时按钮跟着变换样式？AXURE PR 6.5 版本一个已经利用按钮和动态面板实现铁环效果的原型或者利用上节课的原型今天的设计目标：当鼠标移动到TAB标签按钮时，按钮样式发生改变红底白色加粗字体，当点击按钮切换显示容后，按钮样式发生改变黄底黑色加粗字体最终显示如下：1. 编辑鼠标移入按钮时的样式选中按钮“作业批阅结果，右键>>编辑按钮形状>>编辑悬停样式，在弹出的“设置悬停样式对话框中选择填充色，字体颜色，加粗等效果，勾选对话框底部的“预览功能，能够预览设置完时候的样式 需要设置成什么样式可根据自己的设计2. 使用格式刷批量设置样式设置完一个按钮，还有另外两个按钮需要设置，这时候可以利用格式刷，类似于word中格式刷的功能，能够将部件的样式批量进展设置注意：不能利用格式刷复制部件的操作和大小。3. 设置按钮点击后被选中的样式选中按钮“作业批阅结果，右键>>编辑按钮形状>>编辑选中样式，在弹出的对话框中设置第二种样式黄底黑色加粗字体，如如下图：4. 生成原型预览在预览中我们发现，当鼠标滑过这三个按钮时，按钮变换样式，但是点击某一个按钮进展容切换时，却没有显示选中的样式，如何让按钮点击后改变样式呢？5. 设置按钮点击后改变样式选中第一个按钮“作业批阅结果，然后再右侧事件编辑栏中选中“onclick点击时用例1进展编辑注意：前面已经添加了一个事件，点击时显示对应的容，在弹出的对话框中选择“设置部件为选中状态“，在右侧选择按钮作业批阅结果“后确定，如如下图6. 预览效果完成步骤5后预览效果，此时部件点击后变换了样式如如下图1，不过当再点击第二个按钮时却不能取消掉上一个被选中的样式如如下图2，怎么办呢？7. 指定按钮组选中本次TAB切换中的三个按钮，右键>>编辑按钮形状>>指定按钮组，在弹出的对话框中输入按钮组名称，例如“查看作业按钮组“，如如下图：8. 完结，预览本小结最终效果9. 本节建议这个例子用到了一个部件的操作涉与到另一个部件的属性的相关功能，因此建议大家养成对部件命名的好习惯，不然在后面做复杂交互设计的时候，会很头疼，比如，在一堆没有名字的部件列表中你找不到目标了13 / 13