Material Design на русском. Часть 5 — Работа над макетом
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь
В целом можно сказать следующее: консистентность в Material design создаётся за счет использования унифицированных компонентов, консистентных отступов, понятного визуального языка (тени, свет, принципы и т.д.), а также простой градации размеров экранов.
Принципы
Предсказуемость
Используйте интуитивно понятные и предсказуемые решения в макетах, чтобы дать пользователю консистентный опыт как в интерфейсе, так и в организации пространства.
Консистентность
Все макеты экранов приложения должны быть консистентными, поэтому используй сетки, ключевых направляющие и консистентные отступы.
Отзывчивость
Проектируя, думай о адаптивности и о том, как элементы на экране будут реагировать на ввод данных.
Про модули
Все макеты должны быть визуально сбалансированными. Большинство измерений выравниваются по сетке 8dp, которая затрагивает как отступы, так и общую компоновку.
Более мелкие компоненты, такие как иконки и типографика, могут выравниваться по сетке 4dp.
Либо все кратно 8dp, либо 4dp
Про отзывчивые сетки у макетов
В дизайн-системе есть целый раздел: «Responsive layout grid» — это руководство по размещению компонентов и элементов. Но в целом адаптивная сетка макетов просто адаптируется к размерам и ориентации экрана, обеспечивая согласованность между экранами.
Типичный макет состоит из: 1. Колонок. 2. Межколонников. 3. Внушних отступов от сетки
Как следить за обновлениями гайдлайна и переводом?
- Структуированный документ в Notion
- Официальные обновления Google на странице what’s new