Комплексний посібник зі створення дизайну інтерфейсу користувача для iOS додатків

Цей посібник охоплює основні теми, які необхідно знати для створення високоякісного дизайну, що відповідає рекомендаціям Apple.

Структура:

• Макет і сітка
• Кольори
• Типографіка
• Іконографія
• Компоненти
• Переходи

Макет і сітка

У Figma ви можете знайти різні розміри обкладинок для iPhone, і ви можете запитати себе, який з них вибрати для дизайну. Справа в тому, що на рівні коду XCode автоматично підлаштовує дизайн макета під вибраний пристрій, тому ви можете вибрати розмір обкладинки для найпопулярнішого iPhone і спроектувати UI з урахуванням специфікацій макета цієї моделі.

Зображення нижче демонструє регіони макетів і специфікації для iPhone 14 Pro.

Регіони розкладки та технічні характеристики iPhone 14 Pro

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

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

Як визначити сітку для мобільного додатку:: 1.

1. Створіть 8-точкову сітку, щоб точно розмістити елементи на екрані.
2. Визначте ліве та праве поля з мінімальним розміром 16pt, це стандарт для iOS.
3. Визначте кількість колонок, яка є оптимальною для ваших потреб. Розмір жолоба 16pt є найпоширенішим, однак, якщо вам потрібно визначити менший або більший розмір жолоба, вам потрібно врахувати, що в розтягнутих сітках розмір жолоба впливає на ширину колонки, тому чим більше розмір жолоба, тим менше ширина колонки.

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

Приклад мобільної сітки

Кольори

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

Семантичний колір - це колір, який має назву, що пояснює його призначення. Кожен семантичний колір має варіанти кольорів, такі як Первинний, Вторинний і Третинний, які використовуються для диференціації вмісту на основі рівня ієрархії. Наприклад, якщо ви хочете визначити кастомний колір для основного фону, назва кольору може бути appPrimaryBackgroundColor, де app - це скорочена назва вашого бренду/додатку, а PrimaryBackground - це семантична назва кольору. Варто зазначити, що назва кастомного кольору не повинна збігатися з системним кольором iOS.

Приклад кастомних кольорів, визначених у Figma

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

Основний колір

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

Щоб генерувати відтінки кольорів у Figma, ви можете скористатися цим плагіном.

Основні кольори, визначені у Figma

Приклади основних кольорів у популярних мобільних додатках

Другорядні та акцентні кольори

Другорядні кольори використовуються для підтримки основного кольору і додають дизайну глибини та різноманітності.

Приклади вторинних кольорів у популярних мобільних додатках

На додаток до другорядного кольору, ви можете зустріти термін "акцентний" колір. Ви можете розглядати акцентні кольори як частину другорядних кольорів, які використовуються для виділення важливих дій та елементів керування.

*Акцентні кольори найкраще підходять для Елементи керування виділенням, такі як повзунки та перемикачі

• Підсвічування виділеного тексту
• Індикатори виконання
• Посилання та заголовки

Щоб знайти другорядні кольори, які доповнюють основний, скористайтеся генераторами колірних схем, як-от Coolors. Зазвичай, додаток повинен мати 1 основний, 1-2 додаткових і 1-3 акцентних кольори.

Приклади додаткових та акцентних кольорів, які доповнюють основний колір

Кольори заливки

В iOS кольори заливки використовуються для елементів інтерфейсу, які дозволяють просвічувати колір фону. Кольори заливки мають однакове значення кольору, але з різним рівнем непрозорості для кожного варіанту кольору.

Варіанти кольорів заливки в iOS:

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

Кольори заливки iOS

Приклад користувацьких кольорів заливки, визначених у Figma

Кольори тла

iOS визначає варіанти кольору тла для розрізнення вмісту та елементів групи.

• Первинний для загального вигляду, основного фону вашого додатку.
• Вторинний для групування вмісту або елементів у межах загального вигляду.
• Третинний** для групування вмісту або елементів у межах вторинних елементів.

Фонові шари в iOS: незгруповані (ліворуч) та згруповані (праворуч).

Приклад кольорів фону в мобільному додатку

Кольори міток

Колір мітки має первинний, вторинний, третинний та четвертинний варіанти. Залежно від рівня важливості колір має свій рівень прозорості.

Кольори міток

• Первинний колір мітки для виділення важливого тексту або вмісту, який має бути помітним для користувача. Наприклад, ви можете використовувати основний колір для назв і заголовків, міток сторінок на панелях навігації, міток полів або елементів керування введенням у формах. Другий колір мітки для відображення підписів або допоміжної інформації. Вторинні мітки можна використовувати у формах і полях введення для надання додаткового контексту або інструкцій для полів або елементів керування введенням, а також у списках і таблицях для відображення другорядної інформації та деталей про елементи списку або таблиці. ** Третинний колір мітки** для відображення ще менш важливого тексту або вмісту, наприклад, додаткової інформації або деталей, які не є важливими для розуміння користувачем програми.

Приклад кольорів міток у мобільному додатку

Кольори роздільників

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

В iOS визначено два типи кольорів роздільників: Separator (з рівнем прозорості) і Opaque separator (звичайний роздільник).

Користувацькі кольори роздільників, визначені у Figma

Приклад кольорів роздільників у мобільному додатку

Функціональні кольори

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

Рекомендації щодо функціональних кольорів:

• Стан успіху: Зелений часто використовується для позначення стану успіху. Це може бути використано, щоб показати, що завдання було успішно виконано або що форма була заповнена правильно.
• Стан попередження: Жовтий або помаранчевий зазвичай використовується для позначення стану попередження. Це може бути використано, щоб попередити користувача про потенційну проблему або вказати, що необхідна дія ще не завершена.
• Стан помилки: Червоний часто використовується для позначення стану помилки. Він може використовуватися для тексту або кольору тла, або для таких елементів, як іконки чи кнопки.

Приклад функціональних кольорів, визначених у Figma

Приклади функціональних кольорів у мобільних додатках

Керування кольорами

Існує багато плагінів для Figma, які можуть допомогти в управлінні кольорами:

1. Color Palette Generator генерує палітру кольорів на основі одного кольору, який ви надаєте.
2. Color Contrast Checker допомагає вам переконатися, що ваш вибір кольорів відповідає рекомендаціям доступності, перевіряючи коефіцієнт контрастності між двома кольорами.
3. Colorblind Simulator дозволяє переглянути ваші дизайни так, як вони виглядали б для людини з певним типом дефіциту кольорового зору. Це може допомогти вам переконатися, що ваш дизайн доступний для всіх користувачів.
4. Магія темного режиму дозволяє створити темну тему на основі створеної вами світлої теми.

Типографіка

Apple має набір вбудованих шрифтів, таких як San Francisco та New York.

Існує кілька варіантів San Francisco, зокрема SF Pro, який є стандартною версією шрифту.

Якщо ви бажаєте, ви все ще можете використовувати кастомні шрифти, і тут є кілька моментів, які слід врахувати:

1. Переконайтеся, що шрифт розбірливий. Є кілька факторів, які впливають на розбірливість: розпізнавання символів, ширина кегля (товщина ліній, з яких складаються символи), трекінг (інтервал між літерами), лід (міжрядковий інтервал), розміри шрифтів і стилі шрифтів.
2. Обмежте кількість гарнітур і шрифтів у вашому додатку. Зазвичай ми повинні використовувати максимум два шрифти в мобільному додатку, щоб зберегти простий і гармонійний інтерфейс.
3. Важливо враховувати, наскільки добре шрифти доповнюють один одного. Уникайте поєднання занадто схожих типів шрифтів, інакше їх буде важко відрізнити один від одного.

Подумайте про використання Google Fonts для попереднього перегляду різних комбінацій шрифтів. Ви також можете скористатися готовою палітрою Google Font type pairing palette, створеною Figma.

Стилі та розміри шрифтів

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

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

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

Стилі шрифтів та їхні типові розміри і вага за замовчуванням

Розмітка тексту

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

**Відступ - це відстань між гліфами. У CSS він називається "міжлітерний інтервал", тому трекінг і міжлітерний інтервал є синонімами.

Відступ - це інтервал між рядками тексту. У Figma та CSS ця властивість називається "line-height". Збільшення або зменшення висоти рядка може допомогти поліпшити читабельність. Нахил вимірюється від базових ліній тексту.

Кілька порад щодо відстеження та нахилу:

• Збільшуйте кегль, якщо хочете досягти гарної читабельності. Figma рекомендує встановлювати висоту рядка в 1,125 рази більше розміру шрифту (112,5%) як мінімум, щоб отримати читабельний текст, однак це значення може змінюватися в залежності від шрифту. Наприклад, Apple визначає вирівнювання для основного тексту (шрифт SF Pro) 129% (22 пт) як мінімальне значення. Однак вони рекомендують збільшити кегль до 141% (24 пт), якщо ми хочемо досягти гарної читабельності для довгого абзацу тексту.

Приклад розташування значень у довгому абзаці тексту

• Щоб зберегти хорошу читабельність, краще уникати використання занадто високих або занадто низьких значень відстеження по відношенню до розміру шрифту. Ви можете звернутися до Таблиці відстеження Apple, де наведено оптимальні значення відстеження для системного шрифту.

Значення трекінгу у тексті

Іконографія

Іконки - це графічні елементи, які повинні передавати значення елементів інтерфейсу, дій та станів. Ефективні іконки є простими, звичними та зрозумілими для користувачів.

iOS надає набір векторних іконок (SF Symbols), які ви можете використовувати у своєму додатку для iOS. Ось файл у форматі Figma, де ви можете знайти SF-символи. Ви також можете редагувати та створювати власні SF-символи, і ось детальне відео про те, як це зробити.

Кілька порад щодо використання піктограм у програмах для iOS: * Якщо ви хочете використовувати власні піктограми

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

Єдиний стиль у користувацьких піктограмах

• Перевірте контрастність ваших іконок. Згідно з W3C, "графічні об'єкти", такі як піктограми, повинні мати коефіцієнт контрастності щонайменше 3:1.

Піктограми та коефіцієнт контрастності

• Якщо ваші іконки неможливо розпізнати з першого погляду, додайте текстові підписи, де це можливо. У наведеному нижче прикладі, якби Headspace не мав текстових підписів, було б важко швидко зрозуміти значення лівої іконки (Сьогодні).

Іконки на панелі вкладок у мобільному додатку Headspace

• Переконайтеся, що ви використовуєте іконки у векторному форматі, наприклад, SVG, щоб вони працювали на всіх стандартних екранах з роздільною здатністю 1x і на дисплеях для сітківки ока з роздільною здатністю 2x і 3x.
• Іконки повинні бути розбірливими і легко натискатися.
• Іконки на звичайній панелі вкладок повинні мати розмір не менше 25x25 пікселів, а іконки на панелі навігації можуть мати розмір 20x20 або 30x30 пікселів.

Щоб отримати більше інформації про іконки в iOS, перегляньте документацію Apple.

Компоненти

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

Списки та таблиці

Список і таблиця - це способи відображення колекцій елементів. Ці елементи можуть бути текстом, іконками/зображеннями або комбінацією тексту та елементів керування вибором.

Анатомія списку або таблиці в iOS

Приклади списків у популярних мобільних додатках

Найкращі практики

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

Колір тла і таблиці

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

Групи таблиць

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

Стилі шрифтів для заголовків у списку

Панель вкладок

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

Анатомія панелі вкладок

Найкращі практики

• Уникайте групування не пов'язаного між собою контенту на одній вкладці, наприклад, "Головна" або "Огляд". Наприклад, на зображенні нижче показано, як на вкладці "Головна" об'єднані такі не пов'язані між собою функції, як "Пошук", "Вибране" та "Друзі", що ускладнює користувачам пошук потрібних їм матеріалів. Щоб виправити це, розділіть вміст на різні вкладки, визначивши ключові функції та розділи, і згрупуйте лише пов'язаний вміст на кожній з них.

Панель вкладок і незв'язаний вміст

• Зробіть дизайн панелі вкладок узгодженим зі стандартною панеллю вкладок iOS, щоб уникнути непотрібної адаптації користувачів до незнайомого дизайну.

Кастомна панель вкладок

Панель навігації

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

Анатомія навігаційної панелі

Найкращі практики

• Уникайте додавання надмірної кількості дій на панелі навігації, це робить інтерфейс занадто захаращеним.

Панель навігації із завеликою кількістю дій

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

Контраст між навігаційною панеллю та елементами інтерфейсу в ній

Переходи

Перехід - це спосіб зміни вигляду одного подання або набору подань на інший.

Переходи в iOS

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

Найкращі практики, про які слід пам'ятати:: 1.

1. Уникайте використання складних або кричущих переходів, оскільки вони можуть відволікати користувача.
2. Використовуйте однакову тривалість і хронометраж, щоб створити плавний і безперебійний досвід для користувачів.
3. Уникайте занадто швидких або занадто повільних переходів, оскільки вони можуть відволікати увагу користувача.
4. Переконайтеся, що на рівні коду ваші кастомні переходи реагуватимуть на налаштування доступності, коли "Зменшити рух" вимкнено.

Деякі інструменти, які дозволяють створювати кастомні переходи без коду:

• LottieFiles
• ProtoPie
• Flow

Переклад uxdesign.cc