Designing Multilingual Mobile UI: Key Adaptation Principles for WeChat
This article explains how to adapt mobile UI designs for multiple languages by addressing script differences, text length, layout adjustments, icon usage, and strategies for displaying long strings, providing practical guidelines for creating a seamless experience for both Chinese and non‑Chinese users.
Language Differences
Writing Systems
Modern languages can be divided into three writing‑system categories.
Text Length and Height
Different scripts vary in length and height, which greatly impacts UI adaptation. When designing from a Chinese baseline, English text is typically 1.5–2 times longer than its Chinese counterpart.
Chinese characters are slightly taller than English letters, and the height gap becomes more noticeable with larger font sizes.
Reasonable Adaptation Solutions
Reserve Sufficient Space
First translate Chinese to English, then allocate extra space based on the English character count. For example, a textbox containing the phrase “Length difference” (16 characters) should reserve 28–32 characters of width.
Up to 10 characters: 100‑200% extra space
11‑20 characters: 80‑100% extra space
21‑30 characters: 60‑80% extra space
31‑50 characters: 40‑60% extra space
Over 79 characters: 30% extra space
Layout Structure
If too many cards compress horizontal space, adjust the layout. For multi‑column card designs, display 2–3 cards per row.
When layout space permits, relax text‑length limits to show more information.
For dialog buttons, place two short‑text buttons side‑by‑side; if the translated text is long, stack the buttons vertically to ensure the full label is visible.
Use Icons
In multilingual contexts, replace long translated strings with icons where possible to avoid layout issues.
Long Text Display
Wrap long strings onto multiple lines when the full text must be shown, such as system prompts.
Reduce font size (minimum 10 pt) if space is limited, but never go below 10 pt.
Ellipsis should be avoided; use it only when the truncated text does not affect user understanding, space is more critical, other methods (wrapping, shrinking) are unsuitable, and the full text remains accessible on secondary pages.
App multilingual adaptation varies per app; each interface may require individual adjustments and close collaboration with product, translation, and local teams.
We-Design
Tencent WeChat Design Center, handling design and UX research for WeChat products.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.