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

[@NikitosZs]

Похоже ведь на Метро.

[@kamushken]

[@NikitosZs]

Это меню пуск. Я говорю о самих приложениях.

[@kamushken]

а я говорю о разнице в стилях, которая уже очевидна

[@NikitosZs]

Ну, сходства тоже очевидны.

[@janson]

Ну всё хорошо, и обороты выделены запятыми, и смысл упакован в предложения красивые. И метафоры образные.
Но «Андройд»… Да что ж вы творите-то, люди?!

Ну и при таком объеме статьи можно было и вторую часть сюда же написать. А то как-то получилось красиво, но никуда.

[@kamushken]

что-то не так с самой операционкой? это не ко мне…

[@janson]

Да и с операционкой всё отлично :D

Андроид

[@ru_vlad]

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

[@kamushken]

ах!
и правда жеж… вот ведь как различен пользовательский опыт! если бы мне намекнули в виде «андроЙд», я бы раньше среагировал. спасибо, исправил

[@Denai]

В незаполненных полях лейбл прям внутри лежать должен же.

Да и кнопки справа — в одном месте «отмена», в другом «добавить».

[@MonkAlex]

Ого гадость какая мелькающая.

[@VioletGiraffe]

Хм. Впервые такое вижу, и даже не имею понятия, как это реализовать на Андроиде. По-моему, у EditText нет такой встроенной фичи.

[@Alexious_sh]

В Android Design Support Library есть эта фича
http://android-developers.blogspot.com/2015/05/android-design-support-library.html

[@VioletGiraffe]

Ух ты, спасибо, буду изучать.

[@sanja1989]

Да, нарисовать квадрат без теней — ещё дешевле, в том числе и для процессора, который отрисовывает эти 100500 квадратов.
Что бросается в глаза из непродуманности — поля в разных колонках находятся на разной высоте. Выровнять бы всё по сетке.

[@kamushken]

ждите продолжения, там такое будет

[@Balek]

По-моему, зря. http://artgorbunov.ru/bb/soviet/20131104/

[@gimntut]

Не понятно, за что DeLuxis получил минусы. Ведь Material Design (MD) это действительно экономия, но не потому что квадрат с тенями проще, а потому что его проще отобразить на любом размере экрана. Поэтому все последние графические стандарты для мобильных устройств стали плоскими. А дизайны с натуральными текстурами исчезают.
Плохо то, что MD — это стандарт для мобильных устройств и совсем не подходит для десктопа. Обратите внимание на огромные пустые пространства между элементами интерфейса. Они просто необходимы для пальцетыкательных экранов, но доставляют массу проблем в энтерпрайзе. Там где информации много, и нужно охватить глазом максимум из возможного.
В первую секунду при взгляде на дизайн кажется, что всё в порядке. А потом...:

• Почему в блоке «Контакты» — контакт, а не список контактов?
• Почему в карточке контакта, кнопка «Добавить контакт» и могу ли я окинув взглядом список контактов убедиться, что добавляемого контакта ещё нет в списке?
• Что это за жёлтый блок, в правом верхнем углу? Почему у него нет названия как у других блоков?
• Можно ли свернуть боковую панель?
• Строка поиска совсем не там, где ожидается, но хотя бы на виду, а не как у хабра
• Какой смысл в не интерактивных уведомлениях? Если уведомление о сообщении, то нужно перейти к отправке ответного сообщения. Если уведомление о событии в системе, то должен быть переход к связанному объекту системы. Например, переход к только что добавленному контакту, если об этом было уведомление.

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

[@kamushken]

конструктивно! не хочу чрезмерно интриговать, но действительно ответы на многие вопросы будут в продолжении… вся проблема — собраться с мыслями. там куча экранов

[@gimntut]

Мы точно говорим о десктопном приложении? «Куча экранов» — это не совсем то, что хотелось бы в продолжении. Интересует, может ли хабропользователь напрограммировать своё и если может, то как?
Я понимаю, что Вы хотели написать, какой большой дизайнерский труд вы проделали, и как применить MD к десктопным приложениям, но если не будет понятно как это сделать в реальном приложении, то весь рассказ становится не интересным. Пока даже не ясно, какой язык программирования будет использоваться и будет ли это десктопный html (electron, nw.js), чистый натив (.exe, dotNet), или веб-приложение с собственным сервером.

[@kamushken]

приглашаю вас в комментарии к следующей главе, когда она выйдет…

[@iXCray]

Metronic admin panel?

[@aimh]

Очень странно, что уведомления где-то внизу. При появлении нового никто его не заметит.
И я не понял что это сверху… теги? не похоже на них. табы? тогда почему с крестиками?
На карточках и попапах где есть кнопки «Ок» и «Отмена». Положительный вариант всегда справа ближе к углу.

[@ElOtroYo]

Вы интерфейс prosperworks.com не смотрели? Одобрено Google, но это не мешает им отходить стандартов Material Design.

[@Alterlook]

На мой взгляд, получилось очень нагромождено.

[@zuluss]

Однотипные блоки с похожими серыми не выразительными иконками, которые ничем не отличаются друг от друга, это даже не Material Design.

[@TargetSan]

Мне кажется, у всех подобных подходов одна болячка. Кнопки должны выглядеть как кнопки.

[@kamushken]

расскажите гуглу)))

[@Alexious_sh]

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

[@MikeVazovsky]

Пробовали MD в десктоп приложении на NodeJS + ElectronJS (да, можно кидаться). Большая проблема в том, что если следовать гайдлайнам все получается очень, нет ОЧЕНЬ крупно. И понятно, что сейчас не модно экономить пространство экрана, но посмотрите на ту же Play Музыку (play.google.com/music) — на мониторе с разрешением 1920х1200 еле помещается список композиций в 15 (!) строк. Слишком уж эта концепция ориентирована для сенсорного ввода, да и то огроменные заголовки (которые в горизонтальной ориентации могут отожрать и >50% экрана) излишни.

[@kamushken]

об этом будет в продолжении… «как я пожертвовал ВСЕМИ отступами, чтобы уложить систему в разрешение ноутбука 1366 на 768» )))

[@MonkAlex]

Меня в этом плане ютуб раздражает. Ничего не влазит в 1920х1080, а раньше вполне помещалось в 1024х768.