Хочу поділитися своїм баченням цього питання і методами, які я обираю для створення системи.
Як же без дизайн-токенів?
Дизайн токени - це щось неймовірне. Обов’язково ознайомтеся з ними, якщо ви ще цього не зробили. І ще одна гарна стаття, яка детально розповідає про дизайн-токени - Створення кращих продуктів за допомогою дизайн-токенів.
Отже, кожна назва кольору в системі - це дизайн-токен, все дуже просто.
Структура системи
Система кольорів складається з трьох основних компонентів:
- Глобальні кольори - це загальна бібліотека зразків кольорів, яка задає тон вашій візуальній мові
- Системні кольори створюють структуру для переходу між світлим і темним режимами
- Компонентні кольори представляють окремі елементи інтерфейсу
Базовий рівень: глобальні кольори
Це необов’язковий компонент, який є інструментом для скорочення часу на створення теми.
Глобальні кольори - це набір зразків, які я використовував, щоб визначити візуальну мову застосунку. Глобальні кольори, які ніколи не демонструються безпосередньо, є джерелом колірної системи.
Перший рівень: системні кольори
Це основна палітра, яка використовується для оформлення всіх елементів системи.
Системні кольори - це основні елементи в нашій мові дизайну, представлені контекстнонезалежними назвами. Дизайнер може визначити їх вручну, але я вважаю, що ефективніше використовувати глобальні назви.
Рівень другий: компонентні кольори
Це необов’язкова опція, але вона розширить ваш арсенал, коли вам знадобиться додаткова гнучкість між двома темами і краща комунікація з розробниками.
Кольори компонентів - це комплексне представлення кожного значення, пов’язаного з компонентом. Вони завжди є похідними від системних кольорів, але називаються особливим чином, щоб інженерні команди могли застосовувати токени під час розробки компонентів.
Структура та неймінг
На мою думку, хороша система - це добре організована, з правильний неймінгом названа, яка встановлює взаємозв’язок між кольорами, що забезпечує природний перехід між світлою і темною темами.
Нейтральні
Нейтральні кольори - це основа візуальної мови, яка визначає загальний тон вашого додатку. Вони можуть бути повністю насиченими, трохи холоднішими або теплішими, або навіть відтіненими у вигадливий спосіб, щоб підсилити бренд.
Як дизайнер, я завжди дивився на це через призму професійного програмного забезпечення, яке використовував. Я додаю заливку до поверхні, яка потребує фонового кольору, необов’язкове обведення для меж, лінії та колір тексту, який знаходиться зверху. Для тимчасових візуальних станів я використовую напівпрозорі альтернативні кольори.
Тут наведено основні категорії, на основі того, як ми застосовуємо колір у дизайні користувацького інтерфейсу.
Я впевнений, що кожен дизайнер розуміє такі терміни, як "заливка" і "обведення", тому я вирішив назвати кольори таким чином. Це дозволяє легко дотримуватися консистентного неймінгу, не заглиблюючись у принципи системи.
Я встановив наступне співвідношення між цими трьома типами кольорів:
- Заливки - це найсвітліші відтінки у вашому арсеналі, вони стануть основними фоновими кольорами
- Обведення не повинні заповнювати великі ділянки, а лише окреслювати або розділяти їх. Основне правило полягає в тому, що обведення повинні бути видимими на тлі кольору фону тієї ж інтенсивності.
- Alt або альтернативні кольори є напівпрозорими і можуть бути застосовані як заливки та штрихи
Акценти та семантичні кольори
Для кольорових елементів нам знадобиться основний акцент бренд та CTA-елементів, а також RAG для семантики.
Тут я зіткнувся з певною складністю, оскільки хотів, щоб палітра була лаконічною. Тепер є певні правила для всіх акцентів.
Загальні правила
Усі акценти збалансовані, щоб створити однаковий рівень контрасту, який визначатиме їхнє використання. Наведений нижче список - це простий набір намірів, який визначає, як кожен відтінок повинен і може бути застосований.
- Відтінки 600 і 500 найкраще підходять для чітких меж
- Відтінок 300 - основний колір
- Відтінок 400 дає трохи вищий контраст і може використовуватися для нетекстових елементів, як-от гліфи чи кольори візуалізації даних
- Відтінки 200 і 100 є напівпрозорими та призначені для відтінків і виділень
Текст
Для тексту нам знадобляться деревовидні відтінки для візуальної ієрархії та кілька кольорів для семантики. Я вирішив створити незалежну підпалітру, оскільки так легше відповідати вимогам доступності WCAG.
Контраст
Коли мова йде про кольори, все залежить від контрасту, який вони будуть мати один відносно одного. Для більш сильних акцентів нам потрібен білий текст, щоб працювати на цих поверхнях. Також нам потрібні чіткі лінії, кольори фону тощо. Подумайте про основні дії, барвисті банери та висококонтрастні елементи інтерфейсу. Також було б добре мати можливість поєднувати світлі та темні елементи інтерфейсу в одному дизайні.
Для цього нам потрібно розширити нашу палітру темнішими заливками, штрихами, кольорами тексту та альтернативними кольорами. Вони мають у своїй назві слово "контрастний", яке вказує на те, що вони створюватимуть високий контраст відносно своїх "базових" аналогів.
Про те, як підбирати кольори, я розповім у практичному посібнику нижче.
Ось як ці нові додаткові кольори були впроваджені в дизайн застосунку.
Універсальні кольори
Остання група кольорів - допоміжні. Відтінки я використовую для тіней і для затемнення ділянок під ними. Тон завжди освітлює поверхню.
Білий, чорний і прозорий - агностичні до теми і не змінюють її.
Відтінки та тони є напівпрозорими, а рівень непрозорості залежить від теми. У світлому режимі відтінки більш виражені, а тіні використовують менший рівень непрозорості, і навпаки.
Ось як це працює на світлих і темних прикладах.
Огляд палітри в розгорнутому вигляді
99 кольорів у кожній палітрі
Зверніть увагу, що палітра темної теми має спеціальні значення лише для контрастних заливок, штрихів і додаткових кольорів. Вони на кілька відсотків світліші за свої "базові" аналоги. Всі інші значення ідентичні як для "контрастних", так і для "базових" аналогів.
Підбір кольорів
У розділі нижче я розповім про те, як я обираю кольори, які працюватимуть у світлих і темних режимах.
Глобальні нейтральні
Глобальні нейтральні кольори - це основа, яка задасть тон вашій візуальній мові.
Для передбачуваного результату я зробив надзвичайно широкий діапазон відтінків. Починаючи від 100% освітленості до 4%. Цієї кількості кроків достатньо для підтримки як світлих, так і темних тем. Щоб зробити всі ці відтінки послідовними та однорідними, я надав їм однакове значення відтінку.
Є 48 кроків, і кожен колір лінійно змінюється від найсвітлішого до найтемнішого відтінку з кроком 2%. З математичної точки зору, це проста лінійна прогресія, яка встановлює мінімальну відстань між двома відтінками в серії. Мені лише потрібно вибрати початкову точку, задати напрямок і визначити відстань між сусідніми відтінками.
Кольори світлої теми
У світлій темі я завжди починаю з чистого білого і будую прогресію від нього.
Для кольорів обведення я змістив початкову точку вправо. Чим далі вона починається, тим більш помітними будуть кордони.
Ось як це виглядає безпосередньо в інтерфейсі
Також я можу використати ті ж самі градації сірого, щоб зробити щось трохи інше. Нижче я встановив більшу відстань між сусідніми кольорами, щоб зробити сірі кольори більш інтенсивними.
Кольори темної теми
Перш ніж обирати кольори, ми повинні визначитися з переходом між світлою і темною сторонами. Що станеться з білим кольором? Він може або залишитися найсвітлішим відтінком, або стати найтемнішим. Це дає два основні варіанти на вибір.
Темний виступ
Цей стиль використовує однаковий напрямок градієнта в обох темах. Від найсвітлішого до найтемнішого.
А ось як це працює в дизайні інтерфейсу.
Глибока темна тема
Ця вказує на протилежний напрямок. У темному режимі вона рухається від найтемнішого до найсвітлішого.
І ось як це відіграє в дизайні інтерфейсу.
Для темного режиму я вирішив обрати темну тему і застосувавй той самий принцип, що і для світлого режиму. Виберіть відправну точку, задайте напрямок і визначте відстань між кроками. Я взяв останні шість відтінків з кінця спектру, щоб створити відчуття глибокої ночі.
Кольори обведення йдуть у протилежному напрямку, при цьому збільшення інтенсивності робить колір світлішим.
І ось як це виглядає в інтерфейсі.
Низька контрастність, ідеально підходить для умов низької освітленості. І я можу грати з контрастом за допомогою більшого розміру кроку. Так само, як і в світлій темі, я трохи розширив кольори, збільшивши різницю між ними до 4% проти 2% раніше.
Через зміну контрасту це сприймається по-іншому.
Модулі plug-and-play
Моя ідея полягає в тому, щоб мати різні групи нейтральних і акцентних кольорів, які я можу накладати на основні кольори системи. Кожен набір — це послідовний градієнт сірих відтінків з дещо різними параметрами. Я створив їх, обертаючи відтінок і граючись із насиченістю.
Тепер, якщо я візьму останні блакитнувато-сірі з насиченістю 20% і застосую їх замість цих, то отримаю інший тон у всьому дизайні.
Акцентна палітра та семантика
Акцентна палітра надає нашому продукту життя та сенсу. Це кольорові акценти, які спрямовують увагу користувача, підкреслюють зв’язок з брендом або повідомляють про певний стан системи.
Глобальні акценти
Я пішов тим самим шляхом, що й з нейтральними кольорами. Акценти — це ще один модуль, який додає кольору в наш дизайн. Кожна яскрава барва так чи інакше походить від глобального модуля.
Для темного режиму я створив іншу, менш насичену.
Інструменти
Існує безліч інструментів для генерації колірної палітри. Деякі з них є чудовими і заслуговують на увагу.
Маппінг кольору
Зараз ідеальний момент, щоб обрати належні кольори та вписати їх у систему. Таким чином, синій стає основним, червоний перетворюється на індикатор небезпеки, жовтий означає попередження, а зелений дає дорогу.
Інші акценти виводяться так само, щоб отримати схожі результати.
Основний акцент
Основний акцент може бути зроблений з будь-якого глобального кольору, що дозволяє дуже легко адаптувати палітру до конкретних потреб бренду.
Кольори компонентів
Компонентні кольори — це останній елемент, який ми розглянемо. У двох словах, це токени рішень, які відображають контекст, в якому використовується значення, на яке є посилання.
Токени нижче — це той мінімум, який я очікую від дизайн системи. Всі ці елементи складатимуть 90% вашого дизайну, і добре мати їх з самого початку.
Спільний елемент інтерфейсу
Спільна основа для різних інтерактивних елементів, таких як пункти меню, списки, кнопки панелі інструментів тощо. Ці кольори є візуальними станами.
Контроли форми
Кольори для візуалізації інпутів, плаваючих позначень, чекбоксів і радіокнопок.
Кнопка
Найважливіший елемент інтерфейсу з усіх.
Картка
Основний контент-контейнер.
Оверлей
Токени для випадаючих меню, спливаючих та модальних вікон.
Незалежні стилі
Слід зазначити, що в цьому є велика перевага. Ви можете створювати стилістичні відмінності між світлими і темними темами за допомогою цього методу. Наприклад, я використовував токени компонентів, щоб по-різному стилізувати кнопки в двох темах. Потрібен час, щоб розібратися з основними компонентами, які підлягають зміні, але результати того варті.
Додаткові матеріали
Я створив два файли дизайну, щоб кожен міг погратися з ними. Кожен файл має набір кольорових стилів, які відповідають описаній вище системі. Крім того, є плагін Tokens Studio, де ви можете дослідити, як це було зроблено. Всі інструкції знаходяться у файлах нижче.
Файл з двома темами
Один файл з двома наборами стилів для світлих і темних тем
Файл з однією темою
Один файл — одна тема. Саме так працює більшість команд на великих проектах. У цьому файлі кольори подаються прямо, без префіксів світлий/темний.
Швидкий експеримент
Мені знадобилося близько 30 хвилин, щоб побачити, як він буде працювати поверх офіційного UI2: Figma’s Design System
Висновок
Ця система створена в першу чергу для дизайнерів. Я хотів, щоб будь-який професіонал у сфері дизайну міг швидко ввійти в курс справи, просто керуючись інтуїцією, і це працює досить добре.
Система добре зарекомендувала себе в масштабі цілого сімейства застосунків. Я говорю про 100+ застосунків з тисячами екранів.
Деякі розробники стверджують, що неймінг “дивний”, і для них є кольори компонентів, які допомагають подолати розрив із командами розробників.
Дуже цікавий, схожий неймінг — https://medium.com/@thisisfranciswu/designing-hazels-accessible-color-system-part-1-8a73a2298c35
Переклад статті https://uxdesign.cc/designing-colour-system-d9d39f245e01
