生成响应式页面的方法、图形用户界面及电子设备与流程

1.本技术涉及电子技术领域，尤其涉及生成响应式页面的方法、图形用户界面及电子设备。


背景技术：

2.手机、平板电脑、车机、智慧屏等越来越多的设备加入到硬件生态，不同设备的屏幕分辨率的差异也越来越大，用户交互(user interface，ui)设计师和软件开发者要考虑的屏幕分辨率情况正在飞速增加，这无疑严重增加了ui设计师和软件开发者的工作量。


技术实现要素：

3.本技术的目的在于提供一种生成响应式页面的方法，可支持ui设计师高效的设计出能够适应多种屏幕分辨率的响应式页面，并能输出可被软件开发者阅读、使用的代码片段，以节约软件开发者的编程工作量。
4.第一方面，提供了一种生成响应式页面的方法，该方法可包括：电子设备检测到导入设计稿的操作。电子设备可以以第一页面布局显示设计稿中绘制的界面元素，第一页面布局是设计稿描述的。之后，电子设备可以检测到为第一界面元素选择第一布局适配规则的操作，电子设备可为第一界面元素分配第一布局适配规则。第一布局适配规则可以用于调整以下一项或多项：第一界面元素的位置、大小、布局。电子设备可以检测到选择第二屏幕尺寸的操作，响应该操作，电子设备可以以第二页面布局显示设计稿中绘制的界面元素。第二页面布局中的第一界面元素的布局是根据用于描述第一布局适配规则的参数确定的。第二页面布局不同于第一页面布局，第二屏幕尺寸不同于第一屏幕尺寸。
5.第一方面中，导入设计稿的操作可例如为图3a所示选择主菜单101中的插入选项的导入文件这一功能选项来导入设计稿的操作，或可例如为图3b所示拖动设计稿至画布104中的操作。
6.第一方面中，第一页面布局是设计稿中设计的布局。如图4b所示，电子设备可在画布104中显示该设计稿中绘制的界面元素，这些界面元素可遵循该设计稿而显示于画布104中。其中，这些界面元素遵循该设计稿而显示于画布104中是指，在画布104中，这些界面元素的样式(图案、颜色、形状等)遵循该设计稿，这些界面元素的布局也遵循该设计稿。
7.第一方面中，第一界面元素可以是用户选择的设计稿中绘制的一个或一组界面元素。例如，如图5b所示，用户可以一次选择(例如框选)界面元素1d1、1d121、1d122、1d123、1d124、1d125。第一界面元素可以是界面元素1d1、1d121、1d122、1d123、1d124、1d125。
8.第一方面中，第一布局适配规则可以是用户选择的一种布局适配规则(即原子能力)。例如，如图6a所示，在检测到用户框选一组界面元素1d121、1d122、1d123、1d124、1d125之后，电子设备可进一步检测到用户为选中的这一组界面元素分配“隐藏能力”的操作。第一布局适配规则就可以是“隐藏能力”，又可以称为“隐藏”规则。
9.第一方面中，第二屏幕尺寸可以是用户选择的屏幕尺寸。选择第二屏幕尺寸的操
作就是在第二屏幕尺寸下查看响应式布局的操作。例如，如图7a所示，检测到用户选择“平板1”这个选项时，电子设备可显示“平板1”的屏幕尺寸(即屏幕分辨率)，例如“长：2560px宽：1440px”。第二屏幕尺寸就可以是“平板1”的屏幕尺寸。
10.第一方面中，第二页面布局可以是根据用户为设计稿中的界面元素分配的原子能力(即布局适配规则)以及用于描述原子能力的参数确定出的。
11.可以看出，第一方面提供的方法，可支持ui设计师简单高效的解构设计稿、为设计稿中绘制的界面元素分配原子能力，以高效的将设计稿转换成响应式布局。而且，还支持ui设计师查看响应式布局在不同屏幕尺寸下的适配情况，直观高效，便于ui设计师及时有效的修改原子能力，以不断完善响应式布局，简便快捷的获得能够适配多屏幕尺寸的响应式布局。
12.结合第一方面中，在一些实施例中，第一布局适配规则可以包括以下一项或多项：第一类布局适配规则、第二类布局适配规则，第一类布局适配规则用于调整第一界面元素的位置、大小；第二类布局适配规则用于调整第一界面元素的布局。第一类布局适配规则又可以称为自适应变化能力，在页面尺寸变化时，可变化界面元素本身的尺寸和位置，来适应页面的变化。第二类布局适配规则可以称为自适应布局能力，在页面尺寸变化时，可变化界面元素的内部布局来适应页面的变化。
13.结合第一方面中，在一些实施例中，第一界面元素可以为一个或多个界面元素。
14.结合第一方面中，在一些实施例中，第一布局适配规则可以为一个或多个布局适配规则。
15.结合第一方面中，在一些实施例中，在电子设备检测到导入设计稿的操作之后，电子设备还可以显示多个布局适配规则，多个布局适配规则包括第一布局适配规则。这多个布局适配规则可以显示在如图3a-图3b所示的原子能力列表103中。
16.结合第一方面中，在一些实施例中，如果第一界面元素为多个界面元素，第一布局适配规则为多个布局适配规则，则：如图17所示，电子设备可以将用于多个布局适配规则的描述参数分为以下几类参数：用于确定界面元素大小的参数、用于确定界面元素个数的参数、用于确定界面元素的布局的参数。然后，在第一界面元素的大小、第一界面元素所处容器中能够显示的界面元素的个数确定出来的条件下，电子设备可以根据用于确定界面元素的布局的参数确定出第一界面元素的布局。其中，第一界面元素的大小是根据用于确定界面元素大小的参数确定的，用于确定界面元素个数的参数是根据用于确定界面元素个数的参数确定的。
17.结合第一方面中，在一些实施例中，在电子设备检测到导入设计稿的操作之后，电子设备还可以显示第一列表，第一列表中设计稿中绘制的界面元素按图层分组。第一列表可以如图3a-图3b所示的界面元素列表102。
18.结合第一方面中，在一些实施例中，电子设备可以检测到用户导出代码片段的操作，例如进入主菜单101中的“文件”选项，点击次级菜单“另存为”，选择将菜单104中展示的响应式布局保存为代码的操作。响应于该操作，如图9所示，电子设备可以将分配给第一界面元素的第一布局适配规则和用于描述第一布局适配规则转换成代码片段。
19.最后，电子设备可以输出代码片段。这样，可以节约软件开发者的编程工作量。
20.结合第一方面中，在一些实施例中，第一布局适配规则包括以下一项或多项布局
适配规则(又可以成为原子能力)：缩放规则、拉伸规则、隐藏规则、折行规则、均分规则、占比规则、延伸规则。其中，
21.缩放规则可用于规定界面元素的比例不变，按比例拉伸界面元素来适配界面元素的容器的尺寸变化；
22.拉伸规则可用于规定在用户选择的拉伸方向上拉伸界面元素来适配界面元素的容器的尺寸变化；
23.隐藏规则可用于规定一组界面元素的显示优先级来适应一组界面元素的容器的尺寸变化；
24.折行规则可用于规定根据一组界面元素的容器的可用空间将一组界面元素从单行排布调整为双行排布或多行排布，或者将一组界面元素从双行排布或多行排布调整为单行排布；
25.均分规则可用于规定一组界面元素之间的间距保持一致；
26.占比规则可用于规定一组界面元素在一组界面元素的容器内的空间占比；
27.延伸规则可用于规定一组界面元素的容器内部能够显示的界面元素数量根据容器的空间大小变化而变化。
28.第二方面，提供了一种电子设备，包括多个功能单元，用于相应的执行第一方面可能的实施方式中的任意一种所提供的方法。
29.第三方面，提供了一种电子设备，可用于执行第一方面描述的方法。电子设备可包括：蓝牙通信处理模块、显示屏、处理器和存储器，存储器上存储有一个或多个程序，处理器调用者一个或多个程序，使得计算机执行上述第一方面描述的方法。
30.第四方面，提供了一种计算机可读存储介质，可读存储介质上存储有指令，当其在计算机上运行时，使得计算机执行上述第一方面描述的方法。
31.第五方面，提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述第一方面描述的方法。
附图说明
32.为了更清楚地说明本技术实施例或背景技术中的技术方案，下面将对本技术实施例或背景技术中所需要使用的附图进行说明。
33.图1示出了市场上不同厂商、不同型号的设备的屏幕分辨率；
34.图2示出了本技术实施例提供的生成响应式页面的方法的简化流程。
35.图3a-图3b示例性示出了本技术实施例提供的用于设计响应式页面的用户界面。
36.图4a示例性示出了设计稿的图层结构。
37.图4b示例性示出了用户界面提供的解构设计稿的交互功能。
38.图5a-图5b、图6a-图6b示例性示出了用户界面提供的选择界面元素、分配原子能力的交互功能。
39.图7a-图7c、图8a-图8b示例性示出了用户界面提供的在不同屏幕尺寸下查看响应式布局的交互功能。
40.图9示出了将响应式页面转换为代码。
41.图10a简单示出了缩放能力。
42.图10b示出了界面元素使用缩放能力的示例。
43.图11a简单示出了拉伸能力。
44.图11b示出了界面元素使用拉伸能力的示例。
45.图12a简单示出了隐藏能力。
46.图12b示出了界面元素使用隐藏能力的一个示例。
47.图12c示出了界面元素使用隐藏能力的另一个示例。
48.图13a简单示出了折行能力。
49.图13b示出了界面元素使用折行能力的一个示例。
50.图13c示出了界面元素使用折行能力的另一个示例。
51.图14a简单示出了均分能力。
52.图14b示出了界面元素使用均分能力的一个示例。
53.图15a简单示出了占比能力。
54.图15b示出了界面元素使用占比能力的一个示例。
55.图16a简单示出了延伸能力。
56.图16b示出了界面元素使用延伸能力的一个示例。
57.图17示出了响应式布局计算引擎的流程。
58.图18a-图18b示出了原子能力组合、嵌套的两个示例；
59.图19示出了本技术实施例提供的电子设备的结构。
具体实施方式
60.目前，市场上不同厂商、不同型号的设备的屏幕分辨率一般不一样。如图1示例性所示，ui设计师需要对多种分辨率进行划分以得到几种基本尺寸，例如手机屏幕、平板竖屏、平板横屏、桌面显示器、大屏，展开的折叠屏、折合的折叠屏等等。
61.这几种基本尺寸存在较大差异，即便某个应用程序的一个页面，ui设计师也需要为这几种基本尺寸分别进行页面设计，输出多套设计稿。然后，ui设计师会将这多套设计稿交付给ui软件开发者，ui软件开发者再按照多套设计稿分别编程以生成不同的页面。这种方式工作量大，机械重复的设计工作、编程工作大大降低了页面开发效率。而且，当出现了之前没有考虑过的分辨率时，原有的页面的适配效果往往较差。对此，ui设计师和ui软件开发者需要重新设计、开发页面，在屏幕分辨率层出不穷的时代，这一方法已不再适用。
62.本技术实施例提供了一种生成响应式页面的方法，可以支持用户组合使用原子能力，将普通的设计稿转变成响应式布局，使得ui设计师能高效的设计出能够适应多种屏幕分辨率的响应式页面，并能将响应式布局使用的原子能力以及原子能力的相关描述参数转换成开发人员可阅读、使用的代码片段，以节约软件开发者的编程工作量。
63.图2示出了本技术实施例提供的生成响应式页面的方法的简化流程。该方法可主要运行于个人电脑、平板电脑、折叠屏手机等ui设计师使用的电子设备。如图2所示，电子设备执行本技术实施例提供的方法，主要是将一个输入变成两个输出。这一个输入是指设计稿，这两个输出是指响应式页面和代码片段。主要的流程可包括：首先，获取设计稿，将设计稿解构，得到设计稿中绘制的各个界面元素。然后，根据用户选择设计模块分配原子能力的操作，为设计模块分配原子能力，其中，一个设计模块可以是一个界面元素组，例如后面图
5a中的界面元素1d21、1d22、1d23、1d24、1d25构成的组可以称为“播放控制”模块。最后，通过响应式布局计算引擎将设计稿转换成响应式页面，输出响应式页面。并且，通过能力参数导出模块将该响应式页面所使用的原子能力和描述原子能力的相关参数转换为代码片段，输出代码片段。
64.本技术中，原子能力，例如缩放能力、拉伸能力、隐藏能力、这行能力、均分能力、占比能力、延伸能力等，可以是指布局适配规则。布局适配规则可规定某个界面元素或某组界面元素如何通过调整位置、尺寸、内部布局等来响应屏幕尺寸变化。一个原子能力可以关联一组参数，该参数可用于描述该原子能力。例如，拉伸能力的一组参数可包括：拉伸方向、固定边距等等，其中拉伸方向可用于规定是横向拉伸还是纵向拉伸，固定边距可用于规定被拉伸的界面元素与其容器之间的上、下、左、右边距是多少。后面后详细介绍这些典型的原子能力，这里先不展开。
65.本技术中，响应式页面是指在不同屏幕尺寸下有不同布局的页面，可整合从桌面显示器到手机屏幕等多种屏幕分辨率，用编程技术来使页面适应从小到大(现在到超大)的不同分辨率的屏幕。即，针对多种屏幕尺寸，不需要分别开发多套页面，仅需开发一套响应式页面就能适配。目前，响应式页面的开发一般是通过代码实现的，例如采用层叠样式表(cascading style sheets，css)的媒体查询(media query)技术，根据既定的几种主流屏幕尺寸加载不同的布局描述代码。这种方式下，响应式页面的代码很重，这意味着ui软件开发者的工作量巨大，而且，无法应对未知的屏幕尺寸。然而，本技术提供的方法将降低编程工作量，提高ui开发效率，更高效的适配更广泛的屏幕尺寸。
66.下面结合图3a-图3b、图4a-图4b、图5a-图5b、图6a-图6b、图7a-图7c、图8a-图8b，说明本技术提供的用于设计响应式页面的用户界面。
67.图3a-图3b示例性示出了本技术实施例提供的用于设计响应式页面的用户界面。
68.如图3a-图3b所示，个人电脑或平板电脑等电子设备可以显示用户界面*，用户界面可包括：主菜单101、界面元素列表102、原子能力列表103和画布104。其中，
69.主菜单101可包括文件、编辑、插入、图层、视图、窗口、帮助等选项，为用户提供了一系列利用设计稿生成响应式页面的相关交互功能。例如，文件选项中可提供新建、打开、存储、导出等交互功能。编辑选项可提供撤销、重做、复制、粘贴、剪切等功能。
70.界面元素列表102可用于展示设计稿中绘制的各种界面元素，如文本、图标、按钮、选项卡、标签、进度条、容器等。界面元素列表102具体可展示出设计稿中各个图层与界面元素之间的映射关系，可参考后面介绍的图4a-图4b。
71.原子能力列表103中显示有一些典型的原子能力，例如缩放能力、拉伸能力、隐藏能力、这行能力、均分能力、占比能力、延伸能力。一个原子能力可以关联一组参数，该参数可用于描述该原子能力。例如，拉伸能力的一组参数可包括：拉伸方向、固定边距等等，其中拉伸方向可用于规定是横向拉伸还是纵向拉伸，固定边距可用于规定被拉伸的界面元素与其容器之间的上、下、左、右边距是多少。后面会详细介绍这些典型的原子能力，这里先不展开。
72.画布104中可用于展示设计稿所设计的页面布局，一般可在默认设计尺寸下展示该页面。
73.如图3a-图3b所示，电子设备可以检测到用户导入设计稿的操作，例如，如图3a所
示选择主菜单101中的插入选项的导入文件这一功能选项来导入设计稿的操作，或如图3b所示拖动设计稿至画布104中的操作。
74.响应于导入设计稿的操作，电子设备可对设计稿进行解析，提取出设计稿中绘制的界面元素，以及这些界面元素和设计稿的各图层之间的映射关系。例如，如图4a所示，假设设计稿所绘制的页面是一个音乐播放器页面，电子设备可解析出：该设计稿中绘制的以下界面元素：“文本框1”、“文本框2”、“文本框3”、“文本框4”这些文本输入框，以及“上一首”、“下一首”、“开始播放”等图标。电子设备还可解析出：该设计稿由6个图层构成，以及界面元素与图层之间的映射关系，例如，“文本框1”、“文本框2”等可绘制在图层2上，“上一首”、“下一首”、“开始播放”等图标可绘制在图层6上。
75.其中，提取出设计稿中绘制的界面元素可以是指，提取出界面元素所引用的图像资源。例如从设计稿中提取出“上一首”图标是指提取出该图标所引用的矢量图。
76.并且，在对设计稿进行解析之后，电子设备还可显示图4b示例性所示的用户界面，以向用户展示被解构的设计稿。
77.图4b示例性示出了用户界面提供的解构设计稿的交互功能。
78.如图4b所示，电子设备可在画布104中显示该设计稿中绘制的界面元素，这些界面元素可遵循该设计稿而显示于画布104中。其中，这些界面元素遵循该设计稿而显示于画布104中是指，在画布104中，这些界面元素的样式(图案、颜色、形状等)遵循该设计稿，这些界面元素的布局也遵循该设计稿。
79.例如，如图4b所示，遵循图4a所示的设计稿，在画布104中：界面元素1a11、1b21、1a13并排显示在页面顶部，在此之下依次纵向显示的是用于展示歌曲名称的界面元素1c1、用于展示歌词的界面元素1c21，在界面元素1c21之下横向并排显示的是用于展示播放进度的界面元素1d11、1d12、1d13，界面元素1d121、1d122、1d123、1d124、1d125并排显示在页面底部。也即是说，画布104中显示的这些界面元素体现了设计稿所描述的页面布局。
80.和设计稿的区别在于，画布104中展示的页面布局由界面元素构成，在被分配原子能力之后可对用户选择的设计尺寸进行响应，具有适配能力。而设计稿是静态的图像文件，它只能反映绘制时所考虑的设计尺寸下的页面布局。
81.如图4b所示，电子设备还可在界面元素列表102中显示画布104中的界面元素的标识信息(名称、编号等)，具体可将各个界面元素按所属图层进行分组显示。
82.为了进一步加强画布104和列表102中的同一界面元素之间的联系，当检测到用户选择列表102中的某个界面元素(如“上一首”图标)时，电子设备可在画布104中突出显示该界面元素(如“上一首”图标)。反之，当检测到用户在画布104中选择某个界面元素时，电子设备可在列表102中突出显示该某个界面元素。突出显示可包括但不限于以下方式：边框加粗、背景变色、缩放显示等。这样，用户便可以直观高效的了解到图层、界面元素、布局之间的联系，便于ui设计。
83.从图4b可以看出，在导入设计稿之后，用户界面中会展示出从设计稿中结构出来的各个界面元素，例如在画布104中遵循设计稿而显示的各个界面元素、列表102中的各个图层下的界面元素。这样，可便于ui设计师选择界面元素，进行原子能力分配。
84.图5a-图5b、图6a-图6b示例性示出了用户界面提供的选择界面元素、分配原子能力的交互功能。
85.如图5a和图5b所示，电子设备可检测到用户选择界面元素的操作。响应于该操作，电子设备可将用户选择的界面元素显示为选中状态，并记录用户选择的界面元素。
86.例如，如图5a所示，用户可连续点选界面元素1d1、1d121、1d122、1d123、1d124、1d125。又例如，如图5b所示，用户可以一次选择(例如框选)界面元素1d1、1d121、1d122、1d123、1d124、1d125。这些界面元素可突出显示，以表示这些界面元素处于选中状态。
87.用户可以选择为单个界面元素分配原子能力，也可以选择为多个界面元素分配原子能力。单个界面元素。
88.进一步的，如图6a和图6b所示，在检测到用户选择界面元素之后，电子设备还可检测到为选中的界面元素分配原子能力的操作。响应于该操作，电子设备可为用户选择的界面元素分配该原子能力规定的布局适配规则。之后，当屏幕尺寸变化时，该选中的一组界面元素就会按照“隐藏能力”规定的布局适配规则进行布局适配，即响应屏幕尺寸变化。
89.例如，如图6a所示，在检测到用户框选一组界面元素1d121、1d122、1d123、1d124、1d125之后，电子设备可进一步检测到用户为选中的这一组界面元素分配“隐藏能力”的操作。响应于该操作，电子设备可为用户选择的界面元素分配“隐藏能力”规定的布局适配规则。
90.其中，为选中的一组界面元素分配“隐藏能力”可包括：设置用于描述“隐藏能力”的相关参数，例如隐藏方向、隐藏优先级。例如，如图6a所示，隐藏方向可通过“布局方向”选项设置，隐藏优先级可通过填写优先级(如界面元素1d23的优先级为“1”)来设置。之后，当屏幕尺寸变化时，选中的这一组界面元素1d121、1d122、1d123、1d124、1d125就会按照“隐藏能力”规定的布局适配规则进行布局适配，例如屏幕尺寸变小时隐藏界面元素1d 21，即响应屏幕尺寸变化。
91.又例如，如图6b所示，在检测到用户框选一组界面元素1d1、1d121、1d122、1d123、1d124、1d125之后，电子设备可进一步检测到用户为选中的这一组界面元素分配“折行能力”的操作。其中，界面元素1d1是一个容器，其内包括一组界面元素1d11、1d12、1d13。响应于该操作，电子设备可为用户选择的界面元素分配“折行能力”规定的布局适配规则。
92.其中，为选中的一组界面元素分配“折行能力”可包括：设置用于描述“折行能力”的相关参数，例如折行方向、对齐方式、元素间距、参考大小。例如，如图6b所示，折行方向可通过“折行方向”选项设置，对齐方式可通过“水平对齐方式”或“垂直对齐方式”选项设置，元素间距可通过“水平间距”、“垂直间距”选项设置。之后，当屏幕尺寸变化时，选中的这一组界面元素1d1、1d121、1d122、1d123、1d124、1d125就会按照“折行能力”规定的布局适配规则进行布局适配，例如屏幕尺寸变小时向下折行，即响应屏幕尺寸变化。
93.参考图5a-图5b、图6a-图6b示例性所示的交互方式，用户可为设计稿中绘制的所有界面元素分配原子能力，以得到能够适配屏幕尺寸变化的、具有响应能力的页面布局。关于“隐藏能力”、“折行能力”等原子能力，后面内容中会详细介绍，这里先不展开。
94.图7a-图7c、图8a-图8b示例性示出了用户界面提供的在不同屏幕尺寸下查看响应式布局的交互功能。
95.如图7a-图7c所示，图3a-图3b示例性所示的用户界面还可包括：屏幕尺寸选择按钮。电子设备可检测到用户点击按钮的操作，响应于该操作，可显示多个屏幕尺寸选项。这多个屏幕尺寸选项可分为以下几类：“手机”选项、“平板”选项、“手表”选项、“电视”选项、“自定义”选项。每一类屏幕尺寸选项可包括多个具体的屏幕尺寸选项。
96.例如，如图7a所示，检测到用户选择“平板”选项，电子设备可以显示多个平板屏幕尺寸选项，例如“平板1”、“平板2”、“平板3”。当检测到用户选择“平板1”这个选项时，电子设备可显示“平板1”的屏幕尺寸(即屏幕分辨率)，例如“长：2560px宽：1440px”，甚至还可以显示“平板1”的像素密度，例如“像素密度(dpi)：300”。
97.又例如，如图7b所示，检测到用户选择“手机”选项，电子设备可以显示多个的手机屏幕尺寸选项，例如“手机1”、“手机2”、“手机3”。当检测到用户选择“手机2”这个选项时，电子设备可显示“手机2”的屏幕尺寸，例如“长：2340px宽：1080px”，甚至还可以显示“手机2”的像素密度，例如“像素密度(dpi)：360”。
[0098]“手表”、“电视”等其他选项也可类似图5a、图5b提供多个具体的屏幕尺寸。
[0099]
另外，如图7c所示，图3a-图3b示例性所示的用户界面还可支持用户手动设置分辨率来自定义屏幕尺寸。
[0100]
如图8a-图8b所示，响应于用户改变屏幕尺寸的操作，电子设备可在画布104中显示新的页面布局，该新的页面布局是根据界面元素被分配的原子能力适配新的屏幕尺寸生成的。这样，用户便可以在不同屏幕尺寸下查看响应式布局的输出效果，直观的感受到为设计稿中的界面元素分配的原子能力是否合适，方便ui设计师调整界面元素的原子能力，以更高效的获得能够适配多种屏幕尺寸的响应式布局。
[0101]
具体的，如图8a所示，检测到屏幕尺寸从“手机2”(分辨率为2340px*1080px)变成了“平板1”(分辨率为2560px*1440px)，即横向分辨率、纵向分辨率都变大了，电子设备可根据设计稿中绘制的各个界面元素被分配的原子能力生成适配“平板1”的页面布局，并在画布104中显示该页面布局。
[0102]
比较图4b和图8a所示的页面布局可以看出，容器1d1(内部有用于展示播放进度的界面元素1d11、1d12、1d13)和界面元素1d121、1d122、1d123、1d124、1d125所构成的界面元素组因如图6b所示被分配了折行能力，而从分开两排显示变成了一排显示，能适配横向分辨率更大的屏幕。
[0103]
具体的，如图8b所示，检测到屏幕尺寸从“手机2”(分辨率为2340px*1080px)变成了“自定义设备2”(分辨率为360px*480px)，或者检测到屏幕尺寸从“平板1”(分辨率为2560px*1440px)变成了“自定义设备2”(分辨率为360px*480px)，即横向分辨率、纵向分辨率都变小了，电子设备可根据设计稿中绘制的各个界面元素被分配的原子能力生成适配“自定义设备2”的页面布局，并在画布104中显示该页面布局。
[0104]
比较图4b和图8b所示的页面布局可以看出，界面元素1d121、1d122、1d123、1d124、1d125所构成的界面元素组因如图6a所示被分配了隐藏能力(隐藏方向为横向隐藏)，而隐藏了界面元素1d121、1d125，能适配横向分辨率更小的屏幕。为了适配纵向分辨率更小的屏幕，用于展示歌词的界面元素1c21被隐藏了，因为用于展示歌曲名称的界面元素1c1和用于展示歌词的界面元素1c21成为一组被分配了隐藏能力，隐藏方向是纵向隐藏。
[0105]
从图3a-图3b、图4a-图4b、图5a-图5b、图6a-图6b、图7a-图7c、图8a-图8b可以看出，本技术实施例提供的用于设计响应式页面的用户界面可支持ui设计师简单高效的解构设计稿、为设计稿中绘制的界面元素分配原子能力，以高效的将设计稿转换成响应式布局。而且，还支持ui设计师查看响应式布局在不同屏幕尺寸下的适配情况，直观高效，便于ui设
计师及时有效的修改原子能力，以不断完善响应式布局，简便快捷的获得能够适配多屏幕尺寸的响应式布局。
[0106]
另外，如图9所示，本技术实施例提供的用于设计响应式页面的用户界面还可支持用户导出可被软件开发者阅读、使用的关于该响应式页面的代码片段，以节约软件开发者的编程工作量。运行显示用户界面的电子设备可检测到用户导出代码的操作，例如进入主菜单101中的“文件”选项，点击次级菜单“另存为”，选择将菜单104中展示的响应式布局保存为代码的操作。响应该操作，电子设备可将该响应式布局转换成描述该响应式布局的代码，并保存该代码。本技术对该代码的类型不作限制。电子设备具体是依据代码编写规则(不同类型的编码规则不一样)，将该响应式布局使用的原子能力(定义布局适配规则的参数)转换成代码的。
[0107]
下面介绍本技术实施例提供的几种典型的原子能力。这几种典型的原子能力可以分为两大类：一类可以称为自适应变化能力，包括缩放能力和拉伸能力，在页面尺寸变化时，可变化界面元素本身的尺寸和位置，来适应页面的变化。另一类可以称为自适应布局能力，包括隐藏能力、折行能力、均分能力、占比能力和延伸能力，在页面尺寸变化时，可变化界面元素的内部布局来适应页面的变化。
[0108]
(1)缩放能力：保持界面元素的比例(如宽高比例)不变，界面元素整体按该比例缩放，来适应该界面元素的容器的尺寸变化。
[0109]
缩放能力的可调参数可包括但不限于：
[0110]
1.可用空间——水平百分比/垂直百分比；
[0111]
2.缩放极限——最大值/最小值。
[0112]
其中，“可用空间”通过相对参照物的方式来确定界面元素缩放后的宽或高。例如，以界面元素的容器为参照物，水平百分比/垂直百分比可用来确定界面元素缩放后的最大空间(最大宽/最大高)。“缩放极限”可用来避免缩放后的界面元素因为过大或过小而影响用户体验。“可用空间”、“缩放极限”参数可影响界面元素的大小。
[0113]
图10a简单示出了缩放能力。图10a中的界面元素s的宽高比例为1:1。在容器尺寸(图10a中是屏幕尺寸)变化时，界面元素s整体保持1:1的比例进行缩放，其内的文本也以1:1的比例进行缩放。例如，图10a中的从(a)到(c)，界面元素s整体(包括其内的文本)保持1:1的比例进行放大；图10a中的从(c)到(a)，界面元素s整体(包括其内的文本)保持1:1的比例进行缩小。
[0114]
缩放能力的实现过程可如下：首先，根据“可用空间”参数计算缩放后界面元素的整体大小。然后，根据“缩放极限”参数判断缩放后的界面元素的大小(宽或高)是否超出了允许范围，如果超出了，便停止缩放。
[0115]
缩放过程还可递归到界面元素的内部布局中，即遍历内部的所有界面元素，可以根据内部界面元素设计属性的不同，作出不同处理：
[0116]
1.矢量图形——根据缩放百分比，按比例中心缩放；
[0117]
2.文本——根据缩放百分比，将字号按比例缩放；
[0118]
3.边框——根据缩放百分比，将边框粗细按比例缩放；
[0119]
4.阴影——根据缩放百分比，将阴影范围按比例缩放；
[0120]
5.模糊——根据缩放百分比，将模糊半径按比例缩放。
[0121]
图10b示出了界面元素使用缩放能力的示例。表盘10a01这一界面元素使用了缩放能力，表盘10a01处于整个闹钟页面的容器10a01中。缩放能力的相关参数如下：“可用空间”为垂直百分比，其值为容器10a01的1/3；“缩放极限”为高度的最小值，其值为100px。
[0122]
在(a)中，表盘10a02宽高比例是1:1，宽高分辨率均为933px。当屏幕尺寸变小时，如屏幕高度从(a)中的3120px减小到(b)中的2560px，表盘10a02保持宽高比例为1:1进行缩小，缩小后的表盘10a02的宽高分辨率均为746px，符合“可用空间”、“缩放极限”参数。同时，表盘10a02内的界面元素也进行了缩放，例如表盘内的数字从12sp缩小到了10sp，分针的粗细从20px缩小到16px。
[0123]
缩放能力比较适合整体比例不变的界面元素使用，例如图像或图形类的界面元素，不会导致图形或图像变形。
[0124]
(2)拉伸能力：可以往水平/垂直方向拉伸界面元素，来适应该界面元素的容器的尺寸变化。
[0125]
拉伸能力的可调参数可包括但不限于：
[0126]
1.拉伸方向：水平/垂直；
[0127]
2.固定边距：上/下/左/右；
[0128]
3.拉伸极限：最大值/最小值。
[0129]
其中，“拉伸方向”可规定拉伸方向，例如水平拉伸会改变宽度，垂直拉伸会改变高度。“固定边距”可用来规定拉伸后的界面元素与其容器之间的边距，规定了拉伸后的界面元素相对于其容器的位置。“拉伸极限”可用来避免界面元素在某个方向上因为过度拉伸而影响用户体验。“固定边距”、“拉伸极限”参数可影响界面元素的大小，“拉伸方向”、“固定边距”又可影响界面元素的布局。
[0130]
图11a简单示出了拉伸能力。在容器尺寸(图11a中是屏幕尺寸)变化时，界面元素s在水平方向上拉伸。例如，图11a中的从(a)到(c)，界面元素s在水平方向上拉伸，宽度变大，界面元素s与容器之间的左右边距d保持不变；图11a中的从(c)到(a)，界面元素s在水平方向上拉伸，宽度变小，界面元素s与容器之间的左右边距d保持不变。
[0131]
拉伸能力的实现过程可如下：首先，根据“拉伸方向”参数和“固定边距”参数计算拉伸后的界面元素在拉伸方向上的长度。例如，如果拉伸方向是水平方向，则可根据这两个参数计算出拉伸后的界面元素的宽；如果拉伸方向是垂直方向，则可根据这两个参数计算出拉伸后的界面元素的高。然后，根据“拉伸极限”参数判断拉伸后的界面元素在拉伸方向上的长度是否超出了允许范围，如果超出了，便停止拉伸。
[0132]
图11b示出了界面元素使用拉伸能力的示例。列表12a03这一界面元素使用了拉伸能力。拉伸能力的相关参数如下：“拉伸方向”为水平方向；“固定边距”为左右边距，其值为96px。当屏幕尺寸变大时，如屏幕宽度从(a)变到(b)，列表12a03会适配变宽的屏幕进行水平拉伸，并且保持与屏幕的左右边距为96px不变。
[0133]
拉伸能力比较适合水平方向或垂直方向的尺寸允许改变的界面元素使用，例如列表，不会影响用户体验。
[0134]
(3)隐藏能力：定义了一组界面元素的显示优先级，来适应该一组界面元素的容器的尺寸变化。
[0135]
隐藏能力的可调参数可包括但不限于：
[0136]
1.隐藏方向：水平/垂直；
[0137]
2.隐藏顺序：优先级定义。
[0138]
其中，“隐藏方向”可规定隐藏方向，例如水平方向上隐藏内部界面元素会减小宽度，垂直方向上隐藏内部界面元素会减小高度。“隐藏顺序”可用来规定内部界面元素的显示优先级，显示优先级越高越后隐藏，显示优先级越低越先隐藏。“隐藏顺序”可影响界面元素的个数，“隐藏方向”可影响界面元素的布局。
[0139]
图12a简单示出了隐藏能力。图中的数字表示不同界面元素的显示优先级(隐藏顺序)，数字越小，显示优先级越高，隐藏顺序越靠后。当屏幕尺寸的宽度变小时，如从(c)到(a)，显示优先级低的界面元素会被隐藏，如先隐藏界面元素“3”、再隐藏界面元素“2”，以适配不断变窄的屏幕。当屏幕尺寸的宽度变大时，如从(a)到(c)，被隐藏的界面元素先后被显示出来，以适配不断变宽的屏幕。
[0140]
隐藏能力的实现过程可如下：首先，根据“隐藏方向”参数和“隐藏顺序”参数确定所选隐藏方向的可用空间能够容纳的元素个数，再确定显示哪些界面元素，隐藏哪些界面元素。
[0141]
图12b示出了界面元素使用隐藏能力的一个示例。容器14a00内的表盘14a01、闹钟列表14a02、底部菜单14a03这一组界面元素使用了隐藏能力。隐藏能力的相关参数如下：“隐藏方向”为垂直方向；“隐藏顺序”为：表盘14a01最先隐藏、底部菜单14a03次之，闹钟列表14a02最后隐藏。当屏幕尺寸变小时，如屏幕高度从(a)变到(b)，表盘14a01会被隐藏。
[0142]
图12c示出了界面元素使用隐藏能力的另一个示例。(a)为标准的播放器页面。容器15a0内的封面15a1、歌曲名称15a2、播放控件菜单15a3这一组界面元素使用了隐藏能力。隐藏能力的相关参数如下：“隐藏方向”为垂直方向；“隐藏顺序”为：封面15a1最先隐藏、歌曲名称15a2次之，播放控件菜单15a3最后隐藏。同时，播放控件菜单15a3也使用了隐藏能力，播放控件菜单15a3内的界面元素包括：收藏15a31、上一首15a32、播放15a33、下一首15a34、评论15a35。播放控件菜单15a3的隐藏能力的相关参数如下：“隐藏方向”为水平方向；“隐藏顺序”为：收藏15a31和评论15a35最先隐藏、上一首15a32次之和下一首15a34次之，播放15a33。
[0143]
当屏幕尺寸变小时，如屏幕宽高从(a)到(c)变小，垂直方向上，封面15a1最先隐藏、歌曲名称15a2次之，水平方向上，播放控件菜单15a3中的收藏15a31和评论15a35最先隐藏、上一首15a32次之和下一首15a34次之。当屏幕尺寸变大时，如屏幕宽高从(c)到(a)变小，垂直方向上，歌曲名称15a2、封面15a1按照显示顺序依次显示出来了；水平方向上，播放控件菜单15a3中的收藏15a31和评论15a35、上一首15a32次之和下一首15a34按照显示顺序依次显示出来了。
[0144]
隐藏能力比较适合水平方向或垂直方向的可用空间有限的容器类界面元素使用，例如标签栏、菜单、按钮栏等，可优先显示用户最关切的内部界面元素。
[0145]
(4)折行能力：规定根据一组界面元素的容器的可用空间和比例来调整这一组界面元素的布局，将单行排布改成双行排布或多行排布。
[0146]
折行能力的可调参数可包括但不限于：
[0147]
1.折行方向：正向/逆向；
[0148]
2.对齐方式：左对齐/右对齐/中心对齐/顶对齐/底对齐/中心对齐；
[0149]
3.元素间距：水平间距/垂直间距；
[0150]
4.参考大小：各元素大小。
[0151]
其中，“折行方向”可规定折行方向，可影响内部布局。“对齐方式”可用来规定折行后的多行的对齐方式，可影响内部布局。“元素间距”可用来规定内部的界面元素之间的距离。“参考大小”可用来规定内部的界面元素的尺寸。这几个参数都可影响界面元素的布局，“参考大小”可影响界面元素的大小。
[0152]
图13a简单示出了折行能力。当屏幕尺寸的宽度变小时，如从(c)到(a)，4个界面元素从单行排布变成双行排布，以适配不断变窄的屏幕。当屏幕尺寸的宽度变大时，如从(a)到(c)，又从双行排布变成单行排布，以适配不断变宽的屏幕。
[0153]
折行能力的实现过程可如下：首先，根据“折行方向”参数和“参考大小”参数确定每一行可用空间能够容纳的元素个数，确定每一行显示哪些界面元素，再根据“对齐方式”参数和“元素间距”参数确定每一行中界面元素的位置。
[0154]
图13b示出了界面元素使用折行能力的一个示例。容器17a0内的表盘17a1、容器17a2这一组界面元素使用了折行能力，容器17a2内有闹钟列和底部菜单。当从横屏变成竖屏时，如从(b)变到(a)，单行排布的表盘17a1和容器17a2会折行成双行排布来显示。当从竖屏变成横屏时，如从(a)变到(b)，双行排布又会变成单行排布。
[0155]
图13c示出了界面元素使用折行能力的另一个示例。容器18a0这一界面元素使用了折行能力，容器17a0内有3个卡片。当屏幕宽度变化时，根据屏幕宽度可容纳的卡片数量，进行折行显示。
[0156]
(5)均分能力：规定一组界面元素之间的间距一致，以适应这一组界面元素的容器的尺寸变化。
[0157]
均分能力的可调参数可包括但不限于：
[0158]
1.均分方向：水平/垂直；
[0159]
2.边距定义：包含/不包含边缘；
[0160]
3.间距极限：最大值/最小值。
[0161]
其中，“均分方向”可规定在哪个方向上内部界面元素之间的间距一致。“边距定义”可用来规定内部界面元素之间的间距算不算上元素的边框的宽度，一般为可选参数。“间距极限”可用来避免内部界面元素之间间隔过近或过远而影响用户体验。这几个参数都可影响界面元素的布局。
[0162]
图14a简单示出了均分能力。无论屏幕的宽度如何变化，内部界面元素之间的间距始终保持一致，水平方向上呈等间距排列。但是，间距会根据屏幕的宽度而定。
[0163]
均分能力的实现过程可如下：首先，根据“均分方向”参数和“边距定义”参数确定可分配的间距总和，进而算出元素之间的间距，再根据“间距极限”参数判断元素之间的间距是否超出了极限值，如果超出了，则以极限值做为元素间距。
[0164]
图14b示出了界面元素使用均分能力的一个示例。容器20a0内的闹钟20a1、世界时钟20a2，秒表20a3和计时器20a4这一组界面元素使用了均分能力。当屏幕宽度变小时，如从(b)变到(a)，容器20a0内的界面元素等间距排列但间距变小。当屏幕宽度变大时，如从(a)变到(b)，容器20a0内的界面元素等间距排列但间距变大。
[0165]
(6)占比能力：规定了一组界面元素在其容器的空间上的占比。
[0166]
占比能力的可调参数可包括但不限于：
[0167]
1.占比方向：水平/垂直；
[0168]
2.比值定义：各元素百分比。
[0169]
其中，“占比方向”可规定指定界面元素在容器中的占比是在哪个方向上的占比。“比值定义”可规定指定界面元素的占比的大小。“占比方向”参数可影响界面元素的布局，“比值定义”参数可影响界面元素的大小。
[0170]
图15a简单示出了占比能力。水平方向上，容器内的空间占比始终按1:2进行分配，界面元素a在容器中的占比是1/3、界面元素b在容器中的占比是2/3，该占比不受屏幕宽度的变化而影响。
[0171]
占比能力的实现过程可如下：根据“占比方向”参数和“比值定义”参数计算容器的可用空间在占比方向上的分配比例。
[0172]
图15b示出了界面元素使用占比能力的一个示例。容器22a0内的表盘22a1、闹钟22a2这组一界面元素使用了占比能力。占比能力的相关参数如下：“占比方向”为水平方向；“比值定义”为：表盘22a1、闹钟22a2各占容器的50％空间。当屏幕宽度变化时，表盘22a1、闹钟22a2在容器22a0内的占比均保持50％不变。
[0173]
(7)延伸能力：定义了一组界面元素的容器内部能够显示的界面元素数量根据容器空间变化而变化。
[0174]
延伸能力的可调参数可包括但不限于：
[0175]
1.延伸方向：水平/垂直；
[0176]
2.间距定义：具体数值；
[0177]
3.露出特征：是/否；
[0178]
4.间距极限：最小值。
[0179]
其中，“延伸方向”可规定容器内在哪个方向上增加界面元素。“间距定义”可用来规定内部的界面元素之间的距离。“露出特征”可用来规定是否允许露出(显示)某个界面元素的一部分。“间距极限”可用来避免内部界面元素之间间隔过近或过远而影响用户体验。这几个参数都可影响容器的内部布局。影响容器内显示的界面元素个数的参数可包括：“间距定义”、“露出特征”、“间距极限”。这几个参数都可影响界面元素的布局，“间距定义”、“露出特征”和“间距极限”可影响界面元素的个数。
[0180]
图16a简单示出了延伸能力。水平方向上，随着屏幕宽度变大，显露的内部界面元素越多。
[0181]
延伸能力的实现过程可如下：首先，根据“间距定义”、“露出特征”、“间距极限”这几个参数确定延伸方向上能够容纳的元素个数。当容器空间随屏幕尺寸增多可容纳更多元素时，则复制第一个元素作为补充，空间缩小时优先删除复制的元素，进一步缩小时再隐藏已有的界面元素(即非复制的界面元素)。
[0182]
图16b示出了界面元素使用延伸能力的一个示例。容器24a0这一界面元素使用了延伸能力，容器24a0内有多个图表类界面元素，当屏幕宽度变大时，如从(a)变到(b)，容器24a0可容纳更多元素，复制已有的界面元素填充增加的可用空间。当屏幕宽度变小时，如从(b)变到(a)，优先删除之前复制的界面元素。
[0183]
不限于上面描述的几种典型原子能力、原子能力关联的相关参数，本技术实施例
提供的生成响应式页面的方法还可以使用其他原子能力，为原子能力定义其他相关参数。
[0184]
本技术实施例中，不同的原子能力之间是可以组合使用的，即一个界面元素可以使用多种原子能力。界面元素之间也可以相互嵌套原子能力，即大容器用原子能力，内部小容器也使用原子能力，可在屏幕尺寸变化时联动生效。原子能力的组合、嵌套运用可给响应式页面设计带来更多的灵活性，可覆盖更多屏幕尺寸，也可适用更多应用场景，例如横竖屏转换场景、分屏场景、折叠屏场景等等。
[0185]
但是，原子能力组合、嵌套也会带来冲突和重复计算的问题。例如，图18a中的“上一首”、“播放”、“下一首”这几个界面元素被分配了缩放能力，这几个界面元素又被分配了隐藏能力。当屏幕尺寸变化时，这几个界面元素的容器25a01的水平方向上的可用空间能够显示哪些界面元素，不仅跟缩放后的各个元素的大小有关系(即跟缩放能力的相关参数有关)，也跟容器25a01使用的隐藏能力管理的“隐藏顺序”参数有关系。
[0186]
为了避免多原子能力组合、嵌套带来的冲突和重复计算的问题，在组合使用原子能力时，图2中的响应式布局计算引擎可先综合分析设计稿和为各个界面元素分配的原子能力，再作用到界面元素上。如图17所示，主要过程可包括：
[0187]
步骤1.响应式布局计算引擎可先加载设计稿和为设计稿中的各界面元素分配的原子能力(包括原子能力的相关参数)。这样，响应式布局计算引擎就可以分析出各图层所使用的原子能力以及这些原子能力的相关参数。具体的，响应式布局计算引擎可以确定出各个界面元素被分配的原子能力以及原子能力的相关参数。
[0188]
步骤2.响应式布局计算引擎可对综合使用的原子能力的相关参数进行分类，将各项参数分类为：影响界面元素个数的参数、影响界面元素尺寸的参数、影响布局的参数。前面介绍原子能力时，已说明过各项参数对界面元素个数、界面元素尺寸、布局有无影响。
[0189]
步骤3.响应式布局计算引擎在得到目标设计尺寸后，便在目标设计尺寸下依据步骤2中分类出来的参数进行布局计算。目标设计尺寸可以是ui设计师通过图3a所示的用户界面输入的。其中，布局计算可通过先大小，再个数，最后布局的方式进行。具体的，响应式布局计算引擎可先综合考虑影响界面元素大小的参数，确定出要显示的界面元素的大小。然后，在界面元素大小确定的前提下，再综合考虑影响界面元素个数的参数，确定出可容纳的界面元素的个数。最后，在界面元素大小、界面元素个数都确定的前提下，根据影响界面元素布局的参数，确定出布局。
[0190]
步骤4.最后，根据确定出的目标设计尺寸下要生效的界面元素的大小、界面元素个数、界面元素布局，应用到相应界面元素上，以形成适配目标设计尺寸的页面布局。
[0191]
图18a-图18b示出了原子能力组合、嵌套的两个示例。
[0192]
如图18a所示，“上一首”、“播放”、“下一首”这几个界面元素被分配了缩放能力，这几个界面元素又被分配了隐藏能力、均分能力。也即是说，图18a的示例中同时使用了缩放能力、均分和隐藏能力。当屏幕尺寸变化时，可根据缩放能力的“可用空间”、“缩放极限”参数先计算出界面元素的大小，然后根据已确定出的界面元素的大小和隐藏能力的“隐藏顺序”参数再确定要显示哪些界面元素，最后根据均分能力的相关参数以及其他两个能力中影响布局的参数确定出界面元素的布局。
[0193]
如图18b所示，容器28a0中的几个界面元素组合使用了折行能力和均分能力。当屏幕尺寸变化时，可根据折行能力的“折行方向”、“参考大小”等影响元素个数的参数确定出
每行可显示的元素个数，然后根据均分能力的相关参数、折行能力的“对齐方式”、“元素间距”等影响元素布局的参数确定出界面元素的布局。
[0194]
可以看出，本技术实施例提供了生成响应式页面的方法，可以支持用户组合使用原子能力，将普通的设计稿转变成响应式布局，使得ui设计师能高效的设计出能够适应多种屏幕分辨率的响应式页面。
[0195]
这样，ui设计师在完成了一个标准尺寸的设计页面后，便可以：a.框选页面上的一组界面元素(又可以称为功能模块)，给所选的界面元素分配一个或多个原子能力；b.输入或调整原子能力的相关参数(如元素间距、参考大小等)，以生成一个响应式页面。其中，不同的原子能力之间是可以组合、嵌套使用的，可给响应式页面的设计带来更多的灵活性，可覆盖更多屏幕尺寸，也可适用更多应用场景。
[0196]
另外，ui设计师定稿一个响应式页面对不同屏幕尺寸的适配效果后，可导出该页面或页面的部分所使用的原子能力的参数代码片段，交付给开发人员使用，进而节约编程工作量。
[0197]
为了进一步提高ui开发效率，在导入设计稿之后，电子设备可根据设计稿的排版样式，归类为不同的布局类型，进行智能判断，匹配适合的原子能力，快速生成响应式页面。具体的，电子设备可将设计稿输入可信的(训练好的)神经网络，得到输出的为各界面元素匹配的原子能力。该神经网络可以通过大量的训练样本训练得到，其中每一个训练样本都可包括输入数据部分和输出数据部分，其中，输入数据部分是设计稿，输出数据部分是该设计稿设计的页面所使用的原子能力。输出数据部分表示的原子能力使得该页面成为能够适配多个不同屏幕尺寸的响应式页面。
[0198]
下面介绍本技术实施例涉及的相关设备。图19是本技术实施例提供的电子设备100的结构示意图。电子设备100可以是个人电脑、平板电脑、折叠屏手机等。
[0199]
如图19所示，电子设备100可以包括：处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，usb)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，无线通信模块160，音频模块170，扬声器170a，受话器170b，麦克风170c，耳机接口170d，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194等。其中：
[0200]
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，ap)，调制解调处理器，图形处理器(graphics processing unit，gpu)，图像信号处理器(image signal processor，isp)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，dsp)，基带处理器，和/或神经网络处理器(neural-network processing unit，npu)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。
[0201]
其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。
[0202]
处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。
[0203]
在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，i2c)接口，集成电路内置音频(inter-integrated circuit sound，i2s)接口，脉冲编码调制(pulse code modulation，pcm)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，uart)接口，移动产业处理器接口(mobile industry processor interface，mipi)，通用输入输出(general-purpose input/output，gpio)接口，用户标识模块(subscriber identity module，sim)接口，和/或通用串行总线(universal serial bus，usb)接口等。
[0204]
可以理解的是，本技术实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本技术另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。
[0205]
充电管理模块140用于从充电器检测到充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141检测到电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器120，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。
[0206]
天线用于发射和检测到电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。
[0207]
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wireless local area networks，wlan)(如无线保真(wireless fidelity，wi-fi)网络)，蓝牙(bluetooth，bt)，全球导航卫星系统(global navigation satellite system，gnss)，调频(frequency modulation，fm)，近距离无线通信技术(near field communication，nfc)，红外技术(infrared，ir)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2检测到电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110检测到待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。示例性地，无线通信模块160可以包括蓝牙模块、wi-fi模块等。
[0208]
在一些实施例中，电子设备100的天线和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications，gsm)，通用分组无线服务(general packet radio service，gprs)，码分多址接入(code division multiple access，cdma)，宽带码分多址(wideband code division multiple access，wcdma)，时分码分多址(time-division code division multiple access，td-scdma)，长期演进(long term evolution，lte)，bt，gnss，wlan，nfc，fm，和/或ir技术等。所述gnss可以包括全球卫星定位系统(global positioning system，gps)，全球导航卫星系统(global navigation satellite system，glonass)，北斗卫星导航系统(beidou navigation satellite system，bds)，准天顶卫星系统(quasi-zenith satellite system，qzss)和/或星基增强系统(satellite based augmentation systems，sbas)。
[0209]
电子设备100通过gpu，显示屏194，以及应用处理器等实现显示功能。gpu为图像处理的微处理器，连接显示屏194和应用处理器。gpu用于执行数学和几何计算，用于图形渲
染。处理器110可包括一个或多个gpu，其执行程序指令以生成或改变显示信息。
[0210]
显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，lcd)，有机发光二极管(organic light-emitting diode，oled)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode的，amoled)，柔性发光二极管(flex light-emitting diode，fled)，miniled，microled，micro-oled，量子点发光二极管(quantum dot light emitting diodes，qled)等。在一些实施例中，电子设备100可以包括1个或n个显示屏194，n为大于1的正整数。
[0211]
电子设备100可以通过isp，摄像头193，视频编解码器，gpu，显示屏194以及应用处理器等实现拍摄功能。
[0212]
isp用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给isp处理，转化为肉眼可见的图像。isp还可以对图像的噪点，亮度，肤色进行算法优化。isp还可以对拍摄场景的曝光，色温等参数优化。在一些实施例中，isp可以设置在摄像头193中。
[0213]
摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，ccd)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，cmos)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给isp转换成数字图像信号。isp将数字图像信号输出到dsp加工处理。dsp将数字图像信号转换成标准的rgb，yuv等格式的图像信号。在一些实施例中，电子设备100可以包括1个或n个摄像头193，n为大于1的正整数。
[0214]
数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。
[0215]
视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，mpeg)1，mpeg2，mpeg3，mpeg4等。
[0216]
npu为神经网络(neural-network，nn)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过npu可以实现电子设备100的智能认知等应用，例如：设计稿排版识别，文本理解等。
[0217]
电子设备100可以通过音频模块170，扬声器170a，受话器170b，麦克风170c，耳机接口170d，以及应用处理器等实现音频功能。例如音乐播放，录音等。
[0218]
音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。
[0219]
扬声器170a，也称“喇叭”，用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170a收听音乐，或收听免提通话。
[0220]
受话器170b，也称“听筒”，用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时，可以通过将受话器170b靠近人耳接听语音。
[0221]
麦克风170c，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170c发声，将声音信号输入到麦克风170c。电子设备100可以设置至少一个麦克风170c。在另一些实施例中，电子设备100可以设置两个麦克风170c，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，电子设备100还可以设置三个，四个或更多麦克风170c，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。
[0222]
耳机接口170d用于连接有线耳机。耳机接口170d可以是usb接口130，也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform，omtp)标准接口，美国蜂窝电信工业协会(cellular telecommunications industry association of the usa，ctia)标准接口。
[0223]
指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。
[0224]
按键190包括开机键，音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以检测到按键输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。
[0225]
马达191可以产生振动提示。马达191可以用于来电振动提示，也可以用于触摸振动反馈。例如，作用于不同应用(例如拍照，音频播放等)的触摸操作，可以对应不同的振动反馈效果。作用于显示屏194不同区域的触摸操作，马达191也可对应不同的振动反馈效果。不同的应用场景(例如：时间提醒，检测到信息，闹钟，游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。
[0226]
当电子设备100实施为手机等移动通信设备时，无线通信模块160还可以包括移动通信模块。移动通信模块可以提供应用在电子设备100上的包括2g/3g/4g/5g等无线通信的解决方案。移动通信模块可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，lna)等。移动通信模块可以由天线检测到电磁波，并对检测到的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块还可以对经调制解调处理器调制后的信号放大，经天线转为电磁波辐射出去。在一些实施例中，移动通信模块的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
[0227]
调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将检测到的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频输出设备(不限于扬声器170a，受话器170b等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块或其他功能模块设置在同一个器件中。
[0228]
当电子设备100实施为手机等移动通信设备时，电子设备100还可包括sim卡接口，可用于连接sim卡。sim卡可以通过插入sim卡接口，或从sim卡接口拔出，实现和电子设备100的接触和分离。电子设备100可以支持1个或n个sim卡接口，n为大于1的正整数。sim卡接口可以支持nano sim卡，micro sim卡，sim卡等。同一个sim卡接口可以同时插入多张卡。所
述多张卡的类型可以相同，也可以不同。sim卡接口也可以兼容不同类型的sim卡。sim卡接口也可以兼容外部存储卡。电子设备100通过sim卡和网络交互，实现通话以及数据通信等功能。在一些实施例中，电子设备100采用esim，即：嵌入式sim卡。esim卡可以嵌在电子设备100中，不能和电子设备100分离。
[0229]
当电子设备100实施为手机、平板电脑、笔记本电脑等便携设备时，电子设备100还可包括传感器模块180。传感器模块180可以包括压力传感器180a，陀螺仪传感器180b，气压传感器180c，磁传感器180d，加速度传感器180e，距离传感器180f，接近光传感器180g，指纹传感器180h，温度传感器180j，触摸传感器180k，环境光传感器180l等。其中，
[0230]
压力传感器180a用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180a可以设置于显示屏194。压力传感器180a的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180a检测所述触摸操作强度。电子设备100也可以根据压力传感器180a的检测信号计算触摸的位置。
[0231]
陀螺仪传感器180b可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180b确定电子设备100围绕三个轴(即，x，y和z轴)的角速度。
[0232]
气压传感器180c用于测量气压。在一些实施例中，电子设备100通过气压传感器180c测得的气压值计算海拔高度，辅助定位和导航。
[0233]
磁传感器180d包括霍尔传感器。电子设备100可以利用磁传感器180d检测翻盖皮套的开合。
[0234]
加速度传感器180e可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。
[0235]
距离传感器180f，用于测量距离。电子设备100可以通过红外或激光测量距离。在一些实施例中，拍摄场景，电子设备100可以利用距离传感器180f测距以实现快速对焦。
[0236]
接近光传感器180g可以包括例如发光二极管(led)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。电子设备100通过发光二极管向外发射红外光。电子设备100使用光电二极管检测来自附近物体的红外反射光，可以确定电子设备100附近有没有物体。环境光传感器180l用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。指纹传感器180h用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。温度传感器180j用于检测温度。
[0237]
触摸传感器180k，也称“触控面板”。触摸传感器180k可以设置于显示屏194，由触摸传感器180k与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180k用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。
[0238]
以上是以电子设备100为例对本技术实施例作出的具体说明。应该理解的是，本技术实施例示意的结构并不构成对电子设备100的具体限定。电子设备100可以具有比图中所示的更多的或者更少的部件，可以组合两个或多个的部件，或者可以具有不同的部件配置。图中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、
软件、或硬件和软件的组合中实现。
[0239]
图19示例性所示的电子设备100可以通过显示屏194显示以上各个实施例中所描述的各个用户界面。电子设备100可以通过键盘等输入装置在各个用户界面中检测用户操作。在一些实施例中，电子设备100可以通过摄像头193(如3d摄像头、深度摄像头)检测非触控的手势操作。
[0240]
以上所述实施例仅用以说明本技术的技术方案，而非对其限制；尽管参照前述实施例对本技术进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本技术各实施例技术方案的范围。
[0241]
上述实施例中所用，根据上下文，术语“当
…
时”可以被解释为意思是“如果
…”
或“在
…
后”或“响应于确定
…”
或“响应于检测到
…”
。类似地，根据上下文，短语“在确定
…
时”或“如果检测到(所陈述的条件或事件)”可以被解释为意思是“如果确定
…”
或“响应于确定
…”
或“在检测到(所陈述的条件或事件)时”或“响应于检测到(所陈述的条件或事件)”。
[0242]
应当理解，本技术以上实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本技术的限制。如在本技术的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括复数表达形式，除非其上下文中明确地有相反指示。还应当理解，本技术中使用的术语“和/或”是指并包含一个或多个所列出项目的任何或所有可能组合。
[0243]
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本技术实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如dvd)、或者半导体介质(例如固态硬盘)等。
[0244]
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，该流程可以由计算机程序来指令相关的硬件完成，该程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法实施例的流程。而前述的存储介质包括：rom或随机存储记忆体ram、磁碟或者光盘等各种可存储程序代码的介质。