Пиктограммы становятся языком, понятным пользователям любой культуры. В этой статье мы разберёмся,
как древние рунические символы могут быть адаптированы под современные мобильные приложения, сохраняя
свою сакральность и функциональность.
Почему именно руны?
- Узнаваемость. Упрощённые геометрические формы рун легко читаются на маленьких экранах.
- Культурный слой. Для аудитории, интересующейся мифологией, викингами или фэнтези, руны создают эмоциональную связь.
- Минимализм. Отсутствие мелких деталей позволяет сохранять читаемость при масштабировании 16×16 px.
Краткий ликбез: основные рунические системы
Скандинавские руны (Старший Футарк)
Старший Футарк состоит из 24 знаков. Для UI-пиктограмм мы берём только их скелетные контуры,
убирая засечки и сглаживая углы, чтобы соответствовать гайдлайнам Material Design и Human Interface Guidelines.
| Руна | Название | Типичное значение | UI-семантика |
|---|---|---|---|
| ᚠ | Феху | Богатство, изобилие | Кошелёк, покупки, премиум-функции |
| ᚢ | Уруз | Сила, энергия | Заряд батареи, спорт-режим |
| ᚦ | Турисаз | Защита | Безопасность, двухфакторная авторизация |
| ᚨ | Ансуз | Общение, речь | Чат, уведомления, почта |
Англосаксонские и континентальные руны
Добавляют 9–12 дополнительных символов («графических вариантов»). Однако в мобильных интерфейсах
их используют реже, чтобы не перегружать набор и не путать пользователя.
Адаптивный дизайн: как руны превращаются в пиктограммы
Шаг 1. Геометрическое упрощение
Изначальная руна ᚲ (Кено) имеет «<»-образную форму. В мобильном наборе она превращается в стилизованный «шеврон» без внутренних перекладин: 〈. Это позволяет:
- Уменьшить вес линии до 2 px для Retina-дисплеев;
- Сохранить угол 45° для консистентности иконографии;
- Исключить визуальный конфликт с системной стрелкой назад.
Шаг 2. Квадратная сетка 24×24 px
Каждая руническая пиктограмма строится в квадратной сетке с базовым модулем 2 px.
Это обеспечивает целочисленное позиционирование на любом разрешении и избавляет от полупикселей.
Шаг 3; Сглаживание и скругление
Острые углы рун (например, ᛉ — Альгиз) скругляются до радиуса 1 px, чтобы соответствовать
современному «дружелюбному» стилю безопасных интерфейсов.
Практические примеры использования
Финансовое приложение: руна Феху (ᚠ)
Сценарий: Кнопка «Пополнить счёт».
Решение: Упрощённая ᚠ повёрнута на 90° против часовой стрелки, образуя ромб. В сочетании с зелёным градиентом
символизирует рост капитала и легко узнаётся в тёмной и светлой теме.
Фитнес-трекер: руна Уруз (ᚢ)
Сценарий: Индикатор уровня энергии.
Решение: Вертикальный штрих ᚢ анимированно «растёт» вверх, заполняя цветом от тёмно-красного до ярко-синего,
демонстрируя рост уровня stamina.
Мессенджер: руна Ансуз (ᚨ)
Сценарий: Значок голосового сообщения.
Решение: Стильная горизонтальная «вилка» ᚨ превращается в динамическую волну, подстраиваясь под длительность
аудио в реальном времени.
Цветовая палитра и доступность
- Чистый контраст. WCAG 2.2 AA ≥ 4.5:1 для основного цвета руны на фоне.
- Семантические цвета. Феху — зелёный (#2E7D32), Турисаз, синий (#1976D2), Уруз, оранжевый (#F57C00).
- Тёмная тема. Используем 80 %-ную версию цвета, чтобы сохранить читаемость без излишней яркости.
Типографика и сочетание с текстом
Рунические пиктограммы работают как моноширинные элементы в ряду с текстом. Для заголовков применяем шрифт
Inter или Roboto, а руна встраивается как inline-иконка высотой 1.2 em, выравниваясь по базовой линии.
Лицензионные и культурные нюансы
- Авторские права. Упрощённые геометрические формы не охраняются как изобразительные товарные знаки,
но проверьте локальные законы о символике.
- Культурная чувствительность. Избегайте рун, ассоциируемых с неонацистской символикой (например,
искажённую ᛋ — «Совило»). - Локализация. В азиатских рынках руны воспринимаются как «экзотический декор», поэтому добавьте
подпись на английском/китайском рядом со значком, чтобы избежать недоразумений.
Инструменты и ресурсы
- Figma-компоненты: готовый набор «Runes UI Kit» (24/48/96 px, SVG-экспорт).
- Шрифты: RunePro Sans (переменный вес 200–900), Norse Code (декоративный).
- Плагины: «Runic Glyph Generator» для Sketch и XD, «RuneScaler» для автоматического масштабирования.
Чек-лист перед публикацией
- Проверить читаемость на 1× и 2× разрешениях.
- Прогнать символы через скринридеры: aria-label соответствует значению руны.
- Посмотреть на символы при daltonism-фильтрах (Protanope/Deuteranope).
- Получить одобрение UX-писателя и лингвиста — нет нежелательных ассоциаций.
Рунические пиктограммы — это не просто стилистический gimmick, а функциональный и семантически насыщенный
инструмент. При грамотной адаптации они способны за считанные миллисекунды донести сложный смысл,
создать эмоциональную связь с аудиторией и выделить продукт на фоне конкурентов. Главное — сохранять
уважение к культуре и использовать руны как язык, а не как декоративный штамп.