交互学堂
专注分享专业知识

Axure案例练习-点评打分效果

现在,外卖也好,购物也好,打车也好,点评打分是网站常见的用户互动的功能,一般都是1~5分之间评分,分值对应几颗星或者几颗心,当用户点击确定之后打分就完成了。下面我就以大众点评网为例,制作了打分效果。

Axure案例练习-点评打分效果

做之前,我们先来分析一下,点评共涉及到6个状态:没有打分的时候、一颗星的时候、二颗星的时候、三颗星的时候、四颗星的时候、五颗星的时候。

根据之前的学习,知道点评区域是一个动态面板,这个动态面板有六个状态,当鼠标分别悬停时,切换出不同的状态。

我们先准备好6个星星的图片。

Axure案例练习-点评打分效果

一、index页面,拖一个动态面板到页面区域。

Axure案例练习-点评打分效果

二、为动态面板添加6个状态,分别命名:zero、one、two、three、four、five

Axure案例练习-点评打分效果

三、编辑动态面板的状态,我们先编辑zero状态,双击zero状态,进入编辑状态

Axure案例练习-点评打分效果

1、先拖一个矩形部件作为打分区域的背景,属性如下

Axure案例练习-点评打分效果

2、再拖一个图片部件,命名zeroimg,双击选择准备好的未打分的图片

Axure案例练习-点评打分效果

3、接下来拖入一个热点部件,第一个部件盖住左侧第一个星星,将第一个部件命名为star1

Axure案例练习-点评打分效果

4、需要为star1添加“鼠标移入时” “鼠标点击时” “鼠标移出时”

鼠标移入时,动态面板变为一颗星星亮了,状态选择one

Axure案例练习-点评打分效果

鼠标点击时,需要记住打了几分,一颗星对应1分,两颗星对应两分,这里就需要新建一个变量分数,命名为score

这里需要注意的是,要先新建变量(点击fx就行),不然添加用例的时候是没有score这个选择的。

Axure案例练习-点评打分效果

Axure案例练习-点评打分效果

鼠标移出时,需要用到用例编辑里的条件功能,这里是当分数是0的时候,设置动态面板状态为zero状态,当分数是1的时候状态为one,以此类推。

Axure案例练习-点评打分效果

Axure案例练习-点评打分效果

5、拖入一个矩形,无填充无边框,输入文字“点击星星为商户打分”

四、将star1复制4份,分别命名为star2、star3、star4、star5,大小不变,Y坐标不变,X坐标依次是23、40、57、74

将每个star涉及到“鼠标移入时” “鼠标点击时”事件修改对应的状态与分数,“鼠标移出时”不用修改

Axure案例练习-点评打分效果

五、将zero状态中所有的元素都复制到one、two、three、four、five状态中,图片也对应修改为一颗星、两颗星、三颗星、四颗星、五颗星,文字“点击星星为商户打分”也对应修改为:很差、差、较好、好、很好

六、给index页面添加“页面载入时”事件,页面初始化的时候,将score设置为0,这样打开页面的时候就是等待打分的状态了

Axure案例练习-点评打分效果

到这里,就可以预览一下看看,跟真的一样。







Axure案例练习-点评打分效果

Axure案例练习-点评打分效果

赞(0) 打赏
未经允许不得转载:IAMUE » Axure案例练习-点评打分效果

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏