Don't want to be rejected by developers? You need to know these 3 most basic APP technology frameworks

I don’t know if you have ever encountered this situation. When you have made a design plan and are happily explaining the ideas and creativity of the plan to the developer, the developer suddenly says, "This plan can't be implemented." At this time, you feel very bad and start to mutter in your heart, "Such a simple design can't be realized, are you a technical person?" But it’s useless. Under the urging of the product and development, as a designer, you can only work overtime to modify the plan.

Where exactly is the problem? This is actually due to our designers’ lack of knowledge of App technology frameworks. Although we don’t have to be able to write code, mastering the necessary App technology framework principles can more effectively help us predict which solutions are feasible and have better implementation effects, so as to make the design solutions more down-to-earth. Let’s learn about the App technology frameworks.

1. Types of App Technology Frameworks

Figure 1 The relationship between the three App technology frameworks

At present, the technical framework of App is basically divided into three types (Figure 1):

1) Native App:

A third-party application that is based on the local operating system of a smart mobile device (such as iOS, Android, and WP operating systems) and is written and run using the programming language applicable to the corresponding system. Since it is directly connected to the operating system, the code and interface are developed and designed for the platform on which it runs, and can bring out the performance of the device well, so the interactive experience will be smoother.

2) Web App:

An application written in Html language and existing in the browser of smart mobile devices. It does not need to be downloaded and installed. It can be said to be a touch-screen version of a web application. Since it does not depend on the operating system, once a Web App is developed, it can basically be applied to various system platforms.

3) Hybrid App:

A mobile application that uses Native technology to build the App shell, and the content inside the shell is provided by Web technology. It has both the "advantages of Native App's good interactive experience" and the "advantages of Web App's cross-platform development."

2. Choice of App Technology Framework

For designers, we are often told which technical framework the project uses, and then we start designing. In fact, we can also negotiate with product and development colleagues based on product features, framework features and project time (Figure 2), and reasonably select corresponding technical frameworks for different parts of the App, and then think about the design plan under the corresponding technical framework.

Figure 2 Product features, framework features, and project time considerations

3. Design features of the Hybrid App technical framework

Since Hybrid App combines the technical features of Native App and Web App, by analyzing the technical framework components of Hybrid App, we can better grasp the basic development knowledge of App framework and help us to do better design.

Most of the content of Hybrid App is to load web page content in the Native framework, which can make the content of App more scalable while ensuring the user experience. Even if more content and business functions are connected, the installation package of the entire App will not be too large. The representative of a typical Hybrid App is our mobile Taobao client. When designing a Hybrid App, pay attention to the following five points (Figure 3).

Figure 3 Five design points of Hybrid App

1) Image Rendering

Because the Native technology can directly call the system's rendering engine, it can achieve smooth rendering of complex images without affecting the performance of the device.

Since the web content part is based on the built-in browser, when rendering images, it is necessary to access the system's rendering engine through the browser or call a browser-based third-party rendering engine. In the middle, rendering requests need to be made at multiple levels, so the timeliness and performance of rendering will be greatly reduced, resulting in machine freezes when rendering more complex images or dynamic rendering.

As shown in Figure 4, since the title bar uses the Native technology framework, a complex frosted glass effect can be used to make the title bar more transparent, while the content area uses Web technology based on Html5, so it is not suitable for a rendering solution that dynamically changes the background image (when the pictures are rotated, the background image will dynamically change to a blurred background according to the picture content).

Figure 4 Dynamic image rendering

2) Animation experience

Since most of the content area of ​​the Hybrid App uses Web technology based on Html5, the interpretation and operation of the animation requires a lot of CPU performance. When designing, pay attention to the following three aspects:

a. Different types of animations consume different amounts of CPU performance (Figure 5): Animation types that require low CPU performance can run more smoothly, but if your design is a non-system-provided animation type (Figure 6), you need to communicate with the developer in advance about the feasibility and CPU performance consumption.

b. Performance differences between models: The CPU performance of different mobile phone models varies greatly. You need to understand the proportion of different models in your App (Figure 7). An animation or interactive action that can run perfectly on an iPhone 6 may get stuck on phones below the iPhone 6. Therefore, it is not suitable for frequent rendering that consumes a lot of CPU performance.

c. Impact of the network: If your animation needs to load content while it is moving, you need to consider the impact of content loading on the smoothness of the animation when the network is slow. At this time, you can consider loading the content first and then starting the animation, or simplifying and compressing the amount of content being loaded.

Figure 5 CPU performance requirements for different animation types

[[157159]]

Figure 6: Liquid flip animation

Figure 7 Market share of different models

As shown in Figure 8, in the Web content area, when you click on an image, the image will be enlarged (the system default zooming animation, which consumes little CPU performance), but the animation of automatically rearranging other images will consume more CPU performance, causing freezes or flashbacks on low-end machines, and will also be affected by network speed, resulting in an unfriendly experience. If complex animations must be made, you can make the animation appear only on high-end models.

Figure 8 Image resize and rearrange animation

3) Platform compatibility

Since the web content of Hybrid App uses the same design scheme for different platforms, in order to better make the design scheme compatible with different platform features and mobile phone resolutions, it is recommended that the copy and graphics adopt the following three methods:

a. System default font: If you do not want to design a special font style, the default fonts of iOS, Android and Windows Phone systems (Figure 9) can basically meet our needs, and the display effect on different platforms will also be better.

Figure 9 System default font

b. SVG (Scalable Vector Graphics): It can be freely scaled to fit different screen sizes and resolutions without blurring or distortion (Figure 10).

[[157161]]

Figure 10 SVG (Scalable Vector Graphics)

c. Use Iconfont instead of icons: the size and color can be freely changed (Figure 11).

Figure 11 Iconfont icon

Using these three methods can not only adapt well to different models and screen sizes, but also will not increase the size of the installation package.

As shown in FIG. 12 , if the “Alarm and Remind Me” on the button does not use Iconfont or the system default font, the display effect on screens of different sizes will be difficult to control and there is a risk of being stretched, deformed, or blurred.

Figure 12 The display effects of icons and fonts on screens of different sizes

4) Interactive Behavior

Since Hybrid App mainly restores the interface design and interactive behavior through the CSS style structure of the web page and the JavaScript programming language, compared with the pure Native App technical framework, more cumbersome codes and hierarchical requests are required to achieve the same interaction method as the native system. Although the interaction method of Native App can also be simulated, such simulation first increases the development cost, which is contrary to the principle of not affecting performance and efficiency. Therefore, it is necessary to reasonably choose whether it needs to be consistent with the system interaction based on the design goals.

As shown in Figure 13-a, if the "Win a Treasure Box Every Day" page is built with a pure Native framework, when the user clicks the "Participate in the Interaction to Get a Red Packet" card, the next page will use the iOS system's default right-to-left interaction method.

Figure 13-a System default interaction mode

However, since the Hybirid App technology framework is used here, the information in the content area will be directly changed like a web page (Figure 13-b), because this implementation method is more efficient and does not affect performance. More importantly, if the page uses the method of directly changing the content, it will not affect the user experience. In this case, it is not necessary to keep the interaction with the system consistent.

Figure 13-b Interaction method of directly changing the content area

5) Loading method

For pages in the Hybrid App framework, since there are both Native and Web parts, when loading content, you can consider the loading methods separately:

A. Native part: Regular content can be stored on the user's phone as needed, which speeds up loading time and reduces the trouble of repeatedly loading the same content.

B. Web section: The Web content area needs to load content from the Internet. Especially when the network conditions are poor, a friendly waiting state needs to be designed to ease the user's anxiety.

As shown in Figure 14, different loading methods can be designed according to different frameworks to make the waiting process shorter or more pleasant.

Figure 14 Designing loading methods based on the technical framework

4. Trade-offs between Design and Technology

1) Clarify the main process of the design plan

In the face of technology, does design have to compromise? The answer is no. Under the corresponding App technology framework, when considering the design plan, we must clarify the main process and branch processes of the design plan (Figure 15). For any plan that will affect the core main process of the plan, even if the development implementation difficulty and cost are high, we must continue to promote technological breakthroughs to provide users with a better user experience. For the branch processes of the plan, we can negotiate different solutions with the development, clarify where the technical implementation method can be adjusted or a different design plan can be changed, and which plans have risks and need alternative plans.

Figure 15 The main process and branch process of the design solution

As shown in Figure 16, when designing the label module of the mobile Taobao store, most merchants will set the content and position of the label on the picture according to the characteristics of the product picture. However, the technical framework of the store does not support the function of moving labels. Our design goal and the main process of the solution are to provide merchants with more flexible settings of product labels. Therefore, even if the technical implementation is difficult and costly, we also promote technological breakthroughs to realize the movable function of labels.

Figure 16 The store tag module

2) Communicate the feasibility of design ideas with developers in advance

After analyzing the product requirements, we can simply draw a rough interactive prototype on paper, and then communicate with the developer about the feasibility and difficulty of the idea to have a clear idea. If the plan involves motion effect design, you can record rough motion effects on paper, or take out the motion effect materials you usually collect (Figure 17) and communicate with the developer about the feasibility to quickly verify the design idea.

Figure 17 Animation material

5. Design Summary

“There is no perfect design in the world, because all you can do in the end is to strike a balance between various relationships” ——Paul Rand (famous American designer)

In a project, designers often need to weigh the relationship between business goals, user experience and technical implementation to make a design plan. The above only introduces the basic knowledge of the App technology framework to make designers more confident when making plans. However, since technology is changing with each passing day and is improving every day, in practice it is necessary to maintain close communication with development engineers according to the different stages of the project to make the design plan more reliable.