(Reading this article takes about 6 minutes)
Through the design of several background systems from scratch, from the preliminary analysis of competitive products, design specifications and design drafts to the final product development. In the whole process, there will be a lot of repeated thinking, considering the actual situation to adjust the design scheme, optimize the design interaction process. In this process, products, design and development are discussed, and three parties participate in the process to achieve a solution that is superior to user experience and vision. Through repeated thinking and exploration of each small point, some discernible rules are gradually formed that can be applied to most scenarios. The article included some examples from my own project.
The purpose for which design specifications exist
1. Synchronous design by multiple designers
Most of it is because the same project has multiple designers working together to avoid the confusion of design controls in the same project.
Easy to control visual unity, improve efficiency, reduce rework rate.
2. Improve development efficiency and reduce rework rate
And vertical to the front-end development, after they have the specification of constraints in the development project will greatly improve the design draft reduction degree, and specification to establish their own control library, improve the reuse rate, reduce the cost of rework, if do the specification, the programmer understands from visual specification which controls can be one-time write well and can be repeated calls. With the help of the specification, the rules are clearer when developing globally shared controls, such as buttons, line spacing, font size, color values, and so on.
(Online screenshot)
3. Assist in design and development to understand business
If the product manager can roughly follow the interaction and typesetting format of the design specifications when drawing the prototype drawing, it will reduce the ambiguity between the prototype drawing and the design draft. The prototype drawing does not need to be accurate, but only needs to be typesetting according to the established specifications of the project, which will not cause too much work for the product. It also makes it easier for developers to view documentation (this also depends on how each company works together, if product managers can follow the design specification to a certain extent it is a great benefit for downstream work).
(Sample company prototype diagram, call them)
4, convenient product iteration
Products in the design process, often will get through the market survey or reflected by the user experience related to some of the problems, the need to adjust some of the specification control interaction or display mode, the design specification development can quickly locate controls, and according to the new adjustment style of whole project, greatly improving the rate of work. This unified modification of the way is good, A page and B page unified control with two different display.
How do you get started with the specification
For us designers, when facing a brand new product in the review meeting for the first time, we were very confused, listening to all kinds of functional logic and solutions. Muddled (SHH…) Before the start of the project, most of the design companies do not have the opportunity and time to participate in the preliminary research and competitive product analysis work. At this time, we should take our own more questions to ask our upstream product manager, who is our user group, age range, what kind of products, what problems to solve users and so on.
For the landing implementation, we need to be clear about the resolution of the development adaptation (background system is generally based on 1920*1080 size, and then adapted to 1366*768 screen). For some industries, we will also consider the display used by users (you never know what environment and circumstances your father is using). Take every factor we can think of into account to minimize rework rates.
After we have a clear understanding of the project background, we can start to locate the design style of the product. According to the product prototype, we can produce several sample design drafts for the early positioning of the product style, mainly including the withdrawal of the main interface style of the project, including colors, buttons, forms, forms, popboxes and other related styles. These early sample pages are designed to facilitate discussion within the group and show to the leaders until the final decision.
color
The selection of main colors is generally considered and selected according to user groups, user usage scenarios and product positioning. Of course, for the background system, the system can do the expansion of the skin function, given the user a basic tone, and then do a few sets of good color skin, so that the user can freely choose. For the company, a project may take into account multiple customers, who want to make their own system according to their own brand color. Having multiple sets of options also facilitates subsequent maintenance and sales.
Standard word
Background system font selection is relatively simple, Chinese: Microsoft Yahei, English: Arial. Just pay attention to the front-end development training standards when the key to remind them to do font style reset, otherwise when you go to check the interface later when a page at the same time song style, Microsoft yahei compulsive disorder can not stand ah, will very affect the mood of the interface. Designers who have experienced this step will understand.
icon
ICONS are now almost no longer done in the way of cutting images. They are all uploaded to alibaba’s font icon library after being made. The front end calls are easy to resize and color, and the key is no distortion.
Page layout framework
In the design process, we also need to consider what size we are based on the basic design. Determine which areas need to be fixed in size, which areas need to be adapted, whether the menu supports shrinkage, etc. According to statistics, the mainstream resolution of users using the system is mainly 1920, 1440 and 1366, and there are 1280 display devices in individual systems. Specific adaptation of the minimum and maximum resolution can also be determined according to your user use, we are generally based on 1920 design, the lower limit of 1366 resolution can be considered. The page includes the top bar, TAB, menu on the left of each application, and main content. There are some differences between systems depending on their own situation.
button
The button is an essential element in interaction design. It plays a very important role in the interaction between users and the system. Common buttons in the background are classified into linear buttons, plane buttons, text buttons, icon buttons, and text + icon buttons. In the specification, the style of the button to be written includes width, height, rounded corners and text. Generally, the number of words of the button is limited to less than 6 (this is for the product colleagues to see, sometimes when they get the prototype, the number of words of a button is particularly long. Think of a normal button with too many words, users need to spend a long time to read the function of the button and then operate it, which affects the user experience.
The width of the button is given a normal width and height, and the spacing between the normal width and the border of the text needs to be written clearly.
And various states of the button: default state, mouse hover, focus get, hold/active, disable
The form
A common form consists of multiple list items. And each list item is composed of the most basic label (title) and input box, the conventional form includes radio, multiple selection, drop-down selection, input box, time selection, switch selection, picture attachment upload and many other controls.
Labels are aligned with controls in the left label, top label, and inline label
The left label is a common alignment method, and it is also a common alignment method for the background system. It is suitable for the scenario where the PC screen has sufficient horizontal space
The top label is the label above the control, and the label can be neatly aligned to the left of the control, which is a good solution for the situation of insufficient horizontal space, but it also increases the vertical height of the whole form. If the form content is too much, the user may need to use the scroll bar several times to complete the form.
In-line labels greatly save space, but the filling error rate is very high. When the space gets focus, the label name will disappear, and users may forget what the current filling label is, which requires users’ memory cost.
Each label has its advantages and disadvantages according to their own products to choose a most suitable for their own products, the specification to determine the alignment of labels, the width of each control height, spacing between controls and control of various states (default, activated, disabled, error). For example, when we fill in the mobile phone number, the user may fill in a prompt text missing. If it is “the number you filled in is wrong”, the user needs to find the error point by himself. If we can prompt users to locate the error point “the mobile phone number is less than 11 digits”, such prompt can help users fill in the form quickly and correctly and improve their work efficiency.
form
Table, for everyone is familiar, the table in the background system design should be able to account for about 40% of the proportion, it seems simple horizontal and vertical bars. There are so many small details that affect the user experience. Just to summarize a couple of things that I take into account every time I write a specification
Buttons in operation column: each button shall have no more than 6 words. More than 4 buttons are folded, with “more” to shrink the extra buttons
Too many columns: default display range: 3-8 columns, if there are more, can be fixed important columns, the rest of the column scroll bar display (do a good job to support automatic sorting of user queues)
The width of the list: the width is adaptive, but according to the importance of the field, the important field is displayed first and the width is limited to “… “. Instead, mouse over to show the entire content
Column title: Enter a maximum of 8 characters for the column title at the head of the table (in a complex background system, there will be a large number of titles, which need to be discussed with the product to select a short name that can express a clear meaning)
Table row: the height of the table row can be set to 2.5 to 3 times of the height of the font. Zebra crossing is adopted to display the table and enhance the horizontal guidance of visual flow. The color of the header and body is distinguished
Scroll bar: If a vertical scroll bar needs to be displayed on more than one screen, the table header and page number must be fixed. Simply scroll through the body content section
Empty data: If there is no data in a part of the table, fill in the display with “-“. For the cell with zero data, fill in 0
Align: Align numeric content left and non-numeric content right
bounced
Bullet frames are mainly divided into two categories: modal bullet frames and modelless bullet frames. The biggest difference between them is whether to force user interaction. The modal popup will interrupt the current operation flow of the user and only allow the user to operate on the current popup window, whereas the non-modal popup window will be vice versa. Common in the background
Modal box: dialog box, drawer type side sliding window
Modality: warning box, bubble prompt box, notification prompt
When we write the specification of bullet frame, we should know what content of bullet frame needs to be used in each project, and give the proportion of relevant size bullet frame, which are fixed size and which are suitable proportion. For the notification prompt to give how much time to stay automatically disappear.
The default state
The default page is displayed when the page has no data, the user has no data, or the network connection is not smooth. In order to relieve users’ anxiety and helplessness in the face of such situations, designers can use some illustrations and words to guide users to carry out the next operation.
conclusion
After the designer’s specification, the final implementation is the most important step. After the specification is established, we need to train the front-end colleagues on the content of the specification, so that the front-end colleagues know the details of each piece of content. This step of standard training is very heavy, because front-end colleagues will be divided into several people to work on the project, and a large product will be divided into several small modules for gradual development, such a working mode will virtually increase the probability of style inconsistency. So we should do a good job of training in the early stage of development, but also reduce the amount of rework in the later stage. Specifications also need to be annotated (I usually upload to Blue Lake) so that front-end developers can build their control libraries around the specifications. In practice, there will be some special controls based on the control library provided by the front end to let us choose the appropriate control and change the style. Now all kinds of easy to use and more perfect control emerge in endlessly, choose the existing control can save a lot of development work time.
Send out the specification of a project of the company to everyone to study and discuss with each other.
