當(dāng)我以今天的視角來(lái)觀察這件事情時(shí),其實(shí)是簡(jiǎn)單到無(wú)需記錄便可爛熟于心,本質(zhì)上就是網(wǎng)站訪問(wèn)。
可能是在 to-do 里待的太久,我都快將這條任務(wù)遺忘到角落,只能感嘆時(shí)間過(guò)得這么快,自己的行動(dòng)沒(méi)有完全跟上思想。
為了達(dá)成劃線(完成既定目標(biāo)后的動(dòng)作),我還是得記錄一下,想來(lái)想去立了這樣的題目:
巧用 Wamp:如何用手機(jī)在局域網(wǎng)中訪問(wèn)本地構(gòu)建的原型設(shè)計(jì)。
我用 Axure 做原型設(shè)計(jì)的時(shí)候,很羨慕用 Sketch 的人——可以實(shí)時(shí)的在手機(jī)端預(yù)覽和測(cè)試自己設(shè)計(jì)的 UI 界面,在這種工作方式下設(shè)計(jì)師往往更容易找到交互設(shè)計(jì)中靈動(dòng)的細(xì)節(jié)組合后所迸發(fā)的體驗(yàn),而體驗(yàn)式設(shè)計(jì)更容易引發(fā)靈感,對(duì)設(shè)計(jì)研究有很大的幫助。
可惜的是,Axure 并不支持這樣的做法,希望在后期的版本中,團(tuán)隊(duì)會(huì)考慮加入這樣的功能。
為了達(dá)到同樣的效果,我當(dāng)時(shí)考慮在設(shè)計(jì)主機(jī)搭建服務(wù),用于手機(jī)瀏覽器通過(guò)訪問(wèn)到局域網(wǎng)內(nèi)設(shè)計(jì)主機(jī)的 web 服務(wù)的下轄頁(yè)面來(lái)實(shí)現(xiàn)實(shí)時(shí)預(yù)覽的效果。
Wamp 是在 Windows 上的 web 服務(wù)和集成開(kāi)發(fā)環(huán)境,集成了 Apache, PHP, MySQL 等
陰差陽(yáng)錯(cuò)選擇了 Wamp,源自于我在本地搭建的用于跑 WordPress 的就是它,當(dāng)時(shí)靈光一閃就拓展了其用途。
整個(gè)過(guò)程很簡(jiǎn)單,共 3 步:
- 下載安裝 Wamp,到 官網(wǎng)下載 后,搭建本地服務(wù)
- 設(shè)置防火墻的 Apache 的入站規(guī)則,這個(gè)很重要。
- 設(shè)計(jì)完成原型,提交 html 頁(yè)面到 wamp 的 www 文件夾下。
這樣只需要保證手機(jī)和 PC 在同一個(gè)局域網(wǎng)段內(nèi),就可以通過(guò)手機(jī)瀏覽器訪問(wèn)設(shè)計(jì)主機(jī)的 IP 地址加原型路徑的方式訪問(wèn)到原型。
這樣的做法有 2 個(gè)優(yōu)點(diǎn):
- 發(fā)布快,大部分時(shí)候你只需要發(fā)布修改的頁(yè)面到本地就可以,相比外網(wǎng)發(fā)布的方式要快很多。
- 訪問(wèn)快,避免因?yàn)橥獠烤W(wǎng)絡(luò)原因或某些不可抗力的因素導(dǎo)致發(fā)布的原型沒(méi)法訪問(wèn),而被老板毆打。
唯一的缺憾是沒(méi)有自動(dòng)刷新的功能,不過(guò)我的目標(biāo)已經(jīng)基本達(dá)到了。ola,劃線完畢 _。
P.S 操作技巧: 在 Axure 9 中,完成一個(gè)頁(yè)面的修改后僅需要用快捷鍵 Ctrl+Shift+I 完成對(duì)當(dāng)前頁(yè)面修改的提交,手機(jī)瀏覽器刷新就可看到修改后的交互原型。