Mobile Interactive Web page 11 major technical points breakthrough summary of creative article

First, hardware background (important)

According to a report by the Analysys think-tank, China Mobile's internet users reached 652 million in 2013, with 70.1% of them using an Android phone and 26.1% using the iphone.

More than half of the high-income netizens are using iOS, which accounts for only 17.71% of the low-income group. Low-income Internet users use Android's mobile phone more than 66.67% and 76.09%, respectively.

First of all, China Mobile internet netizen structure is to let everyone in the beginning of the project concept, we must clearly face the group is what, in the progress of the project encountered problems, combined with time and effect, can have a choice.

This is a very important question, like the "graceful downgrade" principle we put on the PC Web page and has been widely accepted: using new technologies (HTML5, CSS3, Javas cript, etc.) in browsers such as Google Chrome, Firefox, Safari, and QQ browser speed mode. To create more fresh experience for users. But IE6, IE7, the old system under the QQ browser compatibility mode browser, you can only see the ordinary no effect of the page.

This problem is only a little more than the display of the mobile end. If IE6 is the moth of PC browser, that Android low-end machine is the moth of mobile browser.

Android phone configuration and system can be described as thousands, CPU and Web page display effect card is closely related to the Android version of the Web page is also closely related to the presentation (for example, Android 2.0 incompatible CSS3 of fillet properties Border-radius, etc.). (CPU Chinese meaning is the processor, the cell phone response speed, card not card, are closely related to the CPU.) Now on the market low-end machine definition is the CPU frequency below 800M, 800M to 1.5G belongs to the middle end machine, high-end machine is dual-core 1G above the mobile phone. )

In understanding this problem, under the premise of mobile phone mobile web design and reconstruction, it will be targeted to make trade-offs, so that the maximum efficiency of the project.

The following will be our recent production of more excellent mobile phone feature pages as a case, to tell dear everyone, what we can do at the front, hope that the future of the creative reference to help.

　　Ii. Appreciation of the project

1, TGA mobile game website

TGA City Rally

2. up+ Invitation Letter

3, every day cool run Rio version

　Third, the technical creative point

Generally in the production of strong interactive, multiple animation effect of the page before, suggest products, design, front-end meeting to discuss the implementation of details. At the same time, designers have a very good mobile phone web design habits and a certain way of thinking of the display effect, as well as the requirements of the product has a great tolerance, know how to choose.

　1, Technical point: CSS3 animation

Scope of application: interconnected and mutually independent elements

Equipment requirements: Medium and high-end mobile phones

Will find up+ invitation letter is the most used is the animation effect, in fact, are written in CSS3.

The CSS3 animation can be understood as a state of an element, allowing it to be shown in the form of a frame to B state. The basic deformations are scale (scaling), translate (displacement), rotate (rotation), skew (tilt), and so on, plus color (color), opacity (transparency), etc., using transition (conversion) and animation (animation) Plus the delay effect, the animation came out. Listen, dizzy? Take a look at the example below.

Interaction between independent elements of ①

This animation is not an early thought of good. In the production process, found that each page elements into the animation is similar, so that users are easy to feel bored and not interested in the page down.

In order to increase the end of the reach rate, the need for every page to the user to bring a message: The following content will be different oh, please continue to turn down.

"I am the player" this screen of the small elements are related to the game, the League of Heroes, Q version Galen, game players must handle, let them interact.

The handle is in the usual way (rotate + zoom + transparency), Galen also enters the normal way (displacement + transparency), but the trajectory of the Galen and the handle has a little overlap, which results in a collision between the two. The handle was hit with a need for feedback, and it was bounced off (displacement).

② single element Self rendering

See this screen design draft, really do not know where to start, the general animation effect of the above pages are used, this screen element is not much, how not boring? The initial idea is to let the small triangle jump out of the circle (zoom + displacement + transparency), echoing with the first screen. But only a small element jumps out, slightly thin. Change the direction of thinking, the small triangle can be self present AH.

Using its shape and direction, imitating the motion of a kite or airplane, giving a non-linear trajectory, the final rendering effect comes out (scaling + displacement + rotation + transparency).

③3d Transform

At the very beginning of the discussion the product said it needed to have the door open. A lot of implementation methods, the most common is the use of picture frames, many different state of the door of the picture to switch, resulting in the door gradually open the effect.

The advantage is to be able to make a variety of dynamic effects, the disadvantage is to increase the number of pictures, the page loading speed caused pressure (more can view the following Sprite animation introduction). Fortunately, this door is a solid color rectangular color block, you can use the CSS3 3D transformation (rotating 3D), to make the door open to the effect of the inside.

As shown in the Rotatey of the right one, the center line of rotation is defined as the left side of the door.

CSS3 transform properties are not much, but the combination of different parameters, it becomes a different rendering effect. If everyone at the beginning of this concept and understanding of the current, perhaps do not need to participate in the front-end discussion can be very smooth to the process down, improve efficiency.

　　2, Technical point: Sprite animation

Scope of application: Individual image has multiple frame animation

Equipment requirements: No

The idea of Sprite animation from the traditional animation industry, multiple maps in a certain period of time to switch to form a visual dynamic effect. Sprite animation is particularly suitable for many details of the frame-by-animation display, but the picture requirements are high, you need to be a picture of each frame, the following figure. This picture is compressed after 119K size, the cost is very high.

Originally cool run Rio version of almost every page of the small characters have sprite animation, file add up to 1.5M. In the PC Web page, a few m are understandable, but on the phone, hundreds of K is already fatal (under China's national conditions).

So on the second day of the line, the emergency processing page, leaving only the trial of the Queen's animation, access latency from 16 seconds straight down to 6 seconds. So if you want to apply sprite animations to your project, you need to think carefully.