В этой небольшой статье я расскажу о том, как я управляю цветами и работаю с ними, создавая прототипы новых пользовательских интерфейсов. Это будет ориентировано на разработчиков, которые делают что-то быстро, без бренд-буков или готовых дизайнов.
В такие творческие моменты лучше всего отдавать предпочтение быстрой итерации, так что давайте рассмотрим некоторые тактики для достижения этой цели.
Получаем предопределенную цветовую палитру
Это, на мой взгляд, самый важный совет, который оптимизировал мой процесс подбора цвета.
При добавлении цвета в дизайн мне часто кажется, что цвета MaterialTheme ограничены, и в итоге приходится возиться с шестнадцатеричными значениями цветов.
Это отнимает много времени, будь то копирование/вставка шестнадцатеричных кодов или борьба с глючной системой выбора цвета в Android Studio.
Для сравнения, в проектах веб-разработки, где я использую tailwindcss, мне проще. Здесь tailwind предоставляет готовую палитру из 22 групп цветов, каждая из которых имеет 11 вариантов.
Группы обозначаются названием цвета (красный, оранжевый, розовый, грифельный и т.д.), а варианты — номером (50, 100, 200, … 800, 900, 950).
Номер варианта определяет, насколько светлым или темным должен быть цвет. 50 — самый светлый, а 950 — самый темный.
В результате выбор цвета в tailwind — это просто выбор цвета и номера. Достаточно просто для нас, не дизайнеров ;)
<div class="bg-yellow-900"> <h1 class="text-red-200">We live in a twilight world</h1> </div>
Ладно, на сегодня достаточно HTML. Как мы применим это в Jetpack Compose?
Давайте просто возьмем все шестнадцатеричные значения и добавим их в Kotlin-файл как объекты Color. Мы также можем дать им имена переменных, как и в вебе. Таким образом, Red-200 станет Red200.
Я уже делал это в одном из предыдущих проектов, так что не стесняйтесь cкопировать файл отсюда.
С этими новыми значениями цветов мы можем написать пример кода в Compose следующим образом:
Box(modifier = Modifier
.background(color = Yellow900)
) {
Text(
text = "We live in a twilight world",
color = Red200,
)
}
С помощью этого одного файла, копируемого в любой проект, я смог сократить массу времени, потраченного на выбор цветов, которые меня устраивают.
Оказывается, мне нужно всего 242 цвета, а не весь спектр RGB!
Выбор темного/светлого цвета
Идя по этому пути кастомных цветов, мы часто забываем о поддержке светлого режима (или забываем о темном режиме для любителей дневных прогулок ☀️). Поэтому для прототипирования у меня есть быстрый хак, который позволяет легко указать темные и светлые цвета.
@ReadOnlyComposable
@Composable
infix fun Color.or(light: Color) =
if (isSystemInDarkTheme()) this else light
Эта функция расширения infix просто проверяет текущие настройки темы в системе и применяет темный или светлый вариант цвета в соответствующем режиме.
Если вы используете локальную для вашего приложения функцию выбора темы, вам следует заменить isSystemInDarkTheme() на это булево значение.
Эту функцию можно использовать в предыдущем коде, чтобы быстро указать светлый вариант цвета, например, так:
Box(modifier = Modifier
.background(color = Yellow900 or Blue200)
) {
Text(
text = "We live in a twilight world",
color = Red200 or Orange700,
)
}
Надеемся, что с помощью небольшого количества синтаксического сахара мы сможем сделать так, чтобы вам было легче думать об обеих темах с самого начала.
Предварительный просмотр цветов
Наконец, когда дело доходит до того, чтобы увидеть, к чему приведут наши изменения цвета, о 10-секундной или более длительной ;( сборке просто не может быть и речи. Для быстрой итерации дизайна нам нужно видеть изменения гораздо быстрее.
В Android-проектах на помощь приходят предварительные просмотры, в которых изменения обычно видны за 2-3 секунды. Они проделали долгий путь в плане стабильности и сэкономили мне много времени при настройке цветовых значений в дизайне пользовательского интерфейса.
С помощью предварительных просмотров можно создавать дизайн для элементов внутри приложения. Или можно пойти еще дальше и создать представление, которое будет предназначено только для предварительного просмотра, но будет включать в себя различные тематические возможности с вашими цветами.
Это может выглядеть как брендборд, где разные цвета применяются к формам, тексту и иконкам.
Когда все доступно с первого взгляда, вы можете легко заметить, как меняется цвет значка, но не текста.
Как уже говорилось, это хорошо работает в проекте для Android. Но при работе в Compose Multiplatform история немного отличается. Предварительные просмотры для Мультиплатформы находятся в разработке, но мне не удалось их надежно использовать. А использование Android-таргета для предварительных просмотров довольно громоздко.
Однако там, где мультиплатформа терпит неудачу (пока) в предварительных просмотрах, она становится абсолютным зверем в горячей перезагрузке. Этот процесс заслуживает отдельной статьи, но пока он является полезным инструментом для предварительного просмотра цветов и многого другого.