Интерфейс: набор компонентов — фильтры и графики
Макет интерфейса: фильтры (чипы, ползунки, тумблеры, плитки) и графики. Переменные оживляют элементы.
Нажмите «Запустить». Тела движутся по законам физики: гравитация, трение, упругость.
Что показывает опыт
Это не опыт по физике, а образец дизайна интерфейса: все компоненты нарисованы обычными фигурами и текстом. Пять переменных кадра привязаны к свойствам — ползунок громкости двигает бегунок, «Количество» меняет число в счётчике, «Переключатель» включает тумблер, «Выравнивание» переставляет точку в списке, «Нагрузка» растягивает серые столбцы.
Как провести
- Подвигайте переменные под кадром: бегунок громкости, число в счётчике, тумблер, точка выбора и столбцы реагируют сразу.
- Откройте пример в редакторе и выделите любой чип или плитку — это обычный прямоугольник с текстом, его цвет, скругление и размер можно менять.
- Соберите из плитки или чипа компонент и размножьте его экземплярами, чтобы менять оформление всего набора сразу.
Вопросы для обсуждения
- Какие элементы здесь повторяются? Что можно сделать компонентом, чтобы не рисовать их заново?
- Чем выбранный чип отличается от обычного: цветом, контрастом текста или обводкой?
Объяснение
Интерфейс держится на небольшом наборе повторяющихся форм: «таблетки», плитки, переключатели и кольца. Состояние (выбрано, включено, недоступно) показывают цветом, обводкой и контрастом, а размеры подчиняются единой сетке отступов.
Повторите дома
Нарисуйте на бумаге экран любимого приложения и подпишите, какие элементы повторяются и как выглядит каждое состояние.
Что изменить в редакторе
- Перекрасьте все синие элементы в зелёный: поменяйте цвет у одного чипа и скопируйте оформление на остальные.
- Добавьте переменную и привяжите к ней ширину цветной полосы в блоке «Графики».