AxureRP教程–微博效果

现如今,微博是很火的一个互联网产品,新浪、网易、腾讯等都退出了自己的微博产品,由此也衍生出一些别的互联网产品,如轻博客,知乎等有点类似的产品。微博相较于博客,内容上精简了很多,本身写博客也要求谋定而后动,要写就得写一篇好的文章。微博则可以随思绪而动,微博为什么会火,有很多原因在里面,但微博的火也带动了很多产品的发展。例如微博形式的输入被带入很多产品的记事功能里,也有一些内部产品做内部沟通用,本文就介绍一下如何用AxureRP来模拟微博效果。

微博效果的实现难点一个是剩余可输入字符数的统计,一个是输入内容更新后的显示编排,演示例子为了显示编排方便,只显示两条记录。这个效果的实现原理是通过判断多行文本输入框的输入事件(OnKeyUp)来截取控制输入字符串的长度,以此判断剩余可输入字符数,以发布按钮的单击事件来控制输入内容的值的传递,以动态面板来控制显示内容的编排。

一般微博的显示字符数为140,用140减去输入内容的长度即为剩余可输入字符数,运算方式在AxureRP 6.0版本上是默认可以的,在AxureRP 6.0以下版本参见前面的《AxureRP教程–变量运算》介绍,里面有加减乘除四则运算的方法介绍。输入内容的值传递已在多个实例中讲到,不再多说。因为微博是将最新发表的内容显示在最上面,因此每次发布内容时需要将先前的内容下移,类似于前面介绍评论效果的那种操作,需要用到动态面板组件的可移动特性。

这里字数统计部分因前面已介绍过了,不再详细介绍,在原型生成之后,修改相应行的代码即可。下方记录显示部分是用动态面板来实现的,每条记录为一个动态面板,每个面板里就一个状态,状态下放置一个文本块组件,用来储存输入内容。默认将动态面板隐藏,由发布按钮来触发控制动态面板的显示,只有一条记录的时候是很简单的,不需要移动,直接将第一个面板显示出来就可以了。有大于一条记录的时候,需要将先前发布的记录都往下移,这里用的是坐标定位的方式,也可用固定位移的方式。不过这两种方式都不是很完美,因为输入内容的多少没有确定,导致无法确定显示的高度,致使无法准备的估计坐标或位移量,不过这里主要是演示用,因此只要设计好测试用例即可,所以我之前的文章也有讲到,自己设计的示例演示的时候用到到的测试用力也是很重要的。

界面设计的比较简陋,只是把主要功能做出来了,还可以考虑制作一下下方导航条的内容,如话题,投票,以及表情,图片等的显示框,富文本内容AxureRP还不支持传递,只能做到显示内容选择框。可以用鼠标移入控制动态面板显示的方法,有兴趣的朋友可以尝试一下。

示例在AxureRP 5.5版本下调试通过

 

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

“AxureRP教程–微博效果”有1条评论

Ratt | 2013-02-5 14:38 |

很炫的效果,虽然界面难看了点