Гайдлайны Google Material и Apple Human Interface. Android, iOS и Material You.

Рет қаралды 69,723

Күн бұрын

В этом видео мы поговорим о гайдлайнах Google Material Design и Apple Human Interface (iOS). Разберемся, что это такое, зачем нужны, и как их использовать в работе. Также рассмотрим некоторые частые заблуждения относительно гайдлайнов. пройдём по основным разделам Material Design, затронем тему кросс-платформенной адаптации и обсудим новый Material You.
00:00 - Что такое гайдлайны и для чего нужны
14:42 - Гайдлайны как ценный обучающий материал
16:03 - Material Design Components
18:44 - Базовые принципы Material design
23:08 - Система отступов Material design
29:29 - Навигация в Material design
31:17 - Цвет
33:54 - Типографика
38:19 - Иконки
41:54 - Motion
44:22 - Состояния элементов (States)
45:35 - Кросс-платформенная адаптация
49:13 - Human interface guidelines
54:34 - Material You
Подписывайтесь на соцсети:
Телеграм: t.me/uiux_dsgn
Инста: / disarto.digital
Behance: www.behance.net/Dexo
Dribbble: dribbble.com/Dexo

Пікірлер: 122

@ekaterinag.1331 3 жыл бұрын

Спасибо большое. Информативно, понятно и полезно👍

@LeraShumka 2 жыл бұрын

офигенный разбор, посмотрела почти без перерывов )

@lottasheinman5711 2 жыл бұрын

Легко, понятно, интересно) Благодарю за ваш труд. 🔥

@valeria_wow_dovzh 2 жыл бұрын

Большое спасибо за такое видео! Просто находка - максимально полезно и понятно🔥

@iuliiaparkhomenko7189 2 жыл бұрын

ВАУ, ВОТ ЭТО РАЗЛОЖИЛ. ВСЕ НАМНОГО ПОНЯТНЕЕ СТАЛО В МОЕЙ ЖИЗНИ) СПАСИБО

@xeniaartsman 3 жыл бұрын

Спасибо за работу и грамотную речь! Очень интересно=)

@IvanLao 2 жыл бұрын

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

@tantara0686 2 жыл бұрын

1 раз посмотрела, открыла Material Design и пересмотрела еще раз)) респект за видео

@mariadawnwork9387 2 жыл бұрын

Супер! Благодарю за труд и хорошую подачу! Когда нужно ускоренно пройти материал и вообще его хорошо усвоить - такое видео просто не заменимо.

@Biomechannik 2 жыл бұрын

Очень полезно, честно. Спасибо! Долго сомневался все же как использовать эти UI-киты и прочее. Теперь больше понимания появилось.

@Olya411 Жыл бұрын

Случайно наткнулась на канал и нашла ответ на свои вопросы в этом видео. Спасибо огромное!

@daryhome 2 жыл бұрын

спасибо за видео, для начального понимания что такое гайдлайны это видео очень кстати!

@Maresto1000 2 жыл бұрын

Понятно, грамотно и интересно. Спасибо 😊

@qambrosyeva5662 2 жыл бұрын

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

@frrrost1504 2 жыл бұрын

Я не дизайнер, а разработчик и все равно полезно было все это посмотреть. Спасибо автору!

@indigoindigo3502 5 ай бұрын

Спасибо, это лучшее и самое подробное и понятное видео из тех, что я видела ☺

@t0use 2 жыл бұрын

Храни тебя господь, спасибо. Полезное видео, сняло лишний страх перед неизвестным

@semon9432 2 жыл бұрын

Круто чуввак. Самое интересно было послушать как нарушать эту систему !!!

@user-ty7ol3dl6d 3 жыл бұрын

Спасибо, это видео дало большой толчок для изучения Material и Human, давно хотел начать, но никак не мог решить с какой стороны взяться. Хотя многие вещи делал правильно интуитивно, видимо насмотренность решает.

@Pkulinsky 2 жыл бұрын

Спасибо большое!) Лучшее, что видел на русском по гайдам. Внятно, ёмко, коротко. Отдельное спасибо за отсутствие долгого вступления и отбивок. Пора преподавать в Вышке или Британке)

@serhiikosov8414 2 жыл бұрын

Количество полезной информации за конкретное время - просто поражает. Что не видео - подарок новичку. Подача прекрасная. Не понимаю, почему 25к... Я бы совершенно не удивился будь там еще пару нулей, коих я и желаю Вам.

@disarto.digital 2 жыл бұрын

Спасибо! Я рад, что нравится 🙂

@HokageNaruto111 Жыл бұрын

Ты лучший, классно рассказываешь!!! Большое спасибо за твой труд)

@user-vg1wt7gx1o 2 жыл бұрын

спасибо за очень полезную информацию и вдохновение дизайнить👍

@victoriamilko783 2 жыл бұрын

спасибо огромное за видео. наконец кто-то подсказал, с чего начинать и как правильно относится к этим библиотекам

@dariamusienko6744 Жыл бұрын

спасибо за видео, посмотрела от начала и до конца, очень понятно и полезно!

@mslv_m 2 жыл бұрын

Спасибо! Хотела узнать ответ на один вопрос, но появились новые вопросы) буду изучать.

@nikolaykovrigin634 3 жыл бұрын

Спасибо за обзор!

@daryashibanova6263 Жыл бұрын

Спасибо большое за интересный ролик! ❤

@kateh4582 3 жыл бұрын

Огромнейшее спасибо!

@user-galimov 3 жыл бұрын

лучший, спасибо за обзор!)

@lidiia_s 3 жыл бұрын

Спасибо за ваше видео!))

@kaiynbaef 2 жыл бұрын

Не знал про Outline stroke... Так мучился!!! Спасибо!!

@laurakarapetyan8637 2 жыл бұрын

Спасибо за отличное и полезное видео

@MykolayUA 10 ай бұрын

Годнота

@user-gv6or4ep6c Жыл бұрын

Оочень полезно, спасибо!

@user-vx1kp3fu8q 3 жыл бұрын

Отличное видео, правда очень забавно слышать "айось" вместо привычного "айос" xD

@yoursleepandrelaxation6948 2 жыл бұрын

Айдос

@serenartix 2 жыл бұрын

Всё правильно, это старая школа прост :)

@stasmaksimov9531 2 жыл бұрын

Круто! Спасибо!

@KateKharlamova-pq1bi Жыл бұрын

Большое спасибо за видео.

@alsoualsou9 2 жыл бұрын

Спасибо тебе огромное! 🤩

@user-vw2wm6jo7t Жыл бұрын

Спасибо большое за этот урок

@CloneFM 3 жыл бұрын

Как всегда, очень доступно и полезно.

@user-wz9hh5wh1i 2 жыл бұрын

Круто. Спасибо.

@kayanoog2061 3 жыл бұрын

Спасибо за разбор ;)

@sosochitishvili2927 3 жыл бұрын

Thanks bro. Love your videos.

@olenakolesnikova8708 3 жыл бұрын

Спасибо ☺️ Отличное видео 👍

@andorjeen 3 жыл бұрын

Для того, чтобы отступать от правил, нужно эти правила хорошо знать. И понимать почему и для чего реализовано то или иное правило. Тогда - да. Чтобы лучше достичь поставленных целей можно отступать от них. А когда кто-то лепит потому что «я художник, я так вижу» - вот для таких и сделаны гайды.

@arturuncu72 3 жыл бұрын

Спасибо большое за видео! Колоссальный труд и очень информативный. Если читаешь это сообщение хорошего тебе дня и успехов во всем!)

@user-jy5xi2jg3g 9 ай бұрын

Спасибо что я вас нашла

@Polina_Vasilevskaya Ай бұрын

Спасибо!

@ondskapt4059 2 жыл бұрын

Спасибо тебе чувак.

@FilippovaViktoria Жыл бұрын

Спасибо огромно!

@talukov Жыл бұрын

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

@Name-qo6in 2 жыл бұрын

Вот блин, было такое заблуждение(( Точнее я думал, что есть некоторые вещи, такие как отступы по краям, размеры баров, иконок, шрифтов, которые нельзя менять (и другим рассказывал об этом, кто в первые начинал делать диз приложений). Радует, что это не ошибка, а просто лишнее и не обязательное самоограничение...эх, ну будем исправляться) Зато помню как разработчик мне сказал, что у него так классно реализовался мой дизайн, ему даже особо ничего адаптивить/править не нужно было, все четко на своих местах, потому что по размерам и отступам я следовал чисто по гайду) Огромное спасибо за этот видос)

@user-ik5fq7qj7y 3 жыл бұрын

Спасибо , очень хорошо донес информацию

@FeroxProThe 3 жыл бұрын

Кайф! Спасибо

@ilya603 2 жыл бұрын

С наступающим 2022!!!

@disarto.digital 2 жыл бұрын

Спасибо! И вас с наступающим 🎄

@benjaminfranklin6236 2 жыл бұрын

Прекрасное видео, скажите пожалуйста, где можно подробно узнать о возможности изменения Alert уведомлений? Почему нельзя менять и тд?

@mykolagolovko6473 3 жыл бұрын

Спасибо за видео! На счет Material You, думаю приложухи сделаные с помощью данного стиля будут иметь в основном развлекательный характер. Для сложных интерфейсов, пока это выглядит слабо.

@ekaterinaosipova8265 3 жыл бұрын

Спасибо большое за такое полезное видео!

@zverevaarty 3 жыл бұрын

Здравствуйте! Спасибо за такой полезный разбор! А где можно взять такой UI-Kit? Очень нужен!) Буду очень благодарна за ответ, а лучше ссылочку)

@userAnnaUa 2 жыл бұрын

Добрый день. Где найти все эти KItы, которые Вы показываете?

@talukov Жыл бұрын

Тоже хочу иметь такой файлик с упорядоченными таким образом элементами.) Подскажите пожалуйста как сделать? А для некоторых элементов все таки нельзя отходить от стандарта?

@catbad7710 2 жыл бұрын

Ссылки скиньте на юай киты, нам нужны ссылки на компоненты!!! И еще в наборе компонентов я не увидел ,к примеру, клавиатуру в перевернутом состоянии, как понять ее размеры?

@azamatbaisenov140 11 ай бұрын

айось : )

@Margarita.Degusar 3 жыл бұрын

спасибо огромное за видео, голосовала за него и очень ждала! Ответили на много вопросов которые остались после прохождения платного курса..( к сожалению). Правильно ли я поняла, если мы используем элементы из гайда но немного их кастомизируем ( меняем внутри отступы, шрифт и тд) то это уже не нативное приложение а кастомное?

@danila6352 3 жыл бұрын

кастомные элементы скорее, а не приложение

@disarto.digital 3 жыл бұрын

Нативное приложение - это приложение, спроектированное под определенное устройство. Т.е. любое iOS (или Android) приложение будет нативным. В противовес например веб приложению (оно не нативное, т.к. создавалось под веб, а не под iOS, к примеру). Так что qwerty верно заметил, что это элементы кастомные, а не приложение. И да, если вы отходите от гайдлайнов, то элементы становятся кастомными.

@Margarita.Degusar 3 жыл бұрын

@@disarto.digital а если приложение кросс-платформенное, оно ведь не может быть нативным? В таком случае оно тоже кастомное?

@disarto.digital 3 жыл бұрын

@@Margarita.Degusar Может 🙂. Нативный переводится как "родной". Кросс-платформенное значит, что приложение сделано сразу под несколько платформ. И версия под каждую платформу является нативной. Это просто разные категории, они не лежат в одной плоскости и не являются взаимоисключающими.

@disarto.digital 3 жыл бұрын

@@Margarita.Degusar Может также быть ситуация, когда приложение сделано под iOS и под веб. В таком случае, если вы на Android запускаете веб-версию приложения, то пользуетесь не нативным приложением.

@user-tc9rv3xv5f Жыл бұрын

А можешь пожалуйста поделиться ссылкой на кит этих гайдлайнов?

@AlexStram1nsky 2 жыл бұрын

Максим, привет. А какой размер макета ты берешь для дизайна под айос приложение? И почему? Айфон СЕ? Или под восьмёрку? Если под 8, то интересно как отобразится приложение при разрешении 320...

@disarto.digital 2 жыл бұрын

Привет! Выбираю 375px x 812px как наиболее популярное разрешение под iOS на данный момент.

@dariamusienko6744 Жыл бұрын

аёсь))0)

@mariadawnwork9387 2 жыл бұрын

Подскажите, если проектировать в Figme приложения под IOS, каким образом воспроизвести шрифт San Francisco (и нужно ли это) если работаешь на Windows ?

@disarto.digital 2 жыл бұрын

Шрифт San Francisco не нужно воспроизводить. Его нужно скачать и пользоваться им 🙂. Он устанавливается как и любой другой шрифт.

@Sa_shaaa 2 жыл бұрын

@@disarto.digital А его свободно можно использовать в разработке приложений на AppStore? что-то никак не могу найти инфу, везде она разнится :(

@user-py8kf6xt3x 3 жыл бұрын

14:17 TableView.

@artush2083 3 жыл бұрын

Спасибо! А что это за сайт, где ты смотришь скрины интерфейсов различных приложений?

@disarto.digital 3 жыл бұрын

mobbin.design/

@artush2083 3 жыл бұрын

@@disarto.digital оп, спасиба 🥰

@user-ow7xu3yu4l 3 жыл бұрын

А можешь порекомендовать подобный сайт с веб интерфейсами?

@xojiktulkunov6861 2 жыл бұрын

Классное видео, спасибо) Есть вопрос: Обязательно ли использовать шрифт SF при разработки приложения под IOS?

@disarto.digital 2 жыл бұрын

Нет, не обязательно 🙂

@user-no4qz2pz4n Жыл бұрын

Почему никто не оставляет ссылки на гайды???

@user-md2rm5xh9n 3 жыл бұрын

как поведение покупателей в магазине, отличается от покупок в интернет магазине?

@kseniyaalive3772 3 жыл бұрын

Аось аось аось

@artemf2926 3 жыл бұрын

Спасибо, можете обьяснить почему фреймы андройда в Figma 360*640? Это из за того что они в dp представлены я правильно понимаю?

@disarto.digital 3 жыл бұрын

Верно, 360*640 соответствует самым популярным разрешениям экранов на Android.

@artemf2926 3 жыл бұрын

@@disarto.digital Странно, когда я пытаюсь перевести разрешенме google pixel 2 в dp они не сходятся с разрешением фрейма google pixel 2 в Figma, почему так происходит?

@leonid_anat 2 жыл бұрын

Ахахах Вахаха, видео топ, абажаю тови ролики, спец в своем деле - сразу видно. У мня шутка на счет Chips Артдир: Го чипсы сюда намутим!) Диз: Не понял, ну давай, Leys?) Артдир: Бл*****, что, вахахаха

@ivankarpov4980 2 жыл бұрын

смешно 👏