Карти шаблон дизайну
Короткий зміст проблеми
Користувачеві потрібно переглянути вміст різного типу та довжини
Приклад
▲ Pinterest використовує картки для групування різнорідних предметів: кожна картка відрізняється за обсягом інформації та займає різну кількість вертикального простору.
Використання
- Використовуйте для відображення вмісту, що складається з різних елементів
- Використовуйте для демонстрації елементів, розмір яких або підтримувані дії різняться - наприклад, фотографії з підписами змінної довжини.
- Використовуйте при відображенні вмісту, який ...
- Як колекція складається з декількох типів даних (зображення, фільми, текст)
- Не вимагає прямого порівняння
- Підтримує вміст дуже змінної довжини (підписи, коментарі)
- Містить інтерактивний вміст
- Використовувати для візуального групування засвоюваних частин інформації, що закликають до дії; як прийняття запиту або доступ до додаткової інформації.
- Використовуйте для збору різних відомостей про одну тему, щоб сформувати цілісний зміст.
- Карти краще підходять, коли користувачі переглядають інформацію, ніж коли вони шукають.
- Картки найкраще підходять для колекцій різнорідних предметів (коли не весь вміст одного основного типу).
Ця картка є частиною колоди друкованих карт UI Patterns
Колекція з 60 шаблонів дизайну інтерфейсу користувача, представлена таким чином, щоб легко було знайти на них посилання та використовуватись як інструмент мозкового штурму.
Більше прикладів
Рішення
Показувати точки входу до детального та різноманітного вмісту у подібних формах. Картка може містити фотографію, текст та посилання на одну тему.
Розглянемо лише прокручування колекцій карток в одному напрямку: по горизонталі чи вертикалі. Вміст картки, який перевищує максимальну висоту картки (якщо прокручується вертикально) або ширину (якщо прокручується горизонтально), скорочується і не прокручується, але її можна розширити. Після розширення картка може перевищувати максимальну висоту/ширину подання.
Картка зазвичай містить кілька різних типів носіїв, таких як зображення, заголовок, короткий підсумок та кнопка із закликом до дії.
Картками можна маніпулювати
Однією з найважливіших речей у картках є їх здатність маніпулювати майже нескінченно. Їх можна перевернути, щоб розкрити більше, скласти, щоб заощадити простір, скласти для зведення - і розширити для отримання більш детальної інформації, відсортувати та згрупувати.
Ми можемо натякнути, що знаходиться на тильній стороні або що картку можна розкласти. Схожість Карт з фізичним світом робить їх чудовою концептуальною метафорою, для якої ми можемо легко пов’язати всілякі маніпуляції.
Обґрунтування
Перегляд - це велика частина взаємодії, і користувачі хочуть мати можливість швидко сканувати великі частини вмісту та глибоко зануритися у свої інтереси. Користувачі можуть відчувати труднощі при перегляді важких текстових сайтів, оскільки відображення додаткових деталей для кожного елемента може захарастити екран і запобігти ефективному скануванню.
Картки чудово підходять для демонстрації зведених елементів, розмір яких або підтримувані дії різняться. Кожна картка служить точкою входу до більш детальної інформації, тому її не слід перевантажувати сторонніми відомостями чи діями. Вони недоступні, можна гортати, сортувати та фільтрувати.