Маленькие дизайн-алгоритмы против большого тлена



    Никогда не поздно пить “Боржоми”. Даже если кажется, что RGB уже никогда не станет ярче, пользователи не начнут понимать тебя с полупикселя, а стену “ВКонтакте” никто возвращать не собирается. Выход есть — надо бежать!



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



    Продукт крупной компании — самый настоящий олимпийский марафон. All Inclusive. Симптомы: недомогание, усталость, тошнота, ядовитые словесные выделения тёмно-жёлтого цвета, нарушение зрения, шум в ушах, острые аллергические реакции на продукт или связанные с ним компоненты.

    “Бегите, я их задержу”.

    По всем правилам на трассе марафона расположены пункты, предлагающие бегунам воду, энергетические напитки, продукты питания, неиссякаемые печеньки, а также молодой и дружный коллектив в динамично развивающейся компании. Всё это поначалу снимает симптомы и придаёт сил, но пробежав хотя бы 1/3 дистанции, происходит следующее:

    • Нога в ногу бежать уже не получается.
    • Начинают одолевать сомнения, что правильно выбрал вуз, профессию, цели в жизни. Сожаление, что не пошёл в ПТУ.
    • Плавное погружение в фазу “не для тебя моя роза цвела”.
    • Смысл дальнейшего движения растворяется в воспоминаниях о былой молодости и утраченных возможностях.
    • Настала пора кончать. “Мама, роди меня обратно”.

    В итоге: лобовой краш-тест остатков душевного равновесия с бетонным отсутствием конца и края заканчивается неудачей.



    Однако суть марафона не в том, чтобы прибежать первым. Главное — продолжать движение. Это и есть победа. Маленькая, личная, но победа. Но маленькая. Но с большой буквы “П”.



    Чтобы продолжать движение, нужно как-то полюбить продукт. Ведь не только продукт обязан любить тебя зарплатой, спортзалом и ДМС, но и в ответ его надо холить, лелеять и улучшать.

    Тут есть одно но.



    В реальной жизни специалисту очень сложно всем сердцем полюбить Сашу Грей (девушки сами без проблем подберут аналог). Все знают, кто это, все хотят с ней работать, но семью и детей — давай, до свидания. Знание, что ты не первый, и уверенность, что не последний, первыми прибывают тушить пожар любви.

    В HeadHunter мы нашли, как обмануть организм и заставить его вновь испытать это забытое чувство. То чувство, когда исполнение супружеского долга происходит по собственному желанию.

    Ритуал следующий:

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



    Небольшой пример из жизни.

    Обычный понедельник в среду. Сидим каждый на своей лужайке, вырываем сорняки, садим “Канаду грин”. Душа болит, сердце плачет, а тут нате:
    Никит, ты забыл указать хайлайтед-цвет у кнопки. Время пошло.

    Чтоб не забрызгать всех непонятными буквами, а себя матерщиной — уточню, о чём речь. В интерфейсах надо всегда давать пользователю фидбек от его действий. Где-то еле заметный, где-то как фейерверк на 9-е Мая, в зависимости от контекста и бюджета праздника. Пользователь замечает его и понимает, что тыкает не в кирпич, а в живой организм.



    “Ваш звонок очень важен для нас! Оператор ответит через 40 минут”. “Абонент выключен или находится вне зоны действия сети”. Понимание, что система функционирует, запрос обрабатывается, педали крутятся — лучше афроамериканской тишины в ответ.

    Фидбек — универсальный транквилизатор ненависти и недопонимания. Для кого-то это разменная монета, но “Жизнь юзера состоит из мелочей, а не только из воронок, конверсий и колтуэкшенов”. Конфуций



    Так вот. Одна из составляющих фидбека — highlighted (рис. 8 мая) — состояние элемента управления во время прикосновения, призванное подкрасить событие и проявить заботу.



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

    Тем более чем-то подобным я уже занимался, агитируя анонимов создавать резюме. Тогда дело было в тени всплывающего окна.



    Глаз заметил (заметил?), если взять цвет фона и просто сделать его темнее  — получается очень плохая музыка. А вот темнее и насыщеннее — уже Бибер. Хочется кидаться нижним бельём в экран.



    Стандартными средствами iOS можно делать только темнее — скучно и визуально, и профессионально. Благо вся команда с развитым чувством прекрасного: даже на скриншоте в Слаке разницу заметили, а хоть и еле заметное, но улучшение подтвердили. Страшные оттенки будут наказаны.

    Продакта уважили, разработчика заинтриговал. Решили наказывать всё, что требовало наказания в рамках этого алгоритма. Нас захватила с одной стороны — лень, с другой — желание размять серое вещество.

    На старт, внимание, марш! Три часа — и готово! Частичка любви успешно интегрирована в самое сердце продукта.

    Эй! Это где тут работы-то на 3 часа? Вы там сумасшедшие, что ли, все?

    Хорошо-хорошо. На самом деле алгоритм мы сделали за час:

    1. За первые 30 минут я подобрал оттенки к цветам из гайдов, протестировал их на различных элементах, выявил зависимость и описал её разработчику на низкоуровневом языке дизайна: тут это, как его, это типа сюда, а вот это типа сюда.



    2. За последние 30 минут Дима превратил это в рабочий класс, готовый к труду и обороне, подключил его ко всевозможным контролам в тестовой сборке — выглядит круто, работает как часы.

    А в двухчасовом промежутке — информационная Сахара, где мы искали переводчика с языка абстрактного на формализованный.

    Колдовство со значениями RGB не работало. То синий в зеленый превращался, то человек в обезьяну. Алгоритм никак не выходил, пришлось делать кесарево. Пошли в паутину читать труды умных людей.

    Оказалось, дизайнер-то ненастоящий!

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

    Наш спаситель — HSB (Hue/Оттенок, Saturation/Насыщенность, Brightness/Яркость). Всего двумя параметрами выполняет любое одно конкретное желание. Берем оттенок, переводим RGB в HSB, прибавляем насыщенности (S+x), убираем яркость (B-y), конвертируем обратно в RGB. Конец урока.



    А я и не знал, что цвета могут быть жестоки.



    Тут кто-то знающий нервно выкрикнет “Лох — это судьба!”, кто-то ностальгически “Сталина на вас нет!”, а кто-то откроет для себя нано-Америку, и постыдного в этом ничего нет.

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

    Тайну мироздания оно, конечно, не раскроет. Зато подскажет в каком направлении искать следующую загадку. Карты нет, топографический кретинизм есть, но вводных для дальнейших приключений достаточно. А иначе какой из нас Холмс?

    Вывод: #думай_как_дизайнер_действуй_как_изобретатель. Морали нет. Но быть умным и начитанным — офигенно!

    Простите за внимание.
    HeadHunter 83,19
    HR Digital
    Поделиться публикацией
    Похожие публикации
    Комментарии 25
    • +7
      Быть умным и на читанным — офигенно

      на читанным

      Это самоирония?

    • +1
      А быть на нечитанным не офигенно?
    • +6
      Глаз заметил (заметил?), если взять цвет фона и просто сделать его темнее  — получается очень плохая музыка. А вот темнее и насыщеннее — уже Бибер. Хочется кидаться нижним бельём в экран.
      Что курил автор и где НЛО? Там же смысла ноль строчек.
      • 0
        Поддерживаю. Три раза перечитал эту строчку, чтобы понять, какую мысль автор хотел донести до читателей.
        • –1
          Видимо, перестарался.
          • +1
            Не стоит делать вид, что это случайно. Вся статья написана как бессвязный бред наркомана. У меня смутное подозрение, что вы сайтом ошиблись.
            • 0

              Своего читателя автор найдет. Я ему это от всей души желаю.

          • 0
            Полагаю, что смысл в том, что если просто сделать цвет фона темнее, то результат получается так себе. Если к затемнению добавить насыщенность, то результат доставляет столько радости, сколько вызывает эту радость Бибер у юных дев, которые при виде его бросаются в него свои нижним бельем.
        • +3
          автор, спасибо за поток сознания, стремительное изложение, от которого остаётся хорошее впечатление. если через метафору, то как синкансен промчавшийся мимо.
          • 0
            В общем, решили с nikitavolkonsky, что тонкой иронии не оценили, поэтому заголовок беспощадно порезали :)
            • +1
              Песня настоящего художника. Пиши еще, только не части.
              • +2
                Так 3 месяца терпел с предыдущей ;)
                • 0
                  >Пиши еще, только не части

                  Не часто?
                • 0
                  О HSB это ещё что…
                  Как то раз, мне понадобилось передать разработчику фирменные цвета 40 банков, для того чтобы заливать карточку этого банка соответствующим цветом при вводе номера карты.
                  Так как самое быстрое было просто копировать HEX цвета, их я накидал в exel табличку и открестился от этого.
                  Но если бы всё было так просто, тут оказалось что разработчику нужны цвета в RGB и ни как иначе, а переводить из hex-а ему не с руки, тут перед глазами замоячила перспектива копипастить по 3 значения для каждого из 40 цветов, мне не понравилось, после чего в exel-е нашел как разбить hex #123456 на 3 знчачения 12, 34, 56, и запихнуть их в отдельные ячейки, а потом перевести из 16-ричной системы в православные R G B, после применения к изначальной таблице в которой уже были забиты все значения в hex получил профит, экономию времени и буст ЧСВ. =D
                  • 0
                    Странный какой-то вам разработчик попался.
                    Перевести HEX в UIColor — функция на одну строчку.
                    • 0
                      Незнаю что у них там не срослось, но я это победил. =D
                  • 0
                    Заголовок удивил, пришлось перечитат его еще раз.
                    • 0
                      Вам за статьи, часом, не героином платят? Или это «корчеватель»?
                      • 0
                        как сюда попал дизайнер-графоман без знания цветовых моделей? чему учит приведённый кейс?

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое