CN112214218A - 一种高性能高效率的Sketch组件库生成和管理方案及系统 - Google Patents

一种高性能高效率的Sketch组件库生成和管理方案及系统 Download PDF

Info

Publication number
CN112214218A
CN112214218A CN202011085380.5A CN202011085380A CN112214218A CN 112214218 A CN112214218 A CN 112214218A CN 202011085380 A CN202011085380 A CN 202011085380A CN 112214218 A CN112214218 A CN 112214218A
Authority
CN
China
Prior art keywords
component
library
style
components
basic
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011085380.5A
Other languages
English (en)
Inventor
赵化
金小俊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Secco Travel Technology Service Co ltd
Shanghai Saike Mobility Technology Service Co Ltd
Original Assignee
Shanghai Secco Travel Technology Service Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Secco Travel Technology Service Co ltd filed Critical Shanghai Secco Travel Technology Service Co ltd
Priority to CN202011085380.5A priority Critical patent/CN112214218A/zh
Publication of CN112214218A publication Critical patent/CN112214218A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/36Software reuse
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/73Program documentation

Abstract

本发明涉及软件设计和软件开发领域,特别是涉及一种高性能高效率的Sketch组件库生成和管理方案及系统,该方法及系统包括三部分:第一部分,创建基础组件库系统;第二部分,创建业务组件库系统;第三部分,组件代码库系统,本发明具有以下优点:1.组件库分为基础组件库和业务组件库,基础组件库为有限种类标准样式的组件集合,也是设计稿构建过程中的最小颗粒元素;2.业务组件由基础组件组合而成,设计师通过拖拽基础组件生产实际场景中的组合类型的组件元素,由于基础组件包含了样式属性信息,从而业务组件亦可以进行标准化的样式和状态切换;3.既提供了标准化的基础组件又提供了可灵活定制的业务组件生产能力支持。

Description

一种高性能高效率的Sketch组件库生成和管理方案及系统
技术领域
本发明涉及软件设计和软件开发领域,特别涉及一种高性能高效率的Sketch组件库生成和管理方案及系统。
背景技术
Sketch是一款轻量、高效的矢量设计工具,在网页,图标以及移动APP界面设计领域有着广泛的应用。特别是在移动APP的UI设计上,Sketch提供了丰富的插件,如测量工具、填充图片、快速整理画板等,使其成为APP设计最为流行的工具之一。
现有的Sketch工作模式存在着如下问题:
1.组件和模板没有相对统一的标准库,实际工作中存在大量的重复设计,效率较低;
2.目前的常用工作模式为面向场景的即时设计,组件和业务模板库的缺失严重制约组装式设计的实现;
3.设计图和最终在软件上的还原度存在着差异,需要多次的修改和反复校验;
4.在设计图Symbol使用过程中,Symbol的存储和索引比较混乱,容易形成碎片,且不容易管理。
发明内容
本发明要解决的技术问题是克服现有技术的缺陷,提供一种高性能高效率的Sketch组件库生成和管理方案及系统。
为了解决上述技术问题,本发明提供了如下的技术方案:
本发明一种高性能高效率的Sketch组件库生成和管理方案及系统,该管理方案及系统包括三部分:
第一部分,创建基础组件库系统:
基础组件库是构成业务组件或页面设计的基础和标准控件,基础组件可以编辑指定的属性,包括通用公共属性,文本公共属性和组件特有属性,基础组件库设计师可以直接使用,避免重复设计,且有效提高组件和设计的标准化程度;基础组件库存放于服务器中,以HTML的WEB页的方式展现在组件库面板上供设计师选择和使用,从组件库面板上拖拽组件至Sketch画布时,利用HTML2Sketch开源库实现H5组件元素至Sketch图层的转换;选中画布中的基础组件Sketch图层后在插件面板显示可编辑的属性列表,调整属性后重新渲染;
第二部分,创建业务组件库系统:
业务组件为SKETCH中的Symbol Master对象,为固定样式、结构的元素,设计师在使用业务组件对象生产Symbol实例后,可以通过软件提供的web面板对于已选中的业务组件进行样式选择,每个样式采用和Symbol一一对应的方案,选择不同样式即选择不同Symbol对象,在此方案下切换样式预览无需重新渲染HTML2SKETCH图层,只是选择不同的Symbol文件,显著提升效率,另外,业务组件可选择的样式由命名来决定;
第三部分,组件代码库系统:
设计师的UI稿和最终的软件实现之间还原度在现行模式下需要反复调整和校验,本方案将基础/业务组件库和代码库进行结合;每个基础组件都对应一套代码模板,软件根据业务组件的组合及布局属性进行业务组件代码模板的生成,UI设计师在输出设计时同时将配套的代码输出,软件工程师无需再将组件重新实现,直接使用模板代码,避免实现过程中的还原度误差;UI设计人员对页面设计中的UI预览图负责,设计所见即所得,APP页面的呈现由标准模板代码保证还原度。
作为本发明的一种优选技术方案,所述组件库的命名规则为:"组件分类/组件名字/组件样式A:样式A的值/组件样式B:样式B的值";样式支持多个样式的设置,如"导航栏/小程序左导航/颜色样式:白色/尺寸样式:大尺寸/",通过检测命名中的冒号,将所有样式进行抽取以便于后续根据样式选项进行组件的切换;业务组件还可以嵌套子组件,子组件的命名以"@子组件"开头,同时属性面板中会出现对应的子组件配置项;业务组件可以由设计师根据项目需要生成并加入到组件库,设计业务组件时选取基础组件库的组件进行拼接和叠加,形成新的业务组件,命名时需按照上述命名方式。
与现有技术相比,本发明的有益效果如下:
1.本发明提出了一种将有限类型、无限样式的基础组件元素的静态化设计图转化的方法;
2.通过HTML文档的属性和sketch操作、存储也是文档的属性,建立在sketch图层数据与HTML元素中的映射关系,以此将基础组件在WEB网页中的展示样式得以通过可视化的操作,动态的渲染成为sketch的图层;
3.本发明提出了一种基于类型/样式的业务组件存储索引和使用的静态化设计图转化的办法;
4.本发明提供了一种基于基础组件预置模板,得以在设计人员使用过程中所见即所得的同时,还可以将设计元件的配套代码输出,实现无还原误差。
附图说明
附图用来提供对本发明的进一步理解,并且构成说明书的一部分,与本发明的实施例一起用于解释本发明,并不构成对本发明的限制。在附图中:
表1为基础组件支持的属性列表;
图1为基础组件使用流程图;
图2为业务组件使用流程图;
图3为业务组件生成流程图;
图4为组件代码库的流程图。
具体实施方式
以下结合附图对本发明的优选实施例进行说明,应当理解,此处所描述的优选实施例仅用于说明和解释本发明,并不用于限定本发明。
实施例1
如图1-4所示,本发明提供一种高性能高效率的Sketch组件库生成和管理方案及系统,该管理方案及系统包括三部分:
第一部分,创建基础组件库系统:
基础组件库是构成业务组件或页面设计的基础和标准控件,基础组件可以编辑指定的属性,包括通用公共属性,文本公共属性和组件特有属性,基础组件库设计师可以直接使用,避免重复设计,且有效提高组件和设计的标准化程度;基础组件库存放于服务器中,以HTML的WEB页的方式展现在组件库面板上供设计师选择和使用,从组件库面板上拖拽组件至Sketch画布时,利用HTML2Sketch开源库实现H5组件元素至Sketch图层的转换;选中画布中的基础组件Sketch图层后在插件面板显示可编辑的属性列表,调整属性后重新渲染从web到sketch渲染使用的是根据需求更改定制的Html2Sketch开源库,原理是由web加载web页面后,先渲染完成页面,由于Html页面也是文档结构,而且sketch上无需动态的组件元素。在页面渲染完成后,依据浏览器加载渲染完成的文档,获取该文档下对应的元素结构,及元素的位置和大小。通过预先设置的规则,匹配html元素和sketch元素,生成一个满足sketch可解析的Json格式的数据文档;
第二部分,创建业务组件库系统:
业务组件为SKETCH中的Symbol Master对象,为固定样式、结构的元素,设计师在使用业务组件对象生产Symbol实例后,可以通过软件提供的web面板对于已选中的业务组件进行样式选择,比如导航栏是否有回退按钮,,每个样式采用和Symbol一一对应的方案,选择不同样式即选择不同Symbol对象,业务组件的每一个样式都是一个不同的Symbol对象,在此方案下切换样式预览无需重新渲染HTML2SKETCH图层,只是选择不同的Symbol文件,显著提升效率,另外,业务组件可选择的样式由命名来决定;
第三部分,组件代码库系统:
设计师的UI稿和最终的软件实现之间还原度在现行模式下需要反复调整和校验,本方案将基础/业务组件库和代码库进行结合;每个基础组件都对应一套代码模板,软件根据业务组件的组合及布局属性进行业务组件代码模板的生成,UI设计师在输出设计时同时将配套的代码输出,软件工程师无需再将组件重新实现,直接使用模板代码,避免实现过程中的还原度误差;UI设计人员对页面设计中的UI预览图负责,设计所见即所得,APP页面的呈现由标准模板代码保证还原度。
1.代码模板
只有基础组件才有代码模板。因为基础组件是最小的不可分割的能力颗粒。而且每个基础组件渲染的sketch图层对应着移动平台上相应的基础组件UI一致性、功能一致性等,需要对应的属性导出及调用方式的声明。
业务组件是由基础组件-对应动态数据、功能组件-对应原生图层的额外描述、原生组件-对应静态数据,及布局信息组成的。会动态的由DSL生产。
代码模板存储在插件库中,基础组件类型固定,数量有限,如:按钮控件、slider控件、文本控件。
2.代码输出
代码输出需要经历3个过程:
S1.检查模块的依赖;
S2.生成模块的声明代码;
S3.生成模块的调用代码。
对应项目中的操作是:
s1.检查导出页面的所有SymbolMaster依赖,并生成组;
s2.对所有组进行子元素(基础组件,模板)调用,对模块类声明,导出类属性;
s3.通过导出的类属性,对所有组进行调用代码的模板生成。根据导出对象的结构,使用调用代码模板,对倒数对象声明,合并嵌套类属性。
3.代码文件的输出
Sketch软件支持以Cocoascript为基础的js工具库来实现插件功能。CocoaScript为苹果公司自己开发,能调用起macOS的功能;在用户在选中想要识别和生成的视图组后,使用插件触发代码生成,经过以上的一系列操作,生成代码段,通过文件写入接口,生成一系列对应的文件。
组件库的命名规则为:"组件分类/组件名字/组件样式A:样式A的值/组件样式B:样式B的值"(从组件分类的第二个级别开始命名)。比如"小程序左导航"组件,包括两个symbol组件,分别命名为
"导航栏/小程序左导航/颜色样式:蓝色";
"导航栏/小程序左导航/颜色样式:白色";
其中"导航栏"为"组件分类","小程序左导航"为"组件名字","蓝色样式"为组件样式的名字"蓝色"、"白色"为组件该样式对应的值,系统在检测到命名中的冒号时,即知晓"蓝色"和"白色"为两个可选择的样式,在属性面板中选择白色或蓝色直接读取不同的symbol组件显示。
样式支持多个样式的设置,如"导航栏/小程序左导航/颜色样式:白色/尺寸样式:大尺寸/",通过检测命名中的冒号,将所有样式进行抽取以便于后续根据样式选项进行组件的切换。
业务组件还可以嵌套子组件,子组件的命名以"@子组件"开头,比如"@卡片列表/顶部圆角/圆角半径:标准"中的"卡片列表"为子组件名字,同时属性面板中会出现对应的子组件配置项。
业务组件可以由设计师根据项目需要生成并加入到组件库,设计业务组件时选取基础组件库的组件进行拼接和叠加,形成新的业务组件,命名时需按照上述命名方式。
名词解释:组件库-存放在服务器中的组件数据集合,用以方便设计师团队同步共享组件数据。
通用公共属性
Figure BDA0002720206960000071
文本公共属性-包括包含文本的控件,比如按钮中的标题文本也支持此属性设置
Figure BDA0002720206960000072
Figure BDA0002720206960000081
组件特有属性,以按钮为例
Figure BDA0002720206960000082
表一
与现有技术相比,本发明的有益效果如下:
1.本发明提出了一种将有限类型、无限样式的基础组件元素的静态化设计图转化的方法;
2.通过HTML文档的属性和sketch操作、存储也是文档的属性,建立在sketch图层数据与HTML元素中的映射关系,以此将基础组件在WEB网页中的展示样式得以通过可视化的操作,动态的渲染成为sketch的图层;
3.本发明提出了一种基于类型/样式的业务组件存储索引和使用的静态化设计图转化的办法;
4.本发明提供了一种基于基础组件预置模板,得以在设计人员使用过程中所见即所得的同时,还可以将设计元件的配套代码输出,实现无还原误差。最后应说明的是:以上所述仅为本发明的优选实施例而已,并不用于限制本发明,尽管参照前述实施例对本发明进行了详细的说明,对于本领域的技术人员来说,其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

Claims (2)

1.一种高性能高效率的Sketch组件库生成和管理方案及系统,其特征在于,该管理方案及系统包括三部分:
第一部分,创建基础组件库系统:
基础组件库是构成业务组件或页面设计的基础和标准控件,基础组件可以编辑指定的属性,包括通用公共属性,文本公共属性和组件特有属性,基础组件库设计师可以直接使用,避免重复设计,且有效提高组件和设计的标准化程度;基础组件库存放于服务器中,以HTML的WEB页的方式展现在组件库面板上供设计师选择和使用,从组件库面板上拖拽组件至Sketch画布时,利用HTML2Sketch开源库实现H5组件元素至Sketch图层的转换;选中画布中的基础组件Sketch图层后在插件面板显示可编辑的属性列表,调整属性后重新渲染;
第二部分,创建业务组件库系统:
业务组件为SKETCH中的Symbol Master对象,为固定样式、结构的元素,设计师在使用业务组件对象生产Symbol实例后,可以通过软件提供的web面板对于已选中的业务组件进行样式选择,每个样式采用和Symbol一一对应的方案,选择不同样式即选择不同Symbol对象,在此方案下切换样式预览无需重新渲染HTML2SKETCH图层,只是选择不同的Symbol文件,显著提升效率,另外,业务组件可选择的样式由命名来决定;
第三部分,组件代码库系统:
设计师的UI稿和最终的软件实现之间还原度在现行模式下需要反复调整和校验,本方案将基础/业务组件库和代码库进行结合;每个基础组件都对应一套代码模板,软件根据业务组件的组合及布局属性进行业务组件代码模板的生成,UI设计师在输出设计时同时将配套的代码输出,软件工程师无需再将组件重新实现,直接使用模板代码,避免实现过程中的还原度误差;UI设计人员对页面设计中的UI预览图负责,设计所见即所得,APP页面的呈现由标准模板代码保证还原度。
2.根据权利要求1所述的一种高性能高效率的Sketch组件库生成和管理方案及系统,其特征在于,所述组件库的命名规则为: "组件分类/组件名字/组件样式A:样式A的值/组件样式B:样式B的值";样式支持多个样式的设置,如"导航栏/小程序左导航/颜色样式:白色/尺寸样式:大尺寸/",通过检测命名中的冒号,将所有样式进行抽取以便于后续根据样式选项进行组件的切换; 业务组件还可以嵌套子组件,子组件的命名以 "@子组件"开头,同时属性面板中会出现对应的子组件配置项; 业务组件可以由设计师根据项目需要生成并加入到组件库,设计业务组件时选取基础组件库的组件进行拼接和叠加,形成新的业务组件,命名时需按照上述命名方式。
CN202011085380.5A 2020-10-12 2020-10-12 一种高性能高效率的Sketch组件库生成和管理方案及系统 Pending CN112214218A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011085380.5A CN112214218A (zh) 2020-10-12 2020-10-12 一种高性能高效率的Sketch组件库生成和管理方案及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011085380.5A CN112214218A (zh) 2020-10-12 2020-10-12 一种高性能高效率的Sketch组件库生成和管理方案及系统

Publications (1)

Publication Number Publication Date
CN112214218A true CN112214218A (zh) 2021-01-12

Family

ID=74053558

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011085380.5A Pending CN112214218A (zh) 2020-10-12 2020-10-12 一种高性能高效率的Sketch组件库生成和管理方案及系统

Country Status (1)

Country Link
CN (1) CN112214218A (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113110829A (zh) * 2021-04-19 2021-07-13 中国工商银行股份有限公司 多ui组件库数据处理方法及装置
CN113157265A (zh) * 2021-03-12 2021-07-23 杭州未名信科科技有限公司 一种用于可视化编程的数据处理方法及装置、介质、设备
CN113553055A (zh) * 2021-07-07 2021-10-26 北京计算机技术及应用研究所 一种基于机器学习的可视化图表代码自动生成方法
CN113626030A (zh) * 2021-06-28 2021-11-09 大唐互联科技(武汉)有限公司 一种数据可视化大屏快速搭建方法和系统
CN114422985A (zh) * 2021-12-16 2022-04-29 北京思特奇信息技术股份有限公司 基于psr模型驱动的baf专网业务开通方法及系统
CN115145561A (zh) * 2022-05-17 2022-10-04 三峡高科信息技术有限责任公司 一种可复用的工程管理业务组件库

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104331285A (zh) * 2014-10-30 2015-02-04 北京思特奇信息技术股份有限公司 一种代码自动生成方法及系统
CN109062563A (zh) * 2018-08-01 2018-12-21 北京百度网讯科技有限公司 用于生成页面的方法和装置
CN110020307A (zh) * 2017-11-30 2019-07-16 阿里巴巴集团控股有限公司 一种客户端视图的绘制方法和装置
US20200019899A1 (en) * 2018-07-12 2020-01-16 Nintex USA, Inc. Business Designer
CN110825374A (zh) * 2019-11-04 2020-02-21 泰康保险集团股份有限公司 基于组件的页面生成方法及装置、电子设备和存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104331285A (zh) * 2014-10-30 2015-02-04 北京思特奇信息技术股份有限公司 一种代码自动生成方法及系统
CN110020307A (zh) * 2017-11-30 2019-07-16 阿里巴巴集团控股有限公司 一种客户端视图的绘制方法和装置
US20200019899A1 (en) * 2018-07-12 2020-01-16 Nintex USA, Inc. Business Designer
CN109062563A (zh) * 2018-08-01 2018-12-21 北京百度网讯科技有限公司 用于生成页面的方法和装置
CN110825374A (zh) * 2019-11-04 2020-02-21 泰康保险集团股份有限公司 基于组件的页面生成方法及装置、电子设备和存储介质

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113157265A (zh) * 2021-03-12 2021-07-23 杭州未名信科科技有限公司 一种用于可视化编程的数据处理方法及装置、介质、设备
CN113110829A (zh) * 2021-04-19 2021-07-13 中国工商银行股份有限公司 多ui组件库数据处理方法及装置
CN113110829B (zh) * 2021-04-19 2024-02-20 中国工商银行股份有限公司 多ui组件库数据处理方法及装置
CN113626030A (zh) * 2021-06-28 2021-11-09 大唐互联科技(武汉)有限公司 一种数据可视化大屏快速搭建方法和系统
CN113553055A (zh) * 2021-07-07 2021-10-26 北京计算机技术及应用研究所 一种基于机器学习的可视化图表代码自动生成方法
CN114422985A (zh) * 2021-12-16 2022-04-29 北京思特奇信息技术股份有限公司 基于psr模型驱动的baf专网业务开通方法及系统
CN114422985B (zh) * 2021-12-16 2024-03-22 北京思特奇信息技术股份有限公司 基础定制灵活组装专网业务开通方法及系统
CN115145561A (zh) * 2022-05-17 2022-10-04 三峡高科信息技术有限责任公司 一种可复用的工程管理业务组件库

Similar Documents

Publication Publication Date Title
CN112214218A (zh) 一种高性能高效率的Sketch组件库生成和管理方案及系统
Paterno et al. One model, many interfaces
Lin et al. DENIM: Finding a tighter fit between tools and practice for web site design
CN108984172B (zh) 一种界面文件的生成方法及装置
US8417728B1 (en) User interfaces, methods, and systems for developing computer applications using artwork
KR101494844B1 (ko) 메타 데이터를 이용한 차트 변환 시스템 및 그 방법
CN113076096B (zh) 一种桌面应用程序开发方法、装置、设备及存储介质
CN102637184A (zh) 用于定制网页的方法和系统
CN111178023A (zh) 一种可视化自定义报表设计系统
US8767020B1 (en) Content representation sharing across applications
CN108108194B (zh) 用户界面编辑方法以及用户界面编辑器
CN102169483A (zh) 基于电子表单的幻灯片自动生成方法
US7895578B2 (en) Apparatus and method for using connector components to provide connectivity to interactive graphics representative of input and output data
CN106156306A (zh) 一种模板渲染方法和装置
CN113900636A (zh) 一种自助化渠道业务流程开发系统及其开发方法
Anderson et al. Pro business applications with silverlight 4
CN113535165A (zh) 界面生成方法、装置、电子设备及计算机可读存储介质
CN111367514A (zh) 页面卡片的开发方法和装置、计算设备和存储介质
KR100902193B1 (ko) 보고서 작성시스템, 검색결과에 대한 맞춤 보고서 제공방법 및 시스템, 그리고, 저장매체
CN115237387A (zh) 一种数字孪生应用的快速开发方法及系统
CN109643328A (zh) 演示程序中的内容建议
CN112631587A (zh) 界面原型设计方法、界面原型操作方法及存储介质
CN111367515B (zh) 页面卡片的开发方法、装置、计算设备和存储介质
US20140304681A1 (en) User Interfaces, Methods, and Systems for Developing Computer Applications Using Artwork
CN113407164B (zh) 一种基于思维导图和树状结构技术软件代码生成方法及系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination