EP-4738082-A1 - DISPLAY METHOD AND DEVICE, ELECTRONIC DEVICE, AND STORAGE MEDIUM

EP4738082A1EP 4738082 A1EP4738082 A1EP 4738082A1EP-4738082-A1

Abstract

The present disclosure relates to a display method and device, an electronic device, a storage medium and a program product. The display method includes: in response to detecting a zoom-in display instruction, obtaining an element type of an interface element included in an initial interface to be zoomed in and displayed; for each interface element, determining a layout style of the interface element in a zoomed-in interface based on the element type of the interface element, wherein the layout style includes a display style and/or a display position of the interface element in the zoomed-in interface; and drawing and displaying the zoomed-in interface based on layout styles of all interface elements in the zoomed-in interface. Embodiments of the present disclosure can improve the level of detail of the interface display of the electronic device, improve the display effect of the electronic device, and enhance the user experience.

Inventors

LUO, Ruiyao
TANG, Han
LI, XIAODONG
ZHANG, BAOLIANG
XIA, Fan
MEI, Jianhua
WANG, XIANGYU
YU, Kean
DAI, Chen

Assignees

Beijing Xiaomi Mobile Software Co., Ltd.

Dates

Publication Date: 20260506
Application Date: 20250430

Claims (15)

A display method, comprising: in response to detecting a zoom-in display instruction, obtaining (S110) an element type of an interface element comprised in an initial interface to be zoomed in and displayed; determining (S120) a layout style of the interface element in a zoomed-in interface based on the element type of the interface element, wherein the layout style comprises at least one of a display style or a display position of the interface element in the zoomed-in interface; and displaying (S130) the zoomed-in interface based on layout styles of all interface elements in the zoomed-in interface.
The method according to claim 1, wherein determining (S120) the layout style of the interface element in the zoomed-in interface based on the element type of the interface element comprises: determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element and a layout style of the interface element in the initial interface, and a preset zoom-in ratio associated with the zoom-in display instruction.
The method according to claim 2, wherein determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element and the layout style of the interface element in the initial interface, and the preset zoom-in ratio associated with the zoom-in display instruction comprises: in response to the interface element being a navigation bar, and the navigation bar being located at bottom and in a vertical layout in the initial interface, enlarging text in the navigation bar in the zoomed-in interface based on the preset zoom-in ratio, and determining the first number of lines of the text in the navigation bar in the zoomed-in interface based on the preset zoom-in ratio, wherein the first number of lines is greater than or equal to the number of lines of the text in the navigation bar displayed in the initial interface; in response to the interface element being the navigation bar, and the navigation bar being located at the bottom and in a horizontal layout in the initial interface, enlarging the text in the navigation bar in the zoomed-in interface based on the preset zoom-in ratio, and determining the number of lines of the text in the navigation bar to remain unchanged in the zoomed-in interface; and in response to the interface element being the navigation bar, and the navigation bar being located at a side of the initial interface, enlarging the navigation bar in the zoomed-in interface based on the preset zoom-in ratio.
The method according to claim 3, wherein the method further comprises: in response to the navigation bar being located at the bottom and in the vertical layout in the initial interface, determining a display height of the navigation bar in the zoomed-in interface based on the preset zoom-in ratio; and in response to the navigation bar being located at the bottom and in the horizontal layout in the initial interface, determining a spatial distance between respective functional options in the navigation bar based on the preset zoom-in ratio.
The method according to claim 2, wherein determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element and the layout style of the interface element in the initial interface, and the preset zoom-in ratio associated with the zoom-in display instruction comprises: in response to the interface element being a menu bar, and the menu bar being located at top or side of the initial interface, determining a display width of the menu bar in the zoomed-in interface based on the preset zoom-in ratio, and determining the second number of lines of text in the menu bar in the zoomed-in interface based on the preset zoom-in ratio, wherein the second number of lines is greater than or equal to the number of lines of the text in the menu bar displayed in the initial interface; or wherein determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element and the layout style of the interface element in the initial interface, and the preset zoom-in ratio associated with the zoom-in display instruction comprises: in response to the interface element being a toolbar, and the toolbar being in a vertical layout in the initial interface, enlarging text in the toolbar in the zoomed-in interface based on the preset zoom-in ratio, and determining the third number of lines of the text in the toolbar in the zoomed-in interface based on the preset zoom-in ratio, wherein the third number of lines is greater than or equal to the number of lines of the text in the toolbar displayed in the initial interface; or wherein determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element and the layout style of the interface element in the initial interface, and the preset zoom-in ratio associated with the zoom-in display instruction comprises: in response to the interface element being a title bar, enlarging text in the title bar in the zoomed-in interface based on a layout style of the title bar in the initial interface and the preset zoom-in ratio; and based on the preset zoom-in ratio, determining distances between the text in the title bar and upper and lower borders of the title bar in the zoomed-in interface, and determining the fourth number of lines of the text in the title bar in the zoomed-in interface, wherein the fourth number of lines is greater than or equal to the number of lines of the text in the title bar displayed in the initial interface; or wherein determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element and the layout style of the interface element in the initial interface, and the preset zoom-in ratio associated with the zoom-in display instruction comprises: in response to the interface element being a pop-up window, enlarging text in the pop-up window in the zoomed-in interface based on a layout style of the pop-up window in the initial interface and the preset zoom-in ratio; and based on the preset zoom-in ratio, enlarging an operation button in the pop-up window in a vertical layout in the zoomed-in interface, and determining the fifth number of lines of the text in the pop-up window in the zoomed-in interface, wherein the fifth number of lines is greater than or equal to the number of lines of the text in the pop-up window displayed in the initial interface; or wherein determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element and the layout style of the interface element in the initial interface, and the preset zoom-in ratio associated with the zoom-in display instruction comprises: in response to the interface element being a progress bar, enlarging text in the progress bar in the zoomed-in interface based on a layout style of the progress bar in the initial interface and the preset zoom-in ratio, and determining the sixth number of lines of the text in the progress bar in the zoomed-in interface based on the preset zoom-in ratio, wherein the sixth number of lines is greater than or equal to the number of lines of the text in the progress bar displayed in the initial interface.
The method according to claim 2, wherein determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element and the layout style of the interface element in the initial interface, and the preset zoom-in ratio associated with the zoom-in display instruction comprises: in response to the interface element being an option box, enlarging the option box in the zoomed-in interface based on a layout style of the option box in the initial interface, a dimension of the option box and the preset zoom-in ratio, wherein the dimension of the option box is configured to represent the number of available options in the option box.
The method according to claim 6, wherein enlarging the option box in the zoomed-in interface based on the layout style of the option box in the initial interface, the dimension of the option box and the preset zoom-in ratio comprises: in response to the dimension of the option box being a first preset dimension, enlarging a unit corresponding to an option in the option box in the zoomed-in interface based on the preset zoom-in ratio, and determining a font size of the option in the option box to remain unchanged; in response to the dimension of the option box being less than or equal to a second preset dimension, determining not to display, in the zoomed-in interface, the unit corresponding to the option in the option box, or, enlarging, at top of the zoomed-in interface, the unit corresponding to the option in the option box based on the preset zoom-in ratio; and in response to the dimension of the option box being greater than the second preset dimension, determining not to display, in the zoomed-in interface, the unit corresponding to the option in the option box, or, determining to split the option box into a plurality of selectors in the zoomed-in interface, and enlarging, at top of the corresponding plurality of selectors, the unit corresponding to the option in the option box based on the preset zoom-in ratio, respectively, wherein the second preset dimension is greater than the first preset dimension.
The method according to claim 2, wherein determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element and the layout style of the interface element in the initial interface, and the preset zoom-in ratio associated with the zoom-in display instruction comprises: in response to the interface element being an input box, enlarging the input box in the zoomed-in interface based on a layout style of the input box in the initial interface and the preset zoom-in ratio, and determining the seventh number of lines of text in the input box in the zoomed-in interface based on the preset zoom-in ratio, wherein the seventh number of lines is greater than or equal to the number of lines of the text in the input box displayed in the initial interface.
The method according to any one of claims 1 to 8, wherein determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element comprises: in response to the interface element being a control element, determining a layout style of the control element in the zoomed-in interface based on a control type of the control element; and wherein determining the layout style of the control element in the zoomed-in interface based on the control type of the control element, comprises: in response to the control type being a type comprising text, enlarging the control element in the zoomed-in interface based on a preset zoom-in ratio associated with the zoom-in display instruction, and determining the eighth number of lines of the text in the control element in the zoomed-in interface based on the preset zoom-in ratio, wherein the eighth number of lines is greater than the number of lines of the text in the control element displayed in the initial interface; and in response to the control type being a type that does not comprise the text, determining a display style of the control element to remain unchanged in the zoomed-in interface.
The method according to any one of claims 1 to 9, wherein the method further comprises: obtaining an area type of an area to which the interface element belongs in the initial interface; and determining the layout style of the interface element in the zoomed-in interface based on the element type of the interface element comprises: determining the layout style of the interface element in the zoomed-in interface based on the element type and the area type of the interface element.
The method according to claim 10, wherein determining the layout style of the interface element in the zoomed-in interface based on the element type and the area type of the interface element comprises: determining the layout style of the interface element in the zoomed-in interface based on the element type and the area type of the interface element and a preset area combination strategy associated with the area type; and wherein determining the layout style of the interface element in the zoomed-in interface based on the element type and the area type of the interface element and the preset area combination strategy associated with the area type comprises: in response to an area type of a current interface element being a header area, and the preset area combination strategy indicating a combination of an interface element corresponding to the header area and an interface element corresponding to an area type other than the header area, determining, based on an element type of the current interface element and an element type of the interface element corresponding to the area type other than the header area, a display position of a combined display of the interface element corresponding to the header area and the interface element corresponding to the area type other than the header area in the zoomed-in interface.
The method according to claim 11, wherein determining, based on the element type of the current interface element and the element type of the interface element corresponding to the area type other than the header area, the display position of the combined display of the interface element corresponding to the header area and the interface element corresponding to the area type other than the header area in the zoomed-in interface comprises: in response to the header area being a thumbnail, and the area type other than the header area comprising a fixed-single-line title area, displaying the interface element corresponding to the header area and an interface element corresponding to an area type other than the fixed-single-line title area and the header area in combination in the zoomed-in interface with the header area in a left-aligned manner; and in response to the header area being the thumbnail and the area type other than the header area comprising a non-fixed-single-line title area, or the header area being a non-thumbnail, a control or a serial number, displaying interface elements corresponding to area types other than the header area in combination in the zoomed-in interface with the non-fixed-single-line title area in the left-aligned manner, and determining a display position of the header area to remain unchanged in the zoomed-in interface.
The method according to claim 10, wherein determining the layout style of the interface element in the zoomed-in interface based on the element type and the area type of the interface element comprises: in response to an area type of a current interface element being a content area, and the content area being a text element, enlarging the text element in the zoomed-in interface based on a preset zoom-in ratio associated with the zoom-in display instruction, and determining the ninth number of lines of the text element in the zoomed-in interface, wherein the ninth number of lines is greater than the number of lines of the text element displayed in the initial interface; and in response to the area type of the current interface element being the content area, and the content area being an image-text composite element, enlarging, based on the preset zoom-in ratio, an image and text in the image-text composite element in a horizontal layout in the zoomed-in interface, and determining the image in the image-text composite element to be centered vertically in the zoomed-in interface; or wherein determining the layout style of the interface element in the zoomed-in interface based on the element type and the area type of the interface element comprises: in response to an area type of a current interface element being a footer area, and the footer area being a single-graphic type or a text button type, determining a display position of the footer area to remain unchanged in the zoomed-in interface; in response to the area type of the current interface element being the footer area, and the footer area being a multi-graphic type or an illustrated type, determining the footer area to display at bottom of the zoomed-in interface; and in response to the area type of the current interface element being the footer area, and the footer area being an image-text composite type, determining a display position of an image in the footer area to remain unchanged in the zoomed-in interface, and determining text in the footer area to display at the bottom of the zoomed-in interface.
An electronic device, comprising: a processor; and a memory configured to store a computer program or instructions; wherein the processor executes the computer program or the instructions to implement steps of the method according to any one of claims 1 to 13.
A non-transitory computer-readable storage medium having a computer program or instructions stored thereon, wherein the computer program or the instructions in the storage medium, when executed by a processor, implements steps of the method according to any one of claims 1 to 13.

Description

TECHNICAL FIELD The present disclosure relates to the field of display technologies, and in particular to a display method and device, an electronic device, a storage medium and a program product. BACKGROUND As smart electronic devices enter every corner of people's lives, functions of electronic devices such as mobile phones are becoming increasingly abundant. However, due to the limited screen space of the mobile phones, special groups of people may not be able to see fonts displayed on the screen clearly, resulting in the problem that the functions of the mobile phones cannot be used. At present, the interface display on the mobile phone screen can usually be automatically adjusted by adjusting a font size displayed on the mobile phone, so that the special groups of people can see the fonts displayed on the screen clearly. However, this method still has poor display effect and poor user experience. SUMMARY In order to overcome the problems existing in the related arts, the present disclosure provides a display method and device, an electronic device, a storage medium and a program product, which can improve the level of detail of the interface display of the electronic device and improve the display effect of the electronic device to improve the user experience. According to a first aspect of embodiments of the present invention, there is provided a display method, at least including: in response to detecting a zoom-in display instruction, obtaining an element type of an interface element included in an initial interface to be zoomed in and displayed;for each interface element, determining a layout style of the interface element in a zoomed-in interface based on the element type of the interface element, wherein the layout style includes a display style and/or a display position of the interface element in the zoomed-in interface; anddrawing and displaying the zoomed-in interface based on layout styles of all interface elements in the zoomed-in interface. According to a second aspect of embodiments of the present invention, there is provided a display device, at least including: an obtaining module, configured to obtain an element type of an interface element included in an initial interface to be zoomed in and displayed, in response to detecting a zoom-in display instruction;a determination module, configured to, for each interface element, determine a layout style of the interface element in a zoomed-in interface based on the element type of the interface element, wherein the layout style includes a display style and/or a display position of the interface element in the zoomed-in interface; anda display module, configured to draw and display the zoomed-in interface based on layout styles of all interface elements in the zoomed-in interface. According to a third aspect of embodiments of the present invention, there is provided an electronic device, at least including: a processor; anda memory configured to store a computer program or instructions;wherein the processor executes the computer program or the instructions to implement steps of the method described in the first aspect. According to a fourth aspect of embodiments of the present invention, there is provided a non-transitory computer-readable storage medium having a computer program or instructions stored thereon, wherein the computer program or the instructions in the storage medium, when executed by a processor, implements steps of the method described in the first aspect. According to a fifth aspect of embodiments of the present invention, there is provided a computer program product, including a computer program or instructions, which, when executed by a processor, implements steps of the method described in the first aspect. The technical solution provided by the embodiments of the present disclosure may have the following beneficial effects: the display method provided by embodiments of the present disclosure is different from the related art in which only the text part in the screen interface is enlarged. In the embodiments of the present disclosure, when the zoom-in display instruction is detected, the layout style of each interface element in the zoomed-in interface can be determined through the element type of each interface element in the initial interface to be zoomed in and displayed, so that the zoomed-in interface can be drawn and displayed according to the layout styles of all interface elements in the zoomed-in interface. On the one hand, the display of the zoomed-in interface can be made more harmonious, and on the other hand, all the interface elements can be displayed in the zoomed-in interface, that is, respective interface elements can be displayed more completely after the zoomed-in display, without omitting any interface element from the initial interface in the zoomed-in interface, thereby improving the level of detail of the interface display of the electronic device and improving the display effect of the electronic de