当前位置:文档之家› 原型设计-如何用aure实现复杂的tab切换效果

原型设计-如何用aure实现复杂的tab切换效果

原型设计-如何用aure实现复杂的tab切换效果
原型设计-如何用aure实现复杂的tab切换效果

软件界面原型是交互设计师与需求工程师,产品经理,研发工程师沟通最直观的工具,在做一个产品成型的框架之前,先做一个简单的框架,这个框架包括产品的界面排版和布局,页面元素,业务流程,甚至可以表现最终产品需要实现的各种效果,一个完整的,优秀的界面原型能够帮助设计师,软件工程师等更好的了解产品需求,从而最大限度的实现预期的功能。

能制作原型的工具有很多,一张纸一支笔就可以画草图,但是太粗糙,也可以用visio,excel 等,可是实现起一些复杂的交互操作就显得心有余力不足了,比如TAB标签的动态切换、定位页面锚点、全选效果,登陆框效果、图片轮播等等,因此,专业的axure原型设计工具在设计原型的过程中使用方便,效率高,而且能模拟的效果很多,目前我使用axure 版本

由于AXURE入门比较简单,而且互联网上有很多基础教程,在这里,我主要写一些在日常工作中使用AXURE设计产品原型经常用到又有一些设计复杂度的,结合我的使用经历,介绍给大家

如何实现TAB切换的动态效果

AXURE RP 软件一个

首先想好一个需要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 版本

一个已经利用按钮和动态面板实现铁环效果的原型(或者利用上节课的原型)今天的设计目标:

当鼠标移动到TAB标签按钮时,按钮样式发生改变(红底白色加粗字体),当点击按钮切换显示内容后,按钮样式发生改变(黄底黑色加粗字体)最终显示如下:

1.编辑鼠标移入按钮时的样式

选中按钮“作业批阅结果”,右键>>编辑按钮形状>>编辑悬停样式,在弹出的“设置悬停样式”对话框中选择填充色,字体颜色,加粗等效果,勾选对话框底部的“预览”功能,能够预览设置完时候的样式(需要设置成什么样式可根据自己的设计)

2.使用格式刷批量设置样式

设置完一个按钮,还有另外两个按钮需要设置,这时候可以利用格式刷,类似于word 中格式刷的功能,能够将部件的样式批量进行设置(注意:不能利用格式刷复制部件的操作和大小)。

3.设置按钮点击后(被选中)的样式

选中按钮“作业批阅结果”,右键>>编辑按钮形状>>编辑选中样式,在弹出的对话框中设置第二种样式(黄底黑色加粗字体),如下图:

4.生成原型预览

在预览中我们发现,当鼠标滑过这三个按钮时,按钮变换样式,但是点击某一个按钮进行内容切换时,却没有显示选中的样式,如何让按钮点击后改变样式呢

5.设置按钮点击后改变样式

选中第一个按钮“作业批阅结果”,然后再右侧事件编辑栏中选中“onclick(点击时)用例1”进行编辑(注意:前面已经添加了一个事件,点击时显示对应的内容),在弹出的对话框中选择“设置部件为选中状态“,在右侧选择按钮”作业批阅结果“后确定,如下图

6.预览效果

完成步骤5后预览效果,此时部件点击后变换了样式(如下图1),不过当再点击第二个按钮时却不能取消掉上一个被选中的样式(如下图2),怎么办呢

7.指定按钮组

选中本次TAB切换中的三个按钮,右键>>编辑按钮形状>>指定按钮组,在弹出的对话框中输入按钮组名称,例如“查看作业按钮组“,如下图:

8.完结,预览本小结最终效果

9.本节建议

这个例子用到了一个部件的操作涉及到另一个部件的属性的相关功能,因此建议大家养成对部件命名的好习惯,不然在后面做复杂交互设计的时候,会很头疼,比如,在一堆没有名字的部件列表中你找不到目标了……

电脑快捷键使用大全

快捷键,又叫快速键或热键,指通过某些特定的按键、按键顺序或按键组合来完成一个操作,很多快捷键往往与如Ctrl 键、Shift 键、Alt 键、Fn 键以及Windows 平台下的Windows 键和Mac 机上的Meta 键等配合使用。利用快捷键可以代替鼠标做一些工作,可以利用键盘快捷键打开、关闭和导航“开始”菜单、桌面、菜单、对话框以及网页。 Alt+ESC 切换到上一个操作的窗口 Alt+F4 关闭当前窗口 Print Screen 截取当前全屏幕到剪切板 Alt+Print Screen 截取当前窗口屏幕截图到剪切板 Alt+Shift 在输入法之间切换 Alt+Tab 切换当前打开的窗口 Alt+Shift+Tab 反向切换当前打开的窗口 Alt+up 打开当前文件夹上一层文件夹 Backspace 返回上一页 Ctrl+A 全选 Ctrl+Alt+Tab 不关闭菜单,循环切换打开的窗口 Ctrl+B IE7 中整理收藏夹 Ctrl+C 复制

Ctrl+D IE7 中将当前页加入收藏夹 Ctrl+E 激活搜索栏,资源管理器和IE7中有效 Ctrl+Esc 打开开始菜单 Ctrl+F IE7 中打开搜索当前页面菜单 Ctrl+H IE7 中打开历史记录 Ctrl+I IE7 中打开收藏夹 Ctrl+J IE7 中打开RSS Feed Ctrl+N IE7 中打开与当前窗口相同的另一个新窗口 Ctrl+P IE7 中打印 Ctrl+Q IE7 中打开快速导航选项卡 Ctrl+R IE7 中刷新当前选项卡 Ctrl+Shift+Esc 打开任务管理器 Ctrl+Space 切换中英输入法 Ctrl+T IE7 中打开新选项卡 Ctrl+V

设计流程及方法

UED设计流程及方法 “用户体验设计”无疑是这两年互联网行业最炙手可热的话题,而从我们成都UCD书友会火爆的现场来看,也的确如此。那么“用户体验设计”为什么会如此火爆呢?这需要从互联网的Web2.0革命说起。 这场革命,代表了互联网应用关注焦点的变迁,从以内容为王的门户型网站时代,转变为以用户为中心的互联网服务时代。以用户为中心的互联网服务,自然就需要以用户为中心的设计。但是要做到真正的以用户为中心的设计却并不简单。 这是什么意思呢?我想用彩程的实际经历对这个问题做出解释。和很多其它软件企业一样,彩程也是从一些中小型的企业网站、电子商务网站开发业务启程的。当时我们开发一个电子商务类网站的流程是什么样的呢? 首先会由超级打杂老妖出马,跟客户沟通,套出用户的需求,然后由费西或是老妖自己,三下五除二的搞一个首页出来,拿去给用户确认,用户如果点头,那么ok,开始做首页的html切图,然后丢给程序员开始开发,同时,美工继续孤军深入,出各种特征内页,切html,交给程序员开发,如此循环往复。而一旦整个项目开始进行,客户就很少再参与其中了。 于是,这个项目持续运行,直到某一天,程序员说:“好了”,这样,老妖满怀希望的冲到客户那里,很想听到客户对网站认可,但实际的场景往往是: 客户抱怨说,这里我明明是想要个Flash广告,但是却只有一张图片;这个订单系统怎么不好用,为什么不参考淘宝来做呢?我还想要个会员系统,每个会员有自己的个人页面。 这个时候,可怜的老妖只能作出两种选择,要么照单全收,ok,哪里有问题我给你改哪里,要么就是耍死皮,但是后面一种情况一般不会出现,因为老妖不愿因为得罪客户而丢掉奶粉钱。所以,这个原本大家都认为很简单的网站项目就这样被delay下去了。 这样的情况出现的次数多了,让公司首脑小s同学很不满意,于是他开始召集大家思考,这是为什么呢?让我们来看看之前我们的流程:

Eclipse项目开发常用快捷键

在Java项目开发中,使用到的eclipse工具拥有很多快捷键,熟练使用这些快捷键可以是让码代码的速度得到相当的提升,下面是总结的一些常用的快捷键,供大家参考. (注:文中箭头对应键盘方向键,黄色为使用频率非常高的快捷键) Ctrl+Alt+↓向下复制当前行 Ctrl+Alt+↑向上复制当前行 (很多人这两个快捷键无效,主要两个原因造成: 1:与播放器快捷键冲突,如网易云,QQ播放器,解决办法:找到播放器设置快捷键 2:与集显快捷键冲突,解决步骤如下: 点击鼠标右键→选择→→ →将快捷键设置为禁用以后,重启eclipse即可生效) Alt+/ 快捷提示,如某个类中的方法,字段.( 1:打开Eclipse,在导航栏选择打开" Window -Preferences"。

2:在目录树上选择"Java-Editor-Content Assist",在右侧的"Auto-Activation"找到"Auto Activation triggers for java"选项。默认触发代码提示的是"."这个符号3: 在"Auto Activation triggers for java"选项中,将"."更 改:.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ) Alt+↓移动当前行到下面一行 Alt+↑移动当前行到上面一行 Alt+←返回前一个编辑的页面 Alt+→到下一个编辑的页面 Alt+Shift+←选择上一个元素(根据鼠标光标位置),有时候选择复制一段代码可用 Alt+Shift+→选择下一个元素(同上) Alt+Enter快速显示当前文件的属性,如文件存放路径 Alt+Shift+S快速创建本类中的相关方法,如构造方法,实现或继承方法,get/set方法 Alt+Shift+W选中某个文件后,选择SystemExplorer可快速打开文件所在位置及其他相关信息(该快捷键仅支持高版本Eclipse,火星版本及以后) Ctrl+D 删除当前行 Ctrl+M当前窗口最大化 Ctrl+L定位到指定函数(也可直接点击编辑器右下角的SmartInsert) Ctrl+Q 定位到最后编辑的地方 Ctrl+F按下后,可输入查询关键字,查找该关键字在当前文件中的位置 Ctrl+K选中关键字,查找下一个关键字的位置 Ctrl+H打开查询窗口,可根据文件类型进行查找

eclipse快捷键大全

Ctrl+M 当前窗口最大化 Ctrl+F7 视窗口切换 Ctrl+F8 模式切换 Ctrl+F6 编辑窗口切换(手指张得太大不雅观啊) Ctrl+E 编辑窗口切换(这个比较文雅点:) ) Alt+← 前一个编辑的页面 Alt+→ 下一个编辑的页面 Ctrl+Alt+↓ 复制(增加)当前行到下一行 Ctrl+Alt+↑ 复制(增加)当前行到上一行 Alt+↓ 当前行和下面一行交互位置(用不着剪切了) Alt+↑ 当前行和上面一行交互位置 Ctrl+D 删除当前行 Alt+Enter 显示当前选择文件的属性 Shift+Enter 在当前行插入空行(下一行) Shift+Ctrl+Enter 在当前行插入空行(上一行) Ctrl+Q 定位到最后编辑的地方 Ctrl+L 定位在具体某行 Ctrl+/ 注释当前行(可多行),再按则取消注释 Ctrl+Shift+R 找文件 Ctrl+Shift+T 找类 Ctrl+K 选中的Word快速定位到下一个 Ctrl+Shift+K 选中的Word快速定位到上一个 Ctrl+Shift+U 选中后列出查询到的结果 Ctrl+/(小键盘) 折叠当前类中的所有代码 Ctrl+×(小键盘) 展开当前类中的所有代码 Ctrl+Shift+P 定位到对于的匹配符(如{},()) CTRL+SHIFT+X 切换字符的大小写(大写) CTRL+SHIFT+Y 切换字符的大小写(小写) Ctrl+1 当某行出错时或警告时,跳出帮助 Ctrl+Shift+F 格式排版 Alt+Shift+R 重命名(改量和类名时很方便) Alt+Shift+C 修改函数结 Alt+Shift+M 重构方法(选中要重构方法,再生成个新方法) Alt+Shift+Z 重构恢复 Ctrl+W 关闭当前窗口 Ctrl+Shift+F4 关闭所有打开的窗口 Ctrl+Shift+O :import相关类,同时若已经import的类,没有被用到,就删除。sysout->Ctrl+Space->System.out.println() Window->Preference->Workbench->Keys 有兴趣的可以自定义热键 编辑 作用域功能快捷键

CSS实现导航条Tab切换的三种方法

CSS实现导航条Tab切换的三种方法 前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 buju 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成。要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局【语义布局】 从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体