【每日推荐】 用动态面板的推拉实现网站菜单栏的展开折叠效果

Axure问答黑胡子 发表了文章 • 5 个评论 • 1543 次浏览 • 2016-11-19 15:54 • 来自相关话题

【每日推荐】 一个简单的视频编辑软件,附RP文件

Axure问答黑胡子 发表了文章 • 2 个评论 • 1055 次浏览 • 2016-11-08 16:46 • 来自相关话题

【每日推荐】 交互原型设计分享 v1.0 (含海量设计资源和Axure实例)

产品经理交流windir 发表了文章 • 14 个评论 • 4580 次浏览 • 2016-11-01 17:36 • 来自相关话题

【每日推荐】 管理公告:本社区近期将进行大规模的改版和调整

产品经理交流黄老师 发表了文章 • 4 个评论 • 473 次浏览 • 2016-10-27 16:33 • 来自相关话题

【每日推荐】 【资源分享】Camdy_V1.0_视觉设计规范原型分享 提供RP文件下载

Axure问答黑胡子 发表了文章 • 5 个评论 • 2148 次浏览 • 2016-10-26 14:53 • 来自相关话题

最近每次打开axure7都打不开 会报错

回复

Axure问答太和衬 发起了问题 • 1 人关注 • 0 个回复 • 42 次浏览 • 2017-06-06 09:22 • 来自相关话题

哪位大神有Axure的元件库?

Axure问答windir 回复了问题 • 2 人关注 • 1 个回复 • 291 次浏览 • 2017-05-27 14:55 • 来自相关话题

Google Material Design 900个实用图标的Axure组件库

Axure问答windir 发表了文章 • 0 个评论 • 95 次浏览 • 2017-05-27 14:43 • 来自相关话题

平时各位交互设计师和产品经理们在设计原型上都会用到图标,但是临时去找图标是一件很影响效率的事情。虽然其它同行朋友有分享过自己制作的图标库,但是要么数量不够全面、要么不支持调整尺寸和颜色,今天分享一套来自于Google Material Design的实用Axure图标组件库,其中一共有900+款的常用的经典图标。这是一套Axure原型设计的必备图标组件库,包含了各类主流APP、网站等各种原型设计中需要的大部分图标,基本用了它基本就不再需要其它的图标组件库了。相信交互设计师和产品经理们用了这套图标库之后,在原型设计时能够得心应手了,输出的原型交互稿也会更逼格满满。

本套图标库的特性:
1. 这是一套矢量的图标库、可以随意变化尺寸,不会出现锯齿;
2. 支持直接修改颜色或填加渐变风格、让图标更符合你的设计风格(这点很重要);
3. 支持修改形状和轮廓,可以最大程度上的发挥你的创意;
4. 数量非常庞大,一共900多款,而且分类非常清晰,方便查找和使用。

部分图标预览:






随意变化尺寸:






修改图标颜色:






填加渐变风格:






修改形状和轮廓:






如何在Axure中使用图标元件库:

1.在Axure软件中元件库面板中点击更多图标,然后选择载入元件库;






2.选择已经下载好的元件库文件;






3.然后再在元件库下拉菜单中选择Material Design Icon Library就可以看到载入的图标元件了,然后就是将需要的图标拖入的编辑界面中使用了。






另外需要特别说明的是,使用上面的方法载入的元件库可能在软件重启之后就看不到了,这需要再次重新载入。为了避免这种情况,你可以直接将元件库复制到Axure的元件库目录中,这样就不需要重新载入了。

元件库目录一般在以下位置:
C:\Users\系统用户名\Documents\Axure\Libraries

如果你的软件已经汉化,该目录应该是:
C:\Users\系统用户名\Documents\Axure\元件库。

将Material Design Icon Library.rplib这个文件拷入进去,然后重启软件就可以了。


Google Material Design 900个实用图标的Axure组件库下载地址:

链接: https://pan.baidu.com/s/1slpYl2X
密码: puwi

如果您想获得更多关于Axure的组件库及模板,欢迎访问我们的网站了解更多或加入我们的QQ交流群。
网址:http://www.axureux.com
QQ群:60750209 查看全部
平时各位交互设计师和产品经理们在设计原型上都会用到图标,但是临时去找图标是一件很影响效率的事情。虽然其它同行朋友有分享过自己制作的图标库,但是要么数量不够全面、要么不支持调整尺寸和颜色,今天分享一套来自于Google Material Design的实用Axure图标组件库,其中一共有900+款的常用的经典图标。这是一套Axure原型设计的必备图标组件库,包含了各类主流APP、网站等各种原型设计中需要的大部分图标,基本用了它基本就不再需要其它的图标组件库了。相信交互设计师和产品经理们用了这套图标库之后,在原型设计时能够得心应手了,输出的原型交互稿也会更逼格满满。

本套图标库的特性:
1. 这是一套矢量的图标库、可以随意变化尺寸,不会出现锯齿;
2. 支持直接修改颜色或填加渐变风格、让图标更符合你的设计风格(这点很重要);
3. 支持修改形状和轮廓,可以最大程度上的发挥你的创意;
4. 数量非常庞大,一共900多款,而且分类非常清晰,方便查找和使用。

部分图标预览:

2017-05-25_201842.png


随意变化尺寸:

2017-05-25_192208.png


修改图标颜色:

2017-05-25_192633.png


填加渐变风格:

2017-05-25_192601.png


修改形状和轮廓:

2017-05-25_192821.png


如何在Axure中使用图标元件库:

1.在Axure软件中元件库面板中点击更多图标,然后选择载入元件库;

2017-05-25_193819.png


2.选择已经下载好的元件库文件;

2017-05-25_194005.png


3.然后再在元件库下拉菜单中选择Material Design Icon Library就可以看到载入的图标元件了,然后就是将需要的图标拖入的编辑界面中使用了。

2017-05-25_194333.png


另外需要特别说明的是,使用上面的方法载入的元件库可能在软件重启之后就看不到了,这需要再次重新载入。为了避免这种情况,你可以直接将元件库复制到Axure的元件库目录中,这样就不需要重新载入了。

元件库目录一般在以下位置:
C:\Users\系统用户名\Documents\Axure\Libraries

如果你的软件已经汉化,该目录应该是:
C:\Users\系统用户名\Documents\Axure\元件库。

将Material Design Icon Library.rplib这个文件拷入进去,然后重启软件就可以了。


Google Material Design 900个实用图标的Axure组件库下载地址:

链接: https://pan.baidu.com/s/1slpYl2X
密码: puwi

如果您想获得更多关于Axure的组件库及模板,欢迎访问我们的网站了解更多或加入我们的QQ交流群。
网址:http://www.axureux.com
QQ群:60750209

利用窗口函数实现滑动悬浮固定【附原型文件】

Axure问答黑胡子 发表了文章 • 0 个评论 • 156 次浏览 • 2017-03-22 17:51 • 来自相关话题

在PC浏览器上效果比较好,在手机上预览还有些问题。
预览地址:http://exi3v9.axshare.cn




 
在PC浏览器上效果比较好,在手机上预览还有些问题。
预览地址:http://exi3v9.axshare.cn
QQ20170322-174835.png

 

一个Navbar搞定所有页面【附原型案例】

Axure问答黑胡子 发表了文章 • 2 个评论 • 182 次浏览 • 2017-03-22 01:55 • 来自相关话题

一个app原型总会有很多页面,每个页面都会有不同的navbar,所以通常我们都会在每个页面绘制navbar,有一个简单的方法,用一个navbar母版即可在所有页面中使用。
预览地址:http://9gj5cy.axshare.cn/
















  查看全部
一个app原型总会有很多页面,每个页面都会有不同的navbar,所以通常我们都会在每个页面绘制navbar,有一个简单的方法,用一个navbar母版即可在所有页面中使用。
预览地址:http://9gj5cy.axshare.cn/


QQ截图20170322015421.png


QQ截图20170322015437.png


QQ截图20170322015448.png

 

能否请老师帮忙解答如何制作保真度高的生日选择框

Axure问答赵承鹏 回复了问题 • 3 人关注 • 4 个回复 • 243 次浏览 • 2017-03-10 09:50 • 来自相关话题

在制作App输入键盘交互效果时键盘位置会移动是Axure的bug么?

Axure问答Sam 回复了问题 • 2 人关注 • 2 个回复 • 198 次浏览 • 2017-03-09 15:19 • 来自相关话题

【自制】多级抽屉 高维护性 高移植性 RP 8.0.0.3303

Axure问答赵承鹏 发表了文章 • 1 个评论 • 250 次浏览 • 2017-03-08 17:13 • 来自相关话题

详见附件
 
版本 8.0.0.3303
 
第一次发,请多多指教
 
演示地址在:http://jxjkmu.axshare.cn/ 
详见附件
 
版本 8.0.0.3303
 
第一次发,请多多指教
 
演示地址在:http://jxjkmu.axshare.cn/ 

您好,怎么用中继器制作通讯录

Axure问答赵承鹏 回复了问题 • 2 人关注 • 2 个回复 • 307 次浏览 • 2017-03-08 14:39 • 来自相关话题

新人求教,关于输入密码

Axure问答赵承鹏 回复了问题 • 2 人关注 • 1 个回复 • 464 次浏览 • 2017-03-08 00:39 • 来自相关话题

注册密码包含特殊字符

Axure问答赵承鹏 回复了问题 • 3 人关注 • 5 个回复 • 370 次浏览 • 2017-03-08 00:21 • 来自相关话题

母板是否可以设置置顶?

Axure问答自语 回复了问题 • 2 人关注 • 1 个回复 • 109 次浏览 • 2017-03-07 13:15 • 来自相关话题

AXURE制作的原型是否可直接用于前端代码开发

Axure问答黄老师 回复了问题 • 2 人关注 • 1 个回复 • 255 次浏览 • 2017-02-28 19:49 • 来自相关话题

Axure RP 8.0中文汉化包 axure8中文语言包下载

Axure问答JennyXU 回复了问题 • 9 人关注 • 9 个回复 • 3218 次浏览 • 2017-02-25 03:16 • 来自相关话题

怎么将元件添加到axure rp软件中

Axure问答黄老师 回复了问题 • 2 人关注 • 1 个回复 • 188 次浏览 • 2017-02-23 06:27 • 来自相关话题

测试页面效果

回复

Axure问答一杯茶 发起了问题 • 0 人关注 • 0 个回复 • 225 次浏览 • 2017-02-21 18:32 • 来自相关话题

关于Axure疑似元件缩放动作BUG的官方答复

Axure问答徐松 发表了文章 • 4 个评论 • 253 次浏览 • 2017-02-16 12:26 • 来自相关话题

我在之前分享阿里云高保真原型制作心得时,提到过制作图片缩放效果时碰到过的一个疑似BUG,原文如下:

这本是一个简单的交互动画,鼠标进入时添加蓝色蒙层并线性放大背景图,鼠标离开时恢复原状。做出来后乍看是没问题的,可是当鼠标快速地在这几个图片之间移动(也就是背景图快速地放大缩小)时,背景图会出现错位,并且偏差越来越大。

传送门:《在Axure原型中实现收起/展开区块并拉起/推开下文效果》
 
为了验证我的怀疑,我向Axure官方用户支持中心反馈了此问题。以下是邮件记录:





 
原型展示地址:http://qk4sxj.axshare.com 
原型文件下载地址:http://www.pmdaniu.com/rp/download/6038
 
以下是Axure官方答复的邮件记录:





 
翻译如下:

感谢反馈!看起来你碰的问题是,当快速地触发一个带有动画的set size动作时,会引起该元件在页面上轻微的移动。我注意到你正在使用Axure RP 8的一个较旧的构建版本(build 3312)。最新构建版本(3323)包含了许多有关set size动作的BUG修复,其中似乎有与你正在面临的问题相似的BUG。为了验证目前的问题在最新构建版本中是否已经修复,请更新到构建版本3323然后尝试再次上传并且在Axure Share上测试你的原型。
你可以更新到以下最新构建版本:
http://www.axure.com/update
希望这能帮到你!如果还需要其他帮助,请告知我们。
祝好
Alyssa

于是我在另一台电脑上安装了最新构建版本3323,用同样的方法再次制作并测试了原型,甚至简化了原型,然而发现问题依然存在。于是再次与Axure官方客服沟通:






新版原型展示地址:http://la5tw0.axshare.com 
新版原型文件下载地址:http://www.pmdaniu.com/rp/download/6362​ 
 
Axure官方答复如下:






翻译如下:

感谢跟进你的文件!我看了一下这个交互,看起来你的OnMouseEnter事件在Set Size动作上有一个200ms的动画,但是在OnMouseOut事件上没有动画。这样的结果是,当你过快地缩放元件时,此图片元件没能停留在正确的位置上。为了保证图片正常的缩放并且停留在正确的位置上,你应当保证在OnMouseEnter的动作动画未完成之前,不要触发OnMouseOut事件。
又或者,你可以在OnMouseOut事件上也添加一个动画,或者把OnMouseOut和OnMouseEnter的动画都去掉。这些方法似乎都可以避免元件在缩放结束时移动到不恰当的位置上。
希望这能帮到你!
祝好
Alyssa

不得不说,Axure官方客服的态度真心好,很有耐心,答复也很及时,效率很高,赞一个!
对于上面提供的这些方法,或许未能完全解决问题本身。比如“在OnMouseEnter的动作动画未完成之前,不要触发OnMouseOut事件”,我们当然无法限制用户的鼠标移动。至于“在OnMouseOut事件上也添加一个动画,或者把OnMouseOut和OnMouseEnter的动画都去掉”,这样跟我想要的最终效果也有出入。
不管怎样,通过这次的沟通交流,收获还是很大的,感谢信是必须有滴~





 
翻译一下:

非常感谢!你的建议很有帮助!事实上,我是模仿阿里云的一个页面上的一个元件来做这个原型的。这是该页面的链接: https://www.aliyun.com/solution/app  当我用同样的方法去测试这个元件时,它的表现是正常的。所以我认为这个问题在技术上是可以被修复的,不需要在OnMouseOut事件上作出修改。
感谢你的帮助!

  查看全部
我在之前分享阿里云高保真原型制作心得时,提到过制作图片缩放效果时碰到过的一个疑似BUG,原文如下:


这本是一个简单的交互动画,鼠标进入时添加蓝色蒙层并线性放大背景图,鼠标离开时恢复原状。做出来后乍看是没问题的,可是当鼠标快速地在这几个图片之间移动(也就是背景图快速地放大缩小)时,背景图会出现错位,并且偏差越来越大。


传送门:《在Axure原型中实现收起/展开区块并拉起/推开下文效果》
 
为了验证我的怀疑,我向Axure官方用户支持中心反馈了此问题。以下是邮件记录:

反馈1.png

 
原型展示地址:http://qk4sxj.axshare.com 
原型文件下载地址:http://www.pmdaniu.com/rp/download/6038
 
以下是Axure官方答复的邮件记录:

答复1.png

 
翻译如下:


感谢反馈!看起来你碰的问题是,当快速地触发一个带有动画的set size动作时,会引起该元件在页面上轻微的移动。我注意到你正在使用Axure RP 8的一个较旧的构建版本(build 3312)。最新构建版本(3323)包含了许多有关set size动作的BUG修复,其中似乎有与你正在面临的问题相似的BUG。为了验证目前的问题在最新构建版本中是否已经修复,请更新到构建版本3323然后尝试再次上传并且在Axure Share上测试你的原型。
你可以更新到以下最新构建版本:
http://www.axure.com/update
希望这能帮到你!如果还需要其他帮助,请告知我们。
祝好
Alyssa


于是我在另一台电脑上安装了最新构建版本3323,用同样的方法再次制作并测试了原型,甚至简化了原型,然而发现问题依然存在。于是再次与Axure官方客服沟通:

反馈2.png


新版原型展示地址:http://la5tw0.axshare.com 
新版原型文件下载地址:http://www.pmdaniu.com/rp/download/6362​ 
 
Axure官方答复如下:

答复2.png


翻译如下:


感谢跟进你的文件!我看了一下这个交互,看起来你的OnMouseEnter事件在Set Size动作上有一个200ms的动画,但是在OnMouseOut事件上没有动画。这样的结果是,当你过快地缩放元件时,此图片元件没能停留在正确的位置上。为了保证图片正常的缩放并且停留在正确的位置上,你应当保证在OnMouseEnter的动作动画未完成之前,不要触发OnMouseOut事件。
又或者,你可以在OnMouseOut事件上也添加一个动画,或者把OnMouseOut和OnMouseEnter的动画都去掉。这些方法似乎都可以避免元件在缩放结束时移动到不恰当的位置上。
希望这能帮到你!
祝好
Alyssa


不得不说,Axure官方客服的态度真心好,很有耐心,答复也很及时,效率很高,赞一个!
对于上面提供的这些方法,或许未能完全解决问题本身。比如“在OnMouseEnter的动作动画未完成之前,不要触发OnMouseOut事件”,我们当然无法限制用户的鼠标移动。至于“在OnMouseOut事件上也添加一个动画,或者把OnMouseOut和OnMouseEnter的动画都去掉”,这样跟我想要的最终效果也有出入。
不管怎样,通过这次的沟通交流,收获还是很大的,感谢信是必须有滴~

反馈3.png

 
翻译一下:


非常感谢!你的建议很有帮助!事实上,我是模仿阿里云的一个页面上的一个元件来做这个原型的。这是该页面的链接: https://www.aliyun.com/solution/app  当我用同样的方法去测试这个元件时,它的表现是正常的。所以我认为这个问题在技术上是可以被修复的,不需要在OnMouseOut事件上作出修改。
感谢你的帮助!


 

关于黄老师回复的“图片上传"2015与2016两个回答前后冲突,到底是能实现还是不能呢?

Axure问答qodomo 回复了问题 • 2 人关注 • 6 个回复 • 248 次浏览 • 2017-02-16 09:15 • 来自相关话题

Axure8子页面预览无显示

Axure问答黄老师 回复了问题 • 2 人关注 • 1 个回复 • 198 次浏览 • 2017-02-16 08:48 • 来自相关话题

乐居装修app,高保真原型展示,从前期的UI界面设计到最后的高保真原型都是我个人完成的

Axure问答各yi 发表了文章 • 2 个评论 • 462 次浏览 • 2017-02-15 14:04 • 来自相关话题

http://5ehyjj.axshare.com

小楼老师 ,您好 请问用AXSURE能做软件设计的原型图吗?

Axure问答黄老师 回复了问题 • 2 人关注 • 1 个回复 • 242 次浏览 • 2017-02-14 17:32 • 来自相关话题

用axure做好的项目连数据库

Axure问答黑胡子 回复了问题 • 2 人关注 • 1 个回复 • 247 次浏览 • 2017-02-14 11:07 • 来自相关话题

Axure 8 Mac版无法汉化,注册码和账号都是错误的

Axure问答黄老师 回复了问题 • 2 人关注 • 1 个回复 • 262 次浏览 • 2017-02-10 17:31 • 来自相关话题

如何让一个按钮在网页上 一直上下移动50像素

Axure问答黑胡子 回复了问题 • 2 人关注 • 1 个回复 • 175 次浏览 • 2017-02-09 17:26 • 来自相关话题

使用Axure制作跑马灯效果

Axure问答黑胡子 回复了问题 • 2 人关注 • 1 个回复 • 246 次浏览 • 2017-02-09 14:32 • 来自相关话题

求助,mac版汉化不成功

Axure问答黄老师 回复了问题 • 2 人关注 • 1 个回复 • 213 次浏览 • 2017-02-07 16:35 • 来自相关话题

下载的部件拖到设计区域变成小方块

Axure问答黄老师 回复了问题 • 2 人关注 • 1 个回复 • 200 次浏览 • 2017-02-07 16:33 • 来自相关话题

在Axure原型中实现收起/展开区块并拉起/推开下文效果

Axure问答徐松 发表了文章 • 2 个评论 • 795 次浏览 • 2017-02-05 16:39 • 来自相关话题

继续分享制作阿里云网页高保真原型的心得体会,虽然只是一个单页,但其中包含了丰富的交互效果,对于了解和熟悉Axure的功能和操作还是很有帮助的。
上一篇文章链接:《仿阿里云移动APP解决方案网页高保真原型》
原型展示网址一:http://30hfp0.axshare.com/#c=2 
原型展示网址二:http://www.pmdaniu.com/rp/view?id=VXZUMlY7V2ENOlRwUm4​ 
原页面网址:https://www.aliyun.com/solution/app
 
    首先感谢一下上次分享完之后黄老师的点评和帮助,让我了解了页面的居中设置和其他页面设置,感谢!
    这次先吐槽一下Axure的又一个bug,出现在网站热门业务场景模块。这本是一个简单的交互动画,鼠标进入时添加蓝色蒙层并线性放大背景图,鼠标离开时恢复原状。做出来后乍看是没问题的,可是当鼠标快速地在这几个图片之间移动(也就是背景图快速地放大缩小)时,背景图会出现错位,并且偏差越来越大(如下图)。不知道是我的做法哪里出了问题,还是真的是Axure的bug,请大神指点。





 
    这次重点说一下成功架构实践模块,其中包含了一个收起/展开区块并拉起/推开下文的效果。可能有人会说,这还不简单吗,用显示/隐藏的滑动效果+推动元件不就行了。要注意,这里的收起/展开并没有滑动效果,而是元件高度的缩小/放大效果。可能又有人会说了,那也简单啊,用设置尺寸这个动作不就行了。可是不要忘了,设置尺寸是不能拉起/推开下文的。所以,我的方法是,设置一个透明的滑动推拉层。
    在需要缩放的区域的顶层设置一个透明的矩形,底边与缩放区重合,宽度随意,高度比缩放区域小几像素(后面会解释),初始状态为隐藏,否则会影响缩放区的正常交互。当收起缩放区的动作被触发时,推拉层变为显示状态(因为是透明的所以其实什么也看不到),然后用向上滑动的方式开始隐藏,同时拉起下文。由于下文处于缩放区的上层,所以被拉起的过程中会遮挡缩放层,看上去像是缩放层自己缩小了,其实缩放层的尺寸并没有改变,只是添加了一个渐变隐藏的动画。
    当展开缩放区的动作被触发时,推拉层自然用向下滑动的方式显示出来,同时推开下文。与此同时缩放区也渐变显示。这里就要解释一下为什么开始的时候要把推拉层的高度设置成比缩放层小几像素了。因为推拉层推开下文时,会推开Y坐标大于或等于它自己的Y坐标的所有元件。如果推拉层的Y坐标与缩放区的Y坐标一样,就会跟下文一样被推开。所以要避免这种情况,只要让推拉层的Y坐标比缩放区的Y坐标大一点点,让缩放区处于推拉层的“上方”就行了。
    这就是我用的小技巧,不知道各位大神有没有更好的办法来实现这个效果。有人可能会说,直接把下文所有内容线性移动来遮挡缩放区不就行了。呃……如果下文的内容不多,或许可以的吧。对这个问题感兴趣的朋友可以分享出来交流一下,共勉,谢谢! 查看全部
继续分享制作阿里云网页高保真原型的心得体会,虽然只是一个单页,但其中包含了丰富的交互效果,对于了解和熟悉Axure的功能和操作还是很有帮助的。
上一篇文章链接:《仿阿里云移动APP解决方案网页高保真原型》
原型展示网址一:http://30hfp0.axshare.com/#c=2 
原型展示网址二:http://www.pmdaniu.com/rp/view?id=VXZUMlY7V2ENOlRwUm4​ 
原页面网址:https://www.aliyun.com/solution/app
 
    首先感谢一下上次分享完之后黄老师的点评和帮助,让我了解了页面的居中设置和其他页面设置,感谢!
    这次先吐槽一下Axure的又一个bug,出现在网站热门业务场景模块。这本是一个简单的交互动画,鼠标进入时添加蓝色蒙层并线性放大背景图,鼠标离开时恢复原状。做出来后乍看是没问题的,可是当鼠标快速地在这几个图片之间移动(也就是背景图快速地放大缩小)时,背景图会出现错位,并且偏差越来越大(如下图)。不知道是我的做法哪里出了问题,还是真的是Axure的bug,请大神指点。

业务场景-有问题.JPG

 
    这次重点说一下成功架构实践模块,其中包含了一个收起/展开区块并拉起/推开下文的效果。可能有人会说,这还不简单吗,用显示/隐藏的滑动效果+推动元件不就行了。要注意,这里的收起/展开并没有滑动效果,而是元件高度的缩小/放大效果。可能又有人会说了,那也简单啊,用设置尺寸这个动作不就行了。可是不要忘了,设置尺寸是不能拉起/推开下文的。所以,我的方法是,设置一个透明的滑动推拉层。
    在需要缩放的区域的顶层设置一个透明的矩形,底边与缩放区重合,宽度随意,高度比缩放区域小几像素(后面会解释),初始状态为隐藏,否则会影响缩放区的正常交互。当收起缩放区的动作被触发时,推拉层变为显示状态(因为是透明的所以其实什么也看不到),然后用向上滑动的方式开始隐藏,同时拉起下文。由于下文处于缩放区的上层,所以被拉起的过程中会遮挡缩放层,看上去像是缩放层自己缩小了,其实缩放层的尺寸并没有改变,只是添加了一个渐变隐藏的动画。
    当展开缩放区的动作被触发时,推拉层自然用向下滑动的方式显示出来,同时推开下文。与此同时缩放区也渐变显示。这里就要解释一下为什么开始的时候要把推拉层的高度设置成比缩放层小几像素了。因为推拉层推开下文时,会推开Y坐标大于或等于它自己的Y坐标的所有元件。如果推拉层的Y坐标与缩放区的Y坐标一样,就会跟下文一样被推开。所以要避免这种情况,只要让推拉层的Y坐标比缩放区的Y坐标大一点点,让缩放区处于推拉层的“上方”就行了。
    这就是我用的小技巧,不知道各位大神有没有更好的办法来实现这个效果。有人可能会说,直接把下文所有内容线性移动来遮挡缩放区不就行了。呃……如果下文的内容不多,或许可以的吧。对这个问题感兴趣的朋友可以分享出来交流一下,共勉,谢谢!

仿阿里云移动APP解决方案网页高保真原型

Axure问答徐松 发表了文章 • 4 个评论 • 770 次浏览 • 2017-02-04 22:55 • 来自相关话题

Axure新手,第一次分享作品,请大家多多指教。
原型展示网址一:http://30hfp0.axshare.com/#c=2​ 
原型展示网址二:http://www.pmdaniu.com/rp/view?id=VXZUMlY7V2ENOlRwUm4​
原页面网址:https://www.aliyun.com/solution/app
 
  我本来是做开发的,刚转行做PM不久,接触Axure时间也不长,这次的作品只为熟悉一下Axure的功能操作。
  由于对网页前端开发有所了解,所以制作原型的过程中免不了跟前端开发做了一番比较。总体感觉Axure还是很强大的,可以比较轻松地实现一些复杂细腻的动画,反倒是一些在前端开发中很简单很常见的效果,在Axure这边实现起来相对复杂一点。比如模块居中(不是文字居中),在前端开发中一般只需要把左右margin定义为auto(自动)就行了,而在Axure中需要用到JS脚本来实现(也就是动作);又比如在交互时改变字体和相应区块的背景色,在前端开发中只要简单定义几行CSS就可以了,在Axure中则需要隐藏或者显示相应的DIV来实现(也就是动态面板)。不知道是不是我没有理解或者发现Axure的相关功能,如果是的话,请各位不吝赐教。
  Axure确实可以比较轻松地实现一些复杂细腻的动画,但是一旦复杂动画多了,页面就不太流畅了。毕竟是一款原型设计工具,在原型页面性能上不能苛求太多吧。另外还发现了一些不能理解的问题,权且说是软件的bug吧。比如顶部导航栏的高亮滑动条,当初始长度设置为20以上时,是正常的;但是当设置为20以下时,显示出来的时候左右两端边缘非常模糊,如下图所示。不知道有没有大神可以解释一下。




  还有一点想跟大家讨论的是页面架构,也许有朋友会问:怎么做个网页原型还有架构?其实架构对于开发来说是很常见也很重要的,我认为对于原型也一样。比如我们常常会看到这样的效果,网页的背景的满屏(填满窗口)的,但是整体内容相对于窗口是居中的。那么在原型当中怎么实现这个效果呢?我的方案是用一个动态面板作为居中容器,定义好固定宽度和加载时居中(需要根据容器宽度和窗口宽度算出容器的左边距),然后把需要居中的内容全部放到这个动态面板的一个state里面;而满屏效果的背景则放到容器外面,也是用动态面板来做,利用动态面板100% Wide和Style属性(这里引出另一个问题:Axure的Window.width跟100% Wide是不一样的,又是另一个bug?)。也许有人会问,干嘛这么麻烦,原型嘛,简单点,画一下中间的内容区域不就行了?如果背景是纯色的话,这样做是可以的。可如果背景是图片的话,前端开发就会问,当窗口宽度比中间内容区大怎么办?背景图要放大吗?放大要放多大?不放大的话,那窗口宽度比背景图还要大怎么办?这些问题难道要用文字说明吗?如果是这样的话,恐怕只能算个半吊子原型了。
  制定一个内容居中、背景满屏的方案,就属于页面架构的一部分,甚至可以算作一个简单架构的全部。也许制定这个方案的时候比较费事,可是一旦定好了,往后就可以照着这个方案去做,不用重复考虑了,既省事,效果又好,就跟工厂开模具一样。
  这里附上原型头部模块的rp文件,有兴趣的朋友可以下载查看,希望多提意见、一起讨论、共同进步,与君共勉,谢谢! 查看全部
Axure新手,第一次分享作品,请大家多多指教。
原型展示网址一:http://30hfp0.axshare.com/#c=2​ 
原型展示网址二:http://www.pmdaniu.com/rp/view?id=VXZUMlY7V2ENOlRwUm4​
原页面网址:https://www.aliyun.com/solution/app
 
  我本来是做开发的,刚转行做PM不久,接触Axure时间也不长,这次的作品只为熟悉一下Axure的功能操作。
  由于对网页前端开发有所了解,所以制作原型的过程中免不了跟前端开发做了一番比较。总体感觉Axure还是很强大的,可以比较轻松地实现一些复杂细腻的动画,反倒是一些在前端开发中很简单很常见的效果,在Axure这边实现起来相对复杂一点。比如模块居中(不是文字居中),在前端开发中一般只需要把左右margin定义为auto(自动)就行了,而在Axure中需要用到JS脚本来实现(也就是动作);又比如在交互时改变字体和相应区块的背景色,在前端开发中只要简单定义几行CSS就可以了,在Axure中则需要隐藏或者显示相应的DIV来实现(也就是动态面板)。不知道是不是我没有理解或者发现Axure的相关功能,如果是的话,请各位不吝赐教。
  Axure确实可以比较轻松地实现一些复杂细腻的动画,但是一旦复杂动画多了,页面就不太流畅了。毕竟是一款原型设计工具,在原型页面性能上不能苛求太多吧。另外还发现了一些不能理解的问题,权且说是软件的bug吧。比如顶部导航栏的高亮滑动条,当初始长度设置为20以上时,是正常的;但是当设置为20以下时,显示出来的时候左右两端边缘非常模糊,如下图所示。不知道有没有大神可以解释一下。
顶部滑动条-有问题.JPG

  还有一点想跟大家讨论的是页面架构,也许有朋友会问:怎么做个网页原型还有架构?其实架构对于开发来说是很常见也很重要的,我认为对于原型也一样。比如我们常常会看到这样的效果,网页的背景的满屏(填满窗口)的,但是整体内容相对于窗口是居中的。那么在原型当中怎么实现这个效果呢?我的方案是用一个动态面板作为居中容器,定义好固定宽度和加载时居中(需要根据容器宽度和窗口宽度算出容器的左边距),然后把需要居中的内容全部放到这个动态面板的一个state里面;而满屏效果的背景则放到容器外面,也是用动态面板来做,利用动态面板100% Wide和Style属性(这里引出另一个问题:Axure的Window.width跟100% Wide是不一样的,又是另一个bug?)。也许有人会问,干嘛这么麻烦,原型嘛,简单点,画一下中间的内容区域不就行了?如果背景是纯色的话,这样做是可以的。可如果背景是图片的话,前端开发就会问,当窗口宽度比中间内容区大怎么办?背景图要放大吗?放大要放多大?不放大的话,那窗口宽度比背景图还要大怎么办?这些问题难道要用文字说明吗?如果是这样的话,恐怕只能算个半吊子原型了。
  制定一个内容居中、背景满屏的方案,就属于页面架构的一部分,甚至可以算作一个简单架构的全部。也许制定这个方案的时候比较费事,可是一旦定好了,往后就可以照着这个方案去做,不用重复考虑了,既省事,效果又好,就跟工厂开模具一样。
  这里附上原型头部模块的rp文件,有兴趣的朋友可以下载查看,希望多提意见、一起讨论、共同进步,与君共勉,谢谢!

axure 8.0.0.3293 变量元件不能选择 (下拉列表框)和(列表框)

Axure问答小楼老师 回复了问题 • 2 人关注 • 1 个回复 • 221 次浏览 • 2017-02-03 21:31 • 来自相关话题