掃二維碼與項(xiàng)目經(jīng)理溝通
我們在微信上24小時(shí)期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
千頌伊，你是否煩透了邊量設(shè)計(jì)稿的尺寸，邊寫Web頁面？
創(chuàng)新互聯(lián)建站專注于網(wǎng)站建設(shè)|成都網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋成都崗?fù)?/a>等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身建設(shè)品質(zhì)網(wǎng)站。
是否總在提測之后被設(shè)計(jì)師纏住做UI走查？”
那讓【都教授】來教你如何用來自星星的Web前端開發(fā)方式吧！
用一次，就會(huì)愛上一被子！
來吧，千頌伊。
AlloyDesigner介紹
AlloyDesigner 的創(chuàng)意來自于“臨摹”的靈感，使用AlloyDesigner后，你可以把設(shè)計(jì)稿拖進(jìn)你的Web頁面鋪在頁面的***層，然后就可以對著設(shè)計(jì)稿來構(gòu)建DOM元素和CSS樣式啦，這樣子是不是直觀了很多？通過AlloyDesigner直觀地調(diào)整頁面，迅速達(dá)到與視覺稿一致的目的。
AlloyDesigner的官網(wǎng)：http://alloyteam.github.io/AlloyDesigner/
這樣開發(fā)出來的頁面，媽媽再也不用擔(dān)心我的頁面被設(shè)計(jì)師走查了^_^，開發(fā)效率也大大提高，不再需要邊量尺寸，邊寫頁面啦，真正實(shí)現(xiàn)所見即所得。同時(shí)，AlloyDesigner還提供測距、取色、放縮、CSS助手等最實(shí)用的頁面構(gòu)建工具！
AlloyDesigner 重新定義了Web頁面構(gòu)建的模式，頁面構(gòu)建過程中，AlloyDesigner直接嵌入你的Web頁面中運(yùn)行，幫助你精準(zhǔn)、高效的構(gòu)建Web頁面的UI！AlloyDesigner 是用 HTML5 開發(fā)的、直接嵌入在Web頁面中運(yùn)行的可視化Web構(gòu)建工具，它可以作為瀏覽器的插件或與瀏覽器自帶的F12開發(fā)工具進(jìn)行整合，支持Chrome，IE7+等主流瀏覽器。
AlloyDesigner預(yù)計(jì)節(jié)省您40%的UI開發(fā)時(shí)間，每天多40%的時(shí)間一起喝杯咖啡如何？
如何使用？
AlloyDesigner安裝使用方法有3種：
AlloyDesigner使用指引：啟動(dòng)AlloyDesigner后，首先，將視覺稿圖片加入頁面，然后用AlloyDesigner將其在頁面中拖拽定位，接著用AlloyDesigner提供的測距功能量出每個(gè)DOM元素的寬高、margin、padding等，如果需要提取顏色，可以用AlloyDesigner提供的顏色拾取功能進(jìn)行拾取。
這種開發(fā)方法的便利在于，開發(fā)者的所有開發(fā)結(jié)果和修改都是實(shí)時(shí)的顯示在瀏覽器中的，并且，可以完全摒棄PS類的切片工具，讓開發(fā)者的環(huán)境只在代碼編輯器和瀏覽器之間切換。
AlloyDesigner已經(jīng)廣泛的應(yīng)用入公司的諸多Web項(xiàng)目的開發(fā)，大大提高了開發(fā)效率和開發(fā)質(zhì)量。
未來展望
AlloyDesigner同時(shí)也方便產(chǎn)品經(jīng)理、設(shè)計(jì)師、測試同學(xué)進(jìn)行產(chǎn)品的UI走查，甚至未來可以根據(jù)你開發(fā)的頁面和交互稿的差異程度打一個(gè)分?jǐn)?shù)。
未來AlloyDesigner將會(huì)加入更多可視化的UI構(gòu)建工具，比如通過拖拽直接修改DOM尺寸、邊距、樣式，提高開發(fā)效率，做成一個(gè)全面的可視化Web開發(fā)設(shè)計(jì)工具，有什么建議和想法就提給我們吧^_Q!
我們在微信上24小時(shí)期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
微信二維碼
微信二維碼
移動(dòng)版官網(wǎng)