Analysis of mobile phone interactive UI Design Guide

Source: Internet
Author: User
Tags touch

The Web development community has a large number of interactive design easy solutions. Although most websites are now interactive, we need to keep moving forward and innovating. It's easy to focus on coding, but sometimes the actual design considerations for different screen sizes are often overlooked.

Many interactive design learning materials talk about the basics, such as using extra space on the desktop to make it easier to display on the phone. However, many things do not go beyond these basics. With the appearance of various size screens, we need to think more about the design and the user experience.

  1. Desktop

Most user experience principles are related to desktop Web sites. Users on the market use more keyboard, touchpad, mouse, which allows us to have more design possibilities to adhere to the quality of the user experience. However, we still have to stick to some guiding principles, and the interactive design will ensure that our design is seamlessly switched between different screen sizes.

  A few things to consider

Desktop design has the following considerations:

• Extended grid design, which allows users to easily find content that is of interest--horizontal navigation, submenu, large pull-down menu to easily filter content • Interactive and extendable pages are more suitable for desktop Web sites • For advertising, side content, extra introductions, phone answering leave enough space • Navigation bar can be used to guide user clicks, But it doesn't fit on a small screen. Learn about new technologies, including wide footers, page edges, etc. that can affect design and user experience

Web sites should take advantage of the powerful scalability of the desktop to provide users with more choices. After the user has used a mobile phone or a tablet application, he should be guided to use the desktop version of the application, so as to get more features and a better user experience.

From the user experience point of view, be sure to verify that the desktop design is flexible, can be in different screen size seamless switch between, and also has the keyboard and other traditional desktop operation functions. Netbooks are not as popular as they used to be, but they also need to be considered, which is a little smaller than the traditional computer.

  2. Flat Panel

Tablets are becoming more popular, and tablets are likely not to be a fleeting meteor, and it will develop over time as a new trend for network interaction. So in the user experience of the tablet, we must not understand its design as "second place" desktop design. It's designed to be completely independent of desktop design, and we should look for new ways to interact with the user experience independently.

The biggest feature of a tablet is touch. This requires us to develop a new user experience in a new way. However, at present many users still stay in the basic Internet, click on the top. So we have a responsibility to develop more and more touch-user experiences.

  A few things to consider:

  in the development of the tablet, we must be biased . app awareness Development, design, as far as possible not to close to desktop design:

• Greater touch space, especially navigation keys. Can operate with one finger, which is too important in flat-panel development.

• Tag bar, folding menu in touch-screen design is particularly important. Because this can save a lot of space. And don't just use them on the sidebar, but integrate them into the entire site. • Don't think that flat-panel design simply simplifies the overall design of your desktop site, or you'll lose a lot of practicality. • Use a button or button class design to complete simple operations, such as links. • Do not think that so the user with you use the same brand tablet, even consider making a back forward button. The design should be optimized for the retina display, although only the ipod now has a Retina display, but we have to admit that most people are still using the ipod.

  3. Mobile phone, mobile end

Space saving has to be said to be the most important. Always remember at the time of development, perhaps a desktop user is more inclined to the functionality of the site, interactivity, and then a mobile user more just to see the content, do some simple operation, but must be fast.

  A few things to consider:

In addition to the large touch screen button design needs to consider, mobile phone development should pay attention to the following points:

• Minimize the extra functionality by using the simplest way to interact. Let users focus on the most important operations. • For a lot of content of the site, as far as possible to do the filter friendly, users do not like to knock words on the screen, it is best to let them directly select some categories. • Try to display your site with minimal design, and do not occupy too many functional areas. • Larger-point fonts and better type display. Try not to enlarge and enlarge the user. • Add a summary to some large chunks of content so that they delete the selection.

• Tags, stretch menu, navigation is always important! • As far as possible without pop-up box, notice, advertising, if welcome to do as friendly as possible. • If possible, take care to keep a minimum number of pages on the mobile end site. Of course this is not common on all websites, but if you think about it, it's best to use JavaScript to switch content and avoid too long content.

  4. Conclusion

Tablet and mobile users are expected to surpass desktop users in 2015 years. Given this, we need to learn more than just interactive design. We have a different design concept for the design of three different platforms, but we also need to maintain consistency between different platforms. I want to remember that the picture is friendly, the touch is good, and the content is reasonable. The biggest problem, of course, is to figure out how to organize and display Web content between different screen sizes.

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.