Three design options for migrating from large screen to small screen

Because of the complexity of mobile phone terminals, a variety of screen resolution, a variety of different models of special rules, are http://www.aliyun.com/zixun/aggregation/26107.html "> mobile website design put forward more requirements." The migration of existing sites on large screens to small-screen devices requires some tweaking and today explores three available migration options.

flat-style accordion-type checkerboard

I. First: flat-shot

This form is the simplest, but also the current web migration to WAP used most of the form, is the mainstream of the three-column layout of the Web page adjusts into a linear one-dimensional WAP page, such as look at this picture 1-1

Figure 1-1

This is Elya's own website, how to convert it into a linear form?

An effective way is to move the main navigation bar to the top of the page, then in the bottom, according to the importance of the blocks in order, the article to show the title, navigation can be repeated, so that users can be anywhere on the page can be easily adjusted, the page is too long can also be set at the end of the page to return the top button. For example, in the form of Figure 1-2,

Figure 1-2

According to 1, 2, 3, 4, 5 of the important level of the Web site vertically into a vertical bar, it becomes a WAP site, as shown in Figure 1-3:

Figure 1-3

There are many browsers that can automate this conversion, such as the Oprea browser, which automatically converts Web content rendering to linear. However, this kind of adaptation is far from being a substitute for your design work.

Two. The second type of accordion

Linear view is able to solve a problem of information arrangement, but can not solve a large amount of information stacked on a small screen, how users can get the full picture of the site this issue. To reduce redundant information, we need to learn to use the techniques of inductive or hidden content, or to use summaries. The first thing a user sees is a simple summary, but it can be expanded to see more detailed information along the layers. Ideally, when the user expands the content, the expanded content can shrink along the vertical axis.

As the legendary "Accordion summary" (accondion summarization) approach, like an accordion, it allows content to expand or shrink to see more detailed or more abstract content.

If you want to convert a Web site to WAP in the form of a digest, there are a number of ways, such as the one mentioned in Mobile consortium design:

increments--the first line that displays only the text at the beginning, then display the first three lines, and finally the entire text keyword--first automatically display the keywords extracted from the text, then display the first three lines, and finally the entire document summary--first show the most important sentences, after the second click will display the full text of the Content keyword /summary-A combination of keywords and summary of the method, first display the keyword, then the key sentences, and then click once to display the full text content

For a simple example, figure 2-1, the elyaaa.com WAP page for Figure 1-3 is abbreviated.

Figure 2-1

Three. The third type of checkerboard

The third method is more artistic, we all know that the user's spatial memory ability is much more than the ability to memorize words, that is to say, the general layout of the site, that part is what content, the user is basically know, then if you want to allow users to enter the page is still stored on the global perception, At the same time can zoom local to achieve the effect of browsing details, is not very good?

Here are two ways, the first is the local click Scaling method:

For example, we still use the Elyaaa.com page for example, see figure 3-1:

Figure 3-1

This method is loaded with the page global, click on the local amplification to the right side of the details. Of course, this can be a burden for people who use WAP without using the web, because the small screen does not really see the detailed text.

The second is the nine-Sudoku method:

Specific examples are not detailed, you can learn from the Facebook client and opera browser style and ideas, not to say, see figure 3-2:

Figure 3-2

These are some recent harvest and thinking, there is no specific practice to the operational level, summed up below, small screen to large screen migration methods are as follows: three

Flat-type accordion board style

If there is not in line with the practical aspects of the place, but also please criticize, I hope to accumulate more combat experience, share more design experience.

Elya original, reprint statement: http://elyaaa.com/product/536.html