Tràn bố cục locale trong UI game: Dung lượng thiết kế dự phòng và QA xuất bản dịch VberAI Studio

Giao diện UI đủ điều kiện phát hành vẫn thường thất bại ở bước bản địa hóa vì lý do khác bản dịch kém: cùng một bố cục không thể chứa bản dịch. Chữ trên nút bị RectTransform cắt cụt, hàng danh sách từ hai dòng co lại thành một, tab vẫn chật chội nhưng hiện dấu ba chấm. Việc kiểm tra đạt trong Unity Editor với tiếng Anh giữ chỗ sẽ che giấu vấn đề cho đến khi thử tiếng Đức hoặc Tây Ban Nha—lúc đó việc sửa thường phải động đến cả nguồn thiết kế lẫn Prefab.

Các ví dụ về bố cục và cắt cụt bên dưới dùng Unity UGUI (RectTransform, Prefab, v.v.). Godot Control và Cocos UI dùng cùng ý tưởng qua anchor, minimum_size và prefab; dung lượng thiết kế dự phòng và tiêu chí tràn áp dụng theo cùng cách.

Danh sách kiểm tra bàn giao thiết kế mục 9–11 đã nêu rõ dung lượng dự phòng cho độ dài bản sao và các locale cùng cấu trúc. Bài này bổ sung khoảng tham chiếu, danh sách đánh dấu phía thiết kế, QA trên canvas sau khi dịch bằng VberAI Studio, và tiêu chí thất bại trước khi phát hành. Safe Area trên thiết bị, tài nguyên bản Release và các kiểm tra liên quan vẫn nằm trong danh sách kiểm tra UI trước phát hành mục 1, 5 và 6.

Tiêu chí thất bại (chỉ cần một điều = không đạt): chữ đọc được bị cắt cụt hoặc chồng lấn; dấu ba chấm hoặc chữ chạy mà không có đặc tả sản phẩm; khung nút trực quan không khớp với vùng nhấn; màn hình luồng chính của một locale cần thay đổi Hierarchy riêng để hiện đủ chữ (xung đột với mục tiêu đa ngôn ngữ cùng cấu trúc).

---

Độ giãn bản sao: khoảng tham chiếu cho thiết kế

Các nhóm bản địa hóa thường ước lượng độ tăng so với tiếng Anh hoặc ngôn ngữ nguồn. Đây không phải SLA có ràng buộc hợp đồng—hãy đặt ngưỡng nội bộ với kiểu chữ và cỡ chữ UI của bạn. Dùng bảng để chọn 2–3 locale áp lực cho buổi duyệt thiết kế trước bàn giao, không phải để dự đoán độ dài chuỗi chính xác.

Mối quan hệ	Mẫu điển hình (nút mobile, nhãn ngắn)	Hành động thiết kế
DE / ES / PT so với nhãn tiếng Trung ngắn	Cùng nghĩa thường cần ~+25% đến +40% không gian ngang (từ ghép, mạo từ)	Đưa chiều rộng tối thiểu của nút và chiều rộng cố định của tab hoặc quy tắc xuống dòng vào đặc tả
EN so với ZH trên cùng một nút	Độ dài tương tự hoặc EN dài hơn chút—đừng coi chiều rộng EN là chuẩn nghiệm thu cho mọi locale	Kiểm tra nhanh DE hoặc ES bên cạnh EN
FR / IT	Trung bình-dài; phụ đề danh sách thường cần hai dòng	Dự trù dòng thứ hai hoặc giới hạn độ dài phụ đề
VI / ID	Chữ Latin nhưng độ dài từ thay đổi	Cùng mức áp lực như ES
AR	Độ dài cộng với RTL và định hình chữ số; bố cục gương là chủ đề riêng	Bài này giả định LTR cùng cấu trúc; RTL cần quy tắc thiết kế hoặc gương của engine riêng
JA / KO	Trộn toàn chiều rộng: chiều rộng thị giác không tuyến tính với số ký tự	Đo chiều rộng chuỗi hiển thị ở cỡ đích; đừng chỉ đếm ký tự

Lưu ý engine: Auto Size của TextMeshPro trong Unity chỉ thu nhỏ trong khoảng cỡ chữ tối thiểu/tối đa. Nếu chữ vẫn tràn ở cỡ tối thiểu, đó là dung lượng bố cục, không phải thứ để sửa bằng cách thu nhỏ thêm—hãy mở rộng vùng chứa hoặc đổi bản sao trong thiết kế.

---

12 kiểm tra thiết kế tập trung vào tràn (danh sách đánh dấu)

Ngoài danh sách bàn giao 12 mục chung, hãy đánh dấu những mục sau cho các locale:

#	Kiểm tra	Tiêu chuẩn đạt
1	Bản sao nút chính là layer văn bản, không phải chữ hiển thị dạng ảnh raster	Chuỗi có thể hoán đổi; liệt kê chữ hiển thị không bản địa hóa trong đặc tả
2	Vùng chứa nút có chiều rộng tối thiểu (Figma Auto Layout hoặc chiều rộng cố định)	Locale giả DE/ES hoặc chuỗi thật không tràn
3	Tab / thanh dưới: ô cố định hoặc cho phép hai dòng rõ ràng	Không có kiểu “trông một dòng, thực ra bị cắt”
4	Hàng danh sách: tiêu đề và phụ đề trên dòng riêng; phụ đề có số dòng tối đa	Nếu hai dòng không vừa, rút ngắn bản sao hoặc mở rộng danh sách
5	Số, tiền tệ, bộ đếm và đơn vị là trường riêng	Không raster cả câu; định dạng nằm trong bảng chuỗi
6	Icon + chữ: chiều rộng chữ độc lập với icon	Bản sao dài hơn không bóp méo icon
7	Padding panel nine-slice và padding nội dung đủ	Xem mục bàn giao 6; vùng giãn không dính sát chữ
8	Tiêu đề hộp thoại, thân, nút chính/phụ là layer riêng	Đặc tả cho xuống dòng hoặc giảm một bậc cỡ chữ khi tiêu đề dài
9	Huy hiệu sự kiện và bản sao ngắn gần chấm đỏ có độ dài tối đa	Bản sao vận hành vượt giới hạn phải gửi lại để sửa—không bóp chữ khẩn cấp
10	Biến thể đa ngôn ngữ: cùng cấu trúc Frame, chỉ khác chữ	Không có control riêng cho locale trừ khi đặc tả cho phép
11	Ghi chú xuất liệt kê locale áp lực nào đã được duyệt	Kỹ thuật / QA biết chuẩn nghiệm thu
12	Ý tưởng toàn màn hình vẫn có chữ đọc được	Tách layer văn bản hoặc chấp nhận xuất lại trước engine (cắt tại chỗ)

Auto Layout hug/fill, chiều rộng tối thiểu/tối đa và truncate văn bản trong Figma phải khớp với thỏa thuận kỹ thuật—nếu sản phẩm cấm dấu ba chấm, đừng duyệt mock chỉ với truncate.

---

Đường đi VberAI Studio: dịch → so sánh → xuất lại toàn bộ cây

VberAI Studio (AI Studio, ≠ Google AI Studio) dịch một cú nhấp nhằm chỉ thay đổi bản sao đọc được—hình học và phân cấp giữ nguyên. Điều đó khớp với công việc engine nơi chỉ CSV / bảng chuỗi thay đổi và cấu trúc Prefab giữ nguyên—các giai đoạn khác nhau trên cùng một pipeline bản địa hóa: AI Studio sở hữu thiết kế trực quan đa ngôn ngữ và xuất bản; TMP và bảng chuỗi sở hữu chuyển đổi lúc chạy.

Thứ tự khuyến nghị (giống như canvas → Prefab):

Bước	Hành động	Nghiệm thu
1	Khóa bố cục chính trên canvas hoặc Figma/PSD	Layer văn bản và biên nút rõ ràng
2	Chạy dịch một cú nhấp cho từng màn hình (theo lô locale phát hành hoặc đa locale)	Phân cấp layer và tên node không đổi
3	Trên canvas, so sánh 2–3 locale có bản sao dài nhất cạnh nhau hoặc bằng chuyển đổi (gồm DE hoặc ES + locale phát hành chính)	Không tràn, không chồng lấn
4	Duyệt các chuỗi máy dịch quá dài	Sửa bản sao hoặc chỉnh cỡ trong đặc tả; người duyệt các dòng pháp lý/thương hiệu
5	Xuất lại toàn bộ cây Prefab (Unity UGUI / Godot Control / Cocos UI)	Khớp với canvas; đừng chỉ sửa Text trong dự án mà không đồng bộ nguồn thiết kế
6	Căn chỉnh bảng chuỗi với bản sao mặc định của Prefab trong dự án	Chuyển locale trong Play mode khớp với canvas

Cùng bố cục, chỉ đổi theme: reskin. Sau reskin, nếu bạn thêm locale phát hành mới, vẫn phải dịch rồi xuất—tránh sửa tay Text trong Scene khi Prefab trong repo bị lệch (mục trước phát hành 6).

---

Nghiệm thu trước phát hành: gắn với danh sách kiểm tra thử nghiệm

Mục 2 của danh sách trước phát hành yêu cầu mọi locale đang hoạt động trên trang chủ và các popup chính. Cách thực hiện gợi ý:

Mục	Thực hành
Ưu tiên locale	Trước khi duyệt toàn bộ locale, smoke locale áp lực + locale phát hành chính
Phạm vi	HUD chính, popup tần suất cao, màn hình bản sao dài về thanh toán/độ tuổi/pháp lý
Môi trường	Chuyển locale trong Unity Editor không thay thế kiểm tra hiển thị font trên thiết bị (đặc biệt trộn CJK + Latin)
Đạt	Không cắt cụt, không dấu ba chấm không khai báo, vùng nhấn khớp hình ảnh

Nếu chuỗi chỉ thay đổi trong engine và bố cục không đổi mà tràn vẫn còn → coi là dung lượng thiết kế dự phòng không đủ hoặc thiếu QA canvas locale áp lực, rồi sửa theo bảng bên dưới—không thu nhỏ font toàn cục vĩnh viễn trên Prefab.

---

Định tuyến sửa lỗi

Triệu chứng	Nguyên nhân khả dĩ	Hành động	Chủ sở hữu
Tràn một nút hoặc nhãn	Chiều rộng tối thiểu quá nhỏ; dùng chữ hiển thị làm chữ thân	Mở rộng thiết kế hoặc rút ngắn bản sao; chuyển sang layer văn bản	Thiết kế
Nhiều tràn trên một màn hình	Mock chính quá chật; chưa duyệt locale áp lực	Figma/canvas Auto Layout → dịch lại bằng AI Studio → xuất lại toàn bộ cây	Thiết kế + Kỹ thuật
Unity Editor đạt, một locale lỗi trên thiết bị	Font dự phòng rộng hơn; DPI	Thử lại trên thiết bị; điều chỉnh Font Asset / vùng chứa	Kỹ thuật
Danh sách hai dòng chỉ ở một locale	Bản dịch phụ đề quá dài	Bản địa hóa rút ngắn hoặc tăng chiều cao hàng (xuất lại nếu cấu trúc đổi)	Bản địa hóa + Thiết kế
Chuyển lúc chạy lỗi, canvas đạt	Bảng chuỗi lệch với Prefab	Căn chỉnh bảng và Text mặc định; kiểm tra ngắt dòng	Kỹ thuật
Sau reskin sự kiện, locale vẫn hiện bố cục cũ	Reskin chỉ đổi art, chưa xuất lại Prefab	Sau reskin, chạy lại dịch + xuất theo locale	Thiết kế

Quy tắc quyết định: nếu cấu trúc giữ nguyên → ưu tiên bản sao, chiều rộng tối thiểu và QA canvas VberAI Studio rồi xuất lại. Nếu bạn phải thêm/bớt node hoặc đổi số tab → thay đổi bố cục—cập nhật mock chính và mọi đặc tả locale; đừng vá Prefab của một locale riêng lẻ.

---

Phân chia công việc so với “chỉ bảng chuỗi”

Cách tiếp cận	Phù hợp	Không phù hợp
Bảng chuỗi / TMP trong engine	Bố cục đã xác minh; chỉ chuyển locale lúc chạy	Lần nhập UI đầu tiên chưa có QA locale áp lực
Dịch + xuất VberAI Studio	Định hướng thiết kế; tương đồng trực quan đa ngôn ngữ; nguồn Figma/PSD	Thay thế duyệt tuân thủ pháp lý hoặc thanh toán
Sửa tay Text trong Prefab	Hotfix khẩn cấp cho một hai chuỗi	Bảo trì đa ngôn ngữ lâu dài (Scene bị lệch)

Chuỗi đầy đủ: dung lượng thiết kế dự phòng → mock đa ngôn ngữ VberAI Studio → xuất Prefab → căn chỉnh bảng chuỗi và mặc định → smoke toàn locale trước phát hành. Binding và QA Play sau khi nhập: danh sách kiểm tra engine + MCP.

---

Câu hỏi thường gặp

TMP Auto Size ở cỡ tối thiểu vẫn tràn—đó có phải lỗi kỹ thuật?
Thường là không. Auto Size chỉ co giãn trong vùng chứa. Nếu chiều rộng đã cố định lúc bàn giao, hãy mở rộng thiết kế hoặc đổi bản sao, hoặc cho phép hai dòng theo đặc tả.

Bố cục “về lý thuyết không đổi” sau khi dịch—vẫn phải xuất lại Prefab?
Nếu UI đến từ xuất VberAI Studio, xuất lại toàn bộ cây sau khi bản sao chốt sẽ giữ Prefab trong repo khớp với canvas. Chỉ sửa Text trong dự án mà không đồng bộ canvas sẽ mất khi reskin hoặc xuất lại lần sau.

RTL (tiếng Ả Rập, v.v.) có dùng được danh sách cùng cấu trúc này không?
Quy tắc chiều rộng cùng cấu trúc LTR vẫn hữu ích. RTL còn cần bố cục gương và hướng chữ số—đừng cho rằng chỉ dịch chuỗi là đủ để phát hành.

Có phải dịch lại khi reskin sự kiện không?
Nếu reskin không đổi bản sao, thì không. Nếu bản sao sự kiện đổi theo skin và tên node giữ nguyên, hãy kiểm tra lại locale áp lực trên canvas rồi xuất lại.

Tiếng Đức dài—có thể chỉ thu nhỏ cỡ chữ cho locale đó không?
Chỉ khi đặc tả sản phẩm định nghĩa “−1 bậc” toàn cục cho locale đó. Nếu không, ưu tiên chiều rộng tối thiểu và bản sao ngắn hơn để độ dễ đọc nhất quán giữa các nút.

VberAI Studio có giống Google AI Studio không?
Không. VberAI Studio là canvas UI game, dịch và xuất đa engine; Google AI Studio là môi trường phát triển AI tổng quát của Google. Xem so sánh.