Color in UI Design: A (Practical) Framework / Колір в інтерфейсі: Прикладні основи

The hue moves 1° out of 360°, which is practically a rounding error.
0Колірний тон зміщується на 1° із 360°, а це фактично похибка округлення.
Photo by Matthias Uhlig
0Автор фото — Matthias Uhlig
Note: Monitor/image color profiles might make these exact measurements different for you.
0Примітка: В залежності від властивостей монітора/зображення у вас ці параметри можуть бути іншити.
Now, I’ve printed the numbers out for you, but chart’s worth a thousand numbers, right?
0Але, щоб стало зрозуміліше, давайте розмістимо наші кола на графік.
Speaking of approximating the principles laid out here, we should talk about hue. I said it above too, but it bears repeating: hue is so secondary to the whole saturation-and-brightness-move-in-opposite-directions thing that you can often just ignore it entirely when making color adjustments.
0Говорячи про порівняння з реальним світом, ми мусимо торкнутися теми колірного тону. Нагадаю, що колірний тон  — річ другорядна. Його можна взагалі не враховувати, коли ви налаштовуєте зміщення яскравості й насиченості.
The trick is to just make the movement of the hue match up with the movement of the saturation and brightness. If you want a darker variation, move the hue towards red (0°), green (120°), or blue (240°), whichever is closest — and vice versa (with cyan, magenta, and yellow) for lighter variations. (Of course, this assumes you’re also lowering brightness and increasing saturation)
0Секрет у тому, щоб поєднати зміну колірного тону зі зміною насиченості та яскравості. Якщо вам потрібна темніша варіація, потрібно змістити колірний тон у бік червоного, зеленого або синього, в залежності від того який із них знаходиться ближче. В той же час яскравість зменшити, а насиченість збільшити. І навпаки, для світлої варіації потрібно змістити колірний тон у бік жовтого, блакитного чи пурпурового.
And that’s why the shadow on the teal wall shifted up in hue — it was shifting towards blue, at 240°, which is the nearest minimum point to 194°.
0І з цієї ж причини колірний тон тіні на синьо-зеленій стіні збільшився — він змістився у бік синього, до 240°, це найближча точка мінімуму для 194°.
That’s why the shadow on the coral wall shifted down in hue — it was shifting towards red, at 0°, which is the nearest minimum point to 21°.
0Ось чому колірний тон тіні на кораловій стіні зменшився — він змістився у бік червоного, до 0°, це найближча точка мінімуму для 21°.
I’m glad you asked.
0Я радий що ви запитали.
And, of course, just why are RGB and CMY the low/high points on the luminosity graph?
0Ну і звичайно ж,чому низькі/високі точки RGB та CMY є на графіку освітленості?
How do you fix it when colors clash?
0Як ви виправляєте конфліктні кольори?
How do you pick totally unrelated colors that look good together?
0Як ви визначаєте цілком непов'язані кольори, які виглядають разом дуже гарно?
How do you find grays that match your color scheme?
0Як ви підбираєте сірий, який пасуватиме вашій колірній схемі?
Do you to move saturation or brightness more?
0Ви більше змінюєте насиченість та яскравість?
When you’re in Sketch (etc.), what technique do you use to make darker variations?
0Яким чином ви робите темніші варіації у Sketch (і т.д.)?
How is hue even more important in gradients and data visualization?
0Яким чинов відтінок навіть більш важливий у градієнтах та візуалізації даних?
Now I’ve been pretty brief with all of this. There are still many topics to cover:
0Я був дуже лаконічний з усім цим. Досі залишається багато неохоплених тем:
I just whipped together a quick example here. A whole interface being built out of a single color. Say… does that shade of teal look familiar?
0Я тут підготував приклад. Увесь інтерфейс побудований із єдиного кольору. Скажіть... цей відтінок синьо-зеленого (teal) вигладає знайомим?
An interface with one color and many modifications
0Інтерфейс із одним кольором і багатьма модифікаціями
This will allow you to take one hue, but modify it endlessly for all your UI needs, using darker and lighter variations where appropriate.
0Це дозволить вам один відтінок, але модифікувати його для усіх потреб вашого інтерфейсу, використовуючи темніші та світліші варіації там, де це доречно.

Резюме
Стать:
чоловік
Рідна мова:
українська
З нами:
з 11 жовтня 2016 р. (709 днів)
Діяльність:
540 версій перекладу з загальним рейтингом 3
91 коментар
Написати TSpell приватне повідомлення