Каждый год выходят свежие подборки трендов с разборами о том, что будет актуально в новом году. Читая подобного рода обзоры и статьи, мало кто задумывается над тем, что уже вышло из моды и почему “вот это” стало актуальным. Анализ текучести трендов намного важней, чем просто отслеживание. Когда мы анализируем и задаем вопросы: Почему так получилось?…
В Material Design цвет привлекает внимание к определенным элементам на экране. Когда цвет элемента контрастирует с его окружением, тогда этот элемент выделяется, поэтому пользователи могут подумать, что он важен. Поскольку цветовые темы варьируются — от насыщенных и ярких до монохромных или приглушенных — существуют различные способы показать то, какие элементы имеют большее значение. Например, черные…
Текст на цветном фоне Черный текст рекомендуется использовать на светлом фоне, а белый-на темном. Если приложение имеет как светлую, так и темную темы, то убедись, что текст контрастный на каждой теме. Цветные фоны или типографика дополнительно изменяют правила, касающиеся непрозрачности текста и различных состояний текста. Использование прозрачности для тексте Правильно: Читабельность сохраняется при использовании прозрачности…
Базовый цвет для списков и прочих поверхностей, таких как нижний список действий (англ. bottom sheets), боковая навигационная панель (navigation drawer), различные меню, диалоговые окна и карточки — белый. Эти компоненты конечно же могут включать и другие цвета для создания контраста между другими поверхностями. Контраст просто может явно показать края у поверхности, чтобы показать высоту например…
Вирджил Абло и TASCHEN выпустили книгу с претенциозным названием ICONS, которая представляет собой ретроспективу коллаборации в линии кроссовок Nike x Off White. Успех совместных коллекций утвердил Вирджила Абло в статусе одного из самых влиятельных партнеров Nike за всю историю бренда. Наверное, поэтому пары из коллаборации совсем не за-зорно называть иконами. ICONS показывает динамичное закулисье творческого…
Брейкпоинт или контрольная точка — это диапазон заранее определенных размеров экрана, которые имеют требования к макету. В конкретном брейкпоинте сетку макета, как и сами его элементы, можно настроить в соответствии с требованиями или ориентацией экрана (альбомная или портретная). Система брейкпоинтов Дизайн-система предоставляет брейкпоинты и структуру сеток для каждого устройства и его ориентации. В целом.ю макеты…
Обратная навигация нужна просто для перемещения назад по экранам приложения. Она может дать возможность пользователям перемещаться как по недавно посещенным экранам, так и к самому верхнему уровню приложения. Обратная навигация (по хронологии) Обратная хронологическая навигация перемещает пользователя между 2 недавно посещенными экранами. Она может перемещать пользователей между экранами внутри одного приложения, так и между 2…
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь. Работа с пространством осуществляется за счет базовой сетки, направляющих, прогрессивной шкалы отступов, работы с соотношением…
Когда плотность компонента увеличивается, отступы и выравнивание остаются неизменными, но сам размер изменяется. Отступы. Не меняй отступы компонента при увеличении его плотности. Отступы компонентов влияют на высоту, а вот уменьшение отступов может негативно повлиять на взаимодействие с пользователем. Размер. На картинке показано то, как меняется высота при увеличении плотности компонентов. Выравнивание. Используй выравнивание по центру.…
Наложение Когда UI меняется, тогда компонент может быть перекрыт другими элементами, которые будут его закрывать. В этой ситуации его позиция и размеры остаются неизменными. Обрати внимание: контентная область перекрывается боковой панелью навигации (сайдбаром), но сама область не сдвигается, а элементы остаются в исходных размерах. Компоненты могут адаптироваться в зависимости от размера экрана и типа устройства,…
