7 принципів дизайну іконок

Як якісно «задизайнити» іконки – 7 важливих правил
Зрозумілість, розбірливість, вирівнювання, лаконічність, логічність, індивідуальність, простота використання.

Переклад матеріалу дизайнера Хелени Джан. 

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

Давайте на реальних прикладах розкажемо вам про основні принципи якісної розробки іконок.

1. Зрозумілість

Основна мета іконки – швидко донести концепцію.

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

Розмістимо значки за рівнем зрозумілості:

Коли для ілюстрації використовуються незвичні метафори, це важко зрозуміти.
Наприклад, «сигнал нагадування» про ремені безпеки (третій зліва) досить точний, і ми можемо його швидко зрозуміти. А от «Сигнальна лампа електропідсилювача керма» (крайній праворуч) невизначена.

Незрозумілі іконки не просто розчаровують. Для водія неправильне розуміння попереджувальних індикаторів може бути небезпечним.

Ось кілька значків, які здаються більш знайомими: символи кохання, попередження, музики і напрямки вгору / вперед:

Стрілка – це функціональний символ, який можна використовувати для пошуку шляху:

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

Поважайте свою аудиторію – використовуйте такі метафори і кольори, котрі близькі людям.

Пам’ятайте, якщо ідея занадто абстрактна, то сама по собі іконка не буде зрозумілим рішенням. В такому випадку доповніть значок текстом або знайдіть альтернативу.

2. Розбірливість

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

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

Трішки підправимо і ось виглядає краще:

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

Ось приклад лаконічних значків з Google Map:

3. Центрування

Щоб переконатися, що кожен значок виглядає збалансованим, зробіть оптичне вирівнювання елементів.

У цій іконці Play трикутник метрично розташований в центрі кола, але наші очі бачать його зміщеним. Ширша частина трикутника здається «важчою» і зміщується вліво.

Ось чому дизайнери налаштовують оптичний баланс в шрифтах (зверніть увагу на зміщені від центру точки над буквами «i» та «j» і виступи у літери «о»):

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

Так виглядає краще. Урок: не довіряйте сліпо цифрам, а перевіряйте свою роботу «на око».

4. Лаконічність

Чим менше слів, тим зрозуміліша суть.

Прочитайте це речення: «Навчання інших предмету, що ви знаєте, зміцнює ваше власне розуміння теми». А тепер сформулюємо коротше: «Коли один вчить, вчаться двоє». Ідеально!

Ось як компанія Material Design продемонструвала нам принцип стислості з допомогою іконок. Замість того, щоб малювати надто складний значок човна:

Краще намалюйте простий значок човна:

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

В інтерфейсі користувача редуктивний стиль допомагає роз’яснити зміст і звільнити місце для контенту. Іконки Telegram – лаконічні і приємні:

Іноді значки для інтерфейсу користувача виконують функцію пояснення. Погляньте, як на Yelp іконки спрощують пошук популярних продуктів харчування. Зверніть увагу на цю чарівну креветку в іконці тайської кухні:

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

5. Логічність

Якщо ви намалювали серію іконок, бажано, щоби вся колекція виглядала гармонічно, в одному стилі.

Доки не з’явилася версія iOS 13, на іконках Apple використовувалися всілякі штрихи, заливки і розміри:

Подивіться на цей набір. Хіба не здається, що деякі значки виглядають «важче» інших? Будь-яка іконка має візуальну вагу, яка визначається такими параметрами: заливка, товщина обведення, розмір і форма. Дотримуйтеся однакових параметрів, тоді набір іконок буде в єдиному стилі.

Погляньте на інший набір іконок від Apple – SF Symbols. Ці іконки виконані в дев’яти вагах і трьох масштабах (можливо, трохи складно, але ретельно). Виглядає гармонійніше.

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

6. Індивідуальність

Кожен набір іконок особливий. Що робить його унікальним? Що це говорить про бренд? Який настрій це створює?

В інтерфейсі Waze використовується багато іконографії. Ці яскраві іконки ніби кажуть: «Ми дивакуваті!».

А тепер звернемо увагу на значки в Twitter – спокійні кольори, легкі і чіткі лінії:

Іконки Sketch дуже вишукані і невагомі:

Freemojis милі та симпатичні:

7. Простота використання

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

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

Організація

Тримайте базовий файл в «чистоті», коректно називайте об’єкти і розміщуйте так, щоб їх було легко знайти. Подумайте, як вам буде зручніше класифікувати файли – за алфавітом, по розміру, по типу?

Створення документів

Сформулюйте основні принципи для набору іконок. Наприклад:

☑ Зрозумілість. Перш за все – чіткість. Значки мають легко розпізнаватися.

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

☑ Образ. Будьте оригінальними. Декілька унікальних деталей здатні оживити занадто строгі іконки.

Сформулюйте технічні вимоги. Наприклад:

• Полотно 48×48 px.
• Обведення по центру 1,5 px.
• Заокруглені кінці.
• Суцільні лінії, крім випадків, коли розбиті сегменти необхідні для розуміння.
• Прямі сегменти, ідеальні вигини і збільшення кута на 15° там, де це можливо.
• При необхідності відрегулюйте криві, щоб дотримуватися принципів дизайну.
• Для нарощування використовуйте цілі числа, зменшіть до 1 px і 0,5 px при необхідності.
• Дотримуйтеся контурів: 28×28 px – коло, 25×25 px – квадрат, 28×22 px – альбомна орієнтація, 22x28px – портретна орієнтація.
• Зберігайте область обрізки товщиною 6 px.

        Тестування:

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

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

Уявіть, що набір іконок – це жива істота. Для успішного розвитку потрібно трішки любові, знань та інструментів.