Креш-курс по UI-дизайну



Ми завжди в пошуках хороших статей про дизайні, щоб потім використовувати їх у роботі над сайтом «Я люблю ІП». Сьогодні ми перевели ще одну статтю, яка розповідає, чим відрізняється UI-дизайн від UX-дизайну і на яких основних принципах будується дизайн інтерфейсів.

UI vs. UX

Якщо ви хоч трохи цікавилися дизайном додатків, то напевно чули терміни «UI» і «UX». Але чим же вони відрізняються?
У найпростішій формі, UX-дизайн — це те, що робить інтерфейс корисним, а UI-дизайн робить його красивим. Дизайн інтерфейсів — це суміш візуальної ієрархії і елементів інтерфейсу. Щоб розібратися, чим відрізняється прекрасний дизайн від просто хорошого, необхідно зрозуміти, що дизайн інтерфейсів — це всього лише один з шарів цілого дизайн-процесу. Можливо, саме тому ці два терміни так часто плутають. У цій статті я постараюся розповісти, в чому ж полягає різниця між ними з точки зору дизайн-процесу.
Згідно з книги Дж. Гарретта «Елементи досвіду взаємодії», UX-дизайн можна визначити через п'ять основних рівнів. Давайте почнемо з самого абстрактного.

1. Стратегія

Цілі сайту та потреби користувачів


У широкому розумінні стратегія — це основа продуктового дизайну. На даному етапі застосовуються різні техніки дослідження, включаючи користувальницькі інтерв'ю, аналіз конкурентів, персонажі та ін., для того, щоб зрозуміти:
  1. Яку проблему ви намагаєтеся вирішити?
  2. Що потрібно користувачам?
  3. Як ваш продукт вписується в контекст вашого бізнесу (які його цілі)?

2. Набір можливостей

Функціональні специфікації та вимоги до контенту


На даному етапі ви повинні визначити набір функцій і обсяг інформації для вашої платформи. Іншими словами:
  1. Як ви будете вирішувати цю проблему? Які функції ви хочете реалізувати і в якому порядку?
Головний виклик для дизайнера тут — це правильно розставити пріоритети з мінімальними витратами. Напевно, у вас є сотні ідей, як вирішити проблему, але ви не можете впровадити їх все.

3. Структура

Інформаційна архітектура та проектування взаємодії


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

4. Компонування

Дизайн інтерфейсу і інформаційний дизайн


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

5. Поверхня

Візуальний дизайн і чуттєве сприйняття


Рівень поверхні, як і передбачає назва, прагне створити чудове чуттєве сприйняття і візуальний дизайн. Завдання дизайнера тут — створити інтуїтивну зв'язок з користувачами через успішну комунікацію бренду, продукту, його цінностей і властивостей цілісної картині.
Саме тут ви знайдете UI-дизайнерів, що роблять велику частину своєї роботи, використовуючи такі інструменти як Sketch, Photoshop, Adobe Experience Design, Illustrator або Figma.
Тепер давайте перейдемо до основних принципів хорошого UI-дизайну.

Принцип № 1. Простота понад усе

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

Принцип № 2. Давайте ясну, інформативну зворотний зв'язок

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


Відмінний приклад — це індикатор завантаження постів у стрічці Facebook. Поки йде завантаження контенту, індикатор завантаження (у формі контенту) інформує користувачів про те, що контент завантажується.

Принцип № 3. Сталість має значення

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






Може здатися, що це три різних сайту від трьох різних компаній, але це не так. Чому так сталося? Тому що в меню на цих сторінках використовується різна колірна гамма, різні шрифти і різне розташування. Це може дезорієнтувати користувача і збити його з пантелику, так як зовсім неочевидно, що ці сторінки належать одному сайту.
Як ви можете підтримувати сталість, будучи дизайнером? Ви можете створювати дизайн, використовую постійну сітку, наприклад, сітку з 8 пунктів, яка часто використовується в дизайні іконок і мобільний додатків. Також ви можете використовувати постійну колірну гаму і елементи навігації на всіх екранах. Всі ці елементи можна включити в керівництво по стилю.


Висновок: сталість і хороша структура дозволять вашим користувачам відчувати себе як вдома.

Принцип № 4. Якщо сумніваєтеся, використовуйте відомі дизайн-патерни

Не зрозумійте мене неправильно — інновації-це добре і всіляко вітаються, але тільки не на шкоду досвіду взаємодії користувачів. Не потрібно винаходити новий велосипед там, де старий відмінно справляється зі своїм завданням. Наприклад, якщо ви не впевнені, що іконка точно і інтуїтивно відображає значення слова, то краще використовувати просто слово. Або дотримуватися звичайної кольорової гами, де відтінки червоного використовуються для попередження про небезпеку, а зелений свідчить про успішне завершення.
Чому потрібно використовувати відомі дизайн-патерни? Справа в тому, що багато з них ґрунтуються на людському сприйнятті. Візьмемо, наприклад, F-патерн для сканування інформації.


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


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




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

Принцип № 5. Використовуйте візуальну ієрархію

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


Те, як ми сприймаємо інформацію, залежить від декількох факторів. Давайте подивимося на основи візуальної ієрархії.
1) Типографіка
З чого складається хороша типографіка? Два основних фактори — це чіткість і зручність читання.
Чіткість — це властивості, притаманні конкретному шрифту, які дозволяють його символів відрізнятися один від одного. Це повністю залежить від шрифту і тут мало що можна зробити. Тому вибирайте відповідний шрифт.
Зручність читання — це те, як ви маніпулюєте окремим шрифтом, щоб його було легше сприймати.


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


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


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


2) Біле (або негативний) простір
У вас коли-небудь було таке, що ви дивитеся на меню/ сайт/ інтерфейс і думаєте: «Мені подобається, як це виглядає, але я не знаю чому»? Тепер ви знаєте. Вся справа в білому просторі. Білий простір надзвичайно допомагає в сприйнятті. Дослідження 2004 року показало, що відповідне використання білого простору між абзацами і для поля праворуч і ліворуч покращує сприйняття майже на 20 %. Користувачам легше сфокусуватися і переробити такий контент.

Собака або кішка?

Багато хто вважає, що біле простір — це справа смаку. Я думаю, це набагато більш об'єктивно. Ми можемо вміло використовувати біле простір для того, щоб посилити візуальну ієрархію. Давайте подивимося на сайт Helen Tran.


Прекрасне портфоліо! Тепер подивимося ще раз більш уважно.


Ви помітили, як контент розбитий на чотири чітких блоку? Давайте підемо ще далі.


Helen використовує комбінацію з інтерліньяжу, розміру шрифту, кольору і білого простору для того, щоб відокремити контент всередині кожного блоку. Це дозволяє користувачам легко його сканувати.
3) Колір
Теорія кольору, правда, дуже і дуже складна. Моя мета не в тому, щоб розповісти вам всю теорія кольору, а в тому, щоб дати вам кілька принципів, які ви зможете використати в своєму дизайні вже зараз.


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


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


І нарешті, менше означає більше. Чим більше кольорів ви використовуєте, тим менше значення кожного з них. Відмінний приклад — це останній редизайн Instagram.


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

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.