Comments 23
На картинке с Джеком "покАрсим" вместо "покрасим" :)
Мне кажется, что вы мухлюете. Тень - это не кружочки с овальчиками. Тень - это область, в которую не попадает свет или попадает только отражённый/рассеянный свет.
Делаете тень? Используйте ray tracing. Поставьте парочку источников света, отрендерите кнопку, отрендерите фон, посчитайте тень. Не забудьте подповерхностное рассеяние и отражения от других кнопок.
Все эти игрища с кружочками - мухлёж и обман.
У большинства пользователей уже давно есть NVIDIA RTX3060, так что использование рейтрейсинга для отрисовки тени для кнопки более чем оправдано.
Хорошая статья.
Спасибо, поставил на свой андроидофон RTX3070 и тени действительно стали гораздо лучше! Правда пришлось ставить еще систему охлаждения и теперь 3кг аккумулятор немного карман оттягивает, может еще с этой проблемой решение предложите?
У большинства пользователей уже давно есть NVIDIA RTX3060
Ни разу в телефоне на Android такого не видел )
В остальном в статье описаны варианты, которые можно реализовать имеющимся инструментами. Не уверен что `ray tracing` входит в число доступных нам инструментов ) Да и задача не нарисовать `честную тень` а нарисовать тень, которая есть на макетах, или максимально близкую к ней
"У большинства пользователей уже давно есть NVIDIA RTX3060" [Источник не указан N дней] =)
Получаем стандартную тень:
Ну и славно? Все, закончили на этом, зачем время тратить-то дальше? Вы бы хоть сравнение привели, чем оно отличается от последующих теней.
Тратить на тени сотни часов, наверное, не стоит, но определённая важная роль у них имеется, потому думать о них всё-таки иногда следует. Тени -- это один из элементов опыта из реального мира, такой же, как кнопки и переключатели. Это то, что позволяет пользователю с первого взгляда выделять важные элементы дизайна, не слишком (в идеале) замусоривая экран. Плюс, тени иногда позволяют обеспечить необходимый уровень контраста между текстом и динамически изменяющейся подложкой.
более полезное
Это ведь абстрактное понятие, если бизнес считает что нужна дизайн система а дизайнеры считают что в рамках этой дизайн системы нужны одинаковые везде тени, то это стоит затраченных усилий.
тратят дни жизни
Коллеги сэкономят больше затраченного мной времени, когда не будут `на глаз` подбирать тень, а просто указывать один из вариантов уже готовых теней.
Ну и славно? Все, закончили на этом, зачем время тратить-то дальше?
Потому-что нужно не стандартную а именно такую как на макете ) Но в этом вопросе я с вами согласен, если нет необходимости в конкретных тенях, то лучше остановиться на стандартном механизме. В нашем случае нам такой вариант не подошел.
Во-во, мне тоже эта нелепость вспомнилась. Вместе с "плавным курсором" нортоновских утилит последних версий (когда курсор можно было двигать в пределах знакоместа, а достигалось это перепрограммированием знакогенератора).
В детстве сильно недоумевал, что значит “The fat lady sang”. Много лет спустя узнал, что это оперная поговорка: «Пока толстая дама не споёт, это ещё не конец» (используется для троллинга крупного начальства на совещаниях при подведении итогов). Толстым дамам поручали арию валькирии Брунхильды из «Кольца Нибелунгов» по причине подходящего голоса и соответствия образу. Пели они её 20 минут подряд в самом конце. Соответственно, «Толстая дама спела» == «КонецЪ!».
[/offtop]
Мы любим своих дизайнеров за то, что они придумывают нам такие классные и красивые кнопки
Удобство и отзывчивость интерфейса все чаще приносятся в жертву "классности" и "красивости"
чем ближе предмет к поверхности, тем ярче и меньше тень, и наоборот.
2 параметра, которые зависят только от дальности предмета от базовой поверхности (z-level).
z-level - множитель, длина и ширина тени - параметры.
откуда столько сложности и зачем столько человекочасов на тратить на переизобретение расчета теней, будучи приложением для заказа такси - решительно непонятно.
А это точно сделает приложение лучше?
Если дизайнер "на серьёзных щщах" рисует под кнопкой три тени, и искренне считает, что она смотрится лучше чем точно такая же кнопка с одной тенью... его, скорее всего, надо отправить на переобучение. В простом случае...
В реальности, скорее всего, такой человек ещё будет тратить время на то чтобы сравнить разницу между его чудесными макетами в Figma и вёрсткой в нескольких браузерах с помощью чего-то типа расширения PixelPerfect. И, придя в ужас от того что в некоторых браузерах тень рисуется чуть-чуть по другому, этот гений-дизайнер будет тратить ещё и время фронтендера на вещи, которые по факту вообще ничего кроме дополнительного CSS-кода не несут. В таких случаях я даже не знаю что делать - моё личное мнение, что это уже какая-то психологическая проблема, но это, конечно, только мой взгляд на вопрос.
К сожалению, у меня был опыт работы именно с таким дизайнером, и второй абзац моего комментария это вовсе не выдумка. Это всё очень грустно, конечно.
Если вы - дизайнер и вдруг читаете этот комментарий, у меня к вам личная просьба - пожалуйста, попытайтесь сделать кнопку вообще без теней, может оно даже лучше будет, а?
Отличная статья. Из таких мелочей складывается впечатление о приложении.
Что по производительности? Делали ли вы замеры FPS с этими тенями и без них? Я предполагаю, что стык Compose и View для того чтобы нарисовать тени обходится не "бесплатно".
Делали ли вы замеры FPS с этими тенями и без них?
Нет, не думал над этим, кажется что на это потратиться еще больше времени, а выхлопа будет еще меньше )
Я предполагаю, что стык Compose и View для того чтобы нарисовать тени обходится не "бесплатно".
Скорее всего так и есть, но мы не добавляем компоуз только для тени. Просто сделали вариант и для View и для Compose. Специально переписывать на Compose чтобы нарисовать тень не станем )
Передоз смузи
Не стоит бояться теней