AlloyDesigner介紹

AlloyDesigner 的創意來自于"臨摹"的靈感，使用AlloyDesigner后，你可以把設計稿拖進你的Web頁面鋪在頁面的最底層，然后就可以對著設計稿來構建DOM元素和CSS樣式啦，這樣子是不是直觀了很多？通過AlloyDesigner直觀地調整頁面，迅速達到與視覺稿一致的目的。

AlloyDesigner的官網：http://alloyteam.github.io/AlloyDesigner/

相關推薦：
《自由設計師專屬！提升工作效率的神器法寶》
《Photoshop 3D 動作！酷炫難擋一鍵制作》
《Photoshop玩膩了！這10個圖形編輯神器你知道嗎？》

這樣開發出來的頁面，媽媽再也不用擔心我的頁面被設計師走查了^_^，開發效率也大大提高，不再需要邊量尺寸，邊寫頁面啦，真正實現所見即所得。同時，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開發設計工具，有什么建議和想法就提給我們吧。

原文地址：alloyteam

【優設網 原創文章 投稿郵箱：2650232288@qq.com】
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量65萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：