1. Name of the Design Product:
Graphical User Interface of the
Home Page of Personal Online Banking for Computers. 2. Use of the Design Product: For human-computer interaction and display. 3. Design Key Points of the Design Product: Lies in the interface content of the
graphical user interface that displays information. 4. Picture or Photograph that Best Illustrates the Design Key Points: Front View. 5. The terminal is of an existing design, so the rear view, top view, bottom view, left view, and right view are omitted. 6. Use of the
Graphical User Interface:
Home Page of Personal Online Banking of
Bank of Hangzhou. 7. Human-Computer
Interaction Method of the
Graphical User Interface: The front view shows the state after
logging in to the
home page of Personal Online Banking of
Bank of Hangzhou. At the top are the company logo, global search, switch to accessible version, and user level entry. The first-level menus of personal online banking are arranged, and there are buttons to support the expansion and collapse of quick access. The quick menu entry and its custom functions are displayed;
Bank announcements are shown, and support for viewing more is provided; In this view, the My Assets module (total assets, current money, and investment) and the My Bank Cards module (last four digits of the card, balance, support for displaying hidden amounts, more entries, and adding cards) are shown; On the right is a floating pop-up window that can be collapsed (customer service assistant, feedback, driver installation, QR code display, and pinning function). Changing
state diagram 1 is the changing diagram of the main view. After clicking on "My Assets" to view liabilities, the display will switch to the liability content (display liability entry, credit cards and loans, and switch back to "My Assets"); after hovering the avatar in the upper right corner, the membership level entry, last login time and logout will appear; the common consulting function is fixedly suspended on the right; Changing
state diagram 2 is a slide down from changing
state diagram 1, showing a recommended
list of financial products (including product attributes such as financial product name, annualized rate of return, number of holding days,
risk level and transaction entry), where the first row in the module shows the effect of hovering the mouse over the
list; the common consulting function is fixedly suspended on the right; Changing state diagram 3 is a slide down from changing state diagram 2, showing a recommended
list of fund products (including attributes such as annualized rate of return and
ranking of fund products and transaction entry), and providing a list
paging function, where the first column in the module shows the effect of hovering the mouse over the list ; Common consulting functions are fixedly suspended on the right; Change state diagram 4 is a slide down from change state diagram 3, showing a list of deposit products (including deposit product name,
yield rate, term and other attributes and transaction entry), and providing list
paging function; Common consulting functions are fixedly suspended on the right; Change state diagram 5 is a slide down from change state diagram 4, showing a list of insurance products (including insurance product name and minimum investment amount and other product attributes and transaction entry), and providing list
paging function; The last module of the homepage shows the entrance to the
financial security knowledge classroom, and provides modules with different security functions; Common consulting functions are fixedly suspended on the right; Change state diagram 6 is a slide down from change state diagram 5, showing the last module of the homepage - the entrance to the
financial security knowledge classroom and the entrance to different security functions; The bottom of the page contains contact us, about us, complaints and suggestions, help center, aging-friendly logo, deposit logo and
safety education column logo, etc. The reference figures corresponding to the main view and the changing state figures 1 to 6 are the use state reference figures 1 to 7 respectively.