Interactive graphical user interface for editing income and expenditure categories for electronic devices

Abstract

1. Name of the design product: An interactive graphical user interface for editing income and expenditure categories for electronic devices. 2. Purpose of the product of this design: an electronic device. 3. The key design point of this appearance design product lies in the graphical user interface. 4. The picture or photo that best illustrates the key points of the design: Main view of Design 1. 5. Designate Design 1 as the base design. 6.Purpose of Graphical User Interface: It is used to edit the income and expenditure categories. 7. Human-computer interaction method of graphical user interface: In Design 1, the user can click the "Add Subcategory" control in the main view interface of Design 1 to add a secondary category in the primary category, or click the "Add Category" control in the interface to add a new primary category. Users can also click any edit control icon after the added category to perform more operations, such as editing the category name, deleting the category, and adjusting the category order. The human-computer interaction description of Design 2 is the same as that of Design 1. In Design 3, when the user clicks the "Add Category" control in the main view interface of Design 3, a new first-level category can be added. The interface displays a category name input box, presenting the interface change from the main view of Design 3 to the interface change state diagram 1 of Design 3. When the user enters the category name and clicks the "Confirm" control behind the input box, a new first-level category is successfully added, and the interface changes from Design 3 interface change state diagram 1 to Design 3 interface change state diagram 2 are presented. In Design 4, when the user clicks the "Add Subcategory" control behind any first-level category name in the Design 4 main view interface, a second-level category under the first-level category can be added. The interface displays a category name input box, presenting the interface change from the Design 4 main view to the Design 4 interface change state diagram 1. When the user enters the category name and clicks the "Confirm" control behind the input box, a new secondary category under the primary category can be successfully added, presenting the interface changes from Design 4 Interface Change State Diagram 1 to Design 4 Interface Change State Diagram 2. In Design 5, when the user clicks on the triangle control in front of any first-level category name in the main view interface of Design 5, the second-level category content under the first-level category can be expanded, presenting the interface changes from the main view of Design 5 to the interface change status diagram of Design 5. In Design 6, when the user clicks and drags the order adjustment control on the far right of any first-level category in the main view interface of Design 6, the content position of the first-level category (including subcategories) can be adjusted, presenting the interface changes from the main view of Design 6 to the interface change status diagram of Design 6. In Design 7, when the user clicks and drags the order adjustment control on the far right of any secondary category in the Design 7 main view interface to the right, the position of the secondary category content can be adjusted, presenting the interface changes from the Design 7 main view to the Design 7 interface change status diagram. In Design 8, when the user clicks and drags the order adjustment control on the far right of any secondary category in the Design 8 main view interface to the left, the content position of the secondary category can be adjusted to the primary category position, presenting the interface changes from the Design 8 main view to the Design 8 interface change status diagram. In Design 9, when the user clicks and drags the order adjustment control on the far right of any secondary category in the main view interface of Design 9, the position of the content of the secondary category can be adjusted, presenting the interface change from the main view of Design 9 to the interface change state diagram 1 of Design 9. When the user continues to drag the secondary category content to the overlapping position of the primary category, the secondary category content can be moved to the primary category, presenting the interface changes from Design 9 interface change state diagram 1 to Design 9 interface change state diagram 2.

Images