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

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

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

 

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

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


QQ截图20170322015421.png


QQ截图20170322015437.png


QQ截图20170322015448.png

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


QQ截图20170322015421.png


QQ截图20170322015437.png


QQ截图20170322015448.png

  收起阅读 »

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

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

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

我在之前分享阿里云高保真原型制作心得时,提到过制作图片缩放效果时碰到过的一个疑似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事件上作出修改。
感谢你的帮助!


 
继续阅读 »
我在之前分享阿里云高保真原型制作心得时,提到过制作图片缩放效果时碰到过的一个疑似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事件上作出修改。
感谢你的帮助!


  收起阅读 »

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

继续分享制作阿里云网页高保真原型的心得体会,虽然只是一个单页,但其中包含了丰富的交互效果,对于了解和熟悉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坐标大一点点,让缩放区处于推拉层的“上方”就行了。
    这就是我用的小技巧,不知道各位大神有没有更好的办法来实现这个效果。有人可能会说,直接把下文所有内容线性移动来遮挡缩放区不就行了。呃……如果下文的内容不多,或许可以的吧。对这个问题感兴趣的朋友可以分享出来交流一下,共勉,谢谢!
继续阅读 »
继续分享制作阿里云网页高保真原型的心得体会,虽然只是一个单页,但其中包含了丰富的交互效果,对于了解和熟悉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新手,第一次分享作品,请大家多多指教。
原型展示网址一: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新手,第一次分享作品,请大家多多指教。
原型展示网址一: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文件,有兴趣的朋友可以下载查看,希望多提意见、一起讨论、共同进步,与君共勉,谢谢! 收起阅读 »

关于近期偶尔出现广告的说明

近期发现部分用户在访问Axshare.cn上面的原型时,会偶尔出现广告的情况。广告只出现一次,刷新就没有了,搞的非常隐蔽。其实不光axshare.cn,我们公司其他网站也出现了这种情况。
 
首先申明,我公司不会在原型中插入任何广告。广告并不是我公司的主要业务。
 
经过排查,发现页面被插入了未知的内容。原来是CNZZ统计代码被运营商(用户的本地网络)劫持了,无耻运营商在网页插入广告这种事已经屡见不鲜了。

QQ20170108-1@2x.png

 
查明原因后,我们紧急更换了带SSL加密的统计代码,完美解决了此问题。但在已生成的原型中,需要用户自行更新一下,即重新上传一下源文件生成一次才会生效。
继续阅读 »
近期发现部分用户在访问Axshare.cn上面的原型时,会偶尔出现广告的情况。广告只出现一次,刷新就没有了,搞的非常隐蔽。其实不光axshare.cn,我们公司其他网站也出现了这种情况。
 
首先申明,我公司不会在原型中插入任何广告。广告并不是我公司的主要业务。
 
经过排查,发现页面被插入了未知的内容。原来是CNZZ统计代码被运营商(用户的本地网络)劫持了,无耻运营商在网页插入广告这种事已经屡见不鲜了。

QQ20170108-1@2x.png

 
查明原因后,我们紧急更换了带SSL加密的统计代码,完美解决了此问题。但在已生成的原型中,需要用户自行更新一下,即重新上传一下源文件生成一次才会生效。 收起阅读 »

不定期更新Axure8.0元件原型链接,用以记录。

不定期更新Axure8.0制作的元件原型链接,用以记录。

 按钮互斥:   http://d2ms56.axshare.com/#c=2

进度条:    http://emdfap.axshare.com/#c=2

模拟秒表: http://n0f7rc.axshare.com/#c=2

石英钟:    http://6nemqy.axshare.com/#c=2

音量控制模块:  http://pdn0xg.axshare.com/#c=2

中继器-排序&搜索:  http://x450il.axshare.com/#c=2

替换轮播:     http://yz9hk5.axshare.com/#c=2

ts_app:   http://52vru4.axshare.com/#c=2
继续阅读 »
不定期更新Axure8.0制作的元件原型链接,用以记录。

 按钮互斥:   http://d2ms56.axshare.com/#c=2

进度条:    http://emdfap.axshare.com/#c=2

模拟秒表: http://n0f7rc.axshare.com/#c=2

石英钟:    http://6nemqy.axshare.com/#c=2

音量控制模块:  http://pdn0xg.axshare.com/#c=2

中继器-排序&搜索:  http://x450il.axshare.com/#c=2

替换轮播:     http://yz9hk5.axshare.com/#c=2

ts_app:   http://52vru4.axshare.com/#c=2 收起阅读 »

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

  如果大家有别的更简单的方式求教啊
预览地址:http://cdlgak.axshare.cn/index.html

菜单栏.png

 
  如果大家有别的更简单的方式求教啊
预览地址:http://cdlgak.axshare.cn/index.html

菜单栏.png

 

一个简单的视频编辑软件,附RP文件

这是个飞机稿,拿出来分享一下。
效果图如下:

IMG_3826.PNG


IMG_3827.PNG


IMG_3828.PNG


IMG_3829.PNG

在线预览地址:http://aejakp.axshare.cn/
继续阅读 »
这是个飞机稿,拿出来分享一下。
效果图如下:

IMG_3826.PNG


IMG_3827.PNG


IMG_3828.PNG


IMG_3829.PNG

在线预览地址:http://aejakp.axshare.cn/ 收起阅读 »

交互原型设计工具Pixate宣布关闭 云端内容将清空


d4bfb81a2338485ba69f96ec405397e3.png

 Pixate公司在博客中写到:“我们的任务是为设计师们提供打造和试验复杂动画界面所需的紧要功能。自那时起,我们有幸见证Pixate改进了许多团队的原型过程,带来了鲜活的创意和超越了可能”。

在被Google收购之后,Pixate表示会削减工作室产品的开支,通过云服务来大幅减少成本并使之免费。没想到的是,团队于今日改变了他们的想法,并作出了终结Pixate的决定。

10月31号的时候,Pixate将关停其云服务,用户请抓紧时间备份文件和原型。11月1号之后,云端所有内容都将被清空,包括项目、成员、账单信息。

Pixate Studio也将不再开放下载,现有的程序副本可以继续使用,但没有了后续的官方支持,包括电子邮件、Twitter和Facebook的直接支持,而云服务客户会收到退款。
继续阅读 »

d4bfb81a2338485ba69f96ec405397e3.png

 Pixate公司在博客中写到:“我们的任务是为设计师们提供打造和试验复杂动画界面所需的紧要功能。自那时起,我们有幸见证Pixate改进了许多团队的原型过程,带来了鲜活的创意和超越了可能”。

在被Google收购之后,Pixate表示会削减工作室产品的开支,通过云服务来大幅减少成本并使之免费。没想到的是,团队于今日改变了他们的想法,并作出了终结Pixate的决定。

10月31号的时候,Pixate将关停其云服务,用户请抓紧时间备份文件和原型。11月1号之后,云端所有内容都将被清空,包括项目、成员、账单信息。

Pixate Studio也将不再开放下载,现有的程序副本可以继续使用,但没有了后续的官方支持,包括电子邮件、Twitter和Facebook的直接支持,而云服务客户会收到退款。 收起阅读 »

苹果App Store终于支持支付宝了 苹果商店使用支付宝教程

苹果于昨晚和今晨分别推送了iOS10.1.1正式版以及iOS10.2开发者预览版Beta1固件更新,与此同时,还有一个好消息:App Store终于支持支付宝付款了。

此前,要想购买App Store中的应用、iTunes Store中的音乐和电影等,只能使用银联卡、Visa、MasterCard等,但多多少少有些不便。而现在,通过支付宝就能愉快的买买买了。

经测试,iOS 9、iOS 10系统均已添加对支付宝的支持,并非iOS 10.1.1专享。

打开设置——iTunes Store与App Store,点击Apple ID并选择查看Apple ID,点击付款信息会发现,付款方式中新增了一个“支付宝Alipay”选项。

选择之后,输入支付宝账户和身份证号码后5位,该账户绑定的手机号码将会收到验证码,输入验证码之后,支付宝账户就可以成功在iTunes&App Store中开通支付宝免密支付。
继续阅读 »
苹果于昨晚和今晨分别推送了iOS10.1.1正式版以及iOS10.2开发者预览版Beta1固件更新,与此同时,还有一个好消息:App Store终于支持支付宝付款了。

此前,要想购买App Store中的应用、iTunes Store中的音乐和电影等,只能使用银联卡、Visa、MasterCard等,但多多少少有些不便。而现在,通过支付宝就能愉快的买买买了。

经测试,iOS 9、iOS 10系统均已添加对支付宝的支持,并非iOS 10.1.1专享。

打开设置——iTunes Store与App Store,点击Apple ID并选择查看Apple ID,点击付款信息会发现,付款方式中新增了一个“支付宝Alipay”选项。

选择之后,输入支付宝账户和身份证号码后5位,该账户绑定的手机号码将会收到验证码,输入验证码之后,支付宝账户就可以成功在iTunes&App Store中开通支付宝免密支付。
收起阅读 »

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

上周在公司内部做了一次关于交互原型设计主题的分享,为了准备这次分享花了一周多时间整理并制作了一个分享演示。这个分享演示共分为三个部分,一是关于原型设计的基础知识和常用工具介绍,二是关于目前最主流的设计工具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
继续阅读 »
上周在公司内部做了一次关于交互原型设计主题的分享,为了准备这次分享花了一周多时间整理并制作了一个分享演示。这个分享演示共分为三个部分,一是关于原型设计的基础知识和常用工具介绍,二是关于目前最主流的设计工具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
收起阅读 »

管理公告:本社区近期将进行大规模的改版和调整

近期要对本社区进行重大调整,如果访问时出现什么故障,请无视!谢谢大家配合!
 
QQ登录和微信登录可能会受到影响。调整完以后,将会带给大家全新的体验!
 
调整方向:
因为之前挖了太多坑,开了一些没有意义的网站,其中社区占了好几个。由于精力有限,无法维护那么多网站。所以将以本站为基础,扩展话题范围,把本站打造成为一个产品经理专业社区。同时会启用另外一个域名。调整后也会投入全部精力和资源在本社区的运营上。
继续阅读 »
近期要对本社区进行重大调整,如果访问时出现什么故障,请无视!谢谢大家配合!
 
QQ登录和微信登录可能会受到影响。调整完以后,将会带给大家全新的体验!
 
调整方向:
因为之前挖了太多坑,开了一些没有意义的网站,其中社区占了好几个。由于精力有限,无法维护那么多网站。所以将以本站为基础,扩展话题范围,把本站打造成为一个产品经理专业社区。同时会启用另外一个域名。调整后也会投入全部精力和资源在本社区的运营上。 收起阅读 »

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

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


设计规范.png

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


设计规范.png

源文件下载地址↓
 

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

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

musicplayer.png


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

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

musicplayer.png


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

演示地址:
http://p3y6of.axshare.com/musicplayer.html
  收起阅读 »

分享一个沿着圆弧移动的效果~

做的时候发现小楼老师无处不在~ 
好吧~  参考了一下小楼老师的公式~ 然后自己做了一个

Image_1.png

 
效果:http://ftp7sy.axshare.cn/#g=1&p=page_1&c=1
做的时候发现小楼老师无处不在~ 
好吧~  参考了一下小楼老师的公式~ 然后自己做了一个

Image_1.png

 
效果:http://ftp7sy.axshare.cn/#g=1&p=page_1&c=1

装完MacOS Sierra (10.12)预览版之后,axure 崩溃的问题

RT,Axure 7 和 8 的全部都会崩溃。请从下边这个地址下载最新的测试版即可解决。
http://axure.com/release-candidate#3300
版本号:8.0.0.3300
 
直接下载地址:https://axure.cachefly.net/AxureRP-Setup-RC.dmg
继续阅读 »
RT,Axure 7 和 8 的全部都会崩溃。请从下边这个地址下载最新的测试版即可解决。
http://axure.com/release-candidate#3300
版本号:8.0.0.3300
 
直接下载地址:https://axure.cachefly.net/AxureRP-Setup-RC.dmg 收起阅读 »

分享一下验证码识别

http://pmdaniu.com?Cj7MI
 
界面极其丑陋 主要看功能~

Image_22.png

 
http://pmdaniu.com?Cj7MI
 
界面极其丑陋 主要看功能~

Image_22.png

 

自己做了一个图片两两换位置的功能。

小楼老师以前做了一个类似的, 可是照着做, 怎么也做不出来~
图片传到全局变量里, 然后在调用的时候, 不显示图片~ 
各种蒙圈~ 怎么也做不出~
 
最后被逼无奈~ 用了两个中继器做出了差不多的效果
UI极其丑陋, 主要看功能~
http://pmdaniu.com?BeLC6
 

交换位置.png

 
继续阅读 »
小楼老师以前做了一个类似的, 可是照着做, 怎么也做不出来~
图片传到全局变量里, 然后在调用的时候, 不显示图片~ 
各种蒙圈~ 怎么也做不出~
 
最后被逼无奈~ 用了两个中继器做出了差不多的效果
UI极其丑陋, 主要看功能~
http://pmdaniu.com?BeLC6
 

交换位置.png

  收起阅读 »

用axure画了一个话机


2016-05-26_172146.png

第一次用axure画东西,这个话机大家觉得画的如何?请给点意见。后续会把交互效果加上。

2016-05-26_172146.png

第一次用axure画东西,这个话机大家觉得画的如何?请给点意见。后续会把交互效果加上。

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

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

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

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

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

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

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

  收起阅读 »

一个视频网站的原型分享【包含交互】

之前做的一个视频网站的原型,分享一下。
原型下载地址:http://pan.baidu.com/s/1bOylye
演示地址:http://7anrjj.axshare.cn/#g=1
请不要作为商业用途使用,谢谢。
TV.png
继续阅读 »
之前做的一个视频网站的原型,分享一下。
原型下载地址:http://pan.baidu.com/s/1bOylye
演示地址:http://7anrjj.axshare.cn/#g=1
请不要作为商业用途使用,谢谢。
TV.png
收起阅读 »