新聞中心
千頌伊,你是否煩透了邊量設計稿的尺寸,邊寫Web頁面?

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


咨詢
建站咨詢
