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

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

Чому?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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