V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
edison111cry
V2EX  ›  问与答

后端开发想快速实现 UI 切图的 H5 页面有什么好的方法

  •  
  •   edison111cry · 2019-10-12 13:51:25 +08:00 · 1723 次点击
    这是一个创建于 1651 天前的主题,其中的信息可能已经有所发展或是发生改变。

    平时也用 Bootstrap 布局什么的,但是面对 UI 设计出来的 H5 切图页面,不是很容易能按照切图给弄出来静态的 H5 页面,比如很多背景图,文字正好显示在背景图的哪个位置。

    想问一下这种东西有没有什么简单的网站可以实现出来,或者怎么可以在短时间内掌握能搞定这些的 CSS 知识

    第 1 条附言  ·  2019-10-12 15:30:08 +08:00
    还有一个问题,PSD 里的图层里面的那么多的小图片有没有办法一次性全部保存出来,我都是一个一个找到这个图层,然后隐藏其他图层把这个小图片、小图片 给保存出来,特别费事。
    12 条回复    2019-10-14 13:26:03 +08:00
    FuryBean
        1
    FuryBean  
       2019-10-12 14:21:47 +08:00
    现在流行的做法是根据设计文件(比如 Sketch )导出 HTML,你可以使用「 Sketch HTML 」作为关键字搜索下。我刚刚搜索到一个 Sketch Measure 插件可以做这个,你可以让你们设计师试试。
    zaul
        2
    zaul  
       2019-10-12 14:41:06 +08:00
    没啥好点子,想办法去大公司,分工明确,后端不用管前端的破事,前端不用管后端的破事
    learnshare
        3
    learnshare  
       2019-10-12 15:10:12 +08:00 via Android
    找个专业前端
    edison111cry
        4
    edison111cry  
    OP
       2019-10-12 15:17:22 +08:00
    @FuryBean 刚在 Github 上看到这个,感 觉蛮厉害,但是我们的设计师是用 PS 设计出来的带图层的 PSD 文件,好像就没法用了吧
    ESeanZ
        5
    ESeanZ  
       2019-10-12 15:23:04 +08:00
    我写个 PS 脚本 /插件能实现自动切图生成 H5 网页,定位采用百分比+rem 定位,很简单的一小东西原打算开源的 但是代码太烂了,也没有什么时间去完善修改他。
    edison111cry
        6
    edison111cry  
    OP
       2019-10-12 15:30:11 +08:00
    还有一个问题,PSD 里的图层里面的那么多的小图片有没有办法一次性全部保存出来,我都是一个一个找到这个图层,然后隐藏其他图层把这个小图片、小图片 给保存出来,特别费事。
    ESeanZ
        7
    ESeanZ  
       2019-10-12 15:40:18 +08:00
    跑完后大概会生成如下格式的文件 一个包含 html 代码的、css 样式文件还有就是图片文件了。
    ![切出的文件大概格式]( http://tva1.sinaimg.cn/large/007X8olVly1g7vgg7pcphj30tf0cpmy3.jpg)
    @edison111cry
    @edison111cry
    edison111cry
        8
    edison111cry  
    OP
       2019-10-12 15:44:27 +08:00
    @ESeanZ 大佬,你这个是自己的脚本弄出来的吗,有在 github 上吗,可以用用看吗
    ESeanZ
        9
    ESeanZ  
       2019-10-12 16:02:13 +08:00
    @edison111cry 代码现在还很乱,稍等几天我把代码全部重构一下,现在的代码真的惨不忍睹(我就是个切图仔),代码量不多目前在用的版本也就 250+行,很快做出完善版本再把烂尾的插件完善打成安装包后一起开源出来。
    ai277014717
        10
    ai277014717  
       2019-10-12 16:13:58 +08:00
    机器学习训练 AI 帮你写吧
    cst4you
        11
    cst4you  
       2019-10-12 23:50:07 +08:00
    PS 直接导出 web 页
    iaong0666
        12
    iaong0666  
       2019-10-14 13:26:03 +08:00
    没有办法 分工合作!给前端吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1188 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 18:14 · PVG 02:14 · LAX 11:14 · JFK 14:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.