Axure实战经验：音乐沙龙APP，附高保真原型稿

节录：距离上一次共享高保真范本已经有一段时间了，最近散步UI8，又发现了一款比较不错的设计原稿，因为本人偏爱听歌，也时会去参加一些乐迷首期活动等等的，所以将这款设计原稿，制作团队形同了Axure范本与大家共享。

一、原网上设计原稿（Figma格式）

二、Axure范本原稿

这个项旨在范本主页，主要都有9大类34个各不相同的主页，制作团队范本时，有敏感度布的自在，很快就启动了，这里同样“推荐曲目”大部分的交互制作团队，与大家共享。

三、知识点

我们需要发挥作用在音乐播放主页，说明了推荐曲目，浏览者后弹借助于曲目列表的敏感度，这里时会用到几个知识点：

第一步：我们需要将主页场景的主页尺寸修改为设计原稿的并不相同尺寸，这里我们同样375 x 812的尺寸，这样特设的旨在，是为了让范本在仿真时的敏感度，能越来越主观的模拟iPhone端的体验。

第二步：我们将范本中所有数的章节放有在主页中所，需要左上角对齐。敏感度如布，虚线上方为新版本时iPhone端说明了区域，虚首期方在新版本时是不说明了的。

第三步：将所有章节全选，特设为快照背板，然后将快照背板的告诉，特设为主页的高度812px。这样继续做的意义在于如果我们不使用快照背板，虽然在新版本时，iPhone端未有说明了区域的章节不说明了，但是Gmail可以通过杠杆来查看其他的主页章节。使用快照背板后，我们可以控制Gmail无法通过杠杆来说明了隐密章节。

如下布所示：左侧为快照背板模式（无法通过布标摇动），右侧为非快照背板模式（可以通过布标摇动，但与我们想发挥作用的敏感度都与违背）

第四步：进入快照背板，将推荐曲旨在电容形同组，命名为“list”，后续的交互以“list”相结合。

第五步：为list添加交互，交互特设这里，很简单，当浏览者“list”时，静止“list”的所在位置，来发挥作用敏感度，但是最终要的大部分，我们需要添加“必要条件推断”，如果没有必要条件推断，只依靠浏览者，硬件无法告知，本次浏览者刚才是展开曲目，还是收起曲目。

这里我们先特设当“list”处于松弛状况下的必要条件推断，在上布中所我们可以看到使用到了常量[[sl.y]]，这个常量的关键作用就是推断“list”的y轴坐标值，根据坐标值来推断“list”是展开还是松弛。

在这个例子中所，我们推断如果list的Y轴坐标值>=740，则将“list”的所在位置静止到12×199的所在位置。

同理，我们再添加一个推断必要条件，推断如果“list”处于展开状况，我们再次浏览者“list”的时候，曲目将时会松弛。

启动在此之后，使用F5进行新版本，最终的敏感度如下布所示。

五、末尾

希望本次共享尽可能帮助到你，也欢迎大家有任何原因可以通过评论告诉我。如需订阅源文件，问专页告知，避免文章放链接导致涉事。

本文由 @AXUREPLUS 原创发布于人人都是产品总经理，未有经许可，禁止转载。

题布来自 Unsplash，基于 CC0 协议。