Shulou(Shulou.com)06/02 Report--

This article will explain in detail how the customization scheme based on Sketch UI theme is implemented in vehicle navigation applications, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

1. Guide reading

With regard to the theme customization of the application, I believe everyone has more or less contact. Basically, the implementation ideas can be divided into two categories:

Built-in theme (custom style within the application)

External loading mode (apk form of resources, compressed resources, plug-ins, etc.)

In fact, there is no absolute good or bad for customized implementation ideas for different themes, and each implementation scheme has its own advantages and disadvantages. the important thing is how to weigh and choose, according to the actual project requirements and pain points, to formulate a scheme that meets the actual project requirements and can solve the pain points in the process of theme customization is a good plan.

Since my team and I have been developing in-car navigation applications, the target is for customers. Different customers have different requirements for the UI or theme of the application, that is to say, for different customers and versions of different channels, they need to have different application themes.

With the increase of projects, if there is not a flexible, easy to manage, low-cost theme customization solution, then the implementation will become very difficult.

two。 The implementation of theme customization in the past

For the UI that needs to be customized, research and development adds corresponding custom theme controls.

The layout is built by these custom theme controls.

UED modifies the corresponding color value in the corresponding theme control xml to customize the theme.

Research and development of integrated UED configuration files to achieve theme customization

Develop a package, UED to verify the theme customization degree of reduction.

The basic idea is that the theme customization UI is needed in the interface, which is realized by customizing the theme control, and the custom theme control can replace the theme color value and so on by replacing the layout xml, so as to realize the theme customization, but the disadvantage of this scheme is very obvious:

High cost: theme customization requires UED to manually modify xml, but generally UED does not know much about the content of xml format, so there is no doubt that the cost of learning and modification is very high, and secondly, it is easy to produce wrong modifications, resulting in poor stability.

Low efficiency: theme customization requires UED to modify the xml, send it to R & D, and then replace xml by R & D. there are many processes and low efficiency.

Difficult to maintain: before the theme customization, there is no unified thing management, the theme for UED is a pile of xml files, it is difficult to maintain

Poor reusability: because the theme is customized through xml, if the theme control is modified, the xml is also modified, and the reuse of the theme is difficult to achieve.

3. Design and implementation of the new scheme

From the figure above, we can see that UED participates in most of the processes in the whole process of theme customization, and R & D needs to be involved only when the theme is integrated. In fact, in the final analysis, UED is the Owner of theme customization, and the ideal state for theme customization is to provide a certain tool platform for R & D. after UED designs the theme, it can be directly integrated into the application to verify regression without R & D intervention. The entire theme customization process is completed by UED.

3.1 Programme elements

Based on the idea that theme customization can be completed with the participation of UED, and taking into account the needs of the project for theme customization, in the design of the new theme customization scheme, we should focus on the core role and serve the core role, so as to minimize the cost of the core role, improve the efficiency of the whole customization process, and at the same time take into account the core needs of the project as the goal to design and build a new scheme. The following are the roles that should be paid attention to and the key issues to be solved in the scheme:

Theme customized protagonist: UED

UED, UI design tools: Sketch

Project requirements:

1. Different channels of different projects have different theme customization requirements.

two。 There is a corresponding theme when you leave the package, so you don't need to download it.

3. The project cycle is short and needs to be customized quickly.

4. The project needs to be maintained, and the theme needs to be easy to maintain and manage.

3.2 the prototype of the plan

Based on the above analysis, the general process of theme customization is as follows:

First of all, the scheme should be built around UED, because UED is based on Sketch for UI interface design, so if theme customization can also be based on Sketch,UED, it is very convenient to design UI based on Sketch while also designing themes.

At the same time, different channels will have different theme customization, and it needs to be quickly customized to facilitate management and maintenance, and built-in themes are needed when the package is released, so a theme management platform is needed to manage and maintain theme resources. and support theme replication, so that theme resources can be modified based on the themes of existing projects to form a new theme.

Next, when Jenkins is packaged, different theme resources can be packaged into apk according to different channels

Finally, the packaged apk needs to be quickly installed on the real machine for reduction acceptance.

The final theme customization scheme is basically formed, the UI theme customization scheme based on Sketch:

4. Detailed explanation of the scheme

Sketch-based UI theme customization is mainly divided into four steps:

UED creates theme resources in Sketch and uploads them to the cloud (theme creation)

UED manages theme resources on the WEB theme platform (theme management)

Jenkins pulls theme resources and packages them into applications (theme integration)

Real machine preview effect (theme verification)

The above process is mainly aimed at the main branch, the first interface development, customized for the themes of subsequent different projects, only need to copy the theme resources in the WEB platform, and then modify the corresponding theme, you can quickly customize a set of corresponding themes.

The main key steps are described in detail below:

4.1 theme resource creation

Generally speaking, theme resources need to be designed in advance before the interface is designed. After UED designs the theme controls in Sketch, we provide a quick theme input interface so that UED can quickly edit the theme properties of the corresponding controls and upload them to the cloud with one click. As shown below, create theme controls in Sketch:

4.2 WEB theme platform manages theme resources

WEB theme platform saves all the customizable theme resources in the project, including theme controls, illustrations, iconfont, text size, etc., here you can quickly based on the master theme, copy out new theme resources, and then carry out personalized customization, or rapid copy based on other projects, theme customization is no longer tedious and time-consuming operation, but has become intuitive and easy to operate.

4.3 Real Machine Preview

After editing the theme resources in the WEB theme platform, the theme resources are packaged into apk through Jenkins or server. Finally, through the vehicle-machine equipment cluster management platform, the apk is installed on different real machines to achieve the customization effect of the real machine preview theme. UED can quickly return to the degree of restoration, find problems, and quickly repair on the theme platform.

5. Scheme comparison

Several commonly used theme customization schemes in the industry are compared with the UI theme customization scheme based on Sketch in several aspects.

Comparison of the above three options:

Built-in theme: the advantage is simple to implement, easy to configure, and the disadvantage is the inflexibility of theme customization.

External loading scheme (apk): the advantage is high scalability, but because this scheme needs to set all the variable resources in the code, the software implementation cycle is long, and it is easy to make mistakes when writing the code. And the first version takes a long time, once the interface layout changes, it takes a long time to write the code.

UI theme customization scheme based on Sketch, its advantages are as follows:

Sketch, a UI design tool based on UED, can design theme resources while designing UI, and can quickly preview the display effect of theme resources on the overall interface.

Through the ability of Sketch plug-in, topic resources can be quickly uploaded to the background to facilitate the unified management and maintenance of topic resources.

After modifying the theme resources in the background configuration, you can also stream them back to Sketch for viewing.

The biggest advantage of this scheme is that it connects seamlessly with Sketch, a UI design tool of UED, which greatly improves the production efficiency and cost of the theme, and enables UED to independently complete the production, management, integration, application and verification of theme resources, forming a small closed loop of the theme.

On the vehicle navigation application based on Sketch UI theme customization scheme is how to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.