The design difference between H5 webpage interface and ordinary interface _h5 webpage and webpage?

First, correct a common sense mistake. We usually call mobile web design Wap. In fact, the full name of Wap is wireless application protocol, which is an open specification, enabling mobile users to use wireless devices to use Internet information and services at any time. Some people call mobile web pages WebApp. In fact, most of our websites can be called WebApp, not only mobile web pages, but also PC websites. The correct name should be "mobile phone webpage", which can more accurately summarize the webpage design of mobile phones.

Due to some characteristics of mobile phone itself, mobile phone web pages have some inherent characteristics compared with NativeApp and PC web pages. To sum up, there are the following points:

1, different usage scenarios;

Most of the visits to mobile web pages are through search engines and direct input of web addresses, which are more for browsing information and meeting the needs of timeliness (such as exchange rate conversion, weather in different places, news reading), so the retention rate is low.

2, the displayable space is small;

In addition to the small screen of the mobile device itself, most browsers have an address bar and a navigation bar, which further occupies the screen space.

3, the operation is inconvenient;

This feature is actually caused by the small display space, because the display space is small. Most browsers hide some operations such as "New Tab", "Forward" and "Back". Users need more steps to achieve some operations. After the H5 epidemic, this phenomenon is more obvious in WeChat.

4. Different ways of interaction;

Because of the performance problems of the mobile phone, some special effects on the app cannot be reproduced on the mobile phone webpage. Even if it can be reproduced, the special effects will not be smooth and the user experience will be poor. Therefore, this determines that mobile web design needs different interaction methods and different concerns.

According to the above four characteristics, I summed up four principles that should be paid attention to when making mobile web pages:

1, defining the main process of the product;

Because of the different usage scenarios, what users do on mobile web pages is more specific. This requires that when designing a product, the main process of the product should be clear and unnecessary functions should be deleted; Let users successfully accomplish their goals. In addition, we should see that mobile web pages need to be set in an obvious position because of their own characteristics and low retention rate.

NativeApp download portal imports users into the application.

2. The page design is based on simplicity;

Because the user's goal is obvious and limited by the screen size. Therefore, the page design is based on simplicity, color matching and highlighting key information.

3. Pay more attention to global navigation;

WebApp application scenarios are very diverse, and the most typical one is the built-in browser on WeChat. In this case, the design of navigation is particularly important. Each page must be able to reach any page on the WebApp. There can be more steps, but there must be a path.

4. Reduce special effects and consider page loading speed;

Using "click", the most common way of interaction, can minimize unnecessary effects and elements, highlight main information and speed up page loading.