每年的双十一、双十二购物狂欢节,我们都可以在各大电商平台看到漂亮且内容丰富的活动页面,而这些页面大部分也都是静态页面,只为商品提供一个购买的入口,前端程序员拿到设计稿后,便开始无聊繁琐的'切图'工作。
做为一名某跨境电商前切图仔的身份,深知还原设计稿这部分工作就如同'搬砖',程序员的智力不应该体现在重复性地编写UI代码这项工作中,更应该用于业务逻辑、技术架构的处理。
所以说如果能够实现智能化布局来还原设计稿,那才是最有效的减轻“搬砖”工作量,于是前端智能化的概念也随之出现。
前端智能化就是AI在前端领域的一系列落地方案。基于设计稿生成代码,正是这一技术领域的新尝试,通过智能化手段提升前端的研发效能,直到2019年 D2 前端论坛发布了“www.imgcook.com”,前端智能化这个词才正式确立。
于是各类UI设计稿智能生成源代码的工具也应际而生,从2019年阿里imgbook发布后,58 Picasso、CodeFun等相继发布,工具有了,那么我们更多地去考虑设计稿的生成代码是否具有合理性、布局是否准确、还原度如何等问题。所以准备趁着当前的学习劲探索一下前端智能化,选用CodeFun进行体验一番!
CodeFun是一款 UI 设计稿智能生成源代码的工具,可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。
这是官方的定义,还说到其最大特点就是精准还原设计稿,不再需要反复 UI 走查,可以生成如工程师手写一般的代码,这不正是我们所追求的效果么?后面我们在项目实践上验证一下。
官方有一张这样有意思的贴图:
Before,正是我们现在在UI设计稿还原所遇到的困境。
After,CodeFun这类UI设计稿智能生成源代码的工具正是助我们走出这个困境的利器,怎么神奇的,迫不及待想尝试使用一下了。
体验前,我们先了解一下CodeFun的设计稿格式与输出平台。
目前主流的 UI 设计软件有 Sketch、Photoshop、XD 和 Figma,目前CodeFun对Sketch、Photoshop、Figma版本已完美支持,XD 使用过度方案转换成sketch格式即可使用。对于源代码输出也支持像微信小程序、H5、混合App等多终端多平台。
设计稿格式 | 操作方式 | 支持程度 | 备注 |
Sketch | 插件上传 | ✅ 完美支持 | |
PSD | 插件上传 | ✅ 完美支持 | PS版本需要2018以上 |
Figma | 插件上传 | ✅ 完美支持 | |
即时设计 | 插件上传 | 内测中 | 内测入口 |
XD | 插件上传 | 即将支持 | XD过渡方案入口 |
设备平台 | 支持程度 | 框架/语言 |
微信小程序 | ✅ 支持 | 原生 / uni-app |
移动端 H5 | ✅ 支持 | Vue / React |
混合 App | ✅ 支持 | uni-app / taro |
桌面 Web | 后续支持 | |
Android | ❌ 暂不支持 | |
iOS | ❌ 暂不支持 |
安装Adobe PhotoShop CC 2019安装微信开发者工具进入官网下载ps插件(下载地址:code.fun/download/)重启psPS菜单栏 -> 窗口 -> 扩展 -> CodeFun
点击PS CodeFun插件的上传按钮
成功上传至CodeFun个人空间
点击下载代码按钮,可以把代码下载至本地,对于代码平台可以选择小程序、React、Vue、Trao、H5uni-app,可以说目前市场常见代码平台都可以生成,同时可以支持Less、Sass,就连像素都可以选择rpx或是px,可以说这样的功能是相当强大的!
我们根据几张设计稿来分析一下CodeFun生成的代码是否具有合理性、布局是否准确性。
在分析前,我们先了解几个CodeFun的功能,
标记的组件节点会按照组件定义进行代码生成默认官方标签有Header、Footer、Fixed、List、Grid被标记的组件节点会展示标签名称
CodeFun通过AI算法可以智能地对设计稿中类似列表、网格布局的设计部分,自动打上List、Grid标签,这样最终生成的代码,就很符合我们的预期。
现在我们打开Select Your Item的设计稿,并且选用输出的代码平台是微信小程序
可以看到中间组件部分会被自动识别成Grid标签,同时我们还能看到JS、JSON、WXML、WXSS各个面板的详细代码,这样的效果相当不错!
css复制代码.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 42rpx;
column-gap: 22rpx;
}
这里要提一下,这个的AI算法识别还是相当准确,可以应用grid将我们的容器划分成了grid-template-columns: repeat(2, 1fr);,这样的布局方式也是我们所希望的。
生成的WXML代码结构也是比较合理
ini复制代码 <view class='grid'>
<view class='flex-col grid-item'>
<image
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/630f24c0e8a7a20011f03568/16619596688649449137.png'
class='image_1'
/>
<view class='flex-row justify-between group'>
<text class='text_1'>Sample Select</text>
<image
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/630f19655a7e3f0310ac26de/630f24c0e8a7a20011f03568/9c97417ca6d9af2893080728b10f323c.png'
class='image_3'
/>
</view>
</view>
<view class='flex-col grid-item_1'>
...
</view>
<view class='flex-col grid-item_2'>
...
</view>
</view>
UI的还原度也还不错,视觉比对
现在我们打开Search的设计稿,并且选用输出的代码平台是微信小程序
中间部分是一个列表,CodeFun可以自动识别成List标签组件,右下角,我们可以看到将 List 标签输出为循环列表、开启数据绑定输出模式,自动开启,我们可以看一下最终生成的代码是如何的?
javascript复制代码Page({
data: {
list_ronpmvZ1: [null, null, null, null, null, null, null, null, null],
},
onShareAppMessage() {
return {};
},
});
ini复制代码 <view
class='flex-row justify-between list-item group_4'
wx:key='*this'
wx:for-item='item'
wx:for-index='i'
wx:for='{{list_ronpmvZ1}}'
>
<view class='flex-row group_5 view'>
<image
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/630f24c0e8a7a20011f03568/16619596684705638677.png'
class='image_3'
/>
<text class='text_5'>View All</text>
</view>
<image
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/630f24c0e8a7a20011f03568/16619596686496129814.png'
class='image_5'
/>
</view>
</view>
发现当我们将 List 标签输出为循环列表开启时,会自动将我们标记List的组件进行wx:for输出,同时开启数据绑定输出模式开启后,会自动绑定list_ronpmvZ1的数据输出,这样的功能也是我们梦寐以求的。
UI的还原度也还不错,视觉比对
通过上面两个验证,CodeFun在代码的合理性、布局的准确性、还原度,都相对不错!同时主要也介绍了Grid、List组件标签的作用,除了这两个标签,当我们需要设置顶部 header 或者底部固定 footer 时,只需将组件类型设置成 Header 或者 Footer 标签即可。
设置路由跳转也是十分简单,在当前设计稿页面,点击交互,选择跳转页面,选择要跳转的目标页面。
生成代码如下:
ini复制代码<image
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/630f24c0e8a7a20011f03568/16619596700756809787.png'
class='image_4'
bindtap='onClickImage_6'
/>
javascript复制代码Page({
onClickImage_6() {
wx.navigateTo({ url: '/pages/six' });
},
});
相当的智能,可以自动生成路由跳转代码,为我们节省不少工作量。
我们可以在CodeFun的样式面板,直接调整样式,然后在左侧展示页,可以立刻响应出来,点击保存,下载代码,也可以拿到我们修改后的样式文件。
以上只是关于CodeFun的部分功能,总体来说CodeFun功能是很强大的。利用高效的识别特点,大幅度帮助前端工程师从繁琐的页面切图中解放出来,通过较低的学习成本,让使用者能更加简单且高效的完成需求。虽然使用太过复杂的 UI 稿的时候,可能会存在生成效果的偏差,但其实也还好,我们可以通过在线的调整或是在生成的代码中,适当做一些调整即可,到这里,也不得不感慨一下AI算法的魅力,前端智能化在UI设计稿智能生成代码的领域的尝试也让人感到兴奋和期待,相信后面会越来越成熟,那么前端智能化的出现,切图仔会失业么?答案是不会的,我们只是用了类似CodeFun这一类的利器来帮助我们摸鱼,cool。
联系客服