Functional extensibility and ease of use of the backend Management Center for Software Systems

Web page Production WEBJX article introduction: Web site Management page Design tips: The golden rule in the layout.

About the "Management Center" interface design framework, generally we will choose the traditional "work" word structure, the top is the image area, the left side is the Function list area, the right side is the operating area, this structure of the functional extensibility and ease of use are very good, almost 90% of the software system in the background management center are using such a structure.

In the actual design work, we find that the user always want to be able to make the area of the operation area as large as possible to maximize the business work and improve the efficiency of use. Our browsing of information is accustomed to scaling down and scrolling vertically. In other words, in the context of a certain display resolution, information can be extended in the Y axis, and the x axis is fixed, which requires us to work more on the sidebar. Therefore, we generally set 1-2 hide buttons to control the top and left side of the bar, so that can expand the operation area without affecting navigation.

But what is the default width of the left column is the most suitable, not only to maintain beautiful, maximum magnification operation area, but also can not affect the operation. Let's take a look at this question.

We'll start by listing the elements that will be used in the left-hand column.
Scroll bar: 17px icon: 16px text (Chinese song body): 11px text spacing: 1px

The following conditions need to be available on the left column
1. Generally speaking, the left side will include up to 4 levels of the tree menu
2. Text is not folded line, and generally not more than 8 characters
3. Considering the possible scroll bar

To sum up, we do typesetting. (pictured below)