巧用Wamp：如何用手机在局域网中访问本地构建的原型设计

当我以今天的视角来观察这件事情时，其实是简单到无需记录便可烂熟于心，本质上就是网站访问。

image

可能是在 to-do 里待的太久，我都快将这条任务遗忘到角落，只能感叹时间过得这么快，自己的行动没有完全跟上思想。

为了达成划线（完成既定目标后的动作），我还是得记录一下，想来想去立了这样的题目：

巧用 Wamp：如何用手机在局域网中访问本地构建的原型设计。

我用 Axure 做原型设计的时候，很羡慕用 Sketch 的人——可以实时的在手机端预览和测试自己设计的 UI 界面，在这种工作方式下设计师往往更容易找到交互设计中灵动的细节组合后所迸发的体验，而体验式设计更容易引发灵感，对设计研究有很大的帮助。

image

可惜的是，Axure 并不支持这样的做法，希望在后期的版本中，团队会考虑加入这样的功能。

为了达到同样的效果，我当时考虑在设计主机搭建服务，用于手机浏览器通过访问到局域网内设计主机的 web 服务的下辖页面来实现实时预览的效果。

Wamp 是在 Windows 上的 web 服务和集成开发环境，集成了 Apache, PHP, MySQL 等

阴差阳错选择了 Wamp，源自于我在本地搭建的用于跑 WordPress 的就是它，当时灵光一闪就拓展了其用途。

整个过程很简单，共 3 步：

1. 下载安装 Wamp，到 官网下载 后，搭建本地服务
2. 设置防火墙的 Apache 的入站规则，这个很重要。
3. 设计完成原型，提交 html 页面到 wamp 的 www 文件夹下。

这样只需要保证手机和 PC 在同一个局域网段内，就可以通过手机浏览器访问设计主机的 IP 地址加原型路径的方式访问到原型。

这样的做法有 2 个优点：

1. 发布快，大部分时候你只需要发布修改的页面到本地就可以，相比外网发布的方式要快很多。
2. 访问快，避免因为外部网络原因或某些不可抗力的因素导致发布的原型没法访问，而被老板殴打。

image

唯一的缺憾是没有自动刷新的功能，不过我的目标已经基本达到了。ola，划线完毕 ^_。

P.S 操作技巧： 在 Axure 9 中，完成一个页面的修改后仅需要用快捷键 Ctrl+Shift+I 完成对当前页面修改的提交，手机浏览器刷新就可看到修改后的交互原型。