AxureRP教程–评论及预览效果

现在评论功能一般都是网站的标配功能,各种社区,SNS,微博等都带有特定内容,如文章,相片的评论功能,其中开心网(kaixin001)里面有一种发表观点的功能,每次有人发表新的观点,会将这条记录以标签的形式放在上面,后面的用户可以附议,这样该条评论观点的支持数就加一,玩过开心网的朋友应该都清楚这个功能,这里就讲一下如何用AxureRP来模拟这个功能。

界面设计的很简陋,主要是演示提交评论观点的功能,没有实现计数的功能,AxureRP 6.0支持了变量的运算,就可以用来设计点击计数的功能了,这个有在使用AxureRP 6.0的朋友可以尝试一下。实现原理是要在评论框上方的空白区域预先放置几个文本块组件,并做好标记,然后定义提交按钮的单击事件,把评论框的内容通过变量传值给文本块显示。其他的诸如判断输入框是否为空以及相应的提示信息等,在前面的例子当中都有讲到。

界面上看上去确实差别很大,哎,这个没有办法,有时候卖相确实很重要,不过原理是一样的。这里主要是要注意隐藏文本块的标记,然后就是变量的赋值,这里因为是演示,还控制了提交的次数为3次,下方会有信息提示。这种效果是比较花哨的,一般的评论效果都不是这样的,主要是这个评论观点效果可以做为标签存在,让后面浏览该内容的用户可以附议,并有相应的计数统计(鼠标移入标签会有多少人赞同这个观点的提示),这个是比较出色的,省却了用户输入内容的时间,并能起到引导用户参与交互的功能,值得学习。

下面这个例子就是普通的评论效果了,就是写一条评论提交一条并显示出来的效果,不过这个例子也有一个特性功能,就是可以预览评论内容。实现原理是用动态面板来做两个状态页,一个是评论提交页面,一个是评论预览页面,然后定义预览按钮的单击事件为将评论框的值传输给预览页面,定义提交按钮的单击事件为将评论框的值传输给评论显示页面。因为最新提交的评论应该显示在最顶端,所以评论显示区也用动态面板来控制,已有内容放一起,新增的做隐藏显示,待到触发了提交事件时,已有内容要下移,新增内容显示。

这里的评论预览效果也可以应用在其他地方,比如文章显示预览等,实现的原理都是一样的。

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

 

点此查看演示

点此下载源文件

开心网评论模拟仿真效果(需6.0版本)



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

“AxureRP教程–评论及预览效果”2 条评论

commenter

2011.08.23更新开心网评论模拟仿真效果的一个库文件。

sky | 2013-04-8 00:56 |

稍显复杂,不过还是谢谢分享