Таблиці на веб-сайтах

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

Чому?

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

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

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

Про що варто пам'ятати під час створення таблиць на веб-сайтах?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Середній варіант виділений не просто так - і кольором, і розміром.

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

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

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

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

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

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

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

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

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

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

Запитайте себе - читаємо

Його можна покращити, принаймні, декількома способами:

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

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

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

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

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

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

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

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

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

Однак слід також враховувати, що зараз ми цілком комфортно користуємося пошуковими системами, вбудованими у веб-браузер, тому створення пошукової системи спеціально для конкретної таблиці має бути добре мотивовано.

8.Используйте соответствующие интервалы в ячейках

Ниже приведен пример стола, который, на мой взгляд, является чрезвычайно эстетически привлекательным:

Он представляет собой идеальный баланс между достаточным объемом данных и достаточно большим так называемым "белым пространством" , тобто. проміжками між окремими елементами.

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

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

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

По-третє, зараз у моді плоский дизайн, тобто використання меншої кількості елементів, відмова від складних форм та тіней та використання вищезгаданого вільного простору. Цей дизайн просто тішить око.

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

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

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

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

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

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

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

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

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