Телеграм канал о проектировании и дизайне интерфейсов. Публикую полезные статьи и материалы по данной теме с кратким описанием главных тезисов, и ссылками на них.
Продолжение предыдущего сообщения 👆
Руки
С помощью щипка двумя пальцами происходит всё основное управление в системе. Скролл, зум и так далее.
С элементами интерфейса, которые располагаются близко к вам можно взаимодействовать одним пальцем. Например, скролл страницы в сафари, печать на клавиатуре. (фото 5)
Используйте привычные и натуральные жесты для взаимодействия с некоторыми элементами, так как вы делали бы это в реальной жизни. Крутить пластинку или рубить фрукты вы не будете щипком двух пальцев. (фото 6)
При взаимодействии с элементами в виртуальном пространстве очень важен фидбек. Поэтому при печати на клавиатуре отображается анимация нажатий и воспроизводится звук. (фото 7)
Система поддерживает уже всем привычные жесты, пинч ту зум, поворот. Всё это делается с помощью щипка двух пальцев. Так же допускается поддержка кастомных жестов, но важно, чтобы они не конфликтовали с системными.
С помощью комбинации глаз и рук можно с лёгкостью зумить конкретную зону на фотографии. Посмотрите на нужную зону и сделайте привычный пинч ту зум.
WWDC2023 / Дизайн пространственного ввода
Дизайнеры из команды Apple рассказали об основных методах работы с пространственными интерфейсами, с которым будет взаимодействовать человек в AR шлеме Vision Pro.
Я сделал выжимку основных моментов их выступления и делюсь с вами. Из-за лимит символов в посте пришлось разбить на два сообщения.
Ссылка на оригинальное видеоВаши руки и глаза – это натуральные и понятные методы ввода. Так можно начать этот конспект, а дальше подробнее.Глаза
Это основной метод управления, по сути, это курсор с помощью которого вы можете фокусироваться на элементах интерфейса.
Дизайнеры из эпл определили, что наиболее комфортная зона для отображения главных окон приложения находится в районе 60 градусов поля зрения. (фото 1)
При появлении модальных окон, основной экран приложения сдвигается дальше от взгляда человека. Таким образом глазам не приходится адаптироваться к новой дистанции до элементов. Так формируется иерархия. (фото 2)
Круглые и скруглённые элементы приятнее глазу и лучше фокусируют на себе. Наши глаза стремятся к середине при взгляде на такие объекты. Острые же углы у объектов заставляют наши глаза смотреть на внешние стороны объекта. Рекомендуется использовать только плоский стиль элементов, никаких флэт шадоу и обводок.
Минимальная зона для расположения элемента равняется 60 точкам (pt). Но это именно зона для расположения элемента, сам элемент может быть меньше. (фото 3)
Все интерактивные элементы должны иметь ховер эффект. Таким образом человек понимает, что с такими элементами можно взаимодействовать. (видео 4)
При длительном фокусе на интерактивных элементах появляется дополнительная информация. У кнопок появляются тултипы с их описанием, а таб бар раскрывается. Когда вы смотрите на поле голосового ввода и начинаете говорить, оно автоматически активируется.
Продолжение в следующем сообщении 👇
Кажется Самсунг признали проблему (надеюсь) и вернули цветные значки уведомлениям в недавнем обновлении. Считывать уведомления в списке стало проще и удобнее вновь
Практический курс Ильи Бирмана «Пользовательский интерфейс и представление
информации» с 22 апреля по 21 мая — запись на курс открыта до21апреля
Преподаватель курса — Илья Бирман, арт‑директор Бюро Горбунова.
На курсе Илья за четыре недели покажет как дизайнить хорошие интерфейсы. Курс будет полезен начинающим и опытным дизайнерам, арт‑директорам, менеджерам, программистам и редакторам.
Записаться на курс до 21 апреля
Пользовательский интерфейс и представление информации
#реклама
Хорошая базовая статья про создание иконок — https://habr.com/ru/articles/727066/
Основные принципы хорошей иконки: одинаковая толщина линии в определённых размерах, рисование по сетке и семантический нейминг (называть иконки по их изображению, а не смыслу),
Привет! Хотел поделиться своим опытом работы с иконками. Я пользуюсь этими приемами практически каждый день и мне было интересно и полезно поделиться своим опытом, статья подойдет новичкам и тем, кто...
Как выбрать стартап для работы
Последние несколько недель я ежедневно изучаю различные стартапы, чтобы найти надежный и интересный продукт для долгосрочной работы. И в текущее время еще более важно понимать ситуацию в компании.
Дина Казакевич, QA из Adalo, работает удаленно с зарубежными стартапами уже более 6 лет и делится личным опытом анализа стартапов.
Что внутри:
— Ресурсы с информацией о стартапах
— Где и зачем смотреть на инвестиции
— Как анализировать изменения между раундами инвестиций
— Про важность местных сотрудников
— Какие вопросы задать на собеседовании
P.S.: А здесь еще одно интересное видео от Армана Сулейменова о том, как стратегически правильно выбирать стартапы для работы. Арман рассмотрел подход к поиску работы как инвестор и показал список из 12 перспективных стартапов.
👉 Читать подробнее
Вышло мое iOS приложение Курсор написанное полностью с помощью ChatGPT. Я не написал сам ни строчки кода, только слушался и повиновался командам нейросети.
Детали в треде 1/N ⤵️
Игровая компания EA выпустила обновлённый логотип новой игры FIFA (теперь она правда называется иначе из-за юр.проблем, но не суть).
Интересно, как элемент игрового интерфейса (курсор игрока) превратили в основную форму логотипа, и как классно у них получилось показать эту идею коротким роликом.
Приложение на Android с набором всех основных компонентов системы Material You.
Полезно при использовании нативных элементов в вашем дизайне и проверке их поведения.
Ссылка на приложение — play.google.com/store/a…/details
Ранее в канале я рассказывал про аналогичное для iOS — https://t.me/duiux/1095@duiux
Я думаю в этом канале многие знают про нейронные сети midjourney и chatgpt.
Коротко для тех кто не знает, первая рисует изображения вплоть до фото реализма, вторая ответит на любой вопрос и курсовую напишет. Тут даже было немного про них.
Так вот стало интересно, кто нибудь уже использовал их в повседневной работе над продуктом? Расскажите о ваших кейсах
Полноценный, мобильный инструмент для создания нативного iOS дизайна.
Простыми словами, такая Figma, но заточенная на мобильный ios дизайн. Работать можно, как с iPhone так и с iPad.
Особенное преимущество инструмента перед Figma в том, что он поддерживает нативные эффекты и фичи системы, судя по описанию с сайта продукта.
https://www.createwithplay.com/
The first native iOS design tool built for creating mobile products letting you design, iterate, and collaborate directly from your phone. Experience your design as you create it, while taking full advantage of native iOS features to bring your product to life.
Тут оказывается вышла вторая версия Android 14 для разработчиков, небольшой обзор фич из неё.
— Предпросмотр предыдущего экрана при жесте «Назад» от края
— Мигание экрана и вспышки при получении
— Генерация обоев из эмоджи.
— Доступ только к выбранным фото для приложений
— Виджет заряда аккумулятора у всех подключённых устройств.
— Возможность увеличения шрифтов до 200%, вместо 130%.
— Приложения ниже Android 6 более не будут поддерживаться.
— Поддержка ключей доступа через сканирование биометрии вместо стандартных паролей.
— Сервис Health Connect интегрирован в систему
https://youtu.be/Z4uFqqWiv5Y
Android 14 Developer Preview 2 has arrived and here is everything you need to know about this update so far and any upcoming changes! Thumbs up and enjoy!
▣ Android 14 Inspired Wallpapers & Widgets
https://www.patreon.com/howtomen
(Top Supporters: Jimi Penque, Steve Arellano,
The GodFatheR)
_________________________________________
▣ Android Flash Tool:
https://flash.android.com/
▣ Mishaal Twitter Threads (Android 14 Deep Dive)
https://twitter.com/MishaalRahman/status/1633529635253174274
https://twitter.com/MishaalRahman/status/1623382609056129025
_________________________________________
➨ HowToMen Reddit
https://www.reddit.com/r/HowToMen/
➨ Instagram
https://Instagram.com/howtomen
➨ Twitter
http://twitter.com/#!/howtomen
➨ Business Inquiry
[email protected]
_________________________________________
Timeline
0:00 Photo & Video Permission
0:12 Flash Notifications
0:28 Dessert Name
0:40 Timeline
1:38 Big Upfront Changes
7:04 Minor Changes
8:27 Under-the-hood changes
9:22 Possible Upcoming Features
13:25 How To Install Android 14
В дополнение к заметки про материалы, сделал перевод твиттер треда про лучшие практики применения материалов.
Используйте наиболее легкий (Thick) материал для большего контраста. Если вам нужно выделить какие-то элементы, то этот тип материала будет хорошим выбором.
Так же использование более легких материалов даёт пользователю больше контекста. Вы больше видите контента позади.
Для улучшения читабельности текста поверх заблюренных материалов используйте vibrancy. Vibrancy динамически подтягивает фоновой цвет к содержимому переднего плана.
Источник — https://twitter.com/createwithplay/status/1633164424365367296?t=y3yE4SoQCKLhZdPHZTKkUg&s=19