亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！

课程主题：app评价弹窗制作

主要内容：弹窗基本组成、显示与隐藏、多元件交互、情形应用

应用场景：app评价类弹窗、其他选项类弹窗均适用

案例展示：

---

正文内容：评价设计逻辑：差评（小于2）、中评（大等于2小于5）、好评（5）；

步骤一：建立评价弹窗基本内容，包括弹窗背景框、五个小星星、五个外边框、评价评语、取消和提交按钮，如下图

1

步骤二：组成一个弹窗命名为评价弹窗，载入时隐藏；

2

步骤三：命名！非常重要因为这个弹窗的形状太多，小星星命名1——5，外框为了好辨识和小星星对应关系，可以命名为1+1；2+1；3+1；4+1；5+1；评语分别命名：评语好评、评语中评、评语差评；

3

步骤四：五个外框分别与小星星对应，单击时显示隐藏——切换可见性（x），依次添加交互；

4

步骤五：五个小星星开始设计交互，第一个小星星交互，分为单击时显示与隐藏的项目和显示时显示和隐藏的项目，参照下图的交互细节；

5

第二个小星星交互和第一个小星星逻辑一样，分为单击时和显示时两个方向去设计；

6

第三个小星星，逻辑同上细节参考下图；

7

第四个小星星，逻辑同上细节参考下图；

8

第五个小星星参考下图；

9

步骤六，增加提交按钮跳转对应评价页面，分别做好三个页面用于承载跳转显示；提交的逻辑判断采用情形的设定，细节如下；

10

11

本课小结：评价弹窗的设计思路在于深度理解显示与隐藏的内涵，显示/隐藏的发起一般是由某个元件发起，而结果的呈现是被动的元件，即如果显示B，那么发起交互是A，B本身不能调起自身的状态变化；另外就是情形的应用，相当于if...else判断语句，可以说情形和中继器承载了太多的组合应用。

---

相关课程直通车：

中继器实现时间读取和修改-CSDN博客

Axure复选框全选反选取消高级交互-CSDN博客

Axure横向菜单高级交互-CSDN博客

Axure垂直菜单展开与折叠-CSDN博客

Axure树形菜单展开与折叠-CSDN博客

如有其他相关问题，欢迎私信沟通，关注  结构化知识课堂-CSDN博客

明天的产品大咖就是你，创作不易，麻烦关注一下，点赞+收藏，感谢大家！