axure原型设计之水泡导航栏
来源:互联网 发布:全国棉花加工数据 编辑:程序博客网 时间:2024/04/28 04:33
效果图:axure原型设计之水泡导航栏
题目中之所以叫做水泡导航栏,是因为这种导航栏的聚焦方式好像一个水泡移动到相对应的位置。这种导航栏还是在不少网页中存在着,因为比较生动,比较有趣,因此也比较容易让用户产生好感。这里就教大家如何使用axure原型工具制作这种导航栏。
第一步:拖拉摆放好相应的控件
1、一个627X57的长矩形拖拉放在适当位置;
2、五个125X55的篮框蓝底白字矩形横排在长矩形上面,文字分别为:“首页”,“项目介绍”,“企业动态”,“公司文化”和“人才招聘”;
3、一个125X55的没文字文本标签矩形,命名为“透明层”;
4、一个109X42的白色圆角矩形,50%的半透明,命名为“半透明层”;
5、然后将“透明层”和“半透明层”组合,命名为“水泡”,并将其放在“首页”的上面。
第二步:为那五个带文字的矩形添加鼠标移入时用例
首先,可以先为“首页”添加鼠标移入时用例,用例中只需添加一个动作:移动水泡至当前元件的x轴位置和y轴位置,移动方式为绝对移动,动画为线性,时间为500毫秒。
然后,可以将“首页”的交互用例复制粘贴到“项目介绍”,“企业动态”,“公司文化”和“人才招聘”中。
制作至此就结束了,点击预览,鼠标在导航栏上移动就可以看到效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。
作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/03/18/140/
阅读全文
0 0
- axure原型设计之水泡导航栏
- 原型设计之Axure RP
- axure原型设计之轮播图
- axure原型设计之弹幕
- axure原型设计之进度条
- axure原型设计之翻牌
- 原型设计之Axure RP pro
- Axure快速原型设计之杂谈
- axure原型设计之获取验证码
- axure原型设计之tab选项卡
- axure原型设计之播放控制条
- axure原型设计之语音按钮
- axure原型设计之侧滑菜单
- axure原型设计之二维码扫描框
- axure原型设计之转盘抽奖
- axure原型设计之tab选项卡
- axure原型设计之抽屉列表
- Axure RP原型设计
- test10
- 【C#机房重构】未删除任何行
- HAL so库加载机制---之二
- 目录
- 2017计蒜客第一场B题-阿里天池的新任务(简单)(数据结构-KMP)
- axure原型设计之水泡导航栏
- 百度2017春招<度度熊回家问题>Java代码
- POJ 1275 Cashier Employment 笔记
- 洛谷OJ
- QT——QByteArray及QBuffer
- 常用数据结构
- js 实现 Base64 编码的相互转换
- js事件监听
- 并发编程:API 及挑战