Method and apparatus for providing an interactive user interface

• US 9,542,070 B2
• Filed: 07/23/2013
• Issued: 01/10/2017
• Est. Priority Date: 08/14/2012
• Status: Active Grant

• Current Assignee: Beijing Xiaomi Technology Company Limited (Xiaomi Corp.)
• Original Assignee: Beijing Xiaomi Technology Company Limited (Xiaomi Corp.)
• Inventors: Xu, Fei, Jin, Fan, Ren, Tian, Sun, Guangdou, Li, Weixing, Sun, Daqing, Wang, Ying, Zhu, Cai, Hu, Xiaowei, Yuan, Bo
• Primary Examiner(s): SAX, STEVEN PAUL
• Application Number:
  US13/948,628
• Publication Number:
  US 20140053109A1
• Time in Patent Office: 1,267 Days
• Field of Search: 715/785, 715/841, 715/864, 715/782
• US Class Current: 1/1
• CPC Class Codes: G06F 3/0481 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
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/0483 Interaction with page-structured environments, e.g. book metaphor
• CPC Class Codes: G06F 3/0485 Scrolling or panning
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces
• CPC Class Codes: H04M 1/72427 for supporting games or graphical animations

Abstract

A method for providing an interactive user interface on a mobile terminal having a touch screen, including: displaying a content layer and a background layer corresponding to the content layer; detecting a contact event occurring on the screen of the mobile terminal and obtaining an operation command corresponding to the contact event; and executing an operation according to the obtained operation command; wherein the background layer is located below the content layer and is configured to display a scene as a background; and the content layer is configured to arrange at least a component for user interaction, a preset point of an icon corresponding to the component being set to correspond to a preset position of the content layer, and the preset position of the content layer being set to correspond to a preset position of the scene displayed by the background layer.

Claims

1. A method for providing an interactive user interface on a mobile terminal having a touch screen, comprising:

obtaining a picture edited by a user as a background layer;

obtaining an icon corresponding to a component for user interaction, a position of a content layer set by the user as corresponding to a preset point of the icon, and startup properties corresponding to the icon, to obtain the content layer, the startup properties including at least one of a name or a starting path of the component; and

storing the obtained background layer and the obtained content layer as a first file according to a preset format;

displaying the content layer and the background layer corresponding to the content layer;

detecting a contact event occurring on the screen of the mobile terminal and obtaining an operation command corresponding to the contact event; and

executing an operation according to the obtained operation command;

wherein the background layer is located below the content layer, is configured to display a scene as a background, and includes a distant view background layer and a near view background layer, a width of the distant view background layer being smaller than a width of the near view background layer;

the content layer is configured to arrange the component for user interaction, the position of the content layer being set to correspond to a preset position of the scene displayed by the background layer, such that the icon matches the scene displayed by the background layer;

the obtained operation command includes a sliding command; and

the executing of the operation includes causing the content layer, the distant view background layer, and the near view background layer to slide in a direction directed by the sliding command, wherein a sliding length of the near view background layer is the same as a sliding length of the content layer and greater than a sliding length of the distant view background layer, and the sliding length of the distant view background layer is greater than zero.

2. The method of claim 1, before displaying the content layer and the background layer, further comprising

obtaining the first file.

3. The method of claim 2, wherein the displaying of the content layer and the background layer comprises:

analyzing the first file according to the preset format to obtain the content layer and the background layer; and

displaying the obtained content layer and the obtained background layer.

4. The method of claim 1, after displaying the content layer and the background layer, the method further comprising:

displaying an alternative component at a preset position on the screen of the mobile terminal when detecting a command issued by a user for editing a first component in the content layer; and

setting the alternative component at a position in the content layer corresponding to the first component after the alternative component is selected by the user.

5. A non-transitory medium including instructions, executable by a processor, for performing a method for providing an interactive user interface on a mobile terminal having a touch screen, the method comprising:

obtaining a picture edited by a user as a background layer;

obtaining an icon corresponding to a component for user interaction, a position of a content layer set by the user as corresponding to a preset point of the icon, and startup properties corresponding to the icon, to obtain the content layer, the startup properties including at least one of a name or a starting path of the component; and

storing the obtained background layer and the obtained content layer as a first file according to a preset format;

displaying the content layer and the background layer corresponding to the content layer;

detecting a contact event occurring on the screen of the mobile terminal and obtaining an operation command corresponding to the contact event; and

executing an operation according to the obtained operation command;

wherein the background layer is located below the content layer, is configured to display a scene as a background, and includes a distant view background layer and a near view background layer, a width of the distant view background layer being smaller than a width of the near view background layer;

the content layer is configured to arrange the component for user interaction, the position of the content layer being set to correspond to a preset position of the scene displayed by the background layer, such that the icon matches the scene displayed by the background layer;

the obtained operation command includes a sliding command; and

the executing of the operation includes causing the content layer, the distant view background layer, and the near view background layer to slide in a direction directed by the sliding command, wherein a sliding length of the near view background layer is the same as a sliding length of the content layer and greater than a sliding length of the distant view background layer, and the sliding length of the distant view background layer is greater than zero.

6. The non-transitory medium of claim 5, wherein before the displaying of the content layer and the background layer, the method further comprises:

obtaining the first file.

7. The non-transitory medium of claim 6, wherein the displaying of the content layer and the background layer comprises:

analyzing the first file according to the preset format to obtain the content layer and the background layer; and

displaying the obtained content layer and the obtained background layer.

8. The non-transitory medium of claim 5, wherein after the displaying of the content layer and the background layer, the method further comprises:

displaying an alternative component at a preset position on the screen of the mobile terminal when detecting a command issued by a user for editing a first component in the content layer; and

setting the alternative component at a position in the content layer corresponding to the first component after the alternative component is selected by the user.

9. A mobile terminal, comprising:

a processor; and

a touch screen;

wherein the processor is configured to;

obtain a picture edited by a user as a background layer;

obtain an icon corresponding to a component for user interaction, a position of a content layer set by the user as corresponding to a preset point of the icon, and startup properties corresponding to the icon, to obtain the content layer, the startup properties including at least one of a name or a starting path of the component; and

store the obtained background layer and the obtained content layer as a first file according to a preset format;

display on the screen the content layer and the background layer corresponding to the content layer;

detect a contact event occurring on the screen and obtain an operation command corresponding to the contact event; and

execute an operation according to the obtained operation command;

wherein the background layer is located below the content layer, is configured to display a scene as a background, and includes a distant view background layer and a near view background layer, a width of the distant view background layer being smaller than a width of the near view background layer;

the content layer is configured to arrange the component for user interaction, the position of the content layer being set to correspond to a preset position of the scene displayed by the background layer, such that the icon matches the scene displayed by the background layer;

the obtained operation command includes a sliding command; and

the processor is further configured to cause the content layer, the distant view background layer, and the near view background layer to slide in a direction directed by the sliding command, wherein a sliding length of the near view background layer is the same as a sliding length of the content layer and greater than a sliding length of the distant view background layer, and the sliding length of the distant view background layer is greater than zero.

10. The mobile terminal of claim 9, wherein the processor is further configured to:

obtain the first file before displaying the content layer and the background layer.

11. The mobile terminal of claim 10, wherein the processor is further configured to:

analyze the first file according to the preset format to obtain the content layer and the background layer; and

display the obtained content layer and the obtained background layer.

12. The mobile terminal of claim 9, wherein the processor is further configured to:

display, after displaying the content layer and the background layer, an alternative component at a preset position on the screen when detecting a command issued by a user for editing a first component in the content layer; and

set the alternative component at a position in the content layer corresponding to the first component after the alternative component is selected by the user.