• 7 минут чтения

• UX-дизайн, пользовательский интерфейс, интерактивный дизайн

• Поделись ТвиттерЛинкедин

CodePen стал игровой площадкой для разработчиков. Песочница, в которой вы можете построить все, что угодно вашему воображению. Практичные вещи, экспериментальные концепции — это сундук с сокровищами, который подпитывает ваши идеи. Мы немного покопались и нашли кое-что интересное Демонстрации пользовательского интерфейса и концепции, которые вы можете использовать и развивать: диалоговые и модальные окна, экраны регистрации и входа в систему, навигация и меню, ползунки и переключатели. Маленькие кусочки удовольствия, которые делают взаимодействие пользователя с веб-сайтом или приложением более приятным. Наслаждаться!

Дальнейшее чтение на SmashingMag:

• Красота несовершенства в дизайне интерфейса
• Дизайн пользовательского интерфейса — 12 полезных приемов
• Копируй, если умеешь: улучшаем свои навыки дизайна пользовательского интерфейса с помощью копирайтинга
• Иконки Material Design, вкусности и стартовые наборы
• Проектирование карточных пользовательских интерфейсов

Диалоговые и модальные окна

Непослушный диалог

Flappy Dialog Алекса Райта основан на концепции Dribbble Питера Мэйна. Диалоговое окно имеет две створки. Как только пользователь наводит курсор на одно из них, оно начинает двигаться, и как только он нажимает, все окно переворачивается вперед и исчезает. Интересный и забавный способ сделать окно и его содержимое более заметными, особенно для рутинных взаимодействий типа «Да» и «Нет», на которые пользователи обычно не обращают особого внимания.

Концепция уничтожения модального окна

Вопрос о том, хотите ли вы использовать это в реальном проекте или нет, может дать повод для множества дискуссий, но идея просто впечатляет: концепция уничтожения модального окна LegoMushroom. Как только пользователь закрывает модальное окно, оно разрывается на части. Удивительный эффект.

Модальный дизайн материалов

Ключевой частью модального окна Material Design от Ettrics является анимация, которая происходит, когда вы нажимаете кнопку, которая расширяет модальное окно. Кажется, что сама кнопка расширяется, но на самом деле это динамически добавляемая <div> который добавляется к кнопке и расширяется до размера модального окна. Как только модальное окно становится видимым, <div> скрыта. Умная.

Регистрация Вход

Интерактивная форма регистрации

Взгляд Риккардо Пазианотто на форму регистрации является новаторским и совсем не скучным или утомительным для пользователя. Он не предъявляет им полную форму с самого начала, а запрашивает необходимую информацию небольшими, удобоваримыми порциями. По сути, форма состоит из трех карт, которые накладываются друг на друга. Как только вы начнете печатать, маленький значок рядом с полем формы станет кнопкой со стрелкой, указывающей вверх. После щелчка поле формы переворачивается и представляет следующее поле. Красивое и захватывающее общение.

Интерактивная форма только для CSS

Демонстрация интерактивной формы Эммануэля Пиланде очень элегантна не только визуально, но и в отношении кода — она полностью создана с помощью CSS. Каждое поле формы представлено отдельно в виде одной длинной красной строки, сопровождаемой меткой поля и текстом-заполнителем. Нажатие Вкладка клавиша ведет к следующему полю. Элегантный.

Взаимодействие при регистрации материала

Существенное взаимодействие Шриканта Шетти при регистрации состоит из трех состояний — все они разработаны вокруг кнопки «Зарегистрироваться», — которые гармонично сочетаются друг с другом. Кнопка регистрации на экране регистрации превращается в форму регистрации; после заполнения формы и нажатия кнопки «Готово» кнопка превращается в круг и перемещается в правый нижний угол экрана профиля, где ей назначается новая роль. Бесшовное взаимодействие, воплощенное в жизнь Кайлом Лавери.

Компактный вход

Компактный вход от Бориса Борисова объединяет вход и регистрацию. Красный кружок «+» на экране входа скрывает форму регистрации, которая при нажатии расширяется, закрывая экран входа. Еще один приятный эффект: внешний вид кнопки «Перейти» меняется с очень тонкого светло-серого текста на белом фоне на жирный красный в зависимости от прогресса, достигнутого пользователем при заполнении формы. Энди Тран и Юсуф Бакир закодировали варианты этой концепции.

Ввод текста в дизайне материалов

Очень легкая демонстрация ввода текста принадлежит Бену Милдрену. Теги-заполнители в его полях формы перемещаются вверх и меняют цвет на input:focus. Как только пользователь начинает печатать, он полностью исчезает. Чисто и просто.

Навигация и меню

Меню фильтра

Меню фильтра скрывает параметры фильтра за кнопкой меню, но не так, как вы ожидаете. После нажатия кнопка меню превращается в кнопку закрытия, которая расширяется от центра круга, образуя внешний круг, в котором располагаются параметры фильтра. Гладкий и красивый.

Выпадающее меню на чистом CSS

Раскрывающееся меню Swanky Pure CSS от Jamie Coulter — прекрасное дополнение к любому интерфейсу, не поддерживающему JavaScript. Он использует метки меню для переключения анимации, которая показывает подменю. Сделано на чистом CSS.

CSS липкое меню

CSS Gooey Menu от Лукаса Беббера использует фильтры CSS и SVG для достижения эффекта, без JavaScript. Меню скрыто за кругом со значком гамбургера. Как только вы щелкнете по нему, круг выплюнет каплю, которая растворится и образует четыре круглых значка меню, аккуратно расположенных рядом друг с другом. Сам значок гамбургера становится значком «закрыть». Игровой эффект.

Пользовательский интерфейс папки «Входящие» CSS

Другим примером чисто CSS-совершенства является пользовательский интерфейс CSS Inbox Джейми Коултера. Как только пользователь нажимает на сообщение, оно открывается вправо, чтобы отобразить всю электронную почту; предварительный просмотр на исходном экране заменяется примечанием «Сейчас читаю». Хороший эффект, который можно было бы адаптировать для других целей навигации, например, для навигации по всей ширине.

Приложение с адаптивным меню

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

Ползунки и переключатели

Ползунок бюджета

Слайдер бюджета jQuery — долгожданная альтернатива тренду плоского дизайна. При перетаскивании ползунка трехмерная полоса заполняется цветом.

Плоские слайдеры на чистом CSS

Плоские ползунки Аны Тюдор полностью сделаны из CSS и немного напоминают аналоговый термометр. Простой, но стильный. Вдохновленные ее демонстрацией, также созданы отзывчивые ползунки Саймона Гёлльнера. Они имеют тонкий эффект роста активного тика и отображают числовое значение на стрелке.

Чистые переключатели CSS

Pure CSS Toggles Рафаэля Гонсалеса отличаются от тех, к которым мы привыкли. Его переключатели состоят из двух квадратов, и вместо известной анимации «переключателя», которая скользит с одной стороны на другую, его переключатели меняют состояние, переворачиваясь, как книжная страница, поворачиваясь на 180 градусов или скользя с одной стороны на другую, как гусеница. Также примечательно то, как Рафаэль использовал цвет для поддержки анимации: одна настройка — синяя, другая — красная, и когда вы переключаетесь с одного на другое, цвет постепенно переходит от синего к красному и от красного к синему соответственно.

Переключатель жидкости

Концепция жидкостного переключателя Леонардо Закура использует анимацию капли для перехода от одного состояния переключения к другому. Codearmada воплотила это в жизнь с помощью демо-версии Material Radio Button.

Переключатель дня и ночи на чистом CSS

CSS Day And Night Toggle — это забавный способ визуализации утреннего и вечернего времени. При установке на AM тумблер и его фон показывают солнце с голубым небом, при переключении на PM он трансформируется в луну со звездным небом.

Вы недавно наткнулись на вдохновляющую, инновационную или восхитительную демонстрацию пользовательского интерфейса? Дайте нам знать в комментариях ниже!