Дизайн-печь 🔥 Ваня Емелюшкин – Telegram
Дизайн-печь 🔥 Ваня Емелюшкин
1.78K subscribers
585 photos
66 videos
556 links
Ваня Емелюшкин — Sr. Product Designer в ecom.tech. Дизайнил Самокат, Мегамаркет, InDrive, Ингосстрах, Альфастрахование, S7, Welltory

Про красивое https://news.1rj.ru/str/uigallery
Статьи https://dsgners.ru/user/ivan-emeliushkin

Связь @Nordicus
Download Telegram
Этими недугами страдает только приложение для покупки ж/д билетов. Я использовал его, чтобы наглядно показать принципы, о которых хотел рассказать. Уверен, что ребята поправят его и сделают нормально.

Например, в остальных приложениях компании нет прошедших рейсов, а пассажира добавляется автоматически после покупки билета. Зацените как круто ребята сделали работу с пустыми и совпадающими полями на главной. Ни ошибок, ни ворчаний. Наоборот, хочется поиграться. Совсем другое ощущение. Красавцы)
Бюро Горбунова выравнивает карточки и текст по верхней границе строки. Так заглавная в начале предложения лучше видна и цепляет глаз.

Я делаю наоборот — приспускаю текст чуть ниже скругления, чтобы формы выглядели гармоничнее. Так получается дизайн без засечек.

Такие тонкие моменты и есть почерк дизайнера. По ним можно определить приверженец каких идей был автор.
Дизайн-печь 🔥 Ваня Емелюшкин
​​А вам какой вариант больше по душе?
Вот блин, не ту картинку прикрепил, но вы молодцы, итак разобрались) Те, кто отчаяно пытался заметить разницу между первым и вторым вариантом — на общей картинке её не было, простите. Вот нормальная, с разницей.
Осенью выйдет 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/
Forwarded from Поясни за UX
​​Большинство решили, что UX-дизайн тогглов не очень.
И это правильно!

Мы не говорим о графическом оформлении, размере, визуальном стиле и т.д.
Только о том, как эти тогглы спроектированы.

В целом они ничего: работают, показывают изменение состояния (белый овал с текстом "переплывает" на свободное место).
Но это на английском. А пример этот реальный, с сайта, который поддерживает 16 языков.

Что если интерфейс будет на русском?
1. Пробуем сохранить логику с "переплыванием" овала - тоггл распепячивает так, что он не влезает в экран.
2. Пробуем зафиксировать ширину - вроде ничего, но видели бы вы слово "Включен" на немецком...
Невозможно угадать, какая ширина будет достаточной, чтобы вместить слово на всех языках. Да и вдруг нужно будет использовать другое слово?


Гораздо лучше было бы убрать текст из тоггла вообще.
Можно использовать универсальные иконки. Или не использовать вообще ничего (всем понятных иконок не так уж и много).

Самое важное: название функции (слева от тоггла) должно быть сформулировано так, чтобы понимать что происходит без всяких подсказок.
Мне понравилось как автор разобрал дизайн тоглла. Каждый день я принимаю решения не задумываясь: привычный глазу интрлиньяж, лейблы слева, кнопка справа и т.д. Все мои решения основаны на опыте и кажутся мне очевидными и не достойными канала. Возможно, я не прав. Хотите знать о моём опыте дизайна мелких штук? Осторожно, будут банальности. Буду рассказывать как сложно читать много текста с центральной выключкой и почему чекбоксы должны быть квадратными.
Рассказывать по базовые компоненты и мелкие решения?
Anonymous Poll
96%
👍 Да, давай!
4%
Нет, спасибо уж.
This media is not supported in your browser
VIEW IN TELEGRAM
Долгая загрузка нормального человека
Приложение Welltory

Не даст скучать
Каждый текст — уникальный и не повторяется в процессе загрузки. Читать его весело и интересно

Динамичная
Видно, что не зависло и что-то делает

Не хватает:
Оценки времени
Предупреждение сколько ждать очень помогло бы оценить ожидание. С другой стороны, если бы я знал, что придётся ждать больше 10 секунд, то ушел бы в инстраграмм и не вернулся. Используйте оценку времени, когда загрузка реально больше 10-20 секунд.

Прогресса
А долго ещё ждать то?
Вот для примера долгая загрузка с прогрессом и оценкой времени, но она настолько скучна, что полностью проигрывает первому примеру. Лучше делайте загрузку интересной.

Приложение Dulux Visualizer RU
Если ваша загрузка совсем долгая, уводите её в фон и присылайте уведомление когда она закончится. Для телефонов долго — больше минуты, для остальных устройств с возможностью смотреть в несколько окон — больше пяти минут.

Почитайте эти статьи о времени, там больше конкретных советов:

Проектируем время. Как делать правильные загрузки
http://web.archive.org/web/20181225123225/http://pavelmoiseenko.ru/blog/proektiruem-vremya/

Иллюзия времени. Статья про ощущение времени в цифровых продуктах и жизни
https://habr.com/ru/post/269113/
Не заставляйте человека считать время

Говорите когда точно ждать события. Исключение — малые промежутки времени до получаса, когда четкое время может быть неуместно.
В ВК нельзя выбрать пачку файлов из папки так, чтобы он автоматом понял что это за файл. Т.е. если я хочу прикрепить пачку фотографий и видео в придачу, то мне придётся это делать разными кнопками.

Если в вашем сервисе можно прикреплять разные типы файлов, то сделайте для них одну кнопку и распознавайте файлы по типу. Если люди не понимают что именно можно прикрепить, показывайте подсказку при наведении, сделайте разделение по типам вайлов в кнопке «Ещё». Но не делайте как ВК =)
#ux_мелочи