國際化設計系統 是做什麼的？
目的
國際化（i18n）設計系統技能提供了一套方法論，用於設計能面向全球用戶的介面。它超越了單純的翻譯，深入處理不同語言與文化在空間、排版和視覺上的影響。該系統確保佈局能靈活適應文字長度變化，雙向（從右到左，RTL）佈局能正確鏡像，以及視覺提示保持文化適切性。
使用案例
- 設計全球 SaaS 平台或電子商務網站，以便在多個區域發布。
- 將僅有英文的介面轉換為支援 RTL 語言（阿拉伯語、希伯來語、波斯語）。
- 為非拉丁字母（CJK、西里爾字母、天城文）建立排版標準。
- 審核 UI 元件的「擴展就緒性」（處理德語或芬蘭語的文字增長）。
- 創建避免文化特定性或方向性偏見的圖標集。
何時不應使用
- 單一區域/單一語言網站： 沒有未來擴展計畫，且當地慣例嚴格已知的情況。
- 純視覺敘事網站： 設計是依賴固定、不可重排空間關係的藝術表達。
- 純內容翻譯： 任務只是翻譯文案，不改變 UI 或佈局行為。
輸入
- 目標語言列表： 需要支援哪些語言與文字系統？
- 閱讀方向： 語言是從左到右（LTR）還是從右到左（RTL）？
- 排版資源： 能在不同文字系統中維持品牌調性的在地化字型堆疊。
- 文化背景： 特定區域在顏色、符號與資料格式（日期、貨幣）上的慣例。
- 佈局斷點： 來自
responsive-grid-system。
輸出
- 雙向（RTL）鏡像規範： 哪些元件需要翻轉、哪些保持固定（例如進度條 vs 媒體控制項）的對應表。
- 排版比例矩陣： 針對不同文字系列調整後的字型大小與行高。
- 擴展藍圖： 能處理 +/- 40% 文字長度變化的 UI 模式。
- 圖標邏輯： 鏡像與非鏡像圖標的指南。
- 在地化設計 Token： 在設計規範中定義的邏輯屬性（例如
padding-inline-start）。
工作流程
1. 為文字擴展而設計
永遠不要假設標籤會保持簡短。德語或義大利語等語言可能比英語長 30-50%。
- 彈性容器： 避免固定寬度的按鈕或卡片；使用
min-width或fit-content。 - 文字換行： 確保 UI 元素（如頁籤或選單項目）能優雅換行，或過渡到「溢出」選單。
- 動態置中： 如果文字擴展，確保它不會與相鄰元素重疊。
2. 實作 RTL 鏡像邏輯
對於從右到左的語言，頁面的「心智模型」會翻轉：
- 佈局鏡像： 側邊欄從左移到右；Logo 從左上移到右上。
- 邏輯屬性： 使用「開始」和「結束」來標註設計，而不是「左」和「右」。
- 導航流程： LTR 中的返回按鈕（指向左）在 RTL 中必須指向右，以表示「返回上一個狀態」。
3. 在地化排版與垂直韻律
非拉丁字母具有不同的高度、密度和可讀性要求：
- CJK（中文、日文、韓文）： 由於字符複雜度，需要稍大的基本字型尺寸和更寬裕的行高（leading）。
- 阿拉伯語： 具有較高的上升部與較深的下降部；增加垂直間距以防止行與行之間「衝突」。
- 備用字型堆疊： 定義系統字型備用方案，使其粗細和 x 高度盡可能接近主要品牌字型。
4. 審核圖標方向性
並非所有東西在 RTL 中都會鏡像：
- 鏡像： 方向性圖標（箭頭、飛機、自行車）、進度條，以及代表「前進/後退」的圖標。
- 不鏡像： 順時針/逆時針圖標（時鐘、重新整理）、媒體播放控制項（播放、暫停、搜尋），以及「勾選標記」（具有通用性）。
- 數字： 大多數 RTL 區域使用西方阿拉伯數字（1、2、3），即使在 RTL 文字中仍保持 LTR 閱讀順序。
5. 建立資料格式標準
- 日期與時間： 清楚定義 DD/MM/YYYY 與 MM/DD/YYYY 以避免混淆。
- 貨幣： 定義符號是前置於金額還是後置（例如 $10 vs 10 €）。
- 日曆： 某些區域使用不同的週起始日（星期一 vs 星期日）。
決策規則
- 鏡像規則： 如果 UI 元素代表「方向」或「時間」（向前移動），則在 RTL 中必須鏡像。如果它代表一個物理物體（例如相機或時鐘），通常保持固定。
- 「35% 緩衝區」規則： 在英文設計階段，始終在按鈕和標籤中保留 35% 的空白空間，以容納文字擴展。
- 特定文字系統尺寸： 如果文字系統非常複雜（例如天城文），相較於等效的拉丁字母，將字型大小增加 10-15% 以提高可讀性。
- 文化敏感性： 避免使用西方為中心的圖標（例如用於儲蓄的小豬撲滿，這在許多文化中不合適）。
限制條件
- 無障礙性： 文字擴展不得隱藏互動元素或導致水平溢出。在所有在地化版本中必須維持對比度比例。
- 響應式： 當切換方向時，佈局必須保持穩定。在規範中使用
padding-inline和margin-inline。 - 層級結構： 主要行動呼籲（CTA）必須保持最突出的元素，無論閱讀方向為何。
常見失敗模式
- 「擴展斷裂」： 硬編碼的寬度導致翻譯後的文字被截斷或重疊。
- 「懶惰鏡像」： 鏡像不該鏡像的圖標（例如「播放」按鈕或時鐘），這會讓用戶感到困惑。
- 「英語優先」陷阱： 用英文設計緊湊、極簡的 UI，但在使用長詞語的語言中變得完全無法使用。
- 缺少備用字型： 未為非拉丁字母指定字型，導致「豆腐塊」（破碎的字符框）。
- 不一致的對齊： 混合使用鏡像佈局與非鏡像文字對齊，造成不規則、不精緻的感覺。
驗證標準
- 佈局在 RTL 視口中成功鏡像（側邊欄/Logo 交換）。
- UI 元件能處理 40% 的文字擴展而不會斷裂或重疊。
- 排版比例已根據文字系統複雜度進行調整（例如為阿拉伯語/CJK 增加行高）。
- 圖標遵循「鏡像 vs 固定」的邏輯。
- 設計使用邏輯屬性（開始/結束）而非絕對屬性（左/右）。
- 日期、貨幣和數字格式已正確在地化。
- 已為所有目標文字系統定義備用字型堆疊。