Створити

Дизайн-система зі списком кольорів від Atlassian

У наведених рекомендаціях описано, коли використовувати кольори в продукті.


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

Більше інформації по дизайн-системі від Atlassian за посиланням:

11 коментарів

HimarsTime 2рр
Поскаржитись
1

Ще є варіант від як я зрозумів розробників гугла https://www.materialpalette.com/deep-purple/light-blue Тут прям наводять приклад компонування різної кольорової гамми, яка гармонує між собою

HimarsTime 2рр
Поскаржитись
1

@lemmy не перевіряв

Леммі 2рр
Поскаржитись
1

@himarstime кольори помилок або схвальних повідомлень яких кольорів?

HimarsTime 2рр
Поскаржитись
1

@lemmy заради цікавості полазив по інтернет магазинах техніки, і всюди основні кнопки фарбують у фірмові кольори бренду (комфі зелений, розетка зелений, фокстрот помаранчевий, ельдорадо зелений)

Леммі 2рр
Поскаржитись
1

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

Тобто звісно бренд може спробувати, але це буде викликати дісонанс і переодичні фрази "якого чорта".

І ці кольори не виключають брендованого стилю. Тобто коли є елементи брендовані в одному стилі, це елементи оформлення / декору, а вже елементи які мають функціональне навантаження красяться в знайомі універсальні "червоний", "зелений".

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

Людина може відвідувати сайт спʼянілою або в стані, коли їй буде простіше зрозуміти що щось відбулось ОК або НЕ ОК за кольором (червоний або зелений).

HimarsTime 2рр
Поскаржитись
1

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

HimarsTime 2рр
Поскаржитись
1

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

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

Леммі 2рр
Поскаржитись
1

@himarstime Це невпорядкований набір кольорів. Фішка наведеного мною набору є взаємозвʼязок між кольором і сферою застосування. Тобто, голубий – сфера застосування "дія" (посилання, кнопки – те що можно натиснути) – означає "головну дію". Для сповіщень – цей колір означає інформуюче сповіщення. Якщо статус – голубий означає "в процесі".

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

Леммі 2рр
Поскаржитись
1

@javascript Думаю, що це акцентні кольори і вони використовуються маленькими порціями. А що за «пра­ви­ла­ хоро­шо­го дизай­ну», є якась робота з цього приводу?

Сумні_Збочення 2рр
Поскаржитись
1

Чого жовтий не жовтий?

Леммі 2рр
Поскаржитись
1

@sumni3bochennia Зазвичай щоб білий колір на ньому не зливався, але зазвичай це поморанчевий.