Щодня за завданням мені доводиться обмінюватися з різними учасниками проекту. Залежно від посади та інтересу до дисципліни дизайну UX-UI, кожен має різні знання про використовувані терміни.
Тому під час виконання місій я зібрав велику кількість концепцій, і це словниковий запас, який я хотів би мати, коли починав, і який я консолідував, щоб допомогти майбутнім студентам або новачкам у цифровому світі.
Тому я підготував для вас серію статей, у яких буде пояснено кожне поняття, щоб ви могли до нього звернутися.
Ми продовжуємо серію цією третьою частиною та 21 концепцією, що її складають. Якщо ви коли-небудь захочете ознайомитися з першими двома частинами заздалегідь, ось посилання: partie 1 et partie 2.
#1 _ Сітка та інтервали
Решітка
Сітка — це сховище для побудови структури сторінок і пріоритетності інформації. Це одна з вправ, яку потрібно виконати в першу чергу під час створення наших каркасів і моделей; і це для кожного з пристроїв.
Базовий рівень
Базова лінія є орієнтиром під час розміщення блоку тексту та визначення міжрядкового інтервалу.
Точка зупину
Переломна точка – плато. Від певної ширини вікна макет і розташування вмісту можуть змінюватися відповідно до доступного простору.
Інтервали
Відстань між різними елементами та вмістом ваших інтерфейсів дуже важлива. Правильно адаптувавши простір, ви зможете створити комфорт для читання та обмежити ризик помилки.
- Поле: контролює відстань між поточним елементом та іншими елементами на сторінці
- Відступ: контролює простір між вмістом і межею елемента.
Границя-радіус
Властивість «border-radius» — це властивість CSS, яка дозволяє визначати кути кутів елемента. Кожен кут можна визначити по-різному, щоб створити нерівну форму, або кожен кут може мати однакове значення. Бордер-радіуси знаходимо на різних елементах інтерфейсу: фоні, карті, кнопці тощо. Вибір радіуса межі сильно вплине на загальне відчуття інтерфейсу. Тому важливо розуміти властивості, які пропонує кожен.
Я написав статтю, щоб керуватися вибором радіуса кордону, який ми використовуємо в дизайні інтерфейсу користувача: Я поділюся з вами посиланням тут.
#2 _ Сповіщення та сповіщення
Тост / Закусочна
Тост і снекбар — це компоненти, які інформують користувача про поточну дію. Це сповіщення «в додатку», контекстні та не заважають (зазвичай вони з’являються лише на кілька секунд, перш ніж зникнути).
Вони дозволяють дати коротке повідомлення про щось, що відбувається (наприклад, стан).
- Тост: дає відгук про те, що зараз відбувається
- з'являється та зникає без необхідності дії користувача
- є лише інформаційне повідомлення (без дії)
- може бути контекстуальним ширше на рівні програми
- Панелі швидкого доступу: відображає сповіщення, додаткові дії
- ви можете змусити його зникнути вручну за допомогою жесту або кнопки
- пропонуються контекстні дії до дії
- має бути пов’язано з контекстом екрану, що відображається, або з поточною дією
Модальне/немодальне вікно
- Модальне вікно: відкривається над програмою і не дозволяє користувачеві взаємодіяти з вікном програми «внизу» (вікно, яке його відкрило), доки воно не залишиться відкритим.
- Немодальне вікно: також відкривається над програмою, але дозволяє користувачеві продовжувати взаємодіяти з вікном програми, розташованим «внизу», без необхідності закривати його.
Спливаюче вікно / Pop-in
- Спливаюче вікно: це вікно, яке з’являється над вмістом. Це відкривається вашим браузером, а не сайтом. Поки користувач не закриє його, він заблокований.
Спливаюче вікно використовується для відображення рекламних повідомлень, попереджень або сповіщень. - Спливаюче вікно: це вікно, яке також відображається над вмістом. Їхня робота схожа на спливаючі вікна. Різниця полягає в тому, що він запускається кодом веб-сайту, а не браузером. Спливаюче вікно використовується для відображення вмісту, пов’язаного з веб-сайтом, наприклад зображень, фотографій, відео тощо.
Поповер
Повернення можна використовувати для відображення одного вмісту поверх іншого. Наприклад, опис місця на карті, коли ви натискаєте на місто.
Повідомлення натискають
Push-сповіщення – це сповіщення, яке надсилається сервером (яке «виштовхує» інформацію) користувачеві через мобільний додаток.
#3 _ Різні типи меню
Це дозволяє об’єднати записи сайту за однією кнопкою.
Панель вкладок
Панель вкладок з’являється внизу мобільної програми та дозволяє користувачам швидко переміщатися між головними сторінками програми.
Висновок
Ми знову зустрінемося в наступній серії, четвертій і останній, де ми разом побачимо велику тему: компоненти компонування, форми та дії.
Якщо ви коли-небудь захочете поглибити свої знання та попрактикуватися в розробці веб-інтерфейсу, навчальний центр UX Republic пропонує навчання «Дизайн інтерфейсу користувача, основи». Ось посилання, щоб дізнатися більше.
Алекса КУЕЛЛАР, дизайнер UX @UX-Republic
