TAT.Kinvix 全新理念的 Web 前端開發方式——AlloyDesigner
In 未分類 on 2014年03月10日 by view: 49,963
55

AlloyDesigner 介紹

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

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

 

alloydesigner5

  這樣開發出來的頁面,媽媽再也不用擔心我的頁面被設計師走查了^_^,開發效率也大大提高,不再需要邊量尺寸,邊寫頁面啦,真正實現所見即所得。同時,AlloyDesigner 還提供測距、取色、放縮、CSS 助手等最實用的頁面構建工具!

intro1

 

  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!

原創文章轉載請注明:

轉載自AlloyTeam:http://www.absolute-shop.com/2014/03/alloydesigner-lai-zi-xing-xing-di-web-qian-duan-kai-fa-fang-shi/

  1. 東走西顧 2016 年 5 月 3 日

    大天朝還進不了 Google…..

  2. 等劃分 2016 年 2 月 26 日

    這個工具想法是挺好,但是集成在瀏覽器端比較卡頓,如果主要功能是設計稿放在實現層下,通過 chrome 映射修改 css 文件,為何不直接把設計稿設為背景圖 1:1 就好了。。。然后根據重疊自行修改 css

  3. 默默者_念 2015 年 7 月 28 日

    添加了谷歌插件了,點擊沒反應啊,所以無奈的卸載了,我還說試試看效果如何呢,看視頻演示還是挺棒的??!

  4. CC 2015 年 7 月 14 日

    根本用不了。取色器卡的要命。而且感覺這個插件也沒有必要,因為設計在設計的時候,已考慮布局等。

    • dorsy 2015 年 7 月 22 日

      AlloyDesigner 依賴 google 的 webstore 市場,很多用戶無法更新,所以這里的優化進度變緩了,抱歉

發表評論