分享：一款前端佈局工具（alloydesigner）

困擾

設計師給出靜態的高保真圖片， 須要前端工程師按照高保真圖，進行html編碼。

前端工程師， 通常工做方法爲： 打開圖片，一邊看下圖片， 一邊編寫相應的html代碼。

這樣有兩個問題：

一、 前端工程師比較累， 不停切換 圖片和 編輯器， 操做頻繁。手累！

二、 編寫出來的html頁面，不必定跟設計師的圖片徹底吻合。

 

alloydesigner工具介紹

http://alloyteam.github.io/AlloyDesigner/

• AlloyDesigner介紹

  AlloyDesigner 從新定義了Web頁面構建的模式，頁面構建過程當中，AlloyDesigner直接嵌入你的Web頁面中運行，幫助你精準、高效的構建Web頁面的 UI！AlloyDesigner 是用 HTML5 開發的、直接嵌入在Web頁面中運行的可視化Web構建工具

  AlloyDesigner預計節省您40%的UI開發時間，天天多40%的時間一塊兒喝杯咖啡如何？

 

好處：

一、 讓你寫網頁如同臨摹同樣。 每一步均可以有針對的檢查調整的結果對不對。

二、 在編輯器中定義好html結構後， 在chrome瀏覽器上， 調整樣式，與設計圖片保持一致， 樣式調整的結果直接同步到css文件。

不像如今的瀏覽器開發者工具如firebug， 調整樣式後， 須要將css代碼再考回到 css文件中。

三、 還有傑出使用測量、放大、隱藏設計圖片等工具。（不用再使用額外的軟件來作這些事情。 簡直是美極了。）

 

alloydesigner工具安裝

http://alloyteam.github.io/AlloyDesigner/worddoc.html

 

一、 XAMP工具。 或者其餘的 本地web運行環境。

二、 chrome 設置workspace的位置爲 XAMP的 htcdoc文件夾。設置方法見： https://c7sky.com/chrome-devtools-workspace.html

三、 將 alloydesigner.js文件嵌入到 待調試的html網頁中。

---- 而後就能夠嚐鮮了。

 

alloyteam確實好樣的， 爲web前端開發人員造福啊！http://alloyteam.github.io/