Проецируя Google Material Design на десктопную систему… (часть первая)


    КДПВ из google.images

    Озарённый лучами вдохновения, хочу в данной статье наконец-то самморизировать опыт разработки интерфейса внутрикорпоративной CRM для компании Performance Lab. Особенность для меня лично в данном проекте была, прежде всего, в подходе к гайдлайнам — за основу была взята концепция Google Material Design.
    Итак, если вы, как и я отдаёте предпочтение шрифту Roboto, сочным предустановленным цветовым палитрам, чётко сформулированным правилам поведения элементов… И, как и бОльшая часть, разработчиков вы банально предпочитаете Android, то добро пожаловать под кат. Впрочем, поклонникам iOS — тоже не запрещается :)

    Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

    А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken


    Не открою секрет, если скажу, что: выигрыш в гибкости и сохранении нейтралитета, ведь в конечном итоге, профессионал должен знать гайдлайны и тех и других платформ.

    Первый контакт


    Дело было этой зимой. Раздался телефонный звонок. Девушка представилась кадровиком из компании Performance Lab. Услышав слова “под проект” и “удалённо”, я мысленно уже “что-то им начал рисовать”, едва телефонный разговор успел завершиться. Фраза “тестовое задание” тоже не прошла вскользь мимо моих ушей.

    Забегая вперёд, скажу, что в этой истории “паззл сложился”. Особенно для меня. Как раз в тот период я был очарован материальной дизайн-концепцией от Google. И по телефону девушка успела намекнуть, что 70% пользователей будущей CRM-ки — айтишники. Прекрасно! Т.к. я слепо верю, что большинство из нас с вами предпочитают Android, то это было отличным совпадением — размяться! Во-первых: я отточу навык и понимания гугловских дизайнерских “узакониваний”. Во-вторых: дам привычную айтишникам среду обитания и предсказуемости в поведнии тех или иных элементов.

    Вкратце о Google Material Design


    Нет нет, ни в коем разе не цитатами с их официального источника. Вкратце и своими словами. Прежде всего это ответ оппозиции! Удар интенсивностью по утончённым стилям Apple. Знаете, как когда-то давно The Beatles считались милыми мальчиками. Но публика хотела анти-героев. Плохих парней. И это, возможно, привело к успеху Rolling Stones. Возвращаясь к гайдлайнам, кто-нибудь может себе представить, чтобы шрифт в знаке ограничения скорости стал Helvetica, пускай даже, Regular? Этот знак будет читаем только на расстоянии, когда читать его может быть уже поздно… Очень скоро интенсивность в дизайне приложений обрела своих поклонников!

    Еще и это первая попытка систематизации правил разработки интерфейсов. Попытка подвести черту “итого” под трендом плоских (flat) дизайнов. Это и речь о том, что тени — снова хорошо и необходимо. Это попытка обосновать связь между экраном телефона и реальным миром. И связать поведение объектов воедино. Я имею право говорить только о визуальной составляющей, но я чувствую, что разработчики тоже в чём-то выиграли благодаря этой стандартизации.

    Итак, как было сказано выше, у меня как UX-дизайнера стоят две цели “предсказуемость” и “привычная среда обитания”.

    В качестве тестового задания я получил несколько экранов на выбор и отмашку “показать, как это будет выглядеть в новом виде”. Выбрал по чуйке нужный экран и начал придумывать правила адаптации еще и web-интерфейсов в соответствии с новыми гайдами.

    А есть ли у нас с Вами повод волноваться?


    Этот вопрос главным образом адресован моим коллегам (ui/ux). Отберёт ли эта стандартизация наш с вами хлеб? Я имею ввиду те гепотезы, что отныне создание многих интерфейсов будет автоматизировано. Что все стандартные элементы будут расставляться по заданной схеме, которую огласил Google. Я уверен, что нет! Заметили слово “стандартные” чуть выше? Именно! Пока дизайнер-интерфейсов способен решать нестандартные задачи, его труд никак нельзя автоматизировать. Потому что за решением такой задачи скорее всего ему понадобится выйти за рамки правил Google Material Design (только без фанатизма:)

    На сегодняшний день, у меня эта мысль настолько эволюционировала за последние полгода, что я начал придавать разнообразия стилю внешних элементов в своих очередных проектах, но при этом сохранять материальное поведение по законам Google. Об этих проектах я еще расскажу в следующих выпусках….

    Для меня это некоторое творческое разнообразие. Вы не скатитесь в рутину, выполняя однотипную стилизацию элементов для других своих заказчиков. Разумеется, если вы поклонник этих гайдов. Вы всегда можете для нового десктоп-проекта придумать новый UI-kit, но всю логику поведения элементов вы сохраняете, как сказано в правилах. Во-вторых: как минимум, предпочитающие Андроид — будут довольны. А если дальнейшее развитие тренда покажет, что Гугл был прав, то гораздо больше пользователей станут довольными! Не знаю, есть ли в моем подходе ноу-хау, но если кому-нибудь пригодится…

    Лично я последнее время убеждён, что на рынке будут преуспевать те продукты, которые дают пользователям ощущения реального мира в поведении элементов на экране. Те самые ощущения, которые дают им эмоции. Свайпы, смахивания, поведение карточек, логичная для мозга анимация, микровзаимодействия и т.п… Если приложение дарит такие эмоции при взаимодействии — можно считать, что половина дела сделана….

    Вобщем, я выкатил им вот такую картинку и стал ждать ответа….


    Продолжение читайте во второй главе...
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 34

      0
      Похоже ведь на Метро.
        0
        image
          –1
          Это меню пуск. Я говорю о самих приложениях.
            –1
            а я говорю о разнице в стилях, которая уже очевидна
              +1
              Скриншот
              Ну, сходства тоже очевидны.
        +5
        Ну всё хорошо, и обороты выделены запятыми, и смысл упакован в предложения красивые. И метафоры образные.
        Но «Андройд»… Да что ж вы творите-то, люди?!

        Ну и при таком объеме статьи можно было и вторую часть сюда же написать. А то как-то получилось красиво, но никуда.
          0
          что-то не так с самой операционкой? это не ко мне…
            +2
            Да и с операционкой всё отлично :D

            Андроид
              0
              Имеется ввиду опечатка «предпочитающие Андройд — будут довольны. »
              Надо И вместо Й ;)

                0
                ах!
                и правда жеж… вот ведь как различен пользовательский опыт! если бы мне намекнули в виде «андроЙд», я бы раньше среагировал. спасибо, исправил
            +2
            В незаполненных полях лейбл прям внутри лежать должен же.
            image
            Да и кнопки справа — в одном месте «отмена», в другом «добавить».
              +6
              Ого гадость какая мелькающая.
                0
                Хм. Впервые такое вижу, и даже не имею понятия, как это реализовать на Андроиде. По-моему, у EditText нет такой встроенной фичи.
                  0
                  В Android Design Support Library есть эта фича
                  http://android-developers.blogspot.com/2015/05/android-design-support-library.html
                    0
                    Ух ты, спасибо, буду изучать.
              • UFO just landed and posted this here
                  0
                  Да, нарисовать квадрат без теней — ещё дешевле, в том числе и для процессора, который отрисовывает эти 100500 квадратов.
                  Что бросается в глаза из непродуманности — поля в разных колонках находятся на разной высоте. Выровнять бы всё по сетке.
                    0
                    ждите продолжения, там такое будет
                      0
                      По-моему, зря. http://artgorbunov.ru/bb/soviet/20131104/
                    +2
                    Не понятно, за что DeLuxis получил минусы. Ведь Material Design (MD) это действительно экономия, но не потому что квадрат с тенями проще, а потому что его проще отобразить на любом размере экрана. Поэтому все последние графические стандарты для мобильных устройств стали плоскими. А дизайны с натуральными текстурами исчезают.
                    Плохо то, что MD — это стандарт для мобильных устройств и совсем не подходит для десктопа. Обратите внимание на огромные пустые пространства между элементами интерфейса. Они просто необходимы для пальцетыкательных экранов, но доставляют массу проблем в энтерпрайзе. Там где информации много, и нужно охватить глазом максимум из возможного.
                    В первую секунду при взгляде на дизайн кажется, что всё в порядке. А потом...:
                    • Почему в блоке «Контакты» — контакт, а не список контактов?
                    • Почему в карточке контакта, кнопка «Добавить контакт» и могу ли я окинув взглядом список контактов убедиться, что добавляемого контакта ещё нет в списке?
                    • Что это за жёлтый блок, в правом верхнем углу? Почему у него нет названия как у других блоков?
                    • Можно ли свернуть боковую панель?
                    • Строка поиска совсем не там, где ожидается, но хотя бы на виду, а не как у хабра
                    • Какой смысл в не интерактивных уведомлениях? Если уведомление о сообщении, то нужно перейти к отправке ответного сообщения. Если уведомление о событии в системе, то должен быть переход к связанному объекту системы. Например, переход к только что добавленному контакту, если об этом было уведомление.

                    Мне, не дизайнеру, предложенный дизайн тоже кажется не продуманным. Но, в любом случае, меня интересует техническая реализация, потому что даже при наличии гайдлайнов и подробного описания дизайна в картинках, его редко можно применить к своему проекту, а вот техническую реализацию или некоторые идеи повторить всегда можно. Поэтому жду продолжения.
                      0
                      конструктивно! не хочу чрезмерно интриговать, но действительно ответы на многие вопросы будут в продолжении… вся проблема — собраться с мыслями. там куча экранов
                        0
                        Мы точно говорим о десктопном приложении? «Куча экранов» — это не совсем то, что хотелось бы в продолжении. Интересует, может ли хабропользователь напрограммировать своё и если может, то как?
                        Я понимаю, что Вы хотели написать, какой большой дизайнерский труд вы проделали, и как применить MD к десктопным приложениям, но если не будет понятно как это сделать в реальном приложении, то весь рассказ становится не интересным. Пока даже не ясно, какой язык программирования будет использоваться и будет ли это десктопный html (electron, nw.js), чистый натив (.exe, dotNet), или веб-приложение с собственным сервером.
                          0
                          приглашаю вас в комментарии к следующей главе, когда она выйдет…
                    0
                    Metronic admin panel?
                      0
                      Очень странно, что уведомления где-то внизу. При появлении нового никто его не заметит.
                      И я не понял что это сверху… теги? не похоже на них. табы? тогда почему с крестиками?
                      На карточках и попапах где есть кнопки «Ок» и «Отмена». Положительный вариант всегда справа ближе к углу.
                        0
                        Вы интерфейс prosperworks.com не смотрели? Одобрено Google, но это не мешает им отходить стандартов Material Design.
                          0
                          На мой взгляд, получилось очень нагромождено.
                            0
                            Однотипные блоки с похожими серыми не выразительными иконками, которые ничем не отличаются друг от друга, это даже не Material Design.
                              0
                              Мне кажется, у всех подобных подходов одна болячка. Кнопки должны выглядеть как кнопки.
                                0
                                расскажите гуглу)))
                                  0
                                  У гугла с кнопками как раз-таки все хорошо, а вот у вас почему-то все кнопки используют один и тот же прозрачный стиль, который больше предназначен для «второстепенных» действий. На вашем скриншоте только «отмена» должна быть прозрачной, имхо.
                                0
                                Пробовали MD в десктоп приложении на NodeJS + ElectronJS (да, можно кидаться). Большая проблема в том, что если следовать гайдлайнам все получается очень, нет ОЧЕНЬ крупно. И понятно, что сейчас не модно экономить пространство экрана, но посмотрите на ту же Play Музыку (play.google.com/music) — на мониторе с разрешением 1920х1200 еле помещается список композиций в 15 (!) строк. Слишком уж эта концепция ориентирована для сенсорного ввода, да и то огроменные заголовки (которые в горизонтальной ориентации могут отожрать и >50% экрана) излишни.
                                  0
                                  об этом будет в продолжении… «как я пожертвовал ВСЕМИ отступами, чтобы уложить систему в разрешение ноутбука 1366 на 768» )))
                                    0
                                    Меня в этом плане ютуб раздражает. Ничего не влазит в 1920х1080, а раньше вполне помещалось в 1024х768.

                                  Only users with full accounts can post comments. Log in, please.