CN115220718A - 一种ui设计方法、设计设备、服务器及存储介质 - Google Patents

Abstract

本申请实施例提供一种UI设计方法、设计设备、服务器及存储介质，其中方法包括：展示用于UI设计的画布，并同步预先设计的多个基础UI组件；基础UI组件包括UI区域内的至少一个UI原子组件，基础UI组件设置有配置项并且预先开发有组件代码；选择至少一个目标基础UI组件，并将目标基础UI组件部署到所述画布，一个目标基础UI组件部署在所述画布的一个区域；确定目标基础UI组件的配置项的配置数据；其中，所述画布部署的目标基础UI组件，以及目标基础UI组件的配置数据，形成UI设计稿；UI设计稿用于与目标基础UI组件预先开发的组件代码相结合，以生成页面代码。本申请实施例通过标准化的基础UI组件以及组件代码，为提升UI设计稿的还原度提供了支持。

Description

一种UI设计方法、设计设备、服务器及存储介质

技术领域

本申请实施例涉及页面技术领域，具体涉及一种UI设计方法、设计设备、服务器及存储介质。

背景技术

UI(User Interface，用户界面)是系统和用户之间进行交互和信息交换的媒介。UI设计师在进行UI设计时，需要产出UI设计稿，然后由代码开发人员按照UI设计稿进行代码开发，形成可被客户端识别的页面代码。上述过程中，页面代码对于UI设计稿的还原度，是衡量UI设计质量的重要指标，因此如何在UI设计师进行UI设计时，为提升UI设计稿的还原度提供支持，成为了本领域技术人员亟需解决的技术问题。

发明内容

有鉴于此，本申请实施例提供一种UI设计方法、设计设备、服务器及存储介质，以在UI设计师进行UI设计时，为提升UI设计稿的还原度提供支持。

为实现上述目的，本申请实施例提供如下技术方案。

第一方面，本申请实施例提供一种UI设计方法，包括：

展示用于UI设计的画布，并同步预先设计的多个基础UI组件；所述基础UI组件包括UI区域内的至少一个UI原子组件，所述基础UI组件设置有配置项并且预先开发有组件代码；

从所述多个基础UI组件中选择至少一个目标基础UI组件，并将所述目标基础UI组件部署到所述画布，其中，一个目标基础UI组件部署在所述画布的一个区域；

确定所述目标基础UI组件的配置项的配置数据；

其中，所述画布部署的目标基础UI组件，以及目标基础UI组件的配置项的配置数据，形成所述UI的UI设计稿；所述UI设计稿用于与所述目标基础UI组件预先开发的组件代码相结合，以生成所述UI设计稿的页面代码。

第二方面，本申请实施例提供一种UI设计方法，包括：

读取UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据；其中，所述目标基础UI组件从预先设计的多个基础UI组件中选择，所述基础UI组件包括UI区域内的至少一个UI原子组件，所述基础UI组件设置有用于调整配置数据的配置项，并且预先开发有组件代码；

基于基础UI组件预先开发的组件代码，获取所述目标基础UI组件的组件代码，并将所述目标基础UI组件的配置项的配置数据应用到目标基础UI组件中；

根据所述目标基础UI组件的组件代码、所述目标基础UI组件应用的配置数据、以及所述UI设计稿对应的目标基础UI组件的布局顺序，生成页面代码。

第三方面，本申请实施例提供一种设计设备，包括至少一个存储器和至少一个处理器，所述存储器存储一条或多条计算机可执行指令，所述处理器调用所述一条或多条计算机可执行指令，以执行如上述第一方面所述的UI设计方法。

第四方面，本申请实施例提供一种服务器，包括至少一个存储器和至少一个处理器，所述存储器存储一条或多条计算机可执行指令，所述处理器调用所述一条或多条计算机可执行指令，以执行如上述第二方面所述的UI设计方法。

第五方面，本申请实施例提供一种存储介质，所述存储介质存储一条或多条计算机可执行指令，所述一条或多条计算机可执行指令被执行时实现如上述第一方面所述的UI设计方法，或者，如上述第二方面所述的UI设计方法。

第六方面，本申请实施例提供一种计算机程序，所述计算机程序被执行时实现如上述第一方面所述的UI设计方法，或者，如上述第二方面所述的UI设计方法。

本申请实施例在对UI进行设计时，可展示用于UI设计的画布，并同步预先设计的多个基础UI组件；从所述多个基础UI组件中选择至少一个目标基础UI组件，并将所述目标基础UI组件部署到所述画布，其中，一个目标基础UI组件部署在所述画布的一个区域；确定所述目标基础UI组件的配置项的配置数据；其中，所述画布部署的目标基础UI组件，以及目标基础UI组件的配置项的配置数据，形成所述UI的UI设计稿；所述UI设计稿用于与所述目标基础UI组件预先开发的组件代码相结合，以生成所述UI设计稿的页面代码。

可以看出，UI设计师统一使用标准化的基础UI组件进行UI设计，并且基础UI组件涵盖了UI的UI区域内的UI原子组件，UI设计师针对基础UI组件的调整工作体现在通过配置项调整配置数据上，UI设计师只需保障按照设计需求对配置数据进行合理、准确的调整；同时，基础UI组件预先开发有组件代码，本申请实施例是在以基础UI组件为单位形成的页面级的UI设计稿的基础上，结合预先开发的组件代码生成UI的页面代码，使得页面代码是基于标准的组件代码生成，避免了代码开发人员单独针对UI设计稿进行代码开发所出现的偏差。本申请实施例通过标准化的基础UI组件进行UI设计，并且基于基础UI组件预先开发的组件代码生成页面代码，UI设计师的设计工作体现在基础UI组件的选择和配置数据的调整上，避免了UI设计师的设计偏好偏差、代码开发人员对于UI设计稿的理解偏差，对UI设计稿的还原度的影响。因此本申请实施例可在UI设计师进行UI设计时，通过标准化的基础UI组件以及组件代码，为提升UI设计稿的还原度提供支持。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1A为UI设计过程的示例图。

图1B为UI设计稿的部分示例图。

图2A为本申请实施例提供的UI设计过程的另一示例图。

图2B为本申请实施例提供的基础UI组件与UI原子组件的示例图。

图2C为基础UI组件的开放配置项的示例图。

图3为本申请实施例提供的UI设计方法的流程图。

图4A为确定画布的示例图。

图4B为同步基础UI组件的示例图。

图4C为将基础UI组件部署到画布的示例图。

图4D为调整目标基础UI组件的配置项的配置数据的示例图。

图5为本申请实施例提供的生成页面结构信息的方法流程图。

图6A为本申请实施例提供的UI设计方法的另一流程图。

图6B为生成页面代码的示例图。

图7为本申请实施例提供的UI设计装置的框图。

图8为本申请实施例提供的设计设备的框图。

图9为本申请实施例提供的UI设计装置的另一框图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

图1A示例性的示出了UI设计过程的示例图。如图1所示，UI设计主要涉及UI设计师的工作以及代码开发人员的工作。

UI设计师在进行UI设计时，主要利用设计设备设计UI原子组件，并通过多个UI原子组件形成页面形态的UI设计稿。UI原子组件可以视为是UI中最小单位的UI组件，例如输入框、图标按钮等。图1B示例性的示出了UI设计稿的部分示例图，如图1B所示，该UI设计稿包括多个图标按钮和输入框，各个图标按钮和输入框可以视为是构成UI的UI原子组件；UI设计师在进行UI设计时，可分别设计这些图标按钮和输入框，并通过排列这些图标按钮和输入框形成UI设计稿。

UI设计师产出的UI设计稿可以提供给代码开发人员，从而代码开发人员可利用代码开发设备，按照UI设计稿的设计内容，甚至是UI设计师在UI设计稿中的标注，进行代码开发，以形成UI的页面代码。进一步的，该页面代码可以被用于展示UI的客户端识别，从而客户端在识别处理页面代码后，可展示出UI。

上述过程中，代码开发人员在按照UI设计稿开发页面代码时，所开发的页面代码对于UI设计稿的还原度，是衡量UI设计质量的重要指标。也就是说，代码开发人员开发的页面代码是否能对UI设计师设计的UI设计稿进行准确的还原，对于UI设计质量至关重要。然而，不同的UI设计师的设计偏好可能不同，不同代码开发人员对于UI设计稿的理解也可能不同，这严重影响了页面代码对于UI设计稿的还原度。

进一步的，在一个示例中，代码开发人员在开发页面代码时，可能是在原有页面的代码基础上，基于调整的UI原子组件，进行代码开发；然而，对于同一个UI原子组件，不同的UI设计师的设计偏好并不相同，并且不同代码开发人员对于同一个UI原子组件开发出来的代码也可能存在偏差，这导致针对调整的UI原子组件进行开发代码后，存在调整的UI原子组件与原有页面不相协调的情况，从而造成UI设计的返工工作，影响UI设计的设计质量和设计效率。

基于上述存在的问题，本申请实施例提供新型的UI设计方案，通过在UI设计过程中，提供标准化的基础UI组件以及基础UI组件的组件代码，从而实现UI设计的标准化工作，提升UI设计稿的还原度。

作为可选实现，图2A示例性的示出了本申请实施例提供的UI设计过程的另一示例图。如图2A所示，本申请实施例的UI设计过程主要涉及基础组件设计师、代码开发人员、UI设计师以及服务器的工作。

在本申请实施例中，基础组件设计师可利用其终端设备，完成基础UI组件的设计工作，包括设计基础UI组件，以及设置基础UI组件的配置项。基础UI组件可以是本申请实施例提供的具有较高通用性和复用度的标准化的UI组件。在一些实施例中，本申请实施例的基础UI组件不同于前文描述的UI原子组件，基础UI组件可以包括UI区域内的至少一个UI原子组件。在一个示例中，在UI为页面形态时，UI区域可以视为是UI页面中的区域，例如UI区域为UI页面中的行等。作为可选实现，基础UI组件可以涵盖UI区域内的一个或多个UI原子组件，以及UI区域内的UI原子组件的布局。

在一个示例中，图2B示例性的示出了本申请实施例提供的基础UI组件与UI原子组件的示例图。参照图2B所示，UI页面可以拆分为多个行，以UI区域为行为例，基础UI组件可以包括UI页面中行内的UI原子组件，UI原子组件如图2B所示的图标按钮、输入框等。

在本申请实施例中，基础组件设计师可以为基础UI组件设置配置项，以便后续UI设计师在进行UI设计时，能够通过基础UI组件的配置项调整基础UI组件的配置数据。基础UI组件的配置数据可以例如基础UI组件的样式(高度、颜色等)、字符内容、内部UI原子组件的布局等配置。

在一些实施例中，本申请实施例可以通过基础UI组件的配置项，调整基础UI组件的样式等配置。作为可选实现，基础组件设计师可设置基础UI组件的配置项包括开放配置项和不开放配置项；其中，开放配置项可开放给UI设计师，以使得UI设计师能够对基础UI组件的样式、字符内容、UI原子组件的布局等配置进行调整；不开放配置项可以视为是基础UI组件在代码中的配置项，其不开放给UI设计师。

作为一种示例，图2C示例性的示出了基础UI组件的开放配置项的示例图，可进行参照。如图2C所示，基础UI组件内可以设置多个图标按钮形式的UI原子组件；同时，基础UI组件具有开放给UI设计师的开放配置项，该开放配置项允许UI设计师进行基础UI组件内的UI原子组件的布局调整(例如设置图形按钮的列数)、基础UI组件的背景色、圆角数值、文本内容等配置的调整。需要说明的是，图2C仅是本申请实施例的示例性示意，基础UI组件的开放配置项允许调整的具体配置，可由基础组件设计师根据实际情况设置，本申请实施例并不设限。在一些实施例中，基础组件设计师可利用其终端设备(例如个人计算机等)，手动设计基础UI组件，以及基础UI组件的配置项。

基础组件设计师在设计完成多个基础UI组件以及基础UI组件的配置项(开放配置项和不开放配置项)后，可以产出基础UI组件的设计稿；基础UI组件的设计稿可提供给代码开发人员进行基础UI组件的代码开发。可以看出，区别于图1A所示的代码开发人员基于UI设计师的UI设计稿进行代码开发，本申请实施例的代码开发是针对基础组件设计师设计的基础UI组件；也就是说，在本申请实施例中，代码开发人员是对基础组件设计师设计的较高通用性和复用度的基础UI组件进行代码开发，而不是UI设计师针对具体UI页面的UI设计稿进行代码开发。

作为可选实现，代码开发人员可利用代码开发设备，基于基础UI组件的设计稿中指示的基础UI组件的设计内容，以及基础UI组件的配置项，进行基础UI组件的代码开发，从而产出基础UI组件的组件代码，以及基础UI组件的组件配置文件。例如，代码开发人员可代码化实现基础UI组件，形成组件代码，并且代码化实现基础UI组件的配置项，形成基础UI组件的组件配置文件。

代码开发人员完成代码开发后，可将基础UI组件、基础UI组件的组件代码以及组件配置文件发布到服务器的组件中心。组件中心负责基础UI组件的管理，以及基础UI组件的组件代码、组件配置文件的存储。

UI设计师在设计UI时，可利用设计设备拉取服务器的组件中心中存储的基础UI组件，完成UI设计，产出页面级的UI设计稿。区别于图1A所示的UI设计师通过设计UI原子组件，来完成UI的页面设计，在本申请实施例中，UI设计师可利用组件中心提供的标准化的基础UI组件，完成UI的各UI区域的设计(例如UI设计师可选择UI的各UI区域使用的基础UI组件)，并且通过基础UI组件的配置项进行配置数据调整，例如根据具体的设计需求，调整基础UI组件的样式、内部UI原子组件的布局等配置。UI设计师在利用基础UI组件以及其配置项，完成UI设计后，可产出页面级的UI设计稿。

在UI设计师产出UI设计稿后，本申请实施例并不是再由代码开发人员完成UI设计稿的代码开发。在本申请实施例中，基于代码开发人员针对基础UI组件已经预先开发了组件代码，本申请实施例可将UI设计稿转换为UI的页面配置，例如通过读取UI设计稿中使用的基础UI组件以及基础UI组件的配置项的配置数据，生成UI的页面结构信息(包含使用的基础UI组件以及配置数据)，以实现将UI设计稿转换为页面配置；进而通过将该页面结构信息上传到服务器，以便服务器基于预先开发的组件代码，生成UI的页面代码。

在本申请实施例中，服务器可基于页面结构信息中使用的基础UI组件，调用基础UI组件的组件代码，并基于页面结构信息中指示的基础UI组件的配置项的配置数据，将基础UI组件的配置项的配置数据应用到基础UI组件的组件配置文件中；进而服务器可基于UI组件的组件代码以及组件配置文件，自动生成与所述页面结构信息对应的页面代码，且该页面代码可被客户端识别。

本申请实施例通过标准化的基础UI组件进行UI设计，并且基于基础UI组件预先开发的组件代码生成页面代码，UI设计师的设计工作体现在基础UI组件的选择和配置数据的调整上，避免了UI设计师的设计偏好、代码开发人员对于UI设计稿的理解偏差，影响UI设计稿的还原度的问题，因此本申请实施例可在UI设计师进行UI设计时，以标准化的基础UI组件以及组件代码，为提升UI设计稿的还原度提供支持。

下面从UI设计师进行UI设计的角度，对本申请实施例提供的UI设计方案进行介绍。作为可选实现，图3示例性的示出了本申请实施例提供的UI设计方法的可选流程图。该方法流程可由设计设备执行实现，该设计设备可以是UI设计师使用的终端设备。参照图3，该方法流程可以包括如下步骤。

在步骤S310中，展示用于UI设计的画布，并同步预先设计的多个基础UI组件；所述基础UI组件包括UI区域内的至少一个UI原子组件，所述基础UI组件设置有配置项。

UI设计师在进行UI设计时，可通过设计设备确定用于UI设计的画布，所述画布可以是空白画布。在一些实施例中，UI设计师可定义UI的页面尺寸，从而设计设备可生成该页面尺寸对应的画布。作为一个示例，图4A示例性的示出了确定画布的示例图，UI设计师可以在设计设备打开用于UI设计的设计软件，设计软件可以具有工具界面，UI设计师在该设计软件新建UI设计任务并进行命名之后，UI设计师可从工具界面展示的适用多个型号的智能手机的页面尺寸中，选择UI的页面尺寸，从而设计设备基于UI设计师选择的页面尺寸，可展示相应页面尺寸的画布，以便UI设计师在画布上进行UI设计。例如，结合图4A所示，UI设计师选择页面尺寸为375×667，则设计设备可生成375×667的画布。进一步的，本申请实施例也可对画布进行进一步的尺寸调整(例如UI设计师可通过拉伸或者回缩画布的边框，以对画布进行尺寸调整)。

设计设备可同时同步服务器的组件中心存储的多个基础UI组件，以便UI设计师从中选择用于在所述画布中部署的基础UI组件。在本申请实施例中，基础UI组件并不同于输入框、图标按钮等UI原子组件，基础UI组件可以包括UI区域内的至少一个UI原子组件，本申请实施例可通过为UI的多个页面区域选择多个基础UI组件，以实现在所述画布进行UI的页面设计。并且，本申请实施例提供的基础UI组件设置有配置项，UI设计师可通过调整配置项的配置数据，对基础UI组件的样式、内部UI原子组件的布局等配置进行调整，以满足具体的设计需求。基础UI组件的更多介绍可参照前文相应部分的描述，此处不再展开。

在一个示例性中，图4B示例性的示出了同步基础UI组件的示例图，如图4B所示，设计软件可以提供组件库的插件，该组件库的插件可以同步组件中心存储的多个基础UI组件。当UI设计师点击了设计软件的工具界面的组件库的按钮后，设计设备可向组件中心请求同步基础UI组件，从而设计软件的组件库中可展示同步的多个基础UI组件，以便UI设计师从同步的基础UI组件中，选择用于在所述画布中部署的基础UI组件。作为可选实现，组件库同步的多个基础UI组件可以包括多个不同类型的基础UI组件，一个类型下具有一个或多个基础UI组件，该多个不同类型的基础UI组件可以由基础组件设计师提前设计。

在步骤S311中，从所述多个基础UI组件中选择至少一个目标基础UI组件，并将所述目标基础UI组件部署到所述画布，其中，一个目标基础UI组件部署在所述画布的一个区域。

本申请实施例在从服务器的组件中心同步预先设计的多个基础UI组件后，UI设计师可从同步的多个基础UI组件中选择当前用于UI设计的一个或多个基础UI组件，为便于说明，UI设计师选择的基础UI组件可称为目标基础UI组件，目标基础UI组件的数量可以为一个或多个。

UI设计师在选择目标基础UI组件后，可将目标基础UI组件部署到所述画布中，基于基础UI组件包括UI区域内的UI原子组件，因此UI设计师将选择的目标基础UI组件部署到所述画布，则可视为是在所述画布对UI进行了页面区域的设计，例如画布的一个区域可以为UI的一个页面区域；从而UI设计师将选择的多个目标基础UI组件分别部署到所述画布，则可在所述画布对UI实现多个页面区域的设计。

作为可选实现，本申请实施例可在所述画布的一个区域，部署一个选择的目标基础UI组件，从而通过在所述画布的多个区域部署多个目标基础UI组件，以对UI的多个页面区域进行设计。例如，本申请实施例可在所述画布的多个行部署多个目标基础UI组件，以对UI的多个行进行设计。需要说明的是，UI设计师可根据设计需求，将选择的目标基础UI组件部署到所述画布的特定区域，本申请实施例并不设限目标基础UI组件在所述画布中部署的区域；在一个示例中，UI设计师可以按照所述画布的由上至下的布局，依序在所述画布的每一行部署选择的目标基础UI组件。

在一些实施例中，UI设计师可将组件库中选择的目标基础UI组件，拖拽到所述画布中，以实现将目标基础UI组件部署到所述画布。作为一个示例，图4C示例性的示出了将基础UI组件部署到所述画布的示例图。如图4C所示，组件库在同步组件中心的基础UI组件后，UI设计师可基于设计需求，从组件库中选择目标基础UI组件，并将选择的目标基础UI组件拖拽到所述画布中，例如，按照所述画布的由上至下的布局，在所述画布的各个区域部署目标基础UI组件。结合图4C所示，按照设计需求，当UI设计师从组件库中选择基础UI组件411作为所述画布第一行需要部署的目标基础UI组件时，UI设计师可将基础UI组件411从组件库中拖拽到所述画布的第一行；按照设计需求，当UI设计师从组件库中选择基础UI组件412作为所述画布第二行需要部署的目标基础UI组件时，UI设计师可将基础UI组件412从组件库中拖拽到所述画布的第二行，以此方式，UI设计师可从组件库中选择所述画布的每一行部署的目标基础UI组件，并分别拖拽到所述画布的每一行，从而对所述画布的每一行进行UI设计。

在步骤S312中，确定所述目标基础UI组件的配置项的配置数据。

UI设计师选择目标基础UI组件并部署到所述画布后，基于目标基础UI组件设置的配置项，UI设计师可以对部署到所述画布中的目标基础UI组件进行配置数据的调整。在一些实施例中，本申请实施例可在将目标基础UI组件部署到所述画布后，展示出目标基础UI组件的开放配置项的初始配置数据；如果UI设计师对目标基础UI组件的开放配置项的初始配置数据进行了调整，则可得到目标基础UI组件的开放配置项的配置数据，并且基于调整的配置数据适应调整所述画布中展示的目标基础UI组件。

作为可选实现，设计软件可以具有画布和工具界面，画布可以部署目标基础UI组件并展示相应的UI设计效果；工具界面可以展示用于UI设计所使用的工具，例如组件库等。在可选实现中，当UI设计师将目标基础UI组件拖拽到画布时，设计软件的工具界面可以展示目标基础UI组件的配置项的初始配置数据，从而UI设计师可在初始配置数据不适应于设计需求时，对配置项的配置数据进行调整。作为可选实现，在基础UI组件的配置项包括开放配置项以及不开放配置项时，本申请实施例可基于目标基础UI组件的开放配置项，进行目标基础UI组件的配置数据调整，例如基础UI组件的开放配置项可以包括基础UI组件的样式、字符内容、内部UI原子组件的布局等不同配置的配置项，本申请实施例可基于目标基础UI组件的开放配置项，对目标基础UI组件的样式、字符内容、内部UI原子组件的布局等不同配置进行调整。

可以理解的是，针对目标基础UI组件的开放配置项所调整的配置数据，可以视为是目标基础UI组件的开放配置项的变量值。在一些实施例中，本申请实施例可为基础UI组件预先设置组件配置文件，组件配置文件记录有基础UI组件的各配置项的配置数据；当UI设计师选定目标基础UI组件后，该目标基础UI组件的配置项的配置数据为初始值，而基于UI设计师对于目标基础UI组件的配置项的配置数据的调整(具体可以是对开放配置项的配置数据进行调整)，目标基础UI组件的配置项的值成为变量值。

作为一个示例，图4D示例性的示出了调整目标基础UI组件的配置项的配置数据的示例图。如图4D所示，目标基础UI组件被拖拽到所述画布后，工具界面可展示目标基础UI组件的开放配置项，基于开放配置项，UI设计师可调整目标基础UI组件内部的UI原子组件的布局，例如将目标基础UI组件内部的图形按钮的列数由5调整为4。在调整目标基础UI组件的配置项的配置数据后，画布展示的目标基础UI组件可基于调整的配置数据进行适应调整。

可以理解的是，本申请实施例预先设计的多个基础UI组件可以视为是标准化的基础UI组件的模板，UI设计师在进行UI设计时，可根据设计需求，从组件库展示的作为模板的基础UI组件中选择合适的模板，并且根据设计需求，调整选择的基础UI组件的配置项的配置数据，以使得选择的模板经过配置调整后，能够适应于UI设计师的当前设计需求(例如适应于UI设计师对于样式、UI原子组件的布局的设计需求等)。

进一步的，所述画布部署的目标基础UI组件，以及目标基础UI组件的配置项的配置数据，可形成所述UI的UI设计稿；所述UI设计稿用于与所述目标基础UI组件预先开发的组件代码相结合，以生成所述UI设计稿的页面代码。

在所述画布部署一个或多个目标基础UI组件，并且为目标基础UI组件调整配置数据后，所述画布中的目标基础UI组件可拼接形成页面级的UI设计稿，并且本申请实施例可在UI设计稿中携带目标基础UI组件的配置项的配置数据。UI设计稿可以是UI设计师进行UI设计的设计产物。

区别于代码开发人员按照UI设计稿进行代码开发的方式，基于本申请实施例在设计基础UI组件后，代码开发人员针对基础UI组件已预先开发出了组件代码，本申请实施例可由服务器自动生成UI设计稿的页面代码。作为可选实现，服务器可将UI设计稿中的目标基础组件与预先开发的组件代码相结合，以生成UI设计稿的页面代码。该页面代码可以视为是UI可被客户端识别的页面代码，用于在客户端识别处理页面代码后，展示相应UI。进一步的，基于基础UI组件设置的组件配置文件，本申请实施例还可在生成UI设计稿的页面代码时，将UI设计稿中目标基础组件的配置数据，应用到目标基础组件的组件配置文件中。

本申请实施例提供的UI设计方法可为UI设计师提供标准化的基础UI组件，该基础UI组件可以包括UI区域内的至少一个UI原子组件；从而UI设计师在进行UI设计时，不再以UI原子组件为单位进行UI设计，而是以基础UI组件为单位进行UI设计；即在一个基础UI组件涵盖UI的一个UI区域内的UI原子组件的情况下，通过多个基础UI组件可实现对UI内的多个UI区域的设计。并且，基于基础UI组件设置的配置项，UI设计师可以对基础UI组件的配置数据进行调整，使得UI设计师可根据不同的设计需求，进行基础UI组件的设计调整；同时，本申请实施例是针对基础UI组件进行组件代码的预先开发，而不是针对UI原子组件进行组件代码的开发，从而使得后续页面代码的生成能够统一标准。

基于上述设置，本申请实施例在对UI进行设计时，可展示用于UI设计的画布，并同步预先设计的多个基础UI组件；从所述多个基础UI组件中选择至少一个目标基础UI组件，并将所述目标基础UI组件部署到所述画布，其中，一个目标基础UI组件部署在所述画布的一个区域；确定所述目标基础UI组件的配置项的配置数据；其中，所述画布部署的目标基础UI组件，以及目标基础UI组件的配置项的配置数据，生成所述UI的UI设计稿；所述UI设计稿用于与所述目标基础UI组件预先开发的组件代码相结合，以生成所述UI设计稿的页面代码。

可以看出，UI设计师统一使用标准化的基础UI组件进行UI设计，并且基础UI组件涵盖了UI的UI区域内的UI原子组件，UI设计师针对基础UI组件的调整工作体现在通过配置项调整配置数据上，UI设计师只需保障按照设计需求对配置数据进行合理、准确的调整；同时，基础UI组件预先开发有组件代码，本申请实施例是在以基础UI组件为单位形成的页面级的UI设计稿的基础上，结合预先开发的组件代码生成UI的页面代码，使得页面代码是基于标准的组件代码生成，避免了代码开发人员单独针对UI设计稿进行代码开发所出现的偏差。本申请实施例通过标准化的基础UI组件进行UI设计，并且基于基础UI组件预先开发的组件代码生成页面代码，UI设计师的设计工作体现在基础UI组件的选择和配置数据的调整上，避免了UI设计师的设计偏好偏差、代码开发人员对于UI设计稿的理解偏差，对UI设计稿的还原度的影响。因此本申请实施例可在UI设计师进行UI设计时，通过标准化的基础UI组件以及组件代码，为提升UI设计稿的还原度提供支持。

在进一步的一些实施例中，设计设备可基于UI设计师产出的UI设计稿，确定UI的页面结构信息，从而设计设备可通过将该页面结构信息上传给服务器，以使得服务器基于页面结构信息，自动生成UI设计稿对应的页面代码。作为可选实现，设计设备生成页面结构信息可以视为是将UI设计稿转换为UI的页面配置的过程，即页面结构信息可以视为是UI的页面配置，包含目标基础UI组件以及配置数据。

在一些实施例中，图5示例性的示出了本申请实施例提供的生成页面结构信息的方法流程图。该方法流程可由设计设备执行实现，例如，UI设计师在完成UI设计稿后，由设计设备自动基于UI设计稿生成UI的页面结构信息。参照图5所示，该方法流程可以包括如下步骤。

在步骤S510中，读取UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据。

作为可选实现，在UI设计师完成UI设计稿后，设计设备可自动读取UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据。作为一种示例，当UI设计师完成UI设计稿的设计后，UI设计师可点击设计软件的“还原”按钮，以通过设计软件内置的画布解析插件，自动生成UI设计稿的页面结构信息。在自动生成页面结构信息的过程中，该画布解析插件可自动读取UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据。

在步骤S511中，根据读取的目标基础UI组件、配置数据以及目标基础UI组件的布局顺序，确定UI的页面结构信息。

在一些实施例中，本申请实施例可将读取的目标基础UI组件以及配置数据，按照目标基础UI组件的布局顺序进行拼接，形成页面结构信息；例如按照所述画布的由上至下的布局顺序，拼接各个目标基础UI组件以及配置数据，形成页面结构信息。

作为可选实现，页面结构信息可以是JSON(JavaScript Object Notation。JavaScript对象简谱)格式的数据，例如页面结构信息可以包括多个JSON数据，一个JSON数据对应一个目标基础UI组件以及配置数据，并且多个JSON数据按照目标基础UI组件的布局顺序进行布局排列。

在步骤S512中，将所述页面结构信息上传到服务器。

在一些实施例中，当设计软件的画布解析插件自动解析画布上的目标基础UI组件以及目标基础UI组件的配置项的配置数据，生成UI的页面结构信息后，画布解析插件可将页面结构信息上传到服务器，以便服务器生成UI设计稿的页面代码。

下面从服务器的角度，对本申请实施例提供发UI设计方法进行介绍。下文从服务器角度描述的UI设计方法的相关内容可与前文相应部分对应参照。

作为可选实现，图6A示例性的示出了本申请实施例提供的UI设计方法的另一可选流程图。该方法流程可由服务器执行实现，参照图6A，该方法流程可以包括如下步骤。

在步骤S610中，获取UI设计稿对应的目标基础UI组件，以及目标基础UI组件的配置项的配置数据。

在一些实施例中，服务器可获取设计设备上传的UI设计稿对应的页面结构信息(页面结构信息的得到过程可参照前文相应部分的描述)，从页面结构信息中获取到目标基础UI组件，以及目标基础UI组件的配置项的配置数据。在另一些实施例中，服务器也可直接获取设计设备提交的UI设计稿中的目标基础UI组件，以及目标基础UI组件的配置项的配置数据，本申请实施例并不一定通过页面结构信息的方式表达目标基础UI组件以及配置数据。

在步骤S611中，基于基础UI组件预先开发的组件代码，获取所述目标基础UI组件的组件代码，并将目标基础UI组件的配置项的配置数据应用到目标基础UI组件中。

本申请实施例在基础组件设计师设计出基础UI组件后，可由代码开发人员代码化实现基础UI组件，从而得到基础UI组件的组件代码以及组件配置文件；从而服务器在生成页面代码的阶段，可基于UI中使用的目标基础UI组件，从基础UI组件预先开发的组件代码中，获取目标基础UI组件的组件代码，以使得UI中使用的目标基础组件具有相应的代码化内容。作为可选实现，服务器可从组件中心中获取目标基础UI组件的组件代码。

同时，由于UI设计师在设计UI时，对目标基础UI组件的配置项设置了配置数据，因此本申请实施例可将目标基础UI组件的配置项的配置数据应用到目标基础UI组件中。在一些实施例中，本申请实施例可针对基础UI组件预先设置组件配置文件，本申请实施例可通过将目标基础UI组件的配置项的配置数据，应用到目标基础UI组件的组件配置文件中，以实现将目标基础UI组件的配置项的配置数据应用到目标基础UI组件中。

在步骤S612中，根据所述目标基础UI组件的组件代码、所述目标基础UI组件应用的配置数据、以及所述UI设计稿对应的目标基础UI组件的布局顺序，生成页面代码。

本申请实施例在获得目标基础UI组件的组件代码，并将目标基础UI组件的配置项的配置数据应用到目标基础UI组件后(例如，将配置数据应用到组件配置文件中)，本申请实施例可基于目标基础UI组件的组件代码、目标基础UI组件应用的配置数据(例如目标基础UI组件的组件配置文件)，形成能够被客户端识别的页面代码。在一些实施例中，由于目标基础UI组件是按照一定的布局顺序进行排列，因此本申请实施例在生成页面代码的过程中，还需结合目标基础UI组件的布局顺序。作为可选实现，目标基础UI组件的布局顺序可以视为是UI的页面布局，本申请实施例可根据UI的页面布局，页面布局中使用的各个目标基础UI组件的组件代码以及组件配置文件，生成UI的页面代码。

在进一步的可能实现中，服务器在基于页面结构信息生成页面代码时，页面结构信息可选为JSON格式的数据，例如页面结构信息可以包括多个JSON数据，一个JSON数据对应一个目标基础UI组件以及配置数据，并且多个JSON数据按照目标基础UI组件的布局顺序进行布局排列；从而，服务器可从多个JSON数据中读取多个目标基础UI组件以及各个目标基础UI组件的配置数据；进而，服务器可根据目标基础UI组件的组件代码、目标基础UI组件的组件配置文件(组件配置文件应用有目标基础UI组件的配置数据)、以及多个JSON数据的布局顺序，生成页面代码。

在一个示例中，图6B示例性的示出了生成页面代码的示例图，如图6B所示，UI设计稿的页面结构信息中表达有目标基础UI组件610和620、目标基础UI组件610的配置数据611、目标基础UI组件620的配置数据621，并且目标基础UI组件610与620的布局顺序为目标基础UI组件610位于620的上方；则服务器在解析页面结构信息后，可从组件中心中获取目标基础UI组件610的组件代码，将配置数据611应用到目标基础UI组件610的组件配置文件中，同时，获取目标基础UI组件620的组件代码，将配置数据621应用到目标基础UI组件620的组件配置文件中；并且基于目标基础UI组件610与620的布局顺序，以目标基础UI组件610的组件代码、组件配置文件，以及目标基础UI组件620的组件代码、组件配置文件，生成UI的页面代码。

在一个应用示例中，本申请实施例提供的UI设计方法可应用于中台场景。需要说明的是，UI设计作为日常开发工作中的重要工作，UI设计稿的还原度是UI设计的一个重要指标，然而对于一个功能、语义相近的UI组件，由于不同UI设计师的设计偏好、不同代码开发人员的差异化理解，会造成UI设计稿的还原度的不一致，影响UI设计质量；特别是在中台场景下，中台的UI设计师和代码开发人员，需要对接众多UI设计需求，这导致上述问题被进一步放大，致使UI设计稿的还原度走查及修复需要耗费大量资源、严重影响UI设计质量和效率。

本申请实施例以基础UI组件为单位进行UI设计，而不再以UI原子组件为单位进行UI设计，通过提前设计基础UI组件及其配置项，并且由代码开发人员针对基础UI组件预先进行代码开发，从而为UI设计师提供标准化的基础UI组件和组件代码，形成UI设计的设计标准。后续UI设计师在产出UI设计稿时，可从提前设计的基础UI组件中选择目标基础UI组件，并基于目标基础UI组件的配置项进行配置数据调整，由目标基础UI组件以及配置数据共同形成UI设计稿。进一步的，在生成页面代码时，服务器可获取UI设计稿对应的目标基础UI组件及其配置数据，结合预先开发的组件代码，生成UI设计稿的页面代码。可见，本申请实施例可在UI设计师进行UI设计时，以标准化的基础UI组件以及组件代码，为提升UI设计稿的还原度提供支持。

下面从设计设备的角度对本申请实施例提供的UI设计装置进行介绍，下文描述的UI设计装置可以认为是设计设备为实现本申请实施例提供的UI设计方法所需设置的功能模块。下文描述的装置内容可与上文描述的内容相互对应参照。

作为可选实现，图7示例性的示出了本申请实施例提供的UI设计装置的可选框图。该UI设计装置可应用于设计设备，参照图7，该装置可以包括：

画布确定以及同步模块710，用于展示用于UI设计的画布，并同步预先设计的多个基础UI组件；所述基础UI组件包括UI区域内的至少一个UI原子组件，所述基础UI组件设置有配置项并且预先开发有组件代码；

目标组件选择及部署模块711，用于从所述多个基础UI组件中选择至少一个目标基础UI组件，并将所述目标基础UI组件部署到所述画布，其中，一个目标基础UI组件部署在所述画布的一个区域；

配置数据确定模块712，用于确定所述目标基础UI组件的配置项的配置数据；

其中，所述画布部署的目标基础UI组件，以及目标基础UI组件的配置项的配置数据，形成所述UI的UI设计稿；所述UI设计稿用于与所述目标基础UI组件预先开发的组件代码相结合，以生成所述UI设计稿的页面代码。

在一些实施例中，所述配置项包括开放配置项和不开放配置项；配置数据确定模块712，用于确定所述目标基础UI组件的配置项的配置数据包括：

展示所述目标基础UI组件的开放配置项的初始配置数据；

对所述目标基础UI组件的开放配置项的初始配置数据进行调整，得到所述目标基础UI组件的开放配置项的配置数据。

在进一步的一些实施例中，本申请实施例提供的UI设计装置还可用于：

读取所述UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据；

根据读取的目标基础UI组件以及配置数据，确定UI的页面结构信息，所述页面结构信息为UI的页面配置；

将所述页面结构信息上传到服务器，以便所述服务器基于所述页面结构信息生成所述页面代码。

在一些实施例中，所述页面结构信息包括多个JSON数据，一个JSON数据对应一个目标基础UI组件以及配置数据，所述多个JSON数据按照目标基础UI组件的布局顺序进行布局排列。

在一些实施例中，画布确定以及同步模块710，用于展示用于UI设计的画布包括：

确定UI的页面尺寸，生成所述页面尺寸对应的画布。

在一些实施例中，画布确定以及同步模块710，用于同步预先设计的多个基础UI组件包括：

通过组件库的插件，从服务器的组件中心拉取预先设计的多个基础UI组件，并在组件库进行展示；所述组件中心存储有预先设计的基础UI组件、基础UI组件预先开发的组件代码、以及基础UI组件预先设置的组件配置文件，所述组件配置文件预先记录有基础UI组件的配置项的初始配置数据。

在一些实施例中，目标组件选择及部署模块711，用于从所述多个基础UI组件中选择至少一个目标基础UI组件包括：

从组件库展示的多个基础UI组件中选择至少一个目标基础UI组件。

在一些实施例中，目标组件选择及部署模块711，用于将所述目标基础UI组件部署到所述画布包括：

将从组件库选择的目标基础UI组件拖拽到所述画布。

本申请实施例还提供一种设计设备，该设计设备可通过设置上述所述的UI设计装置，以实现本申请实施例提供的UI设计方法。作为可选实现，图8示例性的示出了本申请实施例提供的设计设备的可选框图。如图8所示，该设计设备可以包括：至少一个处理器810，至少一个通信接口820，至少一个存储器830和至少一个通信总线840。

在本申请实施例中，处理器810、通信接口820、存储器830、通信总线840的数量为至少一个，且处理器810、通信接口820、存储器830通过通信总线840完成相互间的通信。

可选的，通信接口820可以为用于进行网络通信的通信模块的接口。

可选的，处理器810可能是CPU，GPU(Graphics Processing Unit，图形处理器)，NPU(嵌入式神经网络处理器)，FPGA(Field Programmable Gate Array，现场可编程逻辑门阵列)，TPU(张量处理单元)，AI芯片，特定集成电路ASIC(Application SpecificIntegrated Circuit)，或者是被配置成实施本申请实施例的一个或多个集成电路等。

存储器830可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。

其中，存储器830存储一条或多条计算机可执行指令，处理器810调用所述一条或多条计算机可执行指令，以执行本申请实施例提供的设计设备执行的UI设计方法。

下面从服务器的角度对本申请实施例提供的UI设计装置进行介绍，下文描述的UI设计装置可以认为是服务器为实现本申请实施例提供的UI设计方法所需设置的功能模块。下文描述的装置内容可与上文描述的内容相互对应参照。

作为可选实现，图9示例性的示出了本申请实施例提供的UI设计装置的另一可选框图。该UI设计装置可应用于服务器，参照图9，该装置可以包括：

读取模块910，用于读取UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据；其中，所述目标基础UI组件从预先设计的多个基础UI组件中选择，所述基础UI组件包括UI区域内的至少一个UI原子组件，所述基础UI组件设置有用于调整配置数据的配置项，并且预先开发有组件代码；

代码以及配置应用模块911，用于基于基础UI组件预先开发的组件代码，获取所述目标基础UI组件的组件代码，并将所述目标基础UI组件的配置项的配置数据应用到目标基础UI组件中；

页面代码生成模块912，用于根据所述目标基础UI组件的组件代码、所述目标基础UI组件应用的配置数据、以及所述UI设计稿对应的目标基础UI组件的布局顺序，生成页面代码。

在一些实施例中，读取模块910，用于读取UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据包括：

获取所述UI设计稿对应的页面结构信息；

从所述页面结构信息中读取目标基础UI组件，以及目标基础UI组件的配置项的配置数据。

在一些实施例中，代码以及配置应用模块911，用于将所述目标基础UI组件的配置项的配置数据应用到目标基础UI组件中包括：

将所述目标基础UI组件的配置项的配置数据，应用到目标基础UI组件的组件配置文件中；其中，基础UI组件预先设置有组件配置文件，所述组件配置文件预先记录有基础UI组件的配置项的初始配置数据。

在一些实施例中，所述页面结构信息包括多个JSON数据，一个JSON数据对应一个目标基础UI组件以及配置数据，并且多个JSON数据按照目标基础UI组件的布局顺序进行布局排列；

读取模块910，用于从所述页面结构信息中读取目标基础UI组件，以及目标基础UI组件的配置项的配置数据包括：

从多个JSON数据中读取多个目标基础UI组件以及各个目标基础UI组件的配置数据。

在一些实施例中，页面代码生成模块912，用于根据所述目标基础UI组件的组件代码、所述目标基础UI组件应用的配置数据、以及所述UI设计稿对应的目标基础UI组件的布局顺序，生成页面代码包括：

根据所述目标基础UI组件的组件代码、所述目标基础UI组件的组件配置文件、以及多个JSON数据的布局顺序，生成页面代码。

本申请实施例还提供一种服务器，该服务器可通过设置上述描述的UI设置装置，以实现本申请实施例提供的UI设计方法。作为可选实现，该服务器的可选框图可结合图8所示，包括至少一个存储器和至少一个处理器，所述存储器存储一条或多条计算机可执行指令，所述处理器调用所述一条或多条计算机可执行指令，以执行如本申请实施例提供的服务器执行的UI设计方法。

本申请实施例还提供一种存储介质，该存储介质存储一条或多条计算机可执行指令，该一条或多条计算机可执行指令被执行时实现如本申请实施例提供的设计设备执行的UI设计方法，或者，如本申请实施例提供的服务器执行的UI设计方法。

本申请实施例还提供一种计算机程序，该计算机程序存储一条或多条计算机可执行指令，该一条或多条计算机可执行指令被执行时实现如本申请实施例提供的设计设备执行的UI设计方法，或者，如本申请实施例提供的服务器执行的UI设计方法。

上文描述了本申请实施例提供的多个实施例方案，各实施例方案介绍的各可选方式可在不冲突的情况下相互结合、交叉引用，从而延伸出多种可能的实施例方案，这些均可认为是本申请实施例披露、公开的实施例方案。

虽然本申请实施例披露如上，但本申请并非限定于此。任何本领域技术人员，在不脱离本申请的精神和范围内，均可作各种更动与修改，因此本申请的保护范围应当以权利要求所限定的范围为准。

Claims (12)

1.一种UI设计方法，其中，包括：

展示用于UI设计的画布，并同步预先设计的多个基础UI组件；所述基础UI组件包括UI区域内的至少一个UI原子组件，所述基础UI组件设置有配置项并且预先开发有组件代码；

从所述多个基础UI组件中选择至少一个目标基础UI组件，并将所述目标基础UI组件部署到所述画布，其中，一个目标基础UI组件部署在所述画布的一个区域；

确定所述目标基础UI组件的配置项的配置数据；

其中，所述画布部署的目标基础UI组件，以及目标基础UI组件的配置项的配置数据，形成所述UI的UI设计稿；所述UI设计稿用于与所述目标基础UI组件预先开发的组件代码相结合，以生成所述UI设计稿的页面代码。

2.根据权利要求1所述的方法，其中，所述配置项包括开放配置项和不开放配置项；所述确定所述目标基础UI组件的配置项的配置数据包括：

展示所述目标基础UI组件的开放配置项的初始配置数据；

对所述目标基础UI组件的开放配置项的初始配置数据进行调整，得到所述目标基础UI组件的开放配置项的配置数据。

3.根据权利要求1或2所述的方法，其中，还包括：

读取所述UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据；

根据读取的目标基础UI组件以及配置数据，确定UI的页面结构信息，所述页面结构信息为UI的页面配置；

将所述页面结构信息上传到服务器，以便所述服务器基于所述页面结构信息生成所述页面代码。

4.根据权利要求3所述的方法，其中，所述页面结构信息包括多个JSON数据，一个JSON数据对应一个目标基础UI组件以及配置数据，所述多个JSON数据按照目标基础UI组件的布局顺序进行布局排列。

5.根据权利要求1所述的方法，其中，所述展示用于UI设计的画布包括：确定UI的页面尺寸，生成所述页面尺寸对应的画布；

所述同步预先设计的多个基础UI组件包括：通过组件库的插件，从服务器的组件中心拉取预先设计的多个基础UI组件，并在组件库进行展示；所述组件中心存储有预先设计的基础UI组件、基础UI组件预先开发的组件代码、以及基础UI组件预先设置的组件配置文件，所述组件配置文件预先记录有基础UI组件的配置项的初始配置数据。

6.根据权利要求5所述的方法，其中，所述从所述多个基础UI组件中选择至少一个目标基础UI组件包括：

从组件库展示的多个基础UI组件中选择至少一个目标基础UI组件；

所述将所述目标基础UI组件部署到所述画布包括：

将从组件库选择的目标基础UI组件拖拽到所述画布。

7.一种UI设计方法，其中，包括：

读取UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据；其中，所述目标基础UI组件从预先设计的多个基础UI组件中选择，所述基础UI组件包括UI区域内的至少一个UI原子组件，所述基础UI组件设置有用于调整配置数据的配置项，并且预先开发有组件代码；

基于基础UI组件预先开发的组件代码，获取所述目标基础UI组件的组件代码，并将所述目标基础UI组件的配置项的配置数据应用到目标基础UI组件中；

根据所述目标基础UI组件的组件代码、所述目标基础UI组件应用的配置数据、以及所述UI设计稿对应的目标基础UI组件的布局顺序，生成页面代码。

8.根据权利要求7所述的方法，其中，所述读取UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据包括：

获取所述UI设计稿对应的页面结构信息；

从所述页面结构信息中读取目标基础UI组件，以及目标基础UI组件的配置项的配置数据；

所述将所述目标基础UI组件的配置项的配置数据应用到目标基础UI组件中包括：

将所述目标基础UI组件的配置项的配置数据，应用到目标基础UI组件的组件配置文件中；其中，基础UI组件预先设置有组件配置文件，所述组件配置文件预先记录有基础UI组件的配置项的初始配置数据。

9.根据权利要求8所述的方法，其中，所述页面结构信息包括多个JSON数据，一个JSON数据对应一个目标基础UI组件以及配置数据，并且多个JSON数据按照目标基础UI组件的布局顺序进行布局排列；

所述从所述页面结构信息中读取目标基础UI组件，以及目标基础UI组件的配置项的配置数据包括：

从多个JSON数据中读取多个目标基础UI组件以及各个目标基础UI组件的配置数据；

所述根据所述目标基础UI组件的组件代码、所述目标基础UI组件应用的配置数据、以及所述UI设计稿对应的目标基础UI组件的布局顺序，生成页面代码包括：

根据所述目标基础UI组件的组件代码、所述目标基础UI组件的组件配置文件、以及多个JSON数据的布局顺序，生成页面代码。

10.一种设计设备，其中，包括至少一个存储器和至少一个处理器，所述存储器存储一条或多条计算机可执行指令，所述处理器调用所述一条或多条计算机可执行指令，以执行如权利要求1-6任一项所述的UI设计方法。

11.一种服务器，其中，包括至少一个存储器和至少一个处理器，所述存储器存储一条或多条计算机可执行指令，所述处理器调用所述一条或多条计算机可执行指令，以执行如权利要求7-9任一项所述的UI设计方法。

12.一种存储介质，其中，所述存储介质存储一条或多条计算机可执行指令，所述一条或多条计算机可执行指令被执行时实现如权利要求1-6任一项所述的UI设计方法，或者，如权利要求7-9任一项所述的UI设计方法。

Images