UI Mockup'ları için GPT Image İstemleri Nasıl Yazılır
Dashboard'lar, uygulama ekranları ve cihaz mockup'ları için öngörülebilir düzenler ve okunabilir etiketler elde etmek üzere GPT Image 2'ye nasıl istem yazılır.
UI mockup'ları için iyi GPT Image istemleri; ürünü, ekranı ve ana bileşenlerini, ekranın içinde göründüğü cihazı veya çerçeveyi, görsel stili ve okunabilir olması gereken metni tam olarak belirtir. Bileşenleri okuma sırasına göre listeleyin ve ekrandaki metni kısa tutun; çünkü model birkaç büyük etiketi, paragraflarca arayüz metnine göre çok daha güvenilir şekilde oluşturur.
Ekranı bir wireframe gibi tarif edin
Ekranın ne işe yaradığıyla ve neler içerdiğiyle başlayın; bunları kullanıcının okuyacağı sırayla verin: gezinme, üst bilgi, ana içerik, yan paneller ve eylemler. Model, bileşenler “modern dashboard” gibi bir stil kelimesiyle ima edildiğinde değil, tek tek listelendiğinde onları daha öngörülebilir biçimde yerleştirir.
- Ürünü ve ekranı adlandırın: “bir SaaS faturalandırma aracı için analitik dashboard” veya “bir meditasyon uygulaması için karşılama ekranı”.
- Bölgeleri sırayla listeleyin: kenar çubuğunda gezinme menüsü, arama içeren üst çubuk, üç KPI kartı, bir çizgi grafik ve son işlemler tablosu.
- Yoğunluğu belirtin: geniş boşluklar, tutarlı kart boyutları, net hizalama.
Çerçeveyi seçin: düz ekran, cihaz veya sahne
Bir vaka çalışması için düz bir arayüz görüntüsüne mi, bir açılış sayfası için cihaz mockup'ına mı, yoksa pazarlama için fotoğraflanmış bir sahneye mi ihtiyacınız olduğuna karar verin. Her biri farklı ifadeler gerektirir.
- Düz: “düz UI ekran görüntüsü, cihaz çerçevesi yok, 16:9”.
- Cihaz: “hafif açılı ince bir dizüstü bilgisayarda, ekran kameraya dönük, yumuşak yansımalar”.
- Sahne: “doğal gün ışığında ahşap bir masa üzerinde dizüstü bilgisayar, sığ alan derinliği”; arayüzün daha küçük ve daha az okunaklı olmasını bekleyin.
Arayüz metnini kısa ve kesin tutun
Okunabilir metin, üretilen arayüzlerde en sık görülen sorundur. Önemli olan birkaç etiketi tırnak içinde verin, gerisinin yer tutucu satırlarla ima edilmesine izin verin.
- Başlıkları ve düğmeleri tam olarak tırnak içinde yazın: “Gelir”, “Planı yükselt”.
- Gövde metni için yer tutucu metin satırları isteyin.
- Gerçek verilerden oluşan uzun tablolardan kaçının; bunun yerine beş satırlık örnek işlem isteyin.
Görsel sistemi tanımlayın
Glassmorphism gibi stil kelimeleri işe yarar, ancak kısa bir görsel sistem tanımı birden fazla ekranda daha tutarlı sonuçlar verir.
- Renk: arka plan, yüzey, birincil vurgu ve durum renkleri.
- Yazı: sans-serif bir yazı ailesi, net bir ağırlık hiyerarşisi ve başlıklarla etiketler arasında boyut kontrastı.
- Bileşenler: köşe yarıçapı, gölgeler, kenarlıklar ve ikon stili.
İstem kontrol listesi
- Ürün, ekranın amacı ve hedef kitle belirtilmiş.
- Bileşenler okuma sırasına göre listelenmiş.
- Çerçeve seçilmiş: düz ekran görüntüsü, cihaz veya sahne.
- Yalnızca tırnak içindeki kısa metnin okunabilir olması gerekiyor.
- Renk, yazı ve bileşen stili tanımlanmış.
- En-boy oranı hedefe uygun: masaüstü için 16:9, telefon için 9:16.
Sık sorulan sorular
GPT Image 2 kullanılabilir bir UI tasarımı üretebilir mi?
Sunumlar, açılış sayfaları ve moodboard'lar için ikna edici görsel konseptler ve mockup'lar üretir. Çıktıyı bir üretim tasarımı olarak değil, görsel referans olarak değerlendirin; çünkü boşluklar, ikonlar ve küçük metinler spesifikasyon olarak teslim edilecek kadar hassas değildir.
UI mockup'ında okunabilir metni nasıl elde ederim?
Okunabilir metni tırnak içindeki birkaç etiketle sınırlayın, bunları büyük yapın ve geri kalan her şeyi yer tutucu satırlar olarak tarif edin. Temiz bir sans-serif yazı tipindeki kısa kelimeler en güvenilir şekilde oluşturulur.
Birden fazla ekranı nasıl tutarlı tutarım?
Her istemde aynı görsel sistem paragrafını yeniden kullanın ve yalnızca ekran tanımını değiştirin. Tek bir şablondan üretilen ekranlar, her seferinde sıfırdan tarif edilen ekranlara göre birbirine daha yakın olur.
İlgili istem şablonları
Bu rehberi gerçek istemlerle kullanın
Kütüphanedeki ilgili kategoriden istem şablonlarına göz atın ve yapıyı kendi görsel iş akışınıza uyarlayın.