Интерфейсный этюд: распутываем спонсорство на сайте
Разберём такую задачку.
На некоем сайте рекламодатели могут купить размещение своего логотипа в профилях пользователей. Например, условная фирма «Спотифай» хочет как бы стать «спонсором» всех пользователей, которые любят музыку. Если пользователь бесплатный, то назначение такого спонсора — предмет договорённостей сайта и самих спонсоров. А вот платный пользователь может сам выбрать себе спонсора (вдруг ему кто-то напрямую заплатил за размещение своего логотипа) или запретить отображение спонсора вовсе.
Нужно сделать интерфейс управления спонсорством в личном кабинете пользователя, заодно показав преимущества платной подписки.
Показываю как было изначально и как было бы лучше сделать в блоге:
https://ilyabirman.ru/meanwhile/all/ui-study-sponsorship/
Всем интерфейсникам читать.
Разберём такую задачку.
На некоем сайте рекламодатели могут купить размещение своего логотипа в профилях пользователей. Например, условная фирма «Спотифай» хочет как бы стать «спонсором» всех пользователей, которые любят музыку. Если пользователь бесплатный, то назначение такого спонсора — предмет договорённостей сайта и самих спонсоров. А вот платный пользователь может сам выбрать себе спонсора (вдруг ему кто-то напрямую заплатил за размещение своего логотипа) или запретить отображение спонсора вовсе.
Нужно сделать интерфейс управления спонсорством в личном кабинете пользователя, заодно показав преимущества платной подписки.
Показываю как было изначально и как было бы лучше сделать в блоге:
https://ilyabirman.ru/meanwhile/all/ui-study-sponsorship/
Всем интерфейсникам читать.
Сначала увеличиваем на виджете кружок, глядя на системный виджет часов, а потом ещё экспериментируем с иконкой внутри. 10 минут с Фотошопом в руках:
https://www.youtube.com/watch?v=EaSKacTWobU
ЧатГПТ от моего лица: «В этом фрагменте я говорю о важности сверки с системными образцами. Когда рисуешь свой виджет или иконку, нужно не полагаться на глазомер, а прямо ставить рядом аналогичный элемент из интерфейса iOS — и сравнивать отступы, размеры, пропорции. Если делаешь по-другому, на это должна быть причина, а не просто «так получилось». Часто именно мелкие отклонения по расстояниям, толщине линий или соотношению элементов делают макет «туповатым» — словно он из другой системы. Чтобы избежать этого, полезно брать за ориентир реальные компоненты и адаптировать свой дизайн под их язык».
Идёт запись на курс, который пройдёт 19 июля — 17 августа. Сейчас аж −30%, потому что заранее. Недавно обновились несколько лекций и добавилась новая.
Всё про курс, отзывы и кнопка записи:
https://bureau.ru/courses/ui-online/
https://www.youtube.com/watch?v=EaSKacTWobU
ЧатГПТ от моего лица: «В этом фрагменте я говорю о важности сверки с системными образцами. Когда рисуешь свой виджет или иконку, нужно не полагаться на глазомер, а прямо ставить рядом аналогичный элемент из интерфейса iOS — и сравнивать отступы, размеры, пропорции. Если делаешь по-другому, на это должна быть причина, а не просто «так получилось». Часто именно мелкие отклонения по расстояниям, толщине линий или соотношению элементов делают макет «туповатым» — словно он из другой системы. Чтобы избежать этого, полезно брать за ориентир реальные компоненты и адаптировать свой дизайн под их язык».
Идёт запись на курс, который пройдёт 19 июля — 17 августа. Сейчас аж −30%, потому что заранее. Недавно обновились несколько лекций и добавилась новая.
Всё про курс, отзывы и кнопка записи:
https://bureau.ru/courses/ui-online/
YouTube
На интерфейсном курсе: срисовываем большой круг для виджета
Сначала увеличиваем на виджете кружок, глядя на системный виджет часов, а потом ещё экспериментируем с иконкой внутри.
ЧатГПТ от моего лица: «В этом фрагменте я говорю о важности сверки с системными образцами. Когда рисуешь свой виджет или иконку, нужно…
ЧатГПТ от моего лица: «В этом фрагменте я говорю о важности сверки с системными образцами. Когда рисуешь свой виджет или иконку, нужно…
С дизайнером Николаем Романовым сделали схему метро Самары:
https://ilyabirman.ru/samara/
Спасибо Серёге Чикину за герб и Леониду Мотовских за советы.
Если вы из Самары, напишите, что мы где напутали.
https://ilyabirman.ru/samara/
Спасибо Серёге Чикину за герб и Леониду Мотовских за советы.
Если вы из Самары, напишите, что мы где напутали.
Так, коротко о презентации Эпла.
Новый стиль в основном выглядит очень навязчиво, все шутки про Виндоус-Висту весьма кстати. От многих скриншотов ощущение возврата в прошлое. И на Маке всё стало ещё крупнее и детсадовскее, а разные панели оторвались от краёв, сжирая драгоценное место. (Фигма, скажи Эплу, что это глупость!)
Но замороченность Эпла тем, как именно там отражается-искажается свет, вызывает уважение. Я думаю это всё будет весело тыкать и крутить первое время. И стиль бесцветных иконок кажется кайфовым, хочется попробовать, подложив ещё и чёрный фон.
А с другой стороны в некоторых местах появились радиальные скругления — просто жесть.
Накидаю картинок в комментарии тут.
Новый Спотлайт на Маке кажется неплохой задумкой. Как будет на практике — увидим, но радует, что сделана хотя бы попытка создания полезной функции для продвинутых пользователей.
Главное, что я запомнил из фич — системная поддержка истории буфера обмена. Наконец-то!
Клёво, что на часах можно скинуть уведомлением жестом поворота запястья туда-сюда.
Когда начали показывать Айпад, я конечно же сразу заметил ресайзилку справа внизу.
Сказали, что на Айпаде можно будет впрямую выбирать аудиовход и аудиовыход. А мне этого не хватает на Айфоне! Я хочу, чтобы он всегда писал внешним микрофоном, даже если подключены Эйрподы. А то с Эйрподами ни трек ни зашазамишь, ни войс не отправишь.
Ах да, в будильнике на телефоне можно будет настроить, на сколько минут снуз!
Новый стиль в основном выглядит очень навязчиво, все шутки про Виндоус-Висту весьма кстати. От многих скриншотов ощущение возврата в прошлое. И на Маке всё стало ещё крупнее и детсадовскее, а разные панели оторвались от краёв, сжирая драгоценное место. (Фигма, скажи Эплу, что это глупость!)
Но замороченность Эпла тем, как именно там отражается-искажается свет, вызывает уважение. Я думаю это всё будет весело тыкать и крутить первое время. И стиль бесцветных иконок кажется кайфовым, хочется попробовать, подложив ещё и чёрный фон.
А с другой стороны в некоторых местах появились радиальные скругления — просто жесть.
Накидаю картинок в комментарии тут.
Новый Спотлайт на Маке кажется неплохой задумкой. Как будет на практике — увидим, но радует, что сделана хотя бы попытка создания полезной функции для продвинутых пользователей.
Главное, что я запомнил из фич — системная поддержка истории буфера обмена. Наконец-то!
Клёво, что на часах можно скинуть уведомлением жестом поворота запястья туда-сюда.
Когда начали показывать Айпад, я конечно же сразу заметил ресайзилку справа внизу.
Сказали, что на Айпаде можно будет впрямую выбирать аудиовход и аудиовыход. А мне этого не хватает на Айфоне! Я хочу, чтобы он всегда писал внешним микрофоном, даже если подключены Эйрподы. А то с Эйрподами ни трек ни зашазамишь, ни войс не отправишь.
Ах да, в будильнике на телефоне можно будет настроить, на сколько минут снуз!
Михаил Беспалов реализовал «жидкое стекло» средствами ХТМЛа и ЦССа:
https://codepen.io/Mikhail-Bespalov/pen/MYwrMNy
Ирония в том, что работает в Хроме, но не в Сафари.
https://codepen.io/Mikhail-Bespalov/pen/MYwrMNy
Ирония в том, что работает в Хроме, но не в Сафари.