Ui guidelines (1): intro

Primary window Main Window

When an application on Windows is opened for the first time, a main window is usually displayed, which includes all or part of the following.

1. Menu Bar 2. toolbar 3. taskbar 4. Status Bar

These four parts only occupy a small part of the top and bottom areas. The large area in the middle shows different applications.

 

1. most of the functions provided by the application can be selected from the menu options. when you go to a restaurant, you can see what the menu knows. From the menu of a program, you can also see what functions a program provides for you.

2. the toolbar can be seen as a shortcut to the menu bar, but it is displayed with icons. Generally, the toolbar is configurable. You can add or delete some buttons by yourself.

3. the taskbar is mainly used in the MDI interface. When a page is minimized, it is reduced to an icon in this area. It is similar to the taskbar at the bottom of windows.

4. the status bar is at the bottom of the home page. It generally displays the status of the current operation, and sometimes displays progress bars, time, and other information.

Secondary windows level 2 window

Some operations are performed from the main window. A new level 2 window is usually called Dialog (dialog box ). the message box can be seen as a special dialog box, which simply displays some errors, warnings, or prompts.

Dialog is divided into two types: mode model and non-mode modeless. The mode dialog box refers to the window that is unavailable before closing the window, but not the mode window.

A dialog box is a kind of window. Generally, the buttons such as minimize, maximize, and close are also displayed in the upper right corner. however, buttons such as OK, cancel, and close are usually provided on the page. close the window when you click it.

If you want to display a lot of content in the pop-up dialog box, you need to select and enter. there are two common display methods. one is the Wizard Page. You can click Next and back to switch to different pages. the other is to set many tabs in the same window. You can click different tabs to switch to different pages. for convenience, only important user information is displayed by default. some unimportant information is displayed in advanced options.

You can also provide a button to display the text with three additional points.... When you click it, additional information will pop up.

Wizard

A wizard page is a very common page. Installation and uninstallation must be independent of it. Some complex operations in the application cannot be separated from it.

Generally, a brief description of the page information is displayed on each page. Buttons such as back, next, and cancel are provided at the bottom, and sometimes help buttons are provided.

For better user experience, you can display the step of the current process on the title bar. For example, step 3 of 7. This indicates that there are a total of 7 pages, and now there are 3rd.

Alternatively, all page information can be displayed on the left of the Wizard Page, and the completed and unfinished operation pages are distinguished by different colors.