AnmiTali's Human Interface Guide

Комплексная дизайн-система для создания гармоничных, интуитивных интерфейсов, основанная на принципах минималистичного органического дзена.

AnmiTali's HIG представляет собой современный подход к проектированию пользовательских интерфейсов, который сочетает западный минимализм с восточной философией дзен и природной органичностью. Данная система направлена на создание интерфейсов, которые не только функциональны, но и эстетически привлекательны, успокаивают пользователя и способствуют продуктивному взаимодействию.

Открытый исходный код: AnmiTali's HIG распространяется под лицензией CC0 1.0 Universal, что обеспечивает полную свободу использования, модификации и распространения без каких-либо ограничений.

Философия дизайна

Основа AnmiTali's HIG лежит в синтезе трех фундаментальных подходов к дизайну, каждый из которых вносит свой вклад в создание целостного пользовательского опыта.

Минималистичный подход

Минимализм в нашем понимании означает не просто удаление элементов, а осознанный выбор каждого компонента интерфейса. Каждый элемент должен служить определенной цели и способствовать достижению пользовательских целей. Этот подход помогает снизить когнитивную нагрузку и позволяет пользователям сосредоточиться на главном.

Органическая естественность

Природные формы и плавные переходы создают ощущение естественности взаимодействия. Скругленные углы, мягкие тени и плавные анимации имитируют то, как мы воспринимаем объекты в реальном мире, делая цифровой интерфейс более интуитивным и комфортным.

Дзен-эстетика

Принципы дзен привносят в дизайн баланс, гармонию и спокойствие. Интерфейс должен не только решать задачи, но и создавать ощущение покоя и умиротворения. Это достигается через тщательно продуманную цветовую палитру, правильные пропорции и деликатные переходы между состояниями.

Основные принципы

Принцип минимальной достаточности

Каждый элемент интерфейса должен быть необходимым и достаточным для выполнения пользовательских задач. Избегаем декоративных элементов, которые не несут функциональной нагрузки.

Принцип визуальной иерархии

Информация организована таким образом, чтобы пользователь мог легко понять порядок важности элементов. Это достигается через размер, цвет, расположение и контраст.

Принцип согласованности

Все элементы системы должны работать в гармонии друг с другом. Единообразие в использовании цветов, типографики, отступов и поведения создает предсказуемый пользовательский опыт.

Принцип доступности

Интерфейсы должны быть доступны для всех пользователей, включая людей с ограниченными возможностями. Это включает достаточный контраст, поддержку клавиатурной навигации и семантическую разметку.

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

Цветовая палитра AnmiTali's HIG основана на спокойных, приглушенных тонах, которые способствуют концентрации и снижают утомляемость глаз. Система построена на монохромной основе с одним акцентным цветом.

Основные цвета

BG
Основной фон
#FFFFFF
Фон страниц и карточек
SEC
Вторичный фон
#F8F9FA
Альтернативные секции
TEXT
Основной текст
#2D3748
Заголовки и основной контент
SEC
Вторичный текст
#718096
Описания и подписи

Акцентные цвета

ZEN
Природный зеленый
#10B981
Основной акцент, кнопки действий
SUC
Успех
#059669
Подтверждения и положительные состояния
WAR
Предупреждение
#D97706
Предупреждающие сообщения
ERR
Ошибка
#DC2626
Сообщения об ошибках

Использование цветов

Элемент Цвет HEX Применение
Заголовки H1-H3 Основной текст #2D3748 Максимальная читаемость
Основной текст Вторичный текст #718096 Комфортное чтение
Ссылки Природный зеленый #10B981 Выделение интерактивных элементов
Границы Светло-серый #E2E8F0 Деликатное разделение

Типографика

Типографическая система AnmiTali's HIG построена на шрифте Inter, который обеспечивает отличную читаемость как в печатных, так и в цифровых медиа. Система размеров основана на модульной шкале с коэффициентом 1.25.

Шрифтовая система

/* Основной шрифт */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Моноширинный шрифт для кода */ font-family: 'Monaco', 'Menlo', 'Consolas', monospace;

Типографическая шкала

H1 - 2.25rem (36px) / font-weight: 600

Заголовок первого уровня

H2 - 1.875rem (30px) / font-weight: 600

Заголовок второго уровня

H3 - 1.5rem (24px) / font-weight: 500

Заголовок третьего уровня

Body - 1rem (16px) / font-weight: 400

Основной текст документа. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small - 0.875rem (14px) / font-weight: 400

Мелкий текст для подписей и дополнительной информации.

Правила использования

Высота строки: Для основного текста используйте line-height: 1.6, для заголовков - 1.2. Это обеспечивает оптимальную читаемость и визуальный ритм.

Компоненты интерфейса

Система компонентов AnmiTali's HIG включает все необходимые элементы для создания современных пользовательских интерфейсов. Каждый компонент разработан с учетом принципов доступности и согласованности.

Кнопки

Варианты кнопок
/* Основная кнопка */ .btn-primary { background: var(--accent); color: white; padding: 12px 24px; border-radius: 12px; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4); }

Формы

Элементы форм

Карточки

Пример карточки

Заголовок карточки

Описание содержимого карточки с мягкими тенями и скругленными углами согласно принципам органического дизайна.

Уведомления

Типы уведомлений
Информационное сообщение для пользователя
Операция выполнена успешно
Внимание: требуется дополнительное действие

Анимации и переходы

Анимации в AnmiTali's HIG служат для создания плавного и естественного пользовательского опыта. Все движения должны быть деликатными и целенаправленными, избегая резких или отвлекающих эффектов.

Временные функции

Тип анимации Длительность Функция easing Применение
Микровзаимодействия 200ms ease-out Hover, focus состояния
Модальные окна 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) Появление/скрытие
Переходы страниц 400ms ease-in-out Навигация
Загрузка 1200ms ease-in-out Индикаторы прогресса

Рекомендуемые CSS-переходы

/* Универсальный переход для интерактивных элементов */ transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Переход для трансформаций */ transition: transform 0.2s ease-out; /* Переход для изменения цвета */ transition: color 0.2s ease, background-color 0.2s ease;
Принцип умеренности: Избегайте чрезмерного использования анимаций. Каждая анимация должна служить конкретной цели: обратная связь, направление внимания или объяснение изменений в интерфейсе.

Система компоновки

Система компоновки AnmiTali's HIG основана на принципах пространственной гармонии и визуального баланса. Правильное использование пространства создает ощущение порядка и помогает пользователям легко воспринимать информацию.

Сетка отступов

Система отступов построена на базовом модуле 8px, что обеспечивает согласованность и предсказуемость в размещении элементов.

Размер Значение Применение
XS 8px Мелкие отступы внутри компонентов
S 16px Стандартные отступы между элементами
M 24px Отступы между группами элементов
L 32px Отступы между секциями
XL 48px Крупные структурные отступы
XXL 64px Отступы между основными блоками

Скругления углов

/* Система скруглений */ --radius-sm: 4px; /* Мелкие элементы */ --radius-md: 8px; /* Стандартные компоненты */ --radius-lg: 12px; /* Кнопки, карточки */ --radius-xl: 16px; /* Крупные блоки */ --radius-full: 50%; /* Круглые элементы */

Максимальная ширина контента

Для обеспечения оптимальной читаемости рекомендуется ограничивать ширину текстового контента:

/* Контейнеры контента */ .container { max-width: 1200px; /* Основной контейнер */ margin: 0 auto; padding: 0 24px; } .content-narrow { max-width: 768px; /* Для чтения */ }

Руководство по применению

Правильное применение принципов AnmiTali's HIG требует понимания не только технических аспектов, но и философии, лежащей в основе системы. Данный раздел содержит практические рекомендации по внедрению дизайн-системы.

Контрольный список качества

Цветовая схема

  • Используется ли монохромная основа с одним акцентным цветом?
  • Достаточен ли контраст между текстом и фоном (минимум 4.5:1)?
  • Применяются ли семантические цвета для состояний (успех, ошибка, предупреждение)?

Типографика

  • Соблюдается ли иерархия заголовков (H1 > H2 > H3)?
  • Используется ли рекомендуемая высота строки (1.6 для основного текста)?
  • Применяются ли правильные размеры шрифтов из типографической шкалы?

Компоненты

  • Имеют ли интерактивные элементы четкие состояния hover и focus?
  • Используются ли рекомендованные скругления углов (8-16px)?
  • Применяются ли мягкие тени вместо жестких границ?

Часто допускаемые ошибки

Избыточность декора: Добавление ненужных декоративных элементов нарушает принцип минимализма. Каждый элемент должен служить определенной цели.
Резкие переходы: Использование линейных анимаций или слишком быстрых переходов создает неестественное ощущение. Отдавайте предпочтение ease-out кривым.
Нарушение пространственного ритма: Использование произвольных отступов вместо системы модульных размеров создает визуальный хаос.

Внедрение системы

Успешное внедрение AnmiTali's HIG в проект требует последовательного подхода и понимания ключевых принципов системы. Данный раздел поможет интегрировать дизайн-систему в ваш рабочий процесс.

Начальная настройка

Для начала работы с системой рекомендуется создать базовый набор CSS-переменных:

:root { /* Цвета */ --bg-primary: #FFFFFF; --bg-secondary: #F8F9FA; --text-primary: #2D3748; --text-secondary: #718096; --accent: #10B981; --border: #E2E8F0; /* Отступы */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; /* Скругления */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; }

Этапы внедрения

Рекомендуется внедрять систему поэтапно, начиная с основных элементов и постепенно расширяя охват:

  1. Типографика и цвета - установите базовые стили для текста и цветовую схему
  2. Базовые компоненты - внедрите кнопки, поля ввода, карточки
  3. Анимации - добавьте плавные переходы и микровзаимодействия
  4. Сложные компоненты - реализуйте модальные окна, навигацию, формы
  5. Темная тема - добавьте поддержку альтернативной цветовой схемы

Инструменты разработки

Для эффективной работы с AnmiTali's HIG рекомендуется использовать следующие инструменты:

Категория Инструмент Назначение
Дизайн Figma, Sketch Создание макетов и прототипов
CSS PostCSS, Sass Препроцессинг и автоматизация
Контроль качества Stylelint, Prettier Форматирование и проверка кода
Документация Storybook, Docusaurus Документирование компонентов
Открытый исходный код: Полная документация и примеры кода доступны в репозитории github.com/AnmiTaliDev/hig под лицензией CC0 1.0.