Дизайн пользовательского интерфейса, с чего начать

Навык 3. Информационная архитектура

Вам кажется что информационная архитектура «создает ощущение беспорядка»? На самом деле, есть мнение, что жизнь беспорядочна, а проекты запутанны и даже UX запутан. Все почему? Потому что, вон видите, как много всяких элементов, за которыми нужно следить, и в которые нужно вникать.


На самом деле, информационная архитектура — это набор инструментов, которые ПОМОГУТ ВАМ УБРАТЬ ЭТОТ БЕСПОРЯДОК. И как только это случится, все встанет на свои места. И у вас будет эскиз того, где вы находитесь, и куда вы хотите пойти.

Не заставляйте меня писать, как она важна. Как консультант, я уже собаку съел на одной и той же ошибке: когда ребята не создавали информационную архитектуру системы.

Ваша задача на старте всегда — вернуться к началу и выяснить, «что у нас есть», «куда мы хотим идти» и «как туда добраться». Будьте готовы ответить на такие вопросы, как:

  • Как будет организована иерархия меню?
  • У каких пунктов выше приоритет?
  • Какие фильтры понадобятся к результатам поиска?
  • И даже, какие слова мы должны использовать для элементов интерфейса?

Если вы не структурируете свою работу, у вас даже и не возникнет подобных вопросов. А вот ваших пользователей ждут бесконечные вопросы и попытки разобраться с вашим продуктом или услугой. Хотя у них всегда есть выбор – без колебаний уйти к вашим конкурентам.

  • К делу: на первый взгляд, информационная архитектура кажется сложной темой, но на самом деле все просто. Пример: спросите пользователей, какой язык они предпочитают использовать для описания действий, которые они хотят выполнить, а затем попробуйте применить сортировку карточек для сборки навигации;
  • Примените объектно-ориентированный подход к UX в вашем приложении. И это сделает вашу жизнь проще, а добавление новых функций невероятно легким занятием;
  • Для получения дополнительной информации на эту тему полистайте книгу Эбби Коверта «Как навести порядок в любом бардаке». Это блестящая вводная в информационную архитектуру и даже в управление любым дизайн-проектом.

Разработайте собственный алгоритм подхода к дизайну

Сформируйте простой порядок действий для разработки UI-дизайна вашего приложения. Вот некоторые рекомендованные шаги:

  • создание диаграммы пользовательских маршрутов;
  • изучение существующих дизайнерских шаблонов и стилей;
  • создание каркасов;
  • создание макетов.

Диаграмма пользовательских маршрутов

Сначала подумайте, как пользователи будут взаимодействовать с вашим приложением.

Как пользователи могут попасть в нужный им раздел? Можно ли на диаграмме потоков визуализировать все возможные маршруты пользователей по приложению?

Важно максимально всё упростить, уменьшив беспорядок и удалив ненужные шаги. Это действительно поможет на начальном этапе наполнить ваш UI-дизайн

Для удобства можно использовать различные готовые инструментарии, например, шаблоны блок-схем Miro, Milanote и Whimsical. Можно легко формировать маршруты с помощью трёх стандартных фигур:

  • прямоугольник — для представления изображений на экране;
  • ромб — для представления доступных пользователю решений;
  • стрелка — для отображения связей между экранами и решениями.

Здесь проиллюстрирована диаграмма маршрутов пользователя на этапе предварительного дизайна. Исследовать другие распространённые маршруты и фильтровать широкий спектр скриншотов из iOS, Android и веб-приложений можно на Page Flows.

Изучение дизайнерских шаблонов и стилей

Планирование облегчает реализацию, поэтому всегда делите задачи на более мелкие части.

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


Дорабатывайте и совершенствуйте их, чтобы сделать ваше приложение как можно лучше.

Отличным источником информации будет UI Patterns. Это прекрасный ресурс, чтобы ознакомиться с наиболее часто используемыми шаблонами проектирования и способами их применения.

Если вы не определились с тем, какие компоненты вам понадобится включить в приложение, можете посетить дополнительные сайты вроде Behance и Dribbble. Там вы найдёте замечательные идеи, потому что многое является концептуальным, а не готовым продуктом.

Вот ещё несколько отличных ресурсов:

  • UX Screenshots,
  • Laudable Apps,
  • Mobbin Design,
  • Pttrns,
  • Mobile Patterns.

Это хорошие источники визуального вдохновения для дизайна новых мобильных и веб-приложений.

Создание каркасов

На этом этапе уже можно переходить к творчеству

Каркасы являются важной частью в проектировании, поэтому их никогда не следует пропускать

Хорошо, если вы знакомы с инструментом для создания прототипов. Он поможет создать лучший дизайн для приложения. Но если для вас это в новинку, вы, скорее всего, захотите вернуться к классическому варианту: ручка и бумага. Освоения новых инструментов только замедлит вас, поэтому не бойтесь использовать простые вещи вроде ручки и бумаги.

Обратите внимание на SneakPeekIt. В нём есть большое количество шаблонов, которые можно распечатать и использовать в своих эскизах

Это совершенно бесплатный инструмент для вдохновения.

Также обязательно ознакомьтесь с Balsamiq, Whimsical и OmniGraffle. Эти компоненты предварительной сборки помогут в работе со структурой вашего приложения.

Ваш первый UI можно получить, объединив нескольких шаблонов с этих сайтов. Тщательное их изучение поможет вам оптимизировать работу приложения.

Если вы начинающий разработчик, не отказывайтесь от создания каркасов. На этой стадии пользовательские маршруты нужно тщательно продумать и визуализировать, пока их ещё можно поменять.

Создание макетов приложения


Как только иерархия установлена и структура каждого экрана определена, вы можете перейти к программному обеспечению, например, Figma или Sketch, для разработки своего продукта. Figma — облачный инструмент для UI-дизайна. Идеально подходит для реализации каркасов на этом этапе процесса.

Первоначальные макеты дизайна помогут вам более эффективно реализовать своё видение и придать приложению внешний вид реального продукта. При создании приложения макет должен стать истинным ориентиром для разработчиков. Не беспокойтесь о том, что на это придётся потратить больше времени. Чем больше проработанных деталей, тем лучше.

Если вы не в силах разобраться во всём самостоятельно и рискуете совершить ошибки, вам стоит обратиться к опытному специалисту. Он поможет сопроводить проект на всех его этапах, а также представить вашим клиентам. Просто доверьтесь специалисту.

Плюсы и минусы профессии

Плюсы:

  • Высокие доходы.
  • Творческая реализация.
  • Возможность работать над крупными проектами, которыми пользуются миллионы людей.
  • Растущий спрос на специалистов в этой сфере. От дизайнера интерфейса зависит успех программного продукта, поэтому заказчики готовы хорошо платить.
  • Вы видите результат своей работы. Сами будете пользоваться продуктами, к созданию которых приложили руку. Это мотивирует и вдохновляет.
  • Возможность работать удаленно, в том числе – с иностранными заказчиками.
  • Перспективы карьерного роста до арт-директора.

Минусы:

Профессия требует обучения. Самостоятельно освоить можно азы, но для профессиональной работы требуется образование.

Новичкам может быть сложно найти первую работу, т.к. многим работодателям нужны специалисты с опытом. Ниже в статье расскажем, как преодолеть эту проблему.

Нужно уметь подстраиваться под заказчиков. Иногда отличную идею приходится отбрасывать, потому что не получилось согласовать ее с клиентом

Важно спокойно к этому относиться.

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

Навык 5. Сборка макетов (Wireframe) и сценариев взаимодействия (User-Flow)

У вас наверняка множество идей в которых легко потеряться. Сначала вы их обдумываете, затем оттачиваете и только потом уже даете людям то, что им действительно нужно, а не то, что они якобы хотят.

Как сказал Форд:


Итак. Макет (Wireframe) — это каркас интерфейса. Он собирается с помощью черно-белых линий, прямоугольников и фигур. Wireframe – это простой способ рассказать о своей идее. А «сценарий взаимодействия» (User-Flow) представляет собой последовательность макетов, которые проходит пользователь, пока не дойдет до цели.

К делу: в следующий раз, когда вы будете создавать дизайн, сначала зарисуйте свои идеи на бумаге! Неважно, насколько грубоваты ваши рисунки — просто попробуйте сделать это с парой идей;

А еще ​​лучше, попробуйте полдюжины идей и выберите любимую. Не садитесь за комп, пока не получите что-то достойное

То, чем вы уже можете гордиться; Компьютеры идеально подходят для проработки проектов, но на старте – они тормозят вас и ваши идеи.

Flat-дизайн

iOS 7 наделала много шума благодаря своему «плоскому дизайну». Он в буквальном смысле плоский. В нём нет никаких углублений или выступов — только линии и фигуры сплошного цвета.

Я, как и все, люблю чистый и простой дизайн, но я не думаю, что этот тренд сохранится долго. Легкие трёхмерные эффекты в интерфейсах выглядят слишком естественно, чтобы от них полностью отказаться.

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

Кроме того, Google выпустила Material Design. Это единый визуальный язык для всех продуктов компании, который, по своей сути, пытается имитировать физический мир. Эта иллюстрация из руководства Material Design показывает, как передать разную глубину с помощью разных теней:

Именно в этом направлении будет развиваться дизайн. Используя тонкие подсказки, чтобы передать информацию. Ключевое слово здесь — тонкие.

Нельзя сказать, что он не имитирует физический мир, но в то же время он не похож на веб-дизайн 2006 года. В нём нет текстур, градиентов или отблесков. Я думаю, будущее за «полу-плоским» дизайном. А flat-дизайн — это просто часть истории.

Веб-дизайнер

Ежемесячно на hh.ru появляется больше тысячи новых резюме веб-дизайнеров, что говорит о высокой конкуренции в профессии. Но бояться этого не стоит: хороших специалистов мало, поэтому выделиться и найти работу не составит труда. Главное — развивайте свои навыки.

Списки обязанностей веб-дизайнера могут сильно отличаться в зависимости от должности и уровня оплаты, но обычно каждый веб-дизайнер умеет:

  • разрабатывать уникальный дизайн для сайтов;
  • проектировать структуру сайта и навигацию;
  • понимать основы юзабилити и вёрстки;
  • разбираться в графических редакторах (Figma, Sketch, Photoshop);
  • работать с типографикой.

Плюсы и минусы профессии

Плюсы

  • Высокая заработная плата.
  • Возможность работать удаленно.
  • Рынок интернет-торговли находится в стадии развития, поэтому работу найти легко.
  • Можно совмещать ее с другими видами деятельности, получая дополнительную прибыль.
  • Есть хорошие перспективы карьерного роста.
  • Недорогое обучение, много бюджетных мест для поступления на смежные специальности (графический дизайнер и другие).

Минусы

  • Профессия не слишком известная, поэтому на специалиста могут взвалить обязанности по созданию дизайна сайта, его усовершенствованию и даже наполнению.
  • Нет фиксированной заработной платы.
  • Всегда нужно подставиться под требования заказчиков, которые могут быть достаточно капризными.
  • Сложности с официальным трудоустройством, чаще всего эти специалисты либо трудятся программистами, либо работают фрилансерами.
  • Нужно вкладывать собственные средства в ПО, хорошую технику.

Краткое описание

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

Специалист должен понимать требования потенциальных клиентов и просчитывать их действия и даже ошибки, максимально облегчая работу с тем или иным продуктом. Именно он определяет, как будет располагаться меню, какие кнопочки будет нажимать пользователь, чтобы перейти на ту или иную страницу, как будет выглядеть курсор и решает многие другие задачи, поставленные заказчиком.

Где учиться на дизайнера интерфейсов?

В интернете есть множество курсов, на которых можно пройти обучение. Если вы новичок и раньше не работали в области дизайна, то вам нужны курсы для начинающих. Если вы являетесь дизайнером и желаете погрузиться в новую для себя сферу, выбирайте курсы по переподготовке.

Примеры курсов, на которых можно получить необходимые знания и навыки для работы дизайнером интерфейсов:

  • Продуктовый дизайнер – курс, который позволит освоить профессию с нуля. Вы научитесь проектировать интерфейсы, создавать дизайн мобильных приложений и веб-дизайн, формировать и управлять командами. Обучение идет в онлайн-режиме в течение года, что связано с большим объемом знаний и навыков, которые получают студенты.
  • Веб-дизайн с нуля до middle – курс предназначен для людей, которые хотят освоить веб-дизайн с нуля. В рамках курса разбираются вопросы, связанные с проектированием интерфейса.
  • Дизайн мобильных приложений – на этом курсе вы научитесь создавать дизайн мобильных интерфейсов. Курс предназначен для людей с начальным уровнем подготовки в области дизайна, желающим пройти переквалификацию в дизайнера мобильных приложений.
  • Проектирование интерфейсов – базовый курс, на котором учат создавать удобные и понятные интерфейсы. Он подходит дизайнерам, которым нужны знания и навыки в области дизайна интерфейсов, а также людям, которые хотят получить представление об этой профессии.

Важно в процессе обучения задавать как можно больше вопросов, выполнять все домашние задания, налаживать связи с сокурсниками и преподавателями, спрашивать про возможность стажировки. Это поможет получить работу в будущем

Правило № 1: Свет падает сверху

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

Пожалуй, это самое важное неочевидное правило, которое нужно усвоить в дизайне интерфейсов: свет падает сверху. В жизни свет чаще всего падает с неба или сверху

Если это не так, то это выглядит странно.

Когда свет падает сверху, он освещает верхнюю часть и отбрасывает тень на нижнюю. Верх будет светлее, а низ темнее.

Обычно мы не особо замечаем тень на нижних веках, но если их осветить, то перед вами предстанет девочка, похожая на демона.

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

Возьмём кнопки. Даже в этой относительно «плоской» кнопке есть множество деталей, связанных со светом.

  1. В ненажатом состоянии (вверху) у неё тёмный нижний край. Ведь туда не падает солнечный свет.
  2. Верхняя часть ненажатой кнопки чуть светлее, чем нижняя. Это потому, что она имитирует слегка изогнутую поверхность. Чтобы увидеть солнечный свет, вам нужно было бы направить зеркало вверх — так и изогнутая поверхность отражает чуть больше солнечного света.
  3. Ненажатая кнопка слегка отбрасывает тень — её можно увидеть в увеличенном виде.
  4. Нажатая кнопка сверху темнее, чем снизу. Потому что она находится на уровне экрана, и на неё попадает меньше солнечного света. В реальной жизни нажатые кнопки тоже темнее, потому что мы блокируем свет рукой.

Это всего лишь кнопка, но на ней уже есть четыре небольших эффекта от света. Это и есть главный урок. А теперь мы будет применять его ко всему.

Вот пара настроек из iOS 6 — «Не беспокоить» и «Уведомления». Она немного устарела, но может многому нас научить:

Верхняя часть контрольной панели отбрасывает небольшую тень. Проём для слайдера «On» располагается ещё глубже. Он имеет вогнутую форму, поэтому нижняя часть отражает больше света, чем верхняя.

Иконки, наоборот, выпуклые. Видите яркий участок в верхней части иконок? Он представляет собой поверхность, перпендикулярную к солнечному свету, следовательно, он поглощает и отражает его.

У разделителя тень там, где не падает солнечный свет, и наоборот.

Вот ещё один пример из моей старой работы:

Элементы, которые обычно имеют вогнутую форму:

  • поля для ввода текста,
  • нажатые кнопки,
  • проёмы для слайдеров,
  • радио-кнопки (неактивные),
  • чекбоксы.

Элементы, которые обычно имеют выпуклую форму:

  • кнопки (в ненажатом виде),
  • сами слайдеры,
  • контроллеры выпадающих меню,
  • карточки,
  • сама кнопка выбранной радио-кнопки,
  • всплывающие окна.

Теперь когда вы знаете, вы будете везде это замечать.

Начало работы

Что нам потребуется

Разработка нативных приложений для телевизионных устройств требует огромных затрат времени и денег. Поэтому чем более быстрым и дешёвым будет прототип, тем лучше. Если вы ограничитесь несколькими единицами оборудования и будете использовать не слишком много базовых веб-технологий, то сможете быстрее начать процесс усовершенствования вашего пользовательского интерфейса.

Выбор браузера

Мы использовали Chrome, но Firefox и Edge также подойдут.

Выбор контроллера

Для этого интерфейса вам понадобится игровой контроллер. Убедитесь, что он совместим с одной из , и помните, что некоторые контроллеры могут потребовать установки драйверов.

Подключение к HDTV

Подключите ваш компьютер или ноутбук к HDTV с помощью специального кабеля. Постарайтесь установить его на расстоянии около 3 метров от места просмотра (это стандартное расстояние для тестирования пользовательского интерфейса).

Загрузка прототипа

Загрузите вашу собственную копию каталога проекта. Откройте файл prototype/index.html в браузере.

Эта папка покажется вам знакомой, если у вас уже есть опыт веб-разработки. В ней находятся ключевые файлы javascript:

  • js/app.js: логика прототипа;
  • js/data.js: данные, входящие в пользовательский интерфейс;
  • js/libraries/Controller.min.js: наша пользовательская библиотека Gamepad API;
  • js/libraries/Controller.layouts.min.js: дополнение для совместимости с другими джойстиками.

Тестирование контроллера

Теперь нужно убедиться, что ваш контроллер работает с одной из базовых библиотек — Controller.js. Затем подключите контроллер к USB-порту вашего компьютера.

Попробуйте понажимать на кнопки и подвигать аналоговыми переключателями, чтобы посмотреть, как меняются значения на экране. Если вы не видите никакой информации, или цифры не меняются, проверьте информационную совместимость на GitHub.

3. Простой и понятный UI-дизайн

Отличительной особенностью хорошего интерфейса является простота.

Мы не имеем в виду приклеивание кнопки здесь и там с примитивной анимацией.

Мы говорим об интерфейсе, который просто понять и освоить даже новичку.

Пользователь не должен нуждаться в карте и компасе для ориентирования по разделам сайта – дизайнер сам направляет его куда нужно! Для этого используются цвета, типографика, обратная связь и визуальные иерархии, которые мы рассмотрим ниже.

Наконец, пользовательские интерфейсы в рамках одного проекта должны быть согласованными. Изучение нового сайта должно стать для посетителя приятным путешествием по спокойной реке, а не преодолением крутых стилистических порогов на каяках.

Если хотите экспериментировать с различными стилями – делайте это на этапах обсуждения и тестирования проекта. В работу должен пойти единый, согласованный стиль.

Ещё несколько заметок о цвете

Цвет — это самая сложная часть графического дизайна. И хотя большинство статей о цвете недалёкие и вряд ли помогут вам в работе, есть несколько очень полезных инструментов:

  • Никогда не используйте чёрный. Эта статья о том, что чистый чёрный цвет практически не встречается в реальной жизни. Увеличивая насыщенность серых оттенков, особенно тёмных, вы добавите живости вашему дизайну. К тому же, насыщенные серые тона ближе всего к реальной жизни, что само по себе хорошо.
  • Adobe Color CC. Отличный инструмент для того, чтобы подобрать подходящий цвет, изменить его или составить палитру.
  • Поиск в Dribbble по цвету. Ещё один классный способ найти, что работает с определённым цветом. Например, если вы уже нашли один цвет, посмотрите, какие цвета сочетают с ним лучшие дизайнеры в мире.

Реализация движения курсора

Взаимодействие с кнопками направлений

До сих пор мы занимались тем, что сопоставляли кнопки интерфейса с разными функциями. Теперь нам нужно протестировать функцию, отвечающую за передвижение курсора на нашем экране

На первый взгляд, это достаточно просто, но на деле здесь кроется масса нюансов, на которые стоит обратить внимание.

Чтобы описать все без исключения события, которые могут произойти, когда пользователь нажимает d-pad, мы будем использовать функцию dpadHandler. Она должна отслеживать подсвечивающийся элемент экрана с помощью переменной index, где бы он ни находился — в самом начале сетки, в конце или в любой произвольной её ячейке.

Операторы if будут управлять логикой, отвечающей за прокрутку, а функция changeCursor обеспечит видимое движение курсора.

Функция scroll — одна из существенных функций дизайна, с которой можно поэкспериментировать. Если вы когда-нибудь имели дело с телевизионными приложениями, наверняка вас раздражала необходимость нажимать кнопки направлений всякий раз, когда нужно передвинуть курсор с одного элемента экрана на другой.

Во многих продуктах можно использовать длинное нажатие на кнопку направления, для телевизионных интерфейсов это естественное и довольно часто используемое действие (в отличие от мобильных устройств). Чтобы реализовать длинное нажатие, нам придётся отслеживать момент, когда пользователь нажал на кнопку направления, а затем регулярно проверять, удерживал ли он эту кнопку достаточно долго, чтобы пройти фиксированный порог. Чтобы остановить курсор после долгого нажатия, мы фиксируем момент отпускания кнопки в dpadDirectionHold.

Правило № 2: Сначала чёрное и белое

Создавая дизайн в чёрно-белой палитре, до добавления цвета, вы сможете максимально упростить самые сложные визуальные элементы и сфокусироваться на макете и расположении.

В наши дни многие UX-дизайнеры увлечены подходом «сначала мобильные» — когда сначала проектируются страницы и взаимодействия для мобильных устройств. Такой вид ограничений прекрасен. Это очищает сознание. Вы начинаете с более сложной проблемы (удобное приложение на маленьком экране), а затем адаптируете решение к проблеме полегче (удобное приложение на большом экране).

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

Только так можно создать «чистый» и «простой» интерфейс. А обилием цветов в разных местах его, наоборот, очень легко испортить. Чёрно-белый дизайн заставляет вас сфокусироваться на расстояниях, размерах и макете. Именно это является основой хорошего дизайна.

Есть ситуации, когда такой подход не слишком полезен. Дизайну с определённой сильной ориентацией — «спортивный», «яркий», «мультяшный» — нужен дизайнер, который хорошо владеет цветом. Но большинству приложений нужен только «чистый и простой» дизайн.

Делать дизайн для остальных гораздо сложнее.

Типографика

Читать с расстояния 3 метров

Представьте, что вы сидите на диване и смотрите шоу по телевизору. Вы отлично видите изображение, но что происходит, когда начинаются титры или выпадает меню? Телевизионные приложения часто называют 10-ft experiences — «10-футовым опытом» из-за стандартного расстояния между вами и вашим телевизором. Приходится учитывать это расстояние при разработке пользовательского интерфейса, его элементы должны быть достаточно крупными для того, чтобы их было видно с другого конца комнаты.

Если у вас возникают сомнения относительно размеров ваших шрифтов, всегда принимайте решение в пользу их увеличения. Мы выяснили, что наименьший читабельный размер равен 18 пикселям, причём его лучше использовать для несущественной информации. В нашем примере мы выбрали размер 24 пикселя для основного текста и 92 пикселя для заголовков.

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

Естественное движение

Анимация для крупноформатного интерфейса

После того, как мы разобрались с логикой движения курсора, можно добавить анимацию — это поможет нам сделать интерфейс более гибким и естественным. Как и многие другие элементы телевизионного интерфейса, анимация имеет свои особенности. Например, яркие реалистичные изображения, которые отлично выглядят на смартфоне или ноутбуке, могут раздражать своими непомерными размерами на большом экране.

И хотя обычно считается, что динамичные изображения добавляют индивидуальность и шик (в качестве примера можно привести вдохновляющий параллакс-движения на Apple TV), в данном случае лучше ошибиться в меньшую сторону. Сдержанные, точно выверенные во времени анимации воспринимаются гораздо естественнее, чем причудливые, но «притянутые за уши» красивости.

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

При прототипировании интерфейса необходимо использовать функции, смягчающие движение. В реальной жизни объекты редко двигаются с постоянной скоростью. В нашем примере мы тестировали движение курсора с помощью стандартных кривых Безье. Мы регулировали эти кривые и длительность анимации до тех пор, пока движения курсора не стали быстрыми и плавными.

В общем случае ваша UI-анимация должна занимать от 200 до 500 мс. Однако даже если продолжительность анимации небольшая, применение неправильной кривой может визуально увеличить длину перемещения, и пользователю будет казаться, что контроллер работает медленно и постоянно тормозит

Это важно, так как обычно любители видеоигр ожидают от контроллера быстрого, почти мгновенного отклика.

Правильно организованное движение может использоваться для обозначения границ перемещения курсора. Например, в конце пронумерованного списка лёгкий отскок курсора может намекнуть, что пользователь достиг последнего пункта и больше не сможет двигаться вправо.

Подробнее прочитать о движении курсора можно в и Материалах Google.


С этим читают