The background management system will be changed according to the requirements of different companies and different businesses.
Most of the references of many systems on the Internet are business platforms, which are too business-like. I have done three or four background management systems, and summarized a general function and requirement design template for your reference. This article is suitable for product managers aged 0-2 to do basic function design. It is easy to understand and safe to eat.
A background management system, most of which is to perform various operations on the data generated by the system, or to configure the content of the mobile terminal. Therefore, the operation of data cannot escape "adding, deleting, modifying and checking". On this basis, expand the functions such as "sorting and exporting".
1. The overall framework of the page
You can choose the corresponding UI framework component library according to the front-end technology selection. Currently, the common UI frameworks are element, iview, ant-design, etc. These component libraries, there are many paid high-quality resources on the Internet, which can be directly loaded into axure for use. I chose a common frame style to explain to you.
In this framework, the header is the function module, the left side is the first-level menu and the second-level menu, and the right side is the function page. This is suitable for backgrounds with more and more complex businesses. The upper right corner is for system settings, personal account management and other basic functions.
2. List
The functional design points of the list are as follows:
- Sorting of list data: forward order, reverse order. For example, according to the reverse order of the creation time of the data, that is, the newer the data, the earlier. If you do something more advanced, you can design a sorting function based on the position of time, and support both forward and reverse order, which can be switched between each other.
- Page turning of data: Generally, there are 20 pieces of data per page, and page turning and loading need to be processed by the front end. It is possible to increase the function of page jump and jump to the first/last page. However, in the front-end components, this is a general component and can be applied directly.
- Data selection: multi-select data (check box), divided into select all this page, select all data, reverse select this page, reverse select all data. Perform batch operations on this batch of data after selection.
- List Field: Indicates the source and definition of the field. For example, the company name takes the value when [Create], and [Creation Time] takes the system time when this piece of data is created. The general sources are divided into background creation, foreground (business end) creation, system generation, brought out from other modules, and history cache.
The description can be sorted out according to the table below, which is attached to the right side of the prototype diagram.
Three, add
The main design points of the newly added functions are as follows:
- Define the input type of the field: input box, drop-down box, single choice, multiple choice, etc. (that is, the form element in the prototype)
- Define the constraints of input elements: characters, text, English, numbers, etc.
- Define the enumeration value of a selectable element: for example, field name: name; type: drop-down selection; enumeration value: male/female.
- Is it required: Mark the required items.
- Prompt: Displayed in the input box, prompting the user how to fill in. Usually gray.
- Whether to allow editing: When editing, whether this field is allowed to be edited, and whether there are other restrictions on editing.
The description can be sorted out according to the table below, which is attached to the right side of the prototype diagram.
4. Editing
When defining the function of editing, the following points need to be noted.
- Permission design: which role has the permission to edit this data.
- Operation record: It is necessary to record when and by whom this piece of data was edited.
- Timeliness: If the business allows multiple people to edit the same piece of data, if a user edits the content and the content has been modified by other users, a "lock" is required here to remind the user that your data is not up-to-date when saving or other operations , please refresh and edit again. (Here, according to the specific business scenario, the functional design that matches the user experience is done)
5. Delete
The delete operation is a sensitive operation, and the precautions are similar to the edit. Which role has the permission to delete data requires an operation record, and needs to set deletion restrictions based on the specific business.
For example: to delete a salesperson, the precondition is that there is no associated customer under the name of this salesperson, and a function of customer transfer must be extended here.
6. Query
The query in the background is much simpler than the search query in the front-end business. You only need to list the fields and types of the query, and then clarify the interaction.
Query whether the field name needs fuzzy retrieval, and the enumeration value selected from the drop-down list is listed. In terms of interaction, you can query after input or you need to click the query button.
Seven, export
- Export is divided into: export all data in the list, export current page data, export selected data, and export query data.
- The data is divided into: export some fields, export all fields. Specifies whether the exported format is .xls or .csv.
- Clarify the export data limit: design according to specific business scenarios, if there is no special requirement, it can be set to 10,000 pieces of data, and split into multiple tables for export.
8. Collation of commonly used test cases in the background
When designing, you can also check against the test cases to see if there are any places that cannot be described or are unclear.
