Общие элементы веб-сайтов
Меню

Общие элементы веб-сайтов

Опубликовано: 4 ноября, 2023 Обновлено: 21 апреля, 2024 Тестирование ПО

Общие элементы веб-сайтов

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


Распространенные элементы веб-сайтов

Изображение Герой (англ. Hero Banner)

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

Пример изображения "Герой"

Пример веб-страницы, содержащей изображение герой

Баннер (англ. Banner)

Цифровая реклама, отображаемая в верхнем, нижнем колонтитуле или боковых панелях веб-сайтов.

Пример горизонтального баннера 600х90

Пример веб-страницы, содержащей баннер

Карусель (англ. Carousel)

Слайд-шоу для циклического просмотра серии изображений или любого визуального контента.

Пример слайд-шоу (карусель)

Пример веб-страницы, содержащей карусель

Навигация (англ. Navigation)

Позволяет пользователям переходить из одного раздела веб-сайта в другой.

Пример адаптивной навигационной боковой панели

Пример веб-страницы, содержащей навигационную панель

Гамбургер-меню (англ. Hamburger Menu)

Используется для экономии места на экране и обозначает скрытое меню.

Пример свернутой боковой панели навигации, содержащей иконку "гамбургер-меню"

Пример веб-страницы, содержащей гамбургер-меню

Хлебные крошки (англ. Breadcrumb)

Тип навигации, который показывает местоположение пользователя на веб-сайте.

Пример навигации "Хлебные крошки"

Пример веб-страницы, содержащей хлебные крошки

Всплывающее окно (англ. Pop-up) 

Небольшое окно, которое появляется поверх веб-страниц.

Пример всплывающего окна (Pop-Up)

Пример веб-страницы, содержащей всплывающее окно

Кнопка-переключатель (англ. Toggle Button)

Позволяет пользователю менять настройку между двумя состояниями.

Пример кнопки-переключателя

Пример веб-страницы, содержащей кнопку-переключатель

Чекбокс (англ. Checkbox)

Небольшое интерактивное поле, которое пользователь может переключать, указывая положительный или отрицательный выбор.

Пример Чекбокса

Пример веб-страницы, содержащей чекбокс

Текстовое окно/текстовое поле (англ. Textbox/Text Field)

Раздел или объект на странице, который позволяет пользователю вводить текст.

Пример текстового поля

Пример веб-страницы, содержащей текстовое поле

Раскрывающееся меню/список (англ. Drop-down menu/list)

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

Пример выпадающего навигационного меню

Пример веб-страницы, содержащей навигационное выпадающее меню

Радиокнопка (англ. Radio Button)

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

Пример Радиокнопки

Пример веб-страницы, содержащей радиокнопки

Вкладки - Табы (англ. Tabs)

Элемент навигации, позволяющий разместить несколько представлений в одном окне.

Пример Табов

Пример веб-страницы, содержащей табы

Нижний колонтитул - Футер (англ. Footer):

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

Пример элемента нижнего колонтитула (Footer)

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

 

Поделиться ссылкой

Похожие статьи