原型分享

原型分享

一个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

 

【自制】多级抽屉 高维护性 高移植性 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原型中实现收起/展开区块并拉起/推开下文效果

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文件,有兴趣的朋友可以下载查看,希望多提意见、一起讨论、共同进步,与君共勉,谢谢!

雅虎天气(APP)案例 Axure原型分享

Axure问答 回复了问题 • 4 人关注 • 3 个回复 • 1817 次浏览 • 2016-12-02 10:29 • 来自相关话题

交互原型设计分享 v1.0 (含海量设计资源和Axure实例)

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

上周在公司内部做了一次关于交互原型设计主题的分享,为了准备这次分享花了一周多时间整理并制作了一个分享演示。这个分享演示共分为三个部分,一是关于原型设计的基础知识和常用工具介绍,二是关于目前最主流的设计工具Axure的介绍,三是一些设计资源、工具、文档的整理推荐。另外,还包含许多Axure的交互实例。这些内容可以算是我接触原型设计6年时间以来的一次全面的总结和梳理。

在上次公司内部的分享中一是由于时间有限,二是由于部分参与分享的同事未接触过原型设计或未使用过Axure这款软件,个人觉得很多有价值的内容没办法展开进行介绍。在原型设计方面个人觉得Axure是一款神奇的工具,除了工作中必要的使用之外,曾经还花过大量的时间去钻研这款工具。另外,目前本人正在进行原创的Axure组件库和模板的设计,以国外的收费精品组件库为标准。

有关于原型设计和Axure方面的更多问题,欢迎与我进一步的交流(本人QQ:5698401)。另外欢迎加入Axure的交流和分享群:60750209,本人将不定期分享相关干货。

以下是部分演示截图,完整分享演示地址:http://u.pmdaniu.com/dGK5 (需要使用电脑端浏览器访问) 查看全部
上周在公司内部做了一次关于交互原型设计主题的分享,为了准备这次分享花了一周多时间整理并制作了一个分享演示。这个分享演示共分为三个部分,一是关于原型设计的基础知识和常用工具介绍,二是关于目前最主流的设计工具Axure的介绍,三是一些设计资源、工具、文档的整理推荐。另外,还包含许多Axure的交互实例。这些内容可以算是我接触原型设计6年时间以来的一次全面的总结和梳理。

在上次公司内部的分享中一是由于时间有限,二是由于部分参与分享的同事未接触过原型设计或未使用过Axure这款软件,个人觉得很多有价值的内容没办法展开进行介绍。在原型设计方面个人觉得Axure是一款神奇的工具,除了工作中必要的使用之外,曾经还花过大量的时间去钻研这款工具。另外,目前本人正在进行原创的Axure组件库和模板的设计,以国外的收费精品组件库为标准。

有关于原型设计和Axure方面的更多问题,欢迎与我进一步的交流(本人QQ:5698401)。另外欢迎加入Axure的交流和分享群:60750209,本人将不定期分享相关干货。

以下是部分演示截图,完整分享演示地址:http://u.pmdaniu.com/dGK5 (需要使用电脑端浏览器访问)

2016-11-01_144603.png


2016-11-01_144933.png


2016-11-01_145311.png


2016-11-01_145033.png


2016-11-01_145046.png

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

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

预览地址:
http://fgu2qi.axshare.cn/
下载地址:见附件






源文件下载地址↓
 
预览地址:
http://fgu2qi.axshare.cn/
下载地址:见附件


设计规范.png

源文件下载地址↓
 

Axure手机直播产品原型Demo分享!

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

用户端






Demo预览地址:
http://yggsmz.axshare.cn/live.html

主播端






Demo预览地址:
http://pwr86g.axshare.cn/live.html 查看全部
用户端

用户端.PNG


Demo预览地址:
http://yggsmz.axshare.cn/live.html

主播端

主播端.PNG


Demo预览地址:
http://pwr86g.axshare.cn/live.html

使用Axure8完成的音乐APP播放界面交互作品

Axure问答windir 发表了文章 • 5 个评论 • 1152 次浏览 • 2016-08-31 11:44 • 来自相关话题

使用Axure8完成了一个交互原型的练手作品,网易云音乐移动端的播放界面。制作过程颇有挑战,但也有很多探索乐趣。原本以为其中的一些交互细节用Axure是无法实现的,但经过摸索最终都做出来了,几乎是100%重现了全部的细节。唯一的两个小瑕疵:切换曲目时唱片的角度有一些不一致,还有播放计时的准确率不高。






重点操作交互:
音乐播放和暂停
曲目切换(多种切换方式)
计时及进度
进度拖动
喜欢及取消
播放控制(影响曲目播放顺序)
播放列表

演示地址:
http://p3y6of.axshare.com/musicplayer.html
  查看全部
使用Axure8完成了一个交互原型的练手作品,网易云音乐移动端的播放界面。制作过程颇有挑战,但也有很多探索乐趣。原本以为其中的一些交互细节用Axure是无法实现的,但经过摸索最终都做出来了,几乎是100%重现了全部的细节。唯一的两个小瑕疵:切换曲目时唱片的角度有一些不一致,还有播放计时的准确率不高。

musicplayer.png


重点操作交互:
音乐播放和暂停
曲目切换(多种切换方式)
计时及进度
进度拖动
喜欢及取消
播放控制(影响曲目播放顺序)
播放列表

演示地址:
http://p3y6of.axshare.com/musicplayer.html
 

一个交互页面,用iphone6体验更加!

Axure问答黑胡子 发表了文章 • 1 个评论 • 2437 次浏览 • 2016-06-07 19:59 • 来自相关话题

预览地址:http://q30cyr.axshare.cn/share_cover.html
原型地址:


Share-Cover.rp







 
预览地址:http://q30cyr.axshare.cn/share_cover.html
原型地址:



IMG_2077.PNG

 

【高保真社交APP】鱼塘---Skype风格

Axure问答黑胡子 发表了文章 • 6 个评论 • 2759 次浏览 • 2016-05-19 21:14 • 来自相关话题

鱼塘


APP设计图:http://www.zcool.com.cn/work/ZMTU1MzA0NDQ=.html
原型预览:http://li3nly.axshare.cn/
原型下载:http://pan.baidu.com/s/1hr6Bze8
禁止商用,谢谢. 查看全部
鱼塘


APP设计图:http://www.zcool.com.cn/work/ZMTU1MzA0NDQ=.html
原型预览:http://li3nly.axshare.cn/
原型下载:http://pan.baidu.com/s/1hr6Bze8
禁止商用,谢谢.

Camdy:一个包含了app所有操作逻辑,80%交互的原型!

Axure问答黑胡子 发表了文章 • 3 个评论 • 3429 次浏览 • 2016-05-18 10:42 • 来自相关话题

目前只提供预览:http://h7cpv5.axshare.cn/
由于所有界面都做在了一个页面里了,所以第一次加载会比较卡。

原型制作难点:
1.下拉刷新的效果;
2.返回逻辑;
3.贴纸拖动;
4.拍摄,编辑,上传逻辑;
5.个人中心上滑nav栏渐变。
其他效果自己去发现吧。

APP预览:http://heihuzi830.lofter.com/post/1dfdcbab_addb66d




  查看全部
目前只提供预览:http://h7cpv5.axshare.cn/
由于所有界面都做在了一个页面里了,所以第一次加载会比较卡。

原型制作难点:
1.下拉刷新的效果;
2.返回逻辑;
3.贴纸拖动;
4.拍摄,编辑,上传逻辑;
5.个人中心上滑nav栏渐变。
其他效果自己去发现吧。

APP预览:http://heihuzi830.lofter.com/post/1dfdcbab_addb66d
camdy_v1.0_cover_站酷_.png

 

游戏资讯APP原型分享(未完成)

Axure问答黑胡子 发表了文章 • 0 个评论 • 1165 次浏览 • 2016-05-16 23:12 • 来自相关话题

主要研究app风格
原型预览:http://kj4jhr.axshare.cn/#p=gameplus





 
主要研究app风格
原型预览:http://kj4jhr.axshare.cn/#p=gameplus

KW}BOSU)JR6VO6]Q)3GLV6D.png

 

之前做的一个视频app的原型(包含交互),分享一下。

Axure问答黑胡子 发表了文章 • 3 个评论 • 1664 次浏览 • 2016-05-11 20:55 • 来自相关话题

之前做的一个视频app的原型,分享一下。
演示地址:http://40gv5s.axshare.cn/#g=1&p=玖果视频  (原来的地址:http://hw8t30.axshare.com/)
原型地址:http://pan.baidu.com/s/1eR1nk5c
APP设计展示:http://heihuzi830.lofter.com/post/1dfdcbab_ac0dd2d
请不要作为商业用途使用,谢谢。 查看全部
之前做的一个视频app的原型,分享一下。
演示地址:http://40gv5s.axshare.cn/#g=1&p=玖果视频  (原来的地址:http://hw8t30.axshare.com/
原型地址:http://pan.baidu.com/s/1eR1nk5c
APP设计展示:http://heihuzi830.lofter.com/post/1dfdcbab_ac0dd2d
请不要作为商业用途使用,谢谢。

Axure模板库(11)-个人页面

Axure问答jituoshiti 发表了文章 • 1 个评论 • 2154 次浏览 • 2016-05-11 15:23 • 来自相关话题

分享一套Axure的模板,以后做原型的时候可以直接复制粘贴了。源文件的下载地址在文章最后。

预览地址:http://l8vc90.axshare.cn/ (社区管理员提供)

今天介绍4个“个人”页面。模板里还包括之前发布过的74个手机和PC上各种常用页面,好多按钮和图标,下面是图片预览。

1、个人页面主要展示个人信息,比如社交app需要展示个人的关注信息、图片、文章、签到等等。






2、工具型app的个人页面可以展示个人的使用状态,或者使用过程中积累的数据。







3、个人页面是“信息”的另一种组织方式。主页面展示最新的、相关性高的信息。个人页面过滤信息,只把某个人的信息展示出来。







4、工具app的个人页面更强调与个人相关的各种功能。








→→→源文件在这里下载(包括Axure 8.0的安装文件和汉化包)
http://pan.baidu.com/s/1c16cyQ0

想看更多的模板、案例可以关注我的公众号——Axure大师。

如果这篇文章帮助了你,记得打赏作者,支持作者发布更多模板~ 查看全部
分享一套Axure的模板,以后做原型的时候可以直接复制粘贴了。源文件的下载地址在文章最后。

预览地址:http://l8vc90.axshare.cn/ (社区管理员提供)

今天介绍4个“个人”页面。模板里还包括之前发布过的74个手机和PC上各种常用页面,好多按钮和图标,下面是图片预览。

1、个人页面主要展示个人信息,比如社交app需要展示个人的关注信息、图片、文章、签到等等。

1.png


2、工具型app的个人页面可以展示个人的使用状态,或者使用过程中积累的数据。

2.png



3、个人页面是“信息”的另一种组织方式。主页面展示最新的、相关性高的信息。个人页面过滤信息,只把某个人的信息展示出来。

3.png



4、工具app的个人页面更强调与个人相关的各种功能。

4.png




→→→源文件在这里下载(包括Axure 8.0的安装文件和汉化包)
http://pan.baidu.com/s/1c16cyQ0

想看更多的模板、案例可以关注我的公众号——Axure大师。

如果这篇文章帮助了你,记得打赏作者,支持作者发布更多模板~

原型分享:什么值得买登录输入动态效果模拟 附源文件

Axure问答黄老师 发表了文章 • 3 个评论 • 1504 次浏览 • 2016-05-07 15:38 • 来自相关话题

 先看效果演示:http://7rnohr.axshare.cn/#g=1&p=index
主要是在输入框为空的条件下,输入框获取焦点和失去焦点时的一个动态效果。
输入框和文字的颜色变化直接用选中状态切换实现。
难点是单击文字也要能实现焦点获取,并且失去焦点后要归为原始状态。注意切换隐藏和显示元件。
大家可以先自己做一下,做完了再下载源文件对比。 查看全部

shurukuang.gif

 先看效果演示:http://7rnohr.axshare.cn/#g=1&p=index
主要是在输入框为空的条件下,输入框获取焦点和失去焦点时的一个动态效果。
输入框和文字的颜色变化直接用选中状态切换实现。
难点是单击文字也要能实现焦点获取,并且失去焦点后要归为原始状态。注意切换隐藏和显示元件。
大家可以先自己做一下,做完了再下载源文件对比。

axure 8.0 动态特效元件库分享 交互设计

Axure问答pancheng 发表了文章 • 8 个评论 • 2353 次浏览 • 2016-04-05 18:04 • 来自相关话题

认准品牌

六脉神掌







尽量给每一个交互加上效果,尽量模拟真实的交互

无图无真相,我们先看效果图

1 这是还原Android Material Design风格的一个底部菜单效果








2 这个是模拟欢迎页面








3 模拟自动轮播的广告页面








4 这里是发送短信验证码








5 模拟选择图片附件上传







6 开关按钮








7 购物车数字输入框 收藏框 打分框 单选多选








8 进度条大合集








9 输入框提示语








10 左侧滑动菜单








11 左侧滑动菜单 盖住中间部分








12 右侧菜单








13 右下角浮动菜单







14 上刷新 下拉加载更多








15 抽奖转盘








 


 


除了以上以外还有一些列便捷组件。

作者:潘老师(QQ/微信:55607999),武汉产品经理,6年移动开发,2年产品工作经验,独立负责过项目无数。

以上如需要教程,请留言。

链接: http://pan.baidu.com/s/1gfm87p5 密码: mqym

承接各种UE动效设计 移动应用开发

认准六脉神掌






  查看全部
认准品牌

六脉神掌


logo1_看图王1.png


尽量给每一个交互加上效果,尽量模拟真实的交互

无图无真相,我们先看效果图

1 这是还原Android Material Design风格的一个底部菜单效果


效果1.gif



2 这个是模拟欢迎页面


效果2.gif



3 模拟自动轮播的广告页面


效果3.gif



4 这里是发送短信验证码


效果4.gif



5 模拟选择图片附件上传

效果5.gif



6 开关按钮


效果6.gif



7 购物车数字输入框 收藏框 打分框 单选多选


效果7.gif



8 进度条大合集


效果8.gif



9 输入框提示语


效果9.gif



10 左侧滑动菜单


效果10.gif



11 左侧滑动菜单 盖住中间部分


效果11.gif



12 右侧菜单


效果12.gif



13 右下角浮动菜单


效果13.gif


14 上刷新 下拉加载更多


效果14.gif



15 抽奖转盘


效果15.gif



 


 


除了以上以外还有一些列便捷组件。

作者:潘老师(QQ/微信:55607999),武汉产品经理,6年移动开发,2年产品工作经验,独立负责过项目无数。

以上如需要教程,请留言。

链接: http://pan.baidu.com/s/1gfm87p5 密码: mqym

承接各种UE动效设计 移动应用开发

认准六脉神掌


logo1_看图王1.png

 

Axure RP 7.0 美女浏览原型,内含:多层动态面板嵌套,拖动时函数设定边界,组应用等

Axure问答zilong 发表了文章 • 2 个评论 • 1650 次浏览 • 2015-12-28 16:32 • 来自相关话题

先上一张原型主界面的图片,原型在文章末尾,自己去下载




本案例是以浏览图片为范本的原型设计(仅供娱乐与学习),内部包含多层动态面板,函数应用,应该会对初学者有一点帮助,不过话说在前面,学习Axure还是要循序渐进,先从认识部件,认识函数开始(函数要学好,很重要滴),基础打牢后再继续打磨会事半功倍,不要上来就直接copy人家的函数与动作,要知道实现思路,知道“鸡”是怎么来滴。
下面开始一个一个开始介绍实现方法:
第一部分:主界面的美女显示面板
           项目内容动态面板部件结构




在这里需要再看一下主界面显示的情况




这里我们设置想让图片可以上下拖动,显示其他的未显示出来的内容,注意:这里要设定上下滑动的边界;
并且在相应的图片上进行左右滑动时可以触发动态面板中图片的切换;
在鼠标单击时弹出“看图模式”,进行图片的浏览,在这个界面中必须点击退出按钮才能退出到主界面。
实现思路:首先动态面板要能拖动(设定沿y轴拖动)——设定上下滑动边界条件与动作——设定光标接触部件条件——在相应的接触区域实现左右滑动切换图片的动作——单击相应的图片时候,显示隐藏的对应动态面板并到顶层——点击退出按钮回到主界面
好了,看一下函数的截图:
主页动态面板动作设定:





1,这里的top与bottom我说一下边界设定
top函数:是指部件的顶部Y坐标,这里是不想让动态面板一直向下拖动使主界面中出现无内容区域,所以要设定动态面板沿Y轴拖动时top不能大于0,如果大于0的话我们就设定他的位置回到绝对位置(0,0)




bottom函数:部件的底部,这里与top对应的也是不想让部件的底部一直向上滑出现无内容区域,所以要设定底部bottom的y值不能小于动态面板的区域高度,本案例是525(根据个人设定不同),如果小于525那么就移动到相对位置到(0,[[525-LVAR1.bottom-1]]),(这里再解释一下相对位置:就是以目标位置为基准,是需要正向移动还是反向移动,本案例就是正向移动,所以用大数-小数:525-LVAR1.bottom,说道这个程度如果还不理解我也没办法了,慢慢想吧)









这里有一个点要看一下




在嵌套内部动态面板时为了使显示内容为一个整体,并方便改动内部内容时而外面的函数不受影响,我将主页动态面板的显示内容区域用一个动态面板来显示的,并且将动态面板设定为“调整大小以适合内容”

2,这次再看光标接触部件时左右滑动切换图片的条件





3,鼠标单击进入看图模式
这里的动作是设定在pageA与pageB上的,然后触发相应的动态面板“看图A与看图B”
pageA动作设定




看图A的界面




看图A的动作




返回主界面





第二部分:排序位置
这里是一个矩形部件与动态面板的互动,矩形的显示文字就是动态面板的选中文字(这里我用的toString函数),实现选择的效果。
并让动态面板再次展开时,现在显示的文字与对应的动态面板中的部件处于选中状态,这里又涉及到条件判断,大家看下案例吧。




排序面板,一个例子:智能排序动作配置





第三部分:筛选按钮




看一下筛选动态面板的内部




这里用到了一个小东西,就是分组,这样能够实现每个组中只有一个能够处于选中状态,不会出现复选。





原型百度云盘:http://pan.baidu.com/s/1bovpVI3
在线原型体验:http://9al1jc.axshare.com
建议下载体验,Axure官网在线响应比较慢,下载下来还可以直接看原型的函数设置

今天的案例分享就到这里了,其实是一个很简单的案例,用到的东西并不多,但是还是比较有助于初学者认识一下Axure的一些函数与条件的综合应用的,对于学习Axure我还是文章开头说的话(没注意看的再看一遍),把各个部件兄弟混熟,各种函数会用,各个界面的多种功能认亲完成,然后你的Axure之路才真正开始。

注:本人也在不断学习进步,如有交流可以加我微信:fzl690894512,欢迎打扰。(本人不相亲 O__O "…但是并不拒绝妹子!)

  查看全部
先上一张原型主界面的图片,原型在文章末尾,自己去下载
项目主界面.jpg

本案例是以浏览图片为范本的原型设计(仅供娱乐与学习),内部包含多层动态面板,函数应用,应该会对初学者有一点帮助,不过话说在前面,学习Axure还是要循序渐进,先从认识部件,认识函数开始(函数要学好,很重要滴),基础打牢后再继续打磨会事半功倍,不要上来就直接copy人家的函数与动作,要知道实现思路,知道“鸡”是怎么来滴。
下面开始一个一个开始介绍实现方法:
第一部分:主界面的美女显示面板
           项目内容动态面板部件结构
项目内容显示动态面板整体框架.jpg

在这里需要再看一下主界面显示的情况
项目主界面.jpg

这里我们设置想让图片可以上下拖动,显示其他的未显示出来的内容,注意:这里要设定上下滑动的边界;
并且在相应的图片上进行左右滑动时可以触发动态面板中图片的切换;
在鼠标单击时弹出“看图模式”,进行图片的浏览,在这个界面中必须点击退出按钮才能退出到主界面。
实现思路:首先动态面板要能拖动(设定沿y轴拖动)——设定上下滑动边界条件与动作——设定光标接触部件条件——在相应的接触区域实现左右滑动切换图片的动作——单击相应的图片时候,显示隐藏的对应动态面板并到顶层——点击退出按钮回到主界面
好了,看一下函数的截图:
主页动态面板动作设定:
项目内容显示动态面板动作.jpg


1,这里的top与bottom我说一下边界设定
top函数:是指部件的顶部Y坐标,这里是不想让动态面板一直向下拖动使主界面中出现无内容区域,所以要设定动态面板沿Y轴拖动时top不能大于0,如果大于0的话我们就设定他的位置回到绝对位置(0,0)
top动作函数设定.jpg

bottom函数:部件的底部,这里与top对应的也是不想让部件的底部一直向上滑出现无内容区域,所以要设定底部bottom的y值不能小于动态面板的区域高度,本案例是525(根据个人设定不同),如果小于525那么就移动到相对位置到(0,[[525-LVAR1.bottom-1]]),(这里再解释一下相对位置:就是以目标位置为基准,是需要正向移动还是反向移动,本案例就是正向移动,所以用大数-小数:525-LVAR1.bottom,说道这个程度如果还不理解我也没办法了,慢慢想吧)
bottom函数设定相对距离.jpg

bottom相对距离函数算法.jpg


这里有一个点要看一下
调整动态面板适应内容大小.jpg

在嵌套内部动态面板时为了使显示内容为一个整体,并方便改动内部内容时而外面的函数不受影响,我将主页动态面板的显示内容区域用一个动态面板来显示的,并且将动态面板设定为“调整大小以适合内容”

2,这次再看光标接触部件时左右滑动切换图片的条件
直接在主界面滑动图片设定的光标范围函数.jpg


3,鼠标单击进入看图模式
这里的动作是设定在pageA与pageB上的,然后触发相应的动态面板“看图A与看图B”
pageA动作设定
pageA鼠标单击时动作.jpg

看图A的界面
看图A界面.jpg

看图A的动作
看图A动态面板动作.jpg

返回主界面
返回键动作.jpg


第二部分:排序位置
这里是一个矩形部件与动态面板的互动,矩形的显示文字就是动态面板的选中文字(这里我用的toString函数),实现选择的效果。
并让动态面板再次展开时,现在显示的文字与对应的动态面板中的部件处于选中状态,这里又涉及到条件判断,大家看下案例吧。
tostring动作.jpg

排序面板,一个例子:智能排序动作配置
智能排序动作.jpg


第三部分:筛选按钮
筛选按钮动作.jpg

看一下筛选动态面板的内部
筛选动态面板内容.jpg

这里用到了一个小东西,就是分组,这样能够实现每个组中只有一个能够处于选中状态,不会出现复选。
指定选项组-分类组.jpg


原型百度云盘:http://pan.baidu.com/s/1bovpVI3
在线原型体验:http://9al1jc.axshare.com
建议下载体验,Axure官网在线响应比较慢,下载下来还可以直接看原型的函数设置

今天的案例分享就到这里了,其实是一个很简单的案例,用到的东西并不多,但是还是比较有助于初学者认识一下Axure的一些函数与条件的综合应用的,对于学习Axure我还是文章开头说的话(没注意看的再看一遍),把各个部件兄弟混熟,各种函数会用,各个界面的多种功能认亲完成,然后你的Axure之路才真正开始。

注:本人也在不断学习进步,如有交流可以加我微信:fzl690894512,欢迎打扰。(本人不相亲 O__O "…但是并不拒绝妹子!)

 

交互原型设计分享 v1.0 (含海量设计资源和Axure实例)

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

上周在公司内部做了一次关于交互原型设计主题的分享,为了准备这次分享花了一周多时间整理并制作了一个分享演示。这个分享演示共分为三个部分,一是关于原型设计的基础知识和常用工具介绍,二是关于目前最主流的设计工具Axure的介绍,三是一些设计资源、工具、文档的整理推荐。另外,还包含许多Axure的交互实例。这些内容可以算是我接触原型设计6年时间以来的一次全面的总结和梳理。

在上次公司内部的分享中一是由于时间有限,二是由于部分参与分享的同事未接触过原型设计或未使用过Axure这款软件,个人觉得很多有价值的内容没办法展开进行介绍。在原型设计方面个人觉得Axure是一款神奇的工具,除了工作中必要的使用之外,曾经还花过大量的时间去钻研这款工具。另外,目前本人正在进行原创的Axure组件库和模板的设计,以国外的收费精品组件库为标准。

有关于原型设计和Axure方面的更多问题,欢迎与我进一步的交流(本人QQ:5698401)。另外欢迎加入Axure的交流和分享群:60750209,本人将不定期分享相关干货。

以下是部分演示截图,完整分享演示地址:http://u.pmdaniu.com/dGK5 (需要使用电脑端浏览器访问) 查看全部
上周在公司内部做了一次关于交互原型设计主题的分享,为了准备这次分享花了一周多时间整理并制作了一个分享演示。这个分享演示共分为三个部分,一是关于原型设计的基础知识和常用工具介绍,二是关于目前最主流的设计工具Axure的介绍,三是一些设计资源、工具、文档的整理推荐。另外,还包含许多Axure的交互实例。这些内容可以算是我接触原型设计6年时间以来的一次全面的总结和梳理。

在上次公司内部的分享中一是由于时间有限,二是由于部分参与分享的同事未接触过原型设计或未使用过Axure这款软件,个人觉得很多有价值的内容没办法展开进行介绍。在原型设计方面个人觉得Axure是一款神奇的工具,除了工作中必要的使用之外,曾经还花过大量的时间去钻研这款工具。另外,目前本人正在进行原创的Axure组件库和模板的设计,以国外的收费精品组件库为标准。

有关于原型设计和Axure方面的更多问题,欢迎与我进一步的交流(本人QQ:5698401)。另外欢迎加入Axure的交流和分享群:60750209,本人将不定期分享相关干货。

以下是部分演示截图,完整分享演示地址:http://u.pmdaniu.com/dGK5 (需要使用电脑端浏览器访问)

2016-11-01_144603.png


2016-11-01_144933.png


2016-11-01_145311.png


2016-11-01_145033.png


2016-11-01_145046.png

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

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

预览地址:
http://fgu2qi.axshare.cn/
下载地址:见附件






源文件下载地址↓
 
预览地址:
http://fgu2qi.axshare.cn/
下载地址:见附件


设计规范.png

源文件下载地址↓
 

雅虎天气(APP)案例 Axure原型分享

回复

Axure问答 回复了问题 • 4 人关注 • 3 个回复 • 1817 次浏览 • 2016-12-02 10:29 • 来自相关话题

一个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

 

【自制】多级抽屉 高维护性 高移植性 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原型中实现收起/展开区块并拉起/推开下文效果

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文件,有兴趣的朋友可以下载查看,希望多提意见、一起讨论、共同进步,与君共勉,谢谢!

交互原型设计分享 v1.0 (含海量设计资源和Axure实例)

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

上周在公司内部做了一次关于交互原型设计主题的分享,为了准备这次分享花了一周多时间整理并制作了一个分享演示。这个分享演示共分为三个部分,一是关于原型设计的基础知识和常用工具介绍,二是关于目前最主流的设计工具Axure的介绍,三是一些设计资源、工具、文档的整理推荐。另外,还包含许多Axure的交互实例。这些内容可以算是我接触原型设计6年时间以来的一次全面的总结和梳理。

在上次公司内部的分享中一是由于时间有限,二是由于部分参与分享的同事未接触过原型设计或未使用过Axure这款软件,个人觉得很多有价值的内容没办法展开进行介绍。在原型设计方面个人觉得Axure是一款神奇的工具,除了工作中必要的使用之外,曾经还花过大量的时间去钻研这款工具。另外,目前本人正在进行原创的Axure组件库和模板的设计,以国外的收费精品组件库为标准。

有关于原型设计和Axure方面的更多问题,欢迎与我进一步的交流(本人QQ:5698401)。另外欢迎加入Axure的交流和分享群:60750209,本人将不定期分享相关干货。

以下是部分演示截图,完整分享演示地址:http://u.pmdaniu.com/dGK5 (需要使用电脑端浏览器访问) 查看全部
上周在公司内部做了一次关于交互原型设计主题的分享,为了准备这次分享花了一周多时间整理并制作了一个分享演示。这个分享演示共分为三个部分,一是关于原型设计的基础知识和常用工具介绍,二是关于目前最主流的设计工具Axure的介绍,三是一些设计资源、工具、文档的整理推荐。另外,还包含许多Axure的交互实例。这些内容可以算是我接触原型设计6年时间以来的一次全面的总结和梳理。

在上次公司内部的分享中一是由于时间有限,二是由于部分参与分享的同事未接触过原型设计或未使用过Axure这款软件,个人觉得很多有价值的内容没办法展开进行介绍。在原型设计方面个人觉得Axure是一款神奇的工具,除了工作中必要的使用之外,曾经还花过大量的时间去钻研这款工具。另外,目前本人正在进行原创的Axure组件库和模板的设计,以国外的收费精品组件库为标准。

有关于原型设计和Axure方面的更多问题,欢迎与我进一步的交流(本人QQ:5698401)。另外欢迎加入Axure的交流和分享群:60750209,本人将不定期分享相关干货。

以下是部分演示截图,完整分享演示地址:http://u.pmdaniu.com/dGK5 (需要使用电脑端浏览器访问)

2016-11-01_144603.png


2016-11-01_144933.png


2016-11-01_145311.png


2016-11-01_145033.png


2016-11-01_145046.png

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

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

预览地址:
http://fgu2qi.axshare.cn/
下载地址:见附件






源文件下载地址↓
 
预览地址:
http://fgu2qi.axshare.cn/
下载地址:见附件


设计规范.png

源文件下载地址↓
 

Axure手机直播产品原型Demo分享!

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

用户端






Demo预览地址:
http://yggsmz.axshare.cn/live.html

主播端






Demo预览地址:
http://pwr86g.axshare.cn/live.html 查看全部
用户端

用户端.PNG


Demo预览地址:
http://yggsmz.axshare.cn/live.html

主播端

主播端.PNG


Demo预览地址:
http://pwr86g.axshare.cn/live.html

使用Axure8完成的音乐APP播放界面交互作品

Axure问答windir 发表了文章 • 5 个评论 • 1152 次浏览 • 2016-08-31 11:44 • 来自相关话题

使用Axure8完成了一个交互原型的练手作品,网易云音乐移动端的播放界面。制作过程颇有挑战,但也有很多探索乐趣。原本以为其中的一些交互细节用Axure是无法实现的,但经过摸索最终都做出来了,几乎是100%重现了全部的细节。唯一的两个小瑕疵:切换曲目时唱片的角度有一些不一致,还有播放计时的准确率不高。






重点操作交互:
音乐播放和暂停
曲目切换(多种切换方式)
计时及进度
进度拖动
喜欢及取消
播放控制(影响曲目播放顺序)
播放列表

演示地址:
http://p3y6of.axshare.com/musicplayer.html
  查看全部
使用Axure8完成了一个交互原型的练手作品,网易云音乐移动端的播放界面。制作过程颇有挑战,但也有很多探索乐趣。原本以为其中的一些交互细节用Axure是无法实现的,但经过摸索最终都做出来了,几乎是100%重现了全部的细节。唯一的两个小瑕疵:切换曲目时唱片的角度有一些不一致,还有播放计时的准确率不高。

musicplayer.png


重点操作交互:
音乐播放和暂停
曲目切换(多种切换方式)
计时及进度
进度拖动
喜欢及取消
播放控制(影响曲目播放顺序)
播放列表

演示地址:
http://p3y6of.axshare.com/musicplayer.html
 

一个交互页面,用iphone6体验更加!

Axure问答黑胡子 发表了文章 • 1 个评论 • 2437 次浏览 • 2016-06-07 19:59 • 来自相关话题

预览地址:http://q30cyr.axshare.cn/share_cover.html
原型地址:


Share-Cover.rp







 
预览地址:http://q30cyr.axshare.cn/share_cover.html
原型地址:



IMG_2077.PNG

 

【高保真社交APP】鱼塘---Skype风格

Axure问答黑胡子 发表了文章 • 6 个评论 • 2759 次浏览 • 2016-05-19 21:14 • 来自相关话题

鱼塘


APP设计图:http://www.zcool.com.cn/work/ZMTU1MzA0NDQ=.html
原型预览:http://li3nly.axshare.cn/
原型下载:http://pan.baidu.com/s/1hr6Bze8
禁止商用,谢谢. 查看全部
鱼塘


APP设计图:http://www.zcool.com.cn/work/ZMTU1MzA0NDQ=.html
原型预览:http://li3nly.axshare.cn/
原型下载:http://pan.baidu.com/s/1hr6Bze8
禁止商用,谢谢.

Camdy:一个包含了app所有操作逻辑,80%交互的原型!

Axure问答黑胡子 发表了文章 • 3 个评论 • 3429 次浏览 • 2016-05-18 10:42 • 来自相关话题

目前只提供预览:http://h7cpv5.axshare.cn/
由于所有界面都做在了一个页面里了,所以第一次加载会比较卡。

原型制作难点:
1.下拉刷新的效果;
2.返回逻辑;
3.贴纸拖动;
4.拍摄,编辑,上传逻辑;
5.个人中心上滑nav栏渐变。
其他效果自己去发现吧。

APP预览:http://heihuzi830.lofter.com/post/1dfdcbab_addb66d




  查看全部
目前只提供预览:http://h7cpv5.axshare.cn/
由于所有界面都做在了一个页面里了,所以第一次加载会比较卡。

原型制作难点:
1.下拉刷新的效果;
2.返回逻辑;
3.贴纸拖动;
4.拍摄,编辑,上传逻辑;
5.个人中心上滑nav栏渐变。
其他效果自己去发现吧。

APP预览:http://heihuzi830.lofter.com/post/1dfdcbab_addb66d
camdy_v1.0_cover_站酷_.png

 

游戏资讯APP原型分享(未完成)

Axure问答黑胡子 发表了文章 • 0 个评论 • 1165 次浏览 • 2016-05-16 23:12 • 来自相关话题

主要研究app风格
原型预览:http://kj4jhr.axshare.cn/#p=gameplus





 
主要研究app风格
原型预览:http://kj4jhr.axshare.cn/#p=gameplus

KW}BOSU)JR6VO6]Q)3GLV6D.png

 

之前做的一个视频app的原型(包含交互),分享一下。

Axure问答黑胡子 发表了文章 • 3 个评论 • 1664 次浏览 • 2016-05-11 20:55 • 来自相关话题

之前做的一个视频app的原型,分享一下。
演示地址:http://40gv5s.axshare.cn/#g=1&p=玖果视频  (原来的地址:http://hw8t30.axshare.com/)
原型地址:http://pan.baidu.com/s/1eR1nk5c
APP设计展示:http://heihuzi830.lofter.com/post/1dfdcbab_ac0dd2d
请不要作为商业用途使用,谢谢。 查看全部
之前做的一个视频app的原型,分享一下。
演示地址:http://40gv5s.axshare.cn/#g=1&p=玖果视频  (原来的地址:http://hw8t30.axshare.com/
原型地址:http://pan.baidu.com/s/1eR1nk5c
APP设计展示:http://heihuzi830.lofter.com/post/1dfdcbab_ac0dd2d
请不要作为商业用途使用,谢谢。

Axure模板库(11)-个人页面

Axure问答jituoshiti 发表了文章 • 1 个评论 • 2154 次浏览 • 2016-05-11 15:23 • 来自相关话题

分享一套Axure的模板,以后做原型的时候可以直接复制粘贴了。源文件的下载地址在文章最后。

预览地址:http://l8vc90.axshare.cn/ (社区管理员提供)

今天介绍4个“个人”页面。模板里还包括之前发布过的74个手机和PC上各种常用页面,好多按钮和图标,下面是图片预览。

1、个人页面主要展示个人信息,比如社交app需要展示个人的关注信息、图片、文章、签到等等。






2、工具型app的个人页面可以展示个人的使用状态,或者使用过程中积累的数据。







3、个人页面是“信息”的另一种组织方式。主页面展示最新的、相关性高的信息。个人页面过滤信息,只把某个人的信息展示出来。







4、工具app的个人页面更强调与个人相关的各种功能。








→→→源文件在这里下载(包括Axure 8.0的安装文件和汉化包)
http://pan.baidu.com/s/1c16cyQ0

想看更多的模板、案例可以关注我的公众号——Axure大师。

如果这篇文章帮助了你,记得打赏作者,支持作者发布更多模板~ 查看全部
分享一套Axure的模板,以后做原型的时候可以直接复制粘贴了。源文件的下载地址在文章最后。

预览地址:http://l8vc90.axshare.cn/ (社区管理员提供)

今天介绍4个“个人”页面。模板里还包括之前发布过的74个手机和PC上各种常用页面,好多按钮和图标,下面是图片预览。

1、个人页面主要展示个人信息,比如社交app需要展示个人的关注信息、图片、文章、签到等等。

1.png


2、工具型app的个人页面可以展示个人的使用状态,或者使用过程中积累的数据。

2.png



3、个人页面是“信息”的另一种组织方式。主页面展示最新的、相关性高的信息。个人页面过滤信息,只把某个人的信息展示出来。

3.png



4、工具app的个人页面更强调与个人相关的各种功能。

4.png




→→→源文件在这里下载(包括Axure 8.0的安装文件和汉化包)
http://pan.baidu.com/s/1c16cyQ0

想看更多的模板、案例可以关注我的公众号——Axure大师。

如果这篇文章帮助了你,记得打赏作者,支持作者发布更多模板~

原型分享:什么值得买登录输入动态效果模拟 附源文件

Axure问答黄老师 发表了文章 • 3 个评论 • 1504 次浏览 • 2016-05-07 15:38 • 来自相关话题

 先看效果演示:http://7rnohr.axshare.cn/#g=1&p=index
主要是在输入框为空的条件下,输入框获取焦点和失去焦点时的一个动态效果。
输入框和文字的颜色变化直接用选中状态切换实现。
难点是单击文字也要能实现焦点获取,并且失去焦点后要归为原始状态。注意切换隐藏和显示元件。
大家可以先自己做一下,做完了再下载源文件对比。 查看全部

shurukuang.gif

 先看效果演示:http://7rnohr.axshare.cn/#g=1&p=index
主要是在输入框为空的条件下,输入框获取焦点和失去焦点时的一个动态效果。
输入框和文字的颜色变化直接用选中状态切换实现。
难点是单击文字也要能实现焦点获取,并且失去焦点后要归为原始状态。注意切换隐藏和显示元件。
大家可以先自己做一下,做完了再下载源文件对比。

axure 8.0 动态特效元件库分享 交互设计

Axure问答pancheng 发表了文章 • 8 个评论 • 2353 次浏览 • 2016-04-05 18:04 • 来自相关话题

认准品牌

六脉神掌







尽量给每一个交互加上效果,尽量模拟真实的交互

无图无真相,我们先看效果图

1 这是还原Android Material Design风格的一个底部菜单效果








2 这个是模拟欢迎页面








3 模拟自动轮播的广告页面








4 这里是发送短信验证码








5 模拟选择图片附件上传







6 开关按钮








7 购物车数字输入框 收藏框 打分框 单选多选








8 进度条大合集








9 输入框提示语








10 左侧滑动菜单








11 左侧滑动菜单 盖住中间部分








12 右侧菜单








13 右下角浮动菜单







14 上刷新 下拉加载更多








15 抽奖转盘








 


 


除了以上以外还有一些列便捷组件。

作者:潘老师(QQ/微信:55607999),武汉产品经理,6年移动开发,2年产品工作经验,独立负责过项目无数。

以上如需要教程,请留言。

链接: http://pan.baidu.com/s/1gfm87p5 密码: mqym

承接各种UE动效设计 移动应用开发

认准六脉神掌






  查看全部
认准品牌

六脉神掌


logo1_看图王1.png


尽量给每一个交互加上效果,尽量模拟真实的交互

无图无真相,我们先看效果图

1 这是还原Android Material Design风格的一个底部菜单效果


效果1.gif



2 这个是模拟欢迎页面


效果2.gif



3 模拟自动轮播的广告页面


效果3.gif



4 这里是发送短信验证码


效果4.gif



5 模拟选择图片附件上传

效果5.gif



6 开关按钮


效果6.gif



7 购物车数字输入框 收藏框 打分框 单选多选


效果7.gif



8 进度条大合集


效果8.gif



9 输入框提示语


效果9.gif



10 左侧滑动菜单


效果10.gif



11 左侧滑动菜单 盖住中间部分


效果11.gif



12 右侧菜单


效果12.gif



13 右下角浮动菜单


效果13.gif


14 上刷新 下拉加载更多


效果14.gif



15 抽奖转盘


效果15.gif



 


 


除了以上以外还有一些列便捷组件。

作者:潘老师(QQ/微信:55607999),武汉产品经理,6年移动开发,2年产品工作经验,独立负责过项目无数。

以上如需要教程,请留言。

链接: http://pan.baidu.com/s/1gfm87p5 密码: mqym

承接各种UE动效设计 移动应用开发

认准六脉神掌


logo1_看图王1.png

 

Axure RP 7.0 美女浏览原型,内含:多层动态面板嵌套,拖动时函数设定边界,组应用等

Axure问答zilong 发表了文章 • 2 个评论 • 1650 次浏览 • 2015-12-28 16:32 • 来自相关话题

先上一张原型主界面的图片,原型在文章末尾,自己去下载




本案例是以浏览图片为范本的原型设计(仅供娱乐与学习),内部包含多层动态面板,函数应用,应该会对初学者有一点帮助,不过话说在前面,学习Axure还是要循序渐进,先从认识部件,认识函数开始(函数要学好,很重要滴),基础打牢后再继续打磨会事半功倍,不要上来就直接copy人家的函数与动作,要知道实现思路,知道“鸡”是怎么来滴。
下面开始一个一个开始介绍实现方法:
第一部分:主界面的美女显示面板
           项目内容动态面板部件结构




在这里需要再看一下主界面显示的情况




这里我们设置想让图片可以上下拖动,显示其他的未显示出来的内容,注意:这里要设定上下滑动的边界;
并且在相应的图片上进行左右滑动时可以触发动态面板中图片的切换;
在鼠标单击时弹出“看图模式”,进行图片的浏览,在这个界面中必须点击退出按钮才能退出到主界面。
实现思路:首先动态面板要能拖动(设定沿y轴拖动)——设定上下滑动边界条件与动作——设定光标接触部件条件——在相应的接触区域实现左右滑动切换图片的动作——单击相应的图片时候,显示隐藏的对应动态面板并到顶层——点击退出按钮回到主界面
好了,看一下函数的截图:
主页动态面板动作设定:





1,这里的top与bottom我说一下边界设定
top函数:是指部件的顶部Y坐标,这里是不想让动态面板一直向下拖动使主界面中出现无内容区域,所以要设定动态面板沿Y轴拖动时top不能大于0,如果大于0的话我们就设定他的位置回到绝对位置(0,0)




bottom函数:部件的底部,这里与top对应的也是不想让部件的底部一直向上滑出现无内容区域,所以要设定底部bottom的y值不能小于动态面板的区域高度,本案例是525(根据个人设定不同),如果小于525那么就移动到相对位置到(0,[[525-LVAR1.bottom-1]]),(这里再解释一下相对位置:就是以目标位置为基准,是需要正向移动还是反向移动,本案例就是正向移动,所以用大数-小数:525-LVAR1.bottom,说道这个程度如果还不理解我也没办法了,慢慢想吧)









这里有一个点要看一下




在嵌套内部动态面板时为了使显示内容为一个整体,并方便改动内部内容时而外面的函数不受影响,我将主页动态面板的显示内容区域用一个动态面板来显示的,并且将动态面板设定为“调整大小以适合内容”

2,这次再看光标接触部件时左右滑动切换图片的条件





3,鼠标单击进入看图模式
这里的动作是设定在pageA与pageB上的,然后触发相应的动态面板“看图A与看图B”
pageA动作设定




看图A的界面




看图A的动作




返回主界面





第二部分:排序位置
这里是一个矩形部件与动态面板的互动,矩形的显示文字就是动态面板的选中文字(这里我用的toString函数),实现选择的效果。
并让动态面板再次展开时,现在显示的文字与对应的动态面板中的部件处于选中状态,这里又涉及到条件判断,大家看下案例吧。




排序面板,一个例子:智能排序动作配置





第三部分:筛选按钮




看一下筛选动态面板的内部




这里用到了一个小东西,就是分组,这样能够实现每个组中只有一个能够处于选中状态,不会出现复选。





原型百度云盘:http://pan.baidu.com/s/1bovpVI3
在线原型体验:http://9al1jc.axshare.com
建议下载体验,Axure官网在线响应比较慢,下载下来还可以直接看原型的函数设置

今天的案例分享就到这里了,其实是一个很简单的案例,用到的东西并不多,但是还是比较有助于初学者认识一下Axure的一些函数与条件的综合应用的,对于学习Axure我还是文章开头说的话(没注意看的再看一遍),把各个部件兄弟混熟,各种函数会用,各个界面的多种功能认亲完成,然后你的Axure之路才真正开始。

注:本人也在不断学习进步,如有交流可以加我微信:fzl690894512,欢迎打扰。(本人不相亲 O__O "…但是并不拒绝妹子!)

  查看全部
先上一张原型主界面的图片,原型在文章末尾,自己去下载
项目主界面.jpg

本案例是以浏览图片为范本的原型设计(仅供娱乐与学习),内部包含多层动态面板,函数应用,应该会对初学者有一点帮助,不过话说在前面,学习Axure还是要循序渐进,先从认识部件,认识函数开始(函数要学好,很重要滴),基础打牢后再继续打磨会事半功倍,不要上来就直接copy人家的函数与动作,要知道实现思路,知道“鸡”是怎么来滴。
下面开始一个一个开始介绍实现方法:
第一部分:主界面的美女显示面板
           项目内容动态面板部件结构
项目内容显示动态面板整体框架.jpg

在这里需要再看一下主界面显示的情况
项目主界面.jpg

这里我们设置想让图片可以上下拖动,显示其他的未显示出来的内容,注意:这里要设定上下滑动的边界;
并且在相应的图片上进行左右滑动时可以触发动态面板中图片的切换;
在鼠标单击时弹出“看图模式”,进行图片的浏览,在这个界面中必须点击退出按钮才能退出到主界面。
实现思路:首先动态面板要能拖动(设定沿y轴拖动)——设定上下滑动边界条件与动作——设定光标接触部件条件——在相应的接触区域实现左右滑动切换图片的动作——单击相应的图片时候,显示隐藏的对应动态面板并到顶层——点击退出按钮回到主界面
好了,看一下函数的截图:
主页动态面板动作设定:
项目内容显示动态面板动作.jpg


1,这里的top与bottom我说一下边界设定
top函数:是指部件的顶部Y坐标,这里是不想让动态面板一直向下拖动使主界面中出现无内容区域,所以要设定动态面板沿Y轴拖动时top不能大于0,如果大于0的话我们就设定他的位置回到绝对位置(0,0)
top动作函数设定.jpg

bottom函数:部件的底部,这里与top对应的也是不想让部件的底部一直向上滑出现无内容区域,所以要设定底部bottom的y值不能小于动态面板的区域高度,本案例是525(根据个人设定不同),如果小于525那么就移动到相对位置到(0,[[525-LVAR1.bottom-1]]),(这里再解释一下相对位置:就是以目标位置为基准,是需要正向移动还是反向移动,本案例就是正向移动,所以用大数-小数:525-LVAR1.bottom,说道这个程度如果还不理解我也没办法了,慢慢想吧)
bottom函数设定相对距离.jpg

bottom相对距离函数算法.jpg


这里有一个点要看一下
调整动态面板适应内容大小.jpg

在嵌套内部动态面板时为了使显示内容为一个整体,并方便改动内部内容时而外面的函数不受影响,我将主页动态面板的显示内容区域用一个动态面板来显示的,并且将动态面板设定为“调整大小以适合内容”

2,这次再看光标接触部件时左右滑动切换图片的条件
直接在主界面滑动图片设定的光标范围函数.jpg


3,鼠标单击进入看图模式
这里的动作是设定在pageA与pageB上的,然后触发相应的动态面板“看图A与看图B”
pageA动作设定
pageA鼠标单击时动作.jpg

看图A的界面
看图A界面.jpg

看图A的动作
看图A动态面板动作.jpg

返回主界面
返回键动作.jpg


第二部分:排序位置
这里是一个矩形部件与动态面板的互动,矩形的显示文字就是动态面板的选中文字(这里我用的toString函数),实现选择的效果。
并让动态面板再次展开时,现在显示的文字与对应的动态面板中的部件处于选中状态,这里又涉及到条件判断,大家看下案例吧。
tostring动作.jpg

排序面板,一个例子:智能排序动作配置
智能排序动作.jpg


第三部分:筛选按钮
筛选按钮动作.jpg

看一下筛选动态面板的内部
筛选动态面板内容.jpg

这里用到了一个小东西,就是分组,这样能够实现每个组中只有一个能够处于选中状态,不会出现复选。
指定选项组-分类组.jpg


原型百度云盘:http://pan.baidu.com/s/1bovpVI3
在线原型体验:http://9al1jc.axshare.com
建议下载体验,Axure官网在线响应比较慢,下载下来还可以直接看原型的函数设置

今天的案例分享就到这里了,其实是一个很简单的案例,用到的东西并不多,但是还是比较有助于初学者认识一下Axure的一些函数与条件的综合应用的,对于学习Axure我还是文章开头说的话(没注意看的再看一遍),把各个部件兄弟混熟,各种函数会用,各个界面的多种功能认亲完成,然后你的Axure之路才真正开始。

注:本人也在不断学习进步,如有交流可以加我微信:fzl690894512,欢迎打扰。(本人不相亲 O__O "…但是并不拒绝妹子!)