巧用Wamp:如何用手機(jī)在局域網(wǎng)中訪問(wèn)本地構(gòu)建的原型設(shè)計(jì)

當(dāng)我以今天的視角來(lái)觀察這件事情時(shí),其實(shí)是簡(jiǎn)單到無(wú)需記錄便可爛熟于心,本質(zhì)上就是網(wǎng)站訪問(wèn)。

image

可能是在 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ì)研究有很大的幫助。

image

可惜的是,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 步:

  1. 下載安裝 Wamp,到 官網(wǎng)下載 后,搭建本地服務(wù)
  2. 設(shè)置防火墻的 Apache 的入站規(guī)則,這個(gè)很重要。
  3. 設(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):

  1. 發(fā)布快,大部分時(shí)候你只需要發(fā)布修改的頁(yè)面到本地就可以,相比外網(wǎng)發(fā)布的方式要快很多。
  2. 訪問(wèn)快,避免因?yàn)橥獠烤W(wǎng)絡(luò)原因或某些不可抗力的因素導(dǎo)致發(fā)布的原型沒(méi)法訪問(wèn),而被老板毆打。
image

唯一的缺憾是沒(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ī)瀏覽器刷新就可看到修改后的交互原型。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,002評(píng)論 6 542
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,400評(píng)論 3 429
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 178,136評(píng)論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 63,714評(píng)論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,452評(píng)論 6 412
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 55,818評(píng)論 1 328
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,812評(píng)論 3 446
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 42,997評(píng)論 0 290
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,552評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,292評(píng)論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,510評(píng)論 1 374
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評(píng)論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,721評(píng)論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 35,121評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 36,429評(píng)論 1 294
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,235評(píng)論 3 398
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,480評(píng)論 2 379

推薦閱讀更多精彩內(nèi)容