Какие существуют стандарты UI?qa-14

Основные категории UI-стандартов

1. Общепризнанные гайдлайны платформ

Apple Human Interface Guidelines:

  • Четкие правила для iOS/macOS приложений
  • Концепции ясности, уважения к пользователю и глубины
  • Пример:
// Рекомендуемый отступ по HIG
let button = UIButton()
button.contentEdgeInsets = UIEdgeInsets(top: 12, left: 16, bottom: 12, right: 16)

Material Design (Google):

  • Система компонентов для Android и веба
  • Принципы материальности, смелое/графическое/осмысленное оформление
  • Стандартные elevation values (z-индексы)

2. Международные стандарты доступности

WCAG 2.2 (Web Content Accessibility Guidelines):

  • 4 принципа: воспринимаемость, управляемость, понятность, надежность
  • Уровни соответствия: A, AA, AAA

Section 508:

  • Требования для государственных сайтов США
  • Особые требования к контрастности и навигации

3. Технические стандарты

ISO 9241 (Ergonomics of Human-System Interaction):

  • Часть 110: Принципы диалога
  • Часть 125: Визуальное представление информации

W3C ARIA (Accessible Rich Internet Applications):

  • Стандарты для динамического контента
<!-- Пример ARIA-разметки -->
<button aria-label="Close" aria-expanded="false">×</button>

4. Отраслевые стандарты

Fiori Design (SAP):

  • Для enterprise-решений
  • Консистентность в сложных бизнес-процессах

IBM Carbon:

  • Для B2B и аналитических систем
  • Особые требования к таблицам и визуализации данных

Критерии проверки UI по стандартам

  1. Размеры и отступы:

    • Минимальный размер кликабельных элементов (48dp)
    • Стандартные отступы (8px grid system)

  2. Цвета и контрастность:

    • Минимальное соотношение 4.5:1 для текста (WCAG AA)
    • Цветовая слепота (protanopia, deuteranopia проверки)

  3. Типографика:

    • Минимальный размер шрифта 16px для body text
    • Line height 1.5× от размера шрифта

  4. Интерактивные элементы:

    • Время отклика <1с
    • Видимые состояния (hover, active, focus)

Инструменты для проверки соответствия

// Пример автоматизированной проверки контраста
function checkContrast(foreground, background) {
    return calculateContrastRatio(foreground, background) >= 4.5;
}

  1. Автоматизированные:

    • Axe, WAVE (доступность)
    • Storybook для проверки компонентов

  2. Ручные:

    • Color Contrast Analyzer
    • Screen readers (NVDA, VoiceOver)

Особенности мобильных стандартов

  • Мишени для касаний: 48×48dp минимум
  • Жесты: Стандартные swipe/pan направления
  • Безопасные зоны: Учет вырезов и округлений экрана
// Проверка безопасной зоны в Android
ViewCompat.setOnApplyWindowInsetsListener(view) { v, insets ->
    val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
    v.updatePadding(bottom = systemBars.bottom)
}

Резюмируем

  1. Современные UI-стандарты охватывают:

    • Визуальный дизайн
    • Интерактивность
    • Доступность
    • Платформенную специфику

  2. QA-инженер должен:

    • Знать релевантные стандарты для продукта
    • Проверять как автоматизированно, так и вручную
    • Учитывать особые требования (a11y, локализация)

  3. Ключевые документы для изучения:

    • Apple HIG
    • Material Design
    • WCAG 2.2
    • ISO 9241-110

Вопросы

Собеседования