Як ми семантичні кольори робили
Протягом останніх місяців ми переосмислювали свій підхід до кольорів у нашій дизайн системі Cobalt. Кольори є фундаментальною складовою інтерфейсу: Вони структурують візуальну мову, допомагають підкреслити бренд. Розробники та дизайнери щодня використовують їз для створення нашого продукту.
Однак, без чітких гайдлайнів, кольори можуть призвести до безладу в продукті, якщо їх неправильно використовують кілька дизайнерів.
Дозвольте розповісти, як ми це зробили і з якими викликами зіткнулися протягом цього проекту, який, як ви побачите, не такий простий, як здається: .
- Спочатку я поясню, як ми працювали з кольорами в Getaround, як з точки зору дизайну, так і з технічної
- Окреслю обмеження цієї системи і запитаю, як ми можемо її покращити
- Потім я познайомлю вас зі світом семантичних кольорів
- Зрештою, я перейду до конкретики і покажу вам, як ми впровадили цю систему і які переваги ми отримали!
Це перша частина серії з 3 статей.
Підписуйтесь на Inside Getaround, щоб отримувати сповіщення, коли ми опублікуємо наступні частини.
1️⃣ Як ми працювали з кольорами в Getaround
Дизайн
Як і багато інших команд дизайнерів, ми використовуємо Figma як основний інструмент дизайну.
Наші кольори задокументовані в бібліотеці "Foundations", де ви можете знайти загальні стилі, які ми використовуємо в нашому продукті, такі як шрифти, кольори, іконки тощо.
Ця бібліотека живить спеціальні системні бібліотеки, з якими ми працюємо щодня (iOS, Android, Web, Email).
Назви кольорів раніше базувалися на їхньому зовнішньому вигляді.
Наприклад, Purple був нашим основним кольором, а Graphite-Base — типовим кольором для основних текстів.
Технічна сторона
У наших додатках була така ж система.
Крім того, існували деякі семантичні кольори, але тільки на iOS, які розробники не прагнули використовувати.
2️⃣ Обмеження, з якими ми зіткнулися в нашій старій системі
Працюючи з цією системою, команди неодноразово наштовхувались на одні і ті ж питання:
- Як ми можемо бути впевнені, що різні дизайнери використовують одні і ті ж кольори?
- Як, не маючи належних інструкцій, ми можемо бути впевнені, що правильно передаємо завдання від дизайнера до розробника?
- Що робити, якщо завтра нам потрібно буде оновити наш брендинг з абсолютно новою кольоровою гамою?
Давайте спробуємо зрозуміти, як ми опинилися в такій ситуації?
Відсутність чітких правил використання кольорів
Усі дизайнери використовували однакову палітру, але після ребрендингу Getaround у 2019 році ми не мали чітких правил чи інструкцій щодо їхнього використання, що призвело до неузгодженості, а також до того, що дизайнери губилися при виборі кольору.
Вони починали створювати власні референси, і у кожного дизайнера було своє джерело істини.
Спадок старого брендингу Drive
Пам’ятаєте, раніше ми були Drivey (ми об’єднали зусилля з Getaround, щоб вийти на міжнародний рівень). Деякі старі кольори все ще використовувалися від попереднього бренду (відтінки синього на кнопках, заголовки...). На порядку денному не було реального плану дій для їхньої гармонізації.
3️⃣ Як ми уявляли собі нову систему кольорів
На початку 2021 року ми мали нагоду попрацювати над довгостроковим баченням користувацького інтерфейсу для наших застосунків iOS та Android.
Ми запитали себе: "Як вони виглядатимуть через 5 років?"
Ми зробили крок назад і подумали про те, як бренд Getaround може бути в центрі нашого візуального підходу.
Команда Cobalt, яка працювала над дизайн-системою, вирішила переосмислити й колірну систему. Однак, щоб втілити це бачення в реальність, нам довелося подолати певні труднощі:
Встановити чіткі гайдлайни
Як зробити так, щоб кожен дизайнер міг покладатися на зрозумілу і просту у використанні колірну систему? Проста система пришвидшила б адаптацію.
Доступний дизайн
Як ми можемо переконатися, що ми розробляємо кольори, які зі старту відповідають правилам доступності?
Закладення можливості потенційних змін в майбутньому
Як ми можемо створити систему, яка буде простою в користуванні та відповідатиме галузевим стандартам сьогодні і завтра (наприклад, забезпечити темний режим)?
4️⃣ Наша нова колірна система: Семантичні кольори
Під час етапів дослідження, робота у Спільному робочому просторі Figma підштовхнула нас до необхідності зберігати та документувати дизайн-рішення, які ми приймали.
Наприклад, як ми повинні назвати наш акцентний колір: (Accent? Primary?)
Ми також перевірили, як можуть виглядати екрани застосунків у темному режимі, і як їх правильно підтримувати. Чи варто створювати окрему колірну палітру або ж робити темну версію для кожного компонента?
Ми вирішили обговорити це питання з нашими розробниками, щоб зрозуміти, які рішення вони можуть запропонувати для вирішення цих проблем.
Інженери швидко запропонували концепцію семантичних кольорів, оскільки вони дуже добре знали і використовували її в роботі. Фантастика!
Але як дизайнери можуть адаптувати і використовувати цю концепцію?
Але що ж таке цей семантичний колір?
Семантичний — це спосіб називання кольорів, заснований на тому, як вони використовуються, а не на їхньому відтінку.
Можна навіть піти далі і назвати кольори відповідно до того, як вони представлені на екрані
Наприклад, колір фону, колір фону кнопок, колір тексту, колір іконок тощо…
Від гами заснованої на зовнішньому вигляді колірної…
… до заснованої на семантиці
☝️Семантичні кольори не є чимось новим, все більше і більше продуктів використовують їх. Нас надихнули Google, Apple, Shopify та Asana
Очевидно, що ця колірна система має багато переваг. Тож дозвольте мені пояснити, як ми адаптували цю концепцію на практиці до нашого продукту та його використання:
Детальніше про семантичні кольори
Наша нова колірна система складається із двох речей:
- Базова палітра
- Семантичні кольори
Базова палітра
Ми тісно співпрацювали з бренд-командою, яка створила абсолютно новий брендинг, котрий ми використовували під час роботи над новою основою (foundations).
Кожен брендовий колір адаптований під декілька відтінків аби створити більшу палітру можливостей: Базова паліта. Вона представляє всі можливі кольори, які можуть відображатися в Продукті. Команда може використовувати не всі кольори, але вони виберуть ті, які найкраще підходять для Продукту.
Щоб дізнатися більше про наш перехід до більш доступного продукту, ви можете прочитати другу частину цієї серії статей тут:
🍭Переосмислення кольорів у більш інклюзивний спосіб (Підпишіться на Inside Getaround, щоб отримувати сповіщення про нові публікації!)
Семантичні кольори
Семантичні кольори побудовано на основі базової палітри, яка слугує еталоном.
Як я вже пояснював раніше, неймінг більше не стосується “зовнішнього вигляду” кольору (пурпурний, коричневий, зелений…), натомість він базується на елементах інтерфейсу, до яких застосовується (текст, іконка, кнопка, фон…), а також на стані цього елемента (активний, неактивний, успішний…).
Номенклатуру та приклади дивіться тут:
Це означає, що колір з базової палітри можна використовувати в багатьох семантичних кольорах:
Ось так ми переробили назви кольорів на основі нового принципу:
Ми провели внутрішні користувацькі тести з дизайнерами та інженерами за допомогою дизайн-критиків, щоб визначити найкращий спосіб назвати наші семантичні кольори.
Ми перепробували багато різних підходів до неймінгу і виявили, що надто детальна система імен буде надзвичайно складною у підтримці та використанні, враховуючи розмір нашої команди та продукту.
Ми вирішили зробити щось просте в обслуговуванні, але з достатньо широкими можливостями неймінгу.
5️⃣ Переваги семантичних кольорів для Getaround
Семантичні кольори відображають дизайн-принципи
Семантичні кольори фокусуються на призначенні кольорів. Це позбавляє дизайнерів і розробників необхідності гадати, який колір використовувати, оскільки візуальна мова безпосередньо передає дизайнерське рішення.
Це розблоковує Темний режим
Семантичний колір можна адаптувати в різних темах. Назва семантичного кольору завжди однакова, але його вигляд може змінюватися залежно від обраного режиму. Наприклад, семантичний колір Primary background (Основне тло) може означати White (Білий) у світлому режимі та Black 500 (Чорний 500) у темному режимі. Залежно від обраного користувачем режиму, відповідний колір відображатиметься автоматично. Це була справжня зміна правил гри для нашої дизайн-системи, оскільки це зробить її ще більш придатною для майбутніх модифікацій.
Семантичні кольори ефективні та гнучкі
Використання семантичних кольорів також полегшить процес оновлення кольорів у майбутньому.
Припустимо, ми хочемо змінити наш основний колір на синій ( для ребрендингу, наприклад — див. Update 1 на зображенні нижче).
Нам просто потрібно буде змінити Purpleколір з базової палітри на Blue.
Усі семантичні кольори, пов’язані з цим кольором, також будуть чарівним чином оновлені.
Іншою ситуацією може бути оновлення кольору для певного елемента інтерфейсу, наприклад, кнопки (див. Update 2 на зображенні нижче), не торкаючись інших елементів, які використовують фіолетовий колір. У цьому випадку нам просто потрібно оновити колір ButtonBackground.Primary. Все просто.
Без цієї системи оновлення кольорів повинно було б пройти багато етапів контролю якості, щоб переконатися, що зміни застосовані скрізь.
Інструкції з поєднання кольорів
Ця система здається досить простою у використанні, але у дизайнерів залишаються деякі питання:
Коли можна використовувати Text.Info?
Коли можна використовувати Fill.Subdued?
Коли можна використовувати Icon.AccenAlt?
Щоб допомогти дизайнерам у виборі кольору, ми створили інтерактивний путівник, в якому перераховані всі можливі колірні комбінації.
Ми створили цей посібник у вигляді прототипу figma, який оновлюється щоразу, коли змінюються кольори дизайн-системи. Він підкреслює семантичні комбінації кольорів, які є дозволеними, щоб максимізувати узгодженість. Наприклад, колір Text.Info можна використовувати лише з кольором Background.Info.
Це корисний помічник при створенні компонента або для ознайомлення дизайнера з візуальною мовою Getaround.
Результати
Перехід на нову систему кольорів призвів до кількох змін:
Ми витягли кольори з бібліотеки “Foundation” (див. §1) і розділили їх між темним і світлим режимами. Цей крок дозволяє нам легко перемикати файл дизайну з режиму 🌝 Light на 🌚 Dark за допомогою функції бібліотеки Figma swipe. Це також робить бібліотеку легшою і простішою в обслуговуванні.
- Семантичні кольори були успішно реалізовані в наших застосунках для iOS та Android, і зараз ми працюємо над використанням тієї ж системи на нашій веб-платформі. Незабаром ми матимемо централізовану колірну схему для роботи з кольорами у всіх системах.
🙂 Далі буде — 2 і 3 частини цієї серії скоро вийдуть, підписуйтесь на Inside Getaround, щоб отримувати сповіщення про їхній вихід:
> Переосмислення кольорів у більш інклюзивний спосіб (вже доступно)
> Семантичні кольори, частина 3 (🌚 Темний режим) ( Незабаром буде доступно)
Подяки
Ця стаття створена за підтримки команди Cobalt squad (команда Design System) та команди бренду 💜.
