Original subtitles

Графическое отображение состояния элементов интерфейса

Давайте начнём с пазлы и разъём наименьшую сущность интерфейса

А именно окно

Один из самых важных элементов оценки интерфейса это наглядность и

Взаимодействие с этим элементом со стороны пользователя

Человек который используют кнопку

Должен понимать что Клик по элементу хоть на что-то повлиял

Работа

Система Не игнорируй

Давайте рассмотрим на практике о чём я говорю

Возьмём стандартную простенькую палатку интерфейс

Вот она сейчас

У нас перед глазами

Она сделана в виде странички

Примером

Это что-то вроде главного меню

Subtitled by -♪ online-courses.club ♪- We compress knowledge for you! https://t.me/joinchat/ailxpXoW3JVjYzQ1

Я навожу на верхнюю кнопку курсора

Ничего здесь не

И уже на данном этапе

Кнопка не даёт никакой реакции

Это неправильно

Настя Мы наведём на кнопку расположенную ниже

Мы видим что она меняет своё состояние

Меняет свой цвет и выделяется на фоне остальных неактивных элемент

Это первое что нужно делать при разработке меню интерфейса то есть

Элементы реагировать

Оно контакт селектором то есть данном случае с мышкой

Это не всё если я прощу курсор ещенешеф экрана кнопку

Я получу эффект

Нажатие

То есть уже третий эффект взаимодействия

Воспроизводящий ся при клике

Это то что понимает В итоге тактильность интерфейса на достаточно

Уровень

Базовая кнопка

Должна иметь как минимум три состояния

Первое это соответственно неактивное состояние

Второе это активное состояние когда

Селектор активировал

Непосредственно эту кнопку то есть когда кнопка выбрала

Третье это состояние непосредственно выполнения какой-то деятельности

Активируемые предмет или открываем какое-то меню

Это должно сопровождаться

Матрас дополнительный ряд

Естественно

Бывают случаи когда кнопка

Имеется

Кнопка Занимает какое-то место но при этом она

Не активна в виду какой-то причины

Это часто встречается в играх

Если если в игре есть какие-то дополнительные режимы которые открываются после открытия

Не хочу

То есть там недоступны не открыты ещё скилы и всё такое

Естественно тут мы обходимся одним спрайтом

Который выглядит более

Бекон чем остальные

Градация серого

Летом подобные элементы не должны обладать стоящий глубиной взаимодействия что активно

Части мы наводим на

Любовь на пачку и у нас

Уже

Её состояние

Здесь мы не видим никаких состояний в принципе

Это позволяет нам понять что кнопка действительно недоступна

Они нравится какой-то активный имеющий какой-то другой цвет

Прыщи

Того можно сказать

Для базовых кнопки достаточно крупной

Нужно

4 Спрайта

Из которых 3 это у нас

Проект базового или активного состояния

И 4 Sprite это чёрно-белый

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

Не стоит добавлять сильные звуковые эффекты

Потому что Мышка может за доли секунды пересесть сразу 10 пунктов меню

На всю округу Как это сделано в Quake 3 Arena

В свою очередь работа

Более плавно

И тут уже звуковое сопровождение переходов между пунктами меню

Будет выглядеть более адекватно

При скорости даже достаточно быстрый это всё равно звучит прилично

Это тоже стоит учитывать при создании меню со звуком

Ещё одно дополнение к вопросу о кнопке

Само собой способов отобразить активную кнопку

Анжелика множество

Помимо банальной перерисовки уже существующего блока можно делать дополнительные анимации

Хорошо подходит в случае когда меня не размашистое новый фокус

Axios Proxy нужно сахара

Как это сделано высунулся

Ангелочком

Динамический эффект селектора это почти стопроцентный способ сделать из простенькое меню

Что-то с изюминкой

Как видите здесь у нас меню очень простое Если не считать фото

И поэтому

Ангелочек идеально дополняет

Таможня здесь стоит учитывать что в отличие от статики

Динамика улавливается чуть-ли ни в первую сотню миллисекунд глаза

Тоже самое в принципе касаются не только

Меню на игровых карт

Нередко на радарах

Помимо обычных статических икона

Добавляется что-то типа ударных элементов от которых исходит волны как будто это источники чего

Это позволяет идентифицировать что-то важное

Что-то более выделяющееся среди изменения важных элементов

Который находится на фоне которых может быть больше

Это тоже стоит

Динамические эффекты это очень Рабочая тема для простых меню

Также Как пример идеального меню жилыми кнопками хозяйством

Меню Warcraft

Ответит

Кнопки имеет три состояния о которых мы говорили

Первое состояние доставщиков второе это уже активирована кнопка

Изменяется просто задний фон подсвечивается больше

Встреча

Это при нажатии у нас это кнопочка погибает внутрь

Буквально

Говоря о том что это действительно объёмная кнопка

Ну это всё сделал достаточно при этом простыла эффект

Потому что проект просто

Двигайся немножко вниз относительно своего металлического ободка

Весёлый Это очень хорошо

В общем-то насколько это нужно в общем-то в этой версии Warcraft Blizzard

Хорошо

Давайте теперь вручную с анимируем нажатие кнопок

Я уже подготовила

Кнопочки

Одна из них республика

Другая внешняя нуждается

Начнём мы с первой кнопки

Здесь всё банан

Верхняя часть которой мы видим есть боковушка то есть

Наш Сиреневая линия

Чтобы сделать простейшие нажатие кнопки

Нам достаточно просто опустить верхнюю часть вниз

Таким образом

Просто сокращаем количество пикселей сочинение и кнопка просто вдавливается

При этом желательно на всю площадь кнопки добавить затемнение

Ребёнка 2 кнопочки

Кнопочка у нас будет уходить не просто на уровень панели

Она будет

Немножко уже глубже

Первую очередь данном случае мы сокращаем эту кнопочку с нижней части то есть убираем нижние

Проводим это задание 1 пример

И потом мы её опускаем ещё

Ну опускай могут мы уже перестаем видеть одну извини

Потому что на кнопки

Укладка обычной есть

Расчёт на определённое число

Но при этом мы начинаем видеть

Имеющиеся сбоку

Боковушки

Можно добавить ещё кадр и опустить кнопочку ещё глубже тем самым открыть для себя

Ещё один

Полноценный слой

Татьяной части сверху

Помимо этого у 2 кнопки также происходит затемнение причём чем Глобус

Больше она проявляется

Думаю подобного нам хватит

Теперь третье окно

Здесь как умеете у нас нестандартный Поворот Мы видим сразу Три стороны

Полигон

И поэтому кнопочка будет соответственно двигаться вот туда

Subtitled by -♪ online-courses.club ♪- We compress knowledge for you! https://t.me/joinchat/ailxpXoW3JVjYzQ1

Сокращаться сразу в две стороны

Давайте попробуем это сделать

Найти скопированный И начнём наши перемещения на один пиксель

Потом на следующем кадре

Уже ещё на 1 и так далее

Зачем добавим ещё один кадр уже уходят непосредственно в глубину

По сути всё что можно было показать

Прокнопка

В этом нет ничего сложного

Вот эти кнопки даже не требуется перекраски потому что самое кнопка в группе не уходит

Ну если надо это тоже можно было бы сделать

Просто вводить кнопка глубину Всё дальше дальше в этом бы не было никакой проблемы с реализацией

В общем у нас получились Такие

Анимированные кнопки