Кінцевий посібник з дизайну інтерфейсу

Зміст

• 01. Виберіть свою типографіку
• 02. Виберіть правильну палітру
• 03. Стиль посилань і кнопок
• 04. Створіть свої компоненти
• 05. Документуйте та співпрацюйте

Що таке дизайн інтерфейсу користувача? Кращим запитанням було б, що насправді входить у дизайн інтерфейсу користувача? Естетика? Юзабіліті? Доступність? Усі? Як усі ці фактори об’єднуються, щоб забезпечити оптимальну взаємодію з користувачем, і які мають бути першими?

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

01. Виберіть свою типографіку

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

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

«Красива» типографіка насправді потворна, коли її не можна прочитати, бо розчарування завжди переважає естетику. Чудовий дизайн - збалансований та гармонійний.

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

Що стосується читабельності та читабельності, то мінімально допустимий розмір шрифту, визначений Правилами доступності веб-вмісту WCAG 2.0, становить 18pt (або 14pt жирним шрифтом). Найкращий розмір шрифту для використання багато в чому залежить від самого шрифту, але важливо пам’ятати про візуальну ієрархію та про те, як цей базовий розмір відрізняється від резюме та заголовків (тобто h1>, h2>, h3>).

За допомогою вибраного вами інструменту дизайну інтерфейсу (ми будемо використовувати InVision Studio) створіть ряд текстових шарів (Т), а потім відрегулюйте всі розміри, щоб співвіднести з таким шаблоном:

• h1>: 44 пікселів
• h2>: 33 пікс
• h3>: 22 пікс
• p>: 18 пікс

У InVision Studio (та всіх інших інструментах дизайну інтерфейсу) це робиться шляхом регулювання стилів за допомогою панелі Inspector праворуч.

Далі виберіть шрифт, але будьте обережні, тому що деякі шрифти можуть помітити, що це 18 пікселів p> і 22 пікселі h3> виглядає не так по-різному. У нас є два варіанти: налаштувати розміри шрифтів або розглянути інший шрифт для заголовків. Подумайте про останнє, якщо ви передбачаєте, що ваш дизайн буде важким для тексту.

Майте на увазі, що:

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

Висота лінії

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

Ще раз WCAG допомагає нам із цим, заявляючи, що висота рядків повинна бути в 1,5 рази більшою за розмір шрифту. Отже, у вашому інструменті дизайну інтерфейсу в розділі «Рядок» (або подібний) просто помножте розмір шрифту на - принаймні - 1,5. Наприклад, якщо основний текст дорівнює 18 пікселів, тоді висота рядка буде 27 пікселів (18 * 1,5 - ви також можете виконати математичну операцію безпосередньо в інспекторі). Знову ж таки, будьте уважні - якщо 1.6x відчуває себе краще, використовуйте 1.6x. Пам'ятайте, що різні шрифти дадуть різні результати.

Поки рано думати про використання реальних даних у нашому дизайні, але, принаймні, нам все одно слід використовувати дещо реалістичні дані (навіть lorem ipsum). InVision Studio має власний додаток для реальних даних, який допоможе нам побачити, як насправді може виглядати наша типографіка.

Інтервал між абзацами

Інтервал між абзацами - це не стиль, який ми можемо заявити, використовуючи Інспектор студії InVision. Натомість нам потрібно буде вирівняти шари вручну за допомогою Smart Guides (Smart). Подібно до висоти рядка, магічний множник дорівнює 2x (подвійний розмір шрифту). Наприклад, якщо розмір шрифту 18 пікселів, то перед переходом до наступного текстового блоку має бути принаймні 36 пікселів. Інтервал між літерами повинен бути не менше 0,12.

Однак нам не потрібно турбуватися про це, поки ми не почнемо створювати компоненти.

Спільні стилі

Якщо ваш інструмент дизайну інтерфейсу підтримує це (InVision Studio поки що цього не робить), подумайте про те, щоб перетворити ці друкарські стилі на «Спільні стилі», щоб зробити їх швидкими для багаторазового використання, забезпечуючи при цьому візуальну узгодженість. Зазвичай це здійснюється через Інспектора.

02. Виберіть правильну палітру

Вибір ідеальних кольорів для вашого дизайну виходить далеко за рамки естетики: він може інформувати всю ієрархію вашого сайту.

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

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

01. Старк
Плагін Stark сумісний із Sketch та Adobe XD і допомагає перевірити кольорову контрастність та імітувати дальтонізм безпосередньо з полотна. Підтримка Figma та InVision Studio надійде дуже скоро.
02.Кольори
Кольори - це набір із 90 колірних комбінацій, які мають відповідну кількість кольорового контрасту, щоб задовольнити рекомендації WCAG 2.0 - деякі з них навіть спроможні відповідати стандарту AAA.
03. Проект A11y
Проект A11y - це потужний центр для всіх питань, пов’язаних із доступністю. Він включає ресурси, інструменти, поради, навчальні посібники і створюється виробником плагіна Stark та отримує фінансування від InVision.

Три типи кольорів

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

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

Це дозволяє наступне:

• Темний режим буде легко досяжним
• Наш колір CTA ніколи не буде конфліктувати з іншими кольорами
• У будь-якому сценарії ми зможемо підкреслити та зняти акцент

Налаштуйте свою палітру

За допомогою вибраного вами інструменту для дизайну інтерфейсу створіть одну досить велику монтажну область (натисніть A) для кожного кольору (з назвою „Бренд“, „Нейтральний / Світлий“ та „Нейтральний / Темний“). Потім у кожній монтажній області створіть додаткові менші прямокутники, що відображають темніші та світліші варіації кольору, а також самі інші кольори.

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

Контраст

Далі нам потрібно буде перевірити наші кольори на оптимальний контраст кольорів. Існує безліч інструментів, які можуть це зробити, наприклад, плагін Stark для Sketch та Adobe XD або Contrast для macOS - однак таке рішення в Інтернеті, як Contrast Checker або Color Contrast Checker, буде чудово працювати.

Перевірте кольорову контрастність для кожної комбінації та відповідно налаштуйте кольори. Якщо ви не впевнені, які кольори використовувати, спробуйте скористатися рекомендаціями Color Safe.

03. Стиль посилань і кнопок

Розмір

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

Візуальний тест на доступність - це тест на юзабіліті, який використовується, щоб визначити, чи є цільові крани натисканням. Синхронізуйте дизайн із Studio на Freehand (⌘⇧F), надішліть отриману URL-адресу тестувальникам і попросіть їх обвести елементи, які, на їх думку, можна натиснути.

Користувачі Non-InVision Studio також можуть використовувати Freehand, але користувачі InVision Studio можуть легко запускати свої дизайни у ​​Freehand від InVision Studio, що є найшвидшим та найефективнішим способом отримання візуальних відгуків від користувачів.

Як правило, ми рекомендуємо оголошувати текст кнопок як 18 пікселів (так само, як основний текст), але щоб самі кнопки мали три варіації за розміром:

• Звичайний: Висотою 44 пікселів (закруглені кути: 5 пікселів)
• Великий: Висотою 54 пікселів (закруглені кути: 10 пікселів)
• Дуже великий: 64 пікселі у висоту (закруглені кути: 15 пікселів)

Це дозволяє нам зробити певні кнопки більш важливими, не покладаючись на колір, а також вкласти кнопки (наприклад, використовувати кнопку всередині мінімально виглядаючого поля форми).

Глибина

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

Інтерактивність

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

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

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

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

04. Створіть свої компоненти

Компоненти значно заощаджують час, і всі засоби проектування інтерфейсу пропонують цю функцію (наприклад, у Sketch їх називають символами). У Studio ми можемо створювати компоненти, вибираючи всі шари, що повинні складати компонент, та використовуючи ⌘К ярлик.

Використання компонентів

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

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

Наприклад, якщо наш каркасний каркас вимагає компонента 3x1, але ми знаємо, що вміст не є кам’яним, невелике споглядання може змусити нас замислитись: „Що, якщо ці компоненти виявляться 4x1?“. Правило полягає в тому, що: розробляйте лише ті потреби користувачів, які вже існують, але намагайтеся зробити рішення відносно гнучкими. В іншому випадку ми згодом закінчимося дуже брудним «дизайнерським боргом».

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

Цей метод створення довідників стилів (і, врешті-решт, створення самого дизайну) особливо добре працює з модульними / картковими макетами, хоча «загальні зони», такі як колонтитули та колонтитули, також є чудовими кандидатами для компонента.

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

Використовуючи наші правила

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

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

Стрес-тестування

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

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

05. Документуйте та співпрацюйте

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

Кольори

Першим кроком є ​​збереження всіх кольорів у зразку «Кольори документів», якщо ми цього ще не зробили - це полегшить доступ до них, коли нам потрібно застосувати їх у своєму дизайні.Для цього відкрийте віджет вибору кольорів у Інспекторі, виберіть зі спадного меню пункт «Кольори документів», а потім натисніть значок +, щоб додати колір до зразка. Це працює однаково в більшості інструментів інтерфейсу користувача.

Спільні бібліотеки

Далі нам потрібно перетворити наш документ - разом із типографськими стилями, кольорами, кнопками, зонами загального користування та основними компонентами - у спільну бібліотеку.

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

InVision Studio дещо обмежена в тому сенсі, що вона ще не синхронізована з офіційним інструментом Design System Manager, але досить просто розмістити бібліотеку в Dropbox, щоб інші дизайнери могли її використовувати та оновлювати з часом. Коли вносяться зміни (локально або віддалено), кожен файл Studio, який використовує бібліотеку (знову ж локально або віддалено), запитає, чи хочете ви оновити кольори та компоненти. Так підтримуються бібліотеки дизайну між командами.

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

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

Дизайн в масштабі

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

Наприклад, ми можемо захотіти використовувати текстові шари для анотації нашої бібліотеки як засіб пояснення випадків використання різних елементів. Що стосується типографських стилів, ми можемо навіть відредагувати текст, щоб він був більш описовим (наприклад, "h1> / 1.3 / 44px"). Це говорить це h1>s має складати 44 пікселів і мати висоту рядка 1,3.

Передача дизайну

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

Якщо ви стурбовані усуненням несправностей та керуванням веб-сайтом, переконайтесь, що у вас є відповідна послуга веб-хостингу, це допоможе, але для вашої дизайнерської системи вам знадобиться інструмент передачі дизайну InVision - Inspect. Щоб використовувати його, ми натискаємо кнопку / значок «Опублікувати у InVision» у InVision Studio, відкриваємо отриману URL-адресу, а потім натискаємо, щоб перейти в режим перевірки. Це справді зручно.

Цей вміст спочатку з’являвся у нетто-журналі.