Текст на цветном фоне Черный текст рекомендуется использовать на светлом фоне, а белый-на темном. Если приложение имеет как светлую, так и темную темы, то убедись, что текст контрастный на каждой теме. Цветные фоны или типографика дополнительно изменяют правила, касающиеся непрозрачности текста и различных состояний текста. Использование прозрачности для тексте Правильно: Читабельность сохраняется при использовании прозрачности…
Базовый цвет для списков и прочих поверхностей, таких как нижний список действий (англ. bottom sheets), боковая навигационная панель (navigation drawer), различные меню, диалоговые окна и карточки — белый. Эти компоненты конечно же могут включать и другие цвета для создания контраста между другими поверхностями. Контраст просто может явно показать края у поверхности, чтобы показать высоту например…
Брейкпоинт или контрольная точка — это диапазон заранее определенных размеров экрана, которые имеют требования к макету. В конкретном брейкпоинте сетку макета, как и сами его элементы, можно настроить в соответствии с требованиями или ориентацией экрана (альбомная или портретная). Система брейкпоинтов Дизайн-система предоставляет брейкпоинты и структуру сеток для каждого устройства и его ориентации. В целом.ю макеты…
Обратная навигация нужна просто для перемещения назад по экранам приложения. Она может дать возможность пользователям перемещаться как по недавно посещенным экранам, так и к самому верхнему уровню приложения. Обратная навигация (по хронологии) Обратная хронологическая навигация перемещает пользователя между 2 недавно посещенными экранами. Она может перемещать пользователей между экранами внутри одного приложения, так и между 2…
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь. Работа с пространством осуществляется за счет базовой сетки, направляющих, прогрессивной шкалы отступов, работы с соотношением…
Когда плотность компонента увеличивается, отступы и выравнивание остаются неизменными, но сам размер изменяется. Отступы. Не меняй отступы компонента при увеличении его плотности. Отступы компонентов влияют на высоту, а вот уменьшение отступов может негативно повлиять на взаимодействие с пользователем. Размер. На картинке показано то, как меняется высота при увеличении плотности компонентов. Выравнивание. Используй выравнивание по центру.…
Наложение Когда UI меняется, тогда компонент может быть перекрыт другими элементами, которые будут его закрывать. В этой ситуации его позиция и размеры остаются неизменными. Обрати внимание: контентная область перекрывается боковой панелью навигации (сайдбаром), но сама область не сдвигается, а элементы остаются в исходных размерах. Компоненты могут адаптироваться в зависимости от размера экрана и типа устройства,…
» class=»s eq er es» src=»https://miro.medium.com/fit/c/96/96/1*NogLs69DA2t7XdsWq-JtjA.png» width=»48″ height=»48″/>
Часто можно заметить, как дизайнеры пренебрегают воздухом в макете, а некоторые клиенты и вовсе не могут смириться с тем, что дизайны для них не заполнены на 100% графическим мусором.
Как же пустота, она же воздух, может помочь дизайнеру сэкономить место, донести правильные эмоции и смыслы до аудитории, а также помочь выстроить грамотный макет и расставить акценты? Обо всём по порядку.
1Самое простое — негативное пространство сэкономит место
На первой пикче пример сделанного мной логотипа с негативным пространством. В нём содержится 3 символа — буквы «ОС», сердечко и морда собачки. Негативное пространство тут позволило сэкономить место (все 3 знака размером с 1, вместо 3 отдельных знаков), что делает логотип лаконичным, удобным и не перегруженным.
2Пространство поможет в эмоциональной окраске
На второй пикче идущий человек намного меньше, чем пустое пространство вокруг него. Перевес в сторону пространства используется автором для того, чтобы подчеркнуть необъятность пустыни. Возможно, даже заложены рассуждения о ничтожности человека по сравнению с природой, но это не точно.
3Пространство грамотно разделит информацию и расставит акценты
На третьей пикче в макете выделено пустое пространство в центре, чтобы важная часть фонового изображения получила более важный акцент. Таким образом, сначала наше внимание привлекает фото (также из-за цвета, размера, положения и т.д.), потом большой заголовок помогает понять, о чём идёт речь, а другая информация по бокам в последнюю очередь дополняет всё сказанное и увиденное.
Чтобы выразить её, подпишись на мои блоги, для меня это очень важно. Чем больше читателей, тем больше мотивация делать контент чаще, лучше и качественнее. Обнял.
— Мой полезный ВК блог о дизайне с полезным контентом для дизайнеров и многим другим;
Суть в том что бы прийти к одинаковому отображению элементов интерфейса на экранах с различной плотностью. Потому что устройств очень и очень много и все они разные, а некоторые из них еще и «врут». Например, большой физический размер экрана не означает то, что на экране будет отображаться большая плотность. Также, не факт что заявленная плотность…
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь Material — это дизайн-система, которая была создана Google, чтобы помочь всем, кто заинтересован создавать высококачественные…
