Уровни блюра в iOS
Раньше я думал, что их 3, а их 11! ОДИННАДЦАТЬ!!!! Как выбирать?
Я люблю добавлять в интерфейсы «стеклянные» поверхности. Они красиво размывают фон за собой. Обычно, я слышал от разработчиков, что есть 3 стандартных типа блюра: Extra Light, Light и Dark. Про себя я прозвал их светлый, обычный и тёмный.
Всё сложнее. Традиционно их 6:
Extra Light — супер светлый блюр. При переключении в тёмную тему остаётся светлым.
Light — просто светлый блюр. Так же игнорирует тёмную тему
Dark — просто тёмный блюр. В обоих темах остётся таким же тёмным
Extra Dark — то же, что и Dark, но более нуарный
Regular — умный блюр. Умеет понимать светлую и тёмную тему. В светлой применяет обычный light, в тёмной — dark
Prominent — радикал в нашем списке. Мимикрирует под тему, но уже с Extra Light и Extra Dark
Раньше я думал, что их 3, а их 11! ОДИННАДЦАТЬ!!!! Как выбирать?
Я люблю добавлять в интерфейсы «стеклянные» поверхности. Они красиво размывают фон за собой. Обычно, я слышал от разработчиков, что есть 3 стандартных типа блюра: Extra Light, Light и Dark. Про себя я прозвал их светлый, обычный и тёмный.
Всё сложнее. Традиционно их 6:
Extra Light — супер светлый блюр. При переключении в тёмную тему остаётся светлым.
Light — просто светлый блюр. Так же игнорирует тёмную тему
Dark — просто тёмный блюр. В обоих темах остётся таким же тёмным
Extra Dark — то же, что и Dark, но более нуарный
Regular — умный блюр. Умеет понимать светлую и тёмную тему. В светлой применяет обычный light, в тёмной — dark
Prominent — радикал в нашем списке. Мимикрирует под тему, но уже с Extra Light и Extra Dark
В iOS 13 добавилось 5 новых размытий. Все они умеют в тёмную и светлую тему, но можно отключить переключение. Иронично называются Material.
Ultra Thin Material — размывает чуть-чуть, цвета совсем немного. Сильно прозрачный
Thin Material — чуть большще размытия, чуть менее прозрачный
Material — думаю, вы уже поняли тенденцию. Ещё меньше прозрачности и больше блюра богу блюра.
Thick Material — Ага, материал потолще, блюра побольше.
Chrome Material — по сути то же самое, что и Material, но меньше размытия при той же непрозрачности.
Ultra Thin Material — размывает чуть-чуть, цвета совсем немного. Сильно прозрачный
Thin Material — чуть большще размытия, чуть менее прозрачный
Material — думаю, вы уже поняли тенденцию. Ещё меньше прозрачности и больше блюра богу блюра.
Thick Material — Ага, материал потолще, блюра побольше.
Chrome Material — по сути то же самое, что и Material, но меньше размытия при той же непрозрачности.
Vibrant Effect
Это эффект прозрачного размытия под контентом. Есть отдельно для одиночныйх текстов, больших объёмов текста и разделителей.
В 13 оси появилось много возможностей для тонкой настройки эффектов блюра и это замечательно. У дизайнеров появилось больше простора для создания красивых продуктов, а у разработчиков это работает из коробки.
В этой статье наглядно показаны виды брюра, отсюда же я и брал картинки https://pspdfkit.com/blog/2020/blur-effect-materials-on-ios/
Это эффект прозрачного размытия под контентом. Есть отдельно для одиночныйх текстов, больших объёмов текста и разделителей.
В 13 оси появилось много возможностей для тонкой настройки эффектов блюра и это замечательно. У дизайнеров появилось больше простора для создания красивых продуктов, а у разработчиков это работает из коробки.
В этой статье наглядно показаны виды брюра, отсюда же я и брал картинки https://pspdfkit.com/blog/2020/blur-effect-materials-on-ios/
Ситуация с баннером. Что случилось
Дизайнер нарисовал первый баннер, а директор поставил второй. Дизайнеру обидно.
Дизайнер нарисовал первый баннер, а директор поставил второй. Дизайнеру обидно.
Да как так то?!
Явно дизайнер и директор не договорились. Дизайнер слабо разобрался в задаче и сделал как себе представляет. Директор решил, что проще заказать новый баннер.
На самом деле мы не можем сказать, что второй баннер хуже первого. Мы не знаем аудиторию. Первый баннер — явно молодёжный. Второй же сообщает важную мысль: заплати деньги один раз и отдыхай в Тайланде всю жизнь.
Что делать
Пойти к директору и разобраться. Узнать, почему он решил, что легче заплатить деньги второй раз, чем договариваться с дизайнером. Может быть всё, что угодно: директор самодур, дизайнер хам или же просто не подумали. А может директор решил сделать приятное сыну, который мечтает стать дизайнером и это его первый баннер?
Отношения с клиентами ничем не отличаются от любых других. Вот муж просит жену купить оливкого масла, а она покупает подсолнечного. А он цезарь готовит, какое подсолнечное? Если отношения строятся на взаимоуважении, муж узнает почему жена взяла другое масло, поймёт её точку зрения. Если эта ситуация неприятна, то они вместе придумают как сделать так, чтобы она не повторялась. Если жена будет регулярно создавать подобные ситуации, муж будет чувствовать неуважение. Если разговоры не помогут, люди разведутся. С клиентами точно так же.
Как не допустить такой ситуации?
Задавать вопросы, узнать задачу со всех сторон: Что за управляющая компания? Зачем ей баннер? Почему баннер решит эту задачу лучше всего? Почему баннер, а не лендинг? Почему в этом месте? А где он ещё будет показываться? Какой посыл передавать? Почему именно такой? Что в вашем понимании свежее и современное?
Отличные примеры вопросов задают в Бюро Горбунова https://bureau.ru/about/welcome/
А вот как верно их задавать https://maximilyahov.ru/blog/all/umnik-bl/
Явно дизайнер и директор не договорились. Дизайнер слабо разобрался в задаче и сделал как себе представляет. Директор решил, что проще заказать новый баннер.
На самом деле мы не можем сказать, что второй баннер хуже первого. Мы не знаем аудиторию. Первый баннер — явно молодёжный. Второй же сообщает важную мысль: заплати деньги один раз и отдыхай в Тайланде всю жизнь.
Что делать
Пойти к директору и разобраться. Узнать, почему он решил, что легче заплатить деньги второй раз, чем договариваться с дизайнером. Может быть всё, что угодно: директор самодур, дизайнер хам или же просто не подумали. А может директор решил сделать приятное сыну, который мечтает стать дизайнером и это его первый баннер?
Отношения с клиентами ничем не отличаются от любых других. Вот муж просит жену купить оливкого масла, а она покупает подсолнечного. А он цезарь готовит, какое подсолнечное? Если отношения строятся на взаимоуважении, муж узнает почему жена взяла другое масло, поймёт её точку зрения. Если эта ситуация неприятна, то они вместе придумают как сделать так, чтобы она не повторялась. Если жена будет регулярно создавать подобные ситуации, муж будет чувствовать неуважение. Если разговоры не помогут, люди разведутся. С клиентами точно так же.
Как не допустить такой ситуации?
Задавать вопросы, узнать задачу со всех сторон: Что за управляющая компания? Зачем ей баннер? Почему баннер решит эту задачу лучше всего? Почему баннер, а не лендинг? Почему в этом месте? А где он ещё будет показываться? Какой посыл передавать? Почему именно такой? Что в вашем понимании свежее и современное?
Отличные примеры вопросов задают в Бюро Горбунова https://bureau.ru/about/welcome/
А вот как верно их задавать https://maximilyahov.ru/blog/all/umnik-bl/
Как не знать
Вот просишь дизайнера сделать нативное окно, спрашиваешь знает ли он что это? Знает, а рисует совсем не то. И так во всём. Такой дизайнер говорит, что всё знает, но результат доказывает обратное. Проще соврать и потом погуглить, чем признаться, что что-то не можешь. Расписаться в незнании — страшно. Он не созрел как профессионал.
А иногда приходишь с обеда, а у тебя 15 сообщений: где найти нужный файл? Как сделать модальное окно как у Эппл? Как работают уведомления? Мы их так присылать можем? Проще спросить и получить ответ, чем разбираться самому и его искать. Дизайнер обленился.
А бывает приходит дизайнер и говорит: это мой первый мобильный дизайн и я не знаю как правильно. Я прочитал гайды Материал дизайна и подсмотрел решение у этих приложений. Посмотри, что думаешь? Может посоветуешь ещё что посмотреть? Ай молодец, дай обниму.
Не знать — это нормально. Это честная оценка себя. Не нормально не искать ответов.
Вот просишь дизайнера сделать нативное окно, спрашиваешь знает ли он что это? Знает, а рисует совсем не то. И так во всём. Такой дизайнер говорит, что всё знает, но результат доказывает обратное. Проще соврать и потом погуглить, чем признаться, что что-то не можешь. Расписаться в незнании — страшно. Он не созрел как профессионал.
А иногда приходишь с обеда, а у тебя 15 сообщений: где найти нужный файл? Как сделать модальное окно как у Эппл? Как работают уведомления? Мы их так присылать можем? Проще спросить и получить ответ, чем разбираться самому и его искать. Дизайнер обленился.
А бывает приходит дизайнер и говорит: это мой первый мобильный дизайн и я не знаю как правильно. Я прочитал гайды Материал дизайна и подсмотрел решение у этих приложений. Посмотри, что думаешь? Может посоветуешь ещё что посмотреть? Ай молодец, дай обниму.
Не знать — это нормально. Это честная оценка себя. Не нормально не искать ответов.
Дизайн-печь 🔥 Ваня Емелюшкин pinned «Скриншоты хороших решений Я завёл новый телеграм канал со скриншотами сайтов и приложений. Туда я буду постить решения, которые мне показались интересными. Это не просто свалка скриншотов, там я пишу на что именно обратить внимание, как работает решение и…»
Доверяй глазу
В разных книгах по типографике авторы дают противоположные советы на счёт длинного тире внутри диапазона. Одни советуют его склеивать с цифрами, другие отбивать небольшими пробелами. Я же советую всегда доверять глазу и смотреть что будет.
Слева мы видим Штайнбек. Ему точно нужен волосяной пробел между тире и цифрой. А вот Робото не нужен. А вот в СФ компакт пробел такой длины, что ему явно нужен воздух.
Не стоит слушать правила, если с ними дизайн выглядит плохо.
Почитать про тире https://type.today/ru/journal/dash
Про пробелы https://kirillbelyaev.com/s/ru/
P.S. Я поставил длинное тире в примере для наглядности. Какое тире ставить в диапазонах тоже зависит от вас. Старая школа советует длинное, новая - короткое. На деле же всё зависит от шрифта. Эти правила не отлиты в железе, доверяйте глазу.
В разных книгах по типографике авторы дают противоположные советы на счёт длинного тире внутри диапазона. Одни советуют его склеивать с цифрами, другие отбивать небольшими пробелами. Я же советую всегда доверять глазу и смотреть что будет.
Слева мы видим Штайнбек. Ему точно нужен волосяной пробел между тире и цифрой. А вот Робото не нужен. А вот в СФ компакт пробел такой длины, что ему явно нужен воздух.
Не стоит слушать правила, если с ними дизайн выглядит плохо.
Почитать про тире https://type.today/ru/journal/dash
Про пробелы https://kirillbelyaev.com/s/ru/
P.S. Я поставил длинное тире в примере для наглядности. Какое тире ставить в диапазонах тоже зависит от вас. Старая школа советует длинное, новая - короткое. На деле же всё зависит от шрифта. Эти правила не отлиты в железе, доверяйте глазу.
Как сделать в iOS такое же расстояние между букв, как и в Фигме
Передавать в px
Если вы указываете расстояние в px, то оно будет соответствовать расстоянию в коде.
Если у вас в системе проценты, то пусть разработчики умножают это значение на размер шрифта.
Получается такая формула
tracking = fontSize*trackingFigma
Например
tracking = 27*0,185 = 4,995 , что как раз визуально равно значению трекинга в 5px
Если вы об этом не задумывались, вполне вероятно, что в вашем приложении разработчики либо забили на треккинг, либо строят его на глаз.
Передавать в px
Если вы указываете расстояние в px, то оно будет соответствовать расстоянию в коде.
Если у вас в системе проценты, то пусть разработчики умножают это значение на размер шрифта.
Получается такая формула
tracking = fontSize*trackingFigma
Например
tracking = 27*0,185 = 4,995 , что как раз визуально равно значению трекинга в 5px
Если вы об этом не задумывались, вполне вероятно, что в вашем приложении разработчики либо забили на треккинг, либо строят его на глаз.