The core of interactive design work is information architecture and interactive detail design. Information architecture includes classification of information and logic design of information display, and interaction details are expressed as control selection, interaction effect definition and so on. In the information design, encountered the most difficult problem is too much information and the design results are unsatisfactory, then in the premise of the need to cut off demand (too much information, perhaps the demand itself and the possibility of being streamlined), how to solve such problems?
Generally speaking, information design has a very good relationship to be followed, mutual exclusion of information, information between the complementary, information between the inclusion and inclusion of the relationship. So what we are going to discuss today is "parent-child relationship". The so-called "father-son relationship" is the core information and auxiliary information (similar information), the focus of information and secondary information (not similar information) in the interface design of the contrast relationship.
The significance of "parent-child relationship" in design
If you can't make a page self-evident, you should at least let it explain itself, which is the point that Mr. Krug mentioned in Don T made me think. The embodiment of the "father-son" relationship is to explain to the user what is needed to be concerned about, which is the most important, to ensure that the main path unimpeded (that is, advertising, if it is customized is also a positive significance).
Ii. how to find "parent-child relationship" in design
The designer first needs to judge the relationship between the information that needs to be designed. And the basis of judgment can be business logic, can be user operation logic.
such as a successful feedback page. If the business logic ends here and there is no next move, the feedback is more important; If the success feedback in the business logic is only one part of the logic, then the next step is better than the feedback.
How to embody the "father-son relationship" in the design
The first step: information classification
Categorize all information according to some logic (card sorting). Set all information to the same font size, font, and color before the collation.
The design method of the classification:
Line: Design guides, solid lines, dotted line, etc.
Face: Background color, background frame
To be separated by a blank area between messages
For example, the success of the mailbox verification page, according to business different, the information divided into three kinds:
Step two: information in the Order of the page
The order of the different information in the page arrangement is specific, this order may be a specification, such as the page success feedback must appear at the top of the page, after the boot row. Then the information that was previously sorted is displayed on the page in the order of class.
Step three: Information in the priority of the page
Although the order in which information is displayed on the page is some kind of specification, the priority of information is not limited by this specification. After the priority is defined, we need to design it to reflect the priority.
Priority Design Method: Layer
The so-called layer concept, similar to the PS layer. is to allow the highest priority information to attract users the first time, and give users a sense of closer proximity. Usually the processing way has the shadow, adds the background color and so on.
For example, in the mailbox to verify the success of the page, guide the user to improve the highest priority of personal information, then the use of the color plus shaded way to highlight:
Fourth step: After the design of the big frame, the priority of the information under the Design class unit
The design method for information under the class unit is the same as the above method.
For example, member information to improve the guidance of information design: page information is divided into 3 categories: Title, Action, interpretation language. The action should be followed by the title,
Explain the language around the action. Attention to the information between the white processing.
Fifth step: Interactive detail adjustment
After the above design steps are completed, the page information is basically OK. Then the interaction details of the adjustment focus from the visual is to help users locate information.
Design method: Distinguish between font, font size, color, and style.
Success in the Mailbox verification page, successfully prompted the body color #666666,12px (site specification); Guide text link color #0066cc, superscript 14px bold, etc.
Sixth step: Do subtraction
This step is essential, just start with a variety of effects have reached the best page design results, but the last time to go out from the overall perspective of the page, will be a number of excessive design elements to remove
Final design effect:
Page information level is obvious, "father-son" relationship is particularly prominent.
The application of "father-son relationship" in the ordinary design
The information design of the homepage of Apple's official website includes the relationship between emphasis and secondary, core and auxiliary.
Amazon default home page in the local design, there are more obvious operating interest and routine, focus and secondary, core and auxiliary relationship
Ps: The general information itself may be the most important, such as navigation, but the site after the maturity of the user's awareness of navigation, but no longer need visual reinforcement, and the operational information itself periodically determines that it needs to be strengthened in a certain period of time.
Chao Brand Gap official website Women's page, to figure dress up as the main mode of promotion, in information design, operations and conventional, the core and auxiliary information is very clear.
There are design methods to ensure that the guidance of the page is normative and regular, but in the specific project, the use of a design method requires the designer to have in-depth thinking and analysis, at the same time, after the completion of the project on the design review and can experience, in order to make greater progress.
Article source: Ali has a little