# 03 · UI/UX spesifikasiya şablonu

> `DESIGN.md` **sistemi** təsvir edir; bu sənəd **ekranları** təsvir edir.
> Layihənin kökündə `UI_UX_SPECIFICATION.md` adı ilə saxlanılır.
> Hər ekran üçün eyni bloklar doldurulur — buraxılan blok = QA-da tapılan boşluq.

---

## 1. İstifadəçilər və rollar

| Rol | Kim | Əsas işi | Ekran sayı | Xüsusi tələb |
|---|---|---|---|---|
| «…» | «…» | «…» | «…» | «məs. yalnız klaviatura, planşet, əlcəklə toxunma» |

**Ən çox təkrarlanan 3 axın** (bunlar ən sürətli olmalıdır):

1. «…»
2. «…»
3. «…»

---

## 2. Naviqasiya xəritəsi

```
«Ana»
├─ «Qrup 1»
│  ├─ «Ekran A»  → siyahı
│  │  └─ «Ekran A/detal» → forma
│  └─ «Ekran B»
└─ «Qrup 2»
   └─ «Ekran C»
```

| Qayda | Cavab |
|---|---|
| Naviqasiya qruplarının sayı | «≤ 6» |
| Bir qrupda maksimum element | «≤ 8» |
| Dərinlik limiti | «2 səviyyə» |
| Mobil naviqasiya | «overlay sidebar / bottom tab» |

---

## 3. Ekran spesifikasiyası (hər ekran üçün təkrarlanır)

### 3.«N» «Ekran adı»

| Sahə | Dəyər |
|---|---|
| Marşrut | `/«yol»` |
| Şablon | `../reference-previews/«fayl».html` |
| Giriş nöqtəsi | «haradan gəlinir» |
| Rol icazəsi | «kim görür / kim dəyişə bilir» |
| Əsas hərəkət (bir dənə) | «…» |

**Struktur**

```
PageHeader — «başlıq» + «lede» + [«CTA»]
Filtr sətri — «axtarış / tab / seçici»
Məzmun    — «cədvəl / kart şəbəkəsi / forma / lövhə»
Alt hissə — «səhifələmə / cəmi»
```

**Məlumat**

| Sütun / sahə | Tip | Format | Boş olarsa |
|---|---|---|---|
| «…» | «mətn/rəqəm/tarix/status» | «mono, tabular» | «— göstərilir» |

**Dörd vəziyyət** (hamısı məcburi)

| Vəziyyət | Nə göstərilir | Hərəkət |
|---|---|---|
| Yüklənir | skeleton, real sətir hündürlüyü ilə | — |
| Boş | «başlıq + izah» | «birinci addım düyməsi» |
| Xəta | «səbəb + sorğu ID» | «Yenidən cəhd et» |
| Dolu | «…» | «…» |

**Validasiya və xəta mesajları**

| Sahə | Qayda | Mesaj |
|---|---|---|
| «…» | «…» | «konkret, nə etməli olduğunu deyir» |

**Klaviatura**

| Qısayol | Nəticə |
|---|---|
| «Ctrl+K» | «axtarış» |
| «Esc» | «filtri sıfırla — modal bağlamır» |

---

## 4. Komponent istifadəsi

| Ekran | İstifadə olunan base komponentlər |
|---|---|
| «…» | «PageHeader, SearchInput, DataTable, EmptyState, FormModal» |

Yeni komponent yaratmazdan əvvəl `05-component-contract.md` siyahısı yoxlanılır.

---

## 5. Responsiv davranış

| Sınıq nöqtəsi | Dəyişiklik |
|---|---|
| `< 48rem` | «cədvəl → kart siyahısı», «CTA tam en» |
| `48–64rem` | «2 sütun şəbəkə» |
| `> 64rem` | «sidebar sabit, 3–4 sütun» |

Yoxlama: heç bir enlik səviyyəsində `body` üfüqi scroll etmir.

---

## 6. Bildiriş və geri bildirim

| Hadisə | Forma | Müddət |
|---|---|---|
| Uğurlu yadda saxlama | toast, `--success` | 3 san |
| Xəta | forma səviyyəsində alert, avtomatik itmir | — |
| Uzun əməliyyat | düymə `aria-busy` + mətn dəyişir | — |
| Dağıdıcı əməliyyat | təsdiq dialoqu, nəticə rəqəmlə | — |

---

## 7. Boş və sərhəd halları

| Hal | Davranış |
|---|---|
| Çox uzun ad (100+ simvol) | «kəsilir + tooltip» |
| 0 nəticəli axtarış | «filtri sıfırla» təklifi |
| Şəbəkə kəsilməsi | «offline nişanı, yazma bloklanır» |
| İcazəsiz giriş | «403 ekranı, geri düyməsi» |
| Eyni anda redaktə | «konflikt xəbərdarlığı» |

---

## 8. Dil və mətn

- Bütün mətn `t()` içindədir, açar adı: `«namespace»:«ekran»_«element»`.
- Düymə mətni **feil** ilə başlayır («Yadda saxla», «Sil», «Göndər»), «OK» yazılmır.
- Xəta mesajı nəyin səhv olduğunu **və** nə etmək lazım olduğunu deyir.
- AZ mətnin uzunluğu EN-dən ~15–20% uzun olur — düymə eni buna görə sabit deyil.

---

## 9. Təhvil şərti

Ekran hazır sayılır yalnız o zaman ki, `06-qa-checklist.md`-dəki bütün gate-lər keçilib
və hər ekranın light + dark rejimdə skrinşotu var.