https://blog-archive.alexkolodko.com/tags/grafika/ Олександр Колодько. Інформаційний та навігаційний дизайнер. Співзасновник команди ARC, співзасновник та головний дизайнер в Агентах змін (А3). Пишу про дизайн і цікаве мені · alexkolodko.com · wayfinding.systems uk Aegea 11.3 (v4134) Олександр Колодько. Інформаційний та навігаційний дизайнер. Співзасновник команди ARC, співзасновник та головний дизайнер в Агентах змін (А3). Пишу про дизайн і цікаве мені · alexkolodko.com · wayfinding.systems 22 https://blog-archive.alexkolodko.com/all/piktogrami-na-plashkah-pogana-ideya/ Sun, 21 Mar 2021 23:30:37 +0200 https://blog-archive.alexkolodko.com/all/piktogrami-na-plashkah-pogana-ideya/ <p>Для чого потрібні піктограми? Вікіпедія нам каже, що це умовний малюнок із зображенням будь-яких дій, явищ, предметів і т. д.</p> <p>Дві основні задачі піктограм:</p> <ol start="1"> <li>Бути зрозумілою. На відміну від логотипів, чим більш впізнаваний образ на піктограмі, то більша ймовірність, що її правильно зчитають.</li> <li>Зчитуватись. Піктограми разом із текстом часто зчитуються у поганих умовах і впізнавана форма самої піктограми дуже допомагає її зчитати.</li> </ol> <p>Тож не варто використовувати піктограми на плашках, бо форма плашки нівелює форму іконки. Наприклад, якщо у нас є види транспорту, то основні їх відмінності у деталях (у тролейбуса зверху роги, у залізниці знизу колії, у трамвая пантограф зверху та рейки знизу).</p> <div class="e2-text-picture"> <img src="https://blog-archive.alexkolodko.com/pictures/icons-legibility-form.png" width="1747" height="713" alt="" /> </div> <p>Якщо взяти піктограми без плашок, з контуром або з плашкою та зменшити або розмити та додати світіння, то можна змоделювати різницю.</p> <div class="e2-text-picture"> <img src="https://blog-archive.alexkolodko.com/pictures/icons-legibility-2.png" width="1684" height="702" alt="" /> <div class="e2-text-caption">Порівняння піктограм без плашок, з рамками та з плашками</div> </div> <p>На знаках з підсвіткою додатково гало-ефект (halo effect) погіршує зчитування форм. Світіння створює додатковий ореол світла, який ще більше ховає форму. Особливо це помітно на знаках, де інформація просвічується, а тло — ні. Наприклад, на знаках у аеропорті Бориспіль піктограми на білих плашках і ореол на них дуже погіршує зчитування.</p> <div class="e2-text-picture"> <div class="fotorama" data-width="1024" data-ratio="1.503671071953"> <img src="https://blog-archive.alexkolodko.com/pictures/8011274458_95ea582e2f_b-2.jpg" width="1024" height="681" alt="" /> <img src="https://blog-archive.alexkolodko.com/pictures/29497798247_85937e8ff7_b.jpg" width="1024" height="683" alt="" /> <img src="https://blog-archive.alexkolodko.com/pictures/kbp-example-bad.JPG" width="1600" height="1200" alt="" /> </div> <div class="e2-text-caption">Гало-ефект на піктограмах</div> </div> <p>А чого тоді використовують плашки під піктограмами? Зазвичай хочеться вирівнювати верстку, а вирівнювати по плашках набагато простіше, ніж думати, як вирівняти без плашки. Тут видно ще один мінус плашок — щоб форма піктограми нормально зчитувалась то потрібно додавати поля від краю плашки, а це зменшує розмір самої піктограми.</p> <div class="e2-text-picture"> <img src="https://blog-archive.alexkolodko.com/pictures/icons-legibility-withtext.png" width="1052" height="889" alt="" /> <div class="e2-text-caption">Різні піктограми разом з текстами</div> </div>