Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:04,352 --> 00:00:09,216
Графическое отображение состояния элементов интерфейса
2
00:00:11,008 --> 00:00:15,616
Давайте начнём с пазлы и разъём наименьшую сущность интерфейса
3
00:00:16,128 --> 00:00:17,408
А именно окно
4
00:00:18,432 --> 00:00:24,576
Один из самых важных элементов оценки интерфейса это наглядность и
5
00:00:24,832 --> 00:00:27,904
Взаимодействие с этим элементом со стороны пользователя
6
00:00:28,672 --> 00:00:31,488
Человек который используют кнопку
7
00:00:31,744 --> 00:00:35,584
Должен понимать что Клик по элементу хоть на что-то повлиял
8
00:00:36,096 --> 00:00:37,376
Работа
9
00:00:37,632 --> 00:00:40,192
Система Не игнорируй
10
00:00:41,216 --> 00:00:44,544
Давайте рассмотрим на практике о чём я говорю
11
00:00:45,056 --> 00:00:48,384
Возьмём стандартную простенькую палатку интерфейс
12
00:00:48,896 --> 00:00:50,176
Вот она сейчас
13
00:00:50,432 --> 00:00:51,712
У нас перед глазами
14
00:00:53,248 --> 00:00:57,088
Она сделана в виде странички
15
00:00:58,112 --> 00:00:58,880
Примером
16
00:00:59,136 --> 00:01:00,909
Это что-то вроде главного меню
17
00:01:00,911 --> 00:01:03,387
Subtitled by
-♪ online-courses.club ♪-
We compress knowledge for you!
https://t.me/joinchat/ailxpXoW3JVjYzQ1
18
00:01:03,388 --> 00:01:04,768
Я навожу на верхнюю кнопку курсора
19
00:01:05,536 --> 00:01:07,072
Ничего здесь не
20
00:01:07,584 --> 00:01:09,376
И уже на данном этапе
21
00:01:09,888 --> 00:01:11,936
Кнопка не даёт никакой реакции
22
00:01:12,448 --> 00:01:13,472
Это неправильно
23
00:01:13,984 --> 00:01:17,056
Настя Мы наведём на кнопку расположенную ниже
24
00:01:17,312 --> 00:01:19,616
Мы видим что она меняет своё состояние
25
00:01:19,872 --> 00:01:24,224
Меняет свой цвет и выделяется на фоне остальных неактивных элемент
26
00:01:24,992 --> 00:01:31,136
Это первое что нужно делать при разработке меню интерфейса то есть
27
00:01:31,392 --> 00:01:32,928
Элементы реагировать
28
00:01:33,440 --> 00:01:36,512
Оно контакт селектором то есть данном случае с мышкой
29
00:01:36,768 --> 00:01:41,632
Это не всё если я прощу курсор ещенешеф экрана кнопку
30
00:01:42,144 --> 00:01:43,680
Я получу эффект
31
00:01:43,936 --> 00:01:44,960
Нажатие
32
00:01:45,216 --> 00:01:47,776
То есть уже третий эффект взаимодействия
33
00:01:49,056 --> 00:01:50,848
Воспроизводящий ся при клике
34
00:01:52,640 --> 00:01:58,784
Это то что понимает В итоге тактильность интерфейса на достаточно
35
00:01:59,040 --> 00:01:59,552
Уровень
36
00:02:00,064 --> 00:02:01,600
Базовая кнопка
37
00:02:01,856 --> 00:02:04,672
Должна иметь как минимум три состояния
38
00:02:04,928 --> 00:02:08,256
Первое это соответственно неактивное состояние
39
00:02:08,768 --> 00:02:12,096
Второе это активное состояние когда
40
00:02:12,352 --> 00:02:14,400
Селектор активировал
41
00:02:15,168 --> 00:02:18,752
Непосредственно эту кнопку то есть когда кнопка выбрала
42
00:02:19,264 --> 00:02:24,128
Третье это состояние непосредственно выполнения какой-то деятельности
43
00:02:24,640 --> 00:02:29,248
Активируемые предмет или открываем какое-то меню
44
00:02:29,504 --> 00:02:31,808
Это должно сопровождаться
45
00:02:32,320 --> 00:02:34,368
Матрас дополнительный ряд
46
00:02:36,672 --> 00:02:38,464
Естественно
47
00:02:38,720 --> 00:02:40,768
Бывают случаи когда кнопка
48
00:02:42,560 --> 00:02:43,840
Имеется
49
00:02:45,120 --> 00:02:48,448
Кнопка Занимает какое-то место но при этом она
50
00:02:48,704 --> 00:02:50,752
Не активна в виду какой-то причины
51
00:02:51,520 --> 00:02:55,872
Это часто встречается в играх
52
00:02:56,384 --> 00:03:02,528
Если если в игре есть какие-то дополнительные режимы которые открываются после открытия
53
00:03:02,784 --> 00:03:03,808
Не хочу
54
00:03:04,576 --> 00:03:09,184
То есть там недоступны не открыты ещё скилы и всё такое
55
00:03:09,696 --> 00:03:13,024
Естественно тут мы обходимся одним спрайтом
56
00:03:13,536 --> 00:03:15,584
Который выглядит более
57
00:03:15,840 --> 00:03:17,888
Бекон чем остальные
58
00:03:18,656 --> 00:03:20,192
Градация серого
59
00:03:22,240 --> 00:03:28,384
Летом подобные элементы не должны обладать стоящий глубиной взаимодействия что активно
60
00:03:30,176 --> 00:03:33,248
Части мы наводим на
61
00:03:33,504 --> 00:03:36,576
Любовь на пачку и у нас
62
00:03:36,832 --> 00:03:37,344
Уже
63
00:03:37,600 --> 00:03:39,648
Её состояние
64
00:03:40,160 --> 00:03:42,976
Здесь мы не видим никаких состояний в принципе
65
00:03:44,256 --> 00:03:48,352
Это позволяет нам понять что кнопка действительно недоступна
66
00:03:48,608 --> 00:03:54,752
Они нравится какой-то активный имеющий какой-то другой цвет
67
00:03:55,008 --> 00:03:56,032
Прыщи
68
00:03:56,544 --> 00:03:58,592
Того можно сказать
69
00:03:58,848 --> 00:04:02,432
Для базовых кнопки достаточно крупной
70
00:04:03,200 --> 00:04:04,224
Нужно
71
00:04:04,480 --> 00:04:06,016
4 Спрайта
72
00:04:07,808 --> 00:04:10,880
Из которых 3 это у нас
73
00:04:11,648 --> 00:04:15,488
Проект базового или активного состояния
74
00:04:15,744 --> 00:04:18,815
И 4 Sprite это чёрно-белый
75
00:04:21,631 --> 00:04:26,751
И напоследок хотелось бы добавить что при управлении мышкой
76
00:04:27,007 --> 00:04:30,079
Не стоит добавлять сильные звуковые эффекты
77
00:04:30,591 --> 00:04:34,943
Потому что Мышка может за доли секунды пересесть сразу 10 пунктов меню
78
00:04:35,199 --> 00:04:39,295
На всю округу Как это сделано в Quake 3 Arena
79
00:04:43,391 --> 00:04:45,951
В свою очередь работа
80
00:04:46,207 --> 00:04:47,487
Более плавно
81
00:04:47,743 --> 00:04:52,351
И тут уже звуковое сопровождение переходов между пунктами меню
82
00:04:52,607 --> 00:04:54,655
Будет выглядеть более адекватно
83
00:04:54,911 --> 00:05:00,543
При скорости даже достаточно быстрый это всё равно звучит прилично
84
00:05:05,919 --> 00:05:09,503
Это тоже стоит учитывать при создании меню со звуком
85
00:05:10,527 --> 00:05:13,599
Ещё одно дополнение к вопросу о кнопке
86
00:05:14,111 --> 00:05:17,695
Само собой способов отобразить активную кнопку
87
00:05:18,207 --> 00:05:19,487
Анжелика множество
88
00:05:19,743 --> 00:05:25,631
Помимо банальной перерисовки уже существующего блока можно делать дополнительные анимации
89
00:05:26,655 --> 00:05:31,263
Хорошо подходит в случае когда меня не размашистое новый фокус
90
00:05:31,519 --> 00:05:33,823
Axios Proxy нужно сахара
91
00:05:34,079 --> 00:05:36,127
Как это сделано высунулся
92
00:05:37,407 --> 00:05:39,455
Ангелочком
93
00:05:39,967 --> 00:05:46,111
Динамический эффект селектора это почти стопроцентный способ сделать из простенькое меню
94
00:05:46,367 --> 00:05:47,391
Что-то с изюминкой
95
00:05:47,903 --> 00:05:51,743
Как видите здесь у нас меню очень простое Если не считать фото
96
00:05:52,255 --> 00:05:53,535
И поэтому
97
00:05:53,791 --> 00:05:56,351
Ангелочек идеально дополняет
98
00:05:58,655 --> 00:06:03,007
Таможня здесь стоит учитывать что в отличие от статики
99
00:06:03,263 --> 00:06:08,383
Динамика улавливается чуть-ли ни в первую сотню миллисекунд глаза
100
00:06:11,199 --> 00:06:13,759
Тоже самое в принципе касаются не только
101
00:06:14,015 --> 00:06:15,807
Меню на игровых карт
102
00:06:16,319 --> 00:06:18,111
Нередко на радарах
103
00:06:18,367 --> 00:06:20,671
Помимо обычных статических икона
104
00:06:20,927 --> 00:06:26,815
Добавляется что-то типа ударных элементов от которых исходит волны как будто это источники чего
105
00:06:27,327 --> 00:06:30,655
Это позволяет идентифицировать что-то важное
106
00:06:31,423 --> 00:06:36,287
Что-то более выделяющееся среди изменения важных элементов
107
00:06:36,543 --> 00:06:40,383
Который находится на фоне которых может быть больше
108
00:06:40,639 --> 00:06:41,919
Это тоже стоит
109
00:06:42,175 --> 00:06:46,527
Динамические эффекты это очень Рабочая тема для простых меню
110
00:06:48,063 --> 00:06:53,951
Также Как пример идеального меню жилыми кнопками хозяйством
111
00:06:54,207 --> 00:06:55,231
Меню Warcraft
112
00:06:55,743 --> 00:06:56,511
Ответит
113
00:06:56,767 --> 00:07:01,887
Кнопки имеет три состояния о которых мы говорили
114
00:07:02,143 --> 00:07:07,263
Первое состояние доставщиков второе это уже активирована кнопка
115
00:07:07,519 --> 00:07:11,359
Изменяется просто задний фон подсвечивается больше
116
00:07:12,639 --> 00:07:14,175
Встреча
117
00:07:14,431 --> 00:07:18,783
Это при нажатии у нас это кнопочка погибает внутрь
118
00:07:21,087 --> 00:07:22,367
Буквально
119
00:07:22,879 --> 00:07:26,463
Говоря о том что это действительно объёмная кнопка
120
00:07:28,255 --> 00:07:31,071
Ну это всё сделал достаточно при этом простыла эффект
121
00:07:32,351 --> 00:07:34,655
Потому что проект просто
122
00:07:34,911 --> 00:07:39,263
Двигайся немножко вниз относительно своего металлического ободка
123
00:07:39,519 --> 00:07:41,567
Весёлый Это очень хорошо
124
00:07:42,079 --> 00:07:47,199
В общем-то насколько это нужно в общем-то в этой версии Warcraft Blizzard
125
00:07:48,991 --> 00:07:49,759
Хорошо
126
00:07:51,039 --> 00:07:54,623
Давайте теперь вручную с анимируем нажатие кнопок
127
00:07:56,671 --> 00:07:57,951
Я уже подготовила
128
00:07:58,207 --> 00:07:59,231
Кнопочки
129
00:07:59,743 --> 00:08:01,279
Одна из них республика
130
00:08:02,303 --> 00:08:04,607
Другая внешняя нуждается
131
00:08:04,863 --> 00:08:06,911
Начнём мы с первой кнопки
132
00:08:07,167 --> 00:08:08,191
Здесь всё банан
133
00:08:08,703 --> 00:08:12,543
Верхняя часть которой мы видим есть боковушка то есть
134
00:08:13,055 --> 00:08:15,103
Наш Сиреневая линия
135
00:08:16,127 --> 00:08:19,967
Чтобы сделать простейшие нажатие кнопки
136
00:08:20,223 --> 00:08:23,807
Нам достаточно просто опустить верхнюю часть вниз
137
00:08:24,575 --> 00:08:25,599
Таким образом
138
00:08:25,855 --> 00:08:31,999
Просто сокращаем количество пикселей сочинение и кнопка просто вдавливается
139
00:08:33,023 --> 00:08:36,095
При этом желательно на всю площадь кнопки добавить затемнение
140
00:08:37,375 --> 00:08:39,423
Ребёнка 2 кнопочки
141
00:08:39,935 --> 00:08:44,799
Кнопочка у нас будет уходить не просто на уровень панели
142
00:08:45,567 --> 00:08:47,103
Она будет
143
00:08:47,359 --> 00:08:48,895
Немножко уже глубже
144
00:08:51,199 --> 00:08:57,343
Первую очередь данном случае мы сокращаем эту кнопочку с нижней части то есть убираем нижние
145
00:08:59,391 --> 00:09:01,439
Проводим это задание 1 пример
146
00:09:02,207 --> 00:09:04,511
И потом мы её опускаем ещё
147
00:09:05,279 --> 00:09:10,655
Ну опускай могут мы уже перестаем видеть одну извини
148
00:09:11,167 --> 00:09:12,703
Потому что на кнопки
149
00:09:12,959 --> 00:09:15,007
Укладка обычной есть
150
00:09:15,519 --> 00:09:17,311
Расчёт на определённое число
151
00:09:18,591 --> 00:09:20,895
Но при этом мы начинаем видеть
152
00:09:21,151 --> 00:09:22,943
Имеющиеся сбоку
153
00:09:23,455 --> 00:09:24,223
Боковушки
154
00:09:24,479 --> 00:09:29,087
Можно добавить ещё кадр и опустить кнопочку ещё глубже тем самым открыть для себя
155
00:09:29,343 --> 00:09:30,879
Ещё один
156
00:09:31,135 --> 00:09:32,927
Полноценный слой
157
00:09:33,695 --> 00:09:35,487
Татьяной части сверху
158
00:09:37,535 --> 00:09:43,679
Помимо этого у 2 кнопки также происходит затемнение причём чем Глобус
159
00:09:43,935 --> 00:09:45,727
Больше она проявляется
160
00:09:47,519 --> 00:09:49,567
Думаю подобного нам хватит
161
00:09:50,847 --> 00:09:52,383
Теперь третье окно
162
00:09:52,895 --> 00:09:57,247
Здесь как умеете у нас нестандартный Поворот Мы видим сразу Три стороны
163
00:09:57,503 --> 00:09:58,783
Полигон
164
00:09:59,039 --> 00:10:01,228
И поэтому кнопочка будет соответственно двигаться вот туда
165
00:10:01,229 --> 00:10:03,528
Subtitled by
-♪ online-courses.club ♪-
We compress knowledge for you!
https://t.me/joinchat/ailxpXoW3JVjYzQ1
166
00:10:03,529 --> 00:10:04,671
Сокращаться сразу в две стороны
167
00:10:05,183 --> 00:10:06,975
Давайте попробуем это сделать
168
00:10:08,255 --> 00:10:12,607
Найти скопированный И начнём наши перемещения на один пиксель
169
00:10:12,863 --> 00:10:14,655
Потом на следующем кадре
170
00:10:15,679 --> 00:10:17,983
Уже ещё на 1 и так далее
171
00:10:18,751 --> 00:10:23,615
Зачем добавим ещё один кадр уже уходят непосредственно в глубину
172
00:10:25,407 --> 00:10:29,503
По сути всё что можно было показать
173
00:10:30,015 --> 00:10:30,783
Прокнопка
174
00:10:31,551 --> 00:10:33,343
В этом нет ничего сложного
175
00:10:34,623 --> 00:10:39,743
Вот эти кнопки даже не требуется перекраски потому что самое кнопка в группе не уходит
176
00:10:40,255 --> 00:10:43,071
Ну если надо это тоже можно было бы сделать
177
00:10:45,119 --> 00:10:50,751
Просто вводить кнопка глубину Всё дальше дальше в этом бы не было никакой проблемы с реализацией
178
00:10:51,263 --> 00:10:53,823
В общем у нас получились Такие
179
00:10:54,079 --> 00:10:56,127
Анимированные кнопки
18661
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
