Ux设计稿转代码的实现有很多,但基本上生成的代码基本上都没有实际使用价值,本课题介绍了实现一个具有实际应用价值的Ux设计稿转可用代码的一种可行实践。内容包括一、Ux设计稿自动识别的实现方案,涉及Ux团队的设计方法调整和自动识别算法。二、自动生成代码算法,如何生成符合人类思维习惯且人类可继续修改的代码。三、本方案的后续演进方向思考。其中第一二点对打算或者正在此领域推进的小伙伴来说,有很强的指导意义。
1. Ux团队设计方法的更新,必要的辅助设计工具。
Ux设计师需要统一设计方法,给Ux设计稿添加一些辅助信息,这些辅助信息大多数可由设计工具(如sketch)自动添加。也可由设计师人工添加,但是应该尽可能减少人工添加的辅助信息,人工参与越多,越容易出错,效率也越低。工具无法添加的辅助信息,应当由识别算法的增强来弥补,在算法增强之前,可临时由人工辅助。
2. Ux设计稿识别算法的开发
基于Ux设计稿本身、辅助信息、ux设计规范等内容,自动从设计稿中提取出足够多的信息来生成代码。包括组件的类型、位置、尺寸等关键信息,文本识别、图标识别等辅助信息提取。
3. 自动生成人类可理解可继续修改的代码的算法
基于第二步获得的数据,生成代码,这个环节的最大挑战在于如何生成出对人类友好的代码,一些如axure的工具也可以直接导出为html,甚至还带有交互,但是这些代码对人类极其不友好,也不具有一个产品APP所需要的基本能力(如响应性)
在中兴通讯就职13年,基本上都从事与Web相关的技术,从早年的Flash(Flex)到现在的Web技术,都非常精通。同时也有几年的C++/Java的工作经历。有近10年的Web相关技术一线研发经验,现任中兴业务中台低代码平台负责人和首席架构师,牵头中兴公司低代码平台ZDE的长期演进设计工作。入选中兴通讯技术专家名录,方向为Web技术,中兴通讯5级专家。
擅长领域:Web技术、低代码
开启设计即开发模式——Ux设计稿转代码的探索与实践
现在,但凡有一定规模的公司或者团队,基本都会有专职的ux团队,配合产品方和研发团队,开发出体验良好的产品。传统的Ux团队与研发团队都是通过ux设计稿(高保真图为主)来实现协同。ux团队给出设计稿,研发团队复刻出来变成产品。这个过程低效、极易出错,主要体现为设计稿细节多还原度低、沟通成本高、Ux规范调整代价大、设计稿无法落地等诸多问题。我们急需有一种方法可以实现ux设计稿直接转成可用代码,这样不仅可以解决重复劳动、低效率的问题,还可以大大提升设计稿还原度。