As the forms of terminal devices become increasingly diverse, distributed technology gradually breaks down the boundaries of single hardware. An application or service can be called and shared among different hardware devices on demand, allowing users to enjoy a seamless full-scenario experience. As an application developer, a wide range of device types can also bring a large potential user base to your application. If an application wants to provide unified content on multiple types of devices, it needs to adapt to different screen sizes and hardware, and the development cost is high. The application development concept of "one development, multi-deployment" (hereinafter referred to as "one many") allows developers to efficiently build runnable applications on multiple types of devices based on a unified design. At the 2023 HDC conference, Huawei demonstrated the excellent practice of its self-developed application "Playing Skills" based on this concept. As a commonly used application for Huawei end users, Gameplay Skills has been deployed on multiple devices such as mobile phones, folding screens, and tablets through "One More". Not only has the experience been improved, but the amount of development code has also been reduced by about 40%. Below, we will explain the "one-many" development of gaming skills applications from four levels: architecture design, UI design, interaction design and listing.
Through "One More", gaming skills applications are deployed on different devices
Layered design of a three-tier architecture
By adopting a hierarchical design of a three-tier architecture in one project, Playing Machine Skills has gained the basic capabilities to support multiple devices, and achieved the greatest balance between adaptation differentiation and code sharing.
The development of gaming skills splits the application into a three-layer engineering structure of common capability layer (Common), basic feature layer (Feature), and product customization layer (Product). It supports a set of code projects to be developed and put on the shelves at one time, and can be deployed on multiple terminals on demand. The public capability layer supports network framework, tool classes, data management and other capabilities. The feature layer abstracts a reusable set of basic features with high cohesion and low coupling, such as rich media browsing and search. At the product customization layer, the UI, resources and configurations are integrated for the different features of multiple devices, such as multi-window, column-based experience, decoupling from the application base and other factors. Through system OS capabilities such as adaptive layout, responsive controls, interaction normalization, and IDE engineering capabilities, application projects are unified, maximizing code reuse, improving design and development efficiency, and taking into account the overall user experience of multiple devices. It supports the unification of application projects, maximizes code reuse, improves design and development efficiency, and takes into account the overall user experience of multiple devices.
Three-tier architecture hierarchical design of gaming skills application
Two multi-terminal design UI adaptive
There are differences in screen size, resolution, etc. between different devices. HarmonyOS logically abstracts the screen, including size and physical pixels, and provides rich adaptive and responsive layouts through the Ark development framework (ArkUI for short) to facilitate developers to adapt the interface to different screens. At the same time, HarmonyOS solidifies its experience in human factors design and multi-terminal design UI adaptation into relevant design guidelines and ArkUI controls, allowing application developers to consider multi-terminal differentiation and consistency during the design stage.
In the design and development of gaming skills, the multi-device experience strikes a good balance between consistency and difference. First of all, the interface design and interaction methods of gaming skills are as consistent as possible on mobile phones and 2in1 devices. The homepage adopts a unified information architecture, interface layout, and system controls to reduce user learning costs. Secondly, 2in1 devices have certain differentiated designs in terms of screen size, crowd scenes, control methods and functional scope, meeting the personalized demands of developers.
As the basic component of the application, components need to make necessary adjustments for different devices in terms of visual, interactive, dynamic effects and other forms of expression to achieve the best experience. Using multiple capabilities in gaming skills, the same component title bar can be implemented in different styles on mobile phones and 2in1.
The same component title bar has different styles in mobile phone and 2in1
In order to ensure that the style of each component is consistent, Playing Skills uses the visual style system resources uniformly defined by HarmonyOS, that is, hierarchical parameter configuration (such as color, font size, rounded corners, spacing, etc.).
Three interaction events normalized
For different types of terminal devices, users may have different interaction methods, such as through touch screens, mice, trackpads, etc. Input commands with the same intention from different input devices are interactively unified to provide developers with a unified API. A hap application can be installed on different devices. There is no need to handle interactions for different devices, which greatly simplifies the development difficulty and the amount of development code.
Four once-on-shelf deployment on demand
After it is put on the shelves once, the remaining work is handed over to AppGallery Connect, and developers can deploy it to different terminals as needed.
Deploy the logic diagram on demand once it is put on the shelves
In the development state, through business decoupling, different businesses are split into multiple modules. In the deployment state, one or more modules can be freely combined and packaged into an App Pack for unified release. In the distribution running state, each module can be distributed individually to meet the user's single usage scenario, or multiple modules can be distributed in combination to meet the user's more complex usage scenarios. Developers can choose between the following two modes to package and put ecological applications and meta-services on the shelves.
Two modes of packaging and putting on shelves through "one-many" capability
The above is the practical experience of playing with the "one-many" feature. I hope to provide a reference for developers. More application developers are welcome to understand and use the "once development, multi-deployment" capability.
Click to follow and read the original text for more information