Gesaan UI Imej GPT 2.5: Bina Skrin Yang Bertahan Handoff

Gesaan UI yang berguna berbunyi seperti spesifikasi produk. Ia menamakan kanvas, hierarki, kandungan sebenar, komponen, keadaan, peraturan responsif dan semakan penerimaan. Gaya visual datang selepas keputusan tersebut. Perintah itu memberikan struktur GPT Image 2.5 yang mencukupi untuk menghasilkan mockup yang boleh disemak oleh pereka dan boleh ditafsirkan oleh pembangun.

Mulakan daripada Laman utama imej3, buka GPT Imej 2.5 Ruang Kerja Suar dan simpan Halaman model GPT Image 2.5 berdekatan semasa anda menguji gesaan di bawah. Flare ialah laluan pertama praktikal untuk lelaran pantas. Sunburst ialah pilihan untuk bingkai semakan ketepatan yang lebih tinggi kemudian. Uji kedua-duanya pada skrin anda sendiri dan bukannya menganggap perbezaan itu sebagai penanda aras universal.

Imej dan video pendek di atas ialah ilustrasi editorial aliran kerja ini. Ia bukan output penanda aras atau tangkapan skrin produk yang dihantar.

Jawapan pantas: gesa sistem di belakang skrin

Jangan mulakan dengan "membuat papan pemuka kewangan moden." Permintaan itu meninggalkan model untuk mencipta produk, data, navigasi dan definisi moden. Berikan kontrak skrin sebaliknya:

PRODUK: analisis langganan untuk syarikat perisian kecil.
KERJA PENGGUNA: cari punca penurunan hasil bulanan dalam masa kurang 30 saat.
CANVAS: apl web desktop, 1440 x 1024, lebar kandungan 1200.
HIERARKI: tajuk halaman, julat tarikh, empat metrik ringkasan, carta arah aliran, jadual perubahan.
NAVIGATION: rel kiri dengan Gambaran Keseluruhan dipilih; Pengebilan, Pelanggan dan Tetapan di bawah.
SALIN TEPAT: gunakan hanya label dan nilai yang dibekalkan dalam blok DATA.
KOMPONEN: kad metrik, kawalan tarikh bersegmen, carta garis, jadual boleh diisih, cip status.
NEGERI: sertakan corak pemuatan yang boleh dilihat dan varian jadual kosong pada helaian keadaan kecil.
GAYA: UI produk B2B yang tenang, latar belakang neutral, aksen biru, jarak padat.
ELAK: logo ciptaan, testimoni palsu, kesan kaca hiasan, teks kecil yang tidak boleh dibaca.
OUTPUT: satu skrin utama ditambah jalur keadaan komponen yang sempit.

Gesaan ini menjadikan keputusan penting boleh diperiksa. Jika carta mendominasi halaman, anda boleh menukar hierarki. Jika keadaan kosong tiada, anda boleh memintanya terus. Gesaan perasaan sahaja memberi anda lebih sedikit pengendalian untuk dibaiki.

Mengapa mockup UI yang menarik gagal semasa dilepaskan

Skrin yang dijana boleh kelihatan selesai sambil membiarkan kelakuannya tidak ditentukan. Navigasi mungkin mengandungi lima destinasi pada desktop dan tujuh pada mudah alih. Kad mungkin menunjukkan keadaan kejayaan tetapi tiada pemuatan atau kes ralat. Jadual data mungkin menggunakan nombor yang munasabah yang tidak dibekalkan oleh sesiapa. Jurang ini menjadi keputusan produk semasa pelaksanaan, apabila ia lebih perlahan dan lebih mahal untuk diselesaikan.

Imej itu juga merupakan artifak yang diratakan. Ia tidak membawa nama komponen, token, titik putus, struktur semantik, susunan papan kekunci atau kontrak data. Anggap ia sebagai cadangan visual. Paket handoff mesti menyatakan peraturan yang tidak kelihatan dalam piksel.

Gunakan mockup untuk menjawab soalan visual: Adakah susunan maklumat masuk akal? Adakah tindakan utama jelas? Bolehkah kawasan padat bernafas? Gunakan keperluan bertulis untuk tingkah laku: Apakah yang berlaku semasa data dimuatkan? Lajur manakah yang hilang di bawah 768 piksel? Di manakah teks pengesahan muncul? Apa yang masih boleh diakses tanpa warna?

Tujuh medan dalam kontrak skrin

Setiap gesaan UI berorientasikan pengeluaran hendaklah meliputi tujuh medan. Ia boleh dimuatkan dalam satu halaman teks.

Tulis kandungan sebagai blok berasingan. Jika model boleh mencipta pengisi, katakan di mana. Jika setiap label dikawal, sebutkan setiap label. Kekalkan carta secara kualitatif melainkan anda membekalkan nombor yang disahkan. Carta yang kelihatan realistik masih membuat tuntutan fakta.

DASAR KANDUNGAN
Gunakan betul-betul label navigasi ini: Rumah, Perjalanan, Disimpan, Profil.
Gunakan betul-betul tajuk halaman ini: Rancang perjalanan anda yang seterusnya.
Gunakan kad contoh ini: Pelarian pantai, Penjelajah bandar, Denai gunung.
Jangan tambahkan harga, penilaian, kiraan ulasan, lencana, destinasi atau salinan promosi.
Jika rantau teks tidak ditentukan, biarkan ia kosong daripada mencipta teks.

Pilih Flare atau Sunburst mengikut keputusan seterusnya

Pilihan model hendaklah mengikut keputusan yang perlu anda buat. Gunakan Flare semasa reka letak masih bergerak: susunan skrin, skala komponen, ketumpatan, navigasi dan struktur responsif. Lelaran yang lebih pantas penting kerana kebanyakan draf awal harus dibuang.

Cuba Sunburst selepas kontrak skrin selesai dan bingkai semakan terperinci akan membantu. Itu mungkin termasuk imej pembentangan yang digilap, arah visual yang bernuansa atau suntingan sukar yang memerlukan pemeriksaan lebih dekat. Kesetiaan visual yang lebih tinggi tidak membaiki keperluan produk yang tidak lengkap. Gesaan Sunburst yang tidak jelas masih boleh menghasilkan skrin yang tidak jelas.

Penjana imej AI memberikan titik masuk yang lebih luas, manakala Pustaka gesaan GPT Imej 2 berguna apabila anda ingin membandingkan struktur segera di luar kerja UI. Simpan model yang dipilih dan tetapan kualiti dalam nota serahan anda supaya rakan sepasukan yang lain boleh menghasilkan semula konteks penjanaan.

Gesaan onboarding mudah alih

Onboarding memerlukan kerja yang terhad. Contoh ini membantu pengguna baharu menyambungkan kalendar dan memilih pemasaan pemberitahuan tanpa menukar skrin menjadi karusel pemasaran.

Buat aliran onboarding mudah alih tiga skrin untuk pembantu kalendar.

KANVAS
- Tiga papan seni seperti iPhone pada 390 x 844, ditunjukkan sebelah menyebelah.
- Hormati kawasan selamat. Gunakan satu sistem jarak 8 mata yang konsisten.

SKRIN 1: SAMBUNG
- Tajuk: "Sambungkan kalendar anda"
- Baris sokongan: "Lihat masa terbuka tanpa mengubah acara sedia ada."
- Butang utama: "Sambungkan kalendar"
- Pautan teks sekunder: "Bukan sekarang"

SKRIN 2: PILIH
- Tajuk: "Bilakah kami harus mengingatkan anda?"
- Tiga pilihan radio: 10 minit sebelum, 30 minit sebelum, 1 jam sebelum.
- Pilih 30 minit sebelum.

SKRIN 3: SEDIA
- Tajuk: "Anda sudah bersedia"
- Tunjukkan agenda sampel padat dengan dua acara.
- Butang utama: "Buka hari saya"

PERATURAN SISTEM
- Pastikan kedudukan butang stabil pada ketiga-tiga skrin.
- Gunakan satu gaya ilustrasi dan satu keluarga ikon.
- Tunjukkan kemajuan sebagai 1 daripada 3, 2 daripada 3, 3 daripada 3.
- Tiada testimoni, harga, kecerunan, logo atau langkah persediaan tambahan.

Semak output sebagai urutan. Navigasi belakang sepatutnya boleh dilakukan pada skrin dua dan tiga. Nilai pemberitahuan yang dipilih memerlukan keadaan terpilih yang boleh dilihat. Skrin akhir tidak seharusnya memperkenalkan permintaan kebenaran baharu yang tidak pernah ditakrifkan oleh gesaan.

gesaan papan pemuka SaaS

Gesaan papan pemuka memerlukan soalan, bukan hanya senarai widget. Tugas pengguna di bawah menentukan hierarki halaman.

Reka bentuk papan pemuka SaaS desktop untuk petunjuk operasi sokongan.
Pengguna mesti mengenal pasti kategori tiket yang menyebabkan tertunggak hari ini.

SUSUN ATUR
- Kanvas 1440 x 1024 dengan rel navigasi kiri 240 piksel.
- Pengepala: "Gambaran keseluruhan sokongan", tarikh tempatan, pemilih pasukan.
- Baris pertama: Buka, Menunggu, Menyelesaikan hari ini, Maklum balas pertama Median.
- Rantau utama: carta tunggakan mengikut jam di sebelah kiri, jadual kategori di sebelah kanan.
- Rantau bawah: lima tiket terbuka tertua dengan pemilik dan umur.

DATA
Buka 184; Menunggu 36; Diputuskan hari ini 92; Maklum balas pertama median 18 min.
Kategori: Pengebilan 71, Log Masuk 48, Generasi 39, Eksport 26.
Jangan tambahkan peratusan atau tuntutan arah aliran.

PETUA INTERAKSI
- Baris pengebilan dipilih dan menapis carta setiap jam.
- Satu kawalan "Kosongkan penapis" yang kelihatan muncul di atas carta.
- Penunjuk isihan muncul hanya pada lajur Backlog.

GAYA
UI operasi padat, kanvas putih pudar, teks dakwat gelap, aksen pilihan biru.
Elakkan ilustrasi hiasan, kad bersaiz besar, kesan kaca dan makluman palsu.

Semak setiap nombor terhadap blok data. Kemudian tanya sama ada baris Pengebilan dan carta yang ditapis boleh difahami tanpa bergantung pada warna sahaja. Tambahkan ikon, label atau layanan sempadan jika perhubungan itu samar-samar.

gesaan halaman harga

Halaman harga gagal apabila penekanan visual mengubah tawaran secara senyap. Kawal nama pelan, harga, item yang disertakan, pengecualian dan label CTA.

Buat halaman harga responsif untuk apl pengambilan nota pasukan.

RANCANGAN
Percuma: $0, 3 projek, storan 1 GB, sokongan komuniti. CTA: "Mulakan percuma".
Pasukan: $12 setiap ahli setiap bulan, projek tanpa had, storan 50 GB, sokongan e-mel.
CTA: "Mulakan percubaan pasukan". Tandai pelan ini "Paling dipilih".
Perniagaan: $28 setiap ahli bulanan, SSO, log audit, sokongan keutamaan.
CTA: "Hubungi jualan".

DESKTOP
- Kanvas 1440 piksel, tiga lajur pelan yang sama, Berpusatkan pasukan.
- Letakkan nota pengebilan bulanan di sebelah harga, bukan dalam pengaki yang jauh.

MUDAH ALIH
- Kanvas 390 piksel, pelan disusun Percuma, Pasukan, Perniagaan.
- Pastikan setiap harga dan CTA kelihatan tanpa karusel mendatar.

PERATURAN
- Jangan cipta diskaun, harga tahunan, jaminan, kiraan pelanggan atau ciri.
- Gunakan tanda semak hanya untuk item yang disertakan. Tulis pengecualian sebagai teks biasa.
- Berikan pasukan kontras sempadan yang lebih kukuh tanpa membesarkan harganya.

Selepas generasi, bandingkan rancangan baris demi baris. Pengecualian yang hilang atau diskaun ciptaan ialah ralat produk, walaupun halaman itu kelihatan boleh dipercayai. Bina semula teks harga yang tepat dalam kod dan bukannya menganggap tipografi yang dijana sebagai karya seni pengeluaran.

Kosong, memuatkan dan gesaan keadaan ralat

Hasilkan keadaan selepas skrin rujukan mempunyai sistem komponen yang stabil. Gunakan semula dimensi bekas yang sama supaya reka letak tidak melompat antara keadaan.

Menggunakan skrin senarai projek yang diluluskan sebagai rujukan visual, buat helaian keadaan.

Tunjukkan empat versi panel kandungan 720 x 420 yang sama:
1. LALAI: tiga baris projek dengan nama, pemilik, status dan tarikh dikemas kini.
2. MEMBUAT: tiga baris rangka neutral tanpa perkataan atau nombor palsu.
3. KOSONG: tajuk "Belum ada projek", satu ayat, butang "Buat projek".
4. RALAT: tajuk "Projek tidak dapat dimuatkan", mesej "Periksa sambungan anda dan cuba semula.",
   butang utama "Cuba semula", pautan teks kedua "Lihat status".

PELIHARA
Saiz panel, kedudukan tajuk, penjajaran lajur, latar belakang, sempadan, jejari,
skala jenis, jarak, dan peletakan tindakan.

PETUA KEBOLEHAMPUAN
Jangan sampaikan ralat atau keadaan pemuatan dengan warna sahaja.
Pastikan garis besar fokus kelihatan pada projek Cuba Semula dan Buat.
Jangan letak satu-satunya penjelasan di dalam ikon.

Ilustrasi di atas adalah rujukan QA yang dibuat untuk panduan ini. Ia menunjukkan kategori untuk diperiksa, bukan perpustakaan komponen pengeluaran.

Gesaan mudah alih dan desktop yang responsif

Dua papan seni yang tidak berkaitan tidak menentukan tingkah laku responsif. Nyatakan invarian dahulu, kemudian senaraikan penjelmaan yang dibenarkan.

Buat skrin mudah alih dan desktop berpasangan untuk produk perancangan perjalanan yang sama.

INVARIAN
- Susunan kandungan yang sama: carian, penapis kategori, perjalanan yang ditampilkan, baki perjalanan.
- Tajuk dan destinasi kad yang sama pada kedua-dua kanvas.
- Loghat biru yang sama, rawatan imej, keluarga jenis dan jejari kad.
- Carian ialah tindakan utama pada kedua-dua lebar.

MUDAH ALIH PADA 390 PIKSEL
- Navigasi bawah dengan Laman Utama, Carian, Disimpan, Profil.
- Kad perjalanan satu lajur dengan padding halaman 16 piksel.
- Cip kategori tatal secara mendatar pada satu baris.

DESKTOP PADA 1440 PIKSEL
- Navigasi teratas dengan Perjalanan, Teroka, Disimpan, Profil.
- Grid perjalanan tiga lajur dalam kawasan kandungan 1200 piksel.
- Medan carian terletak di pengepala; cip kategori terletak di atas grid.

JANGAN
Tukar salinan kad, tambah destinasi, sembunyikan tindakan carian atau cipta tema visual yang berasingan.

Gesaan berpasangan ini menjadikan perbezaan disengajakan. Semasa lepas tangan, ubah setiap transformasi menjadi peraturan: navigasi bawah menjadi navigasi atas pada titik putus desktop; senarai kad berubah daripada satu kepada tiga lajur; kawalan carian bergerak tetapi mengekalkan kerja dan label yang sama.

Tetapan dan kebenaran gesaan

Halaman tetapan mendedahkan sama ada mockup memahami gelagat sistem. Kumpulan mengawal dengan akibatnya dan membuat tindakan yang merosakkan sukar dicetuskan secara tidak sengaja.

Reka halaman tetapan desktop untuk ruang kerja kongsi.

BAHAGIAN
Profil: nama, peranan, tindakan imej profil.
Pemberitahuan: pilih ringkasan e-mel, suis kemas kini produk, suis makluman sebutan.
Keselamatan: pautan sesi aktif, butang tukar kata laluan, status dua faktor.
Zon bahaya ruang kerja: butang tinggalkan ruang kerja.

PETUNJUK TINGKAH LAKU
- Tunjukkan keadaan yang disimpan di sebelah Profil selepas suntingan.
- Tunjukkan butang Simpan yang dilumpuhkan apabila tiada medan diubah.
- Berikan suis keadaan hidup dan mati yang berbeza dengan label teks.
- Letakkan "Tinggalkan ruang kerja" dalam zon bahaya yang berasingan dengan salinan penjelasan.
- Jangan tunjukkan modal pengesahan yang merosakkan dalam skrin utama yang sama.

SUSUN ATUR
1440 x 1024, rel kiri 240 piksel, lajur tetapan 720 piksel, jurang bahagian yang besar.
Gunakan UI produk biasa, bukan halaman pendaratan pemasaran.

Minta pengulas untuk menerangkan perkara yang dilakukan oleh setiap kawalan tanpa meneka. Jika suis tidak mempunyai label, keadaan yang disimpan tidak mempunyai tempoh, atau tindakan bahaya kelihatan seperti pautan navigasi biasa, visual memerlukan pembaikan dan keperluan memerlukan lebih terperinci.

Membaiki satu kawasan tanpa kehilangan skrin

Gesaan pengeditan yang berguna menamakan satu kecacatan, satu rantau, penggantian dan invarian. Jangan campurkan pembaikan tipografi dengan reka bentuk semula warna dan perubahan reka letak.

EDIT HANYA KEPALA PAPAN PEmuka MEJA.
Gantikan tajuk halaman "Tinjauan Sokongan" dengan betul-betul "Gambaran keseluruhan sokongan".
Simpan tajuk pada satu baris dan kekalkan kedudukan semasa, saiz jenis, berat dan warnanya.
Kekalkan tarikh, pemilih pasukan, rel navigasi, metrik, carta, jadual, jarak,
latar belakang, sempadan dan setiap perkataan lain yang boleh dilihat.
Jangan tambah sebarang label atau ikon baharu.

Periksa output lengkap selepas setiap pengeditan. Tajuk yang diperbetulkan tidak membantu jika model juga menukar dua metrik. Jika perubahan cagaran muncul, kembali ke versi terdahulu yang paling bersih dan sempitkan permintaan edit dengan lebih lanjut. Untuk ketekalan visual merentas skrin kemudian, aliran kerja rujukan gaya jenama menerangkan cara mengekalkan peraturan identiti, palet, pencahayaan dan gubahan tetap. Untuk hierarki visual yang padat, gunakan aliran kerja segera maklumat grafik.

Bina paket handoff pembangun

Mockup terakhir ialah satu item dalam paket handoff, bukan keseluruhan paket. Lampirkan skrin yang diterima dan rekod keputusan yang tidak dapat dibawa oleh piksel.

1. Namakan setiap skrin dan tugas penggunanya.
2. Senaraikan salinan dan sampel data yang diluluskan dengan tepat. Tandai setiap pemegang tempat.
3. Petakan bahagian visual yang berulang kepada komponen yang dicadangkan.
4. Rekod jarak, jenis, warna, jejari dan token ketinggian sebagai nilai pelaksanaan.
5. Tentukan keadaan pemuatan, kosong, ralat, dilumpuhkan, kejayaan dan kebenaran.
6. Nyatakan peraturan titik putus sebagai invarian dan transformasi.
7. Tambah papan kekunci, fokus, label, kontras, saiz sasaran, gerakan dikurangkan dan pemeriksaan pemulihan ralat.
8. Senaraikan soalan produk yang belum diselesaikan dengan pemilik dan bukannya membiarkan kod menjawabnya secara senyap.

Pembangun harus bebas untuk membetulkan geometri yang mustahil, interaksi tidak boleh diakses dan konvensyen platform. Mockup mewujudkan niat. Ia tidak mengatasi perisian yang berfungsi.

Audit skrin sebelum pelaksanaan

Gunakan empat pas semakan. Pertama, bandingkan setiap perkataan dan nombor yang boleh dilihat dengan blok kandungan yang diluluskan. Kedua, jejaki tugas pengguna utama dan sahkan bahawa hierarki dan tindakan menyokongnya. Ketiga, periksa keadaan dan tingkah laku responsif. Keempat, semak paket handoff untuk butiran yang tidak dapat diungkapkan oleh imej.

Pada peleraian penuh, cari ejaan, jarak tidak konsisten, ikon herot, pertindihan tidak sengaja dan data ciptaan. Pada 390 piksel, sahkan bahawa tajuk, tindakan utama dan mesej keadaan kekal boleh dibaca. Reka bentuk yang berfungsi hanya pada saiz pembentangan belum sedia untuk dilaksanakan.

Jangan gunakan mockup sebagai bukti bahawa antara muka boleh diakses, boleh digunakan atau boleh dilaksanakan secara teknikal. Tuntutan tersebut memerlukan prototaip, kod dan ujian pengguna atau automatik. UI yang dijana adalah paling kukuh sebagai cadangan pantas yang menjadikan keputusan produk cukup jelas untuk dibahaskan.

Gesaan akhir yang boleh diguna semula

Templat di bawah mengutamakan keperluan produk daripada hiasan visual. Alih keluar medan yang tidak berkenaan, tetapi jangan gantikannya dengan kata sifat.

Buat UI [mudah alih/desktop/responsif] untuk [produk].

KERJA PENGGUNA
[Satu tugas yang pengguna mesti selesaikan.]

KANVAS
[Dimensi tepat, lebar kandungan, kawasan selamat, grid dan pelapik luar.]

PESANAN MAKLUMAT
1. [Wilayah pertama dan tujuannya]
2. [Wilayah kedua dan tujuannya]
3. [Wilayah ketiga dan tujuannya]

KANDUNGAN TEPAT
[Navigasi, tajuk, label, nilai, mesej dan salinan CTA yang diluluskan.]
Jangan cipta teks atau data di luar blok ini.

KOMPONEN
[Kawalan dinamakan, kad, jadual, navigasi, carta, borang dan corak berulang.]

NEGERI
[Lalai, tuding, fokus, memuatkan, kosong, ralat, dilumpuhkan, kejayaan, kebenaran.]

PERATURAN RESPONSIF
Kekalkan: [kandungan, susunan, tindakan dan invarian sistem visual].
Ubah: [navigasi, lajur, pembalut, penyembunyian atau penyusunan semula dibenarkan pada setiap lebar].

ARAH VISUAL
[Gaya produk, peranan jenis, peranan palet, ketumpatan, sempadan dan imejan khusus.]

SEMAK KUALITI
Tiada logo ciptaan, data, ciri, testimoni, lencana, tera air, mikrokopi yang tidak boleh dibaca,
gaya komponen tidak konsisten, atau isyarat keadaan warna sahaja.

Jalankan templat dalam GPT Imej 2.5 Ruang Kerja Suar. Kembali ke Laman utama imej3 apabila anda ingin membandingkan aliran kerja imej lain dan gunakan Halaman model GPT Image 2.5 untuk memilih laluan generasi seterusnya. Simpan segera pemenang, imej yang diterima, sejarah pembaikan dan peraturan serahan bertulis bersama-sama. Paket itulah yang menjadikan skrin yang dihasilkan menjadi keputusan produk yang boleh disemak.

Soalan lazim

Model GPT Image 2.5 yang manakah harus saya gunakan untuk mockup UI?

Mulakan dengan Flare apabila reka letak dan kandungan masih berubah. Uji Sunburst apabila bingkai semakan ketepatan yang lebih tinggi boleh mengubah keputusan. Rakam model dan tetapan kerana keputusan bergantung pada beban kerja sebenar.

Bolehkah GPT Image 2.5 menjana kod UI sedia pengeluaran?

Tidak. Output ialah rujukan visual, bukan pokok komponen atau spesifikasi tingkah laku. Bina antara muka dalam kod dan ujinya terhadap kriteria penerimaan bertulis.

Bagaimanakah cara saya memastikan teks tepat dalam mockup UI?

Bekalkan salinan tepat, kurangkan jumlah teks setiap skrin, dan periksa setiap label dan nombor. Baiki satu kawasan teks pada satu masa sambil mengekalkan imej yang lain.

Bagaimanakah saya harus menggesa versi mudah alih dan desktop?

Berikan kedua-dua lebar kanvas. Asingkan kandungan dan tindakan invarian daripada navigasi, grid dan peraturan pembalut yang mungkin berubah merentas titik putus.

Patutkah saya menjana setiap keadaan apl dalam satu imej?

Stabilkan satu skrin rujukan dahulu. Kemudian minta helaian keadaan padat yang menggunakan semula dimensi, jenis, jarak, warna dan kawalannya.

Adakah mockup yang digilap membuktikan kebolehaksesan?

Tidak. Semak semantik, susunan papan kekunci, fokus, label, kontras, saiz sasaran, pilihan gerakan dan pemulihan ralat dalam antara muka yang dilaksanakan.