Smart customer service human-computer interaction design graphical user interface for electronic devices

Abstract

1. Name of the product in this design: Graphical User Interface for Intelligent Customer Service Human-Computer Interaction in Electronic Devices. 2. Application of this design: This design is intended for use in an electronic device. 3. The key design feature of this product is its graphical user interface. 4. The image or photograph that best illustrates the design's key points: the front view. 5. Purpose of graphical user interface: used to display content, interface interaction methods, and layout. 6. The area of ​​the graphical user interface in a product: the screen panel in an electronic product. 7. Human-Computer Interaction Method of Graphical User Interface: The main view displays the initial page for configuring the human-computer interaction dialogue flow, showing the root node information in the canvas. Clicking the "Add Child Node" button in the root node leads to the interface change state diagram 1; Interface change state diagram 1 shows the canvas display page after adding a child node. Clicking the menu drawer in the upper right corner of the child node leads to the interface change state diagram 2; Interface change state diagram 2 shows the node menu bar display page, displaying operations such as viewing, editing, deleting, and copying nodes in a pop-up window. Clicking the "Edit Node" button leads to the interface change state diagram 3; Interface change state diagram 3 is the dialogue flow node editing interface, where node information can be edited. Filling in basic node information, node entry conditions, node execution strategies, and execution actions completes the node information editing. Adding multiple child nodes and sibling nodes in the canvas leads to the interface change state diagram 4; Interface change state diagram 4 is the node logical order adjustment interface, where the node logical order can be adjusted by dragging and dropping. Long-pressing a node with the left mouse button enters the node selection state, and if the node has child nodes... The system automatically collapses all child nodes of the selected node, and the interface changes to state 5. State 5 is the node selection interface. Drag and drop the selected node to the desired node, and the interface changes to state 6. State 6 is the dialogue flow node movement interface, highlighting the moved node. Releasing the mouse moves the interface to state 7. State 7 is the node logical order adjustment completion interface. After adjusting the node logical order, hovering the mouse over the root node for 5 seconds moves the interface to state 8. State 8 is the node details interface, displaying detailed information about the node, including basic node information, entry conditions, execution strategy, and execution actions. Clicking the test button in the upper right corner moves the interface to state 9. State 9 is the dialogue flow test page, allowing testing of the dialogue flow through simulation. Clicking the data simulation button moves the interface to state 10. State 10 is the data simulation page, simulating the variable data required during the dialogue process.

Images