CN116737287A - 一种显示设备及界面显示方法 - Google Patents

Abstract

本申请实施例提供的一种显示设备及界面显示方法，通过预先根据显示区域的高度和宽度以及预设控件的预设比例，绘制出目标用户界面。其中，目标用户界面包括内容区和至少一个功能区。在显示区域的宽度小于阈值宽度的情况下，在显示区域中显示内容区并隐藏功能区。在显示区域的宽度大于等于阈值宽度的情况下，在显示区域中同时显示内容区和功能区。进而，通过对内容区和功能区的调整，避免了在分辨率低的屏幕中显示目标用户界面时，出现功能区占整个界面的比例较大以及内容区较小的情况，提升了显示效果的同时提高用户的使用体验。

Description

一种显示设备及界面显示方法

技术领域

本申请涉及显示设备技术领域，尤其涉及一种显示设备及界面显示方法。

背景技术

显示设备是指能够输出具体显示画面的终端设备，如智能电视、移动终端、智能广告屏、投影仪等。随着显示设备的普及以及互联网技术的发展，根据用户需求可以在显示设备中安装各种应用程序，例如，传统视频类应用、短视频应用、健身应用和教育应用等。例如，当用户安装并使用教育应用时，可以通过显示器中的显示区域呈现UI界面(UserInterface，用户界面)观看教学直播。通常，UI界面包括功能区和内容区，内容区用于显示教学直播的内容，功能区用于实现对教育应用的相关功能。

由于不同的显示设备具有不同的分辨率，为使UI界面能够适用于各种不同分辨率的显示设备，目前UI界面都是提供一种基础分辨进行设计，然后针对不同分辨率的屏幕按照比例对界面进行尺寸缩放/放大显示。上述方式虽然能够使UI界面适配不同分辨率屏幕，但不能保证各个设备所显示的对象大小及间距在合理范围内，如UI界面在分辨率低的屏幕中显示时会出现功能区占整个界面的比例较大以及内容区较小的情况，从而导致显示效果变差，降低用户的使用体验。

发明内容

本申请提供了一种显示设备及界面显示方法，以解决在分辨率低的屏幕中显示时，出现功能区占整个界面的比例较大以及内容区较小的情况，从而导致显示效果变差的问题。

第一方面，本申请提供了一种显示设备，包括：

显示器；

与显示器连接的控制器，控制器被配置为：

接收输入的对界面显示控件的选中操作，获取显示区域对应的尺寸绘制信息，尺寸绘制信息包括显示区域的高度、宽度以及至少一个预设控件的第一预设比例，预设控件的第一预设比例由显示区域的高度和宽度确定；

基于尺寸绘制信息绘制目标用户界面，目标用户界面包括内容区和至少一个功能区，预设控件设置在内容区和功能区中；

在显示区域的宽度小于阈值宽度的情况下，在显示区域中显示内容区并隐藏功能区；

在显示区域的宽度大于等于阈值宽度的情况下，在显示区域中同时显示内容区和功能区。

第二方面，一种界面显示方法，方法具体包括以下步骤：

接收输入的对界面显示控件的选中操作，获取显示区域对应的尺寸绘制信息，尺寸绘制信息包括显示区域的高度、宽度以及至少一个预设控件的第一预设比例，预设控件的第一预设比例由显示区域的高度和宽度确定；

基于尺寸绘制信息绘制目标用户界面，目标用户界面包括内容区和至少一个功能区，预设控件设置在内容区和功能区中；

在显示区域的宽度小于阈值宽度的情况下，在显示区域中显示内容区并隐藏功能区；

在显示区域的宽度大于等于阈值宽度的情况下，在显示区域中同时显示内容区和功能区。

由以上技术方案可以看出，本申请实施例提供的一种显示设备及界面显示方法，通过预先根据显示区域的高度和宽度以及预设控件的预设比例，绘制出目标用户界面。其中，目标用户界面包括内容区和至少一个功能区。在显示区域的宽度小于阈值宽度的情况下，在显示区域中显示内容区并隐藏功能区。在显示区域的宽度大于等于阈值宽度的情况下，在显示区域中同时显示内容区和功能区。进而，通过对内容区和功能区的调整，避免了在分辨率低的屏幕中显示目标用户界面时，出现功能区占整个界面的比例较大以及内容区较小的情况，提升了显示效果的同时提高用户的使用体验。

附图说明

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

图1示出了根据一些实施例的显示设备的使用场景；

图2示出了根据一些实施例的控制装置100的硬件配置框图；

图3示出了根据一些实施例的显示设备200的硬件配置框图；

图4示出了根据一些实施例的显示设备200中软件配置图；

图5示出了根据一些实施例中显示器中的用户界面的示意图；

图6示出了根据一些实施例的显示设备中显示应用列表的示意图；

图7示出了根据一些实施例的显示设备中一种目标用户界面的示意图；

图8示出了根据一些实施例的显示设备中另一种目标用户界面的示意图；

图9示出了根据一些实施例的显示设备中另一种目标用户界面的示意图；

图10示出了根据一些实施例的显示设备中另一种目标用户界面的示意图；

图11示出了根据一些实施例的显示设备中另一种目标用户界面的示意图；

图12示出了根据一些实施例的显示设备中另一种目标用户界面的示意图；

图13示出了根据一些实施例的一种界面显示方法的流程图。

具体实施方式

为使本申请的目的和实施方式更加清楚，下面将结合本申请示例性实施例中的附图，对本申请示例性实施方式进行清楚、完整地描述，显然，描述的示例性实施例仅是本申请一部分实施例，而不是全部的实施例。

本申请中说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”等是用于区别类似或同类的对象或实体，而不必然意味着限定特定的顺序或先后次序，除非另外注明。应该理解这样使用的用语在适当情况下可以互换。术语“包括”和“具有”以及他们的任何变形，意图在于覆盖但不排他的包含，例如，包含了一系列组件的产品或设备不必限于清楚地列出的所有组件，而是可包括没有清楚地列出的或对于这些产品或设备固有的其他组件。术语“模块”是指任何已知或后来开发的硬件、软件、固件、人工智能、模糊逻辑或硬件或/和软件代码的组合，能够执行与该元件相关的功能。

图1为根据实施例中显示设备的使用场景的示意图。如图1中示出，用户可通过终端设备300和控制装置100操作显示设备200。

在一些实施例中，控制装置100可以是遥控器，遥控器和显示设备的通信包括红外协议通信或蓝牙协议通信，及其他短距离通信方式等，通过无线或其他有线方式来控制显示设备200。其中，无线方式可以是直连和非直连，可以是经过路由的，也可以是不经过路由的。用户可以通过遥控器上按键，语音输入、控制面板输入等输入用户指令，来控制显示设备200。如：用户可以通过遥控器上音量加减键、频道控制键、上/下/左/右的移动按键、语音输入按键、菜单键、开关机按键等输入相应控制指令，来实现控制显示设备200的功能。

在一些实施例中，终端设备300可以包括移动终端、平板电脑、计算机、笔记本电脑、AR/VR设备和触控笔等中的任意一种。

在一些实施例中，也可以使用终端设备300以控制显示设备200。例如，使用终端设备300控制显示设备200上运行的应用程序，或者使用在终端设备300上运行的应用程序控制显示设备200。该应用程序通过配置可以在与智能设备关联的屏幕上，在直观的用户界面(UI)中为用户提供各种控制。

在一些实施例中，也可以使用终端设备300和显示设备进行数据的通信。

在一些实施例中，显示设备200还可以采用除了控制装置100和终端设备300之外的方式进行控制，例如，可以通过显示设备200设备内部配置的获取语音指令的模块直接接收用户的语音指令控制，也可以通过显示设备200设备外部设置的语音控制装置来接收用户的语音指令控制。

在一些实施例中，显示设备200还与服务器400进行数据通信。可允许显示设备200通过局域网(LAN)、无线局域网(WLAN)和其他网络进行通信连接。服务器400可以向显示设备200提供各种内容和互动。服务器400可以是一个集群，也可以是多个集群，可以包括一类或多类服务器。

在一些实施例中，一个步骤执行主体执行的软件步骤可以随需求迁移到与之进行数据通信的另一步骤执行主体上进行执行。示例性的，服务器执行的软件步骤可以随需求迁移到与之数据通信的显示设备上执行，反之亦然。

图2示例性示出了根据示例性实施例中控制装置100的配置框图。如图2所示，控制装置100包括控制器110、通信接口130、用户输入/输出接口140、存储器、供电电源。控制装置100可接收用户的输入操作指令，且将操作指令转换为显示设备200可识别和响应的指令，起用用户与显示设备200之间交互中介作用。

在一些实施例中，通信接口130用于和外部通信，包含WIFI芯片，蓝牙模块，NFC或可替代模块中的至少一种。

在一些实施例中，用户输入/输出接口140包含麦克风，触摸板，传感器，按键或可替代模块中的至少一种。

图3示出了根据示例性实施例中显示设备200的硬件配置框图。

在一些实施例中，显示设备200包括调谐解调器210、通信器220、检测器230、外部装置接口240、控制器250、显示器260、音频输出接口270、存储器、供电电源、用户接口中的至少一种。

在一些实施例中控制器包括中央处理器，视频处理器，音频处理器，图形处理器，RAM，ROM，用于输入/输出的第一接口至第n接口。

在一些实施例中，显示器260包括用于呈现画面的显示屏组件，以及驱动图像显示的驱动组件，用于接收源自控制器输出的图像信号，进行显示视频内容、图像内容以及菜单操控界面的组件以及用户操控UI界面等。

在一些实施例中，显示器260可为液晶显示器、OLED显示器以及投影显示器中的至少一种，还可以为一种投影装置和投影屏幕。

在一些实施例中，调谐解调器210通过有线或无线接收方式接收广播电视信号，以及从多个无线或有线广播电视信号中解调出音视频信号，如以及EPG数据信号。

在一些实施例中，通信器220是用于根据各种通信协议类型与外部设备或服务器进行通信的组件。例如：通信器可以包括Wifi模块，蓝牙模块，有线以太网模块等其他网络通信协议芯片或近场通信协议芯片，以及红外接收器中的至少一种。显示设备200可以通过通信器220与控制装置100或服务器400建立控制信号和数据信号的发送和接收。

在一些实施例中，检测器230用于采集外部环境或与外部交互的信号。例如，检测器230包括光接收器，用于采集环境光线强度的传感器；或者，检测器230包括图像采集器，如摄像头，可以用于采集外部环境场景、用户的属性或用户交互手势，再或者，检测器230包括声音采集器，如麦克风等，用于接收外部声音。

在一些实施例中，外部装置接口240可以包括但不限于如下：高清多媒体接口(HDMI)、模拟或数据高清分量输入接口(分量)、复合视频输入接口(CVBS)、USB输入接口(USB)、RGB端口等任一个或多个接口。也可以是上述多个接口形成的复合性的输入/输出接口。

在一些实施例中，控制器250和调谐解调器210可以位于不同的分体设备中，即调谐解调器210也可在控制器250所在的主体设备的外置设备中，如外置机顶盒等。

在一些实施例中，控制器250，通过存储在存储器上中各种软件控制程序，来控制显示设备的工作和响应用户的操作。控制器250控制显示设备200的整体操作。例如：响应于接收到用于选择在显示器260上显示UI对象的用户命令，控制器250便可以执行与由用户命令选择的对象有关的操作。

在一些实施例中，所述对象可以是可选对象中的任何一个，例如超链接、图标或其他可操作的控件。与所选择的对象有关操作有：显示连接到超链接页面、文档、图像等操作，或者执行与所述图标相对应程序的操作。

在一些实施例中控制器包括中央处理器(Central Processing Unit，CPU)，视频处理器，音频处理器，图形处理器(Graphics Processing Unit，GPU)，RAM Random AccessMemory，RAM)，ROM(Read-Only Memory，ROM)，用于输入/输出的第一接口至第n接口，通信总线(Bus)等中的至少一种。

在一些实施例中，用户可在显示器260上显示的图形用户界面(GUI)输入用户命令，则用户输入接口通过图形用户界面(GUI)接收用户输入命令。或者，用户可通过输入特定的声音或手势进行输入用户命令，则用户输入接口通过传感器识别出声音或手势，来接收用户输入命令。

在一些实施例中，“用户界面”，是摄像头应用或操作***与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。用户界面常用的表现形式是图形用户界面(Graphic User Interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的一个图标、窗口、控件等界面元素，其中控件可以包括图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素中的至少一种。

示例性的，当用户使用任意应用

在一些实施例中，用户接口280，为可用于接收控制输入的接口(如：显示设备本体上的实体按键，或其他等)。

在一些实施例中，显示设备的***可以包括内核(Kernel)、命令解析器(shell)、文件***和播放器应用。内核、shell和文件***一起组成了基本的操作***结构，它们让用户可以管理文件、运行程序并使用***。上电后，内核启动，激活内核空间，抽象硬件、初始化硬件参数等，运行并维护虚拟内存、调度器、信号及进程间通信(IPC)。内核启动后，再加载Shell和用户播放器应用。播放器应用在启动后被编译成机器码，形成一个进程。

参见图4，在一些实施例中，将***分为四层，从上至下分别为应用程序(Applications)层(简称“应用层”)，应用程序框架(Application Framework)层(简称“框架层”)，安卓运行时(Android runtime)和***库层(简称“***运行库层”)，以及内核层。

在一些实施例中，应用程序层，***内置的应用程序以及非***级的应用程序都是属于应用层。负责与用户进行直接交互。应用程序层中运行有至少一个应用程序，这些应用程序可以是操作***自带的窗口(Window)程序、***设置程序或时钟程序等；这些应用程序可被实现为Web应用，其基于WebKit(一种浏览器引擎)引擎来执行，具体可基于HTML5、CSS和JavaScript等来开发并执行。也可以是第三方开发者所开发的应用程序。在具体实施时，应用程序层中的应用程序包不限于以上举例。

框架层为应用程序提供应用编程接口(application prograing，API)和编程框架。应用程序框架层包括一些预先定义的函数。应用程序框架层相当于一个处理中心，这个中心决定让应用层中的应用程序做出动作。应用程序通过API接口，可在执行中访问***中的资源和取得***的服务。

其中，本申请采用的是Electron与React结合框架，通过内置了Chromium内核和Nodejs，因此可以使用HTML和CSS来实现应用的GUI界面，用JavaScript调用丰富的原生API实现跨平台的应用，同时能接近原生应用的交互体验。框架内置Chromium内核，具有非常好的跨平台移植性，天生兼容mac，windows，Linux等各种类型的操作***。

使用electron构建的应用程序当中主要包含两种角色：electron框架本身和桌面应用。electron本身持有了主进程、渲染进程、App对象及IPC信道，桌面应用则负责持有主进程和渲染进程的辅助进程，服务器通过调用桌面应用中的主进程的辅助进程创建用户界面对象。

在构建框架的网络层中本申请对应使用的React技术栈，React技术栈是专门用来构建前端UI界面的框架。通过使用React技术栈可以将多个界面中拥有基本相同的模块写成组件，例如在播放媒资用户界面中的内容区和功能区等。当后续界面中的数据变动后，React技术栈能高效更新、调用并渲染合适的组件。同时，无需花费精力虑架构问题，保证渲染效率。在本申请中React通过内容区和功能区对应的状态变化来驱动目标用户界面的更新，使创建交互式UI变得轻而易举。

在一些实施例中，还包括多个应用程序架构，应用程序架构中包括APP业务层。在呈现目标用户之前，APP业务层用于根据输入的操作指令，获取操作指令对应的目标业务数据，将目标业务数据发送给框架的网络层。本申请采用的Electron与React结合框架对目标业务数据进行业务逻辑处理，显示出相应的UI界面，以完成数据交互过程。示例性的，目标业务数据包括将功能区隐藏。即后续UI界面中的数据变动后，React技术栈高效更新、调用并渲染合适的组件，以完成每个UI界面的绘制。目的是根据用户需求实现各种业务逻辑、UI展示、用户的交互等。

如图4所示，本申请实施例中应用程序框架层包括管理器(Managers)，内容提供者(Content Provider)等，其中管理器包括以下模块中的至少一个：活动管理器(ActivityManager)用于和***中正在运行的所有活动进行交互；位置管理器(Location Manager)用于给***服务或应用提供了***位置服务的访问；文件包管理器(Package Manager)用于检索当前安装在设备上的应用程序包相关的各种信息；通知管理器(NotificationManager)用于控制通知消息的显示和清除；窗口管理器(Window Manager)用于管理用户界面上的话图标、窗口、工具栏、壁纸和桌面部件。

在一些实施例中，活动管理器用于管理各个应用程序的生命周期以及通常的导航回退功能，比如控制应用程序的退出、打开、后退等。窗口管理器用于管理所有的窗口程序，比如获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕，控制显示窗口变化(例如将显示窗口缩小显示、抖动显示、扭曲变形显示等)等。

在一些实施例中，***运行库层为上层即框架层提供支撑，当框架层被使用时，安卓操作***会运行***运行库层中包含的C/C++库以实现框架层要实现的功能。

在一些实施例中，内核层是硬件和软件之间的层。如图4所示，内核层至少包含以下驱动中的至少一种：音频驱动、显示驱动、蓝牙驱动、摄像头驱动、WIFI驱动、USB驱动、HDMI驱动、传感器驱动(如指纹传感器，温度传感器，压力传感器等)以及电源驱动等。

在一些实施例中，显示设备中可以安装有多个应用。图5示出了根据一些实施例中显示器中的用户界面。用户可以点击用户界面中的“我的应用”，触发显示应用列表。应用列表中包括显示设备已安装的所有应用。

通常，用户可以使用显示设备中的远程教育软件实现与老师共同互动学习的功能。远程教育指的是依靠电脑、电视及互联网等传播媒体的教学模式，它突破了时空的界线，能够使用户能够在不同地方进行上课。其中，直播教育是远程教育中逐渐兴起的一种教学形式，直播教育指的是通过直播的方式，在特定的时间内使不同地方的用户能够同时上线与老师一起进行教学互动的一种教学模式。相比于其他远程教育模式，直播教育最大的好处是能够增加老师和用户之间的互动，提高用户的学习积极性。

为便于后续描述，本申请以用户使用教育应用为例，将用户观看教育直播对应的课堂界面称为目标用户界面。当用户使用教育应用时，显示器呈现出目标用户界面，目标用户界面显示在显示器屏幕对应的显示区域中。其中，目标用户界面包括内容区和多个功能区，用户通过界面中内容区中展示的教学内容进行学习，同时通过多个功能区中的功能控件与老师进行互动。

图6示出根据一些实施例中显示设备中显示应用列表的示意图。如图6所示，显示设备安装有教育应用，播放器应用，视频聊天应用，摄像头应用，网络购物应用和游戏应用。当显示器中显示应用列表时，用户可以选择其中一个应用并进行打开，以实现该应用的功能。需要说明的是，其中，安装的上述应用可以是***应用，也可以是第三方应用。

在一些实施例中，本申请实施例所涉及的部分或者全部步骤在操作***内和应用程序中实现。在一些实施例中，将用于实现本申请实施例部分或者全部步骤的应用程序为上述“教育应用”，其存储在存储器中，控制器250通过在操作***中运行该应用程序，来控制显示设备200的工作和响应与该应用程序有关的用户操作。

在一些实施例中，显示设备接收用户输入的对应用控件的选中操作，显示教育应用界面。图7为根据一些实施例的显示设备中一种目标用户界面的示意图，其具体可以为用户通过点击图6中的教育应用图标而输入对应用控件的选中操作后，进入的页面。如图7所示，教育应用界面包括导航栏700、靠近导航栏的内容显示区710和功能区720，内容显示区710中显示的内容会随导航栏700中被选中控件的变化而变化。内容显示区710包括第一显示区7101和第二显示区7102。其中，第一显示区7101包括多个日历控件，第二显示区7102包括课程资源控件。第二显示区7102中显示的内容会随第一显示区7101中被选中控件的变化而变化。显示设备接收用户输入的对第一显示区7101中日历控件选中操作，控制第二显示区7102显示出与日历控件对应的课程资源控件。示例性的，课程资源控件包括“历史主观题精讲*上”、“历史主观题精讲*中”和“历史主观题精讲*下”等。在显示教育应用界面时，用户可以通过点击任意一个课程资源控件，以输入针对任意课程资源的目标显示指令，来触发进入对应的目标用户界面。示例性的，当用户点击图7中的“历史主观题精讲*中”后，将进入“历史主观题精讲*中”的目标用户界面。需要说明的是，用户也可以通过其他方式来输入对课程资源控件的选中操作，以触发进入课程资源控件对应的目标用户界面。例如，利用语音控制功能或者搜索功能，控制进入到课程资源控件对应的目标用户界面。

图8根据一些实施例的显示设备中另一种目标用户界面的示意图，其具体为用户点击图7中“历史主观题精讲*中”后显示的“历史主观题精讲*中”的目标用户界面。如图8所示，目标用户界面包括内容区800和多个功能区810。用户可以通过内容区800呈现的内容进行学习，同时还可以通过点击该功能区中的功能控件，以实现与老师的互动以及对目标用户界面的改变。

在一些实施例中，在显示设备显示目标用户界面的过程中，由于不同的显示设备具有不同的分辨率，为使UI界面能够适用于各种不同分辨率的显示设备，目前UI界面都是提供一种基础分辨率进行设计。示例性的，基于基础分辨率将功能区和内容区的位置和尺寸进行预设并绘制成用户界面，然后针对不同分辨率的屏幕按照比例对界面进行尺寸缩放/放大显示。上述方式虽然能够使UI界面适配不同分辨率屏幕，但不能保证各个显示设备所显示的对象大小及间距在合理范围内，如参见图8，用户界面在分辨率低的屏幕中显示时会出现功能区占整个界面的比例较大以及内容区较小的情况，从而导致显示效果变差，降低用户的使用体验。

为了避免在分辨率低的屏幕中显示时会出现功能区占整个界面的比例较大以及内容区较小的情况，本申请提供了一种显示设备，包括：显示器，被配置为呈现目标用户界面，目标用户界面显示在显示器屏幕对应的显示区域中。为了提升用户观看效果，本申请在显示区域呈现目标用户界面之前对功能区和内容区尺寸进行调整，从而使显示区域中呈现调整完成的目标用户界面。

以下针对本申请提供的一种显示设备及界面显示方法进行具体阐述。

图13示出了根据一些实施例的一种界面显示方法的流程图。参见图13，本申请实施例提供的一种显示设备，其配置的控制器在执行界面显示方法时，被配置为执行下述步骤：

S1、接收输入的对界面显示控件的选中操作，获取显示区域对应的尺寸绘制信息，尺寸绘制信息包括显示区域的高度、宽度以及至少一个预设控件的第一预设比例，预设控件的第一预设比例由显示区域的高度和宽度确定。

在一些实施例中，显示设备接收输入的对界面显示控件的选中操作，显示器获取显示区域对应的尺寸绘制信息，尺寸绘制信息包括显示区域的高度、宽度以及至少一个预设控件的第一预设比例，其中，预设控件的第一预设比例由显示区域的高度和宽度确定。显示区域为显示器屏幕中的区域，后续的目标用户界面将显示在显示区域中，以便于用户观看。

需要说明的是，尺寸绘制信息为硬件信息，可通过本地存储器缓存获取，每个显示设备均对应自身独有的尺寸绘制信息。本申请默认目标用户界面的显示为全屏显示，即显示区域的尺寸为整个显示器屏幕的尺寸。由于每个显示设备的尺寸绘制信息不同，进而显示对应的用户界面尺寸也不同。因此，每个用户界面中的预设控件尺寸也不同。

分辨率就是屏幕图像的精密度，是指显示器所能显示的像素的多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多。显示器屏幕的尺寸大小与分辨率有一定的关系。通常，屏幕的尺寸大的分辨率就高。但同等大小的屏幕的尺寸对应的分辨率不一定相同。

S2、基于尺寸绘制信息绘制目标用户界面，目标用户界面包括内容区和至少一个功能区，预设控件设置在内容区和功能区中。

在一些实施例中，基于尺寸绘制信息绘制目标用户界面，控制器进一步被配置为：基于显示区域的高度和宽度设置功能区尺寸，并确定功能区在目标用户界面中的显示位置。目标用户界面包括顶部功能区、底部功能区、左侧功能区以及右侧功能区。顶部功能区、底部功能区、左侧功能区以及右侧功能区设置在目标用户界面四周的边缘区域。基于功能区的显示位置，将内容区填充至目标用户界面中除功能区之外的区域中。

具体实现时，将顶部功能区、底部功能区、左侧功能区以及右侧功能区设置在目标用户界面四周的边缘区域。其中，顶部功能区的高度为显示区域高度的4％，底部功能区的高度为显示区域高度的13％，左侧功能区的宽度为显示区域宽度的5％，右侧功能区的宽度为显示区域宽度的15％。

示例性的，若显示区域的宽度为57.58cm，显示区域的高度为32.39cm。则顶部功能区的高度为1.30cm，底部功能区的高度为4.21cm，左侧功能区的宽度为2.88cm，右侧功能区的宽度为8.64cm。由于四个功能区设置在目标用户界面的四周，且默认目标用户界面为全屏显示，则顶部功能区的高度和底部功能区的高度均与显示区域的高度相等。同理，左侧功能区的宽度和右侧功能区的宽度均与显示区域的宽度相等。进而，将多个功能区的尺寸和位置确定后，将目标用户界面中除功能区之外的区域显示内容区，以完成目标用户界面的绘制。需要说明的是，本申请不对功能区的个数以及尺寸进行具体限定，可根据实际情况自行设置。

在一些实施例中，控制器根据获取到的尺寸绘制信息生成绘制指令绘制目标用户界面。具体实现时，控制器可以通过调用绘制接口通知绘制硬件输出绘制指令，如果需要，则通过绘制接口向绘制硬件发送请求输出绘制指令的通知。其中，绘制指令可以包含一条或多条绘制指令及绘制指令的参数。绘制指令可以包括线性渐变、图片渐变，对应的参数可以包括区域大小、坐标、渐变颜色等；绘制指令还可以包括绘制方形或圆形或直线或曲线，对应的参数可以包括绘制的起始坐标和结束坐标、线条类型、线条粗细、线条颜色等。本领域技术人员应当理解，以上仅是举例，本申请实施例所述的绘制指令还可以包括任意一种计算机***中会使用的任意一种绘制指令，其对应的参数也可以根据实际的参数需求来灵活确定，本申请实施例对此并不作限定。

S3、在显示区域的宽度小于阈值宽度的情况下，在显示区域中显示内容区并隐藏功能区。在显示区域的宽度大于等于阈值宽度的情况下，在显示区域中同时显示内容区和功能区。

在一些实施例中，控制器判断显示区域的宽度是否小于阈值宽度，其中，阈值宽度的值不是绝对固定的值。本申请不对具体阈值进行限定，可根据实际情况自行动态调整。示例性的，阈值宽度为1440px，判断显示区域的宽度是否小于1440px。如果显示区域的宽度小于1440px，则调整功能区和内容区的尺寸。

在一些实施例中，在显示区域中显示内容区并隐藏功能区的过程中，控制器进一步被配置为：在预设时间内确定第一绘制信息，第一绘制信息包括功能区的第一预设高度和第一预设宽度以及显示区对应的第二预设高度和第二预设宽度，第一绘制信息用于指示隐藏功能区并扩展内容区。根据第一绘制信息绘制当前目标用户界面，以控制显示器在显示区域呈现当前目标用户界面。

示例性的，由于显示区域的宽度小于1440px，控制器在预设时间内如5秒后，确定第一绘制信息。第一绘制信息包括功能区的第一预设高度和第一预设宽度以及显示区对应的第二预设高度和第二预设宽度，其中，第一绘制信息用于指示隐藏功能区并扩展内容区。如将右侧功能区和底部功能区进行隐藏，即右侧功能区的预设宽度为0，底部功能区的预设高度为0。并将内容区填充至剩余区域，进而绘制当前目标用户界面，并将当前目标用户界面显示在显示区域中。图9为根据一些实施例的显示设备中另一种目标用户界面的示意图，其具体为将底部功能区和右侧功能区隐藏后的目标用户界面示意图。参见图9，通过将功能区和内容区的尺寸进行调整，以使内容区进行完整地展示。避免在分辨率低的显示设备中出现内容区显示不完整，功能区显示比例过大的情况。

进一步地，控制器将显示区域的宽度与阈值宽度进行判断后，根据预设时间自动调整功能区和内容区的尺寸，并绘制成目标用户界面进行显示。在不同分辨率的显示设备上能进行动态适配，保证中间内容区尽可能多的进行展示，提升了展示效果，使用户能有更好的使用体验。

在另一些实施例中，在显示区域的宽度大于等于阈值宽度的情况下，在显示区域中同时显示内容区和功能区。

示例性的，图12为根据一些实施例的显示设备中另一种目标用户界面的示意图，其具体为调整功能区和内容区的目标用户界面示意图。参见图12，当显示区域的宽度大于1440px，控制器则无需进行自动调整功能区和内容区尺寸，将上述基于尺寸绘制信息绘制的目标用户界面正常呈现在显示区域即可。

在一些实施例中，在完成确定第一绘制信息之后，将第一绘制信息设置为默认绘制信息并保存至本地缓存，以使在当前目标用户界面之后绘制的全部用户界面基于默认绘制信息绘制。

具体实现时，在显示区域的宽度小于阈值宽度的情况下，即默认该显示设备的分辨率较低，并进行自动调整功能区和内容区的尺寸。进而，将第一绘制信息进行保存并设为默认绘制信息。将默认绘制信息保存至本地缓存中，默认绘制信息包括绘制标识，绘制标识用于表征功能区和内容区的尺寸以及对应的显示状态。也就是说，当控制器自动调整功能区和内容区的尺寸，如将右侧功能区和底部功能区进行折叠，此时，确定并生成的默认绘制信息均记录有功能区和内容区的尺寸以及对应操作后的显示状态。

在一些实施例中，响应于输入的对当前目标用户界面的刷新指令，获取默认绘制信息。基于默认绘制信息，刷新目标用户界面中内容区的显示内容，以控制显示器在显示区域呈现刷新后的当前用户界面。

示例性的，响应于输入的对当前目标用户界面的刷新指令，控制器仅刷新目标用户界面中内容区的显示内容。如用户进行切换课程资源后，需对当前目标用户界面进行刷新。本申请重新进入目标用户界面后会本地缓存中读取默认绘制信息。即不会修改功能区和内容区的尺寸以及对应的显示状态。进而，仅切换并刷新在内容区显示的视频播放源。避免控制器进行重复判断和自动调整，更加完善了目标用户界面在分辨率低的显示设备中的适配问题。

在另一些实施例中，目标用户界面中包括控制控件，控制控件靠近功能区设置；控制器进一步被配置为：在功能区显示在目标用户界面中的情况下，响应于输入的对控制控件的选中操作，确定第二绘制信息，第二绘制信息包括功能区对应的第三预设高度和第三预设宽度以及显示区对应的第四预设高度和第四预设宽度，第二绘制信息用于指示隐藏功能区并扩展内容区。根据第二绘制信息绘制当前目标用户界面，以控制显示器呈现当前目标用户界面。

示例性的，参见图12，靠近功能区设置有控制控件1201。在右侧功能区显示在目标用户界面中的情况下，响应于输入的对控制控件1201的选中操作，控制器确定第二绘制信息，第二绘制信息包括功能区对应的第三预设高度和第三预设宽度以及显示区对应的第四预设高度和第四预设宽度，第二绘制信息用于指示隐藏右侧功能区并扩展内容区。即右侧功能区的预设宽度为0。并将内容区填充至剩余区域，进而绘制当前目标用户界面，并将当前目标用户界面显示在显示区域中。图10为根据一些实施例的显示设备中另一种目标用户界面的示意图，其具体为将右侧功能区隐藏后的目标用户界面示意图。参见图10，用户可以通过手动对功能区的调整，以使内容区根据用户自身的需求进行完整地展示。避免在分辨率低的显示设备中出现内容区显示不完整，功能区显示比例过大的情况。

图11为根据一些实施例的显示设备中另一种目标用户界面的示意图，其具体为将底部功能区隐藏后的目标用户界面示意图。参见图11，用户可以通过手动对控制控件1202的选中操作，以完成对底部功能区的隐藏，使内容区根据用户自身的需求进行完整地展示。

需要说明的是，本申请不对控制控件1201设置的位置和个数进行具体限定，控制控件可以靠近每个功能区设置。同时，用户也可以对多个控制控件进行选中操作，以使每个控制控件对应的功能区进行隐藏。在功能区隐藏后，内容区进行动态扩展填充显示区域中的剩余区域。本实施例仅以右侧功能区和底部功能区进行举例说明。

由于上述控制器已经对显示区域的宽度进行判断，控制器自动调整功能区和内容区尺寸，以实现功能区的隐藏和显示。以使在分辨率低的显示设备中仍然保证内容区显示的完整度。进而，用户还可以通过对控制控件进行手动操作，进一步使目标用户界面在不同分辨率的显示设备上动态适配，保证每个功能区和内容区较好的展示效果，提高了应用界面的展示效果。

在另一些实施例中，在功能区隐藏在目标用户界面中的情况下，响应于输入的对控制控件的选中操作，确定第三绘制信息，第三绘制信息包括功能区对应的第五预设高度和第五预设宽度以及显示区对应的第六预设高度和第六预设宽度，第三绘制信息用于指示显示功能区并收缩内容区。根据第三绘制信息绘制当前目标用户界面，以控制显示器呈现当前目标用户界面。

示例性的，在功能区隐藏在目标用户界面中的情况下，响应于输入的对控制控件1201的选中操作，控制器确定第三绘制信息，第三绘制信息包括功能区对应的第五预设高度和第五预设宽度以及显示区对应的第六预设高度和第六预设宽度，第三绘制信息用于指示显示功能区并收缩内容区。即右侧功能区的预设宽度为显示区域宽度的15％。并将内容区进行动态收缩，进而绘制当前目标用户界面，并将当前目标用户界面显示在显示区域中。用户可以通过手动对上述隐藏的功能区进行恢复调整，以使目标用户界面根据用户自身的需求进行完整地展示。

在另一些实施例中，目标用户界面的显示可以为分屏显示，即显示区域的尺寸可以为整个显示器屏幕的一部分，例如显示区域的宽度为整个显示器屏幕的二分之一。

在显示设备进行分屏显示的场景下，显示区域包括多个指定区域，控制器进一步被配置为：获取指定区域对应的第四绘制信息，第四绘制信息包括每个指定区域的高度、宽度以及预设控件的第二预设比例，预设控件的第二预设比例由每个指定区域的高度和宽度确定。基于第四绘制信息绘制第一目标用户界面，第一目标用户界面包括内容区和至少一个功能区，预设控件设置在内容区和功能区中。在指定区域的宽度小于阈值宽度的情况下，在指定区域中显示内容区并隐藏功能区。在指定区域的宽度大于等于阈值宽度的情况下，在指定区域中同时显示内容区和功能区。

示例性的，显示区域为整个显示器屏幕中的第一指定区域，第二指定区域是整个显示器屏幕中除第一指定区域之外的区域，第一指定区域和第二指定区域呈行或列平铺整个显示器屏幕中。第一指定区域和第二指定区域组成完整的显示器屏幕即显示区域。通过获取每个指定区域的高度、宽度以及预设控件的第二预设比例，基于上述获得的第四绘制信息绘制第一目标用户界面后控制功能区的显示或隐藏。控制功能区的显示或隐藏的方案与上述全屏显示场景的方案相同，在此不再赘述。

显示器屏幕的两个区域中可以显示两个软件的用户界面，即两个用户界面在显示器屏幕中平铺显示，平铺显示是指多个用户界面之间不叠放。两个用户界面显示的内容可根据实际情况自行设置，且两个用户界面可以具有不同的尺寸。进而，在分屏显示的场景下，也可以对绘制的每个目标用户界面进行控制。且在分屏显示的场景下，更容易出现功能区占整个界面的比例较大以及内容区较小的情况。本申请提供的方案可以避免出现上述问题。

进一步地，控制器可以在第一指定区域和第二指定区域之间做切换，以及当第一指定区域的大小和位置发生变化时，第二指定区域的大小和位置可随即发生改变。

以上UI是以显示设备为例，其他类别的显示设备体现在界面显示方面的UI基本与上述UI相似，这里不再一一列举。本申请提供的UI界面仅仅是示例性，具体以实际应用和设计为准。

本申请实施例还提供一种界面显示方法，应用于显示设备，该方法具体包括以下步骤：接收输入的对界面显示控件的选中操作，获取显示区域对应的尺寸绘制信息，尺寸绘制信息包括显示区域的高度、宽度以及至少一个预设控件的第一预设比例，预设控件的预设比例由显示区域的高度和宽度确定。基于尺寸绘制信息绘制目标用户界面，目标用户界面包括内容区和至少一个功能区，预设控件设置在内容区和功能区中。在显示区域的宽度小于阈值宽度的情况下，在显示区域中显示内容区并隐藏功能区。在显示区域的宽度大于等于阈值宽度的情况下，在显示区域中同时显示内容区和功能区。

在一些实施例中，在显示区域中显示内容区并隐藏功能区的过程中，方法包括：在预设时间内确定第一绘制信息，第一绘制信息包括功能区的第一预设高度和第一预设宽度以及显示区对应的第二预设高度和第二预设宽度，第一绘制信息用于指示隐藏功能区并扩展内容区。根据第一绘制信息绘制当前目标用户界面，以控制显示器在显示区域呈现当前目标用户界面。

在一些实施例中，方法还包括：在完成确定第一绘制信息之后，将第一绘制信息设置为默认绘制信息并保存至本地缓存，以使在当前目标用户界面之后绘制的全部用户界面基于默认绘制信息绘制。

在一些实施例中，方法还包括：响应于输入的对当前目标用户界面的刷新指令，获取默认绘制信息；基于默认绘制信息，刷新目标用户界面中内容区的显示内容，以控制显示器在显示区域呈现刷新后的当前用户界面。

在一些实施例中，目标用户界面中包括控制控件，控制控件靠近功能区设置；方法还包括：在功能区显示在目标用户界面中的情况下，响应于输入的对控制控件的选中操作，确定第二绘制信息，第二绘制信息包括功能区对应的第三预设高度和第三预设宽度以及显示区对应的第四预设高度和第四预设宽度，第二绘制信息用于指示隐藏功能区并扩展内容区。根据第二绘制信息绘制当前目标用户界面，以控制显示器呈现当前目标用户界面。

在一些实施例中，方法还包括：在功能区隐藏在目标用户界面中的情况下，响应于输入的对控制控件的选中操作，确定第三绘制信息，第三绘制信息包括功能区对应的第五预设高度和第五预设宽度以及显示区对应的第六预设高度和第六预设宽度，第三绘制信息用于指示显示功能区并收缩内容区。根据第三绘制信息绘制当前目标用户界面，以控制显示器呈现当前目标用户界面。

在一些实施例中，基于尺寸绘制信息绘制目标用户界面，方法还包括：基于显示区域的高度和宽度设置功能区尺寸，并确定功能区在目标用户界面中的显示位置。基于功能区的显示位置，将内容区填充至目标用户界面中除功能区之外的区域中。

在一些实施例中，目标用户界面包括顶部功能区、底部功能区、左侧功能区以及右侧功能区；基于显示区域对应的高度和宽度设置功能区大小，并确定功能区在目标用户界面中的显示位置，方法还包括：将顶部功能区、底部功能区、左侧功能区以及右侧功能区设置在目标用户界面四周的边缘区域；其中，顶部功能区的高度为显示区域高度的4％，底部功能区的高度为显示区域高度的13％，左侧功能区的宽度为显示区域宽度的5％，右侧功能区的宽度为显示区域宽度的15％。

在一些实施例中，显示区域包括多个指定区域，方法还包括：获取指定区域对应的第四绘制信息，第四绘制信息包括每个指定区域的高度、宽度以及预设控件的第二预设比例，预设控件的预设比例由每个指定区域的高度和宽度确定。基于第四绘制信息绘制第一目标用户界面，第一目标用户界面包括内容区和至少一个功能区，预设控件设置在内容区和功能区中。在指定区域的宽度小于阈值宽度的情况下，在指定区域中显示内容区并隐藏功能区。在指定区域的宽度大于等于阈值宽度的情况下，在指定区域中同时显示内容区和功能区。

在一些实施例中，右侧功能区中包括视频窗口控件，视频窗口控件用于显示教师的个人视频窗口。通常，教师端的显示设备实时采集教师教学屏上的视频图像和教师的音频，并将采集到的视频图像数据和音频数据实时上传至服务器。服务器将接收到的视频图像数据和音频数据发送至学生端的显示设备。当学生在显示设备观看目标用户界面时，显示设备同步拉取和显示直播数据，直播数据即包括教师的视频图像数据和音频数据。显示设备拉取服务器反馈的直播数据，并控制显示器在目标用户界面中的右侧功能区加载显示直播流数据。

在一些实施例中，当在右侧功能区隐藏在目标用户界面中的情况下，显示设备仅拉取直播数据中的音频数据，即服务器仅将接收到的教师音频数据进行实时反馈。当学生在显示设备观看目标用户界面时，由于隐藏视频窗口控件，显示设备不显示教师的视频图像数据仅播放音频数据，即学生仅能听到教师在对端的音频。

在一些实施例中，底部功能区中包括讲义控件，讲义控件用于显示教师的教学讲义画面。通常，教师端的显示设备实时采集教师教学屏上的讲义数据，并将采集到的讲义数据实时上传至服务器。服务器将接收到的讲义数据发送至学生端的显示设备。当学生在显示设备观看目标用户界面时，显示设备同步拉取和显示讲义数据，并控制显示器在目标用户界面中的底部功能区加载显示讲义数据。

在一些实施例中，讲义数据还可以预先缓存在学生端的显示设备中，当学生在显示设备观看目标用户界面时，显示设备同步拉取和显示讲义数据，并控制显示器在目标用户界面中的底部功能区加载显示讲义数据。通常，一个教学讲义画面对应一个讲义的页面。例如PPT讲义中，一页PPT则为一个教学讲义画面。

在一些实施例中，教师端的显示设备还可以将讲义数据实时分享给学生端的显示设备，例如，采用终端服务平台实现教师端的显示设备分享数据给学生端的显示设备。当在底部功能区隐藏在目标用户界面中的情况下，显示设备不拉取讲义数据。

由以上技术方案可以看出，本申请实施例提供的一种显示设备及界面显示方法，通过预先根据显示区域的高度和宽度以及预设控件的预设比例，绘制出目标用户界面。其中，目标用户界面包括内容区和至少一个功能区。在显示区域的宽度小于阈值宽度的情况下，在显示区域中显示内容区并隐藏功能区。在显示区域的宽度大于等于阈值宽度的情况下，在显示区域中同时显示内容区和功能区。进而，通过对内容区和功能区的调整，避免了在分辨率低的屏幕中显示目标用户界面时，出现功能区占整个界面的比例较大以及内容区较小的情况，提升了显示效果的同时提高用户的使用体验。

具体实现中，本发明还提供一种存储介质，其中，该存储介质可存储有程序，该程序执行时可包括本发明提供的媒资播放时长上报方法的各实施例中的部分或全部步骤。所述的存储介质可为磁碟、光盘、只读存储记忆体(英文：read-only memory，简称：ROM)或随机存储记忆体(英文：random access memory，简称：RAM)等。

为了方便解释，已经结合具体的实施方式进行了上述说明。但是，上述示例性的讨论不是意图穷尽或者将实施方式限定到上述公开的具体形式。根据上述的教导，可以得到多种修改和变形。上述实施方式的选择和描述是为了更好的解释原理以及实际的应用，从而使得本领域技术人员更好的使用所述实施方式以及适于具体使用考虑的各种不同的变形的实施方式。

Claims (10)

1.一种显示设备，其特征在于，包括：

显示器；

与所述显示器连接的控制器，所述控制器被配置为：

接收输入的对界面显示控件的选中操作，获取显示区域对应的尺寸绘制信息，所述尺寸绘制信息包括所述显示区域的高度、宽度以及至少一个预设控件的第一预设比例，所述预设控件的第一预设比例由所述显示区域的高度和宽度确定；

基于所述尺寸绘制信息绘制目标用户界面，所述目标用户界面包括内容区和至少一个功能区，所述预设控件设置在所述内容区和所述功能区中；

在所述显示区域的宽度小于阈值宽度的情况下，在所述显示区域中显示所述内容区并隐藏所述功能区；

在所述显示区域的宽度大于等于所述阈值宽度的情况下，在所述显示区域中同时显示所述内容区和所述功能区。

2.根据权利要求1所述的显示设备，其特征在于，所述在所述显示区域中显示所述内容区并隐藏所述功能区，所述控制器进一步被配置为：

在预设时间内确定第一绘制信息，所述第一绘制信息包括所述功能区的第一预设高度和第一预设宽度以及所述显示区对应的第二预设高度和第二预设宽度，所述第一绘制信息用于指示隐藏所述功能区并扩展所述内容区；

根据所述第一绘制信息绘制当前目标用户界面，以控制所述显示器在所述显示区域呈现所述当前目标用户界面。

3.根据权利要求2所述的显示设备，其特征在于，所述控制器进一步被配置为：

在完成确定所述第一绘制信息之后，将所述第一绘制信息设置为默认绘制信息并保存至本地缓存，以使在所述当前目标用户界面之后绘制的全部用户界面基于所述默认绘制信息绘制。

4.根据权利要求3所述的显示设备，其特征在于，所述控制器进一步被配置为：

响应于输入的对所述当前目标用户界面的刷新指令，获取所述默认绘制信息；

基于所述默认绘制信息，刷新所述目标用户界面中所述内容区的显示内容，以控制所述显示器在所述显示区域呈现刷新后的所述当前用户界面。

5.根据权利要求1所述的显示设备，其特征在于，所述目标用户界面中包括控制控件，所述控制控件靠近所述功能区设置；所述控制器进一步被配置为：

在所述功能区显示在所述目标用户界面中的情况下，响应于输入的对所述控制控件的选中操作，确定第二绘制信息，所述第二绘制信息包括所述功能区对应的第三预设高度和第三预设宽度以及所述显示区对应的第四预设高度和第四预设宽度，所述第二绘制信息用于指示隐藏所述功能区并扩展所述内容区；

根据所述第二绘制信息绘制当前目标用户界面，以控制所述显示器呈现所述当前目标用户界面。

6.根据权利要求1所述的显示设备，其特征在于，所述控制器进一步被配置为：

在所述功能区隐藏在所述目标用户界面中的情况下，响应于输入的对所述控制控件的选中操作，确定第三绘制信息，所述第三绘制信息包括所述功能区对应的第五预设高度和第五预设宽度以及所述显示区对应的第六预设高度和第六预设宽度，所述第三绘制信息用于指示显示所述功能区并收缩所述内容区；

根据所述第三绘制信息绘制当前目标用户界面，以控制所述显示器呈现所述当前目标用户界面。

7.根据权利要求6所述的显示设备，其特征在于，所述基于所述尺寸绘制信息绘制目标用户界面，所述控制器进一步被配置为：

基于所述显示区域的所述高度和宽度设置所述功能区尺寸，并确定所述功能区在所述目标用户界面中的显示位置；

基于所述功能区的显示位置，将所述内容区填充至所述目标用户界面中除所述功能区之外的区域中。

8.根据权利要求7所述的显示设备，其特征在于，所述目标用户界面包括顶部功能区、底部功能区、左侧功能区以及右侧功能区；基于所述显示区域对应的所述高度和宽度设置所述功能区大小，并确定所述功能区在所述目标用户界面中的显示位置，所述控制器进一步被配置为：

将所述顶部功能区、底部功能区、左侧功能区以及右侧功能区设置在所述目标用户界面四周的边缘区域。

9.根据权利要求1所述的显示设备，其特征在于，所述显示区域包括多个指定区域，所述控制器进一步被配置为：

获取所述指定区域对应的第四绘制信息，所述第四绘制信息包括每个所述指定区域的高度、宽度以及预设控件的第二预设比例，所述预设控件的第二预设比例由每个所述指定区域的高度和宽度确定；

基于第四绘制信息绘制第一目标用户界面，所述第一目标用户界面包括内容区和至少一个功能区，所述预设控件设置在所述内容区和所述功能区中；

在所述指定区域的宽度小于阈值宽度的情况下，在所述指定区域中显示所述内容区并隐藏所述功能区；

在所述指定区域的宽度大于等于所述阈值宽度的情况下，在所述指定区域中同时显示所述内容区和所述功能区。

10.一种界面显示方法，其特征在于，所述方法具体包括以下步骤：

接收输入的对界面显示控件的选中操作，获取显示区域对应的尺寸绘制信息，所述尺寸绘制信息包括所述显示区域的高度、宽度以及至少一个预设控件的第一预设比例，所述预设控件的第一预设比例由所述显示区域的高度和宽度确定；

基于所述尺寸绘制信息绘制目标用户界面，所述目标用户界面包括内容区和至少一个功能区，所述预设控件设置在所述内容区和所述功能区中；

在所述显示区域的宽度小于阈值宽度的情况下，在所述显示区域中显示所述内容区并隐藏所述功能区；

在所述显示区域的宽度大于等于所述阈值宽度的情况下，在所述显示区域中同时显示所述内容区和所述功能区。