HarmonyOS Next Application Interface Design: Best Practices for Internationalization

This article aims to deeply explore the technical details of the Huawei HarmonyOS Next system (up to API 12 as of now) in terms of application internationalized interface design, and is summarized based on actual development practices. It mainly serves as a carrier for technical sharing and communication. Mistakes and omissions are inevitable. Colleagues are welcome to put forward valuable opinions and questions so that we can make progress together. This article is original content, and any form of reprint must indicate the source and the original author.
In the wave of globalization, HarmonyOS Next applications are facing the test of users from different language and cultural backgrounds. An excellent internationalized interface design can not only enhance the user experience but also help the application stand out in the global market. This article will elaborate on the key elements in the internationalized interface design of HarmonyOS Next applications, including interface space reservation and flexible layout, interface mirror design, support for mixed text, as well as common design mistakes and solutions, providing some practical cases for everyone.

I. Interface Space Reservation and Flexible Layout

(I) Problem Background

The text lengths of different languages vary significantly. Especially during the translation process, the translations of some languages may be much longer than the original texts. If the application interface design does not fully consider this factor, it may lead to problems such as text truncation and chaotic layout, which will seriously affect the user experience. For example, the English word "Hello" becomes "Guten Tag" in German, and the length obviously increases.

(II) Solutions

1. Implementation of Flexible Layout     - Priority should be given to using dynamic layout technologies so that UI controls can automatically adjust their sizes and positions according to the length of the text content. For example, use the adaptive layout containers provided by the HarmonyOS system, such as Row and Column. They can automatically adjust the arrangement mode according to the size and number of sub-components to ensure the complete display of the text.     - For text display areas, set appropriate constraint conditions to enable them to expand adaptively. For example, in XML layout files, use the match_parent or wrap_content attributes to control the width and height of text views, avoiding hard-coding fixed dimensions.
2. Space Reservation Strategy     - Based on English, reserve space according to the general growth law of the length of translated texts. Refer to the space reservation ratio table mentioned in the reference document. For text with no more than 10 English characters, reserve 100% - 200% of the space; for 11 - 20 characters, reserve 80% - 100% of the space, and so on. In actual design, adjust the margins, spacings, and other parameters of the layout to achieve space reservation. For example, in a layout containing buttons and text labels, increase the spacing between the button and the text label to adapt to the changes in the length of different language texts.     - For the possible occurrence of extremely long texts, set scroll bars or ellipsis display methods to ensure that the interface remains usable and aesthetically pleasing under extreme conditions. You can use the ellipsize property of the Text component in the HarmonyOS system to set the ellipsis method when the text exceeds the display area, such as end (displaying ellipsis at the end) or middle (displaying ellipsis in the middle). ### (III) Example Code The following is a simple XML layout example showing how to use adaptive layout and reserve space:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:text_view"
        ohos:height="wrap_content"
        ohos:width="match_parent"
        ohos:text="Hello"
        ohos:text_size="16fp"
        ohos:marginLeft="16vp"
        ohos:marginRight="16vp"
        ohos:marginTop="16vp"
        ohos:marginBottom="8vp"
        ohos:ellipsize="end" />
    <Button
        ohos:id="$+id:button"
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:text="Click Me"
        ohos:text_size="16fp"
        ohos:background_element="#007DFF"
        ohos:text_color="#FFFFFF"
        ohos:marginLeft="16vp"
        ohos:marginRight="16vp"
        ohos:marginBottom="16vp" />
</DirectionalLayout>

In the above code, the width of the Text component is set to match_parent, and the height is set to wrap_content, which can automatically adjust the height according to the text content. At the same time, the left and right margins and the top and bottom margins are set, reserving a certain amount of space for the change in the length of the text, and when the text exceeds the display area, ellipsis is displayed at the end.

II. Interface Mirror Design

(I) Problem Background

The reading order of texts in different countries and regions varies. For example, English is read from left to right, while Arabic and Greek are read from right to left (RTL). To meet the reading habits of global users, the application interface needs to support mirror display to ensure that the content presentation meets the expectations of local users.

(II) Solutions

1. User Interface Layout Mirroring     - The HarmonyOS system provides relevant mechanisms to implement mirror layouts of the user interface. In layout files, by setting appropriate properties or using specific layout containers, UI elements can automatically adjust their arrangement order according to the system language settings. For example, use DirectionalLayout and set the ohos:orientation property to horizontal or vertical, and combine it with the system's language direction settings to achieve the correct arrangement of elements.     - For complex interface layouts, modular design should be carried out, and reusable UI modules should be encapsulated into independent components for flexible combination and adjustment in different language directions. For example, encapsulate a login module containing multiple buttons and text boxes into a custom component. In an RTL language environment, only the overall layout direction of the component needs to be adjusted.
2. UI Element Mirroring     - For UI element controls and icons with directionality, such as arrows and progress bars, provide mirror versions. In resource files, create corresponding picture resources or use vector graphics according to different language directions, and dynamically load the correct resources according to the system language through code logic. For example, in an RTL language environment, load the arrow icon pointing to the left, and in an LTR language environment, load the arrow icon pointing to the right.     - Ensure that the layout relationship between icons and text remains reasonable after mirroring. For example, in a button containing an icon and text, adjust the spacing and alignment between the icon and the text to make it look natural and comfortable after mirroring.
3. Touch and Operation Adaptation     - Redefine the touch area and operation logic to conform to the reading order from right to left. For example, in a sliding list, in an RTL language environment, reverse the sliding direction so that users can operate according to their habits.     - Adjust the focus control and navigation logic of interface elements to ensure that users can interact smoothly in the interface in different language directions. For example, in a form page, by setting the appropriate TabIndex property, make the focus move from right to left in an RTL language environment. ### (III) Example Code The following is a simple example showing how to implement some functions of interface mirroring in the code:

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
export default class MainAbility extends UIAbility {
  onCreate(want, launchParam) {
    globalThis.abilityContext = this.context;
    // Get the current window object
    let win = window.getTopWindowSync().getWindow();
    // Get the system language direction
    let layoutDirection = this.context.getResourceManager().getConfiguration().layoutDirection;
    if (layoutDirection === 'rtl') {
      // If it is an RTL language direction, set the interface mirror property
      win.setLayoutDirection(window.LayoutDirection.RTL);
    } else {
      win.setLayoutDirection(window.LayoutDirection.LTR);
    }
  }
}

In the above code, by getting the system language direction and setting the layout direction of the window according to the direction, the basic mirror function of the interface is implemented. For more complex UI element mirroring and touch operation adaptation, further processing is required in specific UI components and interaction logic.

III. Support for Mixed Text

(I) Problem Background

In internationalized applications, it is common to have the situation of mixed display of different language texts. For example, in a multi-language social application, users may input content in multiple languages such as English, Chinese, and Arabic simultaneously. Ensuring that these mixed texts can be correctly displayed and the layout is reasonable is an important环节 to enhance the user experience.

(II) Solutions

1. Text Direction Processing     - The text components of the HarmonyOS system should have the ability to automatically identify and process the text directions of different languages. When displaying mixed texts, correctly set the display direction of each character or word according to the language it belongs to. For example, when a text contains English and Arabic, the English part is displayed from left to right, and the Arabic part is displayed from right to left, and a natural transition is achieved between the two language texts.     - Use the text typesetting engine provided by the system to perform intelligent typesetting on mixed texts. Ensure that the spacing, line breaks, and other typesetting effects between different language texts meet the reading habits of users. For example, in a text containing Chinese and English, automatically adjust the word spacing and line spacing according to the different languages to make the text look neat and beautiful.
2. Character Encoding and Font Support     - Ensure that the application supports multiple character encoding formats to correctly display characters of different languages. The HarmonyOS system defaults to supporting common character encoding formats such as UTF-8, but when dealing with some special characters or ancient languages, additional encoding support may be required. Developers can perform encoding conversion or use specific character processing libraries according to their needs.     - Provide a rich font library to meet the font requirements of different languages. Include font files of multiple languages in the application and dynamically load the corresponding fonts according to the user's language setting. For example, when displaying Chinese text, load Chinese fonts; when displaying Arabic text, load Arabic fonts to ensure clear and beautiful text display. ### (III) Example Code The following is a simple example showing how to display mixed texts in a HarmonyOS application:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:mixed_text_view"
        ohos:height="wrap_content"
        ohos:width="match_parent"
        ohos:text="Hello 你好 مرحبا"
        ohos:text_size="16fp"
        ohos:marginLeft="16vp"
        ohos:marginRight="16vp"
        ohos:marginTop="16vp"
        ohos:marginBottom="16vp" />
</DirectionalLayout>

In the above code, the Text component displays mixed texts containing English, Chinese, and Arabic. The HarmonyOS system will automatically handle the direction and typesetting of the text to make it correctly displayed on the interface.

IV. Common Design Mistakes and Solutions

(I) Mistake One: Ignoring the Impact of Language Differences on Interface Layout

1. Problem Description     - When designing the interface, developers only base on one language (usually the native language) for layout, without considering the differences in text length and reading habits of other languages, resulting in problems such as element overlap and text truncation in other language environments.
2. Solution     - Adopt an internationalized design thinking from the early stage of the project, follow the principles of interface space reservation and flexible layout mentioned above, and conduct multi-language simulation tests to discover and solve layout problems in advance. For example, in the design prototype stage, use placeholder texts to simulate different language lengths and check the adaptability of the interface. ### (II) Mistake Two: Simple Text Replacement Translation
3. Problem Description     - Directly translate the source language text word by word without considering the grammar, cultural background, and expression habits of the target language, resulting in stiff, difficult-to-understand, and even ambiguous translations.
4. Solution     - Hire professional translators or localization teams, provide complete translation scene information, including context, control usage, interface screenshots, etc., to ensure accurate and natural translations. At the same time, conduct proofreading and review after translation to avoid affecting user understanding due to translation problems. ### (III) Mistake Three: Ignoring the Impact of Cultural Differences on Colors, Icons, etc.
5. Problem Description     - In different cultures, colors, icons, etc. may have different symbolic meanings. For example, white is often associated with weddings and purity in Western culture, but may be related to funerals in some Asian cultures; some icons may have different cognitions and interpretations in different regions.
6. Solution     - Conduct cultural research in the design stage, understand the cultural customs and preferences of the target market. Avoid using colors and icons that may cause misunderstandings or discomfort, or provide alternative design schemes for different cultures. For example, in a globally applicable application, for important prompt information, do not use a single color to represent it, but adjust it dynamically according to the cultural habits of different regions. ### (IV) Mistake Four: Over-Reliance on Automatic Tools for Internationalization Processing
7. Problem Description     - Although the HarmonyOS system provides some internationalization and localization tools and frameworks, completely relying on automatic tools may not be able to handle some special situations, such as complex text formats and specific language grammar rules, resulting in functional abnormalities or display errors in some language environments.
8. Solution     - On the basis of using system tools, combine manual inspection and optimization. For key interface elements and functions, conduct targeted tests and adjustments to ensure that the application can run stably in various language and cultural environments. For example, when handling date and time formats, in addition to using the system's formatting function, also manually check whether the display effect in different regions conforms to local habits. By avoiding these common design mistakes and adopting effective solutions, we can create a more friendly and globally market-adapted HarmonyOS Next application interface. On the road of internationalized interface design, continuously paying attention to user feedback and constantly optimizing design details are the keys to enhancing the application's competitiveness. I hope this article can provide valuable experience and inspiration for HarmonyOS system counterparts in the aspect of application interface internationalized design, and help create more excellent globalized applications.