Главное Авторские колонки Вакансии Образование
😼
Выбор
редакции
1 206 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Словарь заказчика: как понять, что говорят разработчики

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

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

Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.

b_5bfcf0b45a2cb.jpg

Radiobutton — позволяет пользователю выбрать одну опцию

b_5bfcf0b49e888.jpg

Select — позволяет пользователю выбрать одну опцию из выпадающего списка

b_5bfcf0b4be4aa.jpg

Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента.

b_5bfcf0b4e9808.jpg

Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную

b_5bfcf0b51ce28.jpg

Контент — текст, изображения, видео, то есть наполнение сайта.

b_5bfcf0b53974a.jpg

Popup — небольшое всплывающее окно в углу экрана.

b_5bfcf0b5589a3.jpg

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

b_5bfcf0b578291.jpg

Блок (Экран) — смысловой элемент включающий в себя информацию только об одной сущности. Обычно блок начинается с заголовка и отделен от следующего каким-либо визуальным решением, цветом, линией, тенью.

b_5bfcf0b597238.jpg

Раздел — страница сайта. Тут все просто.

b_5bfcf0b5b21d2.jpg

Шапка (хеддер / header) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е она перемещается вместе с перемещением пользователя по странице.

b_5bfcf0b5cdb51.jpg

Подвал (футер / footer) — самая нижняя часть сайта. Чаще всего в ней расположена карта сайта, контактные данные, быстрые ссылки на популярные разделы, копирайт, политика конфиденциальности и ссылка на разработчика сайта

b_5bfcf0b5e9467.jpg

Галерея — набор из нескольких изображений

b_5bfcf0b611bb0.jpg

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

b_5bfcf0b62ca16.jpg

Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками)

b_5bfcf0b66528f.jpg

Тултип (tooltip) — подсказка, всплывающая при наведении на элемент

b_5bfcf0b681413.jpg

Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку

b_5bfcf0b69f442.jpg

Курсор Текст (Text) — тип курсора, стандартный для редактирования текста

b_5bfcf0b6bbec2.jpg

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

b_5bfcf0b6d91a7.jpg

Пагинация — нумерация страниц, обычно отображенная как навигация в конце страницы

b_5bfcf0b700c8a.jpg

Списки — в веб интерфейсах присутствуют нумерованные списки (цифрами) , маркированные списки (точки, квадратики, кружки, черточки) и списки определений

b_5bfcf0b71e09c.jpg

Стрелочки — вид навигации.

b_5bfcf0b739c50.jpg

Поисковая строка — строка для ввода поискового запроса

b_5bfcf0b756ead.jpg

Плеер — элемент воспроизводящий аудио и видеофайлы

b_5bfcf0b7735c5.jpg

Ползунок — предназначен для ввода чисел в указанном диапазоне

b_5bfcf0b78e242.jpg

Текстовое поле — поле для ввода текстовых значений

b_5bfcf0b7ab7e5.jpg

Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.

b_5bfcf0b7c68da.jpg

Маска — это значения, указывающие формат допустимых значений входных данных в поле.

b_5bfcf0b7e4682.jpg

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

b_5bfcf0b80b675.jpg

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

b_5bfcf0b826def.jpg

Вкладки (табы) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку

b_5bfcf0b841dc2.jpg

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

b_5bfcf0b85fc9f.jpg

Переключатель (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл

b_5bfcf0b87ad1c.jpg

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

b_5bfcf0b897f11.jpg

Прелоадер (Preloader) — анимированный элемент, воспроизводящийся в процессе загрузки сайта, видео, изображений и другого контента.

b_5bfcf0b8bd74b.jpg

Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку

b_5bfcf0b8dab85.jpg

Теги — элемент чаще всего располагающийся под контентом. Показывает принадлежность статьи, товара и пр. к конкретной категории. Зачастую при нажатии на тег, вы попадете на страницу со всем контентом, у которого есть такой тэг

b_5bfcf0b904b67.jpg

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

b_5bfcf0b92205f.jpg

+5
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
MTT Forum
Главное бизнес-событие осени
Николай Гришин
Спасибо, очень актуально
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.