Сім принципів дизайну ікон.

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

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

Основна мета іконки – швидко донести до користувача ідею.

Photo courtesy of olivia mew(CC No Derivatives)

Це іконки на панелі приладів Toyota Prius Prime. Які із цих символів вам зрозумілі? Водії можуть вивчити їх з часом, але деякі з цих піктограм інтуїтивно не зрозумілі. Вам потрібне керівництво, щоб розшифрувати їх значення. Приблизно так вони вишиковуються для мене за рівнем зрозумілості:

Photo courtesy of olivia mew(CC No Derivatives)

Коли іконка використовує незнайому метафору, її важко зрозуміти. “Сигнал нагадування про ремене безпеки” (3-й зліва) досить буквальний, і ми можемо його швидко зрозуміти. “Сигнал електропідсилювача рульового управління” (крайня справа) набагато складніше. Часто незрозуміла іконка просто дратує. У разі керування транспортними засобами неправильне розуміння запобіжних індикаторів може бути небезпечним. Ось кілька значків, які здаються найбільш знайомими – символи кохання, попередження, музики та напрямки вгору/вперед:

Photo courtesy of olivia mew(CC No Derivatives)

Знайомі метафори з сімейства ікон Phosphor Carbon Стрілка є потужним символом для навігації:

Photo courtesy of olivia mew(CC No Derivatives)

Це знаки Нью-Йоркського метрополітену Найбільш успішні іконки легко зрозуміти не тільки групі людей, вони універсальні для різних культур, віку та знань. Вивчіть свою аудиторію та використовуйте метафори та кольори, які резонують з ними. Пам’ятайте, що окрема іконка може бути не найзрозумілішим рішенням, якщо ідея надто абстрактна. У цьому випадку додайте текстову мітку до іконки або знайдіть альтернативу.

Читабельність

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

Photo courtesy of olivia mew(CC No Derivatives)

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

Photo courtesy of olivia mew(CC No Derivatives)

Іконки в мобільному додатку Transit Невелике коригування значно покращить іконки:

Photo courtesy of olivia mew(CC No Derivatives)

Під час роботи з кількома фігурами залишайте достатньо місця між ними. Велика кількість тонких штрихів робить іконку перевантаженою і важкою для читання. Google Maps чудово впорався із завданням – іконки легкочитані при дуже маленькому розмірі:

Photo courtesy of olivia mew(CC No Derivatives)

Вирівнювання

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

Photo courtesy of olivia mew(CC No Derivatives)

Хоча у цій іконці “Play”, трикутник розташований у центрі кола, нашим очам він здається зміщеним. Широка частина трикутника здається «важчою», ніж точка, і зміщеною вліво. Так само, як художники-шрифтовики точно налаштовують шрифти для створення оптичної ілюзії балансу (зверніть увагу на зміщені точки на «i» та «j» та на виступ літери «O»)

Photo courtesy of olivia mew(CC No Derivatives)

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

Photo courtesy of olivia mew(CC No Derivatives)

Висновок: не довіряйте цифрам, скористайтеся очима, щоб перевірити свою роботу.

Стислість

Ідея, виражена в кількох словах, здається ефективною та елегантною. Material Design досить добре ілюструє стислість у своєму системному посібнику з іконок. Замість говорити:

Photo courtesy of olivia mew(CC No Derivatives)

Скажіть простіше:

Photo courtesy of olivia mew(CC No Derivatives)

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

Photo courtesy of olivia mew(CC No Derivatives)

Іноді іконки інтерфейсу набувають більш ілюстративного стилю. Іконки Yelp – це чудові зображення найпопулярніших продуктів харчування. Креветка в іконці тайської кухні вишукана:

Photo courtesy of olivia mew(CC No Derivatives)

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

Photo courtesy of olivia mew(CC No Derivatives)

Послідовність

Щоб досягти гармонії в сімействі іконок, дотримуйтесь тих самих стилістичних правил. До iOS 13 іконки Apple мали всілякі штрихи, заливки та розміри:

Photo courtesy of olivia mew(CC No Derivatives)

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

Photo courtesy of olivia mew(CC No Derivatives)

Apple нещодавно випустила введення у SF Symbols, вражаючий додаток до шрифту San Francisco. SF Symbols охоплює графічний стиль іконок у 9 вагах та 3 масштабах (можливо, трохи складне, але прискіпливе керівництво). Через це іконки здаються гармонійнішими.

Photo courtesy of olivia mew(CC No Derivatives)

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

Photo courtesy of olivia mew(CC No Derivatives)

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

Кожен набір іконок має смак. Що робить його унікальним? Що він каже про бренд? Який настрій він створює? Інтерфейс Waze багато в чому залежить від іконок. Ці барвисті, лаконічні іконки кажуть: Ми химерні!

Photo courtesy of olivia mew(CC No Derivatives)

Іконки Twitter легкі та чіткі:

Photo courtesy of olivia mew(CC No Derivatives)

Іконки Sketch витончені та повітряні:

Photo courtesy of olivia mew(CC No Derivatives)

Freemojis дуже милі:

Photo courtesy of olivia mew(CC No Derivatives)

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

Photo courtesy of olivia mew(CC No Derivatives)

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

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

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

Організація

Утримуйте головний файл у чистоті, правильно називайте свої активи та розміщуйте їх так, щоб їх було легко знайти. Розглянемо найкращий спосіб категоризації. В алфавітному порядку? По розміру? За типом?

Photo courtesy of olivia mew(CC No Derivatives)

Технічні правила:

  • Використовуйте полотно 48x48px
  • Використовуйте центрований stroke 1.5px
  • Використовуйте закруглені кінці
  • Використовуйте суцільні лінії, за винятком випадків, коли ламані сегменти корисні для розуміння
  • Використовуйте прямі сегменти, ідеальні вигини та збільшення кута 15° там, де це можливо
  • При необхідності відрегулюйте криві, щоб дотримуватися принципів дизайну
  • Використовуйте, по можливості, збільшення цілих, парних чисел; зменшіть до 1px та 0.5px за необхідності
  • Використовуйте такі контури фігур: 28x28px коло, 25x25px квадрат, 28x22px ландшафтна орієнтація, 22x28px портретна орієнтація
  • Keep a 6px thick trim area
Source — ux.pub

Як побудувати карту досвіду взаємодії

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

Бренд-айдентика

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

HEX-кодування кольору

У графічних редакторах і коді вебсайтів кольори часто позначаються якось на кшталт

Як зробити UX-ревʼю вашого продукту ?

Що таке UX-ревʼю і чому важливо імплементувати цей процес у ваш продукт? Як зробити аналіз продукту самостійно ?

Особливості стилів у вебдизайні на прикладі сайту з доставлення води

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