有没有一种图形界面写 HTML 的工具？

2018-09-08 17:07:23 +08:00
 mogutouer
不知道大家有没有用过 Xcode 的 Storyboard 编辑，里面可以根据不同的屏幕尺寸（ ipad iphone ）和横竖，以及 Auto Layout 设置 UI 的排布和各种相对关系，虽然用起来有点繁琐，但至少只靠拖动和设定规则就能搞定所有 UI 对所有界面的自动伸缩布局还有各个控件之间的关系。

最近有很多设计稿需要给 PHP 去做，无奈 PHP 对于前端又不太熟，设计也不懂代码，在把设计文件变为 HTML 这个过程是非常繁琐的，基于 CSS 的功能，要实现上述的效果完全手动写代码既繁琐又要不停的调整。

不知道有没有类似的图形化的工具，可以实现设计稿按照规则调整 UI 自动生成 HTML，以适合不同的屏幕尺寸。
诸如 左右边距固定中间拉伸扩展，根据屏幕大小按比例缩放， 高度宽度是某个其他元素的百分之多少，横屏横向布局竖屏竖向排列之类常用的 UI 布局规则。

用过 sketch 的几个自动生成 HTML 插件，都无法实现元素相对其他元素的大小位置比例，也没办法实现靠下靠右固定位置之类的功能。

6660 次点击
所在节点    问与答
27 条回复
night98
2018-09-08 17:10:37 +08:00
dw?
mogutouer
2018-09-08 17:15:42 +08:00
@night98 #1 对哦，忘记这个了，我去试用一下看看
mogutouer
2018-09-08 17:30:10 +08:00
@night98 #1 dw 还是要非常熟悉 css 才行
delectate
2018-09-08 17:35:38 +08:00
FrontPage?
hhsuan
2018-09-08 17:38:53 +08:00
@delectate 这玩意还存在吗？
Wolther47
2018-09-08 17:41:59 +08:00
hyper ？
mcoo1997
2018-09-08 18:00:37 +08:00
马克吐温
waldentree
2018-09-08 18:41:54 +08:00
wix.com? 不知是否是楼主所需要的
alvin666
2018-09-08 19:07:11 +08:00
Frontpage 哈哈哈想起来小学用这个做网页，和 PPT 一样，不过早都不更新了
zhzer
2018-09-08 19:09:13 +08:00
小学的时候用 word 写过网页……
cctrv
2018-09-08 19:25:17 +08:00
Sketch 有導出 HTML 的插件，就是不清楚可用性如何。
https://www.animaapp.com/
AxtonYao
2018-09-08 19:27:50 +08:00
阿里有个 飞冰

https://github.com/alibaba/ice
CloudnuY
2018-09-08 20:10:40 +08:00
网页三剑客？
learnshare
2018-09-08 20:13:44 +08:00
需要一个前端外包
ydirel
2018-09-08 20:48:30 +08:00
。。。。Dreamweaver? 拖一拖就行了？
dcatfly
2018-09-08 21:16:25 +08:00
设计多套然后用 sketch 生成多套？或者楼上的 WIX，这个不一定能完全到达你想要的效果。。有些功能也需要有一定的编程能力。
hing
2018-09-08 22:16:17 +08:00
sketch2code
微软的，开源
designer
2018-09-08 22:27:45 +08:00
有没有一种设计软件自动实现产品想法的工具？
最近做设计累到了。
Cu635
2018-09-09 00:15:00 +08:00
frontpage?
dreamweaver?
WildCat
2018-09-09 07:39:41 +08:00
framer X

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/487408

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX