在研究网站或移动应用程序的移动版本的ui设计过程中，我尝试了不同的方式将其呈现给客户端。 到目前为止，我选择了Invision，但有很多要点。



首先，成本。 对于专业人士而言，这不是问题，但是对于许多新手设计师而言，每月最低13美元的价格相当不错。

其次，由于某种原因，仍然无法解决将鼠标滑到活动按钮上方的问题。 简单地说-向下滚动到活动按钮就像单击一样。 这在相当复杂的界面中非常不便。

另一个选择-Figma-尚未被掌握，并且它将发展成为行业标准。 因此，一些设计师也将绕过它。

介绍Axure中的移动应用程序设计

最简单，最实惠的选择仍然是将Axure与Axshare结合使用。 而且Invision开始缺乏敏锐性-客户并不总是能够在脑海中详细介绍应用程序的工作。

因此，让我们开始开发自己的工具。 第一步是使用条件手机框架为Axure制作模板。 为此，我们需要一个PNG的电话框架，其屏幕上有一个“洞”，并具有屏幕的结构。

一开始-一切都很简单：我们将手机的图片放下，在顶部，将Inline Frame放在屏幕孔的大小上。 但是有一个不愉快的时刻。 它与“内联框架”元素的功能有关。
此元素在原型中创建一个用于上传各种信息的窗口-一个框架。 在其中，您可以从结构中设置另一个屏幕的输出，也可以插入指向该站点的链接。

问题出现在滚动条中。 它们可以显示或隐藏。 但是使用隐藏的滚动条可以关闭倒带功能-因此应用程序的长屏幕不会动态显示。 不是命令。

为了解决这个问题，我们使用了遮罩技术（感谢crackjack ）。

1.将内联框架转换为动态面板。 打开滚动条的显示（如果已关闭）。
2.我们再次将手机的框架和框架转换为动态面板，在该面板中，关闭滚动条。 我们还将遮罩的大小更改为360x640，以使框架中的滚动条不会露出。

其余的已经很容易了-在主屏幕上，我们仍然在框架中保留电话框架和一个假人。 在该框架中，我们将列表中下一个屏幕的输出加载到列表中，我们建立导航即可。 不要忘记将第一个屏幕的元素组合成一个组，并从中创建一个动态面板。

面板本身可以在浏览器中间对齐。 在“固定到浏览器”设置中，标记“中心”和“顶部”参数。 我们将所有内容发布在Axshare上，并将链接发送给客户端。

捷径。 准备用于Axure的模板

我将结果上传为完成文件。 您可以在此处免费下载Axure的模板 。

重点

该模板专为360个布局而设计。 这是有目的的。 320宽的布局在台式计算机的屏幕上看起来太小了，而原始尺寸的布局-1080（甚至640），相反-太大。

PS我不会在什么地方写标准说明。 我想给出更多实用的东西来改善ux / ui设计器的工作。

我很乐意回答问题，也很乐意提供优化建议！