Adobe 推出 Shadow 預覽軟體,讓網站設計師輕鬆透視行動網站

Adobe 推出 Shadow 預覽軟體,讓網站設計師輕鬆透視行動網站

Adobe 日前推出了一個名為 Shadow 預覽版軟體,再度補強了自家網站開發軟體的功能。Shadow 是個行動網站的預覽軟體,網站開發者可以輕易地透過 Shadow 預覽正在開發的網站在行動瀏覽器中看起來是什麼樣子。

現在愈來愈多網路瀏覽量是由行動裝置而來,不過有些網站的設計並不適合直接從行動裝置瀏覽。因此現在行動版網頁的設計愈來愈重要。Adobe在日前就推出了一款讓網站設計師可以直接預覽行動網站的程式,名為Adobe Shadow,讓網站設計師能夠直接在手持裝置中即時瀏覽行動網站的HTML、CSS和Javascript是否運作正常。

Adobe Shadow小檔案

Adobe Shadow可以在行動裝置裡同步顯示桌面瀏覽器中檢視的網站,讓網站設計師可以檢查自己所設計的行動版介面是否能夠正常顯示。Adobe Shadow由三個元件組成,使用者必須先在電腦上安裝Adobe Shadow主程式,它負責將瀏覽器中的畫面,透過區域網路傳送到行動裝置中顯示;另外你還必須安裝Adobe Shadow的瀏覽器外掛,讓Shadow知道你目前正觀看哪個頁面;接著必須從Apple App Store或是Google Play Store下載Shadow的行動版程式,讓Shadow可以直接在行動裝置上,顯示手機版頁面。

Adobe 推出 Shadow 預覽軟體,讓網站設計師輕鬆透視行動網站

▲首先我們必須先在電腦上安裝Adobe Shadow的桌面端軟體,現在Adobe Shadow提供WindowsMac兩個版本。Adobe Shadow僅作為傳輸資料到行動端軟體之用,因此沒有任何UI和設定。

Adobe 推出 Shadow 預覽軟體,讓網站設計師輕鬆透視行動網站

▲Adobe Shadow的行動端軟體提供了iOSAndroid兩個版本,只要安裝後開啟,就可以直接搜尋到同網域下的桌面端軟體。

Adobe 推出 Shadow 預覽軟體,讓網站設計師輕鬆透視行動網站

▲Adobe Shadow的第三個部分是瀏覽器外掛,讓Adobe Shadow主程式能夠偵測到目前你正在桌面端瀏覽器中檢視什麼網站。不過目前僅提供Chrome瀏覽器版本,可以從Chrome Web Store中下載。

Adobe 推出 Shadow 預覽軟體,讓網站設計師輕鬆透視行動網站

▲Adobe Shadow手機端軟體在連上桌面端時會顯示passcode。

Adobe 推出 Shadow 預覽軟體,讓網站設計師輕鬆透視行動網站

▲使用者只要在Adobe Shadow的瀏覽器外掛中輸入Passcode,就可以連結。

Adobe 推出 Shadow 預覽軟體,讓網站設計師輕鬆透視行動網站

▲使用者想直接在行動裝置上檢視網站時,只要選擇行動裝置名稱旁的<>圖示,就可以讓桌面端和行動端的Adobe Shadow連動。

Adobe 推出 Shadow 預覽軟體,讓網站設計師輕鬆透視行動網站

▲連接後,使用者就可以直接在手持裝置中看到目前桌面端瀏覽器中顯示的網站,在行動瀏覽器瀏覽時,會是什麼模樣,功能是否正常。

延伸閱讀

Photoshop CS6 犯規新功能,移動物體自動填補背景

Flash 11 即將推出,支援GPU硬體加速功能

Adobe Digital Editions,叫散亂的PDF檔排排站好

Mengkuei Hsu
作者

Currently not available.

使用 Facebook 留言
6d83cd757804e826b31b2fb03b5408c4?size=48&default=wavatar
1.  johnna (發表於 2012年3月09日 15:58)
這樣說來 跟CHROME to Phone 有什麼不一樣? 囧rz
Ac11157f6b65bfa20e5b2b3c9d05e73e?size=48&default=wavatar
3.  Dolce (發表於 2012年3月09日 20:39)
Chrome to Phone 不是給開發的網站的人用得。

※ 引述《johnna》的留言:
> 這樣說來 跟CHROME to Phone 有什麼不一樣? 囧rz
B703f3d2cfdc5578ff6f09e764e76a09?size=48&default=wavatar
4.  lin (發表於 2012年3月10日 11:01)
請問一下
手機是否要接傳輸線到電腦?或是要透過WIFY
我的手機(S2)一直在掃描狀態(有3G上網)
是否還有其他的設定要注意?
謝 謝!
998366b0b2d40c6a9b15d76633029a81?size=48&default=wavatar
5.  Leon456 (發表於 2012年3月13日 13:15)
※ 引述《lin》的留言:
> 請問一下
> 手機是否要接傳輸線到電腦?或是要透過WIFY
> 我的手機(S2)一直在掃描狀態(有3G上網)
> 是否還有其他的設定要注意?
> 謝 謝!

需在在同網段跟同intranet下才可以

主要是使用Apple 的 Bonjour 去自動尋搜

會不會是你的電腦沒安裝
(http://forums.adobe.com/docs/DOC-1673)

不過我的Flyer打開時卻是一片黑黑的
1806996883
6.  1806996883 (發表於 2012年3月14日 09:07)
這樣的方式跟寫完頁面直接丟在網站上測試相較之下,
我個人認為,
還是直接丟在網路上,
然後用行動裝置去開網站測試比較快速耶~
程式裝這個裝那個....
裝來裝去...還是會存在相容性的問題吧....
囧rz
發表回應
謹慎發言,尊重彼此。按此展開留言規則