Обложка канала

dui. Страница 2

5951 @duiux

Телеграм канал о проектировании и дизайне интерфейсов. Публикую полезные статьи и материалы по данной теме с кратким описанием главных тезисов, и ссылками на них.

  • dui

    Продолжение предыдущего сообщения 👆 Руки С помощью щипка двумя пальцами происходит всё основное управление в системе. Скролл, зум и так далее. С элементами интерфейса, которые располагаются близко к вам можно взаимодействовать одним пальцем. Например, скролл страницы в сафари, печать на клавиатуре. (фото 5) Используйте привычные и натуральные жесты для взаимодействия с некоторыми элементами, так как вы делали бы это в реальной жизни. Крутить пластинку или рубить фрукты вы не будете щипком двух пальцев. (фото 6) При взаимодействии с элементами в виртуальном пространстве очень важен фидбек. Поэтому при печати на клавиатуре отображается анимация нажатий и воспроизводится звук. (фото 7) Система поддерживает уже всем привычные жесты, пинч ту зум, поворот. Всё это делается с помощью щипка двух пальцев. Так же допускается поддержка кастомных жестов, но важно, чтобы они не конфликтовали с системными. С помощью комбинации глаз и рук можно с лёгкостью зумить конкретную зону на фотографии. Посмотрите на нужную зону и сделайте привычный пинч ту зум.
  • dui

    WWDC2023 / Дизайн пространственного ввода Дизайнеры из команды Apple рассказали об основных методах работы с пространственными интерфейсами, с которым будет взаимодействовать человек в AR шлеме Vision Pro. Я сделал выжимку основных моментов их выступления и делюсь с вами. Из-за лимит символов в посте пришлось разбить на два сообщения. Ссылка на оригинальное видео Ваши руки и глаза – это натуральные и понятные методы ввода. Так можно начать этот конспект, а дальше подробнее. Глаза Это основной метод управления, по сути, это курсор с помощью которого вы можете фокусироваться на элементах интерфейса. Дизайнеры из эпл определили, что наиболее комфортная зона для отображения главных окон приложения находится в районе 60 градусов поля зрения. (фото 1) При появлении модальных окон, основной экран приложения сдвигается дальше от взгляда человека. Таким образом глазам не приходится адаптироваться к новой дистанции до элементов. Так формируется иерархия. (фото 2) Круглые и скруглённые элементы приятнее глазу и лучше фокусируют на себе. Наши глаза стремятся к середине при взгляде на такие объекты. Острые же углы у объектов заставляют наши глаза смотреть на внешние стороны объекта. Рекомендуется использовать только плоский стиль элементов, никаких флэт шадоу и обводок. Минимальная зона для расположения элемента равняется 60 точкам (pt). Но это именно зона для расположения элемента, сам элемент может быть меньше. (фото 3) Все интерактивные элементы должны иметь ховер эффект. Таким образом человек понимает, что с такими элементами можно взаимодействовать. (видео 4) При длительном фокусе на интерактивных элементах появляется дополнительная информация. У кнопок появляются тултипы с их описанием, а таб бар раскрывается. Когда вы смотрите на поле голосового ввода и начинаете говорить, оно автоматически активируется. Продолжение в следующем сообщении 👇
  • dui

    Кажется Самсунг признали проблему (надеюсь) и вернули цветные значки уведомлениям в недавнем обновлении. Считывать уведомления в списке стало проще и удобнее вновь
  • Реклама

  • dui

    Практический курс Ильи Бирмана «Пользовательский интерфейс и представление информации» с 22 апреля по 21 мая — запись на курс открыта до 21 апреля Преподаватель курса — Илья Бирман, арт‑директор Бюро Горбунова. На курсе Илья за четыре недели покажет как дизайнить хорошие интерфейсы. Курс будет полезен начинающим и опытным дизайнерам, арт‑директорам, менеджерам, программистам и редакторам.  Записаться на курс до 21 апреля Пользовательский интерфейс и представление информации #реклама
  • dui

    Хорошая базовая статья про создание иконок — https://habr.com/ru/articles/727066/ Основные принципы хорошей иконки: одинаковая толщина линии в определённых размерах, рисование по сетке и семантический нейминг (называть иконки по их изображению, а не смыслу),
    12 принципов создания успешной иконки

    Привет! Хотел поделиться своим опытом работы с иконками. Я пользуюсь этими приемами практически каждый день и мне было интересно и полезно поделиться своим опытом, статья подойдет новичкам и тем, кто...

    Хабр
  • dui

    На канале Толи вышел полезный пост для тех кто сейчас ищет работу в стартапах, не мог не поделиться.
  • dui

    Как выбрать стартап для работы Последние несколько недель я ежедневно изучаю различные стартапы, чтобы найти надежный и интересный продукт для долгосрочной работы. И в текущее время еще более важно понимать ситуацию в компании. Дина Казакевич, QA из Adalo, работает удаленно с зарубежными стартапами уже более 6 лет и делится личным опытом анализа стартапов. Что внутри: — Ресурсы с информацией о стартапах — Где и зачем смотреть на инвестиции — Как анализировать изменения между раундами инвестиций — Про важность местных сотрудников — Какие вопросы задать на собеседовании P.S.: А здесь еще одно интересное видео от Армана Сулейменова о том, как стратегически правильно выбирать стартапы для работы. Арман рассмотрел подход к поиску работы как инвестор и показал список из 12 перспективных стартапов. 👉 Читать подробнее
  • dui

    Недавно я спрашивал в канале об опыте применения нейросетей в своих проектах и вот на днях я узнал историю, как человек без знания кода сделал своё iOS приложение и выложил его в AppStore. Весь код был написан с помощью ChatGPT. https://twitter.com/pakhandrin/status/1640397012502822938?s=46&t=9YDA16bk8nY6UoktxsQ63A

    Вышло мое iOS приложение Курсор написанное полностью с помощью ChatGPT. Я не написал сам ни строчки кода, только слушался и повиновался командам нейросети. Детали в треде 1/N ⤵️

    Twitter
  • dui

    Контекстное меню на айфоне умеет конвертировать выделенные значения в местные размерности.
  • dui

    Игровая компания EA выпустила обновлённый логотип новой игры FIFA (теперь она правда называется иначе из-за юр.проблем, но не суть). Интересно, как элемент игрового интерфейса (курсор игрока) превратили в основную форму логотипа, и как классно у них получилось показать эту идею коротким роликом.
  • dui

    Приложение на Android с набором всех основных компонентов системы Material You. Полезно при использовании нативных элементов в вашем дизайне и проверке их поведения. Ссылка на приложение — play.google.com/store/a…/details Ранее в канале я рассказывал про аналогичное для iOS — https://t.me/duiux/1095 @duiux
  • dui

  • dui

    Я думаю в этом канале многие знают про нейронные сети midjourney и chatgpt. Коротко для тех кто не знает, первая рисует изображения вплоть до фото реализма, вторая ответит на любой вопрос и курсовую напишет. Тут даже было немного про них. Так вот стало интересно, кто нибудь уже использовал их в повседневной работе над продуктом? Расскажите о ваших кейсах
  • dui

    Небольшая подборка для вдохновения. 1. Мой любимый аккаунт для черпания идей для медиа приложений — dribbble.com/shots/1…-Profile 2. Понравилась идея со слайдером выбора цвета — dribbble.com/shots/1…itor-app 3. Интересная коцепция дизайна в стиле старых ос для компов — dribbble.com/shots/1…o-Editor 4. Чистый и аккуратный дизайн интерфейса камеры с лёгким ароматом сквевоморфизма 🤌— dribbble.com/shots/1…o-Editor
  • dui

    Полноценный, мобильный инструмент для создания нативного iOS дизайна. Простыми словами, такая Figma, но заточенная на мобильный ios дизайн. Работать можно, как с iPhone так и с iPad. Особенное преимущество инструмента перед Figma в том, что он поддерживает нативные эффекты и фичи системы, судя по описанию с сайта продукта. https://www.createwithplay.com/
    Home

    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.

    Createwithplay
  • Реклама

  • dui

    Тут оказывается вышла вторая версия Android 14 для разработчиков, небольшой обзор фич из неё. — Предпросмотр предыдущего экрана при жесте «Назад» от края — Мигание экрана и вспышки при получении — Генерация обоев из эмоджи. — Доступ только к выбранным фото для приложений — Виджет заряда аккумулятора у всех подключённых устройств. — Возможность увеличения шрифтов до 200%, вместо 130%. — Приложения ниже Android 6 более не будут поддерживаться. — Поддержка ключей доступа через сканирование биометрии вместо стандартных паролей. — Сервис Health Connect интегрирован в систему https://youtu.be/Z4uFqqWiv5Y
    Android 14 - Every MAJOR change and New Feature!

    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

    YouTube
  • dui

  • dui

    В дополнение к заметки про материалы, сделал перевод твиттер треда про лучшие практики применения материалов. Используйте наиболее легкий (Thick) материал для большего контраста. Если вам нужно выделить какие-то элементы, то этот тип материала будет хорошим выбором. Так же использование более легких материалов даёт пользователю больше контекста. Вы больше видите контента позади. Для улучшения читабельности текста поверх заблюренных материалов используйте vibrancy. Vibrancy динамически подтягивает фоновой цвет к содержимому переднего плана. Источник — https://twitter.com/createwithplay/status/1633164424365367296?t=y3yE4SoQCKLhZdPHZTKkUg&s=19