Основа роботи проектного менеджера - це підготовка беклогу для команди. Для цього необхідно працювати з дизайном, а щоб можна було прописати чіткі та зрозумілі задачі для команди - необхідно знати назви дизайнерських елементів.
Отже, дизайнерські елементи або компоненти, або UI/UX елементи - це візуальні елементи, з якими взаємодіє користувач.
В декількох статтях я зберу головні UI/UX елементи, які будуть зустрічатися частіше за все. Їх назви та функціонал необхідно знати, краще одразу вчити назви англійською.
Кнопка (button) - елемент інтерфейсу, який повідомляє користувачу про певну дію, наприклад перехід на сторінку, відкриття модального вікна тощо.
Значок (icon) - зображення, яке використовуються для позначення різних речей та допомагають краще передавати вміст цих речей.
Модальне вікно (modal window) - це невелике вікно, яке повідомляє певну інформацію користувачу. Перш ніж користувачу будуть доступні будь-які дії на сторінці, він повинен закрити дане вікно, оскільки воно блокує функціонал сторінки.
Бічна панель (sidebar) - відображення вмісту сторінки. Вона може бути видимою чи прихованою, зазвичай розміщується з лівого боку.
Поле пошуку (search field) - поле куди користувач вводить інформацію для її пошуку в системі.
Поле для вводу даних (input field) - місце, де користувачі можуть вводити різну інформацію. Інформація для пошуку, для заповнення форми, для вибору значень тощо.
Cповіщення (notification) - повідомлення, яке говорить користувачу, що для нього є якась інформація. Вподобання допису, надходження помилки чи будь-який інший результат - це все може приходити в сповіщеннях.
Чекбокс/прапорець (checkbox) - маленьке квадратне поле, яке користувач може встановити або зняти. Прапорець дозволяє вибрати варіанти зі списку. Встановивши прапорець - з'являється позначення з галочкою.
Радіо кнопки (radio buttons) - перемикачі, які дозволяють користувачу вибрати одну опцію зі списку. Ключовим є те, що користувач може вибрати лише один варіант, а не декілька варіантів, на відміну від чекбоксів.
Картка (card) - невеликий прямокутний чи квадратний елемент, який містить інформацію. Картки можуть містити текст, зображення та інші елементи інтерфейсу для передачі інформації в стислій формі.
Карусель (carousel) це елемент, який використовується для відображення набору вмісту в ковзаючому режимі. Зазвичай карусель складається з серії карток, які ковзають горизонтально/вертикально, коли користувач взаємодіє з інтерфейсом.
Випадний список (dropdown) - за допомогою даного елемента, користувач може вибирати елемент зі списку, який випадає коли на нього натискають.
Завантажувач (loader) - елемент, який повідомляє користувачеві, що система завершує дію і треба зачекати.
Пагінація (pagination) - розбивка на сторінки. Пагінація дозволяє користувачу зрозуміти, на якій сторінці він знаходиться, він може клацати на неї та переходити до інших сторінок чи розділів.
Індикатор прогресу (progress bar, status bar) - це елемент, який візуально відображає на якому кроці знаходиться користувач. Даний елемент частіше всього використовують для заповнення певної реєстраційної форми чи показує кроки до завершення покупки, рахунків тощо.
Акордеон (accordion) - дозволяє користувачу розгортати та згортати розділи вмісту, що допомагає швидко орієнтуватися в матеріалі, який вміщений в кожен розділ. Тобто, великий обсяг інформації вміщують в обмежений простір.
Бредкрамб (breadcrumb) це доріжка посилань, яка допомагає користувачу зрозуміти, де він знаходиться на сайті. Частіше за все бредкрамб розташовують у верхній частині сайту. Користувачі бачать їх поточне розташування та сторінки, на які вони переходять. Також можна натискати на кожен крок і переходити на попередню чи наступну сторінку.
Продовження тут, у другій частині.
---
ПОВНИЙ КУРС З ПРОЕКТНОГО МЕНЕДЖМЕНТУ | МЕТОДИЧКИ ДО КУРСУ
Ще немає коментарів