Assumption:
< /p>
Main ideas
- APP is mainly implemented in H5, not limited to active pages
- Do not use comparison Popular SPA (single page application) method
- each The interface corresponds to an H5 page, which is equivalent to the functions of Activity/ViewController+layout
- Each interface (including the native one) has a unique URL, which can be redirected through the url< /li>
- The template is rendered in the App, and the front-end and back-end separation will be in the APP instead of the server. The APP is more dynamic
- Preset resources to make the loading process faster
APP will be divided There are three levels:
- Container: H5 is provided natively Unsupported or poorly supported functions (such as video and audio playback), management page switching, data interaction with the server, page rendering, preset resources, caching strategies, etc. The container should be modular and pluggable during construction
- H5 frame: a lightweight H5 frame, plus some support for APP general functions (such as animation effects, gesture interaction, General UI components, etc.)
- H5 business layer: all business logic is implemented on different pages
The first two levels can form a framework for the benefit of mankind. In the same field, the third level can also abstract shared components or libraries
Advantages:
Compared to native applications,
- APP is more dynamic, which can reduce APP upgrades. Only if the container changes, users need to upgrade. Page changes, no need to upgrade
- Cross-platform, iOS and Android share a set of pages (there may be PCs, Widows Phone in the future)
- Reduce technical requirements, and the front end can be used quickly
Relative to SPA
- Each page is more independent of each other, Avoid all js code to be executed in one context, you can avoid heavy UI frameworks, single page problems will not interfere with other pages, and you don’t need an overly complex dom structure
- It does not conflict with the native APP gameplay and can complement each other. For example, some pages of an APP can be native and some are H5 (of course, try to use H5 as much as possible).
problem
debugging is better than pure native applications More difficult. But if you simply debug H5 on the simulator, remote debugging with Safari and Chrome is more flexible than native application debugging.
The experience is still far behind the native APP, which is mainly manifested in the operation response time and animation effects. But in most cases, compared with the native APP, the gap is no longer felt.
Security needs to be studied.
When too many pages coexist, memory consumption is large
WebAPP and native APP are both mobile terminals, and there are few studies on the interaction difference between these two. Recently, the company did a change from native APP to The transplantation of WebAPP (HTML5), so summarize the problems and differences encountered during the period.
(Author’s note: This article’s WAP means webAPP, many thx~)
From the usage scenario, WAP users face more severe problems than APP users:
1, page jump Turning is more laborious and more unstable
Thinking point: How to reduce jumps (flat structure, page layout skills), increase the smooth flow and stability of data and display (technical)
2. Smaller page space (because the browser’s navigation itself occupies part of the screen space), greater burden of information memory
The screens of mobile devices are much smaller. This kind of reading through the crack of the door increases the cognitive burden. The short-term memory of the human brain is unstable. The more information users need to remember temporarily while scrolling the screen, the worse their performance will be.
——”Intimate Design: Creating Highly Usable Mobile Products”
Thinking point: clearer typesetting, more concise information (some rich and complex visual expressions can be removed on the basis of APP)
3. The navigation is not obvious, the original bottom navigation disappears, and effective navigation encounters challenges
Thinking point: How to provide navigation effectively? What are the forms?
4. The interactive dynamic effects are restricted, which affects the understanding of some page scenes and logic.
Thinking points: such as the pop-up, completion and abnormal exit of the login and registration process, make text prompts.
In view of the above dilemma, the solutions are summarized as follows.
First, from the APP to the WAP version, the most obvious and core product is:
1. Streamline functions, realize only core tasks, and consider deleting non-core branches.
2. Make a new WAP navigation.
3. Supplement to the WAP station Download the guidance of the APP.
>> How to design WAP navigation?
1. Several common WAP navigation styles
1.1 top bottom Navigation design:
1.2 Navigation shortcut key design:
Meituan: Fixed position of the top bar
Taobao: floating circle-expandable button
Youku: When the screen is not above the fold, the right side of the page is floating
2. Effective navigation design
1. The basic shortcut navigation includes shortcuts to return to frequently used pages (such as homepage, my, etc.)
2. When there is a deep structure, add a shortcut to return to the important level page in time
3. Situational navigation, which is convenient for users to quickly jump to the page they want to go, such as a button to view order details at the end of the purchase.
ps: It is more necessary to draw a flow chart of page jumps on WAP pages to find out the entry of each page, especially the flow of page return; some simplified return buttons , You can specify the page you are returning to
>>How to guide users to download APP?
1. Where does the guide appear?
General homepage, core task page (such as e-commerce WAP product detail page, video WAP video watch page)
2. What are the ways to guide downloading APP?
1. Place the download bar at the top of the page 2. The floating layer guide at the bottom of the page 3. Integrated into the first screen of the page
4. Download button format 5. The bottom foot contains: Client download entrance
Secondly, in designing the WAP version, there are the following tips for reference:
1. Reduce jumps from page layout: Use interactive techniques to hide text (eg Tencent video)
2. Cancel the float layer and increase the display space (eg: Dianping)
Cancel float floating layer, and add the “buy” button again at the end of the details
3. Reduce the picture on the page ( Varies depending on the situation), streamline the visual presentation of some tab navigation
Technically note:
1) Compatibility test of various mobile phone browsers
2) Access to underlying services (can Retrieve, but only keep it when it is the core function. eg: Sina, Meituan, etc. have removed the avatar upload function)
3) Pay attention to offline data storage To reduce the frequency of data requests.
4) Consider what data about the user is saved: settings, personal data, reading anchors, jumping out of the page, etc.
5) Avoid interaction conflict between animation and browser
6) Asynchronous in order Load eg: Tencent Video
Common WAP navigation design
Navigation shortcut
Download APP guide
Use Expand the collapse button to reduce page jumps
Conversion processing of floating layer
< p>Visual fine-tuning
Tencent Video loads asynchronously.