За този прототип

UX/UI наръчник

Orbit TV е TV-first прототип, не разтегнат мобилен интерфейс. Дизайнът стъпва на три принципа от глобалния анализ: lean-back shell, discovery като продукт и playback като доверие.

Focus model

Видим focus ring винаги. 4px solid + 2px offset. Анимация 120ms ease-out. Никога не разчитай само на цветова разлика.

D-pad преди всичко

Стрелки за навигация, Enter за избор, Backspace/Esc за назад. Цифри 0–9 за пряк избор на канал.

3-метровият тест

Шрифт ≥ 20px за основен текст, ≥ 16px за meta. Контраст AAA за заглавия. Картите с минимум 24px gap.

Грид и safe area

12-колонен грид с outer padding 5vw (≈96px на 1920×1080). Rails: 280×175 карти, 20px gap, 8 видими наведнъж.

12 колони · gutter 16px · outer 96px

Типография — Manrope

Hero / display · 72 / 80

Всичко в твоята орбита

Page title · 48 / 56

Всичко в твоята орбита

Section title · 32 / 40

Всичко в твоята орбита

Card title · 20 / 28

Всичко в твоята орбита

Body · 18 / 28

Всичко в твоята орбита

Meta · 14 / 20

Всичко в твоята орбита

Цветова система

background

#0B1020

surface

#1A2236

surface-2

#222B41

foreground

#F3F6FB

muted

#A4AEC2

orbit

#FFA94D

orbit-glow

#FFCB7A

cosmic

#7C9BFF

live

#FF4D4D

success

#34D399

warning

#FBBF24

danger

#F87171

Motion

Focus enter / scale: 120ms ease-out.
Rail scroll snap: 240ms ease-in-out.
Player overlay fade in/out: 200ms.
Без bouncy spring анимации — телевизорът не е играчка.
„Намали движенията" уважава prefers-reduced-motion.

Accessibility checklist (WCAG 2.2)

Минимум 4.5:1 контраст за основен текст, 7:1 за основни заглавия

Focus visible на всеки interactive елемент

Субтитри с настройка на размер, фон и език

Аудио описание за незрящи зрители

Без auto-play звук при boot

Spatial navigation чрез D-pad

Скрийн-рийдър етикети за всички бутони

Режим Намали движенията

Copy насоки (BG)

Да

„Гледай сега"
„От начало"
„Запиши"
„Няма връзка. Опитай отново →"

Не

„НАТИСНИ ТУК ЗА ВЪЗПРОИЗВЕЖДАНЕ"
„Изпълни action restart_playback"
„Error 0xC00D36C4"
„Моля, опитайте отново по-късно"

Маршрути на прототипа

/Splash + Кой гледа?/homeНачало с hero и rails /liveEPG (програмен справочник)/live/$channelIdNow/Next + програма за деня /vod/$assetIdDetail page /player/$assetIdPlayer + overlay + multiview /searchУниверсално търсене + voice /libraryWatchlist, downloads, recordings /settingsПрофили, parental, achievement /error/offlineГрешка / empty / loading