Поради професіонала як поліпшити інтерфейс карток в веб-дизайні

Мир переводов : Интернет
, 10:10
48
693
інтерфейс карток

Карткове оформлення елементів на веб-сторінках з'явилося досить давно. Це в першу чергу пов'язано з розвитком адаптивного дизайну і соціальних медіа, для яких було потрібно придумати простий і універсальний метод відображення даних. До дизайну карток потрібно підходить досить серйозно, тому що" місця для маневрів " у вас мало, а від даного компонента залежить багато чого. Якщо спроектувати їх недостатньо зручними і ефективними, то це негативно впливає на підсумковий користувальницький досвід. Корисну інформацію можна прочитати на сайті https://www.business-money.com/announcements/why-a-mobile-version-of-your-saas-is-essential/, а короткий план децствій далі в нашій статті.

Прості та ефективні поліпшення

  • Одна ідея - одна картка. Не варто використовувати в цьому елементі висновок множинних об'єктів, краще кожен з них представити у вигляді окремої карти. Той же слайдер в превью, якщо він виводиться в кожній картці, буде лише відволікати і додатково навантажувати веб-сторінку.
  • Позбавляйтеся від зайвих посилань. Вкрай не рекомендується додавати посилання в короткий текстовий опис, Лінк у картки повинен бути тільки один-з кнопки/картинки або при кліці по ній. Це і виглядає не красиво, і може направити відвідувача сайту не туди, куди потрібно було.
  • Приберіть рамки. Іноді дизайнери-новачки виділяють кожен елемент рамкою щоб представити їх як окремі об'єкти. Робити це зовсім не обов'язково. Як бачите на зображенні вище, це лише створює додатковий «візуальний шум» і заважає концентрувати увагу на вмісті окремої карти.
  • Дотримуйтесь ієрархії. Вміст картки має добре читатися і відразу показувати користувачеві, де який елемент знаходиться і наскільки він важливий: заголовок, підзаголовок, кнопка і т. п. це робиться за рахунок різних прийомів типографіки — різних розмірів шрифтів, кольору, фону і т. п.
  • Розрізняйте дії. Якщо в картковому інтерфейсі для елементів у вас передбачені кілька дій, то бажано якось з розділити. Як бачите на зображенні прикладу вище, справа головна дія виділено фоном і помітно виділяється від другорядного, де використовується звичайне оформлення посилання.
  • Мінімум інформації в анонсі. Додайте певне обмеження для текстового вмісту-20 слів, 50 символів, 2 пропозиції і т.п. компактні картки краще сприймаються в інтерфейсі. Але при цьому важливо надати Користувачеві достатньо інформації щоб той міг зрозуміти слід Йому переходити за посиланням далі чи ні.
Автор: Мир переводов
ОЦЕНИТЬ НОВОСТЬ
5 (голосов: 49)

Комментарии:

  • avatar
    skygrabber - 5.07.2023, 10:53
    Портал просто супер!
  • avatar
    shopbizVrn - 5.07.2023, 11:04
    Корисного багато знайшла для себе
  • avatar
    Shumiha - 5.07.2023, 11:59
  • avatar
    BONG_JA - 5.07.2023, 12:14
    Хороша стаття, дізнався багато нового!)
  • avatar
    MahLazor - 5.07.2023, 12:49
    прочитала с удовольствием
  • avatar
    Duhastovna - 5.07.2023, 13:06
    супер оригинально
  • avatar
    qawasaqa13 - 5.07.2023, 13:48
    автору спасибі за пост !!
  • avatar
    XIMIK_24 - 5.07.2023, 14:12
    відмінний приклад стоїть матеріалу
  • avatar
    Сергей Дуб - 5.07.2023, 14:48
    ну что тут скажешь…
  • avatar
    donquihot - 5.07.2023, 15:04
    Досить цікава і пізнавальна тема
  • avatar
    Pertosyan - 5.07.2023, 15:42
    автору спасибо за пост !!
  • avatar
    FuckFuckingFuck - 5.07.2023, 16:13
    Чтож, статья интересная. Давайте подисскутируем…
  • avatar
    Gmitron - 5.07.2023, 16:58
    Это уже далеко не новость, я об этом пару месяцев назад читал.
  • avatar
    telemander - 5.07.2023, 17:20
    Привіт! Пропоную обмін постовими з вашим блогом.
  • avatar
    Ijustkidin - 5.07.2023, 17:48
    О чем глаголят все эти люди в комментах?
  • avatar
    MANNO36 - 5.07.2023, 18:04
    Хе-хе, мой первый коммент :)
  • avatar
    andreyops - 5.07.2023, 18:48
    Восхитительно..
  • avatar
    laskano - 5.07.2023, 19:17
    Читаєш це і думаєш ...
  • avatar
    DespA1R - 5.07.2023, 19:46
    После прочтения даже мне тема стала интересна.
  • avatar
    Prikolala - 5.07.2023, 20:13
    Після прочитання навіть мені тема стала цікава.
  • avatar
    nescio - 5.07.2023, 20:56
    реальна тема
  • avatar
    md_phd - 5.07.2023, 21:10
    Потиснув би руку автору, і дав по морді всім його ненависникам.
  • avatar
    Melisa2017 - 5.07.2023, 21:49
    Готов дискутировать по теме?
  • avatar
    qawasaqa13 - 5.07.2023, 22:01
    Мені нарвится стиль викладу
  • avatar
    kdurov - 5.07.2023, 22:54
    вирішив допомогти і Разшарив статтю в соц. мережах
  • avatar
    xSerg - 5.07.2023, 23:00
    вне конкуренции
  • avatar
    DjonGetuber - 5.07.2023, 23:56
    Все нравится. Спасибо за пост!
  • avatar
    notorious02 - 6.07.2023, 00:05
    Хорошая статья, узнал много нового!)
  • avatar
    fiddlestick - 6.07.2023, 00:45
    Стаття неоднозначна - не можна кидатися в крайності.
  • avatar
    Frozenstreet - 6.07.2023, 01:15
    Очень хорошая идея
  • avatar
    fiar321 - 6.07.2023, 01:51
    хороший розповідь, все розкладено по полицях
  • avatar
    our_goddess_bot - 6.07.2023, 02:18
    Клас! Респект автору!
  • avatar
    noizegeyser - 6.07.2023, 02:45
    Спасибо за Ваш труд!!
  • avatar
    JamesRandy96 - 6.07.2023, 03:17
    Може Ваш сайт навіть підніметься у видачі за такий матеріал.
  • avatar
    RolegS - 6.07.2023, 03:51
    реальна тема
  • avatar
    ivan_petrik - 6.07.2023, 04:16
    отличный пример стоящего контента
  • avatar
    yxansson - 6.07.2023, 04:48
    ништяг, все правильно написано. Молодец!
  • avatar
    lupicatulum - 6.07.2023, 05:08
    Блестящая идея
  • avatar
    zingtt - 6.07.2023, 05:40
    Мені, наприклад є чим поділитися, думаю не тільки мені.
  • avatar
    ChinaPhoe - 6.07.2023, 06:00
    отлично !!! Все супер!
  • avatar
    Yellow2012 - 6.07.2023, 06:49
    Красивый пост, многосмысленный…
  • avatar
    AmadeusNight - 6.07.2023, 07:17
    Цепляет, отлично написано!
  • avatar
    Freiflug - 6.07.2023, 07:43
    Очень познавательно, респект
  • avatar
    eugeneway - 6.07.2023, 08:10
    Только золотые руки могли набить такой прикольный материал
  • avatar
    Kalinkadze - 6.07.2023, 08:41
    Завжди приємно читати розумних людей
  • avatar
    Oreiro24 - 6.07.2023, 09:10
    Супер-пупер!
  • avatar
    IvanTsarevich - 6.07.2023, 09:41
    Я конечно, мало, что смыслю в данной теме, но постараюсь осилить.
  • avatar
    userclassified - 6.07.2023, 10:11
    ДА СУПЕР!!!!!!!!!!!!
ВВЕРХ