visual design and Visual design: visual design to properly support interaction

Source: Internet
Author: User
Tags touch

Article Description: recently looked at the iphone version of Dolphin Browser design, just take the opportunity to state the relevant design principles.

Interaction design and visual design of the importance of the industry has reached a consensus.
Recently looked at the iphone version of Dolphin Browser design, just take the opportunity to state the relevant design principles.
I would like to say that there are three main points:

1. Interaction design is limited by hard interaction (the underlying interaction properties of the hardware itself) and is designed to be extended on the basis of hard interaction.
2. The most important task of visual design is to assist with interactive design, with appropriate and cautious visual guidance.
3. Visual pleasure is an important part, but vision does not create obstacles to the interactive experience (such as inappropriate metaphors, faulty visual guidance, etc.).

iphone Dolphin browser in the interactive design, fully consider the characteristics of the platform and hard interaction, designed a set of gesture interaction system, users can be a simple gesture to control the page access. Reasonable program, experience in place, while saving screen space.
In the visual, the icon uses the hand-drawn style, the user basic one eye can determine this is draws the line with the hand on the screen, its visual metaphor also very reasonable, figure one.

Figure I

Of course, when designing specific interactions, consider what to do if a user's operation encounters difficulties.
A feasible method is to monitor the input events of the touchscreen and, if repeatedly, to detect meaningless gestures, automatically eject the operation prompts to tell the user which gestures are supported, figure Ii.

Figure II


About "Interactive design is limited by hard interaction (the underlying interaction properties of the hardware itself), and extended on a hard interaction basis", I illustrate with an example.
Figure three is the three kinds of models of the "Slide Bar":
Model one is the standard type on the PC.
Model Two is a common type of touch-screen devices (touchscreen phones, Tablet PCs).
Model Three is the display type on TV platform.

Figure Three

On the PC, the slide bar has a two-point effect:
1. Prompts the user to have hidden content.
2. Support the user to pull--this requires that the slider can not be too small, otherwise it is not conducive to use the mouse positioning; The second slide can not be too short, otherwise the user will flip a few screen, not conducive to operation, there are usability problems.

In touch screen equipment, the user directly to the screen content to operate, the slide is only to prompt the user has hidden content, should try to design a small number, the maximum space to save the screen.

On the television platform, the focus and operation are highly unified. So the slider has to be made clear to facilitate the switching between the focus. At the same time will be made of a slender strip to save screen space.

The same components differ on different platforms. This is the platform itself is determined by the characteristics, this is not arbitrary, but not mechanically.

Some time ago someone showed me a PC customer design scheme, the slide block was designed as "model two" look. Admittedly, visually beautiful, but it brings a lot of usability problems, which is not worth the candle.

A good product, interactive design (ease of use) to put in the first place, visual design to properly support interaction.

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.