Pagar Pembatas UI Generatif: Mendesain untuk Maksud Tanpa Merusak Sistem Desain Anda
Bagaimana UX berubah ketika AI membangun antarmuka dengan cepat, dan bagaimana menyusun komponen, token, dan pemeriksaan sehingga UI yang dihasilkan tetap dapat diakses dan sesuai merek.
Pengambilan Inti
UI Generatif berarti model AI merakit bagian antarmuka untuk setiap permintaan. Agar tetap dapat digunakan, biarkan model memilih dari katalog komponen yang disetujui daripada menulis gaya mentah, teruskan token desain Anda, validasi outputnya (kontras, skala tipe, urutan fokus, pengurangan gerakan) sebelum rendering, dan pertahankan kerangka navigasi dan kontrol tetap di sekitar area yang dihasilkan.
Dari tata letak tetap hingga mendesain untuk tujuan tertentu
Dalam tata letak tetap, desainer memutuskan setiap layar terlebih dahulu. Dengan UI generatif, model AI memutuskan antarmuka mana yang akan ditampilkan untuk permintaan tertentu. Google mendeskripsikan UI generatif sebagai model yang menghasilkan tidak hanya konten tetapi juga keseluruhan pengalaman, dan kini Google mengirimkan eksperimen berdasarkan hal ini di aplikasi Gemini dan Mode AI di Google Penelusuran. Dalam alat pengembang, Vercel AI SDK menjelaskan versi yang lebih sederhana: model memanggil alat, dan hasil dari panggilan alat tersebut dirender sebagai komponen React.
Apa perubahan untuk UX
Desainer berhenti menggambar setiap layar dan mulai merancang aturan: komponen mana yang ada, kapan masing-masing komponen sesuai, dan apa yang tidak boleh berubah. Bingkai di sekitar konten yang dihasilkan, seperti navigasi, input, pembatalan, dan pengaturan, harus tetap sehingga orang tidak akan kehilangan tempatnya. Area yang dihasilkan harus ditandai dengan jelas, dan orang-orang harus dapat beralih ke tampilan yang jelas dan dapat diprediksi.
Pagar Pembatas 1: katalog komponen yang disetujui
Pola teraman adalah membiarkan model memilih dan mengisi komponen, bukan menciptakannya. A2UI, sebuah protokol terbuka yang dibuat oleh Google, bekerja dengan cara ini: agen mengirimkan deskripsi komponen deklaratif, dan klien merendernya dengan widget aslinya sendiri, tanpa menjalankan kode arbitrer dari agen. Katalog Anda bisa berukuran kecil: tabel, kartu, bagan, formulir, daftar, masing-masing dibuat dan diuji oleh tim Anda.
Pagar Pembatas 2: token, bukan nilai mentah
Berikan token semantik model, seperti color.text.primary atau space.4, dan tolak keluaran yang menggunakan nilai hex mentah atau ukuran font arbitrer. Hal ini menjaga kontras, tipografi, dan spasi di dalam sistem, dan tema seperti mode gelap atau kontras tinggi tetap berfungsi secara otomatis.
Pagar Pembatas 3: validasi sebelum Anda merender
Jalankan pemeriksaan otomatis pada keluaran yang dihasilkan sebelum menampilkannya: bidang yang wajib ada, kontras warna, urutan judul, label pada masukan, urutan fokus, ukuran target sentuh, dan dukungan pengurangan gerakan. Jika pemeriksaan gagal, kembalilah ke tata letak yang sederhana dan dikenal baik daripada menampilkan UI yang rusak.
- Validasi skema: hanya komponen dan properti yang diketahui
- Aksesibilitas: kontras, label, peran, urutan fokus
- Batasan konten: item maksimum, panjang teks, ukuran gambar
- Fallback: daftar biasa atau jawaban teks jika validasi gagal
Kunci Principles untuk Diingat
- UI Generatif = model merakit antarmuka untuk setiap permintaan
- Pertahankan bingkai tetap (navigasi, masukan, batalkan) di sekitar area yang dihasilkan
- Biarkan model memilih dari katalog yang disetujui alih-alih menulis UI mentah
- Berikan token semantik dan tolak nilai mentah
- Validasi aksesibilitas sebelum merender dan simpan cadangan
Pertanyaan yang Sering Diajukan
Sumber
- Generative UI: A rich, custom, visual interactive user experience for any prompt — Riset Google
- A2UI: A Protocol for Agent-Driven Interfaces — a2ui.org
- Generative User Interfaces — Dokumen Vercel AI SDK
- Design tokens overview — Material Design 3