How to make a web page prototype diagram template —— How to design an excellent website background prototype

How to design an excellent website backstage prototype? I think we can start from three aspects:

1. Unique and novel design concept

If you really have no idea, you can look at the background design of the same type of website to find design inspiration.

2. Efficient and practical prototype design tools

A good design idea also needs a prototype tool to make, test and iterate. In this respect, MOckplus is a good tool, which is simple and quick to operate, link sharing, feedback collection, real machine demonstration and so on. , which can realize rapid team design and iteration.

3. Search for creative prototype design templates

A good website background design template is also a good starting point. However, we should pay attention to the copyright issue and find out whether to pay or reuse it for free.

How to design an excellent website backstage prototype and define the goal?

Since we are doing the prototype, let's talk about the specific work. First of all, we must define the product objectives, such as the following questions:

Is it a brand new product or an updated version?

Is there a matching front desk system? Or other offline resources that need to be coordinated? etc

What are the goals at the business level? New features? Experience optimization? etc

Demand analysis

Clear product objectives, will be focused on when doing demand analysis, generally speaking, the following elements are worthy of attention:

1, role permissions

This is very important. Before the specific design, you must be familiar with all kinds of users in the management background. Including * * * there are several types of users, their respective use needs, operation rights, and the design of user rights.

2. Information architecture

Be sure to draw an information structure diagram (that is, a data model at the product level), which is mainly used to clarify the product structure. Draw a brain map and make an excel table. The level of detail can be designed according to your own habits and needs to cooperate with users.

This is a little different from ordinary prototype design. If it is modified, it is necessary to mark the difference between the old version and the old data cleaning or migration scheme. In addition, cooperation with other resources (foreground, corresponding pages, etc.). ), you need to consider the direction and state transition of data flow.

4. Function flow

User processes and business rule processes that usually need to be considered. According to different business objectives, user processes can be divided according to scenarios or functions, and some users can be optimized appropriately. Business rule process needs to ensure clear logic and closed loop, and don't leave out abnormal processes (closed loop is very important).

prototype

Finally, we can start the prototype design. Now there are many theme templates in various management backstage. If there is no special demand, communicate with the developer and choose a set of "copywriting".

Pay attention to navigation and list (add, delete, modify, check, sort and filter) in the design process, and don't omit preview, error/success prompt, new content reminder, shortcut key and so on in details.

How to design an excellent website backstage prototype To make an excellent backstage prototype, I think it is mainly divided into three parts:

Have a clear understanding of the structure and page logic of the background function module.

2. Be able to skillfully use prototype tools.

3. Excellent design style and design specifications

1 is the foundation, 2 is the advanced, and 3 is the ornament that makes the prototype excellent.

How to ensure a clear and reasonable functional structure and page logic in the background?

Many people have a habit of drawing prototypes, that is, whether they think about it or not, they just start to open the prototype tool and pull a few boxes first, or just start to draw a gourd ladle based on a website background that they think is very good. This is extremely dangerous in my opinion. The background of a web page is different from the general web interface, which has very high requirements for the division of functional modules and the logic of the page. On the one hand, the hierarchical structure of the website background is much more complicated. On the other hand, the backstage function of web pages is more inclined to the management of foreground pages, which leads to the weak correlation and guidance between functions. In this case, if the prototype is started without a good understanding of the background structure, the final background management system is likely to be the accumulation of functions, and it is difficult to ensure the availability of functions and the flow of operations.

When drawing a background prototype, always keep in mind:

Before you draw the prototype, you should first sort out the functional modules of the background management and help yourself divide the pages and modules through the tree structure diagram.

& ampamplt； imgsrc= "

"

data-raw width = " 1423 " data-raw height = " 676 " class = " origin _ imagezh-light box-thumb " width = " 1423 " data-original = "

“& ampampgt；

After sorting out the modules, you can begin to design the skeleton of the background management system. Personally, I can be divided into three types: main module (which independent function modules are mainly divided into), subcategory (which sub-function categories each function module has) and function event (which main operations exist in each function page). The general layout method is as follows.

1) The top tab divides the main module, and the left column divides the sub-categories.

& ampamplt； imgsrc= "

"

data-raw width = " 1 1 16 " data-raw height = " 468 " class = " origin _ imagezh-light box-thumb " width = " 1 1 16 " data-original = "

“& ampampgt；

2) Hierarchical classification of burger style in the left column (lazy ~ probably the sidebar style of worktile)

3) The secondary classification list of the left sidebar appears.

& ampamplt； imgsrc= "

"

data-raw width = " 249 " data-raw height = " 155 " class = " content _ image " width = " 249 " & amp； ampgt；

The route of thinking should be top-down, and don't stick to the presentation form of a specific interface when dividing modules.

Clarity of structure and logic (skeleton) >; Functional page design (specifically how to design a page) > Optimize functional design (whether preview, real-time storage and other functions are needed) > User experience.

If necessary, the user's first learning cost can be sacrificed. The user's first learning cost can give way to the efficiency after the user has mastered it, and try to follow the four principles of intimacy/contrast/repetition/alignment.

For important functions that you don't know how to put them, you can consider putting them on the right side of the top bar instead of on the main module.

Frequent pop-ups are not a good choice (they should be played if necessary). If possible, expanding and floating half a page on the right side is a good solution.