10 бесплатных пользовательских интерфейсов для CSS и JavaScript

Цель онбординга — познакомить новых пользователей с интерфейсом. Это происходит во многих разных стилях, и нет правильного способа сделать это. Но если вы изучите, как сайты и приложения проводят адаптацию, вы сможете подобрать идеи для своей работы.

А благодаря этим бесплатным пользовательским интерфейсам для CSS и JavaScript у вас будет множество идей, которые предлагают как вдохновение, так и фрагменты кода, которые помогут вам начать работу.

1. Карусельные слайды

Онбординг с вращающейся каруселью очень популярен на мобильных устройствах, где пространство на экране ограничено. Но этот эффект может работать так же хорошо на веб-сайтах, где вам нужно быстро донести информацию.

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

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

2. Реагируйте на ежедневный пользовательский интерфейс

В качестве простого практического дизайна Джек Оливер создал эту ручку пользовательского интерфейса React Daily с нуля. И это один из самых изящных способов адаптации, которые я когда-либо видел.

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

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

3. Вводные экраны

Эта ручка имеет не только невероятный интерфейс для адаптации, но и настраиваемые анимации для загрузки.

Разработчик Джефф Хэм отлично разбирается в интерфейсе и создал этот безупречный начальный экран. Он использует JavaScript для создания анимации «следующий экран» и событий переключения для кликов/нажатий пользователя.

Одним приятным дополнением к этому интерфейсу является синяя кнопка «Далее» внизу. Это позволяет пользователю продвигаться вперед экран за экраном с большим CTA на видном месте. Могу поспорить, что это увеличит общее количество людей, которые конвертируются, и повысит качество опыта в целом.

4. Доска

Этот фрагмент Boardal довольно уникален, поскольку его нечасто увидишь.

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

Обратите внимание, что это лучше всего работает на рабочем столе, потому что он основан на модальном эффекте (не идеально подходит для небольших экранов).

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

5. Экскурсия с гидом

Обычно онбординг считается пошаговым процессом, знакомящим пользователя с новыми страницами и функциями. Но лично я нахожу экскурсии гораздо полезнее.

Если вам нужен простой фрагмент для начала, то эта экскурсия идеальна. Он основан на компонентах Bootstrap и использует небольшие всплывающие подсказки с кнопками «Далее» для продвижения по туру.

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

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

6. Материальный тур

Одним из альтернативных методов тура является автоматический тур, который выделяет определенные функции.

Лучший пример, который я нашел, — это ручка, созданная Грегором Адамсом. Он основан на руководящих принципах материалов и использует выделенные круги для демонстрации частей страницы. Этот метод идеален, если у вас очень сложные интерфейсы с большим количеством функций.

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

Я знаю, что это не подойдет для всех веб-сайтов, но если вам нравится интерфейс, я настоятельно рекомендую попробовать его.

7. Адаптация Android-приложения

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

Это руководство по адаптации от Мэта Суэйнсона — небольшой, но красноречивый пример того, что можно сделать с приложениями для смартфонов.

Он основан на модели Android, но это, конечно, не единственный стиль, который вы можете использовать. Мне нравится, как он поддерживает встроенное смахивание, которое работает даже в мобильных веб-браузерах.

Кроме того, небольшой индикатор прогресса вверху — приятный штрих. Определенно простая начальная страница, но ее стоит сохранить, если вы ищете вдохновение.

8. Ионное вступление

С Ionic можно многое сделать, и эта ручка — отличный пример.

Разработчик Клиффорд Фахардо создал вводную часть Ionic на борту, работающую исключительно на платформе JavaScript. Он поддерживает все мобильные взаимодействия, такие как касания, пролистывания, и даже поддерживает варианты двойного касания, если вам нужна эта функция.

Ionic в основном используется для разработки мобильных приложений, и он также очень хорошо работает для мобильных веб-сайтов. Я не могу сказать, что этот бортовой экран подойдет каждому веб-сайту, но это хороший выбор, если более 50% вашей аудитории приходят с мобильных устройств.

9. Вертикальная форма

С легкой желейной анимацией пользовательского интерфейса и очень простым дизайном эта вертикальная форма — уникальное удовольствие.

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

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

10. Подсказка с гидом

Вот еще один пример экскурсии, но в нем используется полное поле всплывающей подсказки, фиксированное на странице.

Если вы посмотрите фрагмент, вы увидите, что он не встроен в какой-либо конкретный интерфейс. Скорее это просто всплывающая подсказка с советами и шагами для пользователя.

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