Files
wow-design-wiki/concepts/apple-hig-principles.md

3.1 KiB
Raw Permalink Blame History

title, created, updated, type, tags, sources, confidence
title created updated type tags sources confidence
Apple HIG Design Principles 2026-06-02 2026-06-02 concept
web-design
ux
https://developer.apple.com/design/human-interface-guidelines/
https://applemagazine.com/apple-human-interface-blueprint/
high

Apple Human Interface Guidelines — Ключевые принципы

3 столпа философии дизайна Apple

Clarity (Ясность)

Контент — король. UI-элементы не должны конкурировать с контентом.

  • Чистая типографика, достаточный размер шрифта
  • Минимум декоративных элементов
  • Иконки должны быть простыми и узнаваемыми
  • Цвет используется осмысленно — для акцентов, а не украшения

Deference (Уважение)

Интерфейс служит контенту, а не наоборот.

  • Прозрачные панели, blur-эффекты создают ощущение контекста
  • UI-элементы исчезают, когда не нужны
  • Анимация лишь поддерживает взаимодействие, не доминирует

Depth (Глубина)

Визуальная иерархия через слои и движение.

  • Параллакс, тени, наслоение создают иллюзию трёхмерности
  • Реалистичное движение помогает понимать, откуда пришёл элемент
  • Navigate через жесты (swipe back) — физическая метафора

Практические правила Apple HIG

  1. Aesthetic Integrity — визуальный стиль соответствует функции (игровой UI ≠ корпоративный UI)
  2. Consistency — стандартные жесты, паттерны, иконки по всей платформе
  3. Direct Manipulation — пользователь управляет объектами напрямую (слайдер, перетаскивание)
  4. Feedback — каждое действие получает отклик
  5. Metaphors — виртуальные объекты ведут себя как физические (перелистывание страниц)
  6. User Control — пользователь инициирует действия, а не система

Применение к веб-дизайну (не iOS)

  • Clarity: использовать крупные заголовки, чёткую типографику, минимум UI-шума
  • Deference: контентные секции с прозрачными разделителями, CTA под контент
  • Depth: плавные page-transitions, hover-эффекты с тенью, cascade-слои
  • Aesthetic Integrity: стиль под цель — для лендинга больше пространства, для магазина — плотнее