一、参考网站设计稿（采用Figma格式）
二、借助Axure进行原型设计
对于这个项目，我们设计了34个不同的页面，涵盖9大类内容。在设计原型时，我们充分利用了效果图的帮助，从而快速完成了设计。在此，我想与大家分享其中“推荐歌单”部分的交互设计。
三、核心知识点
在设计音乐播放页面时，我们需要展示推荐歌单，并实现在点击后弹出歌单列表的效果。这一功能涉及以下几个重要的知识点：
四、制作流程详解
1. 我们需要将页面场景的尺寸调整为与设计稿相符，这里我们选择375 x 812的尺寸。这样做是为了让原型在演示时更能真实地模拟手机端的体验。
2. 接着，将原型中已有的内容放置在页面中，并确保左上角对齐。预览时，虚线上方为手机端显示区域，虚线下方则不显示。
3. 然后，将所有内容设置为动态面板，并将动态面板的高度设置为页面的高度812px。这样做能控制用户无法通过滚轮查看隐藏内容，符合我们的设计需求。
4. 进入动态面板后，将推荐歌单的元件组合成一个组，命名为“list”。后续的交互都将基于这个“list”进行。
5. 为“list”添加交互效果。当点击“list”时，通过移动其位置来实现展开和收缩的效果。但为了实现这一功能，我们需要添加条件判断。如果没有条件判断，软件无法区分是展开歌单还是收缩歌单的点击。
在条件判断中，我们首先要判断“list”的y轴坐标值。如果坐标值大于等于740，则将“list”的位置移动到12×199的位置，实现展开效果。反之，如果“list”已经展开，再次点击时，会收缩歌单。
完成上述步骤后，使用F5进行预览，最终效果如文末所示。
希望本次分享对你有所帮助。如有任何问题，欢迎在评论区留言。如需下载源文件，请留言告知。此文由 @AXUREPLUS 原创发布在人人都是产品经理平台，未经许可，禁止转载。感谢阅读！
