Щодня, за завданням, мені доводиться взаємодіяти з різними зацікавленими сторонами в проекті. Залежно від посади та інтересу до дисципліни дизайну UX-UI, кожен має різні знання про використовувані терміни.
Тому під час місій я зібрав велику кількість понять, і це словниковий запас, який я хотів би мати, коли починав, і який я поступово консолідував, щоб допомогти майбутнім студентам або новачкам у цифровому світі.
Тому я підготував для вас серію статей, у яких буде пояснено кожне поняття, щоб ви могли до нього звернутися. Тому ми завершуємо цю серію останніми 20 концепціями. Якщо ви коли-небудь захочете проконсультуватися з обома частинами - вище за течією, ось посилання: partie 1, partie 2 et partie 3.
#1 _ Макети
Карусель
Карусель дозволяє переглядати такий вміст, як зображення, карти тощо, за допомогою горизонтальної навігації. Ми часто знаходимо їх на головній сторінці веб-сайту, щоб представити новини.
Акордеони
Акордеони дозволяють користувачам розгортати та згортати розділи вмісту. Вони дуже корисні для організації вмісту та показу користувачеві чітко визначеної ієрархії.
Нумерація сторінок
Часто в нижній частині сторінки розбиття на сторінки організовує вміст на сторінки. Тому знаходимо номер кожної сторінки. Іноді деякі приховані, залежно від кількості. Хороша практика полягає в тому, щоб завжди зберігати перше і останнє. Інша хороша практика, щоб спростити використання, полягає в тому, щоб відобразити кнопки «попередній» і «наступний».
пункт
Елемент — це елемент списку. Це важливий елемент, оскільки ми часто повторюємо кілька разів, адаптуючи відображені дані.
Список
Він складається з набору елементів, які йдуть один за одним в алфавітному, цифровому або навіть випадковому порядку.
Там можна вкладати кілька компонентів, наприклад текст, зображення, статус, кнопку тощо.
Список сіток
Списки сіток відображають колекцію зображень у організованій сітці. На відміну від списку, елементи розташовані вертикально та горизонтально, а не в одному вертикальному стовпці, як у списку.
картка
Карта — це компонент, який дозволяє групувати в одній групі.
Наприклад, заголовок, зміст і зображення для матеріалізації медійної статті. Або зображення, назва та кнопка покупки на сайті електронної комерції.
#2 _ Форми
Форма
Форми дозволяють отримати інформацію, заповнену користувачем. Він введе, завершить або додасть елементи в систему, а потім надішле їх.
Поле (введення англійською)
Поле дозволяє користувачеві вводити інформацію. Ця інформація може бути представлена в кількох формах, які можна описати в наведених нижче концепціях.
Текстові поля
Текстові поля дозволяють користувачам вводити та редагувати текст. Це може бути один рядок або кілька рядків.
Курсор
Повзунок дозволяє користувачам переміщатися між рядом значень. Це переважно матеріалізується інтерактивною панеллю. Наприклад, щоб регулювати гучність або переміщатися в межах аудіо/відеодоріжки.
Розкривний список (розкривний список або «вибрати» англійською)
Розкривний список дозволяє вибрати між двома або необмеженою кількістю варіантів.
Прапорець
Прапорець дозволяє користувачам вибрати одну або кілька опцій зі списку. Це компонент, який дозволяє користувачеві вказувати варіанти зі списку пропозицій. Графічно позначене поле зазвичай матеріалізується по-іншому (завдяки піктограмі чи кольору), а не позначене поле залишається порожнім. Ящик також може бути неактивним, якщо вибір неможливий.
Радіо-кнопка
Перемикач дозволяє користувачеві вибрати одну опцію з набору. Графічно перемикач представлено колом. Як і у випадку з прапорцем, вибір користувача матеріалізується інакше (за допомогою піктограми або кольору).
Тумблер/перемикач
Перемикач використовується для бінарних опціонів. Вони дозволяють активувати або деактивувати стан окремого елемента.
Це як перемикач, тумблер може займати лише два положення (наприклад, кнопка ввімкнення/вимкнення).
Заповнювач
Заповнювач — це атрибут, який використовується для відображення тексту за замовчуванням у певних полях форми. Це дасть користувачеві підказки для заповнення поля. Наприклад, щоб надати очікуваний формат дати, адреси чи номера телефону.
#3 _ Дії
кнопка
Кнопка дозволяє користувачам робити дії та вибирати одним натисканням.
Кнопка є одним із найважливіших компонентів інтерфейсу, оскільки вона направляє користувача ключовими шляхами: наприклад, придбати продукт, оформити підписку або зареєструватися.
Застава
Посилання – це спосіб переходу з однієї сторінки на іншу. Натиснувши посилання, користувач отримає прямий доступ до потрібної інформації.
З боку дизайну важливо їх чітко визначити. Часто вони зображуються підкресленням і кольором.
FAB (плаваюча кнопка дії)
Плаваюча кнопка дії — це кнопка, яка трохи відрізняється від кнопок, які ми звикли бачити на платформах. Його особливість полягає в тому, що він буде плавати в інтерфейсі, над вмістом. Плаваючі кнопки дій здебільшого розташовані в правому нижньому куті екрана ваших улюблених програм. Вони використовуються в інтерфейсах для групування основних дій для користувачів.
Рядок пошуку
Рядок пошуку є дещо особливим полем введення, оскільки воно дозволяє шукати або фільтрувати елементи. Пошук може бути міжсайтовим або за певною функціональністю.
Висновок
Тому ми завершуємо серію невеликого глосарію UX-UI цими поняттями. Немає сумніву, що ми перезапустимо нову серію, щоб ознайомити вас з новими концепціями (ймовірно, на сьогоднішній день не існує!). Дякуємо, що слідкуєте за нами, і не соромтеся зв’язуватися з нами, якщо концепція все ще викликає у вас проблеми!
Щоб переглянути перші три частини, ось посилання: partie 1, partie 2 et partie 3.
Якщо ви коли-небудь захочете поглибити свої знання та попрактикуватися в розробці веб-інтерфейсу, навчальний центр UX-Republic пропонує навчання «UI Design, the fundamentals». Ось посилання, щоб дізнатися більше.
Алекса КУЕЛЛАР, дизайнер UX @UX-Republic
