Дизайн-печь 🔥 Ваня Емелюшкин
А вам какой вариант больше по душе?
Вот блин, не ту картинку прикрепил, но вы молодцы, итак разобрались) Те, кто отчаяно пытался заметить разницу между первым и вторым вариантом — на общей картинке её не было, простите. Вот нормальная, с разницей.
Осенью выйдет iOS 14. Сейчас самое время начать готовить приложения к обновлению, чтобы часть функций не превратилось в тыкву. Что изменится:
Выбор даты и времени
Во всех местах, где у вас стоит нативный барабан, появится календарик. Календарь больше барабана по размеру и поломает вам вёрстку, если заранее не подготовиться,
Теперь дату мы выбираем на календаре, а время печатаем с клавиатуры. Так куда быстрее и удобнее, чем крутить барабан, тут Эппл молодцы. Кроме того, есть компактный вид, по нажатию на который будет открываться модалка с календарём.
Выбор даты и времени
Во всех местах, где у вас стоит нативный барабан, появится календарик. Календарь больше барабана по размеру и поломает вам вёрстку, если заранее не подготовиться,
Теперь дату мы выбираем на календаре, а время печатаем с клавиатуры. Так куда быстрее и удобнее, чем крутить барабан, тут Эппл молодцы. Кроме того, есть компактный вид, по нажатию на который будет открываться модалка с календарём.
Меню
Меню — это дополнительный компонент, поэтому сломаться у вас ничего не должно. Меню призвано заменить Алерты и Экшн Шиты в навигации, сортировке, дополнительных действиях, уточнениях. Выглядит меню совсем как выпадающее меню на Андроиде.
Меню удобно, потому что находится прямо на месте нажатия на кнопку. Не нужно тянуться и перехватывать телефон для выбора действия, как было раньше.
В меню могут быть иконки, разделители и небольшой заголовок. Скрывается меню по нажатию на область за ним.
Это не значит, что теперь надо каждый Экшин Шит и Алерт менять на меню, они всё ещё полезны. Например, для удаления и сохранения черновиков меню лучше не использовать, т.к. легко нажать кнопку удаления. Подтверждение разрушительных действий лучше ставить подальше от самой кнопки Удалить.
Алерты так же останутся для сообщениях об ошибках системы и неожиданных случаях.
Меню — это дополнительный компонент, поэтому сломаться у вас ничего не должно. Меню призвано заменить Алерты и Экшн Шиты в навигации, сортировке, дополнительных действиях, уточнениях. Выглядит меню совсем как выпадающее меню на Андроиде.
Меню удобно, потому что находится прямо на месте нажатия на кнопку. Не нужно тянуться и перехватывать телефон для выбора действия, как было раньше.
В меню могут быть иконки, разделители и небольшой заголовок. Скрывается меню по нажатию на область за ним.
Это не значит, что теперь надо каждый Экшин Шит и Алерт менять на меню, они всё ещё полезны. Например, для удаления и сохранения черновиков меню лучше не использовать, т.к. легко нажать кнопку удаления. Подтверждение разрушительных действий лучше ставить подальше от самой кнопки Удалить.
Алерты так же останутся для сообщениях об ошибках системы и неожиданных случаях.
Пикер выбора цвета
Я ни разу не работал с таким пикером, поэтому не знаю как его изменение повлияет на существующее приложение. Тем более, я не знаю как пикеры работали раньше.
Дизайн выглядит как пикер на Маке и мне он не удобен. Я привык работать со старыми добрыми окошками цвета Фотошопа и Скетча и выбирать цвет на большой радуге не привык.
Я ни разу не работал с таким пикером, поэтому не знаю как его изменение повлияет на существующее приложение. Тем более, я не знаю как пикеры работали раньше.
Дизайн выглядит как пикер на Маке и мне он не удобен. Я привык работать со старыми добрыми окошками цвета Фотошопа и Скетча и выбирать цвет на большой радуге не привык.
В целом, новвоведения приближают Айфоны, Айпад и Мак друг к другу. Похожий выбор даты и времени, выпадающие меню, один и тот же выбор цвета. Видно, что Эппл сводит дизайн всех платформ к одной. Например, тот же МакОС стал куда более скруглённым и плоским, ближе к иОС.
Полное видео про меню, дата пикеры и выбор цвета. https://developer.apple.com/videos/play/wwdc2020/10205
Изменения:
в MacOS https://www.apple.com/macos/big-sur-preview/
iOS https://www.apple.com/ios/ios-14-preview/
iPadOS https://www.apple.com/ipados/ipados-preview/
watchOS https://www.apple.com/watchos/watchos-preview/
Полное видео про меню, дата пикеры и выбор цвета. https://developer.apple.com/videos/play/wwdc2020/10205
Изменения:
в MacOS https://www.apple.com/macos/big-sur-preview/
iOS https://www.apple.com/ios/ios-14-preview/
iPadOS https://www.apple.com/ipados/ipados-preview/
watchOS https://www.apple.com/watchos/watchos-preview/
Apple Developer
Design with iOS pickers, menus and actions - WWDC20 - Videos - Apple Developer
Create iPhone and iPad apps that look great and help people move quickly and directly to the information they need. Discover how you can...
Forwarded from Поясни за UX
Большинство решили, что UX-дизайн тогглов не очень.
И это правильно!
Мы не говорим о графическом оформлении, размере, визуальном стиле и т.д.
Только о том, как эти тогглы спроектированы.
В целом они ничего: работают, показывают изменение состояния (белый овал с текстом "переплывает" на свободное место).
Но это на английском. А пример этот реальный, с сайта, который поддерживает 16 языков.
Что если интерфейс будет на русском?
1. Пробуем сохранить логику с "переплыванием" овала - тоггл распепячивает так, что он не влезает в экран.
2. Пробуем зафиксировать ширину - вроде ничего, но видели бы вы слово "Включен" на немецком...
Невозможно угадать, какая ширина будет достаточной, чтобы вместить слово на всех языках. Да и вдруг нужно будет использовать другое слово?
Гораздо лучше было бы убрать текст из тоггла вообще.
Можно использовать универсальные иконки. Или не использовать вообще ничего (всем понятных иконок не так уж и много).
Самое важное: название функции (слева от тоггла) должно быть сформулировано так, чтобы понимать что происходит без всяких подсказок.
И это правильно!
Мы не говорим о графическом оформлении, размере, визуальном стиле и т.д.
Только о том, как эти тогглы спроектированы.
В целом они ничего: работают, показывают изменение состояния (белый овал с текстом "переплывает" на свободное место).
Но это на английском. А пример этот реальный, с сайта, который поддерживает 16 языков.
Что если интерфейс будет на русском?
1. Пробуем сохранить логику с "переплыванием" овала - тоггл распепячивает так, что он не влезает в экран.
2. Пробуем зафиксировать ширину - вроде ничего, но видели бы вы слово "Включен" на немецком...
Невозможно угадать, какая ширина будет достаточной, чтобы вместить слово на всех языках. Да и вдруг нужно будет использовать другое слово?
Гораздо лучше было бы убрать текст из тоггла вообще.
Можно использовать универсальные иконки. Или не использовать вообще ничего (всем понятных иконок не так уж и много).
Самое важное: название функции (слева от тоггла) должно быть сформулировано так, чтобы понимать что происходит без всяких подсказок.
Мне понравилось как автор разобрал дизайн тоглла. Каждый день я принимаю решения не задумываясь: привычный глазу интрлиньяж, лейблы слева, кнопка справа и т.д. Все мои решения основаны на опыте и кажутся мне очевидными и не достойными канала. Возможно, я не прав. Хотите знать о моём опыте дизайна мелких штук? Осторожно, будут банальности. Буду рассказывать как сложно читать много текста с центральной выключкой и почему чекбоксы должны быть квадратными.
Рассказывать по базовые компоненты и мелкие решения?
Anonymous Poll
96%
👍 Да, давай!
4%
❌ Нет, спасибо уж.
This media is not supported in your browser
VIEW IN TELEGRAM
Долгая загрузка нормального человека
Приложение Welltory
Не даст скучать
Каждый текст — уникальный и не повторяется в процессе загрузки. Читать его весело и интересно
Динамичная
Видно, что не зависло и что-то делает
Не хватает:
Оценки времени
Предупреждение сколько ждать очень помогло бы оценить ожидание. С другой стороны, если бы я знал, что придётся ждать больше 10 секунд, то ушел бы в инстраграмм и не вернулся. Используйте оценку времени, когда загрузка реально больше 10-20 секунд.
Прогресса
А долго ещё ждать то?
Приложение Welltory
Не даст скучать
Каждый текст — уникальный и не повторяется в процессе загрузки. Читать его весело и интересно
Динамичная
Видно, что не зависло и что-то делает
Не хватает:
Оценки времени
Предупреждение сколько ждать очень помогло бы оценить ожидание. С другой стороны, если бы я знал, что придётся ждать больше 10 секунд, то ушел бы в инстраграмм и не вернулся. Используйте оценку времени, когда загрузка реально больше 10-20 секунд.
Прогресса
А долго ещё ждать то?
Если ваша загрузка совсем долгая, уводите её в фон и присылайте уведомление когда она закончится. Для телефонов долго — больше минуты, для остальных устройств с возможностью смотреть в несколько окон — больше пяти минут.
Почитайте эти статьи о времени, там больше конкретных советов:
Проектируем время. Как делать правильные загрузки
http://web.archive.org/web/20181225123225/http://pavelmoiseenko.ru/blog/proektiruem-vremya/
Иллюзия времени. Статья про ощущение времени в цифровых продуктах и жизни
https://habr.com/ru/post/269113/
Почитайте эти статьи о времени, там больше конкретных советов:
Проектируем время. Как делать правильные загрузки
http://web.archive.org/web/20181225123225/http://pavelmoiseenko.ru/blog/proektiruem-vremya/
Иллюзия времени. Статья про ощущение времени в цифровых продуктах и жизни
https://habr.com/ru/post/269113/
Хабр
Иллюзия времени
Мой дедушка был часовщиком. Когда я был ребенком, я мог подолгу сидеть возле его большого деревянного стола, наблюдая за тем, как он собирает все эти механизмы, состоящие из десятков мельчайших...
В ВК нельзя выбрать пачку файлов из папки так, чтобы он автоматом понял что это за файл. Т.е. если я хочу прикрепить пачку фотографий и видео в придачу, то мне придётся это делать разными кнопками.
Если в вашем сервисе можно прикреплять разные типы файлов, то сделайте для них одну кнопку и распознавайте файлы по типу. Если люди не понимают что именно можно прикрепить, показывайте подсказку при наведении, сделайте разделение по типам вайлов в кнопке «Ещё». Но не делайте как ВК =)
#ux_мелочи
Если в вашем сервисе можно прикреплять разные типы файлов, то сделайте для них одну кнопку и распознавайте файлы по типу. Если люди не понимают что именно можно прикрепить, показывайте подсказку при наведении, сделайте разделение по типам вайлов в кнопке «Ещё». Но не делайте как ВК =)
#ux_мелочи
Прокачаться в дизайне и помочь животным
Канал «Поясни за UX» запускает дизайн-воркаут. Переводите приюту 200 рублей за участие, выполняете задание, получаете обратную связь от автора канала.
Все деньги пойдут в Питерский приют для животных «Брошенный ангел».
Канал «Поясни за UX» запускает дизайн-воркаут. Переводите приюту 200 рублей за участие, выполняете задание, получаете обратную связь от автора канала.
Все деньги пойдут в Питерский приют для животных «Брошенный ангел».
Forwarded from Поясни за UX
Регистрация на участие в благотворительном дизайн-воркауте заканчивается во вторник (21 июля) в конце дня.
Пока желающих недостаточно для его проведения.
Почему стоит участвовать:
1. Вы потренируетесь проектировать и дизайнить интерфейс.
2. За 2 недели вы сделаете полноценную работу для своего дизайн-портфолио.
3. Ваша работа будет разобрана: что хорошо, что можно улучшить, чему поучиться. У вас будет возможность услышать разборы других работ.
4. Вы поможете бездомным животным.
Условия простые: регистрируетесь → 2 недели выполняете задание → высылаете результат → получаете обратную связь.
Для регистрации пишите @ionnapoleon.
Без вас этот воркаут не состоится! 🤞
Пока желающих недостаточно для его проведения.
Почему стоит участвовать:
1. Вы потренируетесь проектировать и дизайнить интерфейс.
2. За 2 недели вы сделаете полноценную работу для своего дизайн-портфолио.
3. Ваша работа будет разобрана: что хорошо, что можно улучшить, чему поучиться. У вас будет возможность услышать разборы других работ.
4. Вы поможете бездомным животным.
Условия простые: регистрируетесь → 2 недели выполняете задание → высылаете результат → получаете обратную связь.
Для регистрации пишите @ionnapoleon.
Без вас этот воркаут не состоится! 🤞
Telegram
Поясни за UX
ДИЗАЙН-ВОРКАУТ НАЧИНАЕТСЯ
Мальчики и девочки, дизайн воркаут в поддержку фонда помощи животным “Брошенный ангел” объявляется открытым!
Задание:
Спроектируйте интерфейс, помогающий людям, которые нашли или хотят приютить бездомное животное. Интерфейс должен…
Мальчики и девочки, дизайн воркаут в поддержку фонда помощи животным “Брошенный ангел” объявляется открытым!
Задание:
Спроектируйте интерфейс, помогающий людям, которые нашли или хотят приютить бездомное животное. Интерфейс должен…
Подобные воркауты — хороший способ решать проблемы реального мира. На основной работе мы помогаем корпорациям зарабатывать деньги, но при этом мы можем направить свои дизайнерские усилия на решение реальных проблем. Например, в следующий раз можно делать не просто задание, а реальные баннеры, помогающие животным найти свой дом. Если вы хотите больше понимания как дизайнер может помочь спасти мир, попробуйте начать с книги Виктора Папанека «Дизайн для реального мира».
Сергей Король пишет почему её стоит прочитать и я согласен с его словами
http://sergeykorol.ru/blog/design-for-the-real-world/
Сергей Король пишет почему её стоит прочитать и я согласен с его словами
http://sergeykorol.ru/blog/design-for-the-real-world/
Блог Сергея Короля
«Дизайн для реального мира»
Книга от дизайнера-социалиста, дизайнера-хиппи, дизайнера-бунтаря и дизайнера-рационалиста. И все эти четыре человека уживаются в одном Викторе Папанеке. Каждая прочитанная книга меняет человека. Вот и после прочтения «Дизайна для реального мира» мое отношение…