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