Interactive Design Guide (4)

zhaozj2021-02-11  186

1 Introduction

2 overall requirements

3 mode

3.4 Availability linkage

3.4.1 Interpretation

When a CheckBox or Radiobox is switched in the selected and unchecked state, the available attributes of the associated set control also changes.

3.4.2 alias

Group activated.

3.4.3 Motivation

We often encounter such situations: There is a set of controls (usually some controls to express option information, here we call them to sub-options), their status depends on other options (called parent options). When the parent option (such as a checkbox) is not activated (or not opened), the status of the sub-option is meaningless, that is, it should not be necessary to make the user to operate, so set their available attributes to false. . When the parent option is activated, the subscribable property of the sub-option is reselected is true.

The meaning of this mode is that the software system can avoid the option settings of the option settings (such as the various formats that are allowed in the case of disabling output). At the same time, this mode is used to help reflect the association and dependence of a set of controls and a key control over the interface.

3.4.4 Applicability

Use this mode when a set of options (sub-option controls) and an option (parent option) are dependent and associated.

3.4.5 Implementation

Parent option: Use Checkbox to use multiple Radiobutton portfolios.

Sub option: One or more option controls, the specific can be edit box, checkbox, a set of Radiobutton, or other.

There are a variety of ways of parent options and sub-options:

n simple

Sub options are typically arranged below the parent option and indent the right at the horizontal position. Take the "Edit" page of the Word 2000 window as an example: The parent option is not selected, the sub-option is not available, as shown below:

When the parent option is selected, the sub-option is available, as shown below:

Take the Foxmail 5.0 option window as an example, when the parent option is activated (unchecked), as shown below:

When the parent selection is selected, as shown below:

The above two modes are taken as the parent option, and one of the following examples is as the parent option as the radiobutton.

N-group type

Due to more sub-options, integrate them into a groupbox for easy management and grouping.

When the parent selection is selected, as shown below:

When the parent option is not selected, as shown below:

In general, using Checkbox is a simpler than using Radiobutton. Examples using Checkbox as a parent option and use a packet-type combination method ratio. Such as DELHPI 5 Environment Options window:

3.4.6 known application

It can find its trace in most software.

3.4.7 Discussion

It is recommended to use more concise checkbox as a control of the parent option.

When the number of subsets is small, or the type is relatively single, it is possible to consider using a simple combination method. When the child option is more complicated, the packet type combination is used.

Allow nested use of this mode, that is, in the inside of the sub-option and a pair of parent options and a set of child options. The number of layers used nested should not be too much, and the nesting layer can be nested. If you need nesting more levels, it means that this option is more complicated, and it is more appropriate to use a separate TabSheet. 3.4.8 Related mode

3.5 省 省号 Name

3.5.1 Interpretation

On the CAPTION of the menu item or button contains "..." text, indicating that the menu item or button will activate (pop up) a new window.

3.5.2 alias

Note.

3.5.3 Motivation

There is no motive, everything is just a customary. The initiator may be a master of Microsoft or Apple.

3.5.4 Applicability

Suitable for menu items and buttons, provided that these objects' Click operations will activate a new window.

Some simple operations, such as "copy" or "paste" operation, is not applicable. Of course, "selectively paste (& S) ..." except because it needs to pop up a dialog box so that the user selects the source of paste.

3.5.5 Implementation

Add "..." at the end of the menu item or button text.

When using the button as a carrier, there is a simplified usage, that is, the CAPTION of the entire button is a "...". This situation is more common in the following occasions:

n On the right side of the edit box of a path, the "point" button is placed, click the path after clicking;

N placed this button on the right side of a drop-down selection box (for selecting path), and then pop up the path management window;

In summary, if the button text is "...", the location where the button is required to allow the user to easily lore the function of the button.

When using a simple "..." as a button text, the button is required:

The height is 20, the width is 20.

The font adopts "Times New Roman", 9.

3.5.6 known application

There are too many menu items named using the omitted number, such as the Word you are using. Open the File menu, you can see a lot.

The button containing the omitted number name is also a lot, we can see in the windows shell, as shown below:

And using simple "..." as a button name, it is more common, especially in some development tools. Such as VC 6, Delphi 5. See below:

3.5.7 Discussion

3.5.8 related mode

This is the basic mode and does not depend on other modes.

3.6 Properties window

3.6.1 Interpretation

Under the premise of selecting an object (single or multiple), open another window to display more detailed information.

3.6.2 alias

Edit / State Window.

3.6.3 Motivation

Display the object's related data in an modal way and make sure you can't do other things before turning off the window. For example, when you browse some records, you should edit a record, you need to open an attribute window to edit the record.

Sometimes, in the case of any object (strictly said that it should be unreportable), the property window can also pop up, as in Windows 2000, click Right click on the desktop, select the "Properties" menu "display" display Property window.

3.6.4 Applicability

During data browsing, it is used to display or edit the specified record.

When a single object (record) is selected, the content of the properties window is the details of the single object. When selecting multiple objects, the content of the property window is summarized.

3.6.5 Implementation

3.6.5.1 Elements

Interface elements are typically divided into two parts, and the top of the form uses a multi-page (tabsheet) to display the content; the form bottom displays the operation button.

Operation button, including:

Determine and cancel the button. If it is a window to modify the data, "OK" and "Cancel" can be explicitly indicated.

The application button indicates that the changes are saved without closing the form.

Close button: Suitable for applications that are for data display only. Under normal circumstances, the button and the determination / cancel button will not appear at the same time.

Typical property windows are as follows:

The properties window of the figure below comes from Foxmail:

3.6.5.2 Title Bar Text

Text is generally "xxx attribute" or "xxx editing" or "xx option" or "XX setting" or other. Some maybe, the title bar will change as a change in the window (if you edit a key field of a data entry).

3.6.5.3 Title Bar Icon

There is no icon or use the icon for the application.

Contains the closing icon.

Help icon can be selected, common in Microsoft's software.

It is generally not minimized and maximized icons.

3.6.5.4 Location

Central position based on the caller window (ie the window of the lost focus).

3.6.5.5 size

Description of the overall requirements.

3.6.5.6 alignment

Description of the overall requirements.

3.6.5.7 Focus

Initial focus: When the form is just out, its focus position should be located within the first available control on the first tabsheet.

Focus switching: The order of focus switches and the order of the control arrangements on the interface. From top to bottom, from left to right.

3.6.5.8 Keyboard Response

Enter Key: Make actions like determining / save / close and other buttons.

Escape Key: Make the same action as the cancellation / closing button.

TAG key: switch focus.

3.6.6 known application

Applications in the MS Windows operating system, such as the Network Status Properties window, the file properties window, the display properties window, and more. This mode is applied in many popular software, such as Word, Delphi Options / System Settings window.

3.6.7 Discussion

Allows the properties window to be displayed in modal (exclusive) or non-modular ways.

When the content of the property window changes, the user clicks the "Cancel" button, at which time the confirmation dialog box will be given to the save change according to the situation. The evaluation is based on whether the content window is more, and whether the attribute window is used as a modified function is mainly.

If the attribute window is mainly used as modification, a prompt should be given. If it is mainly used as the display of data, the change of the change and the number of data that can be changed are small, no hint is given.

Or may be more intelligent: determine the percentage of the elements that can be changed depending on the changed element. For example, four elements can be changed, and the user has changed two (the changes herein does not represent data change, but only indicate that the user has changed), at this time, if the standard of the prompt is greater than 50% At this time, a prompt can be given.

This kind of practice has a drawback, that is, the user may be a little fascinating, it will find that the software sometimes prompts, sometimes not prompting, so that he / she feels that the software's behavior is weird, and it is unable to touch. Therefore, if you want to take the above approach, you may have to match some options or prompts so that the user determines whether or not the above features are enabled. 3.6.8 related mode

Other basic modes can be used in this mode, as shown below:

转载请注明原文地址:https://www.9cbs.com/read-5314.html

New Post(0)