Vertical screen player layout and interactive module of video playback graphical user interface of electronic device

Abstract

1. Name of the product of this design: Vertical screen player layout and interactive module of the video playback graphical user interface of an electronic device. 2. Purpose of this design product: This design product is used for an electronic device. 3. The key design features of this design product are the part of the graphical user interface for which protection is sought. 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 the graphical user interface: Overall purpose: video playback interaction, local purpose: to realize the layout display and interaction functions of the core interactive buttons at the bottom of the vertical screen player through changes in user operations. 7. Other situations that require explanation Reference diagram description: This design protects the core interactive button layout and interactive part at the bottom of the vertical screen player; Design 1: The main view of Design 1 is a vertical screen playback scene. If the currently playing video has hot comments, after setting the duration (such as 5 seconds), the video title automatically scrolls to display the hot comments, as shown in Design 1 Change State Figure 1, click the hot comments to evoke the comment floating layer, as shown in Design 1 Change State Figure 2, swipe right on the current floating layer to switch to the "Introduction" label, as shown in Design 1 Change State Figure 3, continue to swipe right, or click the area outside the floating layer to close the floating layer; Among them, in Design 1 Change State Figure 1, the hot comments and videos are switched by swiping horizontally. Design 2: Click the comment button at the bottom of the main view of Design 2, as shown in the change state diagram 1 of Design 2, swipe right on the current floating layer to switch to the "Introduction" label, as shown in the change state diagram 2 of Design 2, continue to swipe right, or click the area outside the floating layer to close the floating layer; Design 3: Click the input box at the bottom of the main view of Design 3, as shown in the change state diagram of Design 3 Design 4: Click the bullet screen switch on the left side of the input box of the main view of Design 4 to close the bullet screen display, as shown in the change state diagram of Design 4; Design 5: Click the like button at the bottom of the main view of Design 5, as shown in the change state diagram of Design 5; Design 6: Click the coin button at the bottom of the main view of Design 6, as shown in the change state diagram of Design 6 as shown; Design 7: Click the favorite button at the bottom of the main view of Design 7, and the currently playing video will be added to the favorites, as shown in the design 7 change state diagram; Design 8: Long press the like button at the bottom of the main view of Design 8 to perform a one-click three-in-one operation, and the process is shown in the design 8 change state diagrams 1, 2, and 3; Design 9: Click the main view of Design 9 to enter the clear screen state, as shown in the design 9 change state diagram; The usage state reference diagram is a rendering of the user interaction interface. The design 1 main view and change state diagrams 1~3 correspond to the design 1 usage state reference diagrams 1~4, and the design 2 main view and change state diagrams 1~2 correspond to the design 2 usage state reference diagrams 1~3, respectively. The main view and changing state diagram of Design 3 correspond to the usage state reference figures 1~2 of Design 3 respectively. The main view and changing state diagram of Design 4 correspond to the usage state reference figures 1~2 of Design 4 respectively. The main view and changing state diagram of Design 5 correspond to the usage state reference figures 1~2 of Design 5 respectively. The main view and changing state diagram of Design 6 correspond to the usage state reference figures 1~2 of Design 6 respectively. The main view and changing state diagram of Design 7 correspond to the usage state reference figures 1~2 of Design 7 respectively. The main view and changing state diagram of Design 8 correspond to the usage state reference figures 1~4 of Design 8 respectively. The main view and changing state diagram of Design 9 correspond to the usage state reference figures 1~2 of Design 9 respectively.

Images