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

现在,外卖也好,购物也好,打车也好,点评打分是网站常见的用户互动的功能,一般都是1~5分之间评分,分值对应几颗星或者几颗心,当用户点击确定之后打分就完成了。下面我就以大众点评网为例,制作了打分效果。做之前,我们先来分析一下,点评共涉及到6个状态:没有打分的时候、一颗星的时候、二颗星的时候、三颗星的时候、四颗星的时候、五颗星的时候。根据之前的学习,知道点评区域是一个动态面板,这个动态面板有六个状态,当鼠标分别悬停时,切换出不同的状态。我们...

现在,外卖也好,购物也好,打车也好,点评打分是网站常见的用户互动的功能,一般都是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案例练习-点评打分效果

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36757/

(0)
交互精选交互精选
上一篇 2018-04-29
下一篇 2018-04-29

相关推荐

  • 如何创建用户体验地图

    许多公司尽管怀中最美好的愿景、掌握庞大的数据,却依然只能给他们的用户提供乏善可陈、平淡无奇的产品体验。这归咎于他们以聚焦内部、脱离用户的方式做产品,缺乏对用户的关注。他们未意识到用户对其产品的每一次体验都会影响用户的体验满意度、品牌忠诚度和忍耐底线。如果使用用户体验地图(Customer Journey Map),则能够很好地描绘出用户在体验产品时的情绪 变化,并以此对产品进行优化。通过体验地图的项目,我们发现了很多产品的优化方向。下面...

    2018-02-01
  • 营销型网站建设如何优化网站, 提高用户体验!

    营销型网站建设如何优化网站, 提高用户体验!据相关研究表明:当页面加载时间从 1 秒到 3 秒,跳出的机会增加了30%左右。1s到5s的机会增加到90%,如果你的网站需要10s的加载,跳出的机会将会超过120%。  这是令人难以置信的,因此有效的提高网站加载速度,对于搜索引擎优化而言很重要。  那么,我们该如何提高页面加载速度呢?  首选,我们需要对已知网站速度测试,总结归纳问题:其次,制定相应的整改策略:1、开启MIP百度对于MIP的...

    2018-04-11
  • 互联网+时代,让用户体验到你的专业性

    物质种类丰富之后,市场要面对的新重点就成了“用户体验”。只有“功能”的商品即使做成百宝箱也只能昙花一现,能够让客户用得舒心用得愉悦才是现代产品的应有魅力。在企业竞相提升体验的大潮中,“别让我等、别让我想、别让我烦”的用户三大心态仍然是大部分厂商的改良依据,然而总有一些人可以在这一基础上做得更加精细周到,成为“体验战”的大赢家。01曾经被无视的用户体验如今是神兵利器在计划经济时代,消费者的选择余地很小,导致了厂商只注重“功能”不注重“体验...

    2018-05-07
  • 关于用户体验

    产品不被喜欢的原因是漏了什么?答案是用户体验。如果你是一个产品经理,是否有深刻思考过这个问题呢?有人会说思考过,但似乎没什么用,产品还是不被喜欢。那是用户体验不重要,还是我们思考的不够呢?答案是后者。首先我们提出本篇要解决的核心问题:如何让产品被喜欢?(说明一下,这个产品可以是某种实物性的产品,也可以是一种服务性的产品。)这个问题提出后,很多人的脑海中会蹦出质量好、外观精致、用的舒服、服务周到等,但想到这些的人,一定还会有一个感受,就是...

    2018-04-09
  • 大屏时代,如何做好电视端交互设计?

    在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。-硬件+远距离操控——基本交互-基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一 、遥控器输入当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥...

    2018-04-01
  • 华景招聘用户体验分析师啦!

    作为华景员工,除了能体验旅游之外,还能体验华景食堂的凉皮儿和拉面,包子和油条,腊牛肉和酱猪肘,狮子头和卤肉饭,肉夹馍和艇仔粥,老婆饼和豆沙酥,酸辣汤和叉烧饭,泰式河粉和肉酱意面,干煸四季豆和蒜蓉蒸茄子……华景集团招聘1. 用户体验部    用户体验分析师岗位职责:*负责产品的用户研究,分析用户的使用习惯、情感和体验需求*负责原型/产品用户体验评估工作,参与产品的交互界面的设计,分析影响产品用户体验的因素*定期开展用户测试,观察用户使用产...

    2018-05-04
  • 2018年04月07招聘岗位

    诚聘:通辽澳鼎医疗器械公司诚聘:工作人员要求:40岁到50岁之间的女性,能长期工作的,有爱心,有孝心,家庭没有负担的,高中以上文化程度,语言表达能力好待遇:中午有工作午餐,每个周日休息,节假日休息,基本工资1800元,满勤奖200元,年底奖金不少于12000元。联系人:闫经理。联系电话,15247572846,15374967717不能长期工作的勿扰!招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,157...

    2018-04-08
  • 做完这5次Axure实操,0基础不仅做出高保真,还能提升产品交互

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期开启报名!从第1期到现在,2000多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)产品思维和交互贯穿全程,学完不仅能画出高保真,同时告别画图经理。具体来看,通过6...

    2018-04-07
  • 基于Axure的移动端APP产品设计规范

    文章结构:① 全局元素与控件设计规范 ② 全局注释规范 ③ 一些基本的产品设计原则一、全局控件元素设计规范我们经常会看到很多产品都有一个标志颜色,来增加产品的辨识度,例如淘宝的橙色,小黄车的黄色等。在产品设计过程中,为了保持视觉的统一性,通常会有一套配色方案,配色方案确定了产品的主色调和辅色调,所有的控件和元素都应用这一套配色来设计。除了配色还有,还有字体元素,按钮元素,以及其他控件元素等,产品设计开始就应该定义好这些基本规范,不仅能保...

    2018-03-04
  • Axure 从入门到够用

    第180篇Glen几个月前决定总结分享一个Axure教程系列,结果现在才腾出时间来梳理。Axure是最常见的产品原型工具了,看完这篇文章,你就基本具备了日常工作需要的产品原型能力了。Axure入门到够用教程1. 尺寸规范1.1 网页端产品尺寸优秀的产品原型是需要做到像素级高保真的,这样便于之后设计师输出设计图,毕竟眼见为实嘛。现在互联网主流屏幕分辨率有1920 * 1080、1366 * 768、1440 * 900。你在画网页产品原型...

    2018-03-06