分享：一款前端布局工具（alloydesigner）

困扰

设计师给出静态的高保真图片， 需要前端工程师按照高保真图，进行html编码。

前端工程师， 一般工作方法为： 打开图片，一边看下图片， 一边编写相应的html代码。

这样有两个问题：

1、 前端工程师比较累， 不停切换 图片和 编辑器， 操作频繁。手累！

2、 编写出来的html页面，不一定跟设计师的图片完全吻合。

 

alloydesigner工具介绍

http://alloyteam.github.io/AlloyDesigner/

• AlloyDesigner介绍

  AlloyDesigner 重新定义了Web页面构建的模式，页面构建过程中，AlloyDesigner直接嵌入你的Web页面中运行，帮助你精准、高效的构建Web页面的 UI！AlloyDesigner 是用 HTML5 开发的、直接嵌入在Web页面中运行的可视化Web构建工具

  AlloyDesigner预计节省您40%的UI开发时间，每天多40%的时间一起喝杯咖啡如何？

 

好处：

1、 让你写网页如同临摹一样。 每一步都可以有针对的检查调整的结果对不对。

2、 在编辑器中定义好html结构后， 在chrome浏览器上， 调整样式，与设计图片保持一致， 样式调整的结果直接同步到css文件。

不像现在的浏览器开发者工具如firebug， 调整样式后， 需要将css代码再考回到 css文件中。

3、 还有杰出使用测量、放大、隐藏设计图片等工具。（不用再使用额外的软件来做这些事情。 简直是美极了。）

 

alloydesigner工具安装

http://alloyteam.github.io/AlloyDesigner/worddoc.html

 

1、 XAMP工具。 或者其他的 本地web运行环境。

2、 chrome 设置workspace的位置为 XAMP的 htcdoc文件夹。设置方法见： https://c7sky.com/chrome-devtools-workspace.html

3、 将 alloydesigner.js文件嵌入到 待调试的html网页中。

---- 然后就可以尝鲜了。

 

alloyteam确实好样的， 为web前端开发人员造福啊！http://alloyteam.github.io/