画眉(京东科技设计稿转代码平台)介绍

前言

随着金融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、React,Taro代码,已在金融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十几个页面、几十个楼层中落地应用。

作者:京东科技 杨飞

来源:京东云开发者社区 转载请注明来源

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/641125.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QGIS生成热力图

目录 1 QGIS介绍 2 实现效果 3 具体步骤 3.1 获取北京市地图(区县级) 3.1.1 方法一:直接找到北京市地图 3.1.2 方法二:若没有单独的北京市地图,从中国地图上提取 3.2 获取数据 3.3 导入数据 1 QGIS介绍…

1148. 秘密的牛奶运输 (次小生成树)

1148. 秘密的牛奶运输 - AcWing题库 农夫约翰要把他的牛奶运输到各个销售点。 运输过程中,可以先把牛奶运输到一些销售点,再由这些销售点分别运输到其他销售点。 运输的总距离越小,运输的成本也就越低。 低成本的运输是农夫约翰所希望的。…

知识笔记(九十六)———在vue中使用echarts

1、安装 npm install echarts --save 2、在vue中引入(全局引入) // 引入echarts import echarts from echarts Vue.prototype.$echarts echarts3、在vue中的使用 需要用到echart的地方先设置一个div的id、宽高 提示: 可以在一个页面中引…

数据结构之使用顺序表写出通讯录

前言 昨天我们踏入了数据结构的深山,并且和顺序表battle了一番,虽说最后赢了,但同时也留下了一个问题:如何从顺序表的增删查改加强到通讯录的的增删查改,别急,今天就带你一探究竟。 一.回顾与思考 我们昨…

geemap学习笔记053:纹理特征

前言 纹理特征通常描述了遥感影像中像素之间的空间关系和变化,对于地物分类、目标检测以及图像分割等遥感应用非常有价值。本节将会介绍Earth Engine中提供的一些纹理特征计算方法,包括熵和灰度共生矩阵。 1 导入库并显示数据 import ee import geema…

【UE5】第一次尝试项目转插件(Plugin)的时候,无法编译

VS显示100条左右的错误,UE热编译也不能通过。原因可能是[名字.Build.cs]文件的错误,缺少一些内容,比如说如果要写UserWidget类,那么就要在 ]名字.Build.cs] 中加入如下内容: public class beibaoxitong : ModuleRules …

自己本机Video retalking制作数字人

首先需要注意的是,这个要求你的笔记本显存和内存都比较大。我的电脑内存是64G,显卡是8G,操作系统是Windows 11,勉强能够运行出来,但是效果不是很好。 效果如下,无法上传视频,只能通过图片展示出…

[分章:阅读]《我的第一本算法书》

第一章数据结构 1.链表 1、数据结构之一,线性排列数据,指针链接数据;访问O(n),删除/添加O(1) 2、类似链条。 2.数组 1、线性排列数据,含数据下标(即索引&…

C++如何在0和1之间取随机数

在C中&#xff0c;你可以使用 <random> 库来生成0和1之间的随机数。这个库提供了各种生成随机数的方法&#xff0c;包括均匀分布的随机数。 下面是一个简单的例子&#xff0c;展示如何使用 <random> 库来生成0和1之间的随机数&#xff1a; cpp复制代码 #include…

二、docker的常用命令(持续补充img)

目录 一、启动相关1.设置容器开机启动 二、查询相关1.查询所有容器&#xff08;包括停止的&#xff09; 三、修改相关1.指定容器开机自启动 一、启动相关 1.设置容器开机启动 在我们使用镜像run一个容器的时候&#xff0c;希望这个容器随着docker的启动而启动&#xff08;我的…

Ubuntu20.04.3LTS桌面版与Window10双系统并存

Ubuntu20.04.3LTS桌面版与Window10双系统并存 文章目录 Ubuntu20.04.3LTS桌面版与Window10双系统并存1.分区与安装1. 硬盘分区1. 一般用途2. 服务器用 2. 操作系统版本及分区信息3. 安装时创建用户4. 安装后修改root设置用户密码&#xff1a;3. 安装时指定ip4. 设置静态IP 2. 安…

【leetcode100-051到054】【图论】四题合集

【岛屿数量】 给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以假设…

Java线程池七大参数详解和配置(面试重点)

一、corePoolSize核心线程数 二、maximunPoolSize最大线程数 三、keepAliveTime空闲线程存活时间 四、unit空闲线程存活时间的单位 五、workQueue线程工作队列 1、ArrayBlockingQueue FIFO有界阻塞队列 2、LinkedBlockingQueue FIFO无限队列 3、PriorityBlockingQueue V…

【代码随想录】刷题笔记Day54

前言 差单调栈就结束代码随想录一刷啦&#xff0c;回家二刷打算改用python补充进博客&#xff0c;小涛加油&#xff01;&#xff01;&#xff01; 647. 回文子串 - 力扣&#xff08;LeetCode&#xff09; 双指针法 中心点外扩&#xff0c;注意中心点可能有一个元素可能有两个…

neo4j jdk17下 dump 报错

更换jdk版本 只需要改下bin目录下的neo4j.bat, 把set "JAVA_HOMEXXXX"加入进去就行 windows SET "JAVA_HOMEc:\...." linux bin目录下 neo4j 在首行添加JAVA_HOME/usr/local/jdk文件夹即可 tomcat 指定jdk 找到bin下的setclasspath.bat文件&#xff1b;在…

Supervised Contrastive 损失函数详解

有什么不对的及时指出&#xff0c;共同学习进步。(●’◡’●) 有监督对比学习将自监督批量对比方法扩展到完全监督设置&#xff0c;能够有效地利用标签信息。属于同一类的点簇在嵌入空间中被拉到一起&#xff0c;同时将来自不同类的样本簇推开。这种损失显示出对自然损坏很稳…

【Linux C | 进程】进程终止、等待 | exit、_exit、wait、waitpid

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

【Kafka】开发实战和Springboot集成kafka

目录 消息的发送与接收生产者消费者 SpringBoot 集成kafka服务端参数配置 消息的发送与接收 生产者 生产者主要的对象有&#xff1a; KafkaProducer &#xff0c; ProducerRecord 。 其中 KafkaProducer 是用于发送消息的类&#xff0c; ProducerRecord 类用于封装Kafka的消息…

C 练习实例39

题目&#xff1a;有一个已经排好序的数组。现输入一个数&#xff0c;要求按原来的规律将它插入数组中。 代码&#xff1a; #include <stdio.h> #define N 10 int main() {int a[N]{1,3,5,7,9,11,13,15,17}; //元素数组int nN;int i,temp;printf("原始数组是:\n&qu…

仅使用K-M法+Cox比例风险模型就能发二区文章 | SEER公共数据库周报(1.17)

欢迎各位参加本周中山大学著名卫生统计学家方积乾教授公益直播讲座&#xff01; 就在本周三晚&#xff0c;主题为“真实世界研究与RCT研究”&#xff0c;欢迎各位预约参加&#xff01; SEER&#xff08;The Surveillance, Epidemiology, and End Results&#xff09;数据库是由…