点击联系发帖人
时间：2022-05-21 17:41
Axure制作的原型图，PC端查看比较方便，但如何在手机端查看，一直是个比较麻烦的问题，今天给大家分享一下如何在手机端查看原型图。
配套视频版教程（第十节）：
首先，咱们来简单分析一下Axure输出的三种原型文件：
1、原型图HTML文件：
通过“预览/输出HTML文件”是保存成html网页文件，进行预览的一种方式。可以完美的展示设定好的交互样式与动作，尤其是PC端的设计，非常实用。
1）Axure浏览器插件需要安装，客户浏览时经常遇阻。
2）移动端无法浏览，只能通过模拟器，很多交互问题无法真实体验，如：触碰区域等。
Axure工具中，默认支持AxShare服务，用户可以把自己设计的原型上传至官方的服务器中，进行多人共享查看，由于是默认的功能，不用再次安装，可以直接使用。
1）服务器在国外，访问慢（几乎无法使用）
2）仍然需要安装浏览器插件，阻碍浏览，手机端仍然不方便体验。
优化：如果需要此类共享，可使用国内的“蓝湖”，它有客户端，上传非常方便。
通过输出图片，把交互的图片都放到一张原型图中，发送给项目相关人员进行确认。这种方式很好的解决了插件问题，可以最高的保证视觉的还原度，另外就是跨平台文件的打开，比较适合研发团队配合。
1）缺少交互动作的展示，无法感知交互动作，需要画大量“交互指引箭头”描述。
2）多人共享时，更新麻烦，每次更新需要重新同步大量文件。
看完了上面的分析，发现这三种方法都不适合“手机端查看”.
接下来给大家分享一种完美手机端查看的办法。
下面我们就讲讲如何制作。
先用Axure设计好对应的手机端页面，注意页面的尺寸比例尽量要与标准尺寸一致，最起码比例要一致，否则后期放到墨刀里调整复杂。
这里以本专栏之前的教程为例，设计过程不再赘述，感兴趣的可以去先学习。
1、启动墨刀，创建项目，为项目起名
2、使用空白模板，设定项目名称，选择手机展示的尺寸（这里使用iPhoneX）
3、创建后，系统默认给了两个空白页面，还可以设定启动图图标和闪屏。
这里设定的图标+闪屏可以用于后期在手机上展示，效果很好，建议设定。
4、设置好启动图标和闪屏后，进入页面编辑
5、在编辑页中，将Axure中编辑好的图片，复制-->粘贴到墨刀编辑页中，这里墨刀做的非常好，可以直接复制过来。如果Axure设定的尺寸一致的话，图片几乎可以不用修改，如果尺寸不对可以通过墨刀进行简单的调整。
6、设定页面的事件（页面点击跳转），在墨刀中，拖动左侧【链接区域】（闪电）到刚才的图片上，会出现一个黄色的正方形，这个正方形就是可以点击链接的区域，调整链接区域的尺寸到适合的点击范围。
7、选中调整好的链接区域，推动区域左侧的圆形闪电按钮，到跳转的目标页面。
链接后，页面如下图所示，这样在运行后，点击区域就可以进行页面跳转了。
8、发布页面：页面与链接都设定好了之后，点击编辑区的右上角【运行】，预览页面。
9、预览后可以在PC端试验操作，试验后点击右上角【分享】按钮可获得分享码和链接。
以ios系统手机为例，扫描后，通过浏览器打开，点击底部【添加到主屏幕】，之后就可以看到这个原型的图标了，点开后即可正常浏览
至此，设计的交互可以在手机端完美的展示了，并且后续维护和修改的成本也不高。
1、修改动作部分，在墨刀修改，修改后可立即生效。
2、修改图片部分，在Axure修改，修改后复制到原有墨刀页面中即可。
配套视频版教程（第十节）：
我们会认真对待每一个提问，请详细描述你的问题，这样有助于获得最准确的答案。
上传RP源文件或者截图，可以让我们更快的知道问题所在。
不知道小伙伴们有没有想过这样一个问题，AXURE导出的页面能否去掉左侧和顶部的导航（如下图所示），直接当做一个正式的网页来使用：
我有这个想法由来已久，就是不知道这里面的技术边界。
直到昨天看到浪子PRD的官网，我判断应该是用AXURE直接生成的，一看源码，果然是。
然后我在网上找了下，还真有大神分享这样的小技能，大神原文是：
3、复制第一个页面，改名为index.html。这里要有一定的HTML功底可以根据自己的需要来调整名字和链接。搞完这一步就算大功告成啦。
至于上传到服务器或者github的，先挖个坑，改天来填坑。
