Web application interface design specifications (1) _ software testing materials Daquan

Web application interface design specifications

DocumentIdentifier: Comtop-STD-webui

Shenzhen kangtuo Information Technology Co., Ltd.

Shenzhen comtop Information Technology Co., Ltd.

Revision history

Version	Revision description	Author	Review	Review Date
1.0		Luo xingheng
1.1	Revision: added query interface and text box requirements	Li xunhong	Lin Zhenfeng	2006-3-13
1.2	Revision	Li xunhong	Lin Zhenfeng	2006-5-10
1.3	Revision: the background color of the tree is changed to white, and the remarks on the editing page are written in the table.	Li xunhong	Lin Zhenfeng	2006-5-30
1.4	2006-11-16 Add: Requirements for the number to be added with a sub-digit (C of 5 in 1.4 ))	Li xunhong
1.5	Modify document format	Zhang Hongyan

Ownership statement:

Shenzhen kangtuo Information Technology Co., Ltd.

All rights reserved cannot be copied

Copyright 2006 by Shenzhen comtop Information Technology Co., Ltd.

Contents

Web application interface design specifications... 1

1 example and description... 1

1.1 login interface... 1

1.2 desktop... 2

1.3 Overall interface... 3

1.4 list page... 4

1.5 editing page... 6

1.5.1 master-slave edit interface of up/down structure... 6

1.5.2 master-slave structure editing page... 7

1.5.3 General editing interface... 9

1.6 query interface... 9

1.7 pop-up window... 10

1.8 controls... 10

1.8.1 text box... 10

1.8.2 drop-down box... 11

1.8.3 single-choice button... 11

1.9 prompt message... 11

2 List of issues to be determined... 11

1 example and description 1.1 logon page

As shown in the following example:

1. user unit name and logo Pattern

2. Chinese name of the application system (or an English name)

3. user name and password input box

4. Company copyright description (Chinese and English)

1.2 Desktop

As shown in the following example:

1. Desktop text logo

2. Personal reminders for urgent transactions

3. Information Announcement scroll box of the entire system (optional)

4. Various tool Portals

5. Our customer service phone number, fax, and email prompts

1.3 Overall Interface

As shown in the following example:

1. user unit name and logo Pattern

2. Chinese name of the application system (or an English name)

3. System Function portal (for example, back to the desktop and log on again)

4. Functional menu area

5. Main work zone

1.4 list page

1. menu level: indicates the text of the module's position. The position must correspond to the functional menu.

For example, if you click on the menu, the module location description text must match:

2. The selected tab page (the page contained in each tab page can be called a card ):

A) the background color of the card must be white and the color outside the card should be gray;

B) the color of the Selected tab must be different from that of the unselected tab. the font on the unselected tab is black, and the font on the selected tab is blue and bold.

As shown in the right figure:

3. Button description:

A) the buttons are of uniform color;

B) if there are only two words on the button, a space is required between the two words and both sides of the two words;

C) if there are more than two words, you only need to add a space on both sides of the word;

D) the rightmost end of the button must be aligned with the rightmost end of the List;

E) There is no space between buttons;

As shown in the right figure:

4. Description of multiple records displayed in text:

A) The list must support operations on multiple records. You must have a button to select all records on this page, as shown in the right figure :;

B) the total number of records must be indicated below the list, for example, "15 records in total ";

5. Record text description:

A) if the selection box in front of the list uses the radio button, 1st items should be selected by default;

B) The selected record must be distinguished from the unselected record;

C) The number of numbers in the list must be displayed on the right. The number of amounts is in the form of a thousands-byte separator. The separator is a western comma (,), for example :.

D) text with fixed words (such as dates and images) in the list is displayed in center;

E) records with irregular words are displayed on the left;

6. If the items in the list are not selected, you must prompt "not select..." When clicking the function OPERATION button ......". For example, if you do not select a project in the project list, the prompt "no project selected" is displayed when you press the function button !".

7. There are truncated fields in the list. move the cursor up and all values must be displayed ,.

8. The selected rows are displayed in blue.

9. If no data exists in the list, "This table is not recorded !" Use a blue font and a white background.

10. When the query result is displayed in the list, the "query" button turns blue.

11. Remarks-for example, the description of "red indicates rollback record." is written outside the table.

12. When you return to the List page from the details page, the cursor should be directed to the selected record.

13. When a window pops up to return the selected row, double-click the data on a row in the list and select the single choice or check box before the row. To go to the details page, click the icon on the rightmost side of the list. :

1.5 editing page 1.5.1 master-slave editing page of the upper and lower Structures

2. UI description text: the master-slave interface must contain instructions, and the font of the home page and slave page must be the same, as shown in the right figure:

3. Text Box description:

A) the color of the read-only text box and the input text box must be distinguished;

B) align the text box up and down or left and right;

C. Right-click the number;

D) text with the same words is displayed in the center;

E) text with different words is displayed on the left;

As shown in the right figure:

4. the table on the editing page must be at a certain distance from the two ends of the page.

1.5.2 master-slave structure editing page

On the left-side structure page, the description of the module to which the workspace belongs must contain the Left and Right Parts;

The description text of each field or option must be displayed on the left;

1.5.3 General editing page

1. pop-up window Description: the pop-up window should be displayed in the center; you must have a button to close the window; otherwise, you must have a button to return to the previous page. If the button is closed, the name must be "closed" and cannot be "canceled" or similar.

2. Description of required items: the required items on the editing page must be identified, as shown in the right figure:

A description of the identifier is also required, as shown in the right figure:

3. Multi-line text box Description: The multi-line text box must have the function of prompting the remaining number of words, and the text is black, and the numbers must be highlighted in red.

As shown in the right figure:

4. Select "use" for "Personnel", "use" for "department", and "use" for "others.

1.6 query interface

1. Function buttons: Query, clear, and close all data, and place them in the middle of the bottom of the page.

2. Clear: Clear the query conditions.

3. filter out the spaces before and after the input query conditions during query execution.

4. The text of the query condition name is left aligned.

1.7 pop-up window

1. A new editable window, display information window, and query window are displayed in the middle.

2. When selecting a department or a date window is displayed, the location is next to the editing box.

1.8 controls

Temporarily unavailable controls should be grayed out

1.8.1 text box

1. You can enter a text box with a white background, for example:

2. The text boxes to be selected are all in white background, for example:

3. You cannot enter an unselectable text box with a gray background, for example:

4. Specify the order of the tab keys for each text box on the interface.

1.8.2 drop-down box

1. if not selected, the displayed value is "-- select --".

1.8.3 radio button

Click the button value to select the button.

Click "Suspend" and select the previous radio button.

1.9 prompt information

The information to be confirmed by the user must be displayed in a dialog box, for example, a warning message, saved successfully, added successfully, or other information. You can use a floating text box.

2. List of issues to be determined

1. the levels and names of "module description of workspace", "module location description text" are not standardized. (The menu level required in the Web interface design specifications: indicates the text of the position of this module. The position must correspond to the functional menu. Currently, the system only corresponds to Level 2. from Level 3, some will carry the names of level 2, and some will only display the names of Level 3 .)

2. If the list contains more than one page (sometimes multiple rows of a record cannot use ellipsis), how can I add a scroll bar and lock the question header? Lock pagination bars?

3. Online Help? We recommend that you add a Help button at least on the interface with complicated business logic and click the Help content on the pop-up page.

5. Which CSS class should be used for each control?

404,500 the error page must be specified. The usage is too rough.

7. It is best to have code in the specifications. How should we deploy the pages? How many tables are used for locating. Otherwise, each project team or different developers may write one statement, which is inconvenient for maintenance. (I hope there is a code-level specification for writing HTML pages, including CSS and layout)

8. It is best to provide a Page Template