WO2023165197A1 - 一种调整界面布局的方法、装置、设备及存储介质 - Google Patents

一种调整界面布局的方法、装置、设备及存储介质 Download PDF

Info

Publication number
WO2023165197A1
WO2023165197A1 PCT/CN2022/136168 CN2022136168W WO2023165197A1 WO 2023165197 A1 WO2023165197 A1 WO 2023165197A1 CN 2022136168 W CN2022136168 W CN 2022136168W WO 2023165197 A1 WO2023165197 A1 WO 2023165197A1
Authority
WO
WIPO (PCT)
Prior art keywords
adaptation
screen
interface
application interface
information guide
Prior art date
Application number
PCT/CN2022/136168
Other languages
English (en)
French (fr)
Inventor
赵鹏程
张洪龙
江少波
蔡俊林
李戈
朱雷
Original Assignee
腾讯科技(深圳)有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 腾讯科技(深圳)有限公司 filed Critical 腾讯科技(深圳)有限公司
Publication of WO2023165197A1 publication Critical patent/WO2023165197A1/zh
Priority to US18/487,075 priority Critical patent/US20240036718A1/en

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482Interaction with lists of selectable items, e.g. menus

Definitions

  • the embodiments of the present application relate to the field of front-end technologies, and in particular to a method, device, device, and storage medium for adjusting interface layout.
  • the reference application interface of an application usually corresponds to the reference resolution of a reference screen, for example, 1280px*720px, and the resolutions to be adapted corresponding to the screens to be adapted of different terminal devices may be different; therefore,
  • the related technology adjusts the physical size of the interface elements presented in the reference application interface accordingly based on the proportional relationship between the reference resolution and different resolutions to be adapted, and obtains the display on different terminal devices.
  • Adaptive application interface is Adaptive application interface.
  • the proportional relationship between different resolutions to be adapted and the reference resolution is also different.
  • the adapted application interface obtained by adjusting the physical size is also different, that is, the physical size of the interface elements in the adapted application interface presented on different terminal devices is different, thereby affecting the visual presentation effect of the application interface.
  • Embodiments of the present application provide a method, device, device, and storage medium for adjusting an interface layout, so as to improve the visual presentation effect of an application program interface.
  • an embodiment of the present application provides a method for adjusting interface layout, the method is executed by a computer device, and the method includes:
  • the adapted application interface includes a plurality of interface elements, and for the plurality of interface elements
  • the first physical size of the interface element presented in the adapted application interface is the same as the second physical size presented in the reference application interface;
  • the first physical size of the interface element is based on the Determined by the adapted virtual pixel size of the interface element in the adapted application interface and the point density to be adapted of the screen to be adapted, the adapted virtual pixel size is the same as that of the interface element in the reference application interface
  • the base virtual pixel dimensions are the same.
  • the embodiment of the present application provides an application interface adaptation device, the device is deployed on computer equipment, and the device includes:
  • the processing module is used to obtain the trigger operation of the application to be displayed on the screen to be adapted;
  • a display module configured to display an adapted application interface of the application to be displayed through the screen to be adapted in response to the trigger operation, wherein the adapted application interface includes a plurality of interface elements, for the plurality of Each of interface elements whose first physical size presented in the adapted application interface is the same as the second physical size presented in the reference application interface; the first physical size of the interface element The size is determined based on the adapted virtual pixel size of the interface element in the adapted application interface and the to-be-adapted point density of the screen to be adapted, and the adapted virtual pixel size is the same as that of the interface element in the
  • the baseline virtual pixel dimensions in the baseline application interface are the same.
  • an embodiment of the present application provides a computer device, including a memory, a processor, and a computer program stored in the memory and operable on the processor.
  • the processor executes the program, Steps for implementing the method for adapting the application interface above.
  • an embodiment of the present application provides a computer-readable storage medium, which stores a computer program executable by a computer device, and when the program runs on the computer device, the computer device executes the above-mentioned image processing method. step.
  • an embodiment of the present application provides a computer program product
  • the computer program product includes a computer program stored on a computer-readable storage medium
  • the computer program includes program instructions, and when the program instructions are executed by a computer device When, the computer device is made to execute the steps of the method for adapting the application interface.
  • the reference virtual pixel size of the interface element is equal to the adapted virtual pixel size of the interface element, and the relationship between the virtual pixel size, pixel size, and point density of the interface element is used to determine the adaptation
  • the first physical size of the interface elements in the application interface so as to ensure that the first physical size of each interface element in the adapted application interface presented in the adapted application interface is the same as the corresponding interface element presented in the reference application interface
  • the second physical size is the same, so that the visual presentation effect of each interface element in the adaptation application interface displayed on the screen to be adapted is the same as that of the corresponding interface elements in the reference application interface displayed on the reference screen, and it also ensures different
  • the visual presentation effect of the interface elements in the adapted application interface presented on the terminal device is the same, thereby improving the user experience of the object.
  • a set of reference application interfaces can meet the adaptation requirements of different screens such as vehicles, tablets, and mobile phones, avoiding the waste of resources caused by repeated design of reference application interfaces.
  • further dynamically adjust the information guide area and control area including left and right adaptation and up and down adaptation
  • adjust the control area in the application interface The display position increases the control of details and makes more reasonable use of the space of the application interface.
  • FIG. 1 is a schematic diagram of a system architecture provided by an embodiment of the present application.
  • FIG. 2 is a schematic diagram of an application scenario provided by an embodiment of the present application.
  • FIG. 3 is a schematic flowchart of a method for adapting an application interface provided by an embodiment of the present application
  • FIG. 4 is a schematic diagram of a service layering provided by an embodiment of the present application.
  • FIG. 5 is a first schematic diagram of a reference application interface and an adaptation application interface provided by the embodiment of the present application
  • FIG. 6 is a second schematic diagram of a reference application interface and an adaptation application interface provided by the embodiment of the present application.
  • FIG. 7 is a schematic diagram of a functional area provided by an embodiment of the present application.
  • Fig. 8 is a schematic diagram 3 of a reference application interface and an adaptation application interface provided by the embodiment of the present application;
  • FIG. 9 is a schematic diagram 4 of a reference application interface and an adaptation application interface provided by the embodiment of the present application.
  • Fig. 10 is a schematic diagram five of a reference application interface and an adaptation application interface provided by the embodiment of the present application.
  • Fig. 11 is a schematic diagram 6 of a reference application interface and an adaptation application interface provided by the embodiment of the present application;
  • FIG. 12 is a schematic flowchart of a method for adapting an application interface provided by an embodiment of the present application.
  • FIG. 13 is a schematic structural diagram of an application interface adaptation device provided in an embodiment of the present application.
  • FIG. 14 is a schematic structural diagram of a computer device provided by an embodiment of the present application.
  • Application interface It can also be called the user interface (User Interface, UI). It is the medium for interaction and information exchange between the system and the user. The purpose is to enable the user to operate the hardware conveniently and efficiently to achieve two-way interaction. Complete the work you want to complete with the help of hardware.
  • UI User Interface
  • dpi dot per inch, dots per inch, also known as dot density, is a unit of measurement for the resolution of printers, mice and other devices, that is, pixels per inch.
  • the calculation formula of dpi is shown in the following formula (1):
  • X and Y represent the width and height of the screen resolution respectively, and C represents the diagonal length of the screen in feet.
  • ppi point per pnch, the number of pixels per foot, that is, the pixel density.
  • dp virtual pixel unit, 1dp is equal to 1 pixel on a screen with a dpi of 160, equal to 2 pixels on a screen with a dpi of 320, and equal to 3 pixels on a screen with a dpi of 480.
  • Pixel Dimensions Dimensions characterized by the number of pixels occupied. For example, if an interface element in the application interface occupies 3 pixels of the application interface in the width direction and 3 pixels of the application interface in the height direction, the pixel size of the interface element is 3px*3px.
  • the size measured by physical method is a visible size. For example, by physically measuring an interface element displayed on the screen, the physical size of the interface element is: 0.1 feet*0.1 feet.
  • the reference application interface of an application usually corresponds to the reference resolution of a reference screen, for example, 1280px*720px, and the resolutions to be adapted corresponding to the screens to be adapted of different terminal devices may be different; therefore,
  • the related technology adjusts the physical size of the interface elements presented in the reference application interface accordingly based on the proportional relationship between the reference resolution and different resolutions to be adapted, and obtains the display on different terminal devices.
  • Adaptive application interface is Adaptive application interface.
  • the proportional relationship between different resolutions to be adapted and the reference resolution is also different.
  • the adapted application interface obtained by adjusting the physical size is also different, that is, the physical size of the interface elements in the adapted application interface presented on different terminal devices is different, thereby affecting the visual presentation effect of the application interface.
  • a screen to be adapted often corresponds to two attributes: the resolution to be adapted and the point density to be adapted.
  • the physical size of the interface elements in the adapted application interface is not only related to the resolution to be adapted, but also related to the point density to be adapted.
  • the physical size of the interface elements presented in the reference application interface is the same as that of the corresponding interface elements presented in the reference application interface, so as to realize the effect that the physical dimensions of the interface elements in the adapted application interface presented on different terminal devices are the same.
  • the present application obtains a virtual pixel size based on the two parameters of resolution and point density. Then, for each interface element, with the reference virtual pixel size of the interface element being equal to the adapted virtual pixel size of the interface element, the physical size of the interface element of the reference application interface is adjusted to obtain an adapted application interface, so as to realize the adaptation
  • the physical dimensions of the interface elements presented in the configuration application interface are the same as the physical dimensions of the corresponding interface elements presented in the reference application interface.
  • the embodiment of the present application provides a method for adapting the application interface, the method includes: obtaining a trigger operation of the application to be displayed on the screen to be adapted, and displaying the application to be displayed on the screen to be adapted in response to the trigger operation.
  • the adapted application interface of the display application wherein the adapted application interface includes a plurality of interface elements, and for each interface element in the plurality of interface elements, the first physical size of the interface element presented in the adapted application interface is the same as the reference
  • the second physical size presented in the application interface is the same; and, the first physical size of the interface element is determined based on the adapted virtual pixel size of the interface element in the configured application interface and the point density to be adapted of the screen to be adapted,
  • the adapted virtual pixel size is the same as the base virtual pixel size of the interface element in the base application interface.
  • the reference virtual pixel size of the interface element is equal to the adapted virtual pixel size of the interface element, and the relationship between the virtual pixel size, pixel size, and point density of the interface element is used to determine the adaptation
  • the first physical size of the interface elements in the application interface so as to ensure that the first physical size of each interface element in the adapted application interface presented in the adapted application interface is the same as the corresponding interface element presented in the reference application interface
  • the second physical size is the same, so that the visual presentation effect of each interface element in the adaptation application interface displayed on the screen to be adapted is the same as that of the corresponding interface elements in the reference application interface displayed on the reference screen, and it also ensures different
  • the visual presentation effect of the interface elements in the adapted application interface presented on the terminal device is the same, thereby improving the user experience of the object.
  • the system architecture includes at least a terminal device 101 and a server 102.
  • the number of terminal devices 101 can be one or more, and the number of servers 102 can also be one. or more, and the number of terminal devices 101 and servers 102 is not specifically limited in this application.
  • the application to be displayed is pre-installed in the terminal device 101, wherein the type of the application to be displayed may be a client application, a web application, a small program application, and the like.
  • the application to be displayed may be, for example, a map application, an Internet of Vehicles application, an instant messaging application, a shopping application, and the like.
  • the terminal device 101 may be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart home appliance, a smart voice interaction device, a smart vehicle-mounted device, etc., but is not limited thereto.
  • the server 102 is the background server of the application to be displayed.
  • the server 102 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, and can also provide cloud services, cloud databases, cloud computing, and cloud functions.
  • Cloud servers for basic cloud computing services such as cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery network (Content Delivery Network, CDN), and big data and artificial intelligence platforms.
  • the terminal device 101 and the server 102 may be connected directly or indirectly through wired or wireless communication, which is not limited in this application.
  • the method for adjusting the interface layout in the embodiment of the present application may be executed by the terminal device 101 , may also be executed by the server 102 , or may be executed by the terminal device 101 and the server 102 interactively.
  • the terminal device 101 pre-installs the application to be displayed, and the terminal device 101 obtains a trigger operation of the application to be displayed on the screen to be adapted, so that in response to the trigger operation, the adapted application interface of the application to be displayed is displayed through the screen to be adapted, wherein,
  • the adapted application interface includes a plurality of interface elements, and for each interface element in the plurality of interface elements, the first physical size of the interface element presented in the adapted application interface is the same as the second physical size of the interface element presented in the reference application interface.
  • the physical size is the same; and, the first physical size of the interface element is determined based on the adapted virtual pixel size of the interface element in the adapted application interface and the point density to be adapted of the screen to be adapted, and the adapted virtual pixel size and Interface elements have the same baseline virtual pixel size as in the baseline application interface.
  • the method for adjusting interface layout in the embodiment of the present application can be applied to interface layout adjustment of applications such as map applications, Internet of Vehicles applications, instant messaging applications, and shopping applications.
  • the reference application interface is displayed on the reference screen, the reference resolution of the reference screen is 1280px*720px, and the dpi of the reference screen is 160.
  • the interface element 201 is the text "coffee”, and the physical size of the interface element 201 displayed on the reference application interface is set to 5cm*2cm.
  • the first adaptation application interface is displayed on the first screen to be adapted.
  • the standard resolution of the first screen to be adapted is 1920px*720px, and the dpi of the standard screen is 160.
  • the physical size of the interface element 202 corresponding to the interface element 201 presented in the first adaptation application interface is 5cm*2cm, that is, the visual presentation effect of the same interface element on two screens with different resolutions and the same dpi same.
  • the second adaptation application interface is displayed on the second screen to be adapted.
  • the standard resolution of the second screen to be adapted is 1280px*720px, and the dpi of the standard screen is 320.
  • the physical size of the interface element 203 corresponding to the interface element 201 presented in the second adaptation application interface is 5cm*2cm, that is, the visual presentation effect of the same interface element on two screens with the same resolution but different dpi same.
  • the embodiment of the present application provides a flow of a method for adjusting interface layout, as shown in Figure 3, the flow of the method is executed by a computer device, and the computer device may be as shown in Figure 1
  • the terminal device 101 and/or server 102 comprises the following steps:
  • the application to be displayed may be a map application, an Internet of Vehicles application, an instant messaging application, a shopping application, and the like.
  • the application to be displayed is divided into multiple service levels, that is, the application to be displayed includes multiple independent Business level, multiple independent business levels including notification layer, branch line layer, main line layer, control layer and base layer, each business level carries different business functions, and the jump logic and public relationship.
  • the interface elements related to different businesses are located at different business levels.
  • the level is adjusted, thereby improving the flexibility of interface element adjustment and the coupling of the application interface.
  • the map application is divided into five business levels, which are the notification layer 401, the branch layer 402, the main line layer 403, the control layer 404 and the bottom layer from top to bottom. Layer 405.
  • the notification layer 401 mainly carries notifications and functions with global attributes, and is suspended above the feeder layer without affecting the layout of other business layers.
  • the presentation form of the notification layer 401 is a dialog box, an active pop-up window, and the like.
  • the branch layer 402 mainly carries temporary branch tasks.
  • a branch task is usually a single task flow with an independent operation page, which can be invoked from any scene. After the branch task is completed, it will exit the current branch page.
  • the mainline layer 403 is also called a functional layer or a scenario layer, and the mainline layer carries functions in different business scenarios. For example, the navigation function in the navigation scene, the path planning function in the path planning scene, etc.
  • the control layer 404 mainly carries functions of interacting through controls.
  • the control layer provides controls such as the overview of the basemap and the zooming of the basemap.
  • the control layer provides navigation-related controls.
  • the bottom layer 405 mainly carries basic map information and guidance information, such as road network, road conditions, and navigation routes.
  • the application to be displayed is layered to obtain multiple independent business levels, which reduces the business coupling. Therefore, when adjusting the physical size of the interface elements, it is only necessary to adjust the business levels associated with the interface elements. Yes, there is no need to adjust all business levels, thus improving the flexibility of interface element adjustment.
  • the business layering of the application to be displayed improves the clear procedure of business logic, promotes the implementation of basic components at the technical level, and reduces maintenance costs at the technical level, thereby achieving the goal of reducing costs and increasing efficiency.
  • the triggering operation may be an operation capable of triggering the display of the application to be displayed, for example, the triggering operation may be a click operation, a double-click operation, a slide operation, and the like.
  • the adaptation application interface includes a plurality of interface elements, and for each interface element in the plurality of interface elements, the first physical size of the interface element presented in the adaptation application interface is the same as the second physical size presented in the reference application interface.
  • the size is the same; the first physical size of the interface element is determined based on the adapted virtual pixel size of the interface element in the adapted application interface and the point density to be adapted on the screen to be adapted, and the adapted virtual pixel size is the same as that of the interface element
  • the baseline virtual pixel dimensions in the application interface are the same.
  • the resolution to be adapted of the screen to be adapted may be the same as or different from the reference resolution of the reference screen.
  • the point density to be adapted of the screen to be adapted may be the same as the reference point density of the reference screen, or may be different from the reference point density of the reference screen.
  • interface elements may be text, images, videos, and the like.
  • Each first physical size is determined based on the adapted virtual pixel size of the interface element in the adapted application interface and the point density to be adapted of the screen to be adapted, and the adapted virtual pixel size is the same as that of the interface element in the benchmark
  • the reference virtual pixel size in the application interface is the same, wherein the reference virtual pixel size of the interface element is obtained by substituting the pixel size of the interface element and the reference point density of the reference application interface into the above formula (2).
  • the reference virtual pixel size of the interface element is equal to the adapted virtual pixel size of the interface element, and the relationship between the virtual pixel size, pixel size, and point density of the interface element is used to determine the adaptation
  • the first physical size of the interface elements in the application interface so as to ensure that the first physical size of each interface element in the adapted application interface presented in the adapted application interface is the same as the corresponding interface element presented in the reference application interface
  • the second physical size is the same, so that the visual presentation effect of each interface element in the adaptation application interface displayed on the screen to be adapted is the same as that of the corresponding interface elements in the reference application interface displayed on the reference screen, and it also ensures different
  • the visual presentation effect of the interface elements in the adapted application interface presented on the terminal device is the same, thereby improving the user experience of the object.
  • the first physical size of each interface element presented in the adaptation application interface is determined in the following manner:
  • the corresponding adapted pixel size of the interface element in the adapted application interface is determined.
  • the first physical size of the interface element presented in the adapted application interface is determined.
  • a virtual pixel is also called a device-independent pixel. Since each interface element in the reference application interface is designed with virtual pixels as the measurement unit, that is, the reference virtual pixel size of the interface element in the reference application interface determines the second physical size of the interface element presented in the reference application interface.
  • the adapted virtual pixel size of the interface elements in the adapted application interface needs to be the same as that of the interface elements in The baseline virtual pixel dimensions in the baseline application interface are the same.
  • the corresponding adapted pixel size of the interface element in the adapted application interface can be obtained.
  • the first physical size of the interface element presented in the adapted application interface can be obtained.
  • the reference application interface is displayed on the reference screen, the reference resolution of the reference screen is 1280px*720px, the dpi of the reference screen is 160, and the physical size of a unit pixel is 1/160*1/160 (in feet).
  • the interface element 501 is the text "range”
  • the reference virtual pixel size of the interface element 501 in the reference application interface is 10dp*10dp
  • the reference pixel size is 10px*10px
  • the interface element 501 presents the first in the reference application interface
  • the second physical size is 1/16*1/16 (in feet).
  • the resolution to be adapted of the screen to be adapted is 1920px*720px
  • the dpi of the screen to be adapted 160
  • the physical size of the unit pixel is 1/160*1/160( in feet).
  • the adapted virtual pixel size of the interface element 502 corresponding to the interface element 501 in the adapted application interface is the same as the reference virtual pixel size of the interface element 501, that is, 10dp*10dp.
  • the adapted pixel size of the interface element 502 is obtained as 10px*10px.
  • the first physical size of the interface elements presented in the adapted application interface can be obtained as 1/16*1/16 (the unit is feet), that is, the first physical size of the interface element 501 presented in the adapted application interface is the same as the corresponding second physical size of the corresponding interface element 502 presented in the reference application interface.
  • the reference application interface is displayed on the reference screen
  • the reference resolution of the reference screen is 1280px*720px
  • the dpi of the reference screen is 160
  • the physical size of a unit pixel is 1/160*1/160 (in feet).
  • the interface element 501 is the text "range”
  • the reference virtual pixel size of the interface element 501 in the reference application interface is 10dp*10dp
  • the reference pixel size is 10px*10px
  • the interface element 501 presents the first in the reference application interface
  • the second physical size is 1/16*1/16 (in feet).
  • the adapted virtual pixel size of the interface element 503 corresponding to the interface element 501 in the adapted application interface is the same as the reference virtual pixel size of the interface element 501, that is, 10dp*10dp.
  • the adapted pixel size of the interface element 503 in the adapted application interface is obtained as 20px*20px.
  • the first physical size of the interface element presented in the adapted application interface is 1/16 *1/16 (in feet), that is, the first physical size of the interface element 501 presented in the adapted application interface is the same as the corresponding second physical size of the corresponding interface element 503 presented in the reference application interface.
  • the adapted virtual pixel size of the interface element by setting the adapted virtual pixel size of the interface element to the corresponding reference virtual pixel size of the interface element in the reference application interface, it is ensured that the physical size of the interface element presented in the adapted application interface is consistent with the interface element
  • the physical size presented in the benchmark application interface is the same, and then based on the adapted virtual pixel size of the interface element and the point density to be adapted on the screen to be adapted, determine the number of pixels occupied by the interface element, and then based on the number of pixels and the physical size of the unit pixel
  • the size determines the first physical size of the interface element displayed in the adaptation application interface, thereby improving the efficiency of adjusting the physical size of the interface element and improving the visual presentation effect of the interface element.
  • the effective width and effective height of the screen to be adapted are determined by using the resolution to be adapted based on the screen to be adapted and the original screen density of the screen to be adapted. Then, based on the first degree of difference between the effective width and the reference width of the reference screen, and the second degree of difference between the effective height and the reference height of the reference screen, the standardized adjustment direction of the screen to be adapted is determined. Based on the standardized adjustment direction, the original pixel density of the screen to be adapted is adjusted to obtain the point density to be adapted.
  • the to-be-adapted resolution of the to-be-adapted screen includes the to-be-adapted width and the to-be-adapted height of the to-be-adapted screen, where the to-be-adapted width represents the width of the to-be-adapted screen in the width direction
  • the number of pixels, the height to be adapted indicates the number of pixels in the height direction of the screen to be adapted.
  • the ratio of the width to be adapted of the screen to be adapted to the original screen density is taken as the effective width
  • the ratio of the height to be adapted of the screen to be adapted to the original screen density is taken as the effective height.
  • the effective width and effective height of the screen to be adapted constitute the adapted virtual pixel size of the screen to be adapted.
  • screens of different widths can be adapted to a reference application interface, avoiding the waste of resources caused by repeated design of the reference application interface, and ensuring that different screens to be adapted
  • the uniformity of the physical size of the interface elements displayed on the screen improves the visual presentation effect of the interface elements.
  • the first difference degree is determined based on the ratio of the effective width to the reference width; and the second difference degree is determined based on the ratio of the effective height to the reference height.
  • the reference resolution of the reference screen includes a reference width and a reference height of the reference screen, wherein the reference width represents the number of pixels of the reference screen in the width direction, and the reference height represents the number of pixels of the screen to be adapted in the height direction. Since the base screen density of the base screen is 1 by default, the base width of the base screen is the same as the effective width of the base screen, and the base height of the base screen is the same as the effective width of the base screen. The effective width and effective height of the reference screen make up the reference screen's reference virtual pixel dimensions.
  • the screen to be adapted cannot be directly adapted to the reference application interface, and the screen to be adapted needs to be standardized and adjusted in advance, that is, based on the first difference degree and the second difference Determine the standardized adjustment direction of the screen to be adapted, and based on the standardized adjustment direction, adjust the original pixel density of the screen to be adapted to obtain the point density to be adapted.
  • both the first difference degree or the second difference degree are greater than 1, it means that the screen to be adapted can be directly adapted to the reference application interface, so standardized adjustment of the screen to be adapted is not required.
  • the present application at least provides the following implementation manners:
  • the height direction is used as the standardized adjustment direction of the screen to be adapted; if the first difference degree is less than or equal to the second difference degree, the width direction is used as the standardized adjustment direction of the screen to be adapted direction.
  • the screen to be adapted is determined based on the size between the effective width of the screen to be adapted and the reference width of the reference screen, and the size relationship between the effective height of the screen to be adapted and the reference height of the reference screen Whether it can be adapted to the reference application interface, if not, select the direction with a greater degree of difference from the width direction and the length direction as the standardized adjustment direction, so as to ensure that when the adapted application interface is displayed on the screen to be adapted, the horizontal or There will be no content overflow in vertical orientation.
  • the embodiments of the present application when adjusting the original pixel density of the screen to be adapted based on the standardized adjustment direction to obtain the point density to be adapted, at least provide the following implementation manners:
  • the number of pixels to be adapted corresponding to the screen to be adapted in the standardized adjustment direction is determined. Then, based on the number of pixels to be adapted and the number of reference pixels corresponding to the reference screen in the standardized adjustment direction, the original screen density is adjusted to obtain the screen density to be adapted. Then, based on the screen density to be adapted and the reference point density of the reference screen, the original pixel density is adjusted to determine the point density to be adapted.
  • the density of the screen to be adapted and the density of points to be adapted there are many ways to determine the density of the screen to be adapted and the density of points to be adapted. For example, the ratio of the number of pixels to be adapted to the number of reference pixels may be used as the density of the screen to be adapted. Then, the product of the screen density to be adapted and the reference point density is used as the point density to be adapted.
  • the reference resolution of the reference screen is 1280px*720px
  • the dpi of the reference screen 160
  • the reference screen density of the reference screen as 1.
  • the resolution to be adapted of the screen to be adapted is 3200px*1440px
  • the dpi of the screen to be adapted is 480
  • the original screen density of the screen to be adapted is 3.
  • the ratio of the number of pixels to be adapted in the height direction of the screen to be adapted to the number of reference pixels in the height direction of the reference screen to obtain a density of 2 for the screen to be adapted. Then calculate the product of the density of the screen to be adapted and the density of the reference point, and obtain the density of points to be adapted of the screen to be adapted as 320. At this time, the adjusted effective width of the screen to be adapted is 1600dp, and the adjusted effective height of the screen to be adapted is 720dp.
  • the adjusted first difference degree and the second difference degree are both greater than 1, that is, at this time
  • the screen to be adapted can be adapted with the reference application interface to obtain an adapted application interface.
  • screens of different widths can be adapted to a reference application interface, avoiding the waste of resources caused by repeated design of the reference application interface, and ensuring that different screens to be adapted
  • the uniformity of the physical size of the interface elements displayed on the screen improves the visual presentation effect of the interface elements.
  • the adaptation application interface further includes a plurality of adaptation information guide areas, and each adaptation information guide area is used to display interface elements associated with a type of guide information.
  • the physical width of the adaptation information guide area presented in the adaptation application interface is determined according to the preliminary pixel size of the adaptation information guide area and the width to be adapted of the screen to be adapted, wherein, The preliminary pixel size of the adaptation information guide area is determined based on the reference virtual pixel size of the corresponding reference information guide area in the reference application interface and the point density to be adapted.
  • the physical heights of the adaptation information guide areas displayed in the adaptation application interface, and the adaptation quantity of interface elements displayed in multiple adaptation information guide areas are based on the preliminary pixel size of the adaptation information guide area and the number of elements to be adapted.
  • the height of the screen to be adapted is determined.
  • the application interface can be pre-divided into multiple functional areas according to the functional modules.
  • the functional area refers to the information container that carries the interface elements in the application interface.
  • the multiple functional areas include the control area and multiple information guide areas.
  • the guide area includes dynamic information guide area, base map guide area and so on. The positions of multiple functional areas on the application interface can be set according to actual conditions.
  • the application interface includes a dynamic information guide area 701 , a basemap guide area 702 and a control area 703 .
  • the adaptation function area includes the adaptation information guide area, the adaptation control area, etc.
  • the preliminary pixel size of the adapted functional area is determined.
  • the preliminary pixel size of the adaptation function area is dynamically adjusted respectively to obtain the final adaptation function area in the adaptation application interface.
  • the process of determining the preliminary pixel size of the adaptation function area is different from the reference based on the interface elements in the reference application interface.
  • the virtual pixel size and the point density to be adapted of the screen to be adapted are similar to the methods for determining the adapted pixel size of the interface elements, which will not be repeated here.
  • the adaptation function The physical dimensions of a zone and the corresponding base ribbon may be different, but the physical dimensions of the interface elements in the adapted ribbon are always the same as the physical dimensions of the interface elements in the corresponding base ribbon.
  • the process of adjusting the interface elements in the reference application interface to obtain the interface elements in the adaptation application interface correspondingly adjust the reference information guide area in the reference application interface to obtain the adaptation application interface In the preliminary adaptation information guide area, and then dynamically adjust the preliminary adaptation information guide area, so that the adaptation information guide area and the adaptation application interface are more compatible, thereby improving the visual presentation effect.
  • the physical width of each adaptation information guide area presented in the adaptation application interface is determined in the following manner:
  • the width adjustment range of the adaptation information guide area is determined. Based on the preliminary pixel size, a preliminary pixel width of the adaptation information guide area is determined. Then, based on the width to be adapted and the width adjustment range of the screen to be adapted, the preliminary pixel width is adjusted to obtain the final pixel width of the adaptation information guide area, and based on the final pixel width, determine the adaptation information guide area in the adaptation application The physical width rendered in the UI.
  • a width value is selected from the width adjustment range as the final pixel width of the adaptation information guide area in the adaptation application interface; and then the final pixel width Multiply it with the physical size of the unit pixel to obtain the physical width of the adaptation information guide area presented in the adaptation application interface.
  • the adjustment ratio of the reference width range is 1. Based on the adjustment ratio, the corresponding width adjustment range is 480px-560px, and the pixels of the reference information guide area 801 can be obtained.
  • the width is 560px.
  • the default selection rules are as follows:
  • the final pixel width of the adaptation information guide area in the adaptation application interface is the minimum width MinN2 of the width adjustment range.
  • the final pixel width of the adaptation information guide area in the adaptation application interface is the average value of the minimum width MinN2 and the maximum width MaxN2 of the width adjustment range.
  • the final pixel width of the adaptation information guide area in the adaptation application interface is the maximum width MaxN2 of the width adjustment range.
  • the to-be-adapted resolution of the to-be-adapted screen 1560px*720px, and the to-be-adapted point density of the to-be-adapted screen to 160. Since the point density to be adapted of the screen to be adapted is the same as the reference point density of the reference screen, the preliminary pixel size of the adaptation information guide area is the same as the reference pixel size of the reference information guide area.
  • the width to be adapted of the screen to be adapted is 1560px, according to the above selection rules, it can be determined that the final pixel width of the adaptation information guide area 802 in the adaptation application interface is 520px, then the preliminary pixel width of the adaptation information guide area 802 560px is adjusted to the final pixel width of 520px, and finally the final pixel width is multiplied by the physical width of the unit pixel to obtain the physical width of the adaptation information guide area presented in the adaptation application interface.
  • the adjustment ratio of the reference width range is 1.25. Based on the adjustment ratio, the corresponding width adjustment range can be obtained as 600px-700px.
  • the reference information guide area 901 has a pixel width of 700px.
  • the default selection rules are as follows:
  • the final pixel width of the adaptation information guide area in the adaptation application interface is the minimum width MinN of the width adjustment range.
  • the final pixel width of the adaptation information guide area in the adaptation application interface is the average value of the minimum width MinN and the maximum width MaxN of the width adjustment range.
  • the final pixel width of the adaptation information guide area in the adaptation application interface is the maximum width MaxN of the width adjustment range.
  • the adaptation information The preliminary pixel size of the guide area is the same as the reference pixel size of the reference information guide area.
  • the width to be adapted of the screen to be adapted is 1560px, according to the selection rules above, it can be determined that the final pixel width of the adaptation information guide area 902 in the adaptation application interface is 650px, and the initial pixel width of the adaptation information guide area 902 is 700px Adjust to the final pixel width of 650px, and finally multiply the final pixel width by the physical width of the unit pixel to obtain the physical width of the adaptation information guide area presented in the adaptation application interface.
  • the left and right widths of the adaptation information guide area presented in the adaptation application interface are adjusted so that the adaptation The size of the information guide area better matches the adapted application interface, thereby improving the visual presentation effect of the adapted application interface.
  • the above-mentioned multiple adaptation information guide areas are located in the main line layer of each service level of the application to be displayed; the physical width of each adaptation information guide area presented in the adaptation application interface is in the main line layer , determined according to the preliminary pixel size of the adaptation information guide area and the width to be adapted of the screen to be adapted.
  • each adaptation information guide area presented in the adaptation application interface, and the adaptation quantity of interface elements displayed in each adaptation information guide area are based on the preliminary pixels of the adaptation information guide area in the main line layer
  • the size and the height to be adapted of the screen to be adapted are determined.
  • the physical height of each adaptation information guide area presented in the adaptation application interface is determined in the following manner:
  • a preliminary pixel height of the adaptation information guide area is determined. Then, based on the to-be-adapted height of the to-be-adapted screen and the display status information of the reference information guide area, the height adjustment value of the preliminary pixel height is determined. Based on the height adjustment value and the preliminary pixel height, the final pixel height of the adaptation information guide area is determined, and based on the final pixel height, the physical height of the adaptation information guide area presented in the adaptation application interface is determined.
  • the adaptation quantity of interface elements displayed in each adaptation information guide area is determined in the following manner:
  • the element adjustment quantity of the adaptation information guide area is determined. Then, based on the element adjustment quantity and the reference quantity of the interface elements displayed in the reference application interface in the reference information guide area, the adaptation quantity of the interface elements displayed in the adaptation information guide area in the adaptation application interface is determined.
  • the corresponding adaptation information guide area can display more interface elements by increasing the display area.
  • the adaptation information guide area with a preliminary pixel height can be displayed, and there is an additional blank area that can be used to display the adaptation information guide area, then based on The pixel height of the blank area determines the height adjustment value of the preliminary pixel height and the element adjustment quantity of the adaptation information guide area. At this time, the height adjustment value and the element adjustment quantity are both greater than 0.
  • the adaptation information guide area of the preliminary pixel height can be displayed, and there is no additional blank area that can be used to display the adaptation information guide area, the height adjustment value of the initial pixel height and the adaptation
  • the number of element adjustments in the information guide area is all 0.
  • the height to be adapted of the adaptation application interface cannot display the adaptation information guide area of all preliminary pixel heights, determine the height adjustment value of the initial pixel height and the adaptation information based on the pixel heights that cannot be displayed in the adaptation information guide area.
  • the element adjustment quantity of the information guide area At this time, both the height adjustment value and the element adjustment quantity are less than 0.
  • the height adjustment value of the preliminary pixel height and the element adjustment quantity of the adaptation information guide area are both 0.
  • the physical height of is multiplied to obtain the physical height of the presentation of the adaptation information guide area.
  • the element adjustment quantity is added to the reference quantity of the interface elements displayed in the reference application interface in the reference information guide area to determine the adaptation quantity of the interface elements displayed in the adaptation application interface in the information guide area.
  • the base number is 4.
  • Setting the display status information of the reference information guide area 1001 indicates that the reference information guide area 1001 does not display all the interface elements, and the adaptation application interface height to be adapted can display the adaptation information guide area 1002 with a preliminary pixel height, and There is also an additional blank area that can be used to display the guide area of the adaptation information. Based on the pixel height of the blank area, the height adjustment value of the preliminary pixel height is determined to be 300px and the number of elements to be adjusted in the guide area of the adaptation information is 3.
  • the upper and lower heights of the adaptation information guide area presented in the adaptation application interface are adjusted so that the adaptation information
  • the number of interface elements displayed in the guide area can be adjusted according to the height of the screen to be adapted, so that the space of the adapted application interface can be fully utilized, which not only avoids space waste, but also ensures the visual presentation of the application interface Effect.
  • the adaptation application interface further includes an adaptation control area
  • the adaptation control area is used to display interface elements associated with the operation controls
  • the plurality of adaptation information guide areas include an adaptation dynamic information guide area .
  • the final display position of the adaptation control area in the adaptation application interface is determined based on the pixel size of the blank area, which is the blank area between the lower boundary of the adaptation dynamic information guide area and the lower boundary of the adaptation application interface.
  • the preliminary pixel size of the adaptation control area may be determined based on the reference virtual pixel size of the reference control area and the dot density to be adapted of the screen to be adapted.
  • the preliminary pixel size of the adaptation control area can be directly displayed as the adaptation pixel size of the adaptation control area, or the adaptation pixel size of the above-mentioned adaptation information guide area can be determined in a similar manner to determine the Fit pixel size of the control area.
  • the physical size of the adaptation control area displayed in the adaptation application interface is determined.
  • the adaptation control area is located in the control layer of each business level of the application to be displayed, and the final display position of the adaptation control area in the adaptation application interface is in the control layer, guided by the dynamic information of the adaptation
  • the lower boundary of the area is determined by the pixel size of the blank area between the lower boundary of the adapted application interface.
  • the benchmark dynamic information guide area is generally displayed on the far left, and the benchmark control area is generally displayed on the right side of the benchmark dynamic information guide area.
  • the left side of the benchmark application interface is close to the driver and is the golden area for operation and display. Therefore, when performing interface adaptation, if there is still a blank area on the left side of the adaptation application interface after the adaptation dynamic information guide area is displayed, the adaptation control area can be moved to the bottom of the adaptation dynamic information guide area for display , so that the golden area in the adaptation application interface can be well utilized, and it is also convenient for the driver to operate.
  • the blank area is used as the final display position of the adaptation control area in the adaptation application interface. If the pixel size of the blank area is less than or equal to the preset threshold, based on the display position relationship between the reference dynamic information guide area and the reference control area in the reference application interface, and the display position of the adapted dynamic information guide area in the adapted application interface, Determine the final display position of the adaptation control area in the adaptation application interface.
  • the pixel size of the blank area when the pixel size of the blank area is greater than the preset threshold, it means that the blank area between the lower boundary of the adaptive dynamic information guide area and the lower boundary of the adaptive application interface can also display the adaptive control area , therefore, this blank area is used as the final display position of the adaptation control area in the adaptation application interface.
  • the pixel size of the blank area is less than or equal to the preset threshold, it means that the blank area between the lower boundary of the adaptive dynamic information guide area and the lower boundary of the adaptive application interface cannot display the adaptive control area.
  • area and the reference control area in the benchmark application interface determine the display position relationship between the adaptive dynamic information guide area and the adaptive control area in the adaptive application interface, and then based on the adaptation dynamic information guide area and the adaptation.
  • the display position relationship of the control area in the adaptation application interface and the display position of the adaptation dynamic information guide area in the adaptation application interface determine the final display position of the adaptation control area in the adaptation application interface.
  • the resolution of the screen to be adapted is 1920px*1080px, and the dpi of the screen to be adapted is 160.
  • an adaptation control area 1104 is displayed below the adaptation dynamic information guide area 1103 .
  • the display position of the adaptation control area in the adaptation application interface is dynamically adjusted, and the control of interface details is increased for individual screen differences.
  • the space of the application interface is used more reasonably, and the convenience of operation is also improved.
  • the following describes a method for adapting the application interface provided by the embodiment of the present application in combination with specific implementation scenarios.
  • the flow of the method can be executed by the terminal device 101 shown in FIG. Executed by the server 102, it can also be executed interactively by the terminal device 101 and the server 102, including the following steps, as shown in Figure 12:
  • the effective width and effective height of the to-be-adapted screen are determined.
  • the ratio of the effective width to the reference width is taken as the first difference degree; and the ratio of the effective height to the reference height is taken as the second difference degree.
  • first difference degree or the second difference degree is greater than 1, it is not necessary to perform screen standardization adjustment on the screen to be adapted, and directly use the original point density of the screen to be adapted as the point density to be adapted of the screen to be adapted . If the first difference degree or the second difference degree is less than 1, it is necessary to perform screen standardization adjustment on the screen to be adapted; the process of performing screen standardization adjustment on the screen to be adapted is as follows:
  • the height direction is used as the standardized adjustment direction of the screen to be adapted; if the first difference degree is less than or equal to the second difference degree, the width direction is used as the standardized adjustment direction of the screen to be adapted .
  • the to-be-adapted resolution of the to-be-adapted screen determine the number of to-be-adapted pixels corresponding to the to-be-adapted screen in a standardized adjustment direction. The ratio of the number of pixels to be adapted to the number of reference pixels of the reference screen in the standardized adjustment direction is used as the density of the screen to be adapted. Then, the product of the screen density to be adapted and the reference point density of the reference screen is used as the point density to be adapted.
  • the application to be displayed is split into multiple business layers.
  • Multiple independent business layers include notification layer, branch line layer, main line layer, control layer, and base layer.
  • Each business layer carries different business functions, and pre- Set the jump logic and public relations between various business levels.
  • the reference virtual pixel size of the interface element can be used as the adapted virtual pixel size of the interface element in the adapted application interface, and then based on the adapted virtual pixel size of the interface element and the size of the screen to be adapted To be adapted point density, determine the adapted pixel size of interface elements in the adapted application interface. Based on the adapted pixel size of the interface element and the physical size of the unit pixel in the screen to be adapted, determine the physical size of the interface element presented in the adapted application interface. At this time, the physical size of the interface elements in the adapted application interface is the same as the physical size of the interface elements in the reference application interface.
  • the functional area refers to the information container that carries the interface elements in the application interface.
  • a functional area includes one or more interface elements.
  • the functional area can be an information guide area, control area etc.
  • the reference virtual pixel size of the reference information guide area is used as the adapted virtual pixel size of the corresponding adaptation information guide area in the adaptation application interface, and then the adaptation based on the adaptation information guide area
  • the virtual pixel size and the point density to be adapted of the screen to be adapted determine the preliminary pixel size of the adaptation information guide area in the adaptation application interface.
  • the method for physically adapting other functional areas is the same as the method for physically adapting the information guide area, and will not be repeated here.
  • the adaptive functional area includes adaptation information Boot area, adaptation control area, etc.
  • the preliminary pixel width and preliminary pixel height of the adaptation information guide area are determined.
  • the width adjustment range of the adaptation information guide area is determined.
  • the preliminary pixel width is adjusted to obtain the final pixel width of the adaptation information guide area.
  • the height adjustment value of the preliminary pixel height and the element adjustment quantity of the adaptation information guide area are determined.
  • the final pixel height of the adaptation information guide area is determined. Then based on the final pixel width and final pixel height of the adaptation information guide area, the adapted pixel size of the adaptation information guide area is obtained.
  • the adaptation pixel size of the adaptation information guide area Based on the adaptation pixel size of the adaptation information guide area and the physical size of a unit pixel in the screen to be adapted, determine the physical size of the adaptation information guide area presented in the adaptation application interface. At this time, since the adaptation pixel size of the adaptation information guide area may be different from the preliminary pixel size of the adaptation information guide area, the physical size presented in the adaptation application interface of the adaptation information guide area is different from the adaptation information guide area. The physical size of the information guide area presented in the reference application interface may also be different.
  • the adaptation information guide area when dynamically adjusting the adaptation information guide area, only the pixel size of the information container of the adaptation information guide area is adjusted, and the pixel size of the interface elements in the adaptation information guide area is not adjusted.
  • the adaptation information guide area since the adaptation information guide area is located in the main line layer 403 of each service level shown in FIG. 4, when dynamically adjusting the adaptation information guide area, only the adaptation information guide area in the main line layer 403 needs to be adjusted. , without needing to adjust other business layers.
  • the element adjustment quantity of the adaptation information guide area is determined based on the to-be-adapted height of the screen to be adapted and the display state information of the reference information guide area. Then, based on the number of element adjustments and the reference number of interface elements displayed in the reference application interface in the reference information guide area, determine the adaptation quantity of the interface elements displayed in the adaptation information guide area in the adaptation application interface, and The area displays the appropriate number of interface elements.
  • the adaptation control area use the same method to determine the adaptation pixel size of the above adaptation information guide area. After determining the adaptation pixel size of the adaptation control area, if the adaptation dynamic information guide located at the far left of the screen to be If the pixel size of the blank area between the lower boundary of the area and the lower boundary of the adaptation application interface is greater than the preset threshold, the adaptation control area is displayed below the adaptation dynamic information guide area.
  • the adaptation control area when dynamically adjusting the adaptation control area, only the pixel size of the information container of the adaptation control area is adjusted, and the pixel size of the interface elements in the adaptation control area is not adjusted. Since the adaptation control area is located at the control layer 403 in each service level shown in FIG. other business layers.
  • the reference virtual pixel size of the interface element is equal to the adapted virtual pixel size of the interface element, and the relationship between the virtual pixel size, pixel size, and point density of the interface element is used to determine the adaptation
  • the first physical size of the interface elements in the application interface so as to ensure that the first physical size of each interface element in the adapted application interface presented in the adapted application interface is the same as the corresponding interface element presented in the reference application interface
  • the second physical size is the same, so that the visual presentation effect of each interface element in the adaptation application interface displayed on the screen to be adapted is the same as that of the corresponding interface elements in the reference application interface displayed on the reference screen, and it also ensures different
  • the visual presentation effect of the interface elements in the adapted application interface presented on the terminal device is the same, thereby improving the user experience of the object.
  • a set of reference application interfaces can meet the adaptation requirements of different screens such as vehicles, tablets, and mobile phones, avoiding the waste of resources caused by repeated design of reference application interfaces.
  • the functional areas are further dynamically adjusted (including left-right adaptation and up-down adaptation), and the display positions of some functional areas in the application interface are adjusted, which adds to the The control of details makes more reasonable use of the space of the application interface.
  • the embodiment of the present application provides a schematic structural diagram of an application interface adaptation device, as shown in Figure 13, the device 1300 includes:
  • a processing module 1301, configured to acquire a trigger operation of an application to be displayed on the screen to be adapted
  • the display module 1302 is configured to display an adapted application interface of the application to be displayed through the screen to be adapted in response to the trigger operation, wherein the adapted application interface includes a plurality of interface elements, for the each interface element of the plurality of interface elements, the first physical size of the interface element presented in the adapted application interface is the same as the second physical size presented in the reference application interface; the first physical size of the interface element is The physical size is determined based on the adapted virtual pixel size of the interface element in the adapted application interface and the to-be-adapted point density of the screen to be adapted, and the adapted virtual pixel size is the same as that of the interface element
  • the baseline virtual pixel dimensions are the same in the baseline application interface.
  • the processing module 1301 is specifically used for:
  • a first physical size of the interface element presented in the adapted application interface is determined.
  • processing module 1301 is further configured to:
  • the original pixel density of the screen to be adapted is adjusted to obtain the point density to be adapted.
  • processing module 1301 is further configured to:
  • a first degree of difference between the effective width and a reference width of the reference screen, and a second degree of difference between the effective height and a reference height of the reference screen determine the screen to be adapted Before standardizing and adjusting the direction, a first degree of difference is determined based on the ratio of the effective width to the reference width; and a second degree of difference is determined based on the ratio of the effective height to the reference height;
  • processing module 1301 is specifically configured to:
  • the width direction is used as the standardized adjustment direction of the screen to be adapted.
  • processing module 1301 is specifically configured to:
  • the original pixel density is adjusted to determine the point density to be adapted.
  • the adaptation application interface further includes a plurality of adaptation information guide areas, and each adaptation information guide area is used to display interface elements associated with a type of guide information;
  • the physical width of the adaptation information guide area presented in the adaptation application interface is based on the preliminary pixel size of the adaptation information guide area and the to-be-adapted screen size.
  • the adaptation width is determined, wherein the preliminary pixel size of the adaptation information guide area is determined based on the reference virtual pixel size of the corresponding reference information guide area in the reference application interface and the point density to be adapted;
  • the physical height presented by the adaptation information guide area in the adaptation application interface and the adaptation quantity of the interface elements displayed in the adaptation information guide area are based on the preliminary pixel size of the adaptation information guide area And the to-be-adapted height of the to-be-adapted screen is determined.
  • processing module 1301 is further configured to:
  • processing module 1301 is specifically configured to:
  • the upper and lower boundary values of the reference width range are respectively multiplied by the adjustment ratio to obtain the width adjustment range of the adaptation information guide area.
  • processing module 1301 is further configured to:
  • processing module 1301 is further configured to:
  • the adaptation application interface further includes an adaptation control area, the adaptation control area is used to display interface elements associated with operation controls, and the plurality of adaptation information guide areas include Adapt to the dynamic information guide area;
  • the final display position of the adaptation control area in the adaptation application interface is determined based on the pixel size of the blank area, which is the lower boundary of the adaptation dynamic information guide area and the adaptation application interface.
  • processing module 1301 is further configured to:
  • the blank area is used as the final display position of the adaptation control area in the adaptation application interface;
  • the pixel size of the blank area is less than or equal to the preset threshold, based on the display position relationship between the reference dynamic information guide area and the reference control area in the reference application interface, and the adaptive dynamic information guide area in the The display position in the adaptation application interface is determined to determine the final display position of the adaptation control area in the adaptation application interface.
  • the application to be displayed includes multiple independent service layers, and the multiple independent service layers include a notification layer, a branch layer, a main layer, a control layer, and a base layer.
  • the multiple adaptation information guide areas are located at the main line layer;
  • the physical width of each adaptation information guide area presented in the adaptation application interface is based on the preliminary pixel size of the adaptation information guide area and the to-be-adapted screen size in the main line layer.
  • the adaptation width is determined;
  • the physical height presented in the adaptation application interface by each of the adaptation information guide areas, and the adaptation quantity of the interface elements displayed in each of the adaptation information guide areas are determined according to the main line layer.
  • the preliminary pixel size of the adaptation information guide area and the to-be-adapted height of the to-be-adapted screen are determined.
  • the adaptation control area is located at the control layer
  • the final display position of the adaptation control area in the adaptation application interface is determined based on the pixel size of the blank area in the control layer, and the blank area is the lower part of the adaptation dynamic information guide area.
  • the reference virtual pixel size of the interface element is equal to the adapted virtual pixel size of the interface element, and the relationship between the virtual pixel size, pixel size, and point density of the interface element is used to determine the adaptation
  • the first physical size of the interface elements in the application interface so as to ensure that the first physical size of each interface element in the adapted application interface presented in the adapted application interface is the same as the corresponding interface element presented in the reference application interface
  • the second physical size is the same, so that the visual presentation effect of each interface element in the adaptation application interface displayed on the screen to be adapted is the same as that of the corresponding interface elements in the reference application interface displayed on the reference screen, and it also ensures different
  • the visual presentation effect of the interface elements in the adapted application interface presented on the terminal device is the same, thereby improving the user experience of the object.
  • the embodiment of the present application provides a computer device, which may be the terminal device and/or the server shown in FIG. 1, as shown in FIG. A memory 1402 connected to a processor.
  • the embodiment of the present application does not limit the specific connection medium between the processor 1401 and the memory 1402.
  • the connection between the processor 1401 and the memory 1402 is taken as an example.
  • the bus can be divided into address bus, data bus, control bus and so on.
  • the memory 1402 stores instructions that can be executed by at least one processor 1401 , and at least one processor 1401 can execute the steps of the above-mentioned application interface adaptation method by executing the instructions stored in the memory 1402 .
  • the processor 1401 is the control center of the computer equipment, which can use various interfaces and lines to connect various parts of the computer equipment, by running or executing instructions stored in the memory 1402 and calling data stored in the memory 1402, thereby implementing interface adaptation.
  • the processor 1401 may include one or more processing units, and the processor 1401 may integrate an application processor and a modem processor.
  • the tuner processor mainly handles wireless communication. It can be understood that the foregoing modem processor may not be integrated into the processor 1401 .
  • the processor 1401 and the memory 1402 can be implemented on the same chip, and in some embodiments, they can also be implemented on independent chips.
  • the processor 1401 can be a general processor, such as a central processing unit (CPU), a digital signal processor, an application specific integrated circuit (Application Specific Integrated Circuit, ASIC), a field programmable gate array or other programmable logic devices, discrete gates or transistors Logic devices and discrete hardware components can implement or execute the methods, steps and logic block diagrams disclosed in the embodiments of the present application.
  • a general purpose processor may be a microprocessor or any conventional processor or the like. The steps of the methods disclosed in connection with the embodiments of the present application may be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules in the processor.
  • the memory 1402 can be used to store non-volatile software programs, non-volatile computer-executable programs and modules.
  • Memory 1402 may include at least one type of storage medium, for example, may include flash memory, hard disk, multimedia card, card-type memory, random access memory (Random Access Memory, RAM), static random access memory (Static Random Access Memory, SRAM), Programmable Read Only Memory (PROM), Read Only Memory (ROM), Electrically Erasable Programmable Read-Only Memory (EEPROM), Magnetic Memory, Disk , CD, etc.
  • Memory 1402 is any other medium that can be used to carry or store desired program code in the form of instructions or data structures and can be accessed by a computer device, but is not limited thereto.
  • the memory 1402 in this embodiment of the present application may also be a circuit or any other device capable of implementing a storage function, and is used for storing program instructions and/or data.
  • an embodiment of the present application provides a computer-readable storage medium, which stores a computer program that can be executed by a computer device, and when the program is run on the computer device, the computer device is made to execute the above-mentioned application interface adaptation method A step of.
  • an embodiment of the present application provides a computer program product, the computer program product includes a computer program stored on a computer-readable storage medium, the computer program includes program instructions, when the program instructions are executed by the computer When the device is executed, the computer device is made to execute the steps of the method for adapting the application interface.
  • the embodiments of the present application may be provided as methods or computer program products. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.
  • a computer-usable storage media including but not limited to disk storage, CD-ROM, optical storage, etc.
  • These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing apparatus to operate in a specific manner, such that the instructions stored in the computer-readable memory produce an article of manufacture comprising instruction means, the instructions
  • the device realizes the function specified in one or more procedures of the flowchart and/or one or more blocks of the block diagram.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)
  • Digital Computer Display Output (AREA)

Abstract

本申请实施例提供了一种调整界面布局的方法、装置、设备及存储介质,可应用于地图领域,该方法包括:响应于针对待展示应用的触发操作,通过待适配屏幕展示待展示应用的适配应用界面,每个界面元素在适配应用界面中呈现的第一物理尺寸,与相应的界面元素在基准应用界面中相应呈现的第二物理尺寸相同;每个第一物理尺寸是基于界面元素在基准应用界面中的基准虚拟像素尺寸,以及待适配屏幕的待适配点密度确定的,从而使得待适配屏幕上展示的适配应用界面中的各个界面元素,与基准屏幕上展示的基准应用界面中相应的各个界面元素的视觉呈现效果相同,故不同终端设备上呈现的适配应用界面中的界面元素的视觉呈现效果相同,进而提高对象的使用体验。

Description

一种调整界面布局的方法、装置、设备及存储介质
本申请要求于2022年3月4日提交中国专利局、申请号202210207998.7、申请名称为“一种调整界面布局的方法、装置、设备及存储介质”的中国专利申请的优先权,其全部内容通过引用结合在本申请中。
技术领域
本申请实施例涉及前端技术领域,尤其涉及一种调整界面布局的方法、装置、设备及存储介质。
背景技术
随着终端设备的发展,对于终端设备的需求日益增长。为适应不同的需求,终端设备上可以安装各种应用程序。而应用程序的界面布局在很大程度上影响着对象对应用程序的使用体验。
相关技术中,一个应用程序的基准应用界面往往对应一个基准屏幕的基准分辨率,如,1280px*720px,而不同终端设备的待适配屏幕对应的待适配分辨率可能是不同的;因此,为了与不同的终端设备适配,相关技术基于基准分辨率分别与不同待适配分辨率之间的比例关系,相应调整基准应用界面中呈现的界面元素的物理尺寸,获得在不同终端设备上展示的适配应用界面。
由于不同终端设备对应的待适配分辨率是不同的,故不同待适配分辨率与基准分辨率的比例关系也是不同的,因此,采用不同的比例关系,对同一基准应用界面中的界面元素进行物理尺寸调整获得的适配应用界面也是不同的,即在不同终端设备上呈现的适配应用界面中的界面元素的物理尺寸不同,进而影响应用程序界面的视觉呈现效果。
发明内容
本申请实施例提供了一种调整界面布局的方法、装置、设备及存储介质,用于提高应用程序界面的视觉呈现效果。
一方面,本申请实施例提供了一种调整界面布局的方法,该方法由计算机设备执行,该方法包括:
获取在待适配屏幕上对待展示应用的触发操作;
响应于所述触发操作,通过所述待适配屏幕展示所述待展示应用的适配应用界面,其中,所述适配应用界面中包括多个界面元素,针对所述多个界面元素中的每个界面元素,所述界面元素在所述适配应用界面中呈现的第一物理尺寸与在基准应用界面中呈现的第二物理尺寸相同;所述界面元素的第一物理尺寸是基于所述界面元素在所述适配应用界面中的适配虚拟像素尺寸以及所述待适配屏幕的待适配点密度确定的,所述适配虚拟像素尺寸与所述界面元素在基准应用界面中的基准虚拟像素尺寸相同。
一方面,本申请实施例提供了一种应用界面适配的装置,该装置部署在计算机设备上,该装置包括:
处理模块,用于获取在待适配屏幕上对待展示应用的触发操作;
展示模块,用于响应于所述触发操作,通过所述待适配屏幕展示所述待展示应用的适配应用界面,其中,所述适配应用界面中包括多个界面元素,针对所述多个界面元素中的每个界面元素,所述界面元素在所述适配应用界面中呈现的第一物理尺寸与在基准应用界面中呈现的第二物理尺寸相同;所述界面元素的第一物理尺寸是基于所述界面元素在所述适配应用界面中的适配虚拟像素尺寸以及所述待适配屏幕的待适配点密度确定的,所述适配虚拟像素尺寸与所述界面元素在基准应用界面中的基准虚拟像素尺寸相同。
基准宽度范围基准宽度范围一方面,本申请实施例提供了一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现上述应用界面适配的方法的步骤。
一方面,本申请实施例提供了一种计算机可读存储介质,其存储有可由计算机设备执行的计算机程序,当所述程序在计算机设备上运行时,使得所述计算机设备执行上述图像处理方法的步骤。
一方面,本申请实施例提供了一种计算机程序产品,所述计算机程序产品包括存储在计算机可读存储介质上的计算机程序,所述计算机程序包括程序指令,当所述程序指令被计算机设备执行时,使所述计算机设备执行上述应用界面适配的方法的步骤。
本申请实施例中,以界面元素的基准虚拟像素尺寸与界面元素的适配虚拟像素尺寸相等为基准,结合界面元素的虚拟像素尺寸、像素尺寸、点密度三者之间的关系,确定适配应用界面中的界面元素的第一物理尺寸,以保证适配应用界面中的每个界面元素在适配应用界面中呈现的第一物理尺寸,与相应的界面元素在基准应用界面中相应呈现的第二物理尺寸相同,从而使得待适配屏幕上展示的适配应用界面中的各个界面元素,与基准屏幕上展示的基准应用界面中相应的各个界面元素的视觉呈现效果相同,也保证了不同终端设备上呈现的适配应用界面中的界面元素的视觉呈现效果相同,进而提高对象的使用体验。其次,通过对待适配屏幕进行标准化调整,使得一套基准应用界面,可以满足车载、平板和手机等不同屏幕的适配要求,避免了重复设计基准应用界面带来的资源浪费。另外在对应用界面中的信息引导区和控件区进行物理适配之后,进一步对信息引导区和控件区进行动态调整(包括左右适配和上下适配),同时,调整控件区在应用界面中的展示位置,增加了对细节的把控,更合理的利用了应用界面的空间。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简要介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域的普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的一种系统架构示意图;
图2为本申请实施例提供的一种应用场景的示意图;
图3为本申请实施例提供的一种应用界面适配的方法的流程示意图;
图4为本申请实施例提供的一种业务分层的示意图;
图5为本申请实施例提供的一种基准应用界面和适配应用界面的示意图一;
图6为本申请实施例提供的一种基准应用界面和适配应用界面的示意图二;
图7为本申请实施例提供的一种功能区的示意图;
图8为本申请实施例提供的一种基准应用界面和适配应用界面的示意图三;
图9为本申请实施例提供的一种基准应用界面和适配应用界面的示意图四;
图10为本申请实施例提供的一种基准应用界面和适配应用界面的示意图五;
图11为本申请实施例提供的一种基准应用界面和适配应用界面的示意图六;
图12为本申请实施例提供的一种应用界面适配的方法的流程示意图;
图13为本申请实施例提供的一种应用界面适配的装置的结构示意图;
图14为本申请实施例提供的一种计算机设备的结构示意图。
具体实施方式
为了使本申请的目的、技术方案及有益效果更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。
为了方便理解,下面对本申请实施例中涉及的名词进行解释。
应用界面:也可以称之为使用者界面(User Interface,UI),是系统和用户之间进行交互和信息交换的媒介,目的在使得用户能够方便有效率地去操作硬件以达成双向之交互,完成所希望借助硬件完成之工作。
dpi:dot per inch,每英寸点数,也可以称之为点密度,是打印机、鼠标等设备分辨率的度量单位,也就是每英寸的像素。dpi的计算公式如以下公式(1)所示:
dpi=sqrt(X 2+Y 2)/C…………………(1)
其中,X和Y分别表示屏幕分辨率中的宽度和高度,C表示屏幕对角线的长度,单位为英尺。
ppi:point per pnch,每英尺内像素点个数,即像素密度。
density:屏幕密度,density=屏幕dpi/160。
dp:虚拟像素单位,1dp等于dpi为160的屏幕上的1个像素,等于dpi为320的屏幕上的2个像素,等于dpi为480的屏幕的上的3个像素。
一个界面元素的像素尺寸、虚拟像素尺寸以及屏幕的点密度之间的关系,如以下公式(2)所示:
p=d*(dpi/160)…………………(2)
其中,p表示界面元素的像素尺寸,单位为px;d表示界面元素的虚拟像素尺寸,单位为dp。
像素尺寸:采用占用的像素数量表征的尺寸。比如,应用界面中的某个界面元素在宽度方向上占用应用界面的3个像素,在高度方向上占用应用界面3个像素,则该界面元素的像素尺寸为3px*3px。
物理尺寸:用物理方法测出的尺寸,是一个可见的尺寸。比如,通过对屏幕上显示的某个界面元素进行物理测量,获得该界面元素的物理尺寸为:0.1英尺*0.1英尺。
下面对本申请实施例的设计思想进行介绍。
相关技术中,一个应用程序的基准应用界面往往对应一个基准屏幕的基准分辨率,如,1280px*720px,而不同终端设备的待适配屏幕对应的待适配分辨率可能是不同的;因此, 为了与不同的终端设备适配,相关技术基于基准分辨率分别与不同待适配分辨率之间的比例关系,相应调整基准应用界面中呈现的界面元素的物理尺寸,获得在不同终端设备上展示的适配应用界面。
由于不同终端设备对应的待适配分辨率是不同的,故不同待适配分辨率与基准分辨率的比例关系也是不同的,因此,采用不同的比例关系,对同一基准应用界面中的界面元素进行物理尺寸调整获得的适配应用界面也是不同的,即在不同终端设备上呈现的适配应用界面中的界面元素的物理尺寸不同,进而影响应用程序界面的视觉呈现效果。
考虑到一个待适配屏幕往往对应待适配分辨率和待适配点密度两个属性。通过待适配屏幕展示适配应用界面时,适配应用界面中的界面元素的物理尺寸不仅与待适配分辨率相关,同时与待适配点密度相关。因此,需要结合待适配分辨率与基准分辨率之间的关联关系,以及待适配点密度与基准点密度之间的关联关系,对界面元素的物理尺寸进行调整,才能保证适配应用界面中呈现的界面元素的物理尺寸与基准应用界面中相应呈现的界面元素的物理尺寸相同,进而实现不同终端设备上呈现的适配应用界面中的界面元素的物理尺寸相同的效果。
为了进一步简化对界面元素的物理尺寸进行调整的过程,本申请基于分辨率和点密度这两个参数,获得一个虚拟像素尺寸。然后针对每个界面元素,以界面元素的基准虚拟像素尺寸与界面元素的适配虚拟像素尺寸相等为基准,对基准应用界面的界面元素的物理尺寸进行调整,获得适配应用界面,以实现适配应用界面中呈现的界面元素的物理尺寸与基准应用界面中相应呈现的界面元素的物理尺寸相同。
基于上述思路,本申请实施例提供了一种应用界面适配的方法,该方法包括:获取在待适配屏幕上对待展示应用的触发操作,响应于该触发操作,通过待适配屏幕展示待展示应用的适配应用界面,其中,适配应用界面中包括多个界面元素,针对多个界面元素中的每个界面元素,界面元素在适配应用界面中呈现的第一物理尺寸与在基准应用界面中呈现的第二物理尺寸相同;以及,界面元素的第一物理尺寸是基于界面元素在所配应用界面中的适配虚拟像素尺寸以及待适配屏幕的待适配点密度确定的,适配虚拟像素尺寸与界面元素在基准应用界面中的基准虚拟像素尺寸相同。
本申请实施例中,以界面元素的基准虚拟像素尺寸与界面元素的适配虚拟像素尺寸相等为基准,结合界面元素的虚拟像素尺寸、像素尺寸、点密度三者之间的关系,确定适配应用界面中的界面元素的第一物理尺寸,以保证适配应用界面中的每个界面元素在适配应用界面中呈现的第一物理尺寸,与相应的界面元素在基准应用界面中相应呈现的第二物理尺寸相同,从而使得待适配屏幕上展示的适配应用界面中的各个界面元素,与基准屏幕上展示的基准应用界面中相应的各个界面元素的视觉呈现效果相同,也保证了不同终端设备上呈现的适配应用界面中的界面元素的视觉呈现效果相同,进而提高对象的使用体验。
参考图1,其为本申请实施例适用的一种系统架构图,该系统架构至少包括终端设备101和服务器102,终端设备101的数量可以是一个或多个,服务器102的数量也可以是一个或多个,本申请对终端设备101和服务器102的数量不做具体限定。
终端设备101中预先安装待展示应用,其中,待展示应用的类型可以是客户端应用、网页版应用、小程序应用等。待展示应用例如可以是地图应用、车联网应用、即时通信应用、购物应用等。终端设备101可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能家电、智能语音交互设备、智能车载设备等,但并不局限于此。
服务器102是待展示应用的后台服务器,服务器102可以是独立的物理服务器,也可以是多个物理服务器构成的服务器集群或者分布式系统,还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network,CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。终端设备101与服务器102可以通过有线或无线通信方式进行直接或间接地连接,本申请在此不做限制。
本申请实施例中调整界面布局的方法可以是终端设备101执行,也可以是服务器102执行,还也可以由终端设备101与服务器102交互执行。
以终端设备101执行本申请实施例中调整界面布局的方法举例来说,包括以下步骤:
终端设备101预先安装待展示应用,终端设备101获取在待适配屏幕上对待展示应用的触发操作,从而响应于该触发操作,通过待适配屏幕展示待展示应用的适配应用界面,其中,适配应用界面中包括多个界面元素,针对多个界面元素中的每个界面元素,该界面元素在适配应用界面中呈现的第一物理尺寸与界面元素在基准应用界面中呈现的第二物理尺寸相同;以及,该界面元素的第一物理尺寸是基于界面元素在适配应用界面中的适配虚拟像素尺寸以及待适配屏幕的待适配点密度确定的,适配虚拟像素尺寸与界面元素在基准应用界面中的基准虚拟像素尺寸相同。
在实际应用中,本申请实施例中的调整界面布局的方法可以应用于地图应用、车联网应用、即时通信应用、购物应用等应用的界面布局调整。
以地图应用举例来说,如图2所示,在基准屏幕上展示基准应用界面,基准屏幕的基准分辨率为1280px*720px,基准屏幕的dpi=160。以界面元素201举例来说,界面元素201为文本“咖啡”,设定界面元素201在基准应用界面呈现的物理尺寸为5cm*2cm。
在第一待适配屏幕上展示第一适配应用界面,第一待适配屏幕的基准分辨率为1920px*720px,基准屏幕的dpi=160。此时,与界面元素201对应的界面元素202在第一适配应用界面中呈现的物理尺寸为5cm*2cm,即同一界面元素在分辨率不同,而dpi相同的两种屏幕上的视觉呈现效果相同。
在第二待适配屏幕上展示第二适配应用界面,第二待适配屏幕的基准分辨率为1280px*720px,基准屏幕的dpi=320。此时,与界面元素201对应的界面元素203在第二适配应用界面中呈现的物理尺寸为5cm*2cm,即同一界面元素在分辨率相同,而dpi不同的两种屏幕上的视觉呈现效果相同。
需要说明的,在上述实施例场景描述中,仅以基准应用界面中的界面元素201进行举例说,其他界面元素的调整方式与界面元素201相同。另外,同一界面元素在分辨率和dpi均不同的两种屏幕上的视觉呈现效果也是相同的,此处不再赘述。
基于图1所示的系统架构图,本申请实施例提供了一种调整界面布局的方法的流程,如图3所示,该方法的流程由计算机设备执行,该计算机设备可以是图1所示的终端设备101和/或服务器102,包括以下步骤:
S301,获取在待适配屏幕上对待展示应用的触发操作。
在本申请实施例中,待展示应用可以地图应用、车联网应用、即时通信应用、购物应用等。在一些实施例中,为个更好地承载业务,降低待展示应用的页面耦合性,本申请实施例中,将待展示应用拆分为多个业务层级,即待展示应用包括多个独立的业务层级,多个独立的业务层级包括通知层、支线层、主线层、控件层和底图层,每个业务层级承载不同的业务功能,并预先设定各个业务层级之间的跳转逻辑和公共关系。
在本申请实施例中,与不同业务相关的界面元素位于不同的业务层级,在对界面元素进行物理尺寸调整时,只需要对界面元素关联的业务层级进行调整即可,不需要对所有的业务层级进行调整,从而提高了界面元素调整的灵活性以及应用界面的耦合性。
以待展示应用为地图应用举例来说,如图4所示,将地图应用划分为五个业务层级,从上到下依次为通知层401、支线层402、主线层403、控件层404和底图层405。
通知层401主要承载具有全局属性的通知和功能,悬浮则支线层之上,不影响其他业务层的布局。通知层401的表现形式是对话框、活动弹窗等。
支线层402主要承载临时出现的支线任务。支线任务通常是单一任务流,有独立的操作页面,可以从任何场景唤起,支线任务完成后即退出当前支线页面。
主线层403,也称为功能层或场景层,主线层承载不同业务场景下的功能。比如,导航场景下的导航功能,路径规划场景的路径规划功能等。
控件层404主要承载通过控件进行交互的功能。比如,在底图交互功能中,控件层提供底图全览、底图缩放等控件。在导航场景下,提供导航相关的控件。
底图层405主要承载基础的地图信息和诱导信息,如路网、路况和导航路线等。
本申请实施例中,对待展示应用进行业务分层,获得多个独立的业务层级,降低了业务耦合,故在对界面元素进行物理尺寸调整时,只需要对界面元素关联的业务层级进行调整即可,不需要对所有的业务层级进行调整,从而提高了界面元素调整的灵活性。其次,对待展示应用进行业务分层提高了业务逻辑的清晰程序,促进技术层面上的基础组件的落地,降低技术层面的维护成本,从而达到降本增效的目标。
可以理解的是,触发操作可以是能够触发展示待展示应用的操作,例如触发操作可以是点击操作、双击操作、滑动操作等。
S302,响应于触发操作,通过待适配屏幕展示待展示应用的适配应用界面。
其中,适配应用界面中包括多个界面元素,针对多个界面元素中的每个界面元素,界面元素在适配应用界面中呈现的第一物理尺寸与在基准应用界面中呈现的第二物理尺寸相同;界面元素的第一物理尺寸是基于界面元素在适配应用界面中的适配虚拟像素尺寸以及待适配屏幕的待适配点密度确定的,适配虚拟像素尺寸与界面元素在基准应用界面中的基准虚拟像素尺寸相同。
待适配屏幕的待适配分辨率可以与基准屏幕的基准分辨率相同,也可以与基准屏幕的基准分辨率不同。待适配屏幕的待适配点密度可以与基准屏幕的基准点密度相同,也可以与基准屏幕的基准点密度不同。
在一些实施例中,界面元素可以是文本、图像、视频等。每个所述第一物理尺寸,是基于界面元素在适配应用界面中的适配虚拟像素尺寸,以及待适配屏幕的待适配点密度确定的,适配虚拟像素尺寸与界面元素在基准应用界面中的基准虚拟像素尺寸相同,其中,界面元素的基准虚拟像素尺寸是将界面元素的像素尺寸和基准应用界面的基准点密度代入到上述公式(2)获得的。
本申请实施例中,以界面元素的基准虚拟像素尺寸与界面元素的适配虚拟像素尺寸相等为基准,结合界面元素的虚拟像素尺寸、像素尺寸、点密度三者之间的关系,确定适配应用界面中的界面元素的第一物理尺寸,以保证适配应用界面中的每个界面元素在适配应用界面中呈现的第一物理尺寸,与相应的界面元素在基准应用界面中相应呈现的第二物理尺寸相同,从而使得待适配屏幕上展示的适配应用界面中的各个界面元素,与基准屏幕上展示的基准应用界面中相应的各个界面元素的视觉呈现效果相同,也保证了不同终端设备上呈现的适配应用界面中的界面元素的视觉呈现效果相同,进而提高对象的使用体验。
在一种可能的实现方式中,在上述S302中,每个界面元素在适配应用界面中呈现的第一物理尺寸是采用以下方式确定的:
基于界面元素的适配虚拟像素尺寸和适配应用界面的待适配点密度,确定界面元素在适配应用界面中对应的适配像素尺寸。再基于界面元素的适配像素尺寸,确定界面元素在适配应用界面中呈现的第一物理尺寸。
需要说明的是,虚拟像素也称之为设备无关像素。由于基准应用界面中的各个界面元素,是以虚拟像素为度量单位设计的,即界面元素在基准应用界面中的基准虚拟像素尺寸,决定了界面元素在基准应用界面中呈现的第二物理尺寸。
为了保证界面元素在适配应用界面中呈现的第一物理尺寸与在基准应用界面中呈现的第二物理尺寸相同,界面元素在适配应用界面中的适配虚拟像素尺寸,需要与界面元素在基准应用界面中的基准虚拟像素尺寸相同。将适配虚拟像素尺寸和待适配屏幕的待适配点密度,代入上述公式(2),可以获得界面元素在适配应用界面中对应的适配像素尺寸。之后再基于单位像素的物理尺寸以及界面元素的适配像素尺寸,可以获得界面元素在适配应用界面中呈现的第一物理尺寸。
举例来说,如图5所示,在基准屏幕上展示基准应用界面,基准屏幕的基准分辨率为1280px*720px,基准屏幕的dpi=160,单位像素的物理尺寸为1/160*1/160(单位为英尺)。此时,界面元素501为文本“范围”,界面元素501在基准应用界面中的基准虚拟像素尺寸为10dp*10dp,基准像素尺寸为10px*10px,则界面元素501在基准应用界面中呈现的第二物理尺寸为1/16*1/16(单位为英尺)。
在待适配屏幕上展示适配应用界面,待适配屏幕的待适配分辨率为1920px*720px,待适配屏幕的dpi=160,单位像素的物理尺寸为1/160*1/160(单位为英尺)。此时,与界面元素501对应的界面元素502在适配应用界面中的适配虚拟像素尺寸与界面元素501的基 准虚拟像素尺寸相同,即为10dp*10dp。将界面元素502的适配虚拟像素尺寸和待适配屏幕的dpi代入上述公式(2),获得界面元素502的适配像素尺寸为10px*10px。
基于单位像素的物理尺寸(1/160*1/160)以及适配像素尺寸(10px*10px),可以获得界面元素在适配应用界面中呈现的第一物理尺寸为1/16*1/16(单位为英尺),即界面元素501在适配应用界面中呈现的第一物理尺寸,与相应的界面元素502在基准应用界面中相应呈现的第二物理尺寸相同。
举例来说,如图6所示,在基准屏幕上展示基准应用界面,基准屏幕的基准分辨率为1280px*720px,基准屏幕的dpi=160,单位像素的物理尺寸为1/160*1/160(单位为英尺)。此时,界面元素501为文本“范围”,界面元素501在基准应用界面中的基准虚拟像素尺寸为10dp*10dp,基准像素尺寸为10px*10px,则界面元素501在基准应用界面中呈现的第二物理尺寸为1/16*1/16(单位为英尺)。
在待适配屏幕上展示适配应用界面,待适配屏幕的基准分辨率为1280px*720px,待适配屏幕的dpi=320,每个像素的物理尺寸为1/320*1/320(单位为英尺)。此时,与界面元素501对应的界面元素503在适配应用界面中的适配虚拟像素尺寸与界面元素501的基准虚拟像素尺寸相同,即为10dp*10dp。将界面元素503的适配虚拟像素尺寸和待适配屏幕的dpi代入上述公式(2),获得界面元素503在适配应用界面中的适配像素尺寸为20px*20px。
基于单位像素的物理尺寸(1/320*1/320)以及界面元素503的适配像素尺寸(20px*20px),可以获得界面元素在适配应用界面中呈现的第一物理尺寸为1/16*1/16(单位为英尺),即界面元素501在适配应用界面中呈现的第一物理尺寸,与相应的界面元素503在基准应用界面中相应呈现的第二物理尺寸相同。
本申请实施例中,通过将界面元素的适配虚拟像素尺寸设置为界面元素在基准应用界面中对应的基准虚拟像素尺寸,以保证界面元素在适配应用界面中呈现的物理尺寸,与界面元素在基准应用界面中呈现的物理尺寸相同,然后基于界面元素的适配虚拟像素尺寸和待适配屏幕的待适配点密度,确定界面元素占用的像素数量,再基于像素数量以及单位像素的物理尺寸,确定界面元素在适配应用界面中呈现的第一物理尺寸,从而提高调整界面元素的物理尺寸的效率,也提高了界面元素的视觉呈现效果。
在一种可能的实现方式中,在实际应用场景中,存在屏幕宽度范围截然不同的两类屏幕,一类是平板电脑屏幕、车载屏幕等大宽度屏幕,该类屏幕的屏幕宽度范围为600dp~1080dp。另一类是手机屏幕等小宽度屏幕,该类屏幕的屏幕宽度范围为300dp~500dp。在这两种屏幕宽度范围截然不同的两类屏幕下,若通过一个基准应用界面进行适配,将会导致在横向或者纵向出现内容超出范围的情况。在这种情况下,为了避免针对不同屏幕宽度范围的屏幕,分别设计不同的基准应用界面时造成资源浪费,本申请实施例中,在针对待适配屏幕进行应用界面适配之前,可以先对待适配屏幕的原始点密度进行标准化处理,获得待适配点密度,以保证基准应用界面能与待适配屏幕适配,其中,具体采用以下方式确定待适配屏幕的待适配点密度:
采用基于待适配屏幕的待适配分辨率和待适配屏幕的原始屏幕密度,确定待适配屏幕的有效宽度和有效高度。然后基于有效宽度与基准屏幕的基准宽度之间的第一差异度,以及有效高度与基准屏幕的基准高度之间的第二差异度,确定待适配屏幕的标准化调整方向。基于标准化调整方向,对待适配屏幕的原始像素密度进行调整,获得待适配点密度。
在一种可能的实现方式中,待适配屏幕的待适配分辨率包括待适配屏幕的待适配宽度和待适配高度,其中,待适配宽度表示待适配屏幕在宽度方向上的像素数量,待适配高度表示待适配屏幕在高度方向上的像素数量。将待适配屏幕的待适配宽度与原始屏幕密度的比值,作为有效宽度,将待适配屏幕的待适配高度与原始屏幕密度的比值,作为有效高度。待适配屏幕的有效宽度和有效高度组成了待适配屏幕的适配虚拟像素尺寸。
举例来说,设定待适配屏幕的待适配分辨率为1920px*720px,原始屏幕密度为1,则待适配屏幕的待适配宽度=1920px,待适配屏幕的待适配高度=720px,待适配屏幕的有效宽度=1920dp,待适配屏幕的有效高度=720dp。
本申请实施例中,通过对待适配屏幕进行标准化调整,使得不同宽度的屏幕均可以与一个基准应用界面适配,避免了重复设计基准应用界面带来的资源浪费,同时保证了不同待适配屏幕上展示的界面元素的物理尺寸的统一性,提高了界面元素的视觉呈现效果。
在一种可能的实施方式中,基于有效宽度与基准宽度的比值,确定第一差异度;以及基于有效高度与基准高度的比值,确定第二差异度。
基准屏幕的基准分辨率包括基准屏幕的基准宽度和基准高度,其中,基准宽度表示基准屏幕在宽度方向上的像素数量,基准高度表示待适配屏幕在高度方向上的像素数量。由于基准屏幕的基准屏幕密度默认为1,则基准屏幕的基准宽度与基准屏幕的有效宽度相同,基准屏幕的基准高度与基准屏幕的有效宽度相同。基准屏幕的有效宽度和有效高度组成了基准屏幕的基准虚拟像素尺寸。
若第一差异度或第二差异度小于1,则说明待适配屏幕无法直接与基准应用界面进行适配,需要预先对待适配屏幕进行标准化调整,即采用基于第一差异度以及第二差异度,确定待适配屏幕的标准化调整方向,并基于标准化调整方向,对待适配屏幕的原始像素密度进行调整,获得待适配点密度。
若第一差异度或第二差异度均大于1,则说明待适配屏幕可以直接与基准应用界面进行适配,故不需要对待适配屏幕进行标准化调整。
在基于第一差异度和第二差异度选择标准化调整方向时,本申请至少提供以下实施方式:
若第一差异度大于第二差异度,则将高度方向作为待适配屏幕的标准化调整方向;若第一差异度小于或等于第二差异度,则将宽度方向作为待适配屏幕的标准化调整方向。
本申请实施例中,基于待适配屏幕的有效宽度与基准屏幕的基准宽度之间的大小,以及待适配屏幕的有效高度与基准屏幕的基准高度之间的大小关系,确定待适配屏幕是否能与基准应用界面进行适配,若不能,则从宽度方向和长度方向中选取差异程度更大的方向作为标准化调整方向,以保证在待适配屏幕中展示适配应用界面时,横向或者纵向均不会出现内容超出范围的情况。
在一种可能的实现方式中,在基于标准化调整方向,对待适配屏幕的原始像素密度进行调整,获得待适配点密度时,本申请实施例至少提供以下实施方式:
基于待适配分辨率,确定待适配屏幕在标准化调整方向上对应的待适配像素数量。然后基于待适配像素数量,以及基准屏幕在标准化调整方向上对应的基准像素数量,对原始屏幕密度进行调整,获得待适配屏幕密度。再基于待适配屏幕密度以及基准屏幕的基准点密度,对原始像素密度进行调整,确定待适配点密度。
其中,确定待适配屏幕密度和确定待适配点密度的方式可以有很多,例如可以将待适配像素数量与基准像素数量的比值,作为待适配屏幕密度。然后将待适配屏幕密度与基准点密度的乘积,作为待适配点密度。
举例来说,设定基准屏幕的基准分辨率为1280px*720px,基准屏幕的dpi=160,基准屏幕的基准屏幕密度为1。待适配屏幕的待适配分辨率为3200px*1440px,待适配屏幕的dpi=480,待适配屏幕的原始屏幕密度为3。
计算待适配屏幕的待适配宽度与原始屏幕密度的比值,获得待适配屏幕的有效宽度为1066dp;计算待适配屏幕的待适配高度与原始屏幕密度的比值,获得待适配屏幕的有效高度为480dp。
计算待适配屏幕的有效宽度与基准屏幕的基准宽度的比值,获得第一差异度为0.833;计算待适配屏幕的有效高度与基准屏幕的基准高度的比值,获得第二差异度为0.667。由于第一差异度和第二差异度均小于1,因此,需要对待适配屏幕进行标准化调整。由于第一差异度大于第二差异度,则将高度方向作为标准化调整方向。
计算待适配屏幕在高度方向上的待适配像素数量,与基准屏幕在高度方向上的基准像素数量的比值,获得待适配屏幕密度为2。然后计算待适配屏幕密度与基准点密度的乘积,获得待适配屏幕的待适配点密度为320。此时,调整后的待适配屏幕的有效宽度为1600dp,调整后的待适配屏幕的有效高度为720dp。相应地,基于调整后的有效宽度和有效高度计算获得调整后的第一差异度和第二差异度后,此时,调整后的第一差异度和第二差异度均大于1,即此时的待适配屏幕可以与基准应用界面进行适配,获得适配应用界面。
本申请实施例中,通过对待适配屏幕进行标准化调整,使得不同宽度的屏幕均可以与一个基准应用界面适配,避免了重复设计基准应用界面带来的资源浪费,同时保证了不同待适配屏幕上展示的界面元素的物理尺寸的统一性,提高了界面元素的视觉呈现效果。
在一种可能的实现方式中,适配应用界面还包括多个适配信息引导区,每个适配信息引导区用于展示与一类引导信息关联的界面元素。
针对每个适配信息引导区,适配信息引导区在适配应用界面中呈现的物理宽度是根据适配信息引导区的初步像素尺寸和待适配屏幕的待适配宽度确定的,其中,适配信息引导区的初步像素尺寸是基于相应的基准信息引导区在基准应用界面中的基准虚拟像素尺寸以及待适配点密度确定的。
适配信息引导区各自在适配应用界面中呈现的物理高度,以及多个适配信息引导区各自展示的界面元素的适配数量,是根据适配信息引导区的初步像素尺寸以及待适配屏幕的待适配高度确定的。
通常情况下,应用界面可以根据功能模块预先划分为多个功能区,其中,功能区指应用界面中承载界面元素的信息容器,多个功能区包括控件区和多个信息引导区,多个信息引导区包括动态信息引导区、底图引导区等。多个功能区在应用界面的位置可以根据实际情况进行设置。
举例来说,如图7所示,应用界面中包括动态信息引导区701、底图引导区702和控件区703。
在对基准应用界面中的界面元素进行调整,获得适配应用界面中的界面元素的过程中,采用相同的方式对基准应用界面中的各个基准功能区进行调整,获得适配应用界面中的对应初步像素尺寸的各个适配功能区,适配功能区包括适配信息引导区、适配控件区等。其中,基于基准功能区的基准虚拟像素尺寸,以及待适配屏幕的待适配点密度,确定适配功能区的初步像素尺寸。之后再分别对适配功能区的初步像素尺寸进行动态调整,获得适配应用界面中最终的适配功能区。
需要说明的是,基于基准功能区的基准虚拟像素尺寸,以及待适配屏幕的待适配点密度,确定适配功能区的初步像素尺寸的过程,与基于界面元素在基准应用界面中的基准虚拟像素尺寸,以及待适配屏幕的待适配点密度,确定界面元素的适配像素尺寸的方法类似,此处不再赘述。在对适配功能区的初步像素尺寸进行动态调整时,仅仅调整适配功能区这一信息容器的像素尺寸,并不会调整适配功能区中的界面元素的像素尺寸,因此,适配功能区的物理尺寸与相应的基准功能区的物理尺寸可能是不相同的,但是适配功能区中的界面元素的物理尺寸,与相应的基准功能区中的界面元素的物理尺寸始终是相同的。
本申请实施例中,在对基准应用界面中的界面元素进行调整,获得适配应用界面中的界面元素的过程中,相应对基准应用界面中的基准信息引导区进行调整,获得适配应用界面中初步的适配信息引导区,之后再对初步的适配信息引导区进行动态调整,使得适配信息引导区与适配应用界面更加匹配,从而提升视觉呈现效果。
在一些实施例中,每个适配信息引导区在适配应用界面中呈现的物理宽度,是采用以下方式确定的:
基于基准宽度范围和基准屏幕的基准点密度,确定适配信息引导区的宽度调整范围。基于初步像素尺寸,确定适配信息引导区的初步像素宽度。然后基于待适配屏幕的待适配宽度以及宽度调整范围,对初步像素宽度进行调整,获得适配信息引导区的最终像素宽度,并基于最终像素宽度,确定适配信息引导区在适配应用界面中呈现的物理宽度。
在一种可能的实现方式中,可以设置一个基准宽度范围,该基准宽度范围对应一个预设点密度,比如(预设dpi=160)。然后将基准宽度范围对应的预设点密度和基准屏幕的基准点密度的比值,作为基准宽度范围的调整比例;再将基准宽度范围的上下边界值,分别与调整比例相乘,获得适配信息引导区的宽度调整范围。
基于待适配屏幕的待适配宽度,按照预设选取规则,从宽度调整范围中选取一个宽度值,作为该适配信息引导区在适配应用界面中的最终像素宽度;再将最终像素宽度与单位像素的物理尺寸相乘,获得该适配信息引导区在适配应用界面中呈现的物理宽度,其中, 待适配屏幕的待适配宽度越小,适配信息引导区在适配应用界面中呈现的物理宽度越小;待适配屏幕的待适配宽度越大,适配信息引导区在适配应用界面中呈现的物理宽度越大。
举例来说,如图8所示,设定基准屏幕的基准分辨率为1920px*720px,基准屏幕的基准点密度为160,基准宽度范围为480px~560px,基准宽度范围对应的预设点密度为160。
由于基准屏幕的基准点密度与基准宽度范围对应的预设点密度相同,则基准宽度范围的调整比例为1,基于调整比例可以相应获得宽度调整范围为480px~560px,基准信息引导区801的像素宽度为560px。
预设选取规则如下:
当屏幕宽度小于1440px时,适配信息引导区在适配应用界面中的最终像素宽度为宽度调整范围的最小宽度MinN2。
当屏幕宽度大于等于1440px,且小于1660px时,适配信息引导区在适配应用界面中的最终像素宽度为宽度调整范围的最小宽度MinN2与最大宽度MaxN2的平均值。
当屏幕宽度大于等于1660px时,适配信息引导区在适配应用界面中的最终像素宽度为宽度调整范围的最大宽度MaxN2。
设定待适配屏幕的待适配分辨率为1560px*720px,待适配屏幕的待适配点密度为160。由于待适配屏幕的待适配点密度与基准屏幕的基准点密度相同,因此适配信息引导区的初步像素尺寸,与基准信息引导区的基准像素尺寸相同。
由于待适配屏幕的待适配宽度为1560px,根据上述选取规则可以确定适配信息引导区802在适配应用界面中的最终像素宽度为520px,则将适配信息引导区802的初步像素宽度560px调整为最终像素宽度520px,最后将最终像素宽度与单位像素的物理宽度相乘,获得该适配信息引导区在适配应用界面中呈现的物理宽度。
举例来说,如图9所示,设定基准屏幕的基准分辨率为1920px*720px,基准屏幕的基准点密度为200,基准宽度范围为480px~560px,基准宽度范围对应的预设点密度为160。
由于基准屏幕的基准点密度与基准宽度范围对应的预设点密度的比值为1.25,则基准宽度范围的调整比例为1.25,基于调整比例可以相应获得宽度调整范围为600px~700px,基准信息引导区901的像素宽度为700px。预设选取规则如下:
当屏幕宽度小于1440px时,适配信息引导区在适配应用界面中的最终像素宽度为宽度调整范围的最小宽度MinN。
当屏幕宽度大于等于1440px,且小于1660px时,适配信息引导区在适配应用界面中的最终像素宽度为宽度调整范围的最小宽度MinN与最大宽度MaxN的平均值。
当屏幕宽度大于等于1660px时,适配信息引导区在适配应用界面中的最终像素宽度为宽度调整范围的最大宽度MaxN。
设定待适配屏幕的待适配分辨率为1560px*720px,待适配屏幕的dpi=200,由于待适配屏幕的待适配点密度与基准屏幕的基准点密度相同,因此适配信息引导区的初步像素尺寸,与基准信息引导区的基准像素尺寸相同。
由于待适配屏幕的待适配宽度1560px,根据上述选取规则可以确定适配信息引导区902在适配应用界面中的最终像素宽度为650px,则将适配信息引导区902的初步像素宽度 700px调整为最终像素宽度650px,最后将最终像素宽度与单位像素的物理宽度相乘,获得该适配信息引导区在适配应用界面中呈现的物理宽度。
本申请实施例中,基于基准屏幕的基准宽度以及待适配屏幕的待适配宽度之间的关联关系,对适配应用界面中呈现的适配信息引导区域进行左右宽度适配,使得适配信息引导区的尺寸与适配应用界面更加匹配,从而提升适配应用界面的视觉呈现效果。
在一些实施例中,上述多个适配信息引导区位于待展示应用的各个业务层级中的主线层;每个适配信息引导区在适配应用界面中呈现的物理宽度,是在主线层中,根据适配信息引导区的初步像素尺寸和待适配屏幕的待适配宽度确定的。
每个适配信息引导区在适配应用界面中呈现的物理高度,以及每个适配信息引导区展示的界面元素的适配数量,是在主线层中,根据适配信息引导区的初步像素尺寸以及待适配屏幕的待适配高度确定的。
在一些实施例中,每个适配信息引导区在适配应用界面中呈现的物理高度,是采用以下方式确定的:
基于初步像素尺寸,确定适配信息引导区的初步像素高度。然后基于待适配屏幕的待适配高度和基准信息引导区的展示状态信息,确定初步像素高度的高度调整值。基于高度调整值和初步像素高度,确定适配信息引导区的最终像素高度,并基于最终像素高度,确定适配信息引导区在适配应用界面中呈现的物理高度。
在一些实施例中,每个适配信息引导区展示的界面元素的适配数量是采用以下方式确定的:
基于待适配高度和基准信息引导区的展示状态信息,确定适配信息引导区的元素调整数量。然后基于元素调整数量和基准信息引导区在基准应用界面中展示的界面元素的基准数量,确定适配信息引导区在适配应用界面中展示的界面元素的适配数量。
若基准信息引导区的展示状态信息表征基准信息引导区没有展示全部的界面元素,则相应的适配信息引导区可以通过增大展示区域来展示更多的界面元素。
在一种可能的实施方式中,当适配应用界面的待适配高度,可以展示初步像素高度的适配信息引导区,且还存在额外可用于展示适配信息引导区的空白区域,则基于空白区域的像素高度,确定初步像素高度的高度调整值以及适配信息引导区的元素调整数量,此时,高度调整值和元素调整数量均大于0。
当适配应用界面的待适配高度,可以展示初步像素高度的适配信息引导区,且不存在额外可用于展示适配信息引导区的空白区域,则初步像素高度的高度调整值以及适配信息引导区的元素调整数量均为0。
当适配应用界面的待适配高度,无法展示全部的初步像素高度的适配信息引导区时,基于适配信息引导区中无法展示的像素高度,确定初步像素高度的高度调整值以及适配信息引导区的元素调整数量,此时,高度调整值和元素调整数量均小于0。
若基准信息引导区的展示状态表征基准信息引导区已经展示全部的界面元素,则初步像素高度的高度调整值以及适配信息引导区的元素调整数量均为0。
将高度调整值与适配信息引导区的初步像素高度相加,确定该适配信息引导区在适配应用界面中的最终像素高度,之后再将适配信息引导区的最终像素高度与单位像素的物理高度相乘,获得适配信息引导区的呈现的物理高度。将元素调整数量和基准信息引导区在基准应用界面中展示的界面元素的基准数量相加,确定该信息引导区在适配应用界面中展示的界面元素的适配数量。
举例来说,如图10所示,设定基准屏幕的基准分辨率为1920px*720px,基准屏幕的dpi=160,基准信息引导区1001的像素高度为400px,基准信息引导区1001中界面元素的基准数量为4个。
设定待适配屏幕的待适配分辨率为1920px*1080px,待适配屏幕的dpi=160,由于待适配点密度与基准点密度相同,则适配信息引导区1002的初步像素高度与基准信息引导区1001的基准像素高度相同。
设定基准信息引导区1001的展示状态信息,表征基准信息引导区1001没有展示全部的界面元素,且适配应用界面的待适配高度,可以展示初步像素高度的适配信息引导区1002,且还存在额外可用于展示适配信息引导区的空白区域,则基于空白区域的像素高度,确定初步像素高度的高度调整值300px以及适配信息引导区的元素调整数量为3个。
将高度调整值与适配信息引导区1002的初步像素高度相加,确定该适配信息引导区1002在适配应用界面中的最终像素高度700px,之后再将最终像素高度与单位像素的物理高度相乘,获得适配信息引导区1002的呈现的物理高度。将元素调整数量和基准信息引导区1001在基准应用界面中展示的界面元素的基准数量相加,确定适配信息引导区1002在适配应用界面中展示的界面元素的适配数量为7个。在进行上下适配并显示适配信息引导区1002时,高度方向上界面元素之间的间距不发生变化,信息容器会随高度发生变化,增加显示的内容。
本申请实施例中,基于待适配屏幕的待适配高度以及基准信息引导区中的展示状态信息,对适配应用界面中呈现的适配信息引导区进行上下高度适配,使得适配信息引导区中展示的界面元素的数量可以根据待适配屏幕的待适配高度相应调整,从而使适配应用界面的空间可以得到充分利用,既避免了空间浪费,又保证了应用界面的视觉呈现效果。
在一种可能的实现方式中,适配应用界面还包括适配控件区,适配控件区用于展示与操作控件关联的界面元素,多个适配信息引导区中包括适配动态信息引导区。适配控件区在适配应用界面中的最终展示位置是基于空白区域的像素尺寸确定的,空白区域是适配动态信息引导区的下边界与适配应用界面的下边界之间的空白区域。
在一种可能的实现方式中,可以基于基准控件区的基准虚拟像素尺寸,以及待适配屏幕的待适配点密度,确定适配控件区的初步像素尺寸。通常情况下,可以直接将适配控件区的初步像素尺寸直接作为适配控件区的适配像素尺寸进行展示,也可以采用确定上述适配信息引导区的适配像素尺寸类似的方式,确定适配控件区的适配像素尺寸。基于适配控件区的初步像素尺寸以及单位像素的物理尺寸,确定适配控件区在适配应用界面中呈现的物理尺寸。
在一些实施例中,适配控件区位于待展示应用的各个业务层级中的控件层,适配控件区在适配应用界面中的最终展示位置,是在控件层中,基于适配动态信息引导区的下边界,与适配应用界面的下边界之间的空白区域的像素尺寸确定的。
在基准应用界面中,基准动态信息引导区一般显示在最左侧,基准控件区一般展示在基准动态信息引导区的右侧。然而,在车载应用场景中,基准应用界面的左侧靠近驾驶员,是操作和显示的黄金区域。因此,在进行界面适配时,若适配应用界面左侧在展示适配动态信息引导区后,还存在空白区域,则可以将适配控件区移动至适配动态信息引导区的下方进行展示,这样可以很好地利用适配应用界面中的黄金区域,也便于驾驶员操作。
鉴于此,本申请实施例中,若上述空白区域的像素尺寸大于预设阈值,则将空白区域作为适配控件区在适配应用界面中的最终展示位置。若空白区域的像素尺寸小于等于预设阈值,则基于基准动态信息引导区和基准控件区在基准应用界面中的展示位置关系,以及适配动态信息引导区在适配应用界面中的展示位置,确定适配控件区在适配应用界面中的最终展示位置。
在一种可能的实现方式中,当空白区域的像素尺寸大于预设阈值,说明适配动态信息引导区的下边界与适配应用界面的下边界之间的空白区域还可以展示适配控件区,因此,将该空白区域作为适配控件区在适配应用界面中的最终展示位置。
若空白区域的像素尺寸小于或等于预设阈值,则说明适配动态信息引导区的下边界与适配应用界面的下边界之间的空白区域无法展示适配控件区,则基于基准动态信息引导区和基准控件区在基准应用界面中的展示位置关系,确定适配动态信息引导区与适配控件区在适配应用界面中的展示位置关系,然后再基于适配动态信息引导区与适配控件区在适配应用界面中的展示位置关系,以及适配动态信息引导区在适配应用界面中的展示位置,确定适配控件区在适配应用界面中的最终展示位置。
举例来说,如图11所示,设定基准屏幕的基准分辨率为1920px*720px,基准屏幕的dpi=160,基准控件区1101位于基准动态信息引导区1102的右下角。待适配屏幕的待适配分辨率为1920px*1080px,待适配屏幕的dpi=160。
设定待适配屏幕在展示了基准动态信息引导区1102对应的适配动态信息引导区1103的全部内容之后,适配动态信息引导区1103的下边界与适配应用界面的下边界之间存在空白区域,且该空白区域的像素尺寸大于预设阈值,则在适配动态信息引导区1103的下方显示适配控件区1104。
需要说明的是,若适配动态信息引导区1103的下边界与适配应用界面的下边界之间的空白区域的像素尺寸小于等于预设阈值,则在适配动态信息引导区1103的右下角显示适配控件区1104。
本申请实施例中,基于适配应用界面展示适配信息引导区的情况,动态调整适配控件区在适配应用界面中的展示位置,针对屏幕个体差异而增加了对界面细节的把控,更合理的利用了应用界面的空间,也提高了操作的便利性。
为了更好地解释本申请实施例,下面结合具体实施场景介绍本申请实施例提供的一种应用界面适配的方法,该方法的流程可以由图1所示的终端设备101执行,也可以由服务器102执行,还可以由终端设备101与服务器102交互执行,包括以下步骤,如图12所示:
S1201,获取待适配屏幕的待适配分辨率、原始点密度和原始屏幕密度。
S1202,对待适配屏幕进行屏幕标准化调整。
具体地,基于待适配屏幕的待适配分辨率和待适配屏幕的原始屏幕密度,确定待适配屏幕的有效宽度和有效高度。将有效宽度与基准宽度的比值,作为第一差异度;以及将有效高度与基准高度的比值,作为第二差异度。
若第一差异度或所述第二差异度均大于1,则不需要对待适配屏幕进行屏幕标准化调整,直接将待适配屏幕的原始点密度,作为待适配屏幕的待适配点密度。若第一差异度或所述第二差异度小于1,则需要对待适配屏幕进行屏幕标准化调整;对待适配屏幕进行屏幕标准化调整的过程具体如下:
若第一差异度大于第二差异度,则将高度方向作为待适配屏幕的标准化调整方向;若第一差异度小于等于第二差异度,则将宽度方向作为待适配屏幕的标准化调整方向。基于待适配屏幕的待适配分辨率,确定待适配屏幕在标准化调整方向上对应的待适配像素数量。将待适配像素数量与基准屏幕在标准化调整方向上的基准像素数量的比值,作为待适配屏幕密度。然后将待适配屏幕密度与基准屏幕的基准点密度的乘积,作为待适配点密度。
S1203,业务分层。
具体地,将待展示应用拆分为多个业务层级,多个独立的业务层级包括通知层、支线层、主线层、控件层和底图层,每个业务层级承载不同的业务功能,并预先设定各个业务层级之间的跳转逻辑和公共关系。
S1204,物理适配。
针对应用界面中的界面元素,可以将界面元素的基准虚拟像素尺寸,作为界面元素在适配应用界面中的适配虚拟像素尺寸,然后基于界面元素的适配虚拟像素尺寸和待适配屏幕的待适配点密度,确定界面元素在适配应用界面中的适配像素尺寸。基于界面元素的适配像素尺寸以及待适配屏幕中单位像素的物理尺寸,确定界面元素在适配应用界面中呈现的物理尺寸。此时,界面元素在适配应用界面中呈现的物理尺寸,与界面元素在基准应用界面中呈现的物理尺寸相同。
在一种可能的实现方式中,针对应用界面中的功能区,功能区指应用界面中承载界面元素的信息容器,一个功能区中包括一个或多个界面元素,功能区可以是信息引导区、控件区等。以信息引导区展开来说,将基准信息引导区的基准虚拟像素尺寸,作为相应的适配信息引导区在适配应用界面中的适配虚拟像素尺寸,然后基于适配信息引导区的适配虚拟像素尺寸和待适配屏幕的待适配点密度,确定适配信息引导区在适配应用界面中的初步像素尺寸。对其他功能区进行物理适配的方法与对信息引导区进行物理适配的方法相同,此处不再赘述。
S1205,动态调整。
在物理适配,获得适配功能区的初步像素尺寸之后,还需要对适配功能区的初步像素尺寸进行动态调整,获得适配功能区的适配像素尺寸,适配功能区包括适配信息引导区、适配控件区等。
以适配信息引导区展开来说,基于初步像素尺寸,确定适配信息引导区的初步像素宽度和初步像素高度。基于基准屏幕的基准宽度、基准屏幕的基准点密度和待适配屏幕的待适配点密度,确定适配信息引导区的宽度调整范围。然后基于待适配屏幕的待适配宽度以及宽度调整范围,对初步像素宽度进行调整,获得适配信息引导区的最终像素宽度。然后基于待适配屏幕的待适配高度和基准信息引导区的展示状态信息,确定初步像素高度的高度调整值和适配信息引导区的元素调整数量。基于高度调整值和初步像素高度,确定适配信息引导区的最终像素高度。然后基于适配信息引导区的最终像素宽度和最终像素高度,获得适配信息引导区的适配像素尺寸。
基于适配信息引导区的适配像素尺寸以及待适配屏幕中单位像素的物理尺寸,确定适配信息引导区在适配应用界面中呈现的物理尺寸。此时,由于适配信息引导区的适配像素尺寸与适配信息引导区的初步像素尺寸可能是不同的,因此,适配信息引导区在适配应用界面中呈现的物理尺寸,与适配信息引导区在基准应用界面中呈现的物理尺寸也可能是不同的。
需要说明的是,在对适配信息引导区进行动态调整时,仅调整适配信息引导区这一信息容器的像素尺寸,并不会调整适配信息引导区中的界面元素的像素尺寸。另外,由于适配信息引导区位于图4所示的各个业务层级中的主线层403,因此,在对适配信息引导区进行动态调整时,只需要调整主线层403中的适配信息引导区,而不需要调整其他业务层。
另外,在调整适配信息引导区的初步像素高度时,基于待适配屏幕的待适配高度和基准信息引导区的展示状态信息,确定适配信息引导区的元素调整数量。然后基于元素调整数量和基准信息引导区在基准应用界面中展示的界面元素的基准数量,确定适配信息引导区在适配应用界面中展示的界面元素的适配数量,并在适配信息引导区中展示适配数量的界面元素。
针对适配控件区,采用确定上述适配信息引导区的适配像素尺寸相同的方式,确定适配控件区的适配像素尺寸之后,若位于待适配屏幕最左侧的适配动态信息引导区的下边界与适配应用界面的下边界之间的空白区域的像素尺寸大于预设阈值,则在适配动态信息引导区的下方展示适配控件区。
另外,在对适配控件区进行动态调整时,仅调整适配控件区这一信息容器的像素尺寸,并不会调整适配控件区中的界面元素的像素尺寸。由于适配控件区位于图4所示的各个业务层级中的控件层403,因此,在对适配控件区进行动态调整时,只需要调整控件层403中的适配控件区,而不需要调整其他业务层。
本申请实施例中,以界面元素的基准虚拟像素尺寸与界面元素的适配虚拟像素尺寸相等为基准,结合界面元素的虚拟像素尺寸、像素尺寸、点密度三者之间的关系,确定适配应用界面中的界面元素的第一物理尺寸,以保证适配应用界面中的每个界面元素在适配应用界面中呈现的第一物理尺寸,与相应的界面元素在基准应用界面中相应呈现的第二物理 尺寸相同,从而使得待适配屏幕上展示的适配应用界面中的各个界面元素,与基准屏幕上展示的基准应用界面中相应的各个界面元素的视觉呈现效果相同,也保证了不同终端设备上呈现的适配应用界面中的界面元素的视觉呈现效果相同,进而提高对象的使用体验。其次,通过对待适配屏幕进行标准化调整,使得一套基准应用界面,可以满足车载、平板和手机等不同屏幕的适配要求,避免了重复设计基准应用界面带来的资源浪费。另外在对应用界面中的功能区进行物理适配之后,进一步对功能区进行动态调整(包括左右适配和上下适配),并调整某些功能区在应用界面中的展示位置,增加了对细节的把控,更合理的利用了应用界面的空间。
基于相同的技术构思,本申请实施例提供了一种应用界面适配的装置的结构示意图,如图13所示,该装置1300包括:
处理模块1301,用于获取在待适配屏幕上对待展示应用的触发操作;
展示模块1302,用于响应于所述触发操作,通过所述待适配屏幕展示所述待展示应用的适配应用界面,其中,所述适配应用界面中包括多个界面元素,针对所述多个界面元素中的每个界面元素,所述界面元素在所述适配应用界面中呈现的第一物理尺寸与在基准应用界面中呈现的第二物理尺寸相同;所述界面元素的第一物理尺寸是基于所述界面元素在所述适配应用界面中的适配虚拟像素尺寸以及所述待适配屏幕的待适配点密度确定的,所述适配虚拟像素尺寸与所述界面元素在基准应用界面中的基准虚拟像素尺寸相同。
在一种可能的实现方式中,
所述处理模块1301具体用于:
基于所述界面元素的适配虚拟像素尺寸和所述待适配点密度,确定所述界面元素在所述适配应用界面中的适配像素尺寸;
基于所述界面元素的适配像素尺寸,确定所述界面元素在所述适配应用界面中呈现的第一物理尺寸。
在一种可能的实现方式中,所述处理模块1301还用于:
基于所述待适配屏幕的待适配分辨率和所述待适配屏幕的原始屏幕密度,确定所述待适配屏幕的有效宽度和有效高度;
基于所述有效宽度与所述基准屏幕的基准宽度之间的第一差异度,以及所述有效高度与所述基准屏幕的基准高度之间的第二差异度,确定所述待适配屏幕的标准化调整方向;
基于所述标准化调整方向,对所述待适配屏幕的原始像素密度进行调整,获得待适配点密度。
在一种可能的实现方式中,所述处理模块1301还用于:
基于所述有效宽度与所述基准屏幕的基准宽度之间的第一差异度,以及所述有效高度与所述基准屏幕的基准高度之间的第二差异度,确定所述待适配屏幕的标准化调整方向之前,基于所述有效宽度与所述基准宽度的比值,确定第一差异度;以及基于所述有效高度与所述基准高度的比值,确定第二差异度;
确定所述第一差异度或所述第二差异度小于1。
在一种可能的实现方式中,所述处理模块1301具体用于:
若所述第一差异度大于所述第二差异度,则将高度方向作为所述待适配屏幕的标准化调整方向;
若所述第一差异度小于或等于所述第二差异度,则将宽度方向作为所述待适配屏幕的标准化调整方向。
在一种可能的实现方式中,所述处理模块1301具体用于:
基于所述待适配分辨率,确定所述待适配屏幕在所述标准化调整方向上对应的待适配像素数量;
基于所述待适配像素数量,以及所述基准屏幕在所述标准化调整方向上对应的基准像素数量,对所述原始屏幕密度进行调整,获得待适配屏幕密度;
基于所述待适配屏幕密度以及所述基准屏幕的基准点密度,对所述原始像素密度进行调整,确定所述待适配点密度。
在一种可能的实现方式中,所述适配应用界面还包括多个适配信息引导区,每个适配信息引导区用于展示与一类引导信息关联的界面元素;
针对每个适配信息引导区,所述适配信息引导区在所述适配应用界面中呈现的物理宽度是根据所述适配信息引导区的初步像素尺寸和所述待适配屏幕的待适配宽度确定的,其中,所述适配信息引导区的初步像素尺寸是基于相应的基准信息引导区在所述基准应用界面中的基准虚拟像素尺寸以及所述待适配点密度确定的;
所述适配信息引导区在所述适配应用界面中呈现的物理高度,以及所述适配信息引导区展示的界面元素的适配数量,是根据所述适配信息引导区的初步像素尺寸以及所述待适配屏幕的待适配高度确定的。
在一种可能的实现方式中,所述处理模块1301还用于:
基于基准宽度范围和所述基准屏幕的基准点密度,确定所述适配信息引导区的宽度调整范围;
基于所述初步像素尺寸,确定所述适配信息引导区的初步像素宽度;
基于所述待适配屏幕的待适配宽度以及所述宽度调整范围,对所述初步像素宽度进行调整,获得所述适配信息引导区的最终像素宽度,并基于所述最终像素宽度,确定所述适配信息引导区在所述适配应用界面中呈现的物理宽度。
在一种可能的实现方式中,所述处理模块1301具体用于:
将所述基准宽度范围对应的预设点密度和所述基准屏幕的基准点密度的比值,作为所述基准宽度范围的调整比例;
将所述基准宽度范围的上下边界值,分别与所述调整比例相乘,获得所述适配信息引导区的宽度调整范围。
在一种可能的实现方式中,所述处理模块1301还用于:
基于所述初步像素尺寸,确定所述适配信息引导区的初步像素高度;
基于所述待适配高度和所述基准信息引导区的展示状态信息,确定所述初步像素高度的高度调整值;
基于所述高度调整值和所述初步像素高度,确定所述适配信息引导区的最终像素高度,并基于所述最终像素高度,确定所述适配信息引导区在所述适配应用界面中呈现的物理高度。
在一种可能的实现方式中,所述处理模块1301还用于:
基于所述待适配高度和所述基准信息引导区的展示状态信息,确定所述适配信息引导区的元素调整数量;
基于所述元素调整数量和所述基准信息引导区在基准应用界面中展示的界面元素的基准数量,确定所述适配信息引导区在所述适配应用界面中展示的界面元素的适配数量。
在一种可能的实现方式中,所述适配应用界面还包括适配控件区,所述适配控件区用于展示与操作控件关联的界面元素,所述多个适配信息引导区中包括适配动态信息引导区;
所述适配控件区在所述适配应用界面中的最终展示位置是基于空白区域的像素尺寸确定的,所述空白区域是所述适配动态信息引导区的下边界与所述适配应用界面的下边界之间的空白区域。
在一种可能的实现方式中,所述处理模块1301还用于:
若所述空白区域的像素尺寸大于预设阈值,则将所述空白区域作为所述适配控件区在所述适配应用界面中的最终展示位置;
若所述空白区域的像素尺寸小于或等于预设阈值,则基于基准动态信息引导区和基准控件区在所述基准应用界面中的展示位置关系,以及所述适配动态信息引导区在所述适配应用界面中的展示位置,确定所述适配控件区在所述适配应用界面中的最终展示位置。
在一种可能的实现方式中,所述待展示应用包括多个独立的业务层级,所述多个独立的业务层级包括通知层、支线层、主线层、控件层和底图层。
在一种可能的实现方式中,所述多个适配信息引导区位于所述主线层;
每个所述适配信息引导区在所述适配应用界面中呈现的物理宽度,是在所述主线层中根据所述适配信息引导区的初步像素尺寸和所述待适配屏幕的待适配宽度确定的;
每个所述适配信息引导区在所述适配应用界面中呈现的物理高度,以及每个所述适配信息引导区展示的界面元素的适配数量,是在所述主线层中根据所述适配信息引导区的初步像素尺寸以及所述待适配屏幕的待适配高度确定的。
在一种可能的实现方式中,所述适配控件区位于所述控件层;
所述适配控件区在所述适配应用界面中的最终展示位置,是在所述控件层中基于空白区域的像素尺寸确定的,所述空白区域是所述适配动态信息引导区的下边界与所述适配应用界面的下边界之间的空白区域。
本申请实施例中,以界面元素的基准虚拟像素尺寸与界面元素的适配虚拟像素尺寸相等为基准,结合界面元素的虚拟像素尺寸、像素尺寸、点密度三者之间的关系,确定适配应用界面中的界面元素的第一物理尺寸,以保证适配应用界面中的每个界面元素在适配应用界面中呈现的第一物理尺寸,与相应的界面元素在基准应用界面中相应呈现的第二物理尺寸相同,从而使得待适配屏幕上展示的适配应用界面中的各个界面元素,与基准屏幕上 展示的基准应用界面中相应的各个界面元素的视觉呈现效果相同,也保证了不同终端设备上呈现的适配应用界面中的界面元素的视觉呈现效果相同,进而提高对象的使用体验。
基于相同的技术构思,本申请实施例提供了一种计算机设备,该计算机设备可以是图1所示的终端设备和/或服务器,如图14所示,包括至少一个处理器1401,以及与至少一个处理器连接的存储器1402,本申请实施例中不限定处理器1401与存储器1402之间的具体连接介质,图14中处理器1401和存储器1402之间通过总线连接为例。总线可以分为地址总线、数据总线、控制总线等。
在本申请实施例中,存储器1402存储有可被至少一个处理器1401执行的指令,至少一个处理器1401通过执行存储器1402存储的指令,可以执行上述应用界面适配的方法的步骤。
其中,处理器1401是计算机设备的控制中心,可以利用各种接口和线路连接计算机设备的各个部分,通过运行或执行存储在存储器1402内的指令以及调用存储在存储器1402内的数据,从而实现应用界面适配。可选的,处理器1401可包括一个或多个处理单元,处理器1401可集成应用处理器和调制解调处理器,其中,应用处理器主要处理操作系统、用户界面和应用程序等,调制解调处理器主要处理无线通信。可以理解的是,上述调制解调处理器也可以不集成到处理器1401中。在一些实施例中,处理器1401和存储器1402可以在同一芯片上实现,在一些实施例中,它们也可以在独立的芯片上分别实现。
处理器1401可以是通用处理器,例如中央处理器(CPU)、数字信号处理器、专用集成电路(Application Specific Integrated Circuit,ASIC)、现场可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件,可以实现或者执行本申请实施例中公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成,或者用处理器中的硬件及软件模块组合执行完成。
存储器1402作为一种非易失性计算机可读存储介质,可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块。存储器1402可以包括至少一种类型的存储介质,例如可以包括闪存、硬盘、多媒体卡、卡型存储器、随机访问存储器(Random Access Memory,RAM)、静态随机访问存储器(Static Random Access Memory,SRAM)、可编程只读存储器(Programmable Read Only Memory,PROM)、只读存储器(Read Only Memory,ROM)、带电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory,EEPROM)、磁性存储器、磁盘、光盘等等。存储器1402是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机设备存取的任何其他介质,但不限于此。本申请实施例中的存储器1402还可以是电路或者其它任意能够实现存储功能的装置,用于存储程序指令和/或数据。
基于同一发明构思,本申请实施例提供了一种计算机可读存储介质,其存储有可由计算机设备执行的计算机程序,当程序在计算机设备上运行时,使得计算机设备执行上述应用界面适配的方法的步骤。
基于同一发明构思,本申请实施例提供了一种计算机程序产品,所述计算机程序产品包括存储在计算机可读存储介质上的计算机程序,所述计算机程序包括程序指令,当所述程序指令被计算机设备执行时,使所述计算机设备执行上述应用界面适配的方法的步骤。
本领域内的技术人员应明白,本申请的实施例可提供为方法、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本申请的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。
显然,本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样,倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内,则本申请也意图包含这些改动和变型在内。

Claims (20)

  1. 一种应用界面适配的方法,所述方法由计算机设备执行,所述方法包括:
    获取在待适配屏幕上对待展示应用的触发操作;
    响应于所述触发操作,通过所述待适配屏幕展示所述待展示应用的适配应用界面,其中,所述适配应用界面中包括多个界面元素,针对所述多个界面元素中的每个界面元素,所述界面元素在所述适配应用界面中呈现的第一物理尺寸与在基准应用界面中呈现的第二物理尺寸相同;所述界面元素的第一物理尺寸是基于所述界面元素在所述适配应用界面中的适配虚拟像素尺寸以及所述待适配屏幕的待适配点密度确定的,所述适配虚拟像素尺寸与所述界面元素在基准应用界面中的基准虚拟像素尺寸相同。
  2. 如权利要求1所述的方法,所述界面元素在所述适配应用界面中呈现的第一物理尺寸是采用以下方式确定的:
    基于所述界面元素的适配虚拟像素尺寸和所述待适配点密度,确定所述界面元素在所述适配应用界面中的适配像素尺寸;
    基于所述界面元素的适配像素尺寸,确定所述界面元素在所述适配应用界面中呈现的第一物理尺寸。
  3. 如权利要求1所述的方法,所述待适配屏幕的待适配点密度是采用以下方式确定的:
    基于所述待适配屏幕的待适配分辨率和所述待适配屏幕的原始屏幕密度,确定所述待适配屏幕的有效宽度和有效高度;
    基于所述有效宽度与所述基准屏幕的基准宽度之间的第一差异度,以及所述有效高度与所述基准屏幕的基准高度之间的第二差异度,确定所述待适配屏幕的标准化调整方向;
    基于所述标准化调整方向,对所述待适配屏幕的原始像素密度进行调整,获得待适配点密度。
  4. 如权利要求3所述的方法,所述基于所述有效宽度与所述基准屏幕的基准宽度之间的第一差异度,以及所述有效高度与所述基准屏幕的基准高度之间的第二差异度,确定所述待适配屏幕的标准化调整方向之前,还包括:
    基于所述有效宽度与所述基准宽度的比值,确定第一差异度;以及基于所述有效高度与所述基准高度的比值,确定第二差异度;
    确定所述第一差异度或所述第二差异度小于1。
  5. 如权利要求4所述的方法,所述基于所述有效宽度与所述基准屏幕的基准宽度之间的第一差异度,以及所述有效高度与所述基准屏幕的基准高度之间的第二差异度,确定所述待适配屏幕的标准化调整方向,包括:
    若所述第一差异度大于所述第二差异度,则将高度方向作为所述待适配屏幕的标准化调整方向;
    若所述第一差异度小于或等于所述第二差异度,则将宽度方向作为所述待适配屏幕的标准化调整方向。
  6. 如权利要求3所述的方法,所述基于所述标准化调整方向,对所述待适配屏幕的原始像素密度进行调整,获得待适配点密度,包括:
    基于所述待适配分辨率,确定所述待适配屏幕在所述标准化调整方向上对应的待适配像素数量;
    基于所述待适配像素数量,以及所述基准屏幕在所述标准化调整方向上对应的基准像素数量,对所述原始屏幕密度进行调整,获得待适配屏幕密度;
    基于所述待适配屏幕密度以及所述基准屏幕的基准点密度,对所述原始像素密度进行调整,确定所述待适配点密度。
  7. 如权利要求1所述的方法,所述适配应用界面还包括多个适配信息引导区,每个适配信息引导区用于展示与一类引导信息关联的界面元素;
    针对每个适配信息引导区,所述适配信息引导区在所述适配应用界面中呈现的物理宽度是根据所述适配信息引导区的初步像素尺寸和所述待适配屏幕的待适配宽度确定的,其中,所述适配信息引导区的初步像素尺寸是基于相应的基准信息引导区在所述基准应用界面中的基准虚拟像素尺寸以及所述待适配点密度确定的;
    所述适配信息引导区在所述适配应用界面中呈现的物理高度,以及所述适配信息引导区展示的界面元素的适配数量,是根据所述适配信息引导区的初步像素尺寸以及所述待适配屏幕的待适配高度确定的。
  8. 如权利要求7所述的方法,所述适配信息引导区在所述适配应用界面中呈现的物理宽度是采用以下方式确定的:
    基于基准宽度范围和所述基准屏幕的基准点密度,确定所述适配信息引导区的宽度调整范围;
    基于所述初步像素尺寸,确定所述适配信息引导区的初步像素宽度;
    基于所述待适配屏幕的待适配宽度以及所述宽度调整范围,对所述初步像素宽度进行调整,获得所述适配信息引导区的最终像素宽度,并基于所述最终像素宽度,确定所述适配信息引导区在所述适配应用界面中呈现的物理宽度。
  9. 如权利要求8所述的方法,所述基于基准宽度范围和所述基准屏幕的基准点密度,确定所述适配信息引导区的宽度调整范围,包括:
    将所述基准宽度范围对应的预设点密度和所述基准屏幕的基准点密度的比值,作为所述基准宽度范围的调整比例;
    将所述基准宽度范围的上下边界值,分别与所述调整比例相乘,获得所述适配信息引导区的宽度调整范围。
  10. 如权利要求7所述的方法,每个所述适配信息引导区在所述适配应用界面中呈现的物理高度是采用以下方式确定的:
    基于所述初步像素尺寸,确定所述适配信息引导区的初步像素高度;
    基于所述待适配高度和所述基准信息引导区的展示状态信息,确定所述初步像素高度的高度调整值;
    基于所述高度调整值和所述初步像素高度,确定所述适配信息引导区的最终像素高度,并基于所述最终像素高度,确定所述适配信息引导区在所述适配应用界面中呈现的物理高度。
  11. 如权利要求7所述的方法,每个所述适配信息引导区展示的界面元素的适配数量是采用以下方式确定的:
    基于所述待适配高度和所述基准信息引导区的展示状态信息,确定所述适配信息引导区的元素调整数量;
    基于所述元素调整数量和所述基准信息引导区在基准应用界面中展示的界面元素的基准数量,确定所述适配信息引导区在所述适配应用界面中展示的界面元素的适配数量。
  12. 如权利要求7所述的方法,所述适配应用界面还包括适配控件区,所述适配控件区用于展示与操作控件关联的界面元素,所述多个适配信息引导区中包括适配动态信息引导区;
    所述适配控件区在所述适配应用界面中的最终展示位置是基于空白区域的像素尺寸确定的,所述空白区域是所述适配动态信息引导区的下边界与所述适配应用界面的下边界之间的空白区域。
  13. 如权利要求12所述的方法,所述适配控件区在所述适配应用界面中的最终展示位置是采用以下方式确定的:
    若所述空白区域的像素尺寸大于预设阈值,则将所述空白区域作为所述适配控件区在所述适配应用界面中的最终展示位置;
    若所述空白区域的像素尺寸小于或等于所述预设阈值,则基于基准动态信息引导区和基准控件区在所述基准应用界面中的展示位置关系,以及所述适配动态信息引导区在所述适配应用界面中的展示位置,确定所述最终展示位置。
  14. 如权利要求7至13任一所述的方法,所述待展示应用包括多个独立的业务层级,所述多个独立的业务层级包括通知层、支线层、主线层、控件层和底图层。
  15. 如权利要求14所述的方法,所述多个适配信息引导区位于所述主线层;
    每个所述适配信息引导区在所述适配应用界面中呈现的物理宽度,是在所述主线层中根据所述适配信息引导区的初步像素尺寸和所述待适配宽度确定的;
    每个所述适配信息引导区在所述适配应用界面中呈现的物理高度,以及每个所述适配信息引导区展示的界面元素的适配数量,是在所述主线层中根据所述适配信息引导区的初步像素尺寸以及所待适配高度确定的。
  16. 如权利要求14所述的方法,所述适配控件区位于所述控件层;
    所述适配控件区在所述适配应用界面中的最终展示位置,是在所述控件层中基于空白区域的像素尺寸确定的,所述空白区域是所述适配动态信息引导区的下边界与所述适配应用界面的下边界之间的空白区域。
  17. 一种应用界面适配的装置,该装置部署在计算机设备上,所述装置包括:
    处理模块,用于获取在待适配屏幕上对待展示应用的触发操作;
    展示模块,用于响应于所述触发操作,通过所述待适配屏幕展示所述待展示应用的适配应用界面,其中,所述适配应用界面中包括多个界面元素,针对所述多个界面元素中的每个界面元素,所述界面元素在所述适配应用界面中呈现的第一物理尺寸与在基准应用界面中呈现的第二物理尺寸相同;所述界面元素的第一物理尺寸是基于所述界面元素在所述 适配应用界面中的适配虚拟像素尺寸以及所述待适配屏幕的待适配点密度确定的,所述适配虚拟像素尺寸与所述界面元素在基准应用界面中的基准虚拟像素尺寸相同。
  18. 一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现权利要求1~16任一所述方法的步骤。
  19. 一种计算机可读存储介质,其存储有可由计算机设备执行的计算机程序,当所述程序在计算机设备上运行时,使得所述计算机设备执行权利要求1~16任一所述方法的步骤。
  20. 一种计算机程序产品,所述计算机程序产品包括存储在计算机可读存储介质上的计算机程序,所述计算机程序包括程序指令,当所述程序指令被计算机设备执行时,使所述计算机设备执行权利要求1-16任一项所述方法的步骤。
PCT/CN2022/136168 2022-03-04 2022-12-02 一种调整界面布局的方法、装置、设备及存储介质 WO2023165197A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US18/487,075 US20240036718A1 (en) 2022-03-04 2023-10-14 Method and apparatus for adjusting interface layout, device, and storage medium

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210207998.7A CN114610426B (zh) 2022-03-04 2022-03-04 一种调整界面布局的方法、装置、设备及存储介质
CN202210207998.7 2022-03-04

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US18/487,075 Continuation US20240036718A1 (en) 2022-03-04 2023-10-14 Method and apparatus for adjusting interface layout, device, and storage medium

Publications (1)

Publication Number Publication Date
WO2023165197A1 true WO2023165197A1 (zh) 2023-09-07

Family

ID=81861578

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/136168 WO2023165197A1 (zh) 2022-03-04 2022-12-02 一种调整界面布局的方法、装置、设备及存储介质

Country Status (3)

Country Link
US (1) US20240036718A1 (zh)
CN (1) CN114610426B (zh)
WO (1) WO2023165197A1 (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114610426B (zh) * 2022-03-04 2023-09-08 腾讯科技(深圳)有限公司 一种调整界面布局的方法、装置、设备及存储介质
CN116821990A (zh) * 2023-08-31 2023-09-29 中国电子科技集团公司第十五研究所 基于人因工程的态势统一建模方法、服务器及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070266335A1 (en) * 2006-05-12 2007-11-15 Microsoft Corporation Providing a standard user interface (UI) across disparate display interfaces
CN103473044A (zh) * 2013-08-20 2013-12-25 广东明创软件科技有限公司 适配不同分辨率移动终端的应用程序界面绘制方法
CN114115769A (zh) * 2020-08-31 2022-03-01 华为技术有限公司 一种显示方法及电子设备
CN114115619A (zh) * 2020-08-31 2022-03-01 华为技术有限公司 一种应用程序界面显示的方法及电子设备
CN114610426A (zh) * 2022-03-04 2022-06-10 腾讯科技(深圳)有限公司 一种调整界面布局的方法、装置、设备及存储介质

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103823620B (zh) * 2014-03-04 2017-01-25 飞天诚信科技股份有限公司 一种屏幕适配的方法和装置
CN107273000B (zh) * 2017-06-14 2020-04-14 电子科技大学 一种智能示波器的屏幕多分辨率适配方法
CN108363604A (zh) * 2018-02-06 2018-08-03 四川虹美智能科技有限公司 一种分辨率适配方法、装置及业务系统
CN108415754A (zh) * 2018-03-15 2018-08-17 万帮充电设备有限公司 Android UI适配方法及装置
CN109542550A (zh) * 2018-10-19 2019-03-29 新博卓畅技术(北京)有限公司 一种基于动态设置屏幕密度的屏幕适配方法、系统及设备
CN109522539A (zh) * 2018-11-26 2019-03-26 常诚 基于移动设备的pdf学术论文重排版系统及方法
CN109783181B (zh) * 2019-01-31 2019-12-20 掌阅科技股份有限公司 屏幕适配显示方法、电子设备及计算机存储介质
CN110007919A (zh) * 2019-04-08 2019-07-12 深圳市多翼电智科技有限公司 一种用于无人机自动机场的动态密度屏幕适配方法及系统
CN111443974A (zh) * 2020-03-26 2020-07-24 中国农业银行股份有限公司 Android设备屏幕适配方法、相关设备及可读存储介质
CN113900763A (zh) * 2021-11-23 2022-01-07 四川长虹电器股份有限公司 智能电视上瀑布流应用横竖屏界面适配的方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070266335A1 (en) * 2006-05-12 2007-11-15 Microsoft Corporation Providing a standard user interface (UI) across disparate display interfaces
CN103473044A (zh) * 2013-08-20 2013-12-25 广东明创软件科技有限公司 适配不同分辨率移动终端的应用程序界面绘制方法
CN114115769A (zh) * 2020-08-31 2022-03-01 华为技术有限公司 一种显示方法及电子设备
CN114115619A (zh) * 2020-08-31 2022-03-01 华为技术有限公司 一种应用程序界面显示的方法及电子设备
CN114610426A (zh) * 2022-03-04 2022-06-10 腾讯科技(深圳)有限公司 一种调整界面布局的方法、装置、设备及存储介质

Also Published As

Publication number Publication date
CN114610426A (zh) 2022-06-10
US20240036718A1 (en) 2024-02-01
CN114610426B (zh) 2023-09-08

Similar Documents

Publication Publication Date Title
WO2023165197A1 (zh) 一种调整界面布局的方法、装置、设备及存储介质
US10540744B2 (en) Flexible control in resizing of visual displays
US20210173550A1 (en) Method for icon display, terminal, and storage medium
CN108733336B (zh) 页面显示方法和装置
US9342618B2 (en) Web application compositon and modification editor
US11107186B2 (en) Media content management for a fixed orientation display
US7475352B2 (en) Layout and management of browser panes
US9401007B2 (en) Image providing system, apparatus for same, and image providing method
US20170091152A1 (en) Generating grid layouts with mutable columns
US8332284B1 (en) Providing multiple views for an item
WO2022252865A1 (zh) 微件的显示方法、装置、终端及计算机可读存储介质
KR20200104899A (ko) 디지털 컴포넌트 배경 렌더링
US9632742B2 (en) Adaptive design editor for web applications
CN109614193A (zh) 一种列表界面的显示方法、装置、设备及存储介质
US20180121049A1 (en) Terminal device and method for displaying image by same, and web server and method for providing web page by same
CN107027056B (zh) 一种桌面配置方法、服务器及客户端
KR101911947B1 (ko) 정보 가독성 향상과 배경 이미지 조화를 위한 화면 디자인 방법 및 그 시스템
CN109739595B (zh) 基于web交互的tip显示内容处理方法、装置及电子设备
CN109710355B (zh) 基于web交互的tip显示内容处理方法、装置及电子设备
CN116820284A (zh) 信息处理方法、装置、电子设备和存储介质
CN112883358A (zh) 设备解锁方法、装置、电子设备、介质和程序产品
CN115760087A (zh) 多格式电子凭证的生成方法、装置、设备及存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22929624

Country of ref document: EP

Kind code of ref document: A1