WAP Design basics

WAP site, which seems to be a bit of an outdated thing. At the beginning of the birth, it is very simple, only through a markup language called WML to build a text + link page without any sense of beauty. Today, most WAP sites are beginning to use XHTML Markup Language, but this evolution seems a little feeble as the iOS and Android wave sweeps around the world. But in China, the WAP user group is still the absolute main force for mobile devices to surf the internet. So, in the end how to design a WAP site? Personally think, need from equipment , browser , task , scene four aspects. A WAP site is good and bad, not depending on the gorgeous degree of the page, not depending on whether the function is strong, but depends on site compatibility.

first, the user's use of equipment

"What devices are users accessing our site?" "This is the first question that designers need to consider at the beginning of a WAP site." Generally speaking, we can classify the equipment that the user uses roughly as "keyboard machine" and "Touch screen machine".

Ⅰ, keyboard machine:

• Small screen physical size, small visible area
• User action on mobile phone is limited by navigation keys

1. Small viewing area determines the user to see the content of the current screen is very limited, users often by scanning the contents of the first screen to decide whether to continue browsing. In the design process, we need to organize in descending order by the importance of the information and present the most important information to the users in the first screen. In most cases, the logo and navigation blocks are essential elements. If your site is interactive, you need to reflect the user login status and username in the header. Depending on the scenario and task, a few pages can omit headers.

Currently on the market, the screen resolution width of low-end machines are basically above 176px, so, for the lowest end of the keyboard design WAP site can be used 176px base width to design, the page height is not limited, but it is best not to more than 7 screen high . Also need to consider the paging file size, the page file size is best controlled within 13k .

2. The second feature of the keyboard machine determines that the user must follow the established rules to move the focus, such as: arrow keys, Rocker, Wheel, Dial (BlackBerry). Because of this, when we design, we must think about the inline relationship between page link elements, carefully calculate the user's focus movement trajectory. The important information is best placed at the start of each line.

Ⅱ, touch screen machine:

• Large viewable area
• Large area required for operation
• User Action behavior Jumps

1. The visual area is large, which determines the amount of information that the page carries is more than the keyboard. Now the market's mainstream touchscreen mobile phone resolution is 320*480, screen width is the lowest 240. At this point, if the adaptation of the keyboard machine WAP page on the touchscreen machine, there will be a large area of "left white" situation, visually will bring users loose feelings. At this point we can design the 240px as the base width.

2. Touch screen mobile phone screen is big, is not I can put more links? The answer is in fact negative! The user uses the finger, the touch pen to carry on the operation to the handset. Touch Pen Tip the general area of 2*2mm around, can be more accurate click. And people's fingers are much larger, in order to ensure that users will not be misoperation, we design, we need to link the font size, line height, spacing increases. Foreign study of a data given the reference value: The index finger required minimum operating area of 7*7mm, spacing of 1mm, the minimum operating area of the thumb is 9*9mm, 2mm spacing. (The information will be checked to fill in the original link)

Some students asked, this area unit is millimeters, how in the design process how do we convert to pixel? Depending on the resolution, DPI, and physical dimensions of each screen, the conversion results are different, and for the conversion between pixels, dpi, centimeters, inches, please learn this article.

3. As we all know, the user in the operation of the keyboard machine, before reaching the target link, the basic need to do a lot of focus to move the operation. Touch-screen machines do not have this limitation, the user's operations are no longer subject to the limitations of physical buttons, more by the visual sense of the control, in other words is to see which point to where. It should be noted that, because of the loss of the "focus" hint, we must have a clear visual distinction between clickable links and clickable text.

second, the browser around the design

Most mobile phones have their own features in the way they operate and page parsing, with their browsers and Third-party browsers. At the beginning of our design, we need to have a thorough understanding of their respective characteristics so that we can weigh the different scenarios. This article focuses on the focus , operation Keys ,html&css The three basic factors of the browser on the impact of the design of the analysis.

Ⅰ, how the focus moves

1. UCWeb Browser

About key: Turn screen

Up and down keys: Focus moves one by one

Long press about key: speed up the screen

Long press up and down key: acceleration focus Vertical movement

2. Mobile QQ Browser

Key around: Move focus horizontally

Up and down keys: moving focus vertically

Long press about key: Turn screen

Long press up and down key: acceleration focus Vertical movement

3. Opera Mini Browser

This man is the most PC mobile browser. A built-in pseudo mouse, about key, up and down keys are the mouse transverse, vertical movement, a single button about 10 pixels, long press acceleration.

Understanding the focus of the browser to move the rules, on the one hand, it is conducive to the optimization of a control information organization, on the other hand, the choice of a number of design options is also a great help. When we fully consider the focus of the mobile path, user operating frequency, the weight of a block of information and other factors, often can quickly find the most suitable design scheme.

Tips: QQ Browser and UC Browser by default will give all the focus of the picture, that is, even if a picture on the page there is no link, but the user operation of the focus will pass this picture.

Ⅱ, Operation Key

Keyboard browser (with, third party) have the right and left function keys. The left function key is generally the menu key, the right function key is generally returns, exits the key. When the user is in the "back" operation, the basic will be done by the right function key. Touch screen Machine Although no physical function keys, but most of the browser in the screen virtual a row of function keys. And UCWeb, QQ, opera and other third-party mainstream browsers provide caching functions, the page is returned to the second reading. Therefore, we do not need to frequently provide users with "back to the previous page" link. In the follow-up series, there will be special chapters on mobile navigation systems. At the same time, some browsers also provide relocation to the top of the page, to the end of the page and a quick flip screen operation, when we are dealing with very long pages, the "top" such as the handling of the anchor point of the back of the handle also need to be cautious.

Ⅲ, HTML & CSS Support

Most of the major manufacturers have a set of homemade kernel browser, even the same platform under the different series of mobile phone browser resolution effect is also colorful, and then counted on the market a variety of different kernels of the Third-party browser, this really makes people incredibly big head! Because the company's compatibility research data has not yet been open source, there are only a few high-risk risk points to be listed here. Interested friends can start their own research, conditional companies also suggest that the system to do an in-depth test. This information for WAP site design has a decisive impact!

• Font Property: 176px screen width, 12th word line can put 14.5 characters, but in fact, some browsers will enlarge the font to 14th, so the security word is 12 Chinese characters/line, and most do not support custom fonts;
• Background properties: Background color support is good, but the background picture support is much worse, if you need to use the background image, it is best to set a similar background color to do gracefully degraded processing;
• Float, Position properties: Do not copy the Web's cascade layout concept, this is two high-risk properties, honest building blocks bar;
• Margin, padding attributes: These two also support is not good, so the unequal height, wide design scheme in the implementation process compatibility problem is very big;
• ......

When dealing with design elements such as bold, highlight, current status, and link colors, we need to take full account of the compatibility of the scenarios. Therefore, it is recommended that all just contact with the WAP design of the students, before the start, the first serious understanding of the mobile phone browser restrictions on HTML & CSS, which can help you quickly in the work of the most appropriate design options.

What kind of tasks do people use mobile phones to accomplish ?

Someone said a few years ago that "the most suitable task on a mobile phone is reading." And with the mobile Internet concept, network conditions and the continuous upgrading of mobile devices, mobile phones on various types of sites and applications, more and more PC-side products are transplanted to the mobile phone end. This article is only a superficial introduction of three kinds of common task types, in the design process we can repeatedly ask ourselves a question "users are hoping to complete what kind of task through this product," firmly remember this problem will be able to go anywhere.

• Reading type
• Interactive type
• Tool type
• ......

Ⅰ, reading type

The core appeal of users in this type of application scenario is reading. After the "reading" expanded to further discover the user's child appeal: Rapid rendering Content, complete directory navigation, excellent typesetting, at any time to record the progress of the reading ... These factors are disassembled and analyzed, then assembled to produce a good reading product.

Ⅱ , Interactive Type

The core application of this product is interaction, whether it is human interaction or human interaction with the machine. Then how to respond to the user's operation is the focus of this type of product design. The response is also divided into many kinds, some users know the response after the need to guide their further operations, some require the user's continued attention, and some just notify the user can. This kind of product is also at present the most popular: Sina Weibo, Renren, Tencent WAP QQ and so are the model.

Ⅲ , Tool Type

As the name implies, users need to solve a problem through such products. Therefore, "task-oriented and disassembly design" is the core of this kind of product design. The most representative product is the search engine, its core task is to help users search information.

Mai classmate has an article more detailed on the iphone application type analysis, although with WAP site there are some differences in things, but the essence of things are similar to the wonderful.

Four, user's use scene

Mobile phones Such a mobile device and PC is the biggest difference is that users always carry, users in any scene may be out of the mobile phone to play some: bus, subway, shopping malls, roads, beds, toilets ... But all of these scenarios have one thing in common: the user is very vulnerable to the disruption of the environment around the task, so the phone is only suitable for a single thread of the task!

Mdchina on the user how to use the application of the article, introduce the user's use of the scene, interested friends please step!