Product Management 5 min read

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.

We-Design
We-Design
We-Design
Designing Multilingual Mobile UI: Key Adaptation Principles for WeChat

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.

Mobilelayoutproduct managementUI designmultilingual
We-Design
Written by

We-Design

Tencent WeChat Design Center, handling design and UX research for WeChat products.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.