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

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 ก.ค. 2024
  • В этом видео мы поговорим о гайдлайнах 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
    @ekaterinag.1331 3 ปีที่แล้ว +4

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

  • @xeniaartsman
    @xeniaartsman 3 ปีที่แล้ว

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

  • @lottasheinman5711
    @lottasheinman5711 2 ปีที่แล้ว +1

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

  • @LeraShumka
    @LeraShumka 2 ปีที่แล้ว

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

  • @valeria_wow_dovzh
    @valeria_wow_dovzh 2 ปีที่แล้ว +1

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

  • @IvanLao
    @IvanLao 2 ปีที่แล้ว +3

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

  • @user-vx1kp3fu8q
    @user-vx1kp3fu8q 3 ปีที่แล้ว +72

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

  • @iuliiaparkhomenko7189
    @iuliiaparkhomenko7189 2 ปีที่แล้ว +6

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

  • @Olya411
    @Olya411 11 หลายเดือนก่อน

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

  • @Maresto1000
    @Maresto1000 2 ปีที่แล้ว

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

  • @nikolaykovrigin634
    @nikolaykovrigin634 3 ปีที่แล้ว +1

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

  • @HokageNaruto111
    @HokageNaruto111 ปีที่แล้ว

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

  • @tantara0686
    @tantara0686 2 ปีที่แล้ว +1

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

  • @semon9432
    @semon9432 2 ปีที่แล้ว +1

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

  • @mariadawnwork9387
    @mariadawnwork9387 2 ปีที่แล้ว +5

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

  • @daryhome
    @daryhome 2 ปีที่แล้ว +1

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

  • @Biomechannik
    @Biomechannik 2 ปีที่แล้ว +1

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

  • @qambrosyeva5662
    @qambrosyeva5662 ปีที่แล้ว +2

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

  • @dariamusienko6744
    @dariamusienko6744 11 หลายเดือนก่อน

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

  • @serhiikosov8414
    @serhiikosov8414 2 ปีที่แล้ว +31

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

    • @disarto.digital
      @disarto.digital  2 ปีที่แล้ว

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

  • @indigoindigo3502
    @indigoindigo3502 4 หลายเดือนก่อน

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

  • @user-vg1wt7gx1o
    @user-vg1wt7gx1o 2 ปีที่แล้ว

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

  • @mslv_m
    @mslv_m 2 ปีที่แล้ว

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

  • @kateh4582
    @kateh4582 3 ปีที่แล้ว

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

  • @kaiynbaef
    @kaiynbaef 2 ปีที่แล้ว

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

  • @daryashibanova6263
    @daryashibanova6263 ปีที่แล้ว

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

  • @lidiia_s
    @lidiia_s 3 ปีที่แล้ว

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

  • @frrrost1504
    @frrrost1504 2 ปีที่แล้ว +1

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

  • @user-galimov
    @user-galimov 3 ปีที่แล้ว

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

  • @Pkulinsky
    @Pkulinsky 2 ปีที่แล้ว +4

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

  • @KateKharlamova-pq1bi
    @KateKharlamova-pq1bi 11 หลายเดือนก่อน

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

  • @stasmaksimov9531
    @stasmaksimov9531 2 ปีที่แล้ว

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

  • @user-ty7ol3dl6d
    @user-ty7ol3dl6d 3 ปีที่แล้ว +23

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

  • @laurakarapetyan8637
    @laurakarapetyan8637 2 ปีที่แล้ว

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

  • @victoriamilko783
    @victoriamilko783 2 ปีที่แล้ว

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

  • @alsoualsou9
    @alsoualsou9 2 ปีที่แล้ว

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

  • @user-vw2wm6jo7t
    @user-vw2wm6jo7t ปีที่แล้ว

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

  • @user-gv6or4ep6c
    @user-gv6or4ep6c ปีที่แล้ว

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

  • @andorjeen
    @andorjeen 3 ปีที่แล้ว +56

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

  • @t0use
    @t0use 2 ปีที่แล้ว +1

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

  • @user-wz9hh5wh1i
    @user-wz9hh5wh1i 2 ปีที่แล้ว

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

  • @kayanoog2061
    @kayanoog2061 3 ปีที่แล้ว

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

  • @arturuncu72
    @arturuncu72 3 ปีที่แล้ว

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

  • @user-go2oy7zy9h
    @user-go2oy7zy9h หลายเดือนก่อน

    Спасибо!

  • @FilippovaViktoria
    @FilippovaViktoria ปีที่แล้ว

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

  • @sosochitishvili2927
    @sosochitishvili2927 3 ปีที่แล้ว

    Thanks bro. Love your videos.

  • @ondskapt4059
    @ondskapt4059 2 ปีที่แล้ว

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

  • @user-jy5xi2jg3g
    @user-jy5xi2jg3g 9 หลายเดือนก่อน

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

  • @MykolayUA
    @MykolayUA 9 หลายเดือนก่อน

    Годнота

  • @talukov
    @talukov ปีที่แล้ว +2

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

  • @Name-qo6in
    @Name-qo6in 2 ปีที่แล้ว +1

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

  • @olenakolesnikova8708
    @olenakolesnikova8708 3 ปีที่แล้ว +1

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

  • @CloneFM
    @CloneFM 3 ปีที่แล้ว

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

  • @ilya603
    @ilya603 2 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  2 ปีที่แล้ว

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

  • @user-ik5fq7qj7y
    @user-ik5fq7qj7y 3 ปีที่แล้ว

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

  • @FeroxProThe
    @FeroxProThe 3 ปีที่แล้ว

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

  • @benjaminfranklin6236
    @benjaminfranklin6236 2 ปีที่แล้ว

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

  • @ekaterinaosipova8265
    @ekaterinaosipova8265 3 ปีที่แล้ว +1

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

  • @zverevaarty
    @zverevaarty 3 ปีที่แล้ว

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

  • @mykolagolovko6473
    @mykolagolovko6473 3 ปีที่แล้ว +2

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

  • @user-if4qz3cq1e
    @user-if4qz3cq1e 3 ปีที่แล้ว +2

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

    • @danila6352
      @danila6352 3 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  3 ปีที่แล้ว +1

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

    • @user-if4qz3cq1e
      @user-if4qz3cq1e 3 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  3 ปีที่แล้ว +2

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

    • @disarto.digital
      @disarto.digital  3 ปีที่แล้ว +1

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

  • @talukov
    @talukov ปีที่แล้ว +1

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

  • @azamatbaisenov140
    @azamatbaisenov140 11 หลายเดือนก่อน

    айось : )

  • @AlexStram1nsky
    @AlexStram1nsky 2 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  2 ปีที่แล้ว +3

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

  • @userAnnaUa
    @userAnnaUa 2 ปีที่แล้ว +1

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

  • @catbad7710
    @catbad7710 2 ปีที่แล้ว +1

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

  • @user-tc9rv3xv5f
    @user-tc9rv3xv5f ปีที่แล้ว

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

  • @dariamusienko6744
    @dariamusienko6744 11 หลายเดือนก่อน +2

    аёсь))0)

  • @artush2083
    @artush2083 3 ปีที่แล้ว +1

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

    • @disarto.digital
      @disarto.digital  3 ปีที่แล้ว +4

      mobbin.design/

    • @artush2083
      @artush2083 3 ปีที่แล้ว

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

    • @user-ow7xu3yu4l
      @user-ow7xu3yu4l 3 ปีที่แล้ว

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

  • @mariadawnwork9387
    @mariadawnwork9387 2 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  2 ปีที่แล้ว

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

    • @Sa_shaaa
      @Sa_shaaa 2 ปีที่แล้ว

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

  • @user-py8kf6xt3x
    @user-py8kf6xt3x 3 ปีที่แล้ว

    14:17
    TableView.

  • @xojiktulkunov6861
    @xojiktulkunov6861 2 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  2 ปีที่แล้ว

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

  • @user-md2rm5xh9n
    @user-md2rm5xh9n 3 ปีที่แล้ว

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

  • @kseniyaalive3772
    @kseniyaalive3772 3 ปีที่แล้ว +3

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

  • @user-nf4xf1xl9j
    @user-nf4xf1xl9j ปีที่แล้ว

    голос такой знакомый , я смотрела обучение по фигме Максим Кузнецов Это вы???

    • @disarto.digital
      @disarto.digital  ปีที่แล้ว

      Максим Кузнецов это я 🙂

  • @leonid_anat
    @leonid_anat 2 ปีที่แล้ว

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

  • @user-no4qz2pz4n
    @user-no4qz2pz4n ปีที่แล้ว

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

  • @artemf2926
    @artemf2926 3 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  3 ปีที่แล้ว +1

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

    • @artemf2926
      @artemf2926 3 ปีที่แล้ว

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

  • @iddqdsnegiri2170
    @iddqdsnegiri2170 7 หลายเดือนก่อน

    Режет слух про «пиксели» у эппла, там все измеряется совсем не в пикселях.

  • @aigulasadullina1890
    @aigulasadullina1890 3 ปีที่แล้ว

    Можно получить линку на Ui Kit IOS в Figma?👏🏻

    • @disarto.digital
      @disarto.digital  3 ปีที่แล้ว +3

      www.figma.com/community/file/984106517828363349/iOS-15-UI-Kit-for-Figma

  • @Music-lz8nt
    @Music-lz8nt ปีที่แล้ว +2

    Ай оу эс, а не ай ось

  • @Music-lz8nt
    @Music-lz8nt ปีที่แล้ว +1

    На счёт аутлайна иконок - не правильная информация

  • @TheDobermanTV
    @TheDobermanTV 3 ปีที่แล้ว +1

    Material You - явный закос под iOS

  • @jsnezhik
    @jsnezhik ปีที่แล้ว

    Открылся новый мир. Знаю, что ничего не знаю

  • @design8710
    @design8710 ปีที่แล้ว

    По Material Y - автор вообще не понял, и испугался того, что не понял

  • @user-yd9xy3rb4x
    @user-yd9xy3rb4x 2 ปีที่แล้ว

    Дизайнеры учите эту хрень чтобы потом с программистами не спорить.

  • @dimakoo2696
    @dimakoo2696 2 ปีที่แล้ว +1

    Режет ухо колхозный язык, в остальном норм 🙏🏼
    (Хозяйке на заметку) за кАстомные алерты, ничего тебе никто не сделает, а ui будет более консистентный

  • @nadezhdavasyukova6148
    @nadezhdavasyukova6148 2 ปีที่แล้ว

    Спасибо!

  • @user-wb1ew5um6d
    @user-wb1ew5um6d 3 ปีที่แล้ว +2

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