Interface drawing method and device and electronic equipment

Abstract

The invention discloses an interface drawing method and device and electronic equipment, and the method comprises the steps: calling a graphics library with a quasi-materialized object which has a quasi-materialized interaction operation; and drawing the UI through the graphics library. Through the technical scheme provided by the embodiment of the invention, a developer does not need to spend a lot of time and energy to realize a UI interaction effect, and a user can interact by virtue of life experience and does not need to spend a lot of time and energy to learn a UI control, so that the usability and interactivity of the graphics library are remarkably improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device and electronic device for drawing an interface. Background Art

[0002] In the field of industrial software development, developers usually draw UI based on the user interface (UI) controls (such as buttons, text boxes, drop-down boxes, scroll bars, etc.) provided in the underlying library of graphics rendering (such as Qt, MFC, etc.) to complete the development of graphical UI applications.

[0003] However, when using UI controls in underlying libraries such as Qt and MFC to draw UI, developers need to have many abilities such as graphics basics, programming basics, and performance optimization. As a result, they need to spend a lot of time and energy to realize the drawing of objects such as paper objects, book objects, loose-leaf objects, and scroll objects in order to complete the drawing of UI and complete the development of graphical UI applications. Moreover, for users of graphical UI applications, UI controls such as buttons, text boxes, drop-down boxes, and scroll bars have a certain learning threshold, so users also need to spend a lot of time and energy to use the graphic UI application, resulting in poor usability and interactivity of underlying libraries such as Qt and MFC. Summary of the invention

[0004] The present application provides an interface drawing method, device and electronic device to achieve the effect of improving the usability and interactivity of the graphics library. The specific implementation scheme is as follows:

[0005] In a first aspect, the present application provides a method for developing an application, the method comprising:

[0006] Calling a graphics library having a skeuomorphic object; wherein the skeuomorphic object has a skeuomorphic interactive operation;

[0007] The user interface UI is drawn through the graphics library.

[0008] The UI drawing is completed through the graphics library with skeuomorphic objects, thus realizing the development of graphic UI applications. Since the skeuomorphic objects (such as skeuomorphic paper objects, skeuomorphic book objects, skeuomorphic loose-leaf objects, and skeuomorphic scroll objects) of the graphics library have built-in interactive operations, developers do not need to spend a lot of time and energy to achieve UI interactive effects, thereby reducing the workload of developers and the difficulty of development, and increasing the usability and interactivity of the graphics library.

[0009] At the same time, since the skeuomorphic objects in the graphics library have skeuomorphic interactive operations, the interactive operations of the skeuomorphic objects are consistent with their operations in the real world, that is, the interactive operations of the skeuomorphic objects are consistent with the usage of the objects in the real world (such as paper objects, book objects, loose-leaf objects, scroll objects), so that users can interact based on their life experience without having to learn how to use UI controls, and thus users do not need to spend a lot of time and energy to use the UI drawn based on the graphics library, further increasing the ease of use and interactivity of the graphics library.

[0010] In a possible implementation manner, before calling the graphics library having the skeuomorphic object, the method further includes:

[0011] According to the mouse state or the touch state, the interactive operation of the skeuomorphic object and the interactive animation corresponding to the interactive operation are predefined, so that the skeuomorphic object has the skeuomorphic interactive operation.

[0012] Through the above-mentioned application embodiments, before calling the graphics library with skeuomorphic objects, the interactive operations of the skeuomorphic objects are predefined in advance, so that the skeuomorphic objects in the graphics library have skeuomorphic interactive operations, so that the interactive operations of the skeuomorphic objects are consistent with their interactive operations in the real world, that is, the effects presented by the skeuomorphic objects are consistent with the effects presented in the daily work environment and life, thereby avoiding subsequent users from spending a lot of time and energy on learning the UI when using the UI drawn based on the graphics library, and also avoiding the user's subsequent learning of the interactive operations of various UI controls when drawing the UI, which helps to increase the usability and interactivity of the graphics library.

[0013] In a possible implementation, the interactive animation includes a page turning animation, and the predefining, according to the mouse state, the interactive animation corresponding to the interactive operation of the skeuomorphic object includes:

[0014] If it is determined that the mouse state is in the pressed state, and it is determined that the current position of the mouse is in the first response area of ​​the skeuomorphic object, activating the page turning animation of the skeuomorphic object, and drawing the page turning animation;

[0015] If it is determined that the mouse state is a moving state, when the page turning animation of the skeuomorphic object has been activated, executing the page turning animation according to the current position of the mouse;

[0016] If it is determined that the mouse state is the moving state, when the page turning animation of the skeuomorphic object is not activated and the current position of the mouse is in the first response area of ​​the skeuomorphic object, a page turning prompt effect is displayed; wherein the page turning prompt effect is to roll up a corner of a paper in the first response area;

[0017] If it is determined that the mouse state is a released state, when the current position of the mouse exceeds a preset length of the skeuomorphic object, it is determined that the drawing of the page turning animation is completed.

[0018] Through the above-mentioned application embodiments, the page-turning animation of the skeuomorphic object is realized, so that the skeuomorphic object has a page-turning animation, so that in the subsequent interactive operation of turning pages, the page-turning animation of the skeuomorphic object can be displayed to the user, thereby providing the user with an intuitive operation effect, which is conducive to the user to more clearly understand the specific effect of the interactive operation.

[0019] In a possible implementation, the interactive operation includes a page turning operation, and the page turning operation is specifically:

[0020] When it is determined that the mouse moves into the first response area of ​​the skeuomorphic object, a page turning prompt effect is displayed, and when it is determined that the mouse state is a pressed state, the page turning operation is performed; wherein the skeuomorphic object is any one of a skeuomorphic paper object, a skeuomorphic book object, and a skeuomorphic loose-leaf album object.

[0021] Through the above-mentioned application embodiments, the page turning operation of the skeuomorphic object is consistent with the page turning operation of the paper object, book object, and loose-leaf album object in the real world, so that the page turning operation of the skeuomorphic object conforms to the page turning habits of most users for paper objects, book objects, and loose-leaf album objects, so that when the user interacts with the UI, there is no need to learn the interaction knowledge of the UI, and the user can directly interact based on life experience, which is conducive to improving the usability and interactivity of the graphics library.

[0022] In a possible implementation manner, the interaction operation includes a destroy operation, and the destroy operation is specifically:

[0023] When it is determined that the mouse moves into the second response area of ​​the skeuomorphic object, a prompt effect of destruction is displayed, and when it is determined that the mouse state is a pressed state, it is determined to execute the destruction operation; wherein the skeuomorphic object is any one of a skeuomorphic paper object, a skeuomorphic book object, and a skeuomorphic loose-leaf album object.

[0024] Through the above-mentioned application embodiments, the destruction operation of the skeuomorphic object is consistent with the destruction operation of paper objects, book objects, and loose-leaf album objects in the real world, so that the destruction operation of the skeuomorphic object conforms to the destruction habits of most users for paper objects, book objects, and loose-leaf album objects, so that when the user interacts with the UI, there is no need to learn the interaction knowledge of the UI, and the user can directly interact based on life experience, which is conducive to improving the usability and interactivity of the graphics library.

[0025] In a possible implementation, the skeuomorphic object includes a skeuomorphic scroll object, and the interactive operation includes an expansion or a collapse operation of the skeuomorphic scroll object, and the expansion or collapse operation is specifically:

[0026] If it is determined that the skeuomorphic scroll object is a skeuomorphic vertical scroll object, when it is determined that the axis of the skeuomorphic vertical scroll object is clicked, the skeuomorphic vertical scroll object is expanded downwards or the skeuomorphic vertical scroll object is closed upwards;

[0027] If it is determined that the skeuomorphic scroll object is a skeuomorphic horizontal scroll object, when it is determined that the axis of the skeuomorphic horizontal scroll object is clicked, the skeuomorphic horizontal scroll object is expanded to the right or closed to the left;

[0028] If it is determined that the skeuomorphic vertical scroll object or the skeuomorphic horizontal scroll object is a skeuomorphic dual-axis scroll object, controlling the upper axis or the left axis of the skeuomorphic dual-axis scroll object to remain stationary;

[0029] If it is determined that the skeuomorphic longitudinal scroll object or the skeuomorphic transverse scroll object is a skeuomorphic single-axis scroll object, the axis of the skeuomorphic single-axis scroll object is controlled to remain stationary.

[0030] Through the above-mentioned application embodiments, the expansion or merging operation of the skeuomorphic scroll object is consistent with the expansion or merging operation of the scroll object in the real world, so that the expansion or merging operation of the skeuomorphic scroll object conforms to the expansion habit or merging habit of most users for scroll objects, so that when the user interacts with the UI, there is no need to learn the interaction knowledge of the UI, and the user can directly interact based on life experience, which is conducive to improving the usability and interactivity of the graphics library.

[0031] In a possible implementation, calling a graphics library having a skeuomorphic object includes:

[0032] Generate an operation file according to the backed-up functional unit model; wherein the operation file includes information for calling the graphics library having the skeuomorphic object;

[0033] The graphics library is called by running the running file.

[0034] Through the above-mentioned application embodiment, an operating file including information for calling a graphics library with realistic objects is generated according to the backed-up functional unit model. Then, by running the operating file, the graphics library with realistic objects can be called, so as to realize the drawing of the UI through the graphics library with realistic objects in the future.

[0035] In a possible implementation, drawing a user interface UI by using the graphics library includes:

[0036] The screen object and the skeuomorphic object to be drawn are rendered onto a physical screen through the graphics library, so that a user can trigger the interactive operation of the skeuomorphic object to be drawn through a mouse or a finger; wherein the screen object is a viewport window of the skeuomorphic object to be drawn.

[0037] Through the above-mentioned application embodiment, the screen objects and the skeuomorphic objects to be drawn are rendered onto the physical screen through the graphics library, thereby realizing the drawing of the UI and allowing the user to trigger the interactive operation of the skeuomorphic objects to be drawn through the mouse or finger.

[0038] In a second aspect, the present application further provides a device for drawing an interface, the device comprising:

[0039] A calling module, used to call a graphics library having a skeuomorphic object; wherein the skeuomorphic object has a skeuomorphic interactive operation;

[0040] The processing module is used to draw the user interface UI through the graphics library.

[0041] In a possible implementation, the device further includes a pre-defined module, and before calling the graphics library having a skeuomorphic object, the pre-defined module is used to pre-define the interactive operation of the skeuomorphic object and the interactive animation corresponding to the interactive operation according to the mouse state or the touch state, so that the skeuomorphic object has the skeuomorphic interactive operation.

[0042] In a possible implementation, the interactive animation includes a page turning animation, and the predefined module is further configured to activate the page turning animation of the skeuomorphic object and draw the page turning animation if it is determined that the mouse state is a pressed state and the current position of the mouse is in the first response area of ​​the skeuomorphic object;

[0043] If it is determined that the mouse state is a moving state, when the page turning animation of the skeuomorphic object has been activated, executing the page turning animation according to the current position of the mouse;

[0044] If it is determined that the mouse state is the moving state, when the page turning animation of the skeuomorphic object is not activated and the current position of the mouse is in the first response area of ​​the skeuomorphic object, a page turning prompt effect is displayed; wherein the page turning prompt effect is to roll up a corner of a paper in the first response area;

[0045] If it is determined that the mouse state is a released state, when the current position of the mouse exceeds a preset length of the skeuomorphic object, it is determined that the drawing of the page turning animation is completed.

[0046] In a possible implementation, the interactive operation includes a page turning operation, and the page turning operation is specifically:

[0047] When it is determined that the mouse moves into the first response area of ​​the skeuomorphic object, a page turning prompt effect is displayed, and when it is determined that the mouse state is a pressed state, the page turning operation is performed; wherein the skeuomorphic object is any one of a skeuomorphic paper object, a skeuomorphic book object, and a skeuomorphic loose-leaf album object.

[0048] In a possible implementation manner, the interaction operation includes a destroy operation, and the destroy operation is specifically:

[0049] When it is determined that the mouse moves into the second response area of ​​the skeuomorphic object, a prompt effect of destruction is displayed, and when it is determined that the mouse state is a pressed state, it is determined to execute the destruction operation; wherein the skeuomorphic object is any one of a skeuomorphic paper object, a skeuomorphic book object, and a skeuomorphic loose-leaf album object.

[0050] In a possible implementation, the skeuomorphic object includes a skeuomorphic scroll object, and the interactive operation includes an expansion or a collapse operation of the skeuomorphic scroll object, and the expansion or collapse operation is specifically:

[0051] If it is determined that the skeuomorphic scroll object is a skeuomorphic vertical scroll object, when it is determined that the axis of the skeuomorphic vertical scroll object is clicked, the skeuomorphic vertical scroll object is expanded downwards or the skeuomorphic vertical scroll object is closed upwards;

[0052] If it is determined that the skeuomorphic scroll object is a skeuomorphic horizontal scroll object, when it is determined that the axis of the skeuomorphic horizontal scroll object is clicked, the skeuomorphic horizontal scroll object is expanded to the right or closed to the left;

[0053] If it is determined that the skeuomorphic vertical scroll object or the skeuomorphic horizontal scroll object is a skeuomorphic dual-axis scroll object, controlling the upper axis or the left axis of the skeuomorphic dual-axis scroll object to remain stationary;

[0054] If it is determined that the skeuomorphic longitudinal scroll object or the skeuomorphic transverse scroll object is a skeuomorphic single-axis scroll object, the axis of the skeuomorphic single-axis scroll object is controlled to remain stationary.

[0055] In a possible implementation manner, the calling module is specifically used to generate an operation file according to the backed-up functional unit model; wherein the operation file includes information for calling the graphic library having the skeuomorphic object;

[0056] The graphics library is called by running the running file.

[0057] In a possible implementation, the processing module is specifically used to render the screen object and the skeuomorphic object to be drawn onto the physical screen through the graphics library, so that the user can trigger the interactive operation of the skeuomorphic object to be drawn through a mouse or finger; wherein the screen object is a viewport window of the skeuomorphic object to be drawn.

[0058] In a third aspect, the present application provides an electronic device, including:

[0059] Memory, used to store computer programs;

[0060] The processor is used to implement the above-mentioned steps of the method for drawing an interface when executing the computer program stored in the memory.

[0061] In a fourth aspect, the present application provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, the steps of the above-mentioned method for drawing an interface are implemented.

[0062] For each aspect from the second to the fourth aspect and the technical effects that may be achieved by each aspect, please refer to the above description of the technical effects that can be achieved by the first aspect or various possible schemes in the first aspect, and no further details will be given here. BRIEF DESCRIPTION OF THE DRAWINGS

[0063] Figure 1a Schematic diagram 1 of a simulated paper object provided in an embodiment of the present application;

[0064] Figure 1b Schematic diagram 2 of a simulated paper object provided in an embodiment of the present application;

[0065] Figure 2a Schematic diagram 1 of a simulated book object provided in an embodiment of the present application;

[0066] Figure 2b Schematic diagram 2 of a simulated book object provided in an embodiment of the present application;

[0067] Figure 2c Schematic diagram 3 of a simulated book object provided in an embodiment of the present application;

[0068] Figure 3a Schematic diagram 1 of a skeuomorphic loose-leaf album object provided in an embodiment of the present application;

[0069] Figure 3b Schematic diagram 2 of a skeuomorphic loose-leaf album object provided in an embodiment of the present application;

[0070] Figure 3c Schematic diagram 3 of a skeuomorphic loose-leaf album object provided in an embodiment of the present application;

[0071] Figure 3d Schematic diagram 4 of a skeuomorphic loose-leaf album object provided in an embodiment of the present application;

[0072] Figure 3e Schematic diagram of the skeuomorphic loose-leaf booklet object provided in the embodiment of the present application Figure 5 ;

[0073] Figure 3f Schematic diagram of the skeuomorphic loose-leaf booklet object provided in the embodiment of the present application Figure 6 ;

[0074] Figure 3g Schematic diagram of the skeuomorphic loose-leaf booklet object provided in the embodiment of the present application Figure 7 ;

[0075] Figure 3h Schematic diagram 8 of a skeuomorphic loose-leaf album object provided in an embodiment of the present application;

[0076] Figure 4a A schematic diagram of a skeuomorphic vertical single-axis scroll object provided in an embodiment of the present application;

[0077] Figure 4b A schematic diagram of a skeuomorphic vertical dual-axis scroll object provided in an embodiment of the present application;

[0078] Figure 4c A schematic diagram of a skeuomorphic horizontal dual-axis scroll object provided in an embodiment of the present application;

[0079] Figure 4d A schematic diagram of a skeuomorphic horizontal single-axis scroll object provided in an embodiment of the present application;

[0080] Figure 4e A schematic diagram of a skeuomorphic scroll object provided in an embodiment of the present application;

[0081] Figure 5 A flowchart of an interface drawing method provided in an embodiment of the present application;

[0082] Figure 6 A schematic diagram of an interface drawing device provided in an embodiment of the present application;

[0083] Figure 7 A schematic diagram of an electronic device provided for this application. DETAILED DESCRIPTION

[0084] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings. The specific operating methods in the method embodiments can also be applied to device embodiments or system embodiments. It should be noted that in the description of the present application, "multiple" is understood as "at least two". "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. A is connected to B, which can represent: A is directly connected to B and A is connected to B through C. In addition, in the description of the present application, words such as "first" and "second" are only used to distinguish the purpose of description, and cannot be understood as indicating or implying relative importance, nor can they be understood as indicating or implying order.

[0085] The embodiments of the present application are described in detail below in conjunction with the accompanying drawings.

[0086] For developers, when drawing UI through UI controls in underlying libraries such as Qt and MFC, developers need to spend a lot of time and energy to consider the interactive operations of UI controls, and thus need to spend a lot of time and energy to draw UI. For users, the effects presented by UI controls in underlying libraries such as Qt and MFC are far different from objects such as paper objects, book objects, loose-leaf objects, and scroll objects in daily work environments. Therefore, when users use UIs drawn based on UI controls in underlying libraries such as Qt and MFC, they need to spend a lot of time and energy to learn each UI control in the UI.

[0087] Therefore, both developers and users need to spend a lot of time and energy when using UI controls in underlying libraries such as Qt and MFC, which makes the usability and interactivity of underlying libraries such as Qt and MFC poor.

[0088] In order to solve the above problems, the present application proposes a method for drawing an interface, which draws the UI by calling a graphics library of skeuomorphic objects with skeuomorphic interactive operations, thereby realizing the development of graphic UI applications, so that developers do not need to spend a lot of time and energy to achieve UI interactive effects. At the same time, due to the skeuomorphic interactive operations possessed by the skeuomorphic objects in the graphics library, the effects presented by the interactive operations of the skeuomorphic objects are consistent with the effects presented by the skeuomorphic objects in the daily working environment, so that users can interact based on their life experience without spending a lot of time and energy to learn UI controls. This reduces the time and energy spent by developers and users on UI controls, and significantly improves the usability and interactivity of the graphics library.

[0089] In the embodiment of the present application, the anthropomorphic object can be any one of an anthropomorphic paper object, anthropomorphic book object, anthropomorphic loose-leaf album object, and anthropomorphic scroll object; it can also be anthropomorphic bookmark object, anthropomorphic note object, anthropomorphic folding object, anthropomorphic poster object, anthropomorphic magazine object, anthropomorphic business card object, anthropomorphic leaflet object, anthropomorphic paper object, anthropomorphic envelope object, anthropomorphic card object, anthropomorphic folding fan object, anthropomorphic screen object and other anthropomorphic objects, but is not limited to these.

[0090] The above-mentioned skeuomorphic objects are consistent with objects in the real world, such as skeuomorphic paper objects are consistent with paper objects in the real world, skeuomorphic book objects are consistent with book objects in the real world, skeuomorphic loose-leaf album objects are consistent with loose-leaf album objects in the real world, and skeuomorphic scroll objects are consistent with scroll objects in the real world. And the skeuomorphic objects all have actual units, such as millimeter (English: millimeter, abbreviated as mm), centimeter (English: centimetre, abbreviated as cm), decimeter (English: decimeter, abbreviated as dm), meter (English: meter, abbreviated as m), and kilometer (English: kilometre, abbreviated as km).

[0091] Taking an emulated paper object, an emulated book object, an emulated loose-leaf album object, and an emulated scroll object as examples, the emulated objects in the graphic library provided in the embodiment of the present application are further described.

[0092] (I) Skeuomorphic Paper Objects

[0093] In the embodiment of the present application, the anime-like paper object can be used individually as a scattered paper object, or multiple anime-like paper objects can be stacked together for use. The anime-like paper object can also be used as a page of an anime-like book object, or as a loose-leaf book of an anime-like loose-leaf book object. The anime-like paper object can also be used as a sticker, such as sticking one anime-like paper object on another anime-like paper object, but it is not limited to this.

[0094] The above-mentioned skeuomorphic paper object has skeuomorphic interactive operations and interactive animations corresponding to the interactive operations. The interactive operations may include page turning operations, destroy operations, and the like, and the interactive animations may include page turning animations corresponding to page turning operations, destroy animations corresponding to destroy operations, and the like, but are not limited thereto.

[0095] The above page turning operation is specifically as follows:

[0096] When it is determined that the mouse moves into the first response area of ​​the simulacrum paper object, a page turning prompt effect is displayed. The page turning prompt effect is to roll up the corner of the paper in the first response area of ​​the simulacrum paper object. Figure 1aIn the example, when the mouse moves into the first response area, a page turning prompt effect is displayed, that is, the paper corner of the first response area is rolled up. The paper corner of the first response area can be rolled up as a default page turning prompt effect.

[0097] When it is determined that the mouse moves out of the first response area of ​​the skeuomorphic paper object, the page turning prompt effect is turned off.

[0098] When it is determined that the mouse has moved into the first response area of ​​the skeuomorphic paper object and the mouse state is determined to be in the pressed state, it is determined to perform a page turning operation. During the page turning operation, a page turning animation is also displayed, so that the entire page turning operation has a dynamic effect, so that the user can more intuitively understand the page turning operation of the skeuomorphic paper object. The effect presented by the page turning operation can be as follows Figure 1b As shown. Figure 1b In the figure, (1) represents the effect of turning the pages of the simulated paper object.

[0099] In an embodiment of the present application, the above-mentioned first response area can be the lower right corner hot zone range of the simulated paper object, or it can be the lower left corner hot zone range, or it can be the upper right corner hot zone range or the upper left corner hot zone range, but it is not limited to this. The specific first response area can be adjusted according to the specific application scenario.

[0100] But optimally, the first response area is the hot zone range in the lower right corner, so that the execution position of the page turning animation of the skeuomorphic paper object is more in line with the user's page turning habits, thereby helping to further improve the usability and interactivity of the graphics library. Figure 1a The first response area shown in (ie, the lower right corner area of ​​the simulated paper object) is the optimal first response area of ​​the simulated paper object.

[0101] The above page turning operation may be a default page turning operation of the skeuomorphic paper object in the graphics library, so that the user can better use the skeuomorphic paper object, thereby reducing the time and effort spent by the user on drawing or learning the UI.

[0102] Through the above method, the page turning operation of the skeuomorphic paper object is consistent with the page turning operation of the paper object in the real world, so that the page turning operation of the skeuomorphic paper object conforms to the user's habit of turning pages for paper objects, so that when the user interacts with the UI, there is no need to learn the interaction knowledge of the UI, and the user can directly interact based on life experience, which is conducive to improving the usability and interactivity of the graphics library. At the same time, it also avoids developers spending a lot of time and energy to consider the interaction operation and interaction effect of paper objects.

[0103] The above destruction operations are as follows:

[0104] When it is determined that the mouse moves into the second response area of ​​the skeuomorphic paper object, a destruction prompt effect is displayed. The destruction prompt effect is to roll up the corner of the paper in the second response area of ​​the skeuomorphic paper object. Figure 1a In the example, when the mouse moves into the second response area, a destruction prompt effect is displayed, that is, the corner of the paper in the second response area is rolled up. Figure 1b As shown, the destruction effect of the skeuomorphic paper object may also include a destruction icon, so that the user can more intuitively determine that the presented effect is the effect presented by the destruction operation. The destruction icon may also be called a delete icon.

[0105] When it is determined that the mouse moves out of the second response area of ​​the skeuomorphic paper object, the destruction prompt effect is turned off.

[0106] When it is determined that the mouse has moved into the second response area of ​​the skeuomorphic paper object and the mouse state is determined to be in the pressed state, it is determined to perform a destruction operation. During the execution of the destruction operation, a destruction animation is also displayed, so that the entire destruction operation has a dynamic effect, so that the user can more intuitively understand the destruction operation of the skeuomorphic paper object. The effect presented by the destruction operation can be as follows Figure 1b As shown. Figure 1b In the figure, (2) represents the effect of the destruction operation of the skeuomorphic paper object.

[0107] The above-mentioned destruction operation may be a default destruction operation of the skeuomorphic paper object in the graphics library, so that the user can better use the skeuomorphic paper object, thereby reducing the time and energy spent by the user on drawing or learning the UI.

[0108] In the embodiment of the present application, the second response area can be the upper right corner hot zone range, the lower right corner hot zone range, the lower left corner hot zone range or the upper left corner hot zone range, but is not limited thereto and can be flexibly adjusted according to specific application scenarios or user needs. In addition, the second response area can be consistent with the first response area or inconsistent, and can be flexibly set according to application scenarios.

[0109] But optimally, the second response area is the upper right corner hot zone range, so that the destruction operation of the skeuomorphic paper object is more in line with the user's habit of destroying paper objects. Figure 1a The second response area shown in (ie, the upper right corner area of ​​the simulated paper object) is the optimal second response area of ​​the simulated paper object.

[0110] Through the above method, the destruction operation of the skeuomorphic paper object is consistent with the destruction operation of the paper object in the real world, so that the destruction operation of the skeuomorphic paper object conforms to the user's habit of destroying paper objects, so that when the user interacts with the UI, there is no need to learn the interaction knowledge of the UI, and the user can directly interact based on life experience, which is conducive to improving the usability and interactivity of the graphics library. At the same time, it also avoids developers spending a lot of time and energy to consider the interaction operation and interaction effect of paper objects.

[0111] The page turning animation corresponding to the page turning operation of the simulacrum paper object can be predefined according to the mouse state. Specifically, for the simulacrum paper object to be turned, it is determined whether the mouse state is in a moving state, a pressed state, or a released state.

[0112] When it is determined that the mouse state is in the pressed state, and it is determined that the current position of the mouse is in the first response area of ​​the simulacrum paper object, the page turning animation of the simulacrum paper object is activated, and the page turning animation is drawn.

[0113] When the mouse state is determined to be in the released state, if the current position of the mouse is determined to exceed the preset length of the skeuomorphic paper object, the drawing of the page turning animation is determined to be completed. The preset length may be half the length of the skeuomorphic paper object, but is not limited thereto and may be flexibly adjusted according to specific application scenarios or user needs.

[0114] When it is determined that the mouse state is in a moving state, if the page turning animation of the skeuomorphic paper object has been activated, the page turning animation is performed according to the current position of the mouse. If the page turning animation of the skeuomorphic paper object has not been activated (that is, it is determined that the mouse has not been pressed), and the current position of the mouse is in the first response area of ​​the skeuomorphic paper object, the prompt effect of page turning is displayed.

[0115] Through the above method, the page turning animation of the skeuomorphic paper object is realized, so that the skeuomorphic paper object has a page turning animation, so that during the interactive operation of turning pages, the page turning animation of the skeuomorphic paper object is displayed to the user, thereby providing the user with an intuitive operation effect, which is conducive to the user to more clearly understand the specific effect of the interactive operation.

[0116] Optionally, in the embodiment of the present application, the page turning animation of the simulacrum paper object can also be predefined according to the touch state or keyboard operation (such as a specific key combination). The touch state can be a finger touch state of the touch screen or a stylus touch state of the touch screen.

[0117] The specific predefinition process of predefining the page turning animation of the skeuomorphic paper object according to the touch state or keyboard operation (such as a specific key combination) is consistent with the specific predefinition process of predefining the interactive animation of the skeuomorphic object according to the mouse state, and will not be repeated here.

[0118] The predefined process of the destruction animation corresponding to the destruction operation of the skeuomorphic paper object and the interactive animation corresponding to other interactive operations are consistent with the predefined process of the page turning animation of the skeuomorphic paper object, and will not be repeated here.

[0119] (II) Object-oriented book objects

[0120] In the embodiment of the present application, the simulated book object may be composed of book pages (such as simulated paper objects) bound together. In the graphic library, the position and size of the simulated book object may determine the position and size of all book pages in the simulated book object.

[0121] In addition, in order to further ensure that the skeuomorphic book object is consistent with the book object in the real world, you can paste skeuomorphic paper objects or drawings on the skeuomorphic book object in the graphics library, but you cannot nest skeuomorphic book objects, skeuomorphic loose-leaf album objects, and skeuomorphic scroll objects.

[0122] The above-mentioned skeuomorphic book object has skeuomorphic interactive operations and interactive animations corresponding to the interactive operations. The interactive operations may include page turning operations, destroy operations, and the like, and the interactive animations may include page turning animations corresponding to page turning operations, destroy animations corresponding to destroy operations, and the like, but are not limited thereto.

[0123] The page turning operation of the aforementioned realistic book object is consistent with the page turning operation of the aforementioned realistic paper object, and will not be described in detail here.

[0124] However, it should be noted that the page turning operation of the skeuomorphic book object may include a page turning operation of turning to the previous page and a page turning operation of turning to the next page.

[0125] When the page turning operation of the skeuomorphic book object is a page turning operation to the previous page, the first response area is optimally the hot zone range in the lower left corner of the skeuomorphic book object, so that the execution position of the page turning animation of the skeuomorphic book object turning to the previous page is more in line with the user's page turning habits, thereby helping to further improve the usability and interactivity of the graphics library.

[0126] For example, in Figure 2a The first response area of ​​the simulated book object indicated by (1) (i.e., the hot zone range of the lower left corner of the simulated book object) is the optimal first response area of ​​the simulated book object. The effect presented by the page turning operation of the simulated book object to the previous page can be as follows Figure 2b As shown. Figure 2b In the figure, (1) represents the effect presented by the page turning operation of the simulated book object to the previous page.

[0127] When the page turning operation of the skeuomorphic book object is a page turning operation to the next page, the first response area is optimally the hot zone range in the lower right corner of the skeuomorphic book object, so that the execution position of the page turning animation of the skeuomorphic book object turning to the next page is more in line with the user's page turning habits, thereby helping to further improve the usability and interactivity of the graphics library.

[0128] For example, in Figure 2a The first response area of ​​the simulated book object indicated by (2) (i.e., the hot zone range at the lower right corner of the simulated book object) is the optimal first response area of ​​the simulated book object. The effect presented by the page turning operation of the simulated book object to the previous page can be as follows: Figure 2b As shown. Figure 2b In the figure, (2) represents the effect of turning the page of the simulated book object to the previous page.

[0129] The destruction operation of the simulated book object is the same as the destruction operation of the simulated paper object, which will not be repeated here.

[0130] The second response area in the above-mentioned destruction operation of the simulated book object is optimally the upper right corner hot zone range of the simulated book object. The optimal second response area can be as follows: Figure 2a As shown. Figure 2a The second response area of ​​the simulated book object indicated by (3) (i.e., the upper right corner hot zone range of the simulated book object) is the optimal second response area of ​​the simulated book object. The effect presented by the destruction operation of the simulated book object can be as follows: Figure 2b As shown. Figure 2b In the figure, (3) represents the effect of the destruction operation of the skeuomorphic book object.

[0131] The effect of the destruction process of the destruction operation of the above-mentioned skeuomorphic book object can be as follows Figure 2c As shown. Figure 2c In the figure, (1) represents the first process of destroying a book page (i.e., tearing off a book page), and (2) represents the second process of destroying a book page (i.e., tearing off a book page).

[0132] In addition, the above-mentioned realistic book object also has a cover and a static effect. Figure 2b In the figure, (4) represents the cover effect presented by the realistic book object, and (5) represents the static effect of the book page presented by the realistic book object.

[0133] The page turning animation, destruction animation and other interactive animations corresponding to the interactive operations of the above-mentioned realistic book object are consistent with the page turning animation, destruction animation and other interactive animations corresponding to the above-mentioned realistic paper object, and will not be repeated here.

[0134] (III) Objects of skeuomorphic loose-leaf albums

[0135] In the embodiment of the present application, the skeuomorphic loose-leaf album object may be composed of loose-leaf pages (such as skeuomorphic paper objects) bound together. In the graphic library, the position and size of the skeuomorphic loose-leaf album object may determine the position and size of all active pages in the skeuomorphic loose-leaf album object.

[0136] In addition, in order to further ensure that the skeuomorphic loose-leaf album object is consistent with the loose-leaf album object in the real world, you can paste skeuomorphic paper objects or drawings on the skeuomorphic loose-leaf album object in the graphics library, but you cannot nest skeuomorphic book objects, skeuomorphic loose-leaf album objects, and skeuomorphic scroll objects.

[0137] Furthermore, the above-mentioned skeuomorphic loose-leaf album objects can be placed horizontally or vertically, and can be spread out on both sides or on one side. Therefore, if the skeuomorphic loose-leaf album objects are classified by placement direction, they can be divided into skeuomorphic horizontal loose-leaf album objects and skeuomorphic vertical loose-leaf album objects. If the skeuomorphic loose-leaf album objects are classified by spreading method, they can be divided into skeuomorphic single-sided loose-leaf album objects and skeuomorphic double-sided loose-leaf album objects.

[0138] Furthermore, combined with the placement direction and unfolding method of the skeuomorphic loose-leaf album object, the skeuomorphic loose-leaf album object can be specifically divided into a skeuomorphic horizontal double-sided loose-leaf album object, a skeuomorphic horizontal single-sided loose-leaf album object, a skeuomorphic vertical double-sided loose-leaf album object, and a skeuomorphic vertical single-sided loose-leaf album object.

[0139] The skeuomorphic loose-leaf book object has skeuomorphic interactive operations and interactive animations corresponding to the interactive operations. The interactive operations may include page turning operations, destroy operations, etc., and the interactive animations may include page turning animations corresponding to page turning operations, destroy animations corresponding to destroy operations, etc., but are not limited thereto.

[0140] The page turning operation of the above-mentioned skeuomorphic loose-leaf book object is consistent with the page turning operation of the above-mentioned skeuomorphic paper object, and will not be repeated here.

[0141] However, it should be noted that the page turning operation of the skeuomorphic loose-leaf book object may include a page turning operation of turning to the previous page and a page turning operation of turning to the next page.

[0142] When the page turning operation of the skeuomorphic loose-leaf album object is a page turning operation to turn to the next page, the optimal first response area of ​​the skeuomorphic horizontal single-sided loose-leaf album object, the skeuomorphic horizontal double-sided loose-leaf album object, the skeuomorphic vertical single-sided loose-leaf album object, and the skeuomorphic vertical double-sided loose-leaf album object are all within the lower right corner hot zone range.

[0143] For example, for a page turning operation to the next page, Figure 3aThe first response area of ​​the skeuomorphic horizontal single-sided loose-leaf album object indicated by (1) (i.e., the lower right corner hot zone of the skeuomorphic horizontal single-sided loose-leaf album object) is the optimal first response area of ​​the skeuomorphic horizontal single-sided loose-leaf album object. The effect of the page turning operation to the next page of the skeuomorphic horizontal single-sided loose-leaf album object is as follows: Figure 3b As shown. Figure 3b In the figure, (1) represents the page turning effect of turning to the next page of the skeuomorphic horizontal single-sided loose-leaf book object.

[0144] In such Figure 3a The first response area of ​​the skeuomorphic horizontal double-sided loose-leaf album object indicated by (2) (i.e., the lower right corner hot zone of the skeuomorphic horizontal double-sided loose-leaf album object) is the optimal first response area of ​​the skeuomorphic horizontal double-sided loose-leaf album object. The effect of the page turning operation to the next page of the skeuomorphic horizontal double-sided loose-leaf album object is as follows: Figure 3b As shown. Figure 3b In the figure, (2) represents the page turning effect of the skeuomorphic horizontal double-sided loose-leaf book object.

[0145] In such Figure 3a The first response area of ​​the skeuomorphic vertical single-sided loose-leaf album object indicated by (3) (i.e., the lower right corner hot zone of the skeuomorphic vertical single-sided loose-leaf album object) is the optimal first response area of ​​the skeuomorphic vertical single-sided loose-leaf album object. The effect of the page turning operation of the skeuomorphic vertical single-sided loose-leaf album object to the next page is as follows: Figure 3b As shown. Figure 3b In the figure, (3) represents the page turning effect of the skeuomorphic vertical single-sided loose-leaf book object.

[0146] In such Figure 3a The first response area of ​​the skeuomorphic vertical double-sided loose-leaf album object indicated by (4) (i.e., the lower right corner hot zone of the skeuomorphic vertical double-sided loose-leaf album object) is the optimal first response area of ​​the skeuomorphic vertical double-sided loose-leaf album object. The effect of the page turning operation of the skeuomorphic vertical double-sided loose-leaf album object to the next page is as follows: Figure 3b As shown. Figure 3b In the figure, (4) represents the page turning effect of the skeuomorphic vertical double-sided loose-leaf book object.

[0147] When the page turning operation of the skeuomorphic loose-leaf album object is a page turning operation to the previous page, the optimal first response area of ​​the skeuomorphic horizontal double-sided loose-leaf album object is the lower left corner hot zone range, and the optimal first response area of ​​the skeuomorphic vertical double-sided loose-leaf album object is the upper right corner hot zone range.

[0148] For example, for a page turning operation to the previous page, Figure 3cThe first response area of ​​the skeuomorphic horizontal double-sided loose-leaf album object indicated by (1) (i.e., the lower left corner hot zone range of the skeuomorphic horizontal double-sided loose-leaf album object) is the optimal first response area of ​​the skeuomorphic horizontal double-sided loose-leaf album object. The effect of the page turning operation to the previous page of the skeuomorphic horizontal double-sided loose-leaf album object is as follows: Figure 3d As shown. Figure 3d In the figure, (1) represents the page turning effect of turning to the previous page of the skeuomorphic horizontal double-sided loose-leaf book object.

[0149] exist Figure 3c The first response area of ​​the skeuomorphic vertical double-sided loose-leaf album object indicated by (2) (i.e., the upper right corner hot zone range of the skeuomorphic vertical double-sided loose-leaf album object) is the optimal first response area of ​​the skeuomorphic vertical double-sided loose-leaf album object. The effect of the page turning operation of the skeuomorphic vertical double-sided loose-leaf album object to the previous page is as follows: Figure 3d As shown. Figure 3d In the figure, (2) represents the page turning effect of turning to the previous page of the skeuomorphic vertical double-sided loose-leaf book object.

[0150] The destruction operation of the above-mentioned skeuomorphic loose-leaf book object is the same as the destruction operation of the above-mentioned skeuomorphic paper object, which will not be repeated here.

[0151] However, it should be noted that due to the different placement directions of the skeuomorphic loose-leaf book object, the optimal position of the second response area of ​​the destroy operation is not exactly the same under different placement directions and spreading methods.

[0152] When the skeuomorphic loose-leaf album object is placed horizontally, the optimal positions of the second response areas of the skeuomorphic horizontal single-sided loose-leaf album object and the skeuomorphic horizontal double-sided loose-leaf album object are both within the upper right corner hot zone range.

[0153] For example, in Figure 3e The second response area of ​​the skeuomorphic horizontal single-sided loose-leaf album object indicated by (1) (i.e., the upper right corner hot zone range of the skeuomorphic horizontal single-sided loose-leaf album object) is the optimal second response area of ​​the skeuomorphic horizontal single-sided loose-leaf album object. The effect presented by the destruction operation of the skeuomorphic horizontal single-sided loose-leaf album object can be as follows: Figure 3f As shown. Figure 3f In the figure, (1) represents the destruction effect of the destruction operation of the skeuomorphic horizontal single-sided loose-leaf album object.

[0154] exist Figure 3e The second response area of ​​the skeuomorphic horizontal double-sided loose-leaf album object indicated by (2) (i.e., the upper right corner hot zone range of the skeuomorphic horizontal double-sided loose-leaf album object) is the optimal second response area of ​​the skeuomorphic horizontal double-sided loose-leaf album object. The effect presented by the destruction operation of the skeuomorphic horizontal double-sided loose-leaf album object can be as follows: Figure 3f As shown. Figure 3fIn the figure, (2) represents the destruction effect of the destruction operation of the skeuomorphic horizontal double-sided loose-leaf album object.

[0155] When the skeuomorphic loose-leaf album object is placed vertically, the optimal positions of the second response areas of the skeuomorphic vertical single-sided loose-leaf album object and the skeuomorphic vertical double-sided loose-leaf album object are both within the lower left corner hot zone range.

[0156] For example, in Figure 3e The second response area of ​​the skeuomorphic vertical single-sided loose-leaf album object indicated by (3) (i.e., the lower left corner hot zone range of the skeuomorphic vertical single-sided loose-leaf album object) is the optimal second response area of ​​the skeuomorphic vertical single-sided loose-leaf album object. The effect presented by the destruction operation of the skeuomorphic vertical single-sided loose-leaf album object can be as follows: Figure 3f As shown. Figure 3f In the figure, (3) represents the destruction effect of the destruction operation of the skeuomorphic vertical single-sided loose-leaf album object.

[0157] exist Figure 3e The second response area of ​​the skeuomorphic vertical double-sided loose-leaf album object indicated by (4) (i.e., the lower left corner hot zone range of the skeuomorphic vertical double-sided loose-leaf album object) is the optimal second response area of ​​the skeuomorphic vertical double-sided loose-leaf album object. The effect presented by the destruction operation of the skeuomorphic vertical double-sided loose-leaf album object can be as follows Figure 3f As shown. Figure 3f In the figure, (4) represents the destruction effect of the destruction operation of the skeuomorphic vertical double-sided loose-leaf album object.

[0158] In addition, the above-mentioned skeuomorphic loose-leaf book object also has a cover and a static effect. Figure 3g Among them, (1) represents the cover effect of a skeuomorphic horizontal single-sided loose-leaf album object, (2) represents the cover effect of a skeuomorphic vertical single-sided loose-leaf album object, (3) represents the cover effect of a skeuomorphic horizontal double-sided loose-leaf album object, and (4) represents the cover effect of a skeuomorphic vertical double-sided loose-leaf album object.

[0159] exist Figure 3h Among them, (1) represents the static effect of the loose-leaf of the skeuomorphic horizontal single-sided loose-leaf album object, (2) represents the static effect of the loose-leaf of the skeuomorphic vertical single-sided loose-leaf album object, (3) represents the static effect of the loose-leaf of the skeuomorphic horizontal double-sided loose-leaf album object, and (4) represents the static effect of the loose-leaf of the skeuomorphic vertical double-sided loose-leaf album object.

[0160] The page turning animation, destruction animation and other interactive animations corresponding to the interactive operations of the above-mentioned skeuomorphic loose-leaf book object are consistent with the page turning animation, destruction animation and other interactive animations corresponding to the above-mentioned skeuomorphic paper object, and will not be repeated here.

[0161] (IV) Skeuomorphic Scroll Object

[0162] In the embodiment of the present application, in order to further ensure that the skeuomorphic scroll object is consistent with the scroll object in the real world, a skeuomorphic paper object or a drawing can be pasted on the skeuomorphic scroll object in the graphics library, but a skeuomorphic book object, a skeuomorphic loose-leaf album object and a skeuomorphic scroll object cannot be nested.

[0163] Furthermore, the above-mentioned skeuomorphic scroll object can also be placed horizontally or vertically, and can also be a single-axis structure or a double-axis structure. Therefore, if the skeuomorphic scroll objects are classified by placement direction, they can be divided into skeuomorphic vertical scrolls and skeuomorphic horizontal scrolls. If the skeuomorphic scroll objects are classified by axis structure, they can be divided into skeuomorphic double-axis scroll objects and skeuomorphic single-axis scroll objects.

[0164] Furthermore, in combination with the classification of placement direction and axis structure, the skeuomorphic scroll object can be a skeuomorphic longitudinal single-axis scroll object, a skeuomorphic longitudinal double-axis scroll object, a skeuomorphic horizontal single-axis scroll object, and a skeuomorphic horizontal double-axis scroll object.

[0165] The above-mentioned skeuomorphic scroll object has skeuomorphic swap operations and interactive animations corresponding to the swap operations. The interactive operations may include operations such as expansion or folding operations, and the interactive animations may include animations such as expansion or folding animations corresponding to the expansion or folding operations, but are not limited thereto.

[0166] The specific operations of expanding or closing the above-mentioned skeuomorphic scroll object are as follows:

[0167] When it is determined that the skeuomorphic scroll object is a skeuomorphic longitudinal single-axis scroll object, the axis of the skeuomorphic longitudinal single-axis scroll object is controlled to remain stationary, and when it is determined that the axis of the skeuomorphic longitudinal single-axis scroll object is clicked, the skeuomorphic longitudinal single-axis scroll object is expanded downward or folded upward, so that the effect presented by the interactive operation of the skeuomorphic longitudinal single-axis scroll object is consistent with the effect presented by a vertically placed single-axis scroll in daily life environment, thereby making the interactive operation of the skeuomorphic longitudinal single-axis scroll object more in line with user habits, so that users (such as users) can use UI controls in the UI (such as skeuomorphic longitudinal single-axis scroll objects) more directly based on life experience.

[0168] For example, when the skeuomorphic scroll object is a skeuomorphic vertical single-axis scroll object, the effect presented by the unfolding or folding interactive operation can be as follows: Figure 4a As shown. Figure 4a In the figure, (1) (i.e., the scroll on the left) represents the closing effect of the skeuomorphic vertical single-axis scroll object, and (2) (i.e., the scroll on the right) represents the expanding effect of the skeuomorphic vertical single-axis scroll object.

[0169] When it is determined that the skeuomorphic scroll object is a skeuomorphic longitudinal dual-axis scroll object, the upper axis of the skeuomorphic longitudinal dual-axis scroll object is controlled to remain stationary, and when it is determined that any axis of the skeuomorphic longitudinal dual-axis scroll object (such as the upper axis or the lower axis) is clicked, the skeuomorphic longitudinal dual-axis scroll object is expanded downward or closed upward, so that the effect presented by the interactive operation of the skeuomorphic longitudinal dual-axis scroll object is consistent with the effect presented by a vertically placed dual-axis scroll in daily life environment, thereby making the interactive operation of the skeuomorphic longitudinal dual-axis scroll object more in line with user habits, so that users (such as users) can use UI controls in the UI (such as skeuomorphic longitudinal dual-axis scroll objects) more directly based on life experience.

[0170] For example, when the skeuomorphic scroll object is a skeuomorphic vertical dual-axis scroll object, the effect presented by the unfolding or folding interactive operation may be as follows: Figure 4b As shown. Figure 4b In the figure, (1) (i.e., the scroll on the left) represents the closing effect of the skeuomorphic vertical double-axis scroll object, and (2) (i.e., the scroll on the right) represents the expanding effect of the skeuomorphic vertical double-axis scroll object.

[0171] When it is determined that the skeuomorphic scroll object is a skeuomorphic horizontal dual-axis scroll object, the left axis of the skeuomorphic horizontal dual-axis scroll object is controlled to remain stationary, and when it is determined that any axis of the skeuomorphic horizontal dual-axis scroll object (such as the left axis or the right axis) is clicked, the skeuomorphic horizontal dual-axis scroll object is expanded to the right or folded to the left, so that the effect presented by the interactive operation of the skeuomorphic horizontal dual-axis scroll object is consistent with the effect presented by a horizontally placed dual-axis scroll in daily life environment, thereby making the interactive operation of the skeuomorphic horizontal dual-axis scroll object more in line with user habits, so that users (such as users) can use UI controls in the UI (such as skeuomorphic horizontal dual-axis scroll objects) more directly based on life experience.

[0172] For example, when the skeuomorphic scroll object is a skeuomorphic horizontal dual-axis scroll object, the effect of the unfolding or folding interactive operation can be as follows: Figure 4c As shown. Figure 4c In the figure, (1) represents the closing effect of the skeuomorphic horizontal dual-axis scroll object, and (2) represents the expanding effect of the skeuomorphic horizontal dual-axis scroll object.

[0173] When it is determined that the skeuomorphic scroll object is a skeuomorphic horizontal single-axis scroll object, the axis of the skeuomorphic horizontal single-axis scroll object is controlled to remain stationary, and when it is determined that the axis of the skeuomorphic horizontal single-axis scroll object is clicked, the skeuomorphic horizontal single-axis scroll object is expanded to the right or folded to the left, so that the effect presented by the interactive operation of the skeuomorphic horizontal single-axis scroll object is consistent with the effect presented by a horizontally placed single-axis scroll in daily life environment, thereby making the interactive operation of the skeuomorphic horizontal single-axis scroll object more in line with user habits, so that users (such as users) can use UI controls in the UI (such as skeuomorphic horizontal single-axis scroll objects) more directly based on life experience.

[0174] For example, when the skeuomorphic scroll object is a skeuomorphic horizontal single-axis scroll object, the effect of the unfolding or folding interactive operation can be as follows: Figure 4d As shown. Figure 4d In the figure, (1) represents the closing effect of the skeuomorphic horizontal single-axis scroll object, and (2) represents the expanding effect of the skeuomorphic horizontal single-axis scroll object.

[0175] The expansion or collapse operation of the skeuomorphic scroll object may be a default expansion or collapse operation of the skeuomorphic scroll object, so that the user can better use the skeuomorphic scroll object, thereby reducing the time and energy spent by the user on drawing or learning the UI.

[0176] The expansion or collapse operation of the above-mentioned skeuomorphic scroll object can be directly controlled according to the target function (such as the system script function), and can also be controlled by the default interactive operation.

[0177] Through the interactive operation of the skeuomorphic scroll object, the expansion or merging operation of the skeuomorphic scroll object is consistent with the expansion or merging operation of the scroll object in the real world, so that the expansion or merging operation of the skeuomorphic scroll object fits the user's expansion or merging habits for the scroll object, so that when the user interacts with the UI, there is no need to learn the interactive knowledge of the UI, and the user can directly interact based on life experience, which is conducive to improving the usability and interactivity of the graphics library. At the same time, it also avoids developers spending a lot of time and energy to consider the interactive operation and interactive effect of the scroll object.

[0178] In addition, the axis in the expansion or closing operation of the above-mentioned skeuomorphic scroll object can also be used as the optimal position of the third response area. That is, when the mouse moves into the third response area and the mouse state is pressed, the expansion or closing operation is performed. Among them, the axis of the skeuomorphic scroll object is the optimal third response area, so that the expansion or closing operation of the skeuomorphic scroll object is more in line with user habits.

[0179] Taking the skeuomorphic horizontal single-axis scroll object and the skeuomorphic horizontal double-axis scroll object as examples, the optimal third response area can be as follows: Figure 4e As shown. Figure 4e Among them, (1) represents the optimal third response area of ​​the skeuomorphic horizontal uniaxial scroll object (i.e., the axis of the skeuomorphic horizontal uniaxial scroll object), and (2) represents the optimal third area of ​​the skeuomorphic horizontal dual-axis scroll object (i.e., the axis of the skeuomorphic horizontal dual-axis scroll object).

[0180] However, the third response area may not be limited to the axis of the skeuomorphic scroll object, and may be adjusted according to specific application scenarios.

[0181] The predefined process of the expansion or closing animation of the skeuomorphic scroll object is consistent with the predefined process of the page turning animation of the skeuomorphic paper object, and will not be described in detail here.

[0182] In summary, the skeuomorphic objects in the graphics library at least have the above-mentioned skeuomorphic interactive operations and interactive animations, which significantly improves the usability and interactivity of the graphics library.

[0183] Therefore, the graphic library in the embodiment of the present application is pre-equipped with a skeuomorphic object having the above-mentioned skeuomorphic interactive operation. In addition, the skeuomorphic object also has an interactive animation corresponding to the interactive operation.

[0184] Further, the specific process of implementing UI drawing based on the graphics library with the above-mentioned skeuomorphic objects can be referred to Figure 5 As shown. Figure 5 A flow chart of a method for drawing an interface provided in an embodiment of the present application, the method comprising:

[0185] S501, calling a graphics library having skeuomorphic objects.

[0186] In the embodiment of the present application, the graphics library with skeuomorphic objects can be called in the following manner:

[0187] First, an operation file is generated according to the backed-up functional unit model. The operation file may include information for calling a graphics library with skeuomorphic objects. Then, by running the operation file, the graphics library is called, so that the drawing of the UI is realized by the graphics library with skeuomorphic objects in the subsequent process.

[0188] Before generating the running file based on the backed-up functional unit model, it is also necessary to first receive the functional unit model transmitted by the developer, and then back up the functional unit model to generate a copy of the functional unit model, that is, generate a backed-up functional unit model, so as to facilitate the operation of the running file generated based on the backed-up functional unit model and realize the call to the graphics library with skeuomorphic objects.

[0189] The above functional unit model can be generated by developers in the studio.

[0190] In addition, in the embodiment of the present application, the graphics library, as a subsystem of the operating system, can be used for drawing graphics. The operating system provides a functional unit model as a development environment, so that developers can use the scripting language (i.e., metalanguage) provided by the operating system to write code, thereby completing the creation of the functional unit model. Therefore, the specific generation process of the developer generating the functional unit model can be as follows:

[0191] First, use the metalanguage script to create the functional unit model. In the process of creating the functional unit model, call the graphics library creation function to create the root paper object, and specify the name, size, unit, position, theme style, etc. of the object. Then, create any N objects of the simulated objects such as sub-paper objects, book objects, loose-leaf album objects, scroll objects, etc. N is a positive integer. And continue to create two-dimensional (English: 2-dimention, abbreviated as 2D) graphics (such as point objects, line objects, rectangles) objects on any N objects created, so as to draw the interface content through each created object. Since the screen object is defined as the viewport window in the graphics library. Therefore, it is also necessary to create a screen object so that the root paper object can be associated with the screen object, so as to facilitate the user to browse the interface. After the screen object is created, the creation of the functional unit model can be completed.

[0192] S502, drawing a UI through a graphics library.

[0193] After calling the graphics library with skeuomorphic objects in step S501, the drawing of the UI is realized through the graphics library.

[0194] Specifically, the screen object and the skeuomorphic object to be drawn are rendered onto the physical screen through the graphics library, so that the user can trigger the interactive operation of the skeuomorphic object to be drawn through the mouse or finger.

[0195] Therefore, the UI drawing process can be divided into a development phase and a running phase. The development phase includes the creation process of the functional unit model described in step S501, and the running phase includes the calling process of the graphics library in steps S501 and S502 and the drawing process of the UI through the graphics library.

[0196] In summary, the interface drawing method proposed in the present application uses the anthropomorphic objects (such as anthropomorphic paper objects, anthropomorphic book objects, anthropomorphic loose-leaf album objects, anthropomorphic scroll objects, etc.) provided by the graphics library as the carrier of the graphics, and at the same time, based on the default interactive operations and interactive animations possessed by the anthropomorphic objects provided by the graphics library, the anthropomorphic objects are made consistent with the effects presented in the real world, so that when developers draw the UI, they do not need to consider developing interactive operations and interactive animations. After that, they only need to design the interface based on the anthropomorphic objects of fixed sizes and focus on realizing the display content (i.e., drawing various graphics on the anthropomorphic objects). Compared with the prior art in which developers need to implement interactive operations and interactive animations by themselves, the interface drawing method provided in the embodiment of the present application significantly reduces the time and energy of developers, thereby effectively reducing the amount of code and development difficulty, facilitating maintenance, and improving efficiency.

[0197] At the same time, by calling the graphic library of skeuomorphic objects with skeuomorphic interactive operations to draw the UI, users can interact based on their life experience, such as browsing the next page by turning the pages of a book (i.e., page turning operation). Compared with the prior art where users need to learn various UI controls, the interface drawing method provided in the embodiment of the present application significantly reduces the user's time and energy, thereby significantly reducing the user's learning cost. This makes the graphic library more interactive and easy to use.

[0198] Based on the same inventive concept, the present application also provides a method for drawing an interface, such as Figure 6 The figure is a schematic diagram of the structure of an interface drawing device provided by the present application, the device comprising:

[0199] The calling module 601 is used to call a graphics library having a skeuomorphic object; wherein the skeuomorphic object has a skeuomorphic interactive operation;

[0200] The processing module 602 is used to draw a user interface UI through the graphics library.

[0201] In a possible implementation, the device further includes a pre-defined module, and before calling the graphics library having a skeuomorphic object, the pre-defined module is used to pre-define the interactive operation of the skeuomorphic object and the interactive animation corresponding to the interactive operation according to the mouse state or the touch state, so that the skeuomorphic object has the skeuomorphic interactive operation.

[0202] In a possible implementation, the interactive animation includes a page turning animation, and the predefined module is further configured to activate the page turning animation of the skeuomorphic object and draw the page turning animation if it is determined that the mouse state is a pressed state and the current position of the mouse is in the first response area of ​​the skeuomorphic object;

[0203] If it is determined that the mouse state is a moving state, when the page turning animation of the skeuomorphic object has been activated, executing the page turning animation according to the current position of the mouse;

[0204] If it is determined that the mouse state is the moving state, when the page turning animation of the skeuomorphic object is not activated and the current position of the mouse is in the first response area of ​​the skeuomorphic object, a page turning prompt effect is displayed; wherein the page turning prompt effect is to roll up a corner of a paper in the first response area;

[0205] If it is determined that the mouse state is a released state, when the current position of the mouse exceeds a preset length of the skeuomorphic object, it is determined that the drawing of the page turning animation is completed.

[0206] In a possible implementation, the interactive operation includes a page turning operation, and the page turning operation is specifically:

[0207] When it is determined that the mouse moves into the first response area of ​​the skeuomorphic object, a page turning prompt effect is displayed, and when it is determined that the mouse state is a pressed state, the page turning operation is performed; wherein the skeuomorphic object is any one of a skeuomorphic paper object, a skeuomorphic book object, and a skeuomorphic loose-leaf album object.

[0208] In a possible implementation manner, the interaction operation includes a destroy operation, and the destroy operation is specifically:

[0209] When it is determined that the mouse moves into the second response area of ​​the skeuomorphic object, a prompt effect of destruction is displayed, and when it is determined that the mouse state is a pressed state, it is determined to execute the destruction operation; wherein the skeuomorphic object is any one of a skeuomorphic paper object, a skeuomorphic book object, and a skeuomorphic loose-leaf album object.

[0210] In a possible implementation, the skeuomorphic object includes a skeuomorphic scroll object, and the interactive operation includes an expansion or a collapse operation of the skeuomorphic scroll object, and the expansion or collapse operation is specifically:

[0211] If it is determined that the skeuomorphic scroll object is a skeuomorphic vertical scroll object, when it is determined that the axis of the skeuomorphic vertical scroll object is clicked, the skeuomorphic vertical scroll object is expanded downwards or the skeuomorphic vertical scroll object is closed upwards;

[0212] If it is determined that the skeuomorphic scroll object is a skeuomorphic horizontal scroll object, when it is determined that the axis of the skeuomorphic horizontal scroll object is clicked, the skeuomorphic horizontal scroll object is expanded to the right or closed to the left;

[0213] If it is determined that the skeuomorphic vertical scroll object or the skeuomorphic horizontal scroll object is a skeuomorphic dual-axis scroll object, controlling the upper axis or the left axis of the skeuomorphic dual-axis scroll object to remain stationary;

[0214] If it is determined that the skeuomorphic longitudinal scroll object or the skeuomorphic transverse scroll object is a skeuomorphic single-axis scroll object, the axis of the skeuomorphic single-axis scroll object is controlled to remain stationary.

[0215] In a possible implementation, the calling module 601 is specifically configured to generate an operation file according to the backed-up functional unit model; wherein the operation file includes information for calling the graphic library having the skeuomorphic object;

[0216] The graphics library is called by running the running file.

[0217] In a possible implementation, the processing module 602 is specifically used to render the screen object and the skeuomorphic object to be drawn onto the physical screen through the graphics library, so that the user can trigger the interactive operation of the skeuomorphic object to be drawn through a mouse or finger; wherein the screen object is a viewport window of the skeuomorphic object to be drawn.

[0218] Based on the same inventive concept, an electronic device is also provided in the embodiment of the present application. The electronic device can realize the function of the drawing device of the aforementioned interface. Figure 7 , the electronic equipment includes:

[0219] At least one processor 701, and a memory 702 connected to the at least one processor 701. The specific connection medium between the processor 701 and the memory 702 is not limited in the embodiment of the present application. Figure 7 In the example, the processor 701 and the memory 702 are connected via a bus 700. Figure 7 The connections between other components are shown in bold lines, and are not intended to be limiting. The bus 700 can be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, Figure 7 Only one thick line is used in the figure, but it does not mean that there is only one bus or one type of bus. Alternatively, the processor 701 can also be called a controller, and there is no limitation on the name.

[0220] In the embodiment of the present application, the memory 702 stores instructions that can be executed by at least one processor 701. The at least one processor 701 can execute the interface drawing method discussed above by executing the instructions stored in the memory 702. The processor 701 can implement Figure 6 The functions of each module in the device shown.

[0221] Among them, the processor 701 is the control center of the device, and can use various interfaces and lines to connect the various parts of the entire control device. By running or executing instructions stored in the memory 702 and calling data stored in the memory 702, the various functions of the device and process data, the device can be monitored as a whole.

[0222] In one possible design, the processor 701 may include one or more processing units, and the processor 701 may integrate an application processor and a modem processor, wherein the application processor mainly processes an operating system, a user interface, and application programs, and the modem processor mainly processes wireless communications. It is understandable that the modem processor may not be integrated into the processor 701. In some embodiments, the processor 701 and the memory 702 may be implemented on the same chip, and in some embodiments, they may also be implemented separately on separate chips.

[0223] Processor 701 can be a general-purpose processor, such as a central processing unit (CPU), a digital signal processor, an application-specific integrated circuit, a field programmable gate array or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component, and can implement or execute the methods, steps and logic block diagrams disclosed in the embodiments of the present application. A general-purpose processor can be a microprocessor or any conventional processor, etc. The steps of the method for drawing the interface disclosed in the embodiments of the present application can be directly embodied as a hardware processor, or can be executed by a combination of hardware and software modules in the processor.

[0224] The memory 702 is a non-volatile computer-readable storage medium that can be used to store non-volatile software programs, non-volatile computer executable programs and modules. The memory 702 may include at least one type of storage medium, such as a flash memory, a hard disk, a multimedia card, a card-type memory, a random access memory (English: Random Access Memory, abbreviated as RAM), a static random access memory (English: Static Random Access Memory, abbreviated as SRAM), a programmable read-only memory (English: Programmable Read Only Memory, abbreviated as PROM), a read-only memory (English: Read Only Memory, abbreviated as ROM), an electrically erasable programmable read-only memory (English: Electrically Erasable Programmable Read-Only Memory, abbreviated as EEPROM), a magnetic memory, a disk, an optical disk, etc. The memory 702 is any other medium that can be used to carry or store a desired program code in the form of an instruction or data structure and can be accessed by a computer, but is not limited thereto. The memory 702 in the embodiment of the present application can also be a circuit or any other device that can realize a storage function, for storing program instructions and / or data.

[0225] By programming the processor 701, the code corresponding to the interface drawing method described in the above embodiment can be fixed into the chip, so that the chip can execute the code when running. Figure 5 The steps of the interface drawing method of the embodiment shown are as follows: How to design and program the processor 701 is a technology well known to those skilled in the art and will not be described in detail here.

[0226] Based on the same inventive concept, an embodiment of the present application further provides a storage medium, which stores computer instructions. When the computer instructions are executed on a computer, the computer executes the interface drawing method discussed above.

[0227] In some possible implementations, various aspects of the interface drawing method provided in the present application may also be implemented in the form of a program product, which includes program code. When the program product is run on a device, the program code is used to enable the control device to execute the steps of the interface drawing method according to various exemplary implementations of the present application described above in this specification.

[0228] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0229] The present application is described with reference to the flowchart and / or block diagram of the method, device (system) and computer program product according to the embodiment of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, and the combination of the process and / or box in the flowchart and / or block diagram can be realized by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device produce a device for realizing the function specified in one process or multiple processes in the flowchart and / or one box or multiple boxes in the block diagram.

[0230] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device that implements the functions specified in one or more processes in the flowchart and / or one or more boxes in the block diagram.

[0231] These computer program instructions may also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, whereby the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one or more processes in the flowchart and / or one or more boxes in the block diagram.

[0232] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A method for drawing an interface, characterized in that: include: Calling a graphics library having a skeuomorphic object; wherein the skeuomorphic object has a skeuomorphic interactive operation; The user interface UI is drawn through the graphics library.

2. The method according to claim 1, characterized in that Before calling the graphics library with skeuomorphic objects, the method further includes: According to the mouse state or the touch state, the interactive operation of the skeuomorphic object and the interactive animation corresponding to the interactive operation are predefined, so that the skeuomorphic object has the skeuomorphic interactive operation.

3. The method according to claim 2, characterized in that The interactive animation includes a page turning animation, and the interactive animation corresponding to the interactive operation of the skeuomorphic object is predefined according to the mouse state, including: If it is determined that the mouse state is in the pressed state, and it is determined that the current position of the mouse is in the first response area of ​​the skeuomorphic object, activating the page turning animation of the skeuomorphic object, and drawing the page turning animation; If it is determined that the mouse state is a moving state, when the page turning animation of the skeuomorphic object has been activated, executing the page turning animation according to the current position of the mouse; If it is determined that the mouse state is the moving state, when the page turning animation of the skeuomorphic object is not activated and the current position of the mouse is in the first response area of ​​the skeuomorphic object, a page turning prompt effect is displayed; wherein the page turning prompt effect is to roll up a corner of a paper in the first response area; If it is determined that the mouse state is a released state, when the current position of the mouse exceeds a preset length of the skeuomorphic object, it is determined that the drawing of the page turning animation is completed.

4. The method according to claim 1, characterized in that The interactive operation includes a page turning operation, and the page turning operation is specifically: When it is determined that the mouse moves into the first response area of ​​the skeuomorphic object, a page turning prompt effect is displayed, and when it is determined that the mouse state is a pressed state, the page turning operation is performed; wherein the skeuomorphic object is any one of a skeuomorphic paper object, a skeuomorphic book object, and a skeuomorphic loose-leaf album object.

5. The method according to claim 1, characterized in that The interactive operation includes a destroy operation, and the destroy operation is specifically: When it is determined that the mouse moves into the second response area of ​​the skeuomorphic object, a prompt effect of destruction is displayed, and when it is determined that the mouse state is a pressed state, it is determined to execute the destruction operation; wherein the skeuomorphic object is any one of a skeuomorphic paper object, a skeuomorphic book object, and a skeuomorphic loose-leaf album object.

6. The method according to claim 1, characterized in that The skeuomorphic object includes a skeuomorphic scroll object, and the interactive operation includes an expansion or a folding operation of the skeuomorphic scroll object, and the expansion or the folding operation is specifically: If it is determined that the skeuomorphic scroll object is a skeuomorphic vertical scroll object, when it is determined that the axis of the skeuomorphic vertical scroll object is clicked, the skeuomorphic vertical scroll object is expanded downwards or the skeuomorphic vertical scroll object is closed upwards; If it is determined that the skeuomorphic scroll object is a skeuomorphic horizontal scroll object, when it is determined that the axis of the skeuomorphic horizontal scroll object is clicked, the skeuomorphic horizontal scroll object is expanded to the right or closed to the left; If it is determined that the skeuomorphic vertical scroll object or the skeuomorphic horizontal scroll object is a skeuomorphic dual-axis scroll object, controlling the upper axis or the left axis of the skeuomorphic dual-axis scroll object to remain stationary; If it is determined that the skeuomorphic longitudinal scroll object or the skeuomorphic transverse scroll object is a skeuomorphic single-axis scroll object, the axis of the skeuomorphic single-axis scroll object is controlled to remain stationary.

7. The method according to claim 1, characterized in that The calling of the graphics library having the skeuomorphic object comprises: Generate an operation file according to the backed-up functional unit model; wherein the operation file includes information for calling the graphics library having the skeuomorphic object; The graphics library is called by running the running file.

8. The method according to claim 1, characterized in that Drawing a user interface UI through the graphics library includes: The screen object and the skeuomorphic object to be drawn are rendered onto a physical screen through the graphics library, so that a user can trigger the interactive operation of the skeuomorphic object to be drawn through a mouse or a finger; wherein the screen object is a viewport window of the skeuomorphic object to be drawn.

9. An interface drawing device, characterized in that: include: A calling module, used to call a graphics library having a skeuomorphic object; wherein the skeuomorphic object has a skeuomorphic interactive operation; The processing module is used to draw the user interface UI through the graphics library.

10. An electronic device, characterized in that: include: Memory, used to store computer programs; A processor, configured to implement the method steps of any one of claims 1 to 8 when executing a computer program stored in the memory.

11. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method steps described in any one of claims 1 to 8 are implemented.

Images