PM3. Элементы интерфейса сайта

Автор Elena Batratskaya
PM3. Элементы интерфейса сайта

Привет всем.

Меня зовут. Дарья Сегодня мы будем говорить о интерфейсе сайтов. Но прежде всего хочу сказать.

Спасибо всем кто комментировал мои видео ставим лайки и писал мне.

Ребята вы действительно мы будем снимать видео и в дальнейшем и так, что такое пользовательский интерфейс кто мыслит в котором мы будем говорить об этом сегодня пользовательский интерфейс SATA внешний вид сайта то есть то через, что пользователь взаимодействует с сайтом начнем. И пожалуйста самого верха то есть харам от английского слово Hat то есть голова его также называют шапкой сайта верхняя часть сайта которая остаётся неизменной. На какие бы странице. Вы не переходили вот мы перемещаемся по сайту и видим, что кадр остается неизменным и выделяется с помощью цвета он может быть USB как вот здесь или широким зависимости от дизайна там обычно располагается логотип. Иногда вместе компания меню и поиск логотип графический знак символ эмблема который используется в качестве фирменного знака товара или фирмы логотип обычно кликабельный то есть при нажатии на него происходит какое-то действие и обычного при нажатии на логотип вы переходите на главную страницу сайта меню сайта — это сгруппированы набор ссылок с названиями разделов который помогает быстро перемещаться по страницам сайта есть главное меню она занимает обычно сам удобное место на сайте второстепенное меню или меню второго уровня помогает структурировать большое количество информации его еще называют dropdown-menu или выпадающий список иногда в таких меню даже используют изображение для облегчения восприятия такого списка, что поиск думаю объяснять не нужно, но когда вы нажимаете на иконку поиска появляется строка поиска здесь мы видим, что под строкой поиска появляется список с предложениями для поиска — это селе здесь уже есть строка поиска, но когда мы начинаем водить слово нам предлагают варианты поиска такая система поиска называется автокомплит мы начинаем искать страницу поиска ещё один нюанс который нужно знать про кадр. Это то, что он может быть фиксированным и оставаться на верху страницы пока вы превращаетесь по странице Footer он же подвал сайта. Нижняя частота куда вносят различные полезную информацию обычную хутор выделяют одним цветом там находится контактная информация меню контакты службы поддержки и конечно же ссылки в соц сетях. Я уже упоминал, но у нас есть еще несколько картинок на сайте и так. В чём разница между логотипом картинкой иконкой по сути — это всё картинки, но картинки которые являются торговым знаком фирмы называется логотипом маленькие картинки которые часто могут быть кликабельными называется иконками или значками. Инстаграме иконки часто используют для визуализации текста или его замене картинки которые действительно называется картинками обычный изображения фотографии которые размещаются как фонд или как наглядно или товара в магазине они больше чем на иконке и не являются торговым знаком фирмы как логотип. Кстати есть одна разновидность иконки которая помещается во вкладке браузера у неё даже есть свое название favicon еда. Единственное её отличия от обычной иконки вместе её расположение, тогда вы можете заметить странные изображения которые двигаются когда мы перемещались по странице — это называется эффект параллакса сам всё, что представлено на сайте состоит из блока некоторых блоков даже есть свои названия из-за специфические функции которые они выполняют баннер от изображения плюс текст рекламного характера обычно при нажатии на баннер вас перенаправлять на рекламируемый продукт или сайт рекламодателя слайдер обычно содержит в себе несколько изображений или блоков с текстом которые можно пролистать или они меняются автоматически в течение какого-то периода времени сейчас на слайдер есть навигация по точкам или буллитам кнопка один из базовых элементов на сайте кнопкой интуитивно пользователя единственное действие которое можно сделать — это нажать на неё ссылка. Она же. Стрелка средства перехода от одной страницы к другой или от одного сайта к другому они обычно синего цвета определение подчёркивается вообще эффекты при котором она что-то наводите мышкой и — это меняется внешний вид называется Hover Hover кнопки карточки товара Hover иконки. Давайте теперь обсудим такую важную часть сайта как навигация навигация помогает нам быстро и эффективно перемещаться по сайту и находить нужную нам информацию с одной части навигации вы уже знакомы — это меню поиск и Footer, что же ещё относится к Navigation sidebar — это боковая часть сайта в сайдбаре может находиться информация о данном варианте. Мы едим навигационное меню полоса прокрутки или scrollbar показывает как — это находится у нас в поле видимости помогает перемещаться по сайту кстати вот этого пошло слово скролить значит перемещаться вниз вверх по сайту и 1 окрошки или навигация цепочка ещё один элемент навигации она показывает нам дорогу до определенной страницы при клике. Вы можете вернуться на любой элемент из этой цепочке например вы сейчас находитесь на странице товара наши навигационной цепочки видно название подкатегории категории и главной странице мы можем туда под категорию и увидим товары с неё хлебными крошками собрались идём дальше наверняка много раз видели на сайтах нумерацию страниц товарами программист — это называется страшным словом pagination — это порядковая нумерация страниц теперь перейдем к более сложной части сайта к личному кабинету пользователя личный кабинет есть.

0 комментариев
0

Читайте также