Поради професіонала як поліпшити інтерфейс карток в веб-дизайні
Мир переводов : Интернет
5 Июль 2023, 10:10
48
586
Карткове оформлення елементів на веб-сторінках з'явилося досить давно. Це в першу чергу пов'язано з розвитком адаптивного дизайну і соціальних медіа, для яких було потрібно придумати простий і універсальний метод відображення даних. До дизайну карток потрібно підходить досить серйозно, тому що" місця для маневрів " у вас мало, а від даного компонента залежить багато чого. Якщо спроектувати їх недостатньо зручними і ефективними, то це негативно впливає на підсумковий користувальницький досвід. Корисну інформацію можна прочитати на сайті https://www.business-money.com/announcements/why-a-mobile-version-of-your-saas-is-essential/, а короткий план децствій далі в нашій статті.
Прості та ефективні поліпшення
- Одна ідея - одна картка. Не варто використовувати в цьому елементі висновок множинних об'єктів, краще кожен з них представити у вигляді окремої карти. Той же слайдер в превью, якщо він виводиться в кожній картці, буде лише відволікати і додатково навантажувати веб-сторінку.
- Позбавляйтеся від зайвих посилань. Вкрай не рекомендується додавати посилання в короткий текстовий опис, Лінк у картки повинен бути тільки один-з кнопки/картинки або при кліці по ній. Це і виглядає не красиво, і може направити відвідувача сайту не туди, куди потрібно було.
- Приберіть рамки. Іноді дизайнери-новачки виділяють кожен елемент рамкою щоб представити їх як окремі об'єкти. Робити це зовсім не обов'язково. Як бачите на зображенні вище, це лише створює додатковий «візуальний шум» і заважає концентрувати увагу на вмісті окремої карти.
- Дотримуйтесь ієрархії. Вміст картки має добре читатися і відразу показувати користувачеві, де який елемент знаходиться і наскільки він важливий: заголовок, підзаголовок, кнопка і т. п. це робиться за рахунок різних прийомів типографіки — різних розмірів шрифтів, кольору, фону і т. п.
- Розрізняйте дії. Якщо в картковому інтерфейсі для елементів у вас передбачені кілька дій, то бажано якось з розділити. Як бачите на зображенні прикладу вище, справа головна дія виділено фоном і помітно виділяється від другорядного, де використовується звичайне оформлення посилання.
- Мінімум інформації в анонсі. Додайте певне обмеження для текстового вмісту-20 слів, 50 символів, 2 пропозиції і т.п. компактні картки краще сприймаються в інтерфейсі. Але при цьому важливо надати Користувачеві достатньо інформації щоб той міг зрозуміти слід Йому переходити за посиланням далі чи ні.
