CN112214218B - 一种Sketch组件库生成和管理*** - Google Patents
一种Sketch组件库生成和管理*** Download PDFInfo
- Publication number
- CN112214218B CN112214218B CN202011085380.5A CN202011085380A CN112214218B CN 112214218 B CN112214218 B CN 112214218B CN 202011085380 A CN202011085380 A CN 202011085380A CN 112214218 B CN112214218 B CN 112214218B
- 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.)
- Active
Links
- 238000013461 design Methods 0.000 claims abstract description 30
- 230000009467 reduction Effects 0.000 claims description 8
- 238000009877 rendering Methods 0.000 claims description 5
- 210000001072 colon Anatomy 0.000 claims description 4
- 238000006243 chemical reaction Methods 0.000 claims description 3
- 238000000034 method Methods 0.000 abstract description 11
- 230000008569 process Effects 0.000 abstract description 7
- 239000002245 particle Substances 0.000 abstract description 2
- 238000010276 construction Methods 0.000 abstract 1
- 230000003068 static effect Effects 0.000 description 5
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000013507 mapping Methods 0.000 description 2
- 230000007547 defect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 239000012634 fragment Substances 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/73—Program documentation
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Library & Information Science (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及软件设计和软件开发领域,特别是涉及一种Sketch组件库生成和管理***,该***包括三部分:第一部分,创建基础组件库***;第二部分,创建业务组件库***;第三部分,组件代码库***,本发明具有以下优点:1.组件库分为基础组件库和业务组件库,基础组件库为有限种类标准样式的组件集合,也是设计稿构建过程中的最小颗粒元素;2.业务组件由基础组件组合而成,设计师通过拖拽基础组件生产实际场景中的组合类型的组件元素,由于基础组件包含了样式属性信息,从而业务组件亦可以进行标准化的样式和状态切换;3.既提供了标准化的基础组件又提供了可灵活定制的业务组件生产能力支持。
Description
技术领域
本发明涉及软件设计和软件开发领域,特别涉及一种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组件显示。
样式支持多个样式的设置,如"导航栏/小程序左导航/颜色样式:白色/尺寸样式:大尺寸/",通过检测命名中的冒号,将所有样式进行抽取以便于后续根据样式选项进行组件的切换。
业务组件还可以嵌套子组件,子组件的命名以"@子组件"开头,比如"@卡片列表/顶部圆角/圆角半径:标准"中的"卡片列表"为子组件名字,同时属性面板中会出现对应的子组件配置项。
业务组件可以由设计师根据项目需要生成并加入到组件库,设计业务组件时选取基础组件库的组件进行拼接和叠加,形成新的业务组件,命名时需按照上述命名方式。
名词解释:组件库-存放在服务器中的组件数据集合,用以方便设计师团队同步共享组件数据。
通用公共属性
文本公共属性-包括包含文本的控件,比如按钮中的标题文本也支持此属性设置
组件特有属性,以按钮为例
表一
与现有技术相比,本发明的有益效果如下:
1.本发明提出了一种将有限类型、无限样式的基础组件元素的静态化设计图转化的方法;
2.通过HTML文档的属性和sketch操作、存储也是文档的属性,建立在sketch图层数据与HTML元素中的映射关系,以此将基础组件在WEB网页中的展示样式得以通过可视化的操作,动态的渲染成为sketch的图层;
3.本发明提出了一种基于类型/样式的业务组件存储索引和使用的静态化设计图转化的办法;
4.本发明提供了一种基于基础组件预置模板,得以在设计人员使用过程中所见即所得的同时,还可以将设计元件的配套代码输出,实现无还原误差。最后应说明的是:以上所述仅为本发明的优选实施例而已,并不用于限制本发明,尽管参照前述实施例对本发明进行了详细的说明,对于本领域的技术人员来说,其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (2)
1.一种Sketch组件库生成和管理***,其特征在于,该***包括三部分:
第一部分,创建基础组件库***:
基础组件库是构成业务组件或页面设计的基础和标准控件,基础组件编辑指定的属性,包括通用公共属性,文本公共属性和组件特有属性;基础组件库存放于服务器中,以HTML的WEB页的方式展现在组件库面板上供设计师选择和使用,从组件库面板上拖拽组件至Sketch画布时,利用HTML2Sketch开源库实现H5组件元素至Sketch图层的转换;选中画布中的基础组件Sketch图层后在插件面板显示可编辑的属性列表,调整属性后重新渲染;
第二部分,创建业务组件库***:
业务组件为SKETCH中的SymbolMaster对象,为固定样式、结构的元素,设计师在使用业务组件对象生产Symbol实例后,通过软件提供的web面板对于已选中的业务组件进行样式选择,每个样式采用和Symbol一一对应的方案,选择不同样式即选择不同Symbol对象,业务组件可选择的样式由命名来决定;
第三部分,组件代码库***:
设计师的UI稿和最终的软件实现之间还原度在现行模式下需要反复调整和校验,将基础/业务组件库和代码库进行结合;每个基础组件都对应一套代码模板,软件根据业务组件的组合及布局属性进行业务组件代码模板的生成,UI设计师在输出设计时同时将配套的代码输出。
2.如权利要求1所述的一种Sketch组件库生成和管理***,其特征在于,所述组件库的命名规则为:"组件分类/组件名字/组件样式A:样式A的值/组件样式B:样式B的值";样式支持多个样式的设置,如"导航栏/小程序左导航/颜色样式:白色/尺寸样式:大尺寸/",通过检测命名中的冒号,将所有样式进行抽取以便于后续根据样式选项进行组件的切换;业务组件嵌套子组件,子组件的命名以"@子组件"开头,同时属性面板中会出现对应的子组件配置项;业务组件由设计师根据项目需要生成并加入到组件库,设计业务组件时选取基础组件库的组件进行拼接和叠加,形成新的业务组件,命名时需按照上述命名方式。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011085380.5A CN112214218B (zh) | 2020-10-12 | 2020-10-12 | 一种Sketch组件库生成和管理*** |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011085380.5A CN112214218B (zh) | 2020-10-12 | 2020-10-12 | 一种Sketch组件库生成和管理*** |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112214218A CN112214218A (zh) | 2021-01-12 |
CN112214218B true CN112214218B (zh) | 2024-06-14 |
Family
ID=74053558
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011085380.5A Active CN112214218B (zh) | 2020-10-12 | 2020-10-12 | 一种Sketch组件库生成和管理*** |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112214218B (zh) |
Families Citing this family (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113157265A (zh) * | 2021-03-12 | 2021-07-23 | 杭州未名信科科技有限公司 | 一种用于可视化编程的数据处理方法及装置、介质、设备 |
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 | 北京计算机技术及应用研究所 | 一种基于机器学习的可视化图表代码自动生成方法 |
CN114422985B (zh) * | 2021-12-16 | 2024-03-22 | 北京思特奇信息技术股份有限公司 | 基础定制灵活组装专网业务开通方法及*** |
CN115145561B (zh) * | 2022-05-17 | 2023-02-03 | 三峡高科信息技术有限责任公司 | 一种可复用的工程管理业务组件库的构建方法 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104331285A (zh) * | 2014-10-30 | 2015-02-04 | 北京思特奇信息技术股份有限公司 | 一种代码自动生成方法及*** |
CN109062563A (zh) * | 2018-08-01 | 2018-12-21 | 北京百度网讯科技有限公司 | 用于生成页面的方法和装置 |
Family Cites Families (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110020307B (zh) * | 2017-11-30 | 2023-06-13 | 阿里巴巴集团控股有限公司 | 一种客户端视图的绘制方法和装置 |
US11087259B2 (en) * | 2018-07-12 | 2021-08-10 | Nintex UK Ltd. | Business designer |
CN110825374A (zh) * | 2019-11-04 | 2020-02-21 | 泰康保险集团股份有限公司 | 基于组件的页面生成方法及装置、电子设备和存储介质 |
-
2020
- 2020-10-12 CN CN202011085380.5A patent/CN112214218B/zh active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104331285A (zh) * | 2014-10-30 | 2015-02-04 | 北京思特奇信息技术股份有限公司 | 一种代码自动生成方法及*** |
CN109062563A (zh) * | 2018-08-01 | 2018-12-21 | 北京百度网讯科技有限公司 | 用于生成页面的方法和装置 |
Also Published As
Publication number | Publication date |
---|---|
CN112214218A (zh) | 2021-01-12 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112214218B (zh) | 一种Sketch组件库生成和管理*** | |
CN107844299B (zh) | 一种Web应用开发工具的实现方法 | |
CN109062567B (zh) | 基于b/s结构的信息管理***快速开发平台 | |
US8117594B2 (en) | Graphical editor with incremental development | |
CN108984172B (zh) | 一种界面文件的生成方法及装置 | |
CN113076096B (zh) | 一种桌面应用程序开发方法、装置、设备及存储介质 | |
CN111178023A (zh) | 一种可视化自定义报表设计*** | |
EP2915074A1 (en) | Automated report generation method | |
CN104346149A (zh) | 用于数据可视化的描述性框架 | |
CN113918138A (zh) | 流程处理方法、装置及计算机*** | |
CN105830056A (zh) | 与表格应用函数记号交互 | |
CN111324390A (zh) | 实现app内容可配置和实时更新的装置及方法 | |
US7895578B2 (en) | Apparatus and method for using connector components to provide connectivity to interactive graphics representative of input and output data | |
CN114089958A (zh) | 表单可视化配置方法及装置 | |
CN113900636A (zh) | 一种自助化渠道业务流程开发***及其开发方法 | |
CN112527373A (zh) | 一种基于运行综合管理中心业务的可视化平台拓展方法 | |
Campos et al. | Canonsketch: a user-centered tool for canonical abstract prototyping | |
CN115495069A (zh) | 基于模型驱动的煤炭工业软件流程实现方法、装置及设备 | |
KR20180135654A (ko) | 프로그램의 직관적 제작방법 | |
CN117075893A (zh) | 一种基于vue的移动端页面生成方法及*** | |
CN103309662A (zh) | 一种在嵌入式设备上生成多级菜单的方法 | |
CN109814864A (zh) | 一种数据可视化方法、可视化***、网页浏览***和设备 | |
Byson et al. | Software Architecture and Software Usability: A Comparison of Data Entry Form Designing Configurable Platforms. | |
CN114238072A (zh) | Hil需求设计方法、装置、计算机设备和存储介质 | |
Woo et al. | SDViz: A Context‐Preserving Interactive Visualization System for Technical Diagrams |
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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |