Валюта:
$
USD ($)
EUR (€)
UAH (₴)
DKK (Dkk)
SEK (Sek)
NOK (Nok)
JPY (¥)
CHF (₣)
GBP (£)
AUD (A$)
PLN (zł)
ILS (₪)
KZT (₸)
CAD (C$)
Показати ще
Регіон:
Не вказано
США
Україна
Ізраїль
Європа
Іспанія
Казахстан
Італія
Данія
Швеція
Норвегія
Німеччина
Швейцарія
Франція
Фінляндія
Нідерланди
Японія
Великобританія
Австралія
Канада
Польща
Мальта
Не вказано
Латвія
Показати ще
Мова:
UK
SEO

Таблиці на веб-сайтах - 8 порад щодо їх оформлення

Не знаю, чи вам відомо, але раніше таблиці на сайтах використовувалися не тільки для наочного подання даних, але і як... каркас для побудови макета сайтів. На щастя, останньої мети вже давно не існує, і я переконаний, що вона не повернеться до нас. Початкова та єдина мета таблиці дуже проста: уявити дані у зрозумілому, структурованому вигляді.

828
271

Незважаючи на те, що тенденції в області дизайну рухаються вперед і стіл багатьом здається застарілим, ніщо не може бути далі від істини. Фактично, цей елемент трохи "незграбний", але він все одно є чудовою нагодою донести до користувачів необхідну інформацію у зручній формі.

Чому?

Таблиці на веб-сайтах роблять усі дані гранично зрозумілими та простими для впорядкування . Їх можна використовувати не лише для представлення невеликого обсягу інформації, але й більшого. Вони чудово підходять для порівняння, наприклад, різних типів пропозицій, планів підписки та інших послуг.

Вже давно було сказано, що контент має легко скануватись. Ідея полягає в тому, що користувач Інтернету повинен мати можливість досить швидко ознайомитися зі змістом статті, просто глянувши туди-сюди. Столи роблять це максимально можливим. Тому ознайомтеся з тим, про що слід подумати при розробці таблиць на веб-сторінці. сайти. Ось 8 порад, які можуть виявитися вам корисними. ?

1. Використовуйте різні кольори

Давайте почнемо з прикладу. Подивіться на скріншот:

Треба сказати, що представлена ​​таблиця візуально приємна. Він не перебільшений за кількістю інформації, а загальний дизайн залишає приємне враження. Інформація повністю читається.

Кольори відіграють тут важливу роль, виділяючи певні типи даних.

Їх використання дозволяє легко відрізнити важливішу інформацію від менш важливої.

2. Підтримайте себе іконками

Іконки надзвичайно широко використовуються на багатьох веб-сайтах.

Це не дивно, тому що вони здатні передати багато слів за допомогою одних зображень.

Наш мозок набагато швидше створює асоціації з формами та іншими візуальними елементами, ніж з текстом, який ми повинні уважно прочитати, щоб зрозуміти його зміст.

Тому можна сказати, що іконки - це свого роду ментальний ярлик.

Якщо таблиця, яку ви плануєте створити, міститиме дані, які легко замінити значками, або якщо значки стануть витонченим доповненням до неї, використовуйте їх.

3. Виділіть опцію

Знову ж таки, давайте скористаємося прикладом:

Наведений вище скріншот - це свого роду прайс-лист. Тут вказано три типи рахунків, які можна створити за допомогою сервісу. кольором і розміром.

Це просто запропонований вибір. Щось рекомендоване творцями сервісу на випадок, якщо ми не можемо визначитися з чимось конкретним.

Іноді буває так, що ми просто не можемо ухвалити рішення. Тому нам подобається використати чужу думку. Така процедура дозволяє нам зробити ставку на щось - принаймні, в теорії - оптимальне. Якщо Вас цікавить тема прейскурантів, у мене є дещо для вас. Бартломей Кільян одного разу опублікував у нашому блозі статтю щодо оформлення прайс-листів на веб-сайтах. Обов'язково прочитайте цю статтю, насичену цінною інформацією та прикладами реального життя.

4. Не комбінуйте, не робіть це дивним.

Таблиця - це дуже проста, майже шаблонна форма представлення даних.

Вона зводиться до сітки - осередки X на X.

<Він найзручніший для читання у своїй початковій, стандартній формі - тій, до якої ми всі звикли.

5.Не перестарайтеся з кількістю інформації

Погляньте на скріншот нижче:

Запитайте себе - чи читається ця таблиця?

Його можна поліпшити принаймні кількома способами:

  • досить багато особливостей, характерних для всіх пакетів - тому ви могли б позбутися повторюваних рядків і згадати де-небудь, що всі ці особливості можна знайти в кожному з варіантів
  • колір фону рядків різний для парних і непарних рядків (це може бути погано помітно, але це дійсно так), але при такій великій кількості стовпців можна було б чіткіше розрізняти кольори між ними
  • просто занадто багато інформації представлено одночасно

6. Розгляньте варіант сортування

Таблиці на веб-сайтах можуть бути максимально відсортовані.

Зазвичай для цього заголовки роблять клікабельними - перший клік, наприклад, сортує інформацію по даному стовпцю за зростанням, другий клік - за спаданням і так далі.

Звичайно, це має сенс тільки в тому випадку, якщо, з одного боку, таблиця досить велика, а з іншого - містить дані, які сенс сортувати (тип числа).

7. Розглянемо пошукову систему

Хорошим варіантом може бути пошукова система, яка посилається на дані, що містяться в таблиці.

Знову ж таки, це має сенс тільки в тому випадку, якщо таблиця велика і містить багато даних.

8.Використовуйте відповідні інтервали в осередках

Нижче наведено приклад столу, який, на мій погляд, є надзвичайно естетично привабливим:

Він є ідеальним балансом між достатнім обсягом даних і досить великим званим " білим простором " , тобто. проміжками між окремими елементами.

Такий "перепочинок" дуже корисний з кількох причин.

А як щодо чуйності?

Таблиці на мобільних пристроях можуть викликати досить багато проблем. Вони повинні бути правильно оформлені і для пристроїв з вузькими екранами, оскільки вся інформація, яку вони містять, має виглядати чудово скрізь.

Докладніше пояснення того, як досягти, серед іншого, вищевказаних ефектів (разом з "живими" прикладами і готовим до використання HTML і CSS кодом), дивіться у чудовому підручнику на сайті CSS Tricks. Звідти ж взято і наведену вище анімацію.

Чи залишаються таблиці на веб-сайтах актуальними?

Звичайно, так.

Незважаючи на те, що час іде вперед, столи на веб-сайтах йдуть добре, і немає жодних ознак того, що це зміниться в найближчому майбутньому.

Все тому, що це дуже проста та зрозуміла форма подання інформації.

Проводячи очима рядками і стовпцями, ми можемо легко вивчити цікаві для нас дані.

Сподіваюся, ви знайдете вищенаведену інформацію корисною.

ДІЗНАЙТЕСЯ ЯК ОТРИМАТИ САЙТ ІЗ ЗНИЖКОЮ
Залиште свої дані та наші оператори передзвонять вам, щоб розрахувати вартість та погодити знижку спеціально для Вас
Статті
Публікації у нашому блозі

Якщо Вам цікаво дізнатися більше на тему "таблиці на веб-сайтах", спеціально для Вас ми зробили добірку корисностей з нашого блогу.

всі статті
Є ідеї, але не знаєте, з чого почати?

Дайте відповідь на кілька запитань в онлайні і ми підкажемо!

Бриф – це коротка інформація про Ваш проект. Заповнивши онлайн-бриф на нашому сайті - ви заощадите час і позбавитеся від непотрібних розмов!

Дізнайтесь вартість проекту онлайн! ?
Дайте відповідь на кілька питань і дізнайтеся скільки коштує розробка Вашого сайту!
заповнити бриф
Дізнайтесь як вийти в ТОП у 2021! ?
Дайте відповідь на кілька запитань ОНЛАЙН і дізнайтеся, що потрібно, щоб Ваш сайт вийшов у ТОП !
заповнити бриф