Visual structure in interactive design

Source: Internet
Author: User
Keywords Visual structure designer interactive design we information architecture

Web site interaction design is divided into 2 kinds: process interaction and interface interaction (that is, "single page interaction" or "small interaction"), and interface interaction contains 2 categories: "Visual structure" and "dynamic module."

What is a dynamic module? Simply called "AJAX", it has several visual http://www.aliyun.com/zixun/aggregation/17277.html "> Presentation: Pop-up Floating layer, tab switch, expand (side expansion or Drop-down expansion)

What is visual structure?
The module that the interface information is arranged and formed after the logical relation, including relation and order, is the visual structure.

The interface structure can be very large or small. Take IGoogle's three-column example, whose visual structure is this:

The visual structure of the blog

These large interface visual structures are composed of small modular structures (pictured below):

Visual structure Contrast:

These are the 2 web game in the "farmland upgrade" when the different ways of expression, which visual structure is easier for users to receive information and operation?

What are the factors contributing to the confusion of visual structure?

1. The most common scenario is that the company has no interaction designers, and the product information is communicated to the UI designer without being sorted out, and a product with a poorer availability is finally produced.
We often see: PM to the design requirements to provide Ui,ui also step-by-step complete implementation, can come out of the thing is feel a problem, but also can not say exactly why, so a version of the version of the continuous change, finally ... It's not fair that this heavy burden presses the UI straight.
The UI designer or product manager should be bold enough to stand out: "We need interaction designers to help us comb the information!" ”
Of course, interactive designers should also be proactive in responding.

2. There is also a situation: because visual design itself is a relatively subjective creative work, those who have been made good visual structure is often due to the designer's "aesthetic needs" and was stripped, cut. UI designers often add a lot of unnecessary lines and decorations to satisfying individual desires ... And so on, many products are available after the on-line availability.
In this case, the interaction designer (or product manager) 's charisma and communication skills are particularly important, neither to discourage the UI designer's enthusiasm, but also to ensure that the UI designers use their expertise in the visual structure of the full play, this is an art.

The role of visual structure in information architecture:
Because the visual structure is carrying information, it also plays an important role in interpreting and partially verifying the rationality of the information architecture.

The balance of the pass:
Visual structure, on the attack information architecture, under the interface design. How deeply does an interaction designer understand information? Look at the visual structure in his prototype.

Problems and Consequences:
There are problems with information architecture (such as lack of content in first-level navigation, process failure, etc.), which can lead to the product not being used at all.
When the visual structure is not clear, the speed at which we receive information slows down and makes the product less usable.

In other words, if the information architecture is not understood, the visual structure is no good, and UI design is ultimately the role of corpse painting and scapegoat.
When we to many "corpse color product" angry, whether should also reflect on, in the end what causes?

Source: http://www.ueui.com.cn/user-experience/interactive-design-vision-frame.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.