Коктейл карточкалары
Ар бир карточкада даам профили, тапшырма жана прогресс көрсөткүчү жайгашкан.
Интерфейс сүрөттөлүшү
Скриншотторду жүктөөнүн ордуна биз интерфейсти текст түрүндө сүрөттөйбүз. Көлөкөлүү фон, жаркын акценттик түстөр жана чоң шрифттер колдонулат. Прогресс-индикаторлор, шейкер жана меню блоктору модулдук тартипте жайгашкан.
Мобилдик түзмөктөрдө навигация бургер аркылуу ачылып, бөлүмдөр вертикалдуу тизилет. Планшет режиминде контент эки колонкага бөлүнүп, оюнчу шейкер/мини-ойун жана тексттик сценарийлерди параллель окуй алат.
Башкы экранда динамикалык фон бар: радиалдык градиент окуянын тонун көрсөтүп турат. Төмөн жагында «статус тилкеси» жайгашкан — анда акыркы тапшырма жана таймер өзгөрүп турат. Тексттик карточкалар жалпак, бирок чийки линиялар менен бөлүнгөн, ошондуктан мазмунун окуу жеңил.
Элементтер
Даам тандоо компоненттери
Үч баскычтан турган блок оюнчudan туура даамды тандоону талап кылат.
Оюн тапшырмалары
Миссиялар тексттик сүрөттөмө катары көрсөтүлүп, чекиттик тизмектер менен толукталат.
UI сценарийлери
Колдонуучу жарык/кара теманы тандоодо интерфейс дароо адаптацияланып, шрифт өлчөмдөрү сакталат.
Туура жооп болгондо тексттик билдирүү жана прогресс индикатору жаңыланат, ал эми катада кеңеш чыгат.
Меню элементтери ар дайым окулуштуу болушу үчүн фон жана отступтар автоматтык түрдө өзгөрөт.
Прототиптөө процесси
Интерфейс Adobe XD жана Figmaнын тексттик диаграммалары аркылуу моделденет. Команда ар бир экранды блокторго бөлүп (хедер, контент, футер, оюн зонасы), анан QA сценарий аркылуу текшерет: «бургерди бас», «мини-ойунду башта», «форманы толтур» ж.б. Ар бир скрипт документке катталат.
Прототип QA тарабынан бекитилгенден кийин гана HTML/CSS/JS структурасы жаңыртылат. Бул процесс колдонуучулардын бардык платформаларда туруктуу тажрыйба алуусун камсыз кылат.