Website Background Design specification: Framework specification and Visual specification

Article Description: Background System Specification design experience.

The background system uses a whole set of UI, why the form is different? Can you unify and bring a better experience? Based on the inner doubt of the interaction designer, we are eager to produce a set of design specifications for the unified background operating system, conducive to the use of user habits of training and continuity, reduce learning costs, improve the use of efficiency, effectively improve development efficiency, convenient function optimization expansion. Based on the existing system, we cobwebs, only now the phased results.

Who is the user? What are the requirements? The basic understanding of an interaction designer for a project stems from these two issues. The same is true of our specification ...

You know, or don't know, the norm is there, not sad, not happy.

Who is the user? Who is our system for?

The initial stage is to give us the second, the late system will be open, external businesses or commissioned to use our system. So the first time we do system specification because the merchant or the client's information can not be mastered, it is mainly for our small two.

What are the characteristics of our little two? What are the methods they are currently typing in the information?

Small two this role in our part can be subdivided into: certification small two, logistics small two, industry operation Small Two (industry operation small two inside also points: buy hand, buy hand assistant, shop operation second, website operation small Two ... Each role comes to this system's purpose is different, the industry operation of small two, come in mainly input information, tracking orders. Logistics small two mainly to view the audit industry small second application, tracking orders, view the report. Certification of small two mainly audit industry small two or business applications, tracking certification, analysis of data.

What are the requirements?

Because the original system development situation uneven interactive resources, front-end controls did not do, resulting in users extremely difficult to use. In the process of system opening, frequent alternation, vision and front end lead to the difference of individual system interaction, while multiple systems present to the same user, although the basic framework is no problem, but the efficiency is low in the process of operation.

Solution: Users need an easy-to-use backend system to improve their efficiency.

The purpose of our specification is to unify the visual + Interactive specifications of the existing three systems, and then deliver the front section and the front end to specify their code specifications. Let's move on to the first step in improving the efficiency of our small two.

You read, or do not read, the norm is there;

From which latitude does the specification design unfold?

1. Control

In computer programming, controls (or widgets, widgets, or control) are graphical user interface elements. is a basic visual widget block, contained in an application, that controls all the data that the program handles and the interaction of the data.

Based on the PARC Research Center's research into Xerox's Alto computer (Xerox Alto) user interface, a set of reusable controls that contain general information are now emerging. Different combinations of regular controls are usually packaged in the part toolbox, and programmers can build graphical user interfaces (GUIs). Most operating systems include a set of controls for programming, and programmers simply add them to the application and specify their behavior.

Group controls

Description: In order to realize a certain function in the product independent of the module, its characteristics lie in a relatively single function, in the structural layer and behavior layer should have a strong reusability, in the presentation layer should be consistent and user-friendly identification. Multiple combinations of controls can be derived from a single control to accommodate different functional operations, such as uploading a combination control and a list combination control.

Define dimensions: Control descriptions, control gestures and dimensions, user feedback, design concepts, control applications.

You love, or do not love; the norm is there;

2. Framework Specification

After the first step completes the control Foundation, the second step is how to use the control? Let the control play a role in the scene, channeling the entire operation process. For this purpose, all we have to do is to develop structures and rules, just as they are used to build buildings, which is the role of the framework specification.

When setting the framework, we have to take into account the following points:

2.1 Different processes and scenarios

Because the business scene is different, the process is not the same, then how to define the page, and page base content block?

Here are some of the 4 basic scenarios encountered in the process-Create, query, edit, detail, feedback

These four types of pages, the use of the underlying control type is not the same, through these 4 categories we can channeling basic business processes.

A. Creating an editor

Create and edit are the basic data input and modification, this interface uses the most is imput, forms, and links. The screen is divided into three-column. Contains a large number of operation validation and operation hint blocks.

B. Inquiries

The main use of the query page is the conditional input operation and view the function of the form, need the interface operation area and the feedback area is clear and clear, so in the framework for two regions, to ensure his stable use of the habit. Also consider the various export and view links.

C. Pop-up page

The size of the pop-up page is only one-third of the total page size, so the information flow is not too large and the structure is not complex.

D. Feedback

After the completion of a page operation timely feedback of the operation results, here the elements are: operating results + modal words + suggested action. and RELATED links. So there is a limit to the text architecture and display, and the icon with certain information.

2.2 Operation

Unlike a large frame, this pop-up page is hosted to maintain a popup operation when the page information is in alignment, so the operation is straightforward, the number of operations remains 3 to 4 operations. Then go back to the homepage and continue to manipulate the other.

A. Details page

Details page is the details of all operations. Is the result of the process, so its module classification will be more clear, mainly text and digital composition, information level is basically 2-3 level. Classification is also controlled within the 4-5 class, too much information, there will be the function of the expansion to control the amount of the information to upload and find the problem caused by too much.

B. Different display resolutions

Consider the most commonly used 1028, and the most basic of 1024. The most commonly used amount is summed up as a three-screen control plus a combination of judgment and validation and control, with special applications in mind. The most likely occurrence of data and controls in a scenario the user is most concerned about the data when manipulating the page, so consider how to straighten out their hierarchy in the interface. How to standardize the position and change of the information of the page feedback. For example, find and carry the search data display, as well as upload, on the page display the data of the display classification. These typesetting rules should take into account the clarity of the message and the amount of information.

[1] [2] Next page