淘宝评价在哪里看五星(原型设计：如何实现淘宝的五星好评？)

小文

2022-04-20 06:30:22

给购买的物品打分是常有的事，那么这类应用点击星星打分的原型效果是如何实现的呢？

我们在淘宝购物或者大众点评点餐时，经常需要对商家的服务进行评价。那么，这类应用点击星星打分的原型效果是如何实现的呢？这里和大家分享一下制作这种原型效果的实现过程。

淘宝评价在哪里看

准备组件，设置交互样式

将一个矩形拖动到设计区域，其宽度和高度设置为50，并将其转换为五角星形状。连续复制四颗相同的五角星，水平等距分布，分别将这五颗星命名为1、2、3、4、5。将文本框拖到五星下方，输入文字“点击星星，给商家打分”，将文本框命名为“打分结果”。

为这五颗星设置选择效果。选择后，它们用红色填充，线段颜色为无色。

在设置交互效果之前，需要添加一个新的全局变量score来定义分数。首先，我们来分析一下交互动作。不难看出有三种交互:鼠标点击、鼠标移入和鼠标移出。

让我们逐一配置这些交互式用例中的操作:

第一颗星:设置变量score=1，选择第一颗星，后四颗星不选，文本框内容为“1分，非常不满意”；

第二颗星:设置变量score=2，选择前两颗星，不选择后三颗星，文本框为“2分，不满意”；

第三颗星:设置变量score=3，选择前三颗星，不选择后两颗星，文本框内容为“3分，平均”；

第四颗星:设置变量score=4，选择前四颗星，不选择最后一颗，文本框内容为“4分，满意”；

第五颗星:设置变量score=5，五颗星全部选中，文本框为“5分，非常满意”。

第一颗星:第一颗星选中，后四颗星未选中，文本框写“1分，非常不满意”；

第二颗星:前两颗星选中，后三颗星未选中，文本框写“2分，不满意”；

第三颗星:选择前三颗星，不选择后两颗星，文本框内容为“3分，平均”；

第四颗星:选择前四颗星，最后一颗不选，文本框写“4分，满意”；

第五颗星:五颗星全部选中，文本框写着“5分，非常满意”。

每个明星的动作设定都是一样的。这些设置如下:

情况1:如果变量得分=1，选择第一颗星，不选择后四颗星，文本框内容为“1分，非常不满意”；

情况2:如果变量得分=2，选择前两颗星，不选择后三颗星，文本框内容为“2分，不满意”；

情况3:如果变量得分=3，最后两颗星不选，文本框内容为“3分，平均”；

情况4:如果变量得分=4，选择前四颗星，不选择最后一颗星，文本框内容为“4分，满意”；

情况5:如果变量得分=5，五颗星全部选中，文本框内容为“5分，非常满意”。

至此，所有交互动作配置完毕，预览原型效果，最后分享源文件给大家。

链接:https://pan.baidu.com/s/1nwDc3cl密码:sjfx

本文由@kevin原创发布。每个人都是产品经理。未经许可，禁止转载。

图片由作者提供