鴻蒙Next應用介面設計：國際化最佳實踐

SameX發表於2024-11-02
鴻蒙

本文旨在深入探討華為鴻蒙HarmonyOS Next系統（截止目前API12）在應用國際化介面設計方面的技術細節，基於實際開發實踐進行總結。主要作為技術分享與交流載體，難免錯漏，歡迎各位同仁提出寶貴意見和問題，以便共同進步。本文為原創內容，任何形式的轉載必須註明出處及原作者。

在全球化的浪潮下，鴻蒙Next應用面臨著來自不同語言和文化背景使用者的考驗。一個出色的國際化介面設計不僅能提升使用者體驗，還能助力應用在全球市場中脫穎而出。本文將詳細闡述鴻蒙Next應用在國際化介面設計中的關鍵要素，包括介面空間預留與靈活佈局、介面映象設計、支援混合文字，以及常見設計誤區及解決方案，為各位提供一點點實踐案例。

一、介面空間預留與靈活佈局

（一）問題背景

不同語言的文字長度差異顯著，尤其是在翻譯過程中，某些語言的譯文可能會比原文長得多。若應用介面設計未充分考慮此因素，可能導致文字被截斷、排版混亂等問題，嚴重影響使用者體驗。例如，英文單詞“Hello”在翻譯為德文“Guten Tag”時，長度明顯增加。

（二）解決方案

  1. 靈活佈局實現
    • 優先採用動態佈局技術，使UI控制元件能夠根據文字內容的長度自動調整大小和位置。例如，使用鴻蒙系統提供的自適應佈局容器，如 Row 和 Column，它們可以根據子元件的大小和數量自動調整排列方式，確保文字完整顯示。
    • 對於文字顯示區域，設定合適的約束條件，使其能夠自適應擴充套件。如在XML佈局檔案中，使用 match_parent 或 wrap_content 屬性來控制文字檢視的寬度和高度，避免硬編碼固定尺寸。
  2. 預留空間策略
    • 以英文為基準，根據翻譯後文字長度的一般增長規律預留空間。參考文件中提到的預留空間比率表，對於小於等於10個英文字元的文字，預留100% - 200%的空間；11 - 20個字元時，預留80% - 100%空間，以此類推。在實際設計中，透過調整佈局的邊距、間距等引數來實現空間預留。例如，在一個包含按鈕和文字標籤的佈局中，增加按鈕與文字標籤之間的間距，以適應不同語言文字長度變化。
    • 針對可能出現的超長文字情況，設定捲軸或省略號顯示方式，確保介面在極端情況下仍保持可用性和美觀性。可以使用鴻蒙系統的 Text 元件的 ellipsize 屬性來設定文字超出顯示區域時的省略方式，如 end（在末尾顯示省略號）或 middle（在中間顯示省略號）。

（三）示例程式碼

以下是一個簡單的XML佈局示例，展示瞭如何使用自適應佈局和預留空間：

<?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>

在上述程式碼中，Text 元件的寬度設定為 match_parent，高度為 wrap_content，可以根據文字內容自動調整高度。同時，設定了左右和上下的邊距，為文字長度變化預留了一定空間，並且在文字超出顯示區域時，在末尾顯示省略號。

二、介面映象設計

（一）問題背景

不同國家和地區的文字閱讀順序存在差異，如英語從左到右，而阿拉伯語和希臘語從右到左（RTL）。為了滿足全球使用者的閱讀習慣，應用介面需要支援映象顯示，確保內容呈現符合當地使用者期望。

（二）解決方案

  1. 使用者介面佈局映象
    • 鴻蒙系統提供了相關機制來實現使用者介面的映象佈局。在佈局檔案中，透過設定合適的屬性或使用特定的佈局容器，使UI元素能夠根據系統語言設定自動調整排列順序。例如，使用 DirectionalLayout 並設定 ohos:orientation 屬性為 horizontal 或 vertical，同時結合系統的語言方向設定，實現元素的正確排列。
    • 對於複雜的介面佈局，進行模組化設計，將可複用的UI模組封裝成獨立的元件，方便在不同語言方向下進行靈活組合和調整。例如，將一個包含多個按鈕和文字框的登入模組封裝成一個自定義元件，在RTL語言環境下，只需調整該元件的整體佈局方向即可。
  2. UI元素映象
    • 對於帶有方向性的UI元素控制元件和圖示，如箭頭、進度條等，提供映象版本。在資原始檔中，根據不同語言方向建立對應的圖片資源或使用向量圖形，並透過程式碼邏輯根據系統語言動態載入正確的資源。例如，在RTL語言環境下，載入指向左邊的箭頭圖示，而在LTR語言環境下載入指向右邊的箭頭圖示。
    • 確保圖示和文字的佈局關係在映象後仍然合理。例如，在一個包含圖示和文字的按鈕中，調整圖示和文字的間距和對齊方式，使其在映象後看起來自然舒適。
  3. 觸控與操作適配
    • 重新定義觸控區域和操作邏輯，使其符合從右至左的閱讀順序。例如，在一個滑動列表中，在RTL語言環境下，將滑動方向反轉，以便使用者能夠按照習慣進行操作。
    • 對介面元素的焦點控制和導航邏輯進行調整，確保在不同語言方向下使用者能夠順暢地在介面中進行互動。例如，在一個表單頁面中，透過設定合適的 TabIndex 屬性，使焦點在RTL語言環境下能夠按照從右到左的順序移動。

（三）示例程式碼

以下是一個簡單的示例，展示如何在程式碼中實現介面映象的部分功能：

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;
    // 獲取當前視窗物件
    let win = window.getTopWindowSync().getWindow();
    // 獲取系統語言方向
    let layoutDirection = this.context.getResourceManager().getConfiguration().layoutDirection;
    if (layoutDirection === 'rtl') {
      // 如果是RTL語言方向，設定介面映象屬性
      win.setLayoutDirection(window.LayoutDirection.RTL);
    } else {
      win.setLayoutDirection(window.LayoutDirection.LTR);
    }
  }
}

在上述程式碼中，透過獲取系統語言方向，並根據方向設定視窗的佈局方向，實現了介面的基本映象功能。對於更復雜的UI元素映象和觸控操作適配，需要在具體的UI元件和互動邏輯中進行進一步處理。

三、支援混合文字

（一）問題背景

在國際化應用中，常常會出現不同語言文字混合顯示的情況，如在一個多語言社交應用中，使用者可能會同時輸入英文、中文、阿拉伯文等多種語言的內容。確保這些混合文字能夠正確顯示，並且排版合理，是提升使用者體驗的重要環節。

（二）解決方案

  1. 文字方向處理
    • 鴻蒙系統的文字元件應具備自動識別和處理不同語言文字方向的能力。在顯示混合文字時，根據每個字元或單詞所屬的語言，正確設定其顯示方向。例如，當一段文字中包含英文和阿拉伯文時，英文部分從左到右顯示，阿拉伯文部分從右到左顯示，並且在兩種語言文字之間實現自然過渡。
    • 使用系統提供的文字排版引擎，對混合文字進行智慧排版。確保不同語言文字之間的間距、換行等排版效果符合使用者閱讀習慣。例如，在一段包含中文和英文的文字中，根據語言的不同自動調整單詞間距和行間距，使文字看起來整齊美觀。
  2. 字元編碼與字型支援
    • 確保應用支援多種字元編碼格式，以正確顯示不同語言的字元。鴻蒙系統預設支援常見的字元編碼，如UTF - 8，但在處理一些特殊字元或古老語言時，可能需要額外的編碼支援。開發者可以根據需要進行編碼轉換或使用特定的字元處理庫。
    • 提供豐富的字型庫，以適應不同語言的字型需求。在應用中包含多種語言的字型檔案，並根據使用者的語言設定動態載入相應的字型。例如，在顯示中文文字時，載入中文字型；在顯示阿拉伯文文字時，載入阿拉伯文字型，確保文字顯示清晰、美觀。

（三）示例程式碼

以下是一個簡單的示例，展示如何在鴻蒙應用中顯示混合文字：

<?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>

在上述程式碼中，Text 元件顯示了包含英文、中文和阿拉伯文的混合文字。鴻蒙系統會自動處理文字的方向和排版，使其在介面上正確顯示。

四、常見設計誤區及解決方案

（一）誤區一：忽視語言差異對介面佈局的影響

  1. 問題描述
    • 開發者在設計介面時，僅以一種語言（通常是母語）為基準進行佈局，未考慮其他語言文字長度和閱讀習慣的差異，導致在其他語言環境下介面出現元素重疊、文字截斷等問題。
  2. 解決方案
    • 從專案初期就採用國際化的設計思維，遵循上述介面空間預留與靈活佈局的原則，進行多語言的模擬測試，提前發現並解決佈局問題。例如，在設計原型階段，使用佔位符文字模擬不同語言長度，檢查介面的適應性。

（二）誤區二：簡單的文字替換式翻譯

  1. 問題描述
    • 直接將源語言文字逐字翻譯，而不考慮目標語言的語法、文化背景和表達習慣，導致翻譯後的文字生硬、難懂，甚至產生歧義。
  2. 解決方案
    • 聘請專業的翻譯人員或本地化團隊，提供完整的翻譯場景資訊，包括上下文、控制元件用途、介面截圖等，確保翻譯準確、自然。同時，進行翻譯後的校對和稽核，避免因翻譯問題影響使用者理解。

（三）誤區三：忽略文化差異對顏色、圖示等元素的影響

  1. 問題描述
    • 在不同文化中，顏色、圖示等元素可能具有不同的象徵意義。例如，白色在西方文化中常與婚禮、純潔相關，但在一些亞洲文化中可能與喪葬有關；某些圖示在不同地區可能有不同的認知和解讀。
  2. 解決方案
    • 在設計階段進行文化研究，瞭解目標市場的文化習俗和偏好。避免使用可能引起誤解或不適的顏色和圖示，或者針對不同文化提供可替換的設計方案。例如，在一個全球通用的應用中，對於重要提示資訊，不使用單一顏色表示，而是根據不同地區的文化習慣進行動態調整。

（四）誤區四：過度依賴自動工具進行國際化處理

  1. 問題描述
    • 雖然鴻蒙系統提供了一些國際化和本地化的工具和框架，但完全依賴自動工具可能無法處理一些特殊情況，如複雜的文字格式、特定語言的語法規則等，導致應用在某些語言環境下出現功能異常或顯示錯誤。
  2. 解決方案
    • 在利用系統工具的基礎上，結合手動檢查和最佳化。對於關鍵的介面元素和功能，進行針對性的測試和調整，確保應用在各種語言和文化環境下都能穩定執行。例如，在處理日期和時間格式時，除了使用系統的格式化函式，還需要手動檢查在不同地區的顯示效果是否符合當地習慣。

透過避免這些常見設計誤區，並採用有效的解決方案，我們能夠打造出更加友好、適應全球市場的鴻蒙Next應用介面。在國際化介面設計的道路上，持續關注使用者反饋、不斷最佳化設計細節，是提升應用競爭力的關鍵所在。希望本文能夠為鴻蒙系統同路人在應用介面國際化設計方面提供寶貴的經驗和啟示，助力打造出更多優秀的全球化應用。

相關文章