青岛黄岛区做网站设计的,文化公司网站建设,建设集团有限公司英文,百度站长app前言
随着金融App业务的不断发展#xff0c;为了满足不同场景下的用户体验及丰富的业务诉求#xff0c;业务产品层面最直接体现就是大量新功能的上线及老业务的升级#xff0c;随之也给研发带来了巨大的压力#xff0c;所以研发效率的提升就是当前亟需解决的问题#xff…前言
随着金融App业务的不断发展为了满足不同场景下的用户体验及丰富的业务诉求业务产品层面最直接体现就是大量新功能的上线及老业务的升级随之也给研发带来了巨大的压力所以研发效率的提升就是当前亟需解决的问题今天我们来看下“画眉”平台是如何帮助前端研发同学提效的。
前端开发流程概述
在讨论之前我们先看下前端开发流程下图是一个典型的场景 通过上图我们可以发现前端开发主要分为“UI还原”和“业务逻辑实现”两个阶段其中UI还原阶段需要通过编写代码对设计稿进行1:1像素级还原业务逻辑实现阶段主要包括数据绑定及交互效果实现。
“UI还原”阶段研发通常需要借助设计平台的“标注”功能对设计稿中每一个元素进测量包括字体、间距、颜色、圆角等一个普通的楼层通常包含几十个元素此阶段包含了大量低效、重复、繁琐的工作
“业务逻辑实现”阶段一般是根据具体的产品需求进行数据的加载、绑定和交互效果的开发如鉴权、点击事件的添加、动效实现、埋点的上报等不同的需求在此阶段的诉求差异较大可复用性也比较低通常需要针对每个需求进行定制开发。
我们可以发现“UI还原”阶段特点是“低效、重复、繁琐”且占用了整个研发阶段的30%左右甚至在一些弱交互的场景下可能会占用整个开发流程的50%以上所以有没有一种方式可以直接将设计稿转换成前端代码提高研发在此阶段的效率
什么是设计稿转代码D2C
设计稿转代码Design To Code便是解决此问题的技术其核心思想是通过解析设计师交付的设计稿源件Sketch、Figma、XD等读取出设计稿中元素的位置、样式、图层关系等并通过一系列的算法处理最终转换为前端代码。 D2C本质上属于UI2Code范畴UI常见展现形式主要分为2种一种是以图片位图的方式展示如jpg、png等另外一种是以矢量的方式展示此种方式通常需要配合具体的设计软件来查看和编辑如Sketch、XD等。所以UI转代码的实现方式也主要分为两种即“Image To Code”和“Design To Code”。
由于图片是位图即图片是由一个个“像素点”组成的所以图片转代码通常需要借助计算机视觉AI的方式来实现实现成本巨大且受限于图片所承载信息的局限性及准确性图片转代码的方案目前还没有特别成熟能用于生产环境的产品。
相较于图片设计稿所承载的信息就非常丰富了通过解析设计稿文件我们可以读取到准确的字体、字号、字重、色号、间距、元素关系等信息基于此我们便可以设计一系列的算法、策略、规范然后配合少量低成本AI算法来实现从设计稿到前端代码的转换。
D2C的优势及局限性
D2C能做什么
通过前面的介绍我们可以发现D2C的目的是将设计稿自动转换成前端代码所以D2C基本可以覆盖所有需要将UI转换为前端代码的场景。另外由于设计稿中包含了几乎所有UI层面的资源如图片、切图等信息D2C平台在前端工程上也可以自动化一些操作比如自动切图、自动将图片上传到CDN等。
D2C不能做什么
虽然设计稿中包含了UI层面的很多信息但完整的需求通常还包含交互、动效、业务逻辑等此部分信息是设计稿中所不能表达的所以此部分功能还是需要研发手动处理。
另外D2C目前在增量需求的使用上效果比较好因为增量需求通常需要从0到1的UI还原不会涉及太多存量逻辑但增量需求场景下比如对线上楼层的改版因为存量需求已包含大量交互、业务逻辑等此时如果使用D2C还需要将原有的逻辑迁移到新的UI代码上在业务逻辑复杂的情况下有点得不偿失。
画眉平台简介
画眉平台是一个功能相对完善、体验优良的一站式研发平台当前核心功能是设计稿转代码目前支持根据设计稿一键生成Jue金融APP原生主要开发语言、Vue、ReactTaro代码已在金融APP多个团队落地应用覆盖了原生、H5多个业务线以下是典型的应用场景 另外平台还提供了完善功能来帮助研发同学快速理解和调整系统生成的代码如UI和代码的联动、可视化Dom树、手动标注代码实时修改和预览、自动切图、CDN管理等主打一个实用、接地气下面我们通过一个1分钟演示来快速了解画眉。
一分钟了解画眉
画眉平台的关键操作流程为上传设计稿-打开设计稿-框选要生成代码的区域-查看并确认代码-下载代码平台目前只支持sketch设计稿上传设计稿的步骤建议由设计师通过Sketch插件上传通过Sketch插件可以生成准确的切图并且可自动识别缺失字体后续体验会更加丝滑。
框选完要生成代码的区域后可以点击右上角的“查看代码”打开代码区然后点击右侧的“预览”可以查看当前生成的代码效果。 高级功能介绍
CSS类名修改
平台目前生成的CSS样式类名还不够语义化为了帮助研发快速理解生成的代码并基于代码快速二次开发平台提供了修改class类名的功能。双击Dom结构中的class名称即可进入编辑状态修改完成后回车即可生效。 列表的识别
平台目前提供了自动识别列表、滚动列表、多行列表的能力如下图所示针对列表生成的代码会自动计算列表宽度、列表项横向及纵向间距。 针对于滚动列表会生成语言特定代码如Jue中滚动会通过scroll标签实现标准html中如vue、react等会通过overflow控制效果如下图所示 列表多状态
实际场景中列表中通常会有多种状态的样式平台提供了手动创建状态的功能如下面示例tab列表中分为选中的状态和未选中的状态分为两种样式选中的状态tab边框、颜色、背景、字重都与正常状态有所有区别此时我们可以通过“创建状态”的功能为列表添加状态状态添加完成后平台会自动生成针对性的样式如下图所示 标记功能介绍
“标记”是一种兜底功能当平台生成的代码不符合研发的预期时可通过“标记”功能进行手动打标如下面示例中的任务列表并没有自动识别为列表此时可以通过手动标记的方式将容器标记为“列表”这样平台则会自动生成带循环列表的代码同时也可以为列表项添加状态见下图演示 除了可以将容器标记为列表外另一种常见的场景为将容器标记为图片。下面这个示例中是一个带图表的楼层图表在UI里的表达是很复杂的因此生成的代码效果也不够理想此外研发在实现图表时通常是借助图表库来实现如eCharts等此时我们只需要在生成的代码中占位即可研发基于生成的代码二次开发时可自行将对应位置替换成图表下面来展示具体的操作 如上图所示我们首先将和图表相关的dom节点通过“编组”的功能放到一个容器里然后将容器标记为图片此时平台生成代码时会自动将对应的dom转换成图片对应的代里也只会生成一个img标签同时我们还可以给标记为图片的容器再编个组这样生成的代码就是img外套了一层div更方便我们二次开发。
结尾
经过持续攻关和优化画眉平台已在京东金融APP原生、H5十几个页面、几十个楼层中落地应用。
作者京东科技 杨飞
来源京东云开发者社区 转载请注明来源
