Interface layouts

Separation of graphics and text

Do not embed text directly into images. When creating text in an image, we recommend layering the image and text.

Text space

Considering the large differences in the length of translated texts in different languages, try to use concise descriptions, reserve enough space for all texts, and set the processing methods in case of overflow.

Reserve enough space for the display of localized control text based on the text length. Use a letter string as an example. If the number of letters is less than 10, reserve 50% of the space. If the number of letters is greater than 10 and less than 20, reserve 30% of the space. If the number of letters is greater than 20, reserve 20% of the space.

When the text cannot wrap and is too long, use an ellipsis (...).

When the text needs to be displayed completely and cannot be omitted, use the "marquee" effect.

① Only single-line text can use the "marquee" effect.

② The marquee effect features a gradient mask on the right side of the text, moving from 0% to 100% opaque. It is a square with the same height as the single-line text box.

Correct handling of RTL languages

RTL (Right to Left) languages refer to languages written from right to left. Common features of this language are: sentences are read from right to left; sequence of events progresses from right to left; an arrow pointing right to left (←) indicates forward motion, and an arrow pointing left to right (→) indicates backward motion.

① When the direction in which UI elements is displayed is changed, untranslated text (even if it is part of a phrase) and digits are not mirrored, and they should be maintained in the correct direction that fits the target language.

② Mirror the operations that indicate specific directions.

③ Maintain consistency in icons that do not indicate directions and only change their positions.

④ Mirror the icons that indicate specific directions.

⑤ After a word is translated, it is written from right to left.