AlloyDesigner：來自星星的Web前端開發方式
千頌伊，你是否煩透了邊量設計稿的尺寸，邊寫Web頁面？
是否總在提測之后被設計師纏住做UI走查？”
那讓【都教授】來教你如何用來自星星的Web前端開發方式吧！
用一次，就會愛上一被子！
來吧，千頌伊。。。
AlloyDesigner介紹
AlloyDesigner 的創意來自于“臨摹”的靈感，使用AlloyDesigner后，你可以把設計稿拖進你的Web頁面鋪在頁面的***層，然后就可以對著設計稿來構建DOM元素和CSS樣式啦，這樣子是不是直觀了很多？通過AlloyDesigner直觀地調整頁面，迅速達到與視覺稿一致的目的。
AlloyDesigner的官網：http://alloyteam.github.io/AlloyDesigner/
這樣開發出來的頁面，媽媽再也不用擔心我的頁面被設計師走查了^_^，開發效率也大大提高，不再需要邊量尺寸，邊寫頁面啦，真正實現所見即所得。同時，AlloyDesigner還提供測距、取色、放縮、CSS助手等最實用的頁面構建工具！
AlloyDesigner 重新定義了Web頁面構建的模式，頁面構建過程中，AlloyDesigner直接嵌入你的Web頁面中運行，幫助你精準、高效的構建Web頁面的UI！AlloyDesigner 是用 HTML5 開發的、直接嵌入在Web頁面中運行的可視化Web構建工具，它可以作為瀏覽器的插件或與瀏覽器自帶的F12開發工具進行整合，支持Chrome，IE7+等主流瀏覽器。
AlloyDesigner預計節省您40%的UI開發時間，每天多40%的時間一起喝杯咖啡如何？
如何使用？
AlloyDesigner安裝使用方法有3種：
- 安裝位Chrome的插件；
- 將AlloyDesigner添加到收藏欄；
- 在html代碼中引入AlloyDesigner的js文件：<script src=’alloydesigner.js’ type=’text/javascript’></script>
AlloyDesigner使用指引：啟動AlloyDesigner后，首先，將視覺稿圖片加入頁面，然后用AlloyDesigner將其在頁面中拖拽定位，接著用AlloyDesigner提供的測距功能量出每個DOM元素的寬高、margin、padding等，如果需要提取顏色，可以用AlloyDesigner提供的顏色拾取功能進行拾取。
這種開發方法的便利在于，開發者的所有開發結果和修改都是實時的顯示在瀏覽器中的，并且，可以完全摒棄PS類的切片工具，讓開發者的環境只在代碼編輯器和瀏覽器之間切換。
AlloyDesigner已經廣泛的應用入公司的諸多Web項目的開發，大大提高了開發效率和開發質量。
未來展望
AlloyDesigner同時也方便產品經理、設計師、測試同學進行產品的UI走查，甚至未來可以根據你開發的頁面和交互稿的差異程度打一個分數。
未來AlloyDesigner將會加入更多可視化的UI構建工具，比如通過拖拽直接修改DOM尺寸、邊距、樣式，提高開發效率，做成一個全面的可視化Web開發設計工具，有什么建議和想法就提給我們吧^_Q!
