本公开的实施方式提供了一种交互界面的生成方法、装置、设备及介质。本公开通过获取目标视觉稿的地址信息，地址信息可以指示目标视觉稿在目标设计平台中的存储位置，以便基于地址信息，获取目标视觉稿的设计资源数据，从而对设计资源数据进行解析，以得到目标视觉稿对应的界面开发文件，由于目标视觉稿是对应于交互界面的，从而可以基于目标视觉稿对应的界面开发文件进行渲染，以实现交互界面的生成，本公开中交互界面的生成无需开发人员手动进行控件的添加和控件属性信息的填充，大大简化了界面开发过程的操作流程，从而可以提高界面开发效率。发效率。发效率。
【技术实现步骤摘要】
交互界面的生成方法、装置、设备及介质
[0001]本公开的实施方式涉及界面开发
，更具体地，本公开的实施方式涉及一种交互界面的生成方法、装置、设备及介质。
技术介绍
[0002]本部分旨在为权利要求书中陈述的本公开的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
[0003]用户界面（User Interface，UI）开发是程序开发的一项重要内容，前端开发和移动端软件开发的过程中不可避免的会涉及到UI界面的开发。
[0004]相关技术中，在进行UI界面的开发时，主要是由视觉设计人员根据产品需求绘制UI视觉稿，以便开发人员可以根据UI视觉稿进行相应的布局和开发工作。例如，可以由视觉设计人员通过可视化工具绘制可视化的UI视觉稿，以便开发人员可以通过在开发工具中手动添加控件并设置控件的位置、大小等属性信息的方式，开发工具基于已生成的控件和属性信息生成相应的代码，以实现UI界面的开发。
[0005]但是，控件的属性信息所包括的内容较多，并且手动添加控件以及设置控件属性信息的方式操作比较繁琐，从而导致界面开发效率较低。
技术实现思路
[0006]鉴于相关技术中界面开发效率较低的问题，本公开的实施方式至少提供一种交互界面的生成方法、装置、设备及介质。
[0007]在本公开实施方式的第一方面中，提供了一种交互界面的生成方法，该方法包括：获取目标视觉稿的地址信息，目标视觉稿对应于交互界面，地址信息用于指示目标视觉稿在目标设计平台中的存储位置；基于地址信息，获取目标视觉稿的设计资源数据；对设计资源数据进行解析，得到目标视觉稿对应的界面开发文件；基于界面开发文件进行渲染，以生成交互界面。
[0008]在本公开的一个实施例中，地址信息包括对应于目标视觉稿的稿件标识以及对应于目标视觉稿中的目标设计元素的元素标识；基于地址信息，获取目标视觉稿的设计资源数据，包括：从地址信息中，获取稿件标识和元素标识；基于稿件标识和元素标识，获取目标视觉稿的设计资源数据。
[0009]在本公开的一个实施例中，基于地址信息，获取目标视觉稿的设计资源数据，包括：通过平台预留接口，基于地址信息，从目标设计平台中获取目标视觉稿的设计资源数据。
[0010]在本公开的一个实施例中，目标设计平台为Figma平台，平台预留接口允许开发平
台通过Ruby脚本访问Figma平台，以从Figma平台获取目标视觉稿的设计资源数据。
[0011]在本公开的一个实施例中，设计资源数据包括文件数据、样式数据和自定义数据；其中，文件数据用于指示目标视觉稿中所包括的元素之间的嵌套关系；样式数据用于指示目标视觉稿中所包括的相应元素的样式信息，样式信息用于指示元素对应的控件在交互界面中的显示样式和显示位置；自定义数据用于指示自定义的默认样式信息，默认样式信息用于指示元素对应的控件在交互界面中的默认显示样式，不同类型的元素均对应有默认样式信息。
[0012]在本公开的一个实施例中，设计资源数据的数据类型为JSON数据；基于地址信息，获取目标视觉稿的设计资源数据，包括：基于地址信息，获取目标视觉稿的设计资源文件，设计资源文件中包括Document目录、Styles目录以及Components目录；从设计资源文件的Document目录下，获取文件数据，从设计资源文件的Styles目录下，获取样式数据，从设计资源文件的Components目录下，获取自定义数据。
[0013]在本公开的一个实施例中，对设计资源数据进行解析，得到目标视觉稿对应的界面开发文件，包括：基于JSON数据进行解析，生成作为界面开发文件的XIB文件，XIB文件用于搭建交互界面的视图框架，视图框架用于按照显示样式和显示位置对交互界面中相应的各个控件进行布局展示。
[0014]在本公开的一个实施例中，基于JSON数据进行解析，生成作为界面开发文件的XIB文件，包括：按照文件数据所指示的元素之间的嵌套关系进行递归解析，以获取各个元素在交互界面中对应的控件，并从样式数据中获取相应控件的样式信息；基于所获取到的控件以及相应控件的样式信息，生成XIB文件。
[0015]在本公开的一个实施例中，按照文件数据所指示的元素之间的嵌套关系进行递归解析，以获取到待生成的交互界面中的控件，并从样式数据中获取相应控件的样式信息，包括：按照文件数据所指示的元素之间的嵌套关系，依次生成嵌套层级由低到高的多个控件，并从样式数据中获取到每个控件对应的样式信息，其中，嵌套层级高的控件显示在嵌套层级低的控件中。
[0016]在本公开的一个实施例中，该方法还包括：对于未获取到对应样式信息的控件，基于控件对应的元素类型，从自定义数据中获取与元素类型相匹配的默认样式信息，作为控件的样式信息。
[0017]在本公开的一个实施例中，该方法还包括：生成XIB文件对应的Swift文件，Swift文件用于获取预设的后台数据，后台数据对应于交互界面中相应控件内所显示的数据内容。
[0018]在本公开的一个实施例中，基于界面开发文件进行渲染，以生成交互界面，包括：基于XIB文件进行渲染，以生成交互界面的视图框架，视图框架中包括已生成的各个控件；通过Swift文件获取后台数据，并将所获取到的后台数据填充至视图框架的相应
控件中进行显示，以生成交互界面。
[0019]在本公开实施方式的第二方面中，提供了一种交互界面的生成装置，该装置包括：获取模块，用于获取目标视觉稿的地址信息，目标视觉稿对应于交互界面，地址信息用于指示目标视觉稿在目标设计平台中的存储位置；获取模块，还用于基于地址信息，获取目标视觉稿的设计资源数据；解析模块，用于对设计资源数据进行解析，得到目标视觉稿对应的界面开发文件；生成模块，用于基于界面开发文件进行渲染，以生成交互界面。
[0020]在本公开的一个实施例中，地址信息包括对应于目标视觉稿的稿件标识以及对应于目标视觉稿中的目标设计元素的元素标识；获取模块，在用于基于地址信息，获取目标视觉稿的设计资源数据时，用于：从地址信息中，获取稿件标识和元素标识；基于稿件标识和元素标识，获取目标视觉稿的设计资源数据。
[0021]在本公开的一个实施例中，获取模块，在用于基于地址信息，获取目标视觉稿的设计资源数据时，用于：通过平台预留接口，基于地址信息，从目标设计平台中获取目标视觉稿的设计资源数据。
[0022]在本公开的一个实施例中，目标设计平台为Figma平台，平台预留接口允许开发平台通过Ruby脚本访问Figma平台，以从Figma平台获取目标视觉稿的设计资源数据。
[0023]在本公开的一个实施例中，设计资源数据包括文件数据、样式数据和自定义数据；其中，文件数据用于指示目标视觉稿中所包括的元素之间的嵌套关系；样式数据用于指示目标视觉稿中所包括的相应元素的样式信息，样式信息用于指示元素对应的控件在交互界面中的显示样式和显示位置；自定义数据用于指示自定义的默认样式信息，默认样式信息用于指示元素对应本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种交互界面的生成方法，其特征在于，所述方法包括：获取目标视觉稿的地址信息，所述目标视觉稿对应于所述交互界面，所述地址信息用于指示所述目标视觉稿在目标设计平台中的存储位置；基于所述地址信息，获取所述目标视觉稿的设计资源数据；对所述设计资源数据进行解析，得到所述目标视觉稿对应的界面开发文件；基于所述界面开发文件进行渲染，以生成所述交互界面。2.根据权利要求1所述的方法，其特征在于，所述地址信息包括对应于所述目标视觉稿的稿件标识以及对应于所述目标视觉稿中的目标设计元素的元素标识；所述基于所述地址信息，获取所述目标视觉稿的设计资源数据，包括：从所述地址信息中，获取所述稿件标识和所述元素标识；基于所述稿件标识和所述元素标识，获取所述目标视觉稿的设计资源数据。3.根据权利要求1所述的方法，其特征在于，所述基于所述地址信息，获取所述目标视觉稿的设计资源数据，包括：通过平台预留接口，基于所述地址信息，从所述目标设计平台中获取所述目标视觉稿的设计资源数据。4.根据权利要求3所述的方法，其特征在于，所述目标设计平台为Figma平台，所述平台预留接口允许开发平台通过Ruby脚本访问所述Figma平台，以从所述Figma平台获取所述目标视觉稿的设计资源数据。5.根据权利要求1所述的方法，其特征在于，所述设计资源数据包括文件数据、样式数据和自定义数据；其中，所述文件数据用于指示所述目标视觉稿中所包括的元素之间的嵌套关系；所述样式数据用于指示所述目标视觉稿中所包括的相应元素的样式信息，所述样式信息用于指示所述元素对应的控件在所述交互界面中的显示样式和显示位置；所述自定义数据用于指示自定义的默认样式信息，所述默认样式信息用于指示元素对应的控件在所述交互界面中的默认显示样式，不同类型的元素均对应有默认样式信息。6.根据权利要求5所述的方法，其特征在于，所述设计资源数据的数据类型为JSON数据；所述基于所述地址信息，获取所述目标视觉稿的设计资源数据，包括：基于所述地址信息，获取所述目标视觉稿的设计资源文件，所述设计资源文件中包括Document目录、Styles目录以及Components目录；从所述设计资源文件的Document目录下，获取所述文件数据，从所述设计资源文件的Styles目录下，获取所述样式数据，从所述设计资源文件的Components目录下，获取所述自定义数据。7.根据权利要求6所述的方法，其特征在于，所述对所述设计资源数据进行解析，得到所述目标视觉稿对应的界面开发文件，包括：基于所述JSON数据进行解析，生成作为所述界面开发文件的XIB文件，所述XIB文件用于搭建所述交互界面的视图框架，所述视图框架用于按照所述显示样式和所述显示...
【专利技术属性】
技术研发人员：戴悦，奚宇航，祝栗，崔奇凡，
申请(专利权)人：网易杭州网络有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。