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

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

【技术实现步骤摘要】
一种UI设计方法、设计设备、服务器及存储介质


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

技术介绍

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

技术实现思路

[0003]有鉴于此，本申请实施例提供一种UI设计方法、设计设备、服务器及存储介质，以在UI设计师进行UI设计时，为提升UI设计稿的还原度提供支持。
[0004]为实现上述目的，本申请实施例提供如下技术方案。
[0005]第一方面，本申请实施例提供一种UI设计方法，包括：
[0006]展示用于UI设计的画布，并同步预先设计的多个基础UI组件；所述基础UI组件包括UI区域内的至少一个UI原子组件，所述基础UI组件设置有配置项并且预先开发有组件代码；
[0007]从所述多个基础UI组件中选择至少一个目标基础UI组件，并将所述目标基础UI组件部署到所述画布，其中，一个目标基础UI组件部署在所述画布的一个区域；
[0008]确定所述目标基础UI组件的配置项的配置数据；
[0009]其中，所述画布部署的目标基础UI组件，以及目标基础UI组件的配置项的配置数据，形成所述UI的UI设计稿；所述UI设计稿用于与所述目标基础UI组件预先开发的组件代码相结合，以生成所述UI设计稿的页面代码。
[0010]第二方面，本申请实施例提供一种UI设计方法，包括：
[0011]读取UI设计稿中使用的目标基础UI组件，以及目标基础UI组件的配置项的配置数据；其中，所述目标基础UI组件从预先设计的多个基础UI组件中选择，所述基础UI组件包括UI区域内的至少一个UI原子组件，所述基础UI组件设置有用于调整配置数据的配置项，并且预先开发有组件代码；
[0012]基于基础UI组件预先开发的组件代码，获取所述目标基础UI组件的组件代码，并将所述目标基础UI组件的配置项的配置数据应用到目标基础UI组件中；
[0013]根据所述目标基础UI组件的组件代码、所述目标基础UI组件应用的配置数据、以及所述UI设计稿对应的目标基础UI组件的布局顺序，生成页面代码。
[0014]第三方面，本申请实施例提供一种设计设备，包括至少一个存储器和至少一个处理器，所述存储器存储一条或多条计算机可执行指令，所述处理器调用所述一条或多条计
算机可执行指令，以执行如上述第一方面所述的UI设计方法。
[0015]第四方面，本申请实施例提供一种服务器，包括至少一个存储器和至少一个处理器，所述存储器存储一条或多条计算机可执行指令，所述处理器调用所述一条或多条计算机可执行指令，以执行如上述第二方面所述的UI设计方法。
[0016]第五方面，本申请实施例提供一种存储介质，所述存储介质存储一条或多条计算机可执行指令，所述一条或多条计算机可执行指令被执行时实现如上述第一方面所述的UI设计方法，或者，如上述第二方面所述的UI设计方法。
[0017]第六方面，本申请实施例提供一种计算机程序，所述计算机程序被执行时实现如上述第一方面所述的UI设计方法，或者，如上述第二方面所述的UI设计方法。
[0018]本申请实施例在对UI进行设计时，可展示用于UI设计的画布，并同步预先设计的多个基础UI组件；从所述多个基础UI组件中选择至少一个目标基础UI组件，并将所述目标基础UI组件部署到所述画布，其中，一个目标基础UI组件部署在所述画布的一个区域；确定所述目标基础UI组件的配置项的配置数据；其中，所述画布部署的目标基础UI组件，以及目标基础UI组件的配置项的配置数据，形成所述UI的UI设计稿；所述UI设计稿用于与所述目标基础UI组件预先开发的组件代码相结合，以生成所述UI设计稿的页面代码。
[0019]可以看出，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设计稿的还原度提供支持。
附图说明
[0020]为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
[0021]图1A为UI设计过程的示例图。
[0022]图1B为UI设计稿的部分示例图。
[0023]图2A为本申请实施例提供的UI设计过程的另一示例图。
[0024]图2B为本申请实施例提供的基础UI组件与UI原子组件的示例图。
[0025]图2C为基础UI组件的开放配置项的示例图。
[0026]图3为本申请实施例提供的UI设计方法的流程图。
[0027]图4A为确定画布的示例图。
[0028]图4B为同步基础UI组件的示例图。
[0029]图4C为将基础UI组件部署到画布的示例图。
[0030]图4D为调整目标基础UI组件的配置项的配置数据的示例图。
[0031]图5为本申请实施例提供的生成页面结构信息的方法流程图。
[0032]图6A为本申请实施例提供的UI设计方法的另一流程图。
[0033]图6B为生成页面代码的示例图。
[0034]图7为本申请实施例提供的UI设计装置的框图。
[0035]图8为本申请实施例提供的设计设备的框图。
[0036]图9为本申请实施例提供的UI设计装置的另一框图。
具体实施方式
[0037]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分本文档来自技高网...

【技术保护点】

【技术特征摘要】
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组件包...

【专利技术属性】
技术研发人员：史兵兵，陆东鑫，方旭梅，周渊，刘伟，芦萍，徐攀，吴章平，
申请(专利权)人：阿里云计算有限公司，
类型：发明
国别省市：