AlloyDesigner----來直星星的web前端開發方式

edagarli發表於2014-03-15
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種：

  1. 安裝位Chrome的外掛；
  2. 將AlloyDesigner新增到收藏欄；
  3. 在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








相關文章