Senarai Semak Serahan Figma / PSD: Bagaimana Reka Bentuk UI Permainan Mengelak Kerja Semula

Apabila pihak kejuruteraan membuat kerja semula UI, selalunya ia bukan masalah estetik—tetapi serahan yang tidak memenuhi keperluan enjin. Anda mengubah suai satu frame dalam Figma atau Photoshop, dan pihak kejuruteraan terpaksa memotong semula, membina semula Canvas, dan menjajarkan semula anchor. Garis masa memanjang.

Di bawah ialah senarai semak pra-serahan yang merangkumi senario carian berhasrat tinggi: Figma export Unity, PSD import Unity UI, game UI slicing, reskin acara, dan UI berbilang bahasa. Bahagian penutup menerangkan jurang antara “PNG sahaja” dan eksport berstruktur; alat hanyalah titik rujukan.

---

Apa yang sebenarnya diperlukan oleh pihak kejuruteraan

Mereka perlukan	Bukan ini
Hierarki bernama (butang, panel, item senarai)	Satu JPG skrin penuh
Butang normal / ditekan / dilumpuhkan	Satu imej “nampak boleh diklik”
Lapisan teks yang boleh diganti	Semuanya dirasterkan sebagai teks paparan
Kedudukan relatif dan semantik anchor	Rujukan susun atur + 20 PNG longgar
Struktur prefab yang boleh diguna semula	Bina semula dari awal setiap acara

Ujian penerimaan satu baris: Selepas import ke Unity UGUI / Godot Control / Cocos UI, menukar teks atau membuat reskin tidak sepatutnya memerlukan pembinaan semula keseluruhan pokok.

---

12 semakan sebelum serahan

Struktur dan penamaan

#	Semakan	Nota
1	Nama Frame / kumpulan semantik	Panel_Shop, Btn_Buy—bukan Group 12
2	Asingkan lapisan interaktif vs hiasan	Latar belakang, sempadan, ikon, teks
3	Item senarai sebagai kumpulan boleh guna semula	List_Item boleh diduplikasi
4	Sembunyikan draf dan Frame usang	Kurangkan bunyi bising eksport

Keadaan dan spesifikasi

#	Semakan	Nota
5	Keadaan butang penuh	normal / ditekan / dilumpuhkan (atau konvensyen penamaan pasukan)
6	Kawasan 9-slice / regangan ditanda	Panel dan input tidak sepatutnya diskalakan secara paksa
7	Resolusi sasaran dan kawasan selamat	Mudah alih potret: notch dan bar bawah
8	Strategi fon	Lapisan teks untuk penyetempatan; teks paparan ditanda secara berasingan

Live ops dan penyetempatan

#	Semakan	Nota
9	Ruang lebih panjang teks	Bahasa Jerman / Sepanyol selalunya 30%+ lebih panjang daripada bahasa Inggeris
10	Reskin = visual sahaja	Kulit acara: susun atur sama, seni dan warna baharu
11	Penyetempatan: teks vs susun atur	Ideal: struktur sama, berbilang fail bahasa
12	Format eksport didokumenkan	PSD berlapis / pautan Figma, atau penamaan potongan yang dipersetujui

Persediaan Figma: Aliran kerja Figma → Unity. Persediaan PSD: Import PSD ke Unity UI dalam 5 minit.

---

Tiga laluan serahan (perbandingan objektif)

Laluan	Pendekatan	Terbaik untuk	Titik masalah
A. Pemotongan manual	Eksport PNG + tangkapan susun atur; pihak kejuruteraan bina secara manual	UI minimum, demo sekali sahaja	Setiap semakan = potong semula dan bina semula
B. Pemalam enjin	Figma Converter, Psd-Exporter, dsb.	Pasukan dengan spesifikasi tetap	Berbilang enjin selalunya bermakna buat semula; kualiti pemalam berbeza-beza
C. Kanvas berstruktur	Fail berlapis → kanvas permainan → pemisahan di tempat → eksport Prefab	UI berbilang skrin, reskin kerap / pelancaran global	Memerlukan penggunaan aliran eksport berorientasikan permainan

Laluan C biasa dalam produk seperti VberAI Studio: huraikan PSD / Figma → pemisahan UI yang mengekalkan susun atur → eksport ke Unity / Godot / Cocos (lihat pisahkan UI permainan ke dalam enjin). Pereka masih boleh bekerja dalam Figma; selepas kelulusan, gunakan eksport berstruktur daripada mengeksport 20 PNG secara manual untuk setiap semakan.

---

Senario pereka yang biasa

Pemotongan UI permainan / potongan di tempat

Jika konsep skrin penuh hanya PNG, pihak kejuruteraan meneka sempadan butang. Aliran lebih selamat: lepaskan skrin pada kanvas → pisahkan kawalan di tempat (pemotongan di tempat) supaya data kedudukan bergerak bersama pemisahan—elak “potongan nampak betul tetapi semuanya beralih dalam enjin.”

Eksport Figma ke Unity / Godot

Jika pemalam hanya mengeluarkan pek sprite rata, pihak kejuruteraan masih membina semula pokok RectTransform / Control. Tanya semasa menilai: adakah hasilnya Prefab / hierarki, atau zip imej longgar? Perbandingan Godot: Figma → Godot manual vs aliran kerja AI.

Reskin UI permainan (bermusim / acara)

Halloween, Krismas, dsb.: susun atur sama, aset tema baharu. Jika setiap reskin bermakna potong semula dan bina semula, irama live-ops menjadi perlahan. Alat reskin harus mengekalkan struktur nod tidak berubah (reskin UI dan varian tema).

Terjemahan UI permainan / Figma berbilang bahasa

Perangkap pelancaran global: teks terjemahan melimpah keluar susun atur. Aliran ideal: tukar rentetan sahaja, jangan susun semula Frame (terjemahan UI satu klik). Dalam Figma.

Ikon dan aset separa lutsinar

Ikon kemahiran dan UI VFX selalunya memerlukan penyingkiran latar belakang sebelum import (rambut, ketelusan, cahaya). Matting generik mengaburkan tepi; alat berorientasikan permainan menekankan alfa (matting cahaya / VFX).

---

Bagaimana ini berkaitan dengan alat imej AI

Midjourney, Jimeng, GPT Image 2, dsb. bagus untuk arah visual; jika destinasi adalah enjin, anda masih perlukan pemisahan dan hierarki. Gabungan biasa:

Konsep UI skrin penuh AI → pereka menyusun lapisan dalam Figma → eksport berstruktur ke enjin

Jangan anggap “imej tunggal gred poster” sebagai serahan akhir. Perbandingan alat: Penjana seni reka bentuk permainan AI.

---

Soalan Lazim

Bolehkah saya serahkan PNG sahaja? Boleh untuk demo; UI produksi akan membuat kerja semula berulang kali. Sekurang-kurangnya lampirkan nota susun atur dan peraturan penamaan.

Adakah Auto Layout Figma perlu sempurna? Tidak perlu sempurna seperti web—tetapi pengumpulan dan penamaan lebih penting daripada menggeser piksel.

Apa maksud pihak kejuruteraan dengan “potongan salah”? Biasanya: keadaan hilang, 9-slice salah.

Reskin vs buat semula UI? Reskin: struktur sama, visual baharu. Buat semula: hierarki juga berubah. Live ops harus kekal pada laluan reskin.

Perlukah pereka belajar Unity? Bukan skrip—tetapi asas Canvas / Anchor / Prefab mengurangkan kos komunikasi dengan mendadak.

Adakah VberAI Studio sama dengan Google AI Studio? Tidak. Yang pertama ialah kanvas permainan dan eksport enjin; yang kedua ialah persekitaran pembangunan AI umum Google. Lihat perbandingan.