M
UI Sözlüğü · İşin Adını Koy
Vibe coding'in en sinsi verimsizliği kod bilmemek değil, parçanın adını bilmemektir: "hani şu üstte duran, kaydırınca sabitlenen şey..." diye üç tur diyalog döner; "sticky navbar" diyen tek turda alır. Bu sözlük o boşluğu kapatır: her arayüz parçasının adı (TR/EN), tek cümle tanımı ve AI'ya kopyala-yapıştır tarif kalıbı.
🖼️ Canlı örnekli hâli sitede: akademi.sololabs.tr/ui-sozlugu — her parçayı ekranda ÇALIŞIR hâlde gör. Bu MD, aynı sözlüğün kanonik listesi (PDF/NotebookLM dostu).
Kullanım kuralı: İstem yazarken parçayı ADIYLA çağır + kalıptaki üç bilgiyi ekle: nerede duracak · ne zaman görünecek · içinde ne olacak. (Ders 1.1'in 4-parça şablonuna doğrudan girdi.)
Tam maddeler: aşağıdaki liste giriş, asıl içerik detay sayfalarında
Bu dosya kanonik listedir: her parçanın adı, tanımı ve tarif kalıbı. Parçaların tam işlenmiş hâli — durumlar, erişilebilirlik kuralları, birincil kaynaklar ve "sık karıştırılanlar" karşılaştırmaları — canlı sitede her parçanın kendi detay sayfasındadır. Bir maddenin "tam" sayılması için yontem dosyasındaki tamlık listesini geçmesi gerekir.
Tam işlenmiş 20 madde (canlı sayfada kartın altında tam rozetiyle işaretli):
| Aile | Tam maddeler |
|---|---|
| Girdi (11/11) | metin kutusu · çok satırlı kutu · seçim kutusu · onay kutusu · seçenek düğmesi · anahtar · sürgü · arama · tarih seçici · dosya yükleme · form alanı |
| Geri bildirim (8/9) | kısa bildirim · kip pencere · uyarı şeridi · ipucu balonu · ilerleme çubuğu · spinner · iskelet · rozet |
| İçerik (1/9) | etiket |
Bu maddelerde tekrar eden üç eksen var ve sözlüğün asıl öğrettiği şey bunlar:
- Zamanlama: onay kutusu bir niyet bildirir (form gönderilince etkili), anahtar anında etkilidir. Test: "kullanıcı bunu değiştirdikten sonra Kaydet'e basacak mı?"
- Kesinti spektrumu: pasif şerit → geçici bildirim → engelleyici pencere. Seçim kriteri: "kaçırılmasının maliyeti ne?"
- Dürüstlük: yüzdeyi biliyorsan ilerleme çubuğu, bilmiyorsan spinner, yapıyı biliyorsan iskelet. Bilmediğin hâlde çubuk göstermek olmayan bir bilgi vaat etmektir.
Ayrıca bir gözlem: parçaların bir kısmının resmi bir standardı vardır (onay kutusu, seçenek düğmesi, anahtar, sürgü, kip pencere — ARIA kalıp listesinde kalıpları var), bir kısmının yoktur (rozet, etiket, ipucu balonu). Standardı olmayan parçada davranışı sen kurarsın; bunu bilmek, neyin bedava geldiğini bilmek demektir.
Gezinme parçaları
| Ad | EN | Nedir | AI'ya böyle söyle |
|---|---|---|---|
| Üst çubuk | navbar / header | Sayfanın tepesindeki logo+menü şeridi | "Kaydırınca üstte sabit kalan (sticky) bir navbar: solda logo, sağda 3 link + CTA butonu" |
| Kenar menü | sidebar | Sol/sağ kenarda dikey gezinme sütunu | "Solda daraltılabilir bir sidebar; aktif sayfa vurgulu" |
| Hamburger menü | hamburger menu | Mobilde menüyü açan üç çizgi | "Mobilde navbar hamburgere dönüşsün; tıklayınca tam ekran menü açılsın" |
| Kırıntı yolu | breadcrumb | "Ana sayfa > Ürünler > Ayakkabı" konum izi | "Ürün sayfasına breadcrumb ekle; her seviye tıklanabilir" |
| Sekmeler | tabs | Aynı alanda içerik değiştiren yatay başlıklar | "Profil sayfasında 3 sekmeli tabs: Bilgiler / Siparişler / Ayarlar" |
| Sayfalama | pagination | Uzun listeyi sayfalara bölen 1-2-3 kontrolü | "Tabloya sayfalama: sayfa başına 20 kayıt, önceki/sonraki + numaralar" |
| Açılır menü | dropdown | Tıklayınca altına açılan seçenek listesi | "Sağ üstteki avatara tıklanınca dropdown: Profil / Ayarlar / Çıkış" |
| Alt bilgi | footer | Sayfa sonundaki linkler+iletişim bölgesi | "4 sütunlu footer: hakkında, linkler, iletişim, sosyal ikonlar" |
Girdi parçaları
| Ad | EN | Nedir | AI'ya böyle söyle |
|---|---|---|---|
| Metin kutusu | input | Tek satırlık yazı alanı | "E-posta input'u: placeholder + geçersizse altında kırmızı hata satırı" |
| Çok satırlı kutu | textarea | Uzun metin alanı | "Mesaj için textarea: 4 satır, 500 karakter sayacı" |
| Seçim kutusu | select | Listeden tek seçenek seçtiren kutu | "Şehir select'i: aranabilir olsun, 81 il" |
| Onay kutusu | checkbox | İşaretlenebilir kare (çoklu seçim) | "KVKK onayı checkbox'ı; işaretlenmeden buton pasif kalsın" |
| Seçenek düğmesi | radio | Gruptan TEK seçim yaptıran yuvarlak | "Ödeme tipi radio grubu: kart / havale / kapıda" |
| Anahtar | switch / toggle | Açık-kapalı kaydırmalı düğme | "Bildirimler için switch; değişince anında kaydet, toast göster" |
| Sürgü | slider | Aralıktan değer seçtiren çubuk | "Fiyat filtresi slider'ı: 0-10.000₺, iki uçlu (min-max)" |
| Arama çubuğu | search bar | Büyüteç ikonlu arama girişi | "Navbar'a arama: yazdıkça sonuç öneren (autocomplete)" |
| Tarih seçici | date picker | Takvim açarak tarih seçtiren alan | "Randevu için date picker: geçmiş günler seçilemesin" |
| Dosya yükleme | file upload | Dosya seçme/sürükleme alanı | "Sürükle-bırak dosya yükleme: sadece PDF, en çok 5 MB, ilerleme çubuklu" |
| Form alanı | form field | Etiket + girdi + hata mesajı üçlüsü | "Her form alanı: üstte label, altta hata satırı; boş gönderim engellensin" |
Geri bildirim parçaları
| Ad | EN | Nedir | AI'ya böyle söyle |
|---|---|---|---|
| Kısa bildirim | toast / snackbar | Köşede belirip kaybolan küçük mesaj | "Kayıt sonrası sağ altta yeşil toast: 'Kaydedildi', 3 sn'de kaybolsun" |
| Kip pencere | modal / dialog | Sayfayı karartıp öne çıkan pencere | "Silme öncesi onay modal'ı: 'Emin misin?' + Vazgeç/Sil; dışına tıklayınca kapansın" |
| Uyarı şeridi | alert / banner | Sayfa içinde renkli bilgi/uyarı kutusu | "Ödeme gecikmişse sayfa üstünde sarı banner + 'Öde' linki" |
| İpucu balonu | tooltip | Üzerine gelince çıkan mini açıklama | "Bilgi ikonuna hover'da tooltip: 'Komisyon %10'" |
| İlerleme çubuğu | progress bar | İşin yüzde kaçının bittiğini gösteren çubuk | "Yükleme sırasında progress bar + yüzde yazısı" |
| Dönen yükleyici | spinner / loader | "Bekle" anlamına gelen dönen halka | "Buton tıklanınca içinde spinner dönsün, çift tıklama engellensin" |
| İskelet yükleme | skeleton | İçerik gelmeden görünen gri taslak kutular | "Liste yüklenirken 5 satırlık skeleton göster (boş beyaz ekran yerine)" |
| Rozet | badge | Sayı/durum gösteren mini etiket | "Zil ikonuna okunmamış sayısı badge'i (kırmızı, 9+ gösterimi)" |
| Boş durum | empty state | Veri yokken gösterilen açıklama+aksiyon | "Sipariş listesi boşsa empty state: ikon + 'Henüz sipariş yok' + 'İlk siparişini ver' butonu" |
İçerik ve yerleşim parçaları
| Ad | EN | Nedir | AI'ya böyle söyle |
|---|---|---|---|
| Kart | card | Görsel+başlık+aksiyonu paketleyen kutu | "Ürünleri 3 sütun card grid'de göster: görsel, ad, fiyat, sepet butonu" |
| Vitrin | hero | Ana sayfanın en üst büyük tanıtım alanı | "Hero: solda başlık+alt metin+2 CTA, sağda görsel; mobilde alt alta" |
| Akordeon | accordion | Tıklayınca açılıp kapanan başlık listesi | "SSS'yi accordion yap: aynı anda tek soru açık kalsın" |
| Kaydırmalı galeri | carousel / slider | Ok/kaydırma ile dönen görsel şeridi | "Yorumlar carousel'i: 5 sn'de otomatik dönsün, alta nokta göstergesi" |
| Tablo | table | Satır-sütun veri görünümü | "Sipariş tablosu: sıralanabilir kolonlar + durum badge'i + satır sonunda işlem menüsü" |
| Avatar (grubu) | avatar (group) | Yuvarlak profil görseli; grupta üst üste dizilir | "Projede çalışanları avatar group olarak göster: en çok 4 + '+3' rozeti" |
| Etiket | chip / tag | Küçük hap biçimli kategori/filtre etiketi | "Blog yazılarına tıklanabilir tag chip'leri; seçili olan dolu renkli" |
| Ayraç | divider | Bölümleri ayıran ince çizgi | "Ayarlar bölümleri arasına divider koy, başlıklı" |
| Adım göstergesi | stepper / steps | Çok adımlı akışta 1→2→3 ilerleme haritası | "Ödeme akışına 3 adımlı stepper: Sepet / Adres / Ödeme; tamamlanan adımlar tikli" |
| Eylem çağrısı | CTA button | Sayfanın asıl istediği tek büyük buton | "Hero'ya birincil CTA: 'Ücretsiz başla' — sayfada tek birincil buton kuralı" |
Cepte duracak istemler
Adı bilmediğinde (tersine sözlük):
Bir arayüz parçası tarif edeceğim, resmi adını (EN) ve bu projede nasıl isteneceğini
söyle: "[kendi cümlenle tarif et]"
Antrenman (sözlük oyunu):
UI adlandırma antrenörüm ol. Bana rastgele 10 arayüz parçasını adını söylemeden
tarif et; ben adını bileyim. Yanlışlarımda doğru adı + akılda tutma ipucu ver,
sonunda skorumu söyle.
Altın kurallar
- Parçayı adıyla çağır; adı bilmiyorsan önce tersine sözlük istemini kullan — üç tur diyalog, tek tura iner.
- Ad tek başına yetmez: nerede + ne zaman + içinde ne üçlüsünü hep ekle.
- Bu sözlük yaşar: tarif etmekte zorlandığın her yeni parça, adı öğrenilince buraya eklenir (vaka defteri protokolü).