Особенности проектирования мобильных интерфейсов

В 2016 году Яндекс сделал школу мобильного дизайна и выложил курс видео-лекций на ютуб (не даю ссылку на список видео, потому что тогда вы добавите их в закладки и никогда не посмотрите). Лекция Николая будет кстати, если вы всю дорогу делали интерфейсы для веба и хотите узнать, чего там на смартфонах такого особенного:

• Человек не может тратить много времени и внимания на решение задачи. Снижайте когнитивную и визуальную нагрузку в интерфейсе.
• Чтобы не перегрузить пользователя, используйте правило «один экран — один контекст».
• Операционная среда (айось или андроид) сформировала у пользователя визуальные и моторные привычки, поэтому особенно важно следовать гайдлайнам — это снижает нагрузку на человека. Используйте знакомые значки, привычное расположение элементов и жесты.
• Люди держат смартфоны по-разному, поэтому единственное надежное положение для основных контролов — центр экрана.

Николай рассказывает живо и с интересными примерами. Рекомендую!

🕑  40 минут (26 минут на скорости ×1,5)

От герба до логотипа

Сергей не стал глубоко копать науку о знаках (семиотику), но коротко написал о трех главных классах:

• Знак-копия (он же иконический знак или пиктограмма)
  Внешне похож на объект, который он обозначает: пешеход на светофоре.
• Знак-признак (он же индексальный знак или идеограмма)
  Причина для изображаемого объекта: изображение мужчины на двери туалета, потому что туалет для мужчин.
• Знак-символ
  Обозначает объект по негласному соглашению людей: «пропеллер» для обозначения радиации.

✓ Просто здорово это знать ツ

🕑  5 минут

Как подготовить макет для передачи разработчику

Влад и Алексей поделились руководством по подготовке дизайн-макетов для передачи в разработку. Ребята сами используют его внутри компании, и это видно — гайдлайн получился подробный, с понятными примерами и без воды. Основные разделы:

• наименование файлов;
• оптимизация изображений и подготовка SVG;
• сетка и поведение элементов при изменении размера экрана;
• готовые контролы и состояние элементов;
• шрифт и высота строки;
• фавиконки;
• анимация.

От меня: рекомендую использовать для фавиконок генератор. Даёте на входе изображение 512×512, получаете все необходимые артефакты для веба и мобильных, складываете на сайт. Вообще не приходится заморачиваться.

✓ Адаптировать для своей специфики и договориться с коллегами, чтобы использовали.

🕑  20 минут

Пристрелите фичу

Фич в бэклоге всегда слишком много, а денег и времени — недостаточно. Я выработал для себя несколько правил, как разрешать это трагическое жизненное противоречие. Любимый: снять с забега. Но остальные тоже ничего ツ

✓ В конце статьи план действий, попробуйте применить на ближайших трёх фичах из роадмэпа.

🕑  5 минут

Банковский UX с экспертом СМП Банка

Сегодня в 8 вечера по Москве ребята из AIC и «СМП Банка» проводят вебинар о банковском UX. Обещают рассказать о позиционировании, продвижении и будущем банковских продуктов.

По моему опыту, вебинары у AIC водянистые и затянутые. Но встречаются и полезные куски.

Переверстка: инструкция голографического стола

Очень удачная переверстка: Игорь делает инструкцию в два раза понятнее, меняя только конструкцию макета (не трогает текст и изображения).

✓ Прочитать; взять исходный макет и повторить, не подглядывая; сравнить результаты.

🕑  30 минут на упражнение

Понравился выпуск? Подписывайтесь на рассылку