AxureRP教程–淘宝评价效果

使用过淘宝购物的朋友应该都知道淘宝里面的评价效果,即可以给卖家的服务评星级的那个功能,这个功能主要有几个特性,一是鼠标移入移出是有相应提示(即评级描述,如是否满意)和状态变化的(即星星的亮或者灰状态显示,及不同等级显示不同的星星颗数),二是鼠标单击后能确定最终评级状态,但依然可以修改,最终显示状态没有评级描述。

使用AxureRP来模拟这个功能,原理是比较简单的,但设置起来相对较为繁琐,首先每个星星要有状态变化,其次鼠标移入移出每个星星都有事件触发,设置的量会比较大,在做这个例子的时候确实花点时间,不过中间还是有诀窍的,可以节省很多时间。这个功能有两种实现方式,一种是用一个动态面板来做出所有可能出现的状态,如五个星都是灰色,五个星都亮的情况等,然后用图片映射控件来做鼠标移入移出,及鼠标单击的事件控制;第二种方式是用五个动态面板来控制状态,每个面板里包含星星的亮和灰两个状态,也用用图片映射控件来做鼠标移入移出,及鼠标单击的事件控制。个人感觉第二种方式设置起来会更加的繁琐,这里采用第一种方式做演示。

五颗星星总共会有六种显示状态,各种状态就不列举了,因为还需要带提示,而最终显示结果是没有提示的,所以有星星亮的五个状态要多做一套,这样就有11个状态了,用动态面板组件,将这11种状态设计好。然后给每个星星上面放置一个图片映射组件,用来控制鼠标单击事件,和鼠标的移入移出事件,这里需要注意的是,考虑到状态是随时可改的,且每个星星所触发的事件相互间是不影响的,所以要用一个变量来标示每个星星产生的事件状态,分别用1~5的数字来标示五个星星。

这里鼠标单击事件是用来确定最终显示状态的,如第一个星星对应的是一星亮四星灰的没有提示的显示状态;鼠标移入则对应的是一星亮四星灰的有提示的显示状态;鼠标移出事件因为存在已经确定过状态而需要修改的情况,因此需要判断当前的变量值是多少,来判定最终显示状态是哪个,如果没有确定过状态的,则显示默认的五个星全灰的状态。

五个星星都要逐一设置,因为每个星期对应的状态值是不一样的,所以每个星星的鼠标单击事件和鼠标移入事件都要单独设置,但鼠标移出事件是一样的,因此设置好一个星星的事件后,其他星星的鼠标移出事件可以复制粘贴。当设置好一个状态的五个星星的事件之后,剩余的十个星星的事件就可以直接复制图片映射控件来粘贴了,这个就是设置技巧了,如果不这样操作的话,每个星星要设置三个事件,每个状态有五个星星,有11个状态,就需要操作3*5*11=165次,中间像鼠标移出这种要点选很多次的,工作量更大,而采用复制的方法就是3+4*2+4次复制+10次复制=25次就可以了。当然是不能随便复制的,这里还是要判断一下是否内容和设置一致。

到这里效果就出来了,设置好一组之后,剩下的就都简单了,这里还需要说一点的就是复制的时机,像这里要设置四组星星,因为每组之间是相互独立的,因此要用不同的变量来控制,因此设置事件时判断条件都是不一样的,要复制的话最好就在动态面板状态设计好及第一个状态的图片映射控件已添加好的时候就复制,然后每一组的第一个状态设置还是免不了的,剩下的就是复制粘贴操作了,否则等第一组全部都设置好了再复制,改起来也是相当繁琐的和复杂的,因此复制的时机和技巧非常重要。

这个例子我自己在做的时候也是走了很多弯路的,中间设置占用了大量的时间,每次修改都要改很多,当然是先拿第一组来做测试的,后来总结出可以复制粘贴的,修改起来就简单方便多了,这里和大家分享这个,就是想让大家注意设计之前的构思,如果在设计之初就有一个清晰的思路的话,就能比较准备的知道什么时候哪些地方的操作设置是重复的,这样能大大减少工作量。

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

 

点此查看演示

点此下载源文件



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

评论已关闭!