Цвет волшебства

Цвет волшебства

ALEKSEI SHIPULIN

В нашем интерфейсе есть несколько вещей, от которых мне очень худо. Это прежде всего цвета, ушки и текстовое поле. Я хотел написать обо всех трёх, но неожиданно даже первая тема вылилась в довольно крупный пост, так что начнём с

ЦВЕТА

В своей эстетике приложение опирается на внешний вид бумаги. Это связано с функциональностью, но кроме этого — мне просто ужасно нравится, как бумага выглядит, шуршит, пахнет, пропускает и отражает свет, какая у неё текстура и рельеф. Без бумаги не было бы книг, денег и чем вытирать жопу. Бумага топ.

Из этого следует две проблемы. Во-первых, тёмная тема. Все попытки заигрывать в цифровом дизайне с тёмной или обуглившейся бумагой — абсолютный колхоз. Я попробовал, надеюсь, эти черновики никто никогда не увидит. Нельзя просто инвертировать светлые бумажные пастельные тона и получить читаемый красивый дизайн. Или можно, но мне не удалось. В любом случае, для тёмной темы концепцию пришлось нарисовать заново, причём многие вещи переделать полностью.

пример: некоторые вещи, которые в "основном" дизайне обозначались линиями, в тёмной теме пришлось выделять тенями

Ах да, и конечно, палитра. К палитре мы ещё вернёмся позже, но стоит ли говорить, что бежевый слева и бежевый справа — абсолютно разные цвета? Для всей моей многострадальной палитры пришлось подбирать пары (в большинстве случаев — более насыщенные и чуть более светлые, но всё зависит от того, насколько жирный элемент). Видели бы вы, каким волком на меня смотрел Богдан, когда я сказал ему, что простого советского переключателя цветов для ночной темы не достаточно, и многие элементы нужно просто заново перерисовывать (в Xcode есть инструмент для быстрого создания тёмной темы, но он заключается в том, что каждому цвету нужно задать его тёмную пару. Если бы мы так делали, тёмная тема выглядела бы как говно).

В завершение блока про тёмную тему хочу посоветовать этот пост. Сам я его, разумеется, нашёл уже после того, как её нарисовал, но ощутил невероятное удовлетворение от того, что самостоятельно пришёл к набору тех же выводов. https://blog.superhuman.com/how-to-design-delightful-dark-themes/


Во-вторых (вы ещё помните, что всё до этого было "во-первых"?), оказалось, что палитру оттенков для бумаги не так-то просто подобрать! Традиционная схема (Dominant-Compliment-Accent) нам не подходит, потому что у пользователя есть возможность создавать собственные сущности и выбирать для них цвет. А это значит, что нам нужна прорва цветов, объединённых одним, очень условным, принципом — они должны напоминать о бумажности. В итоге я вручную выбрал пастельные, слегка уходящие в серый оттенки:

Признаться, я до сих пор не уверен насчёт хаки.

Ах да, и вы же помните про тёмную тему:

В тёмной теме цветов получилось больше, так как нужно использовать больше оттенков серого. Начинаю понимать, почему "50 оттенков" — книга про садизм

Ах да, забыл добавить. У нас есть один интерфейс, в котором цвета смешиваются в независящем от нас порядке (только от пользователя), и это НЕ ДОЛЖНО ВЫГЛЯДЕТЬ ОТВРАТИТЕЛЬНО. Хорошая новость в том, что с подобранными мною оттенками этот фокус срабатывает:

А плохая — недавно мы убедились, что цветов нам не хватает, и нужно откуда-то взять ещё. Есть несколько сервисов для подбора палитры, например, замечательный mycolor.space. Проблема в том, что он умеет подбирать палитры по схеме Dominant-Compliment-Accent, о которой я писал выше — но не сущесвтует системы, в которую можно было бы засунуть 8 hex-кодов и попросить продолжить ряд (сейчас подумал — а что, если просто хуйнуть их в GPT-3? эх, роботы, решите всё за нас).

Подход для хардкорщиков — погрузиться в теорию цвета. Здесь стартовая точка — цветовой круг Иттена. Им можно пользоваться либо как магическим инструментом, цвет на вход — два на выход, либо попытаться понять, как всё это работает. Здорово, конечно, если бы цветовой круг, как магический шар, решал все наши проблемы — но он не решил. А это значит, что теорией цветовой гармонии нужно заняться ВСЕРЬЁЗ, что, в свою очередь, означает, что вы увидите меня через тридцать лет, заросшим бородой и безумным взглядом, в попытках получить октариновый оттенок. Для стартапа тоже не вариант.

Если вы ждёте здесь какую-то мораль — её не будет: у меня нет решения, откуда взять новые цвета. Периодически я открываю палитру, тыкаю в произвольный цвет, потом добавляю его в наш дизайн и смотрю, не сработает ли — не срабатывает. Буду рад любой помощи, потому что ну серьёзно, оттенки цветной бумаги, это наш главный стопор сегодня?








Report Page