Окна и всплывающие элементы

Этой задачей я занимался всю прошедшую неделю. Всё началось довольно просто: нужно было создать виджеты для вывода снекбаров, тостов и модальных окон для нашей SDUI платформы.

Однако кажущаяся простота оказалась иллюзией и довольно быстро покинула чат, а по мере изучения проблемы задача начала обрастать нюансами.

Сначала была идея создать универсальный компонент, который в зависимости от настроек мог бы работать как тост, снекбар или модальное окно. Кроме того, планировалось сделать единую очередь для их отображения, чтобы если на клиент одновременно поступят, скажем, 3 тоста, 2 снекбара и 5 модальных окон, они не появлялись все сразу, а показывались поочередно в порядке приоритета.

Но вскоре выяснилось, что тосты могут быть как продуктовыми, так и системными. Если с продуктовыми всё было более-менее понятно, то системные тосты включали различные ошибки и разрывы соединения. Возник вопрос: что делать, если в момент показа модального окна происходит разрыв соединения, и нужно отобразить тост? Закрывать модальное окно? Ставить тост в очередь? Я решил поспрашивать коллег и в комьюнити, но оказалось, что в основном все использовали нативные всплывающие окна платформ и подобными впопросами так глубоко не задавались. Ну что ж, пришлось разбираться самостоятельно.

В первую очередь я пересмотрел всю работу со слоями и разработал общую схему для платформы (рисунок 1). В основу легло распределение z-index из старого доброго Bootstrap. После переработки получилось следующее:

🔘 Content — на картинке не подписан, но это самый нижний слой, отвечающий за отображение основного содержимого на экране.

🔘 Dropdown — слой для контекстных меню. В мобильных приложениях это редкость, но на всякий случай пусть будет.

🔘 Sticky — слой для закреплённых элементов. Предполагается использовать его для футеров, хедеров и таб-бара.

🔘 Fixed — самый верхний слой до бэкдропа, на всякий случай.

🔘 Backdrop — затемнение, перекрывающее контент при появлении модального элемента.

🔘 Modal — основной слой для шторок и модальных окон.

🔘 Popover — слой для онбордингов, контекстных меню и других всплывающих элементов с высоким приоритетом. Также сюда предполагается отправлять системные тосты.

🔘 Tooltip — слой для всплывающих подсказок.

В итоге получились два отдельных виджета: Banner и Window. Первый отвечает за тосты и снекбары, второй — за модальные окна. Очередь для них стала раздельной. Системным тостам разрешено образовывать стек с продуктовыми, но не более двух баннеров на экране одновременно (рисунок 2). Теперь осталось провести тщательное тестирование и выявить все возможные "а что если" ситуации. Однако, кардинальных изменений системы, надеюсь, уже не будет 🤞.

P.S. Да, кто-то обязательно спросит: "А почему нельзя использовать нативные диалоги?"
Ответ прост: в них нельзя передавать свою верстку, то есть наши любимые врапперы. А нам очень важна управляемость контента.

- - - -
#дизайнсистемы #SDUI #дизайн #uxui

🛫Канал: Мыслью по древу

Модели состояний. Часть1: Hover & Press.

Уже довольно давно я пишу большую статью о своём подходе к проектированию дизайн-систем: как я преобразую сущности в абстракции. Первая часть была посвящена рецептам компонентов, о которых я уже делал небольшой пост.

Вторая часть должна была затронуть работу с состояниями, но, как часто бывает с крупными замыслами, в условиях нехватки времени процесс затягивается. Поэтому я решил поделиться хотя бы частью материала, который уже подготовлен.

В этой части расскажу о работе с состояниями компонентов в дизайн-системах, а конкретно — о состояниях наведения и нажатия, как не рисовать их для каждого компонента, а проработать модель получения этих состояний один раз, и использовать по всей системе. Такой подход уже помог мне в нескольких дизайн-системах упростить работу с состояниями, сократить количество вариантов в Figma и повысить консистентность и управляемость.

Почти уверен, что существует ещё множество способов добиться аналогичных результатов, но я выбрал два: проверенный метод, проверенный, который не раз использовал, и другой более гибкий но сложный, который считаю потенциально интересным. Будет здорово, если в комментариях поделитесь, как подходите к этой задаче вы в своих дизайн-системах 😉

Также интересно, насколько удобен такой формат постов для чтения.

А я в следующей части расскажу о том, как работаю со свойством disabled.

- - - -
#дизайн #uxui #дизайнсистемы #длиннопост #состояния #figma

🛫Канал: UXFLOW • Сергей Мухин