CN116166346A - 用户界面处理方法、装置、设备及存储介质 - Google Patents

Abstract

本公开提供用户界面处理方法、装置、设备及存储介质，所述方法包括：显示设计界面，所述设计界面包括有若干个候选界面元素，每个所述候选界面元素指示目标终端提供的其中一个功能；确定从所述若干个候选界面元素中选定的一个或多个界面元素，并获取在所述设计界面中配置的所述界面元素的显示信息和位置信息；以可被计算机编程语言解析的格式保存所述一个或多个界面元素的显示信息和位置信息，得到第一用户界面文件；将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，以使所述目标终端能够根据所述第二用户界面文件绘制用户界面。本实施例有利于提高用户界面的处理效率。

Description

用户界面处理方法、装置、设备及存储介质

技术领域

本公开涉及计算机软件技术领域，尤其涉及一种用户界面处理方法、装置、设备及存储介质。

背景技术

用户界面(User Interface，UI)广泛应用于各类具有显示器的智能设备中，如手机、电脑等终端中的桌面，手环、手表等可穿戴设备中的表盘。

用户界面的实现通常需要设计人员和后台开发人员参与，以手表中的表盘为例，设计人员采用如sketch(一种素描绘画类的软件)，Photoshop(一种图像处理软件)等图形处理软件进行设计得到图形设计文件，比如图形设计文件中包括有图片及相关坐标信息，然后把图形设计文件给到后台开发人员，后台开发人员通过编写代码的方式进行表盘开发，开发完成后再返给设计人员进行效果核验，核验不通过再由后台开发人员继续进行修改，如此反复，处理效率较低。

发明内容

为克服相关技术中存在的问题，本公开提供了一种用户界面处理方法、装置、设备及存储介质。

根据本公开实施例的第一方面，提供一种用户界面处理方法，所述方法包括：

显示设计界面，所述设计界面包括有若干个候选界面元素，每个所述候选界面元素指示目标终端提供的其中一个功能；

确定从所述若干个候选界面元素中选定的一个或多个界面元素，并获取在所述设计界面中配置的所述界面元素的显示信息和位置信息；

以可被计算机编程语言解析的格式保存所述一个或多个界面元素的显示信息和位置信息，得到第一用户界面文件；

将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，以使所述目标终端能够根据所述第二用户界面文件绘制用户界面。

可选地，还包括：

获取在所述设计界面中设置的所述界面元素的热区信息或绘制顺序信息中的至少一种

以可被计算机编程语言解析的格式保存的所述界面元素的热区信息或绘制顺序信息中的至少一种，得到所述第一界面文件。

可选地，所述可被计算机编程语言解析的格式包括JSON格式或者XML格式。

可选地，所述热区信息包括热区的属性信息；

所述属性信息至少包括跳转属性信息或者展示属性信息；

其中，所述跳转属性信息指示若所述热区被触发，能够跳转至所述界面元素指示的功能对应的界面；

所述展示属性指示若所述热区被触发，能够展示指定信息。

可选地，所述设计界面中包括有预览区域；

所述方法还包括：响应于在所述设计界面中的预览操作，根据所述第一用户界面文件在所述预览区域中绘制并显示所述用户界面对应的图形页面。

可选地，所述显示信息包括以下至少一种：所述界面元素的图标或者所述界面元素对应的数据的展示内容。

可选地，所述显示信息包括图片；

所述将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，包括：

根据所述目标终端支持的固件协议对所述第一用户界面文件中除图片之外的所有信息进行转换，得到配置文件；以及，根据所述目标终端的显示格式对所述第一用户界面文件中的图片进行格式转换，得到图片文件；

将所述配置文件和所述图片文件进行整合打包，获得所述第二界面文件。

根据本公开实施例的第二方面，提供一种用户界面处理装置，所述装置包括：

界面显示模块，用于显示设计界面，所述设计界面包括有若干个候选界面元素，每个所述候选界面元素指示目标终端提供的其中一个功能；

信息获取模块，用于确定从所述若干个候选界面元素中选定的一个或多个界面元素，并获取在所述设计界面中配置的所述界面元素的显示信息和位置信息；

信息保存模块，用于以可被计算机编程语言解析的格式保存所述一个或多个界面元素的显示信息和位置信息，得到第一用户界面文件；

文件转换模块，用于将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，以使所述目标终端能够根据所述第二用户界面文件绘制用户界面。

根据本公开实施例的第三方面，提供一种电子设备，包括：

处理器；

用于存储处理器可执行指令的存储器；

用于显示设计界面的显示器；

其中，所述处理器执行所述可执行指令时，用于实现第一方面所述的方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任一项所述方法的步骤。

本公开的实施例提供的技术方案可以包括以下有益效果：

本公开实施例提供了一种用户界面处理方法，应用于电子设备上，所述电子设备可提供一设计界面，所述设计界面包括有若干个候选界面元素，每个所述候选界面元素指示目标终端提供的其中一个功能；设计人员可以根据实际需要选择想要在用户界面中呈现的界面元素，并进行该界面元素的相关信息(显示信息和位置信息)的配置即可，然后电子设备确定从所述若干个候选界面元素中选定的一个或多个界面元素，并获取在所述设计界面中配置的所述界面元素的显示信息和位置信息，接着以可被计算机编程语言解析的格式保存所述一个或多个界面元素的显示信息和位置信息，得到第一用户界面文件，最后将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，以使所述目标终端能够根据所述第二用户界面文件绘制用户界面。借助于本公开实施例提供的用户界面处理方法，可由设计人员来负责用户界面的整个处理过程，而无需开发人员的参与，减少了人力成本和沟通成本，设计人员只需在设计界面上进行界面元素的选择以及相关信息的配置即可，无需设计人员具备编程知识，操作简单容易上手，由电子设备自动基于界面元素的相关信息进行转换处理，从而有利于提高用户界面的处理效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是本公开根据一示例性实施例示出的用户界面处理方法的流程示意图。

图2是本公开根据一示例性实施例示出的设计界面的示意图。

图3是本公开根据一示例性实施例示出的不同界面元素的图标的示意图。

图4A是本公开根据一示例性实施例示出的数字图片的示意图。

图4B是本公开根据一示例性实施例示出的属性信息以及关联图片的配置示意图。

图5是本公开根据一示例性实施例示出的以数字展示内容展示的日期的示意图。

图6是本公开根据一示例性实施例示出的设计界面(其中，以指针展示内容展示界面元素)的另一示意图。

图7A是本公开根据一示例性实施例示出的设计界面(其中，以图片展示内容展示界面元素)的另一示意图。

图7B是本公开根据一示例性实施例示出的图片展示内容的图片资源示意图。

图8是本公开根据一示例性实施例示出的环形进度条展示内容的图片资源示意图。

图9是本公开根据一示例性实施例示出的用户界面处理装置的结构示意图。

图10是本公开根据一示例性实施例示出的一种电子设备的结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

用户界面的实现通常需要设计人员和后台开发人员参与，以手表中的表盘为例，设计人员采用如sketch(一种素描绘画类的软件)，Photoshop(一种图像处理软件)等图形处理软件进行设计得到图形设计文件，把图形设计文件给到后台开发人员，后台开发人员通过编写代码的方式进行表盘开发，开发完成后再返给设计人员进行效果核验，核验不通过再由后台开发人员继续进行修改，如此反复，在该表盘需要修改多次或者表盘需要多次更新的情况下，人力成本及沟通成本较大，操作繁琐，处理效率较低。

针对于相关技术中的问题，本公开实施例提供了一种用户界面处理方法，应用于电子设备上，所述电子设备可提供一设计界面，所述设计界面包括有若干个候选界面元素，每个所述候选界面元素指示目标终端提供的其中一个功能；设计人员可以根据实际需要选择想要在用户界面中呈现的界面元素，并进行该界面元素的相关信息(显示信息和位置信息)的配置即可，然后电子设备确定从所述若干个候选界面元素中选定的一个或多个界面元素，并获取在所述设计界面中配置的所述界面元素的显示信息和位置信息，接着以可被计算机编程语言解析的格式保存所述一个或多个界面元素的显示信息和位置信息，得到第一用户界面文件，最后将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，以使所述目标终端能够根据所述第二用户界面文件绘制用户界面。借助于本公开实施例提供的用户界面处理方法，可由设计人员来负责用户界面的整个处理过程，而无需开发人员的参与，减少了人力成本和沟通成本，设计人员只需在设计界面上进行界面元素的选择以及相关信息的配置即可，无需设计人员具备编程知识，操作简单容易上手，由电子设备自动基于界面元素的相关信息进行转换处理，从而有利于提高用户界面的处理效率。

执行所述用户界面处理方法的电子设备为具备显示器的计算设备，所述电子设备包括但不限于智能手机、平板计算机、个人数字助理(PDA)、膝上计算机、台式计算机、可穿戴设备(例如，手表、眼镜、手环、头盔、虚拟现实头戴耳机、增强现实头戴耳机、头装式装置(HMD)、头带)、遥控器或者任何其他类型的设备等。

在一示例性的实施例中，所述用户界面处理方法可以是集成在所述电子设备中的计算机程序产品。在另一示例性的实施例中，所述电子设备至少包括存储器、处理器和显示器，所述用户界面处理方法可以是存储在所述存储器中的可执行指令，所述显示器能够显示设计界面，所述处理器能够执行所述可执行指令。

本公开实施例可以借助于在所述电子设备上执行的用户界面处理方法，为目标终端设计用户界面。其中，所述目标终端与执行所述用户界面处理方法的电子设备可以是同一设备，也可以是不同设备，本实施例对此不做任何限制。在一个例子中，例如执行用户界面处理方法的电子设备为台式计算机，所述目标终端为手表，本次设计的用户界面为手表的表盘。在另一个例子中，例如执行用户界面处理方法的电子设备为平板计算机，所述目标终端为平板计算机，本次设计的用户界面为平板计算机的桌面。

请参阅图1，图1为本公开实施例提供的一种用户界面处理方法的流程示意图，所述方法可由电子设备来执行，所述方法包括：

在步骤S101中，显示设计界面，所述设计界面包括有若干个候选界面元素，每个所述候选界面元素指示目标终端提供的其中一个功能。

在步骤S102中，确定从所述若干个候选界面元素中选定的一个或多个界面元素，并获取在所述设计界面中配置的所述界面元素的显示信息和位置信息。

在步骤S103中，以可被计算机编程语言解析的格式保存所述一个或多个界面元素的显示信息和位置信息，得到第一用户界面文件。

在步骤S104中，将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，以使所述目标终端能够根据所述第二用户界面文件绘制用户界面。

可以理解的是，本实施例提供的用户界面处理方法可以为多种不同类型的终端设计用户界面，所述目标终端包括但不限于移动终端(如手机、电脑)、可穿戴设备(如手表、手环)等。

在一些实施例中，所述电子设备可基于多种不同类型的候选终端提供多个候选设计界面，每个候选设计界面对应一候选终端，每个候选设计界面包括与所述候选终端所提供的功能对应的候选界面元素。

在一个例子中，假设其中一个候选终端为手环或者手表等可穿戴设备，请参阅图2，图2示出了该手环或者手表对应的候选设计界面，该候选设计界面包括有若干个候选界面元素，所述若干个候选界面元素被分成多个类型，如分成背景类型、时间类型、日期类型、运动健康类型、天气类型、系统类型和通信类型等。例如日期类型包括国历日期、农历日期、星期等；例如图2示出的运动健康类型包括有心率、消耗、PAI活力指数(一个基于用户年龄、性别、静息心率和过去7天的心率数据的个性化计算数值)、步数以及距离等；又例如天气类型可包括温度、湿度、空气质量、能见度、降水量或者风力风向等；通信类型包括移动拨号通信、视频通信或者语音通信等；系统类型包括电量、屏幕亮度、音量、日历或者备忘录等等。另外，用户还可根据实际需要对所述手环或者手表等可穿戴设备上的功能所属类型进行个性化划分，如通过图2所示的“可编辑”控件重新划分或者增加可被选择的类型，本实施例对此不做任何限制。

在另一个例子中，假设其中一个候选终端为智能手机，该智能手机对应的候选设计界面包括有若干个候选界面元素，每个所述候选界面元素指示智能手机提供的其中一个功能，比如所述若干个候选界面元素包括有天气、时间、日期、通话、备忘录、运动、电量、音量、屏幕亮度、相机、图库、娱乐应用、办公应用、日常应用、社交应用、购物应用等等。

在实际应用过程中，用户可根据实际需要从不同类型的候选终端中选择目标终端，比如选择的目标终端为手表，本次设计的用户界面为手表的表盘，所述电子设备确定用户选定的所述目标终端，并显示所述目标终端对应的设计界面，所述设计界面包括有若干个可供选择的候选界面元素，每个所述候选界面元素指示目标终端提供的其中一个功能，比如如图2所示的设计界面，候选界面元素“心率”指示手表的心率功能。

考虑到不同型号的目标终端的显示尺寸和显示形状有所不同，比如有些手表的表盘是圆形的，有些手表的表盘是方形的，并且在显示尺寸上也有所差异。则在选择目标终端之后，所述电子设备可以获取用户输入的待绘制用户界面的尺寸，或者所述电子设备可以预存有不同型号的目标终端的显示尺寸和显示形状以供用户选择，从而所述电子设备确定待绘制用户界面的显示尺寸和显示形状，可以进行下一步的处理，如用户可从设计界面显示的若干个候选界面元素中选择符合需求的界面元素。

在显示的设计界面中，如图2所示，设计界面中显示有若干个可供选择的候选界面元素，用户可以根据实际需要从所述若干个候选界面元素中选定一个或多个界面元素，比如用户选择了温度、心率以及指针时间等界面元素，从而所述电子设备确定从所述若干个候选界面元素中选定的一个或多个界面元素，并且可以将选定的一个或多个界面元素显示在设计界面中，如图2所示，在设计界面的左侧显示了选定的温度、心率以及指针时间等界面元素。

在选定一个或多个界面元素之后，用户可以根据实际需要在所述设计界面中配置所述界面元素的显示信息和位置信息。其中，所述显示信息包括以下至少一种：所述界面元素的图标和所述界面元素对应的数据的展示内容。相应地，所述位置信息包括所述界面元素的图标在用户界面中的坐标、所述展示内容在用户界面中分别对应的坐标。在一个例子中，请参阅图3，在图2基础上，图3示出了心率、距离、电量、步数、消耗等界面元素对应的图标。

所述界面元素对应的数据指的是从所述界面元素指示的目标终端的功能中获取到的数据，比如“步数”界面元素获取的数据为目标终端的行走统计功能获取到的用户的行走数量，“电量”界面元素获取的数据为目标终端的电池功能统计到的当前目标终端的剩余电量，“心率”界面元素获取的数据为目标终端的心率功能最新一次获取到的心率数据。所述展示内容可以有多种，实现以不同的展示方式来展示所述界面元素对应的数据。示例性的，所述展示内容包括但不限于数字展示内容、指针展示内容、图片展示内容或者环形进度条展示内容等。

在一些实施例中，所述数字展示内容指示以数字图片的形式展示所述界面元素对应的数据；如图2中“温度”界面元素下的“123实时温度”表示以数字图片的形式展示实时温度，“心率”界面元素下的“123数据”表示以数字图片的形式展示心率数据。

其中，所述数字展示内容包括10张数字图片(如图4A所示，分别为0～9十个数字分别对应的图片)、关联图片和属性信息。其中，不同界面元素的关联图片不同，所述关联图片包括但不限于单位图片(如“年”图片、“月”图片等)、符号图片(如“：”图片)、数据类型图片(比如“％”图片)等；比如针对于“日期”界面元素，关联图片为单位图片，请参阅图5，示出了根据3张数字图片和2张单位图片展示的日期；又比如“电量”界面元素，关联图片为数据类型图片，比如65％，有数字图片“6”、数字图片“5”和数据类型图片“％”组成。所述属性信息包括以下至少一项：所述数字展示内容的对齐方式(左对齐、右对齐或者居中对齐)、是否补零(在数字前补充数字图片“0”)，是否跟随(比如单位图片则是跟在数字图片后面)、图片间隔距离、弧形展示(利用三角函数计算各个图片的坐标)或者多张图片的绘制顺序等，比如如图4B所示，示出了上传的关联图片(数据类型图片)、设置的属性(对其方式、图片间隔距离和是否补零)和关联图片的坐标(x，y)。

示例性的，所述目标终端可以根据从所述界面元素对应的功能中获取的数据，对所述数字图片和关联图片进行组合，从而展示所述界面元素对应的数据。在一个例子中，以“电量”界面元素，比如所述目标终端在展示用户界面的过程中，从电池功能中获取到的电量数据为65％，则获取数字图片“6”、数字图片“5”和数据类型图片“％”，将其组合后进行展示。

在所述界面元素的显示信息包括数据展示内容的情况下，所述界面元素的位置信息包括所述数据展示内容中的数字图片的坐标和关联图片的坐标。在一个例子中，所述数字图片和/或所述关联图片的坐标可以全部是用户设置的。在另一个例子中，考虑到部分所述属性信息(如对齐方式、是否补零、是否跟随和图片间隔距离等)会影响到数字图片的坐标或者关联图片的坐标，为了节省用户的操作步骤，用户无需设置所有数字图片和关联图片的坐标，而只需设置其中一部分即可，其他图片的坐标则可以根据所述属性信息和用户设置的一部分图片的坐标计算得到。

示例性的，比如用户设置了所述属性信息中所述数字展示内容的对齐方式，则所述电子设备根据数字展示内容的整体计算出所述数字图片和/或所述关联图片的坐标，实现对齐效果。以“日期-年”水平显示为例，年为4位数字，如果“2021”简单显示为“21”，则有两位数字的位置被空置出来，如果“左对齐”则将“2”的坐标显示在坐标位置(x,y)。“右对齐”则在原坐标横坐标基础上加上两个空置位的宽度进行数字图片“2”的放置(x+数字图片宽度*2)，“居中对齐”的横坐标即为原坐标的横坐标加上两个空置位宽度的一半(x+数字图片宽度*2/2)，垂直显示的计算方式与此类似，此处不再赘述。

示例性的，比如用户设置了所述属性信息中所述数字展示内容的“是否跟随”，比如以日期为例，设置了“跟随”属性，图片间隔距离被设置为0，如“2021年”，“年”为单位图片，它的位置需要根据“2021”中最前面数字“2”的位置，如果是水平显示则加上“2”，“0”，“2”，“1”四张数字图片的宽度，计算得出单位图片“年”的横坐标位置，然后纵坐标位置相同，最终得到单位图片的坐标，如果是垂直方向显示“2021年”，则需要在最上面数字图片“2”的纵坐标的基础上，加上“2”，“0”，“2”，“1”四张数字图片的高度，得到“年”的纵坐标，横坐标相同，最终得到单位图片的坐标。

示例性的，比如用户设置了所述属性信息中所述数字展示内容的“是否补零”：补零即补充数字图片“0”，数字时间九点，不补零即只有数字图片“9”，补零为数字图片“0”和数字图片“9”组合“09”。在确定“补零”的情况下，“0”图片后面的图片(可能是数字图片或关联图片)的坐标需要相应调整。在一些实施例中，所述指针展示内容指示以指针图片的形式展示所述界面元素对应的数据。比如如图2所示的“温度”“心率”等界面元素下的“指针进度”表示以指针图片的形式展示数据。所述指针展示内容包括指示不同数据量的多个指针图片；其中，所述指针展示内容的位置信息可由用户进行设置。示例性的，所述目标终端可以根据从所述界面元素对应的功能中获取的数据，从多个指针图片中选择目标指针图片进行展示。在一个例子中，请参阅图6，图6示出了以指针展示内容展示的时间、电量和步数，所述目标终端从电池功能中获取到的电量数据为65％，则展示指向65的指针图片；从行走统计功能中获取到的步数为0，则展示指向0的指针图片，从时间功能中获取到的时间为10点10分30秒，则展示对应的指针图片。

需要说明的是，如果所述图片具有多层图层结构，则所述目标终端在绘制时，需按照图层结构指示的图层顺序进行绘制。比如图2、图6中示出的“指针进度”，底图需要在指针下面，中心图片需要在指针上面，在以指针展示内容绘制界面元素时，依照所述指针图片所携带的图层结构信息进行顺序绘制，以使得最后呈现的显示效果符合用户需求。示例性的，针对于具有多层图层结构的图片，各个图层的位置坐标可以单独进行设置，或者多层图层作为一个整体来进行坐标设置，即各个图层的位置信息可以相同也可以不同，可依据实际应用场景进行具体设置。

在一些实施例中，所述图片展示内容指的是以图形图片形式展示所述界面元素对应的数据，比如如图2所示的“心率”界面元素下的“图片进度”表示以图形图片的形式展示数据。所述图片展示内容包括指示不同数据量的多个图形图片；其中，所述图片展示内容的位置信息可由用户进行设置。示例性的，所述目标终端可以根据从所述界面元素对应的功能中获取的数据，从多个图形图片中选择目标图形图片进行展示。在一个例子中，请参阅图7A以及图7B，图7A示出了“电量”界面元素在“图片进度”下以图形图片展示的电量，图7B示出了不同电量对应的图形图片，由所述目标终端根据从电池统计出的电量从图7B所示的多张图形图片中获取对应的图形图片进行展示。

在一些实施例中，所述环形进度条展示内容指的是以环形进度条图片形式展示所述界面元素对应的数据，如如图2所示的“心率”“温度”等界面元素下的“常规进度”表示以环形进度条图片的形式展示数据。如图8所示，所述环形进度条展示内容包括指示不同数据量的一个环形进度条；其中，所述圆环进度条展示内容的位置信息可由用户进行设置。示例性的，所述目标终端可以根据从所述界面元素对应的功能中获取的数据，对指示不同数据量的圆形进度条进行裁剪得到目标圆环进度条图片。

可以理解的是，所述数字展示内容、指针展示内容、图片展示内容或者圆环进度条展示内容均为本实施例列举的几种展示形式，并不构成对展示内容的限制，还可以是其他的展示内容。而且，可以在用户界面上显示界面元素的其中一种展示内容，也可以同时展示多种展示内容，如图7A所示，以数字展示内容和图片展示内容对电量进行展示，本实施例对此不做任何限制。

在一些实施例中，除了设置所述界面元素的显示信息和位置信息之外，考虑到界面元素之间可能有所重叠，则所述界面元素之间的绘制顺序也可能会影响到用户界面的显示效果，则用户还可以根据实际需要设置所述界面元素在所述目标终端中的绘制顺序，进而所述电子设备可以获取在所述设计界面中设置的所述界面元素的绘制顺序信息，并以可被计算机编程语言解析的格式保存所述绘制顺序信息，以便目标终端最终绘制得到的用户界面的显示效果符合用户需求。

在一些实施例中，除了设置所述界面元素的显示信息和位置信息之外，为进一步提高交互效果，还可以为所述界面元素设置热区。其中，热区是指能够与用户交互或者进行内容显示的区域，是个不可见的透明层，该透明层可设置在界面元素所在的位置上，并可针对该透明层添加交互操作，作为该透明层被选中或被触发后的响应操作，通常，热区是在页面上进行了链接的区域。所述电子设备可以获取在所述设计界面中设置的所述界面元素的热区信息，并以可被计算机编程语言解析的格式保存所述热区信息，以便目标终端最终绘制得到的用户界面具有交互功能。

示例性地，通过在界面元素中设置热区，可实现跳转功能，比如，当该热区被选中或被触发时(比如用户触摸该热区或用鼠标点击该热区或鼠标滑过该热区时)，可以跳转到所述界面元素对应的功能的界面。通过在界面元素中设置热区，可增加动态元素，比如，当该热区被选中或被触发时，可以播放视频或显示动画。通过在图片中设置热区，还可以提供用户交互操作，比如，当该热区被选中或被触发时，可展示弹出式菜单，供用户选择菜单中的指令。

所述热区具有属性信息，所述属性信息用于定义热区被选中或被触发后所产生的响应，比如可以是执行设定事件(如跳转事件)或展示设定对象等。示例性的，所述属性信息至少包括跳转属性信息、展示属性信息或者定位属性等，所述跳转属性信息指示若所述热区被触发，能够跳转至所述界面元素指示的功能对应的界面，比如如图2所示，“心率”“温度”等界面元素均可以设置跳转热区；所述展示属性指示若所述热区被触发，能够展示指定信息，如播放指定的视频、播放指定的动画、展示指定的图片、展示指定的文本、播放指定的语音等；所述定位属性指示当热区被选中或被触发时，可将页面定位到预设描点所指示的位置，比如回到页面首位置。

在用户根据实际需要设置了所述界面元素的相关信息之后，所述电子设备可以以可被计算机编程语言解析的格式保存所述一个或多个界面元素的相关信息，得到第一用户界面文件。示例性的，所述可被计算机编程语言解析的格式包括JSON格式或者XML格式。例如以JSON格式保存所述一个或多个界面元素的显示信息和位置信息，或者以JSON格式保存所述一个或多个界面元素的显示信息、位置信息和热区信息，或者以JSON格式保存所述一个或多个界面元素的显示信息、位置信息和绘制顺序信息，或者以JSON格式保存所述一个或多个界面元素的显示信息、位置信息、热区信息和绘制顺序信息，获取所述第一用户界面文件。本实施例通过以可被计算机编程语言解析的格式保存所述一个或多个界面元素的相关信息以得到第一用户界面文件，使得后续电子设备可以自动解析并读取所述第一用户界面文件，而无需后台开发人员参与，减少了人力成本，也有利于提高用户界面处理效率。

在一些实施例中，在获取所述第一用户界面文件之后，用户可以根据实际需要在设计界面中选择是否预览所述第一用户界面文件对应的显示效果。所述设计界面中包括有预览区域；所述电子设备在获取并保存所述第一用户界面文件之后，可以响应于在所述设计界面中的预览操作，根据所述第一用户界面文件在所述预览区域中绘制并显示所述用户界面对应的图形页面，比如如图2、图6和图7A所示，展示了手表的表盘对应的图形页面。可以理解的是，此时在设计界面中预览的不是真正的用户界面，而是该用户界面对应的图形页面。

在一些实施例中，考虑到不同目标终端的显示协议可能有所不同，为了使设计的用户界面能够被目标终端正确使用，所述电子设备在获取并保存所述第一用户界面文件之后，需要将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，以使所述目标终端能够根据所述第二用户界面文件绘制用户界面。示例性的，通过上述描述可知，所述第一界面文件中包括界面元素的显示信息、位置信息、热区信息以及绘制顺序信息等等，其中所述显示信息中包括有图片；所述电子设备可以读取所述第一界面文件中除图片之外的配置信息(比如界面元素的位置信息、热区信息以及绘制顺序信息等等)，按照所述目标终端支持的固件协议对所述配置信息进行转换以获得配置文件，并且对所述第一界面文件中的图片按照所述目标终端的显示格式进行格式转化以获取图片文件，最后将所述配置文件和所述图片文件进行整合打包，输出适配于所述目标终端的第二用户界面文件。本实施例中，所述电子设备实现第一用户界面文件的自动转换，从而无需后台开发人员参与，即可获取能够在目标终端上使用的第二用户界面文件，提高了用户界面的处理效率。

其中，可以为所述第二用户界面文件配置唯一标识该第二用户界面文件的ID号，以便目标终端在预存有多个所述第二用户界面文件的情况下，可以基于ID号来区分多个所述第二用户界面文件；例如所述目标终端为手表，所述第二用户界面文件为表盘文件，每个表盘文件均有对应的ID号；其中，同一个ID号的第二用户界面文件可以覆盖，比如在目标终端已存有ID号为“1234”的第二用户界面文件的情况下，如果后续所述电子设备对ID号为“1234”的第二用户界面文件有所更新，产生了ID号为“1234”的更新后的第二用户界面文件并发送给所述目标终端，则所述目标终端可以使用ID号为“1234”的更新后的第二用户界面文件替换ID号为“1234”的原有的第二用户界面文件。

本实施例中，借助于本公开实施例提供的用户界面处理方法，可由设计人员来负责用户界面的整个处理过程，而无需开发人员的参与，减少了人力成本和沟通成本，设计人员只需在设计界面上进行界面元素的选择以及相关信息的配置即可，无需设计人员具备编程知识，操作简单容易上手，由电子设备自动基于界面元素的相关信息进行转换处理，从而有利于提高用户界面的处理效率。

以上实施方式中的各种技术特征可以任意进行组合，只要特征之间的组合不存在冲突或矛盾，但是限于篇幅，未进行一一描述，因此上述实施方式中的各种技术特征的任意进行组合也属于本说明书公开的范围。

与前述用户界面处理方法的实施例相对应，本公开还提供了用户界面处理装置、装置所应用的电子设备以及存储介质的实施例。

相应的，请参阅图9，本公开实施例还提供了一种用户界面处理装置，所述装置包括：

界面显示模块21，用于显示设计界面，所述设计界面包括有若干个候选界面元素，每个所述候选界面元素指示目标终端提供的其中一个功能。

信息获取模块22，用于确定从所述若干个候选界面元素中选定的一个或多个界面元素，并获取在所述设计界面中配置的所述界面元素的显示信息和位置信息。

信息保存模块23，用于以可被计算机编程语言解析的格式保存所述一个或多个界面元素的显示信息和位置信息，得到第一用户界面文件。

文件转换模块24，用于将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，以使所述目标终端能够根据所述第二用户界面文件绘制用户界面。

在一些实施例中，所述信息获取模块22还用于：获取在所述设计界面中设置的所述界面元素的热区信息或绘制顺序信息中的至少一种；以可被计算机编程语言解析的格式保存所述界面元素的热区信息或绘制顺序信息中的至少一种，得到所述第一界面文件。

在一些实施例中，所述可被计算机编程语言解析的格式包括JSON格式或者XML格式。

在一些实施例中，所述热区信息包括热区的属性信息；所述属性信息至少包括跳转属性信息或者展示属性信息；其中，所述跳转属性信息指示若所述热区被触发，能够跳转至所述界面元素指示的功能对应的界面；所述展示属性指示若所述热区被触发，能够展示指定信息。

在一些实施例中，所述设计界面中包括有预览区域；

所述装置还包括显示模块，用于响应于在所述设计界面中的预览操作，根据所述第一用户界面文件在所述预览区域中绘制并显示所述用户界面对应的图形页面。

在一些实施例中，所述显示信息包括以下至少一种：所述界面元素的图标或者所述界面元素对应的数据的展示内容。

所述展示内容包括以下至少一种：数字展示内容、指针展示内容、图片展示内容或者环形进度条展示内容。

其中，所述数字展示内容指示以数字图片的形式展示所述界面元素对应的数据；所述指针展示内容指示以指针图片的形式展示所述界面元素对应的数据；所述图片展示内容指示以图形图片的形式展示所述界面元素对应的数据；所述环形进度条展示内容指示以环形进度条图片的形式展示所述界面元素对应的数据。

在一些实施例中，所述显示信息包括图片。

所述文件转换模块24具体用于：根据所述目标终端支持的固件协议对所述第一用户界面文件中除图片之外的所有信息进行转换，得到配置文件；以及，根据所述目标终端的显示格式对所述第一用户界面文件中的图片进行格式转换，得到图片文件；将所述配置文件和所述图片文件进行整合打包，获得所述第二界面文件。

上述装置中各个模块的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本公开方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

相应的，本公开还提供一种电子设备，包括：处理器；用于存储处理器可执行指令的存储器；用于显示设计界面的显示器；其中，所述处理器执行所述可执行指令时，用于实现上述任意一项所述的方法。

相应的，本公开还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任一项所述方法的步骤。

本公开可采用在一个或多个其中包含有程序代码的存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。计算机可用存储介质包括永久性和非永久性、可移动和非可移动媒体，可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括但不限于：相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。

如图10所示，图10是本公开根据一示例性实施例示出的一种电子设备的结构图。该设备300可以是智能电话/手机、平板计算机、个人数字助理(PDA)、膝上计算机、台式计算机、媒体内容播放器、视频游戏站/系统、虚拟现实系统、增强现实系统、可穿戴式设备(例如，手表、眼镜、手套、耳机、头饰(例如，帽子、头盔、虚拟现实头戴耳机、增强现实头戴耳机、头装式装置(HMD)、头带)、挂件、臂章、腿环、鞋子、马甲)、遥控器、或者任何其他类型的设备。

参照图10，设备300可以包括以下一个或多个组件：处理组件302，存储器304，电源组件306，多媒体组件308，音频组件310，输入/输出(I/O)的接口312，传感器组件314，以及通信组件316。

处理组件302通常控制设备300的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件302可以包括一个或多个处理器320来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件302可以包括一个或多个模块，便于处理组件302和其他组件之间的交互。例如，处理组件302可以包括多媒体模块，以方便多媒体组件308和处理组件302之间的交互。

存储器304被配置为存储各种类型的数据以支持在设备300的操作。这些数据的示例包括用于在设备300上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器304可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件306为设备300的各种组件提供电力。电源组件306可以包括电源管理系统，一个或多个电源，及其他与为设备300生成、管理和分配电力相关联的组件。

多媒体组件308包括在所述设备300和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件308包括一个前置摄像头和/或后置摄像头。当设备300处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件310被配置为输出和/或输入音频信号。例如，音频组件310包括一个麦克风(MIC)，当设备300处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器304或经由通信组件316发送。在一些实施例中，音频组件310还包括一个扬声器，用于输出音频信号。

I/O接口312为处理组件302和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件314包括一个或多个传感器，用于为设备300提供各个方面的状态评估。例如，传感器组件314可以检测到设备300的打开/关闭状态，组件的相对定位，例如所述组件为设备300的显示器和小键盘，传感器组件314还可以检测设备300或设备300中一个组件的位置改变，用户与设备300接触的存在或不存在，设备300方位或加速/减速和设备300的温度变化。传感器组件314可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件314还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件314还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件316被配置为便于设备300和其他设备之间有线或无线方式的通信。设备300可以接入基于通信标准的无线网络，如WiFi，2G、3G或4G，或它们的组合。在一个示例性实施例中，通信组件316经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件316还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，设备300可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器304，上述指令可由设备300的处理器320执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

以上所述仅为本公开的较佳实施例而已，并不用以限制本公开，凡在本公开的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本公开保护的范围之内。

Claims (10)

1.一种用户界面处理方法，其特征在于，所述方法包括：

显示设计界面，所述设计界面包括有若干个候选界面元素，每个所述候选界面元素指示目标终端提供的其中一个功能；

确定从所述若干个候选界面元素中选定的一个或多个界面元素，并获取在所述设计界面中配置的所述界面元素的显示信息和位置信息；

以可被计算机编程语言解析的格式保存所述一个或多个界面元素的显示信息和位置信息，得到第一用户界面文件；

将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，以使所述目标终端能够根据所述第二用户界面文件绘制用户界面。

2.根据权利要求1所述的方法，其特征在于，还包括：

获取在所述设计界面中设置的所述界面元素的热区信息或绘制顺序信息中的至少一种；

以可被计算机编程语言解析的格式保存所述界面元素的热区信息或绘制顺序信息中的至少一种，得到所述第一界面文件。

3.根据权利要求1或2所述的方法，其特征在于，所述可被计算机编程语言解析的格式包括JSON格式或者XML格式。

4.根据权利要求2所述的方法，其特征在于，所述热区信息包括热区的属性信息；

所述属性信息至少包括跳转属性信息或者展示属性信息；

其中，所述跳转属性信息指示若所述热区被触发，能够跳转至所述界面元素指示的功能对应的界面；

所述展示属性指示若所述热区被触发，能够展示指定信息。

5.根据权利要求1或2所述的方法，其特征在于，所述设计界面中包括有预览区域；

所述方法还包括：

响应于在所述设计界面中的预览操作，根据所述第一用户界面文件在所述预览区域中绘制并显示所述用户界面对应的图形页面。

6.根据权利要求1所述的方法，其特征在于，所述显示信息包括以下至少一种：所述界面元素的图标或者所述界面元素对应的数据的展示内容。

7.根据权利要求1所述的方法，其特征在于，所述显示信息包括图片；

所述将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，包括：

根据所述目标终端支持的固件协议对所述第一用户界面文件中除图片之外的所有信息进行转换，得到配置文件；以及，根据所述目标终端的显示格式对所述第一用户界面文件中的图片进行格式转换，得到图片文件；

将所述配置文件和所述图片文件进行整合打包，获得所述第二界面文件。

8.一种用户界面处理装置，其特征在于，所述装置包括：

界面显示模块，用于显示设计界面，所述设计界面包括有若干个候选界面元素，每个所述候选界面元素指示目标终端提供的其中一个功能；

信息获取模块，用于确定从所述若干个候选界面元素中选定的一个或多个界面元素，并获取在所述设计界面中配置的所述界面元素的显示信息和位置信息；

信息保存模块，用于以可被计算机编程语言解析的格式保存所述一个或多个界面元素的显示信息和位置信息，得到第一用户界面文件；

文件转换模块，用于将所述第一用户界面文件转换成适配于所述目标终端的第二用户界面文件，以使所述目标终端能够根据所述第二用户界面文件绘制用户界面。

9.一种电子设备，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

用于显示设计界面的显示器；

其中，所述处理器执行所述可执行指令时，用于实现如权利要求1至7任意一项所述的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1至7任一项所述方法。

Images