1
00:30:36,000 --> 00:30:41,600
...підтримка клавіатури на екрані і ось ці 
всі елементи теж врахувати.

2
00:30:41,700 --> 00:30:46,500
Знову ж таки по функціоналу, необхідно і 
часові зони врахувати,

3
00:30:46,600 --> 00:30:53,400
бо одне діло, що ви, наприклад, врахували 
формат відображення часу, так?

4
00:30:53,500 --> 00:30:58,700
А ще є важливо, де саме часова зона і чи 
це все буде синхронізовано.

5
00:30:58,800 --> 00:31:04,900
Наприклад, ви зробили фотографію десь в Америці, 
потім переїхали сюди(Україна).

6
00:31:05,000 --> 00:31:12,100
Тут інша часова зона. Яким чином будуть відображатися 
у вас дати на ваших елементах.

7
00:31:12,200 --> 00:31:19,400
Яким чином будуть форматуватися стрічки, 
яким цілі області текстові будуть форматуватися.

8
00:31:19,500 --> 00:31:24,300
Яким чином будуть перевірятися помилки при 
введені даних.

9
00:31:24,400 --> 00:31:29,200
Чи є якесь обмеження... Наприклад, англійський 
текст можна вводити, чи,

10
00:31:29,300 --> 00:31:34,100
наприклад, можна кирилицю тільки вводити. 
Чи є на це заборона чи нема заборони на це.

11
00:31:34,200 --> 00:31:39,000
От ці елементи треба врахувати. І...

12
00:31:39,100 --> 00:31:45,800
Коли ви будете формувати якраз ваші інтерфейси,

13
00:31:45,900 --> 00:31:52,700
то ви якраз формуєте ваш рівень бізнес логіки.

14
00:31:52,800 --> 00:31:57,600
Відповідно ви враховуєте, яка є культура, 
наприклад, одного регіону,

15
00:31:57,700 --> 00:32:02,500
культуру другого регіону. У вас є якийсь 
набір типових елементів

16
00:32:02,600 --> 00:32:07,400
базових для одного варіанту для другого. 
І тільки після того формується-генерується 
ваш

17
00:32:07,500 --> 00:32:12,600
елемент зовнішнього... інтерфейс для вашої 
програми.

18
00:32:12,700 --> 00:32:17,500
Ну, відповідно і текст, відображення всіх 
елементів на екрані.

19
00:32:17,600 --> 00:32:23,100
Тепер перейдемо до наступного кроку.

20
00:32:23,200 --> 00:32:28,400
З локалізацією ви розібралися. Що теж треба 
це все продивитися. Ну, в лабароторних

21
00:32:28,500 --> 00:32:33,300
4-тій і 2-гій, здається, з вас так само ніхто

22
00:32:33,400 --> 00:32:38,200
не пробував робити якісь врахування локалізації 
і

23
00:32:38,300 --> 00:32:43,100
врахування елементів часових для програм. 
Тепер

24
00:32:43,200 --> 00:32:52,300
11-тий крок – це, звичайно що, формування 
способу відображення комп'ютерної графіки 
і форматування іконок.

25
00:32:52,400 --> 00:32:59,200
Є великі каталоги типових іконок. Навіть 
є xml-подібна мова

26
00:32:59,300 --> 00:33:04,100
icons.yml, яка дає можливість у вигляді текстового 
формату

27
00:33:04,200 --> 00:33:09,000
писати  компоненти іконок, і потім їх відображати

28
00:33:09,100 --> 00:33:13,900
вже на екрані не як... картинка стала. Що 
є просто іконочка.

29
00:33:14,000 --> 00:33:18,800
Вона дизайнером по пікселях була колись намальована. 
А є мова

30
00:33:18,900 --> 00:33:24,400
xml-ська, в якій ви описуєте, які елементики 
мають бути намальовані на цій іконці.

31
00:33:24,500 --> 00:33:31,400
Наприклад, там... якись... кружечечок, якийсь 
намальований мусить бути...

32
00:33:31,500 --> 00:33:36,300
сторіночка, намальований знак заборони, там 
якісь ножечки, або

33
00:33:36,400 --> 00:33:43,500
там якісь ножиці, або там знак папочки. І 
вот ці вот елементи потім комбінується між 
собою.

34
00:33:43,600 --> 00:33:51,200
Якщо ви хочете видалити папку, то буде згенерована 
папка і буде згенерований... картиночка "Видалити".

35
00:33:51,300 --> 00:33:56,900
Якщо, наприклад, ви щось забираєте/зберігаєте, 
активність/ не активність – бужуть мінятися 
кольори.

36
00:33:57,000 --> 00:34:01,300
І якраз необхідно врахувати різні види графіки.

37
00:34:01,400 --> 00:34:09,700
Те, що ми з вами говорили. Це растрова графіка... 
Але, знову ж таки, вона є проблемною з точки 
зору роздільчих здатностей екранів.

38
00:34:09,800 --> 00:34:14,500
Якщо ви зробите фіксовані... картинки.

39
00:34:14,600 --> 00:34:19,400
І потім запустите на екранчиках маленьких, 
або на великих

40
00:34:19,500 --> 00:34:26,300
відповідно у вас зображення буде спотворене. 
З'явиться велика пікселізація, або взагалі 
змешиться масштаб.

41
00:34:26,400 --> 00:34:31,200
І ви не зможете нормально відображати дані.

42
00:34:31,300 --> 00:34:36,600
Всі ці елементи формуються, розглядаються,

43
00:34:36,700 --> 00:34:43,800
+ необхідно чітко врахувати, яким чином будуть 
обраховувані динамічні елементи-мультімейти.

44
00:34:43,900 --> 00:34:53,800
Тобто це і відеофрагменти, є так званні анімаційні 
іконочки, при активації яких робиться певна 
дія, певна реакція.

45
00:34:53,900 --> 00:35:00,400
Особливо ви це зараз бачите в деяких анімаційних 
іконках під мобільні пристрої.

46
00:35:00,500 --> 00:35:06,500
+ Треба врахувати, яким чином буде здійснюватися 
аудіо супровід.

47
00:35:06,600 --> 00:35:11,400
Бо часто, коли ви натискаєте якусь кнопочку, 
є якись мікрозвук.

48
00:35:11,500 --> 00:35:19,400
Наприклад, приходить якась нотифікація – 
є мікрозвук. Знову ж таки, звукові файли 
вони є різних кодувань

49
00:35:19,500 --> 00:35:24,900
і не завжди звукові елементи можуть відображатися.

50
00:35:25,000 --> 00:35:29,500
+ Треба врахувати гучність цього сигналу.

51
00:35:29,600 --> 00:35:35,900
Вона має бути теж інтегрована разом із загальною 
системою, і чи буде можливість взагалі це 
відключити.

52
00:35:36,000 --> 00:35:47,500
Знову ж таки, анімація потребує додаткового 
часу. А це є час затримки реакції користувача, 
і ми якраз теж мусимо цей час анімації врахувати 
в...

53
00:35:47,600 --> 00:35:55,100
в тій часовій моделі, яку ми пробували з 
вами робити в 3-тій лабараторній по моделі 
GOMS.

54
00:35:55,200 --> 00:36:00,100
Так само передивляння певного малюнку на 
екрані, багатьох малюнків, багатьох іконочок.

55
00:36:00,200 --> 00:36:08,700
Перегляд демовідеороликів теж потребують 
додаткового часу на виконання.

56
00:36:08,800 --> 00:36:16,900
Ви знаєте, що є багато різних іконок.

57
00:36:17,000 --> 00:36:21,800
При чому, іконки малюються в різних форматах

58
00:36:21,900 --> 00:36:30,400
і потім ви їх  можете інтегрувати в свої 
програмки. Так? Це є і векторні різноманітні 
формати, і растрові, і анімаційні формати.

59
00:36:30,500 --> 00:36:35,300
Необхідно формувати ось такі

60
00:36:35,400 --> 00:36:41,900
пакети різних варіантів, форматів графічних 
для вашої програми.

61
00:36:42,000 --> 00:36:46,800
Є, впринципі, деякі заборони на деякі види 
форматів

62
00:36:46,900 --> 00:36:53,600
або там нема ліцензії на певні формати використання. 
І відповідно теж потрібно перемикатися між 
елементами.

63
00:36:53,700 --> 00:37:00,400
Ну, на цьому слайді ви бачите найбільш типові 
роздільчі здатності іконок.

64
00:37:00,500 --> 00:37:11,300
Це от є іконки на 512 елементів, різну кількість 
колірності з елементами маштабування чи не 
маштабування.

65
00:37:11,400 --> 00:37:16,200
Традиційні іконки, які завжди були, це 32х32+

66
00:37:16,300 --> 00:37:23,400
Це найбільш такий використовуваний формат 
завжди був. Останнім часом, звичайно, вже 
використовують

67
00:37:23,500 --> 00:37:30,000
і зразу же дають в програмні продукти – роздільчу 
здатність 512 і 1024.

68
00:37:30,100 --> 00:37:38,200
Ну, і ви знаєте, що дуже часто в галереях 
пропонуються, або в програмних продуктах,

69
00:37:38,300 --> 00:37:43,100
є можливість налаштовувати, яким чином буть 
відображатися іконки:

70
00:37:43,200 --> 00:37:48,700
чи це будуть екстравеликі, тобто це якраз 
ось ця-от зона, чи такі, просто великі

71
00:37:48,800 --> 00:37:56,600
тобто це десь ось ця зона. Ну, і, звичайно, 
супермаленькі іконочки – це от наші 32 і 
16 пікселів.

72
00:37:56,700 --> 00:38:01,500
Це найперші іконки: 16 на 16,- які в нас 
тільки були.

73
00:38:01,600 --> 00:38:10,800
Коли формується палітра ось цих всіх іконочок, 
то завжди створюються ось такі, якби, набори

74
00:38:10,900 --> 00:38:16,600
І кожна іконочка перемальвоується. Бо, наприклад, 
намалювати велику іконку – тут все нормально

75
00:38:16,700 --> 00:38:21,500
пікселізація у нас роздільчої здатності дуже 
велика.

76
00:38:21,600 --> 00:38:31,700
Проблем з криволінійними елементами фактично 
не існує, але от на малювати подібну іконочку, 
наприклад, 16 на 16, чи 22, чи 32

77
00:38:31,800 --> 00:38:37,700
Ось тут є проблема. Я не знаю, чи ви вчили 
алгоритми растрової графіки

78
00:38:37,800 --> 00:38:42,600
Там, де враховується так звана сходинковість 
пікселів.

79
00:38:42,700 --> 00:38:47,600
- У вас не було такого предмета? "Комп'ютерна 
графіка" був предмет?  - Ще ні.

80
00:38:47,700 --> 00:38:49,000
- На наступний семестр.

81
00:38:49,100 --> 00:38:49,500
- Так.

82
00:38:49,600 --> 00:38:54,400
Тобто там якраз будуть ось ці алгоритми, 
які роблять ось цю сходинковість. Коли малюєте,

83
00:38:54,500 --> 00:39:02,000
наприкла... Давайте я якимось таким жирним 
намалюю і тоді одразу буде видно цю от пікселізацію.

84
00:39:02,100 --> 00:39:05,200
Бачите ось тут такі мікросходинки ідуть?

85
00:39:05,300 --> 00:39:06,100
- М-м, да.

86
00:39:06,200 --> 00:39:10,500
так? Тіпа квадратік, потім горизонтальна 
смужка, квадратик один піднівся...

87
00:39:10,600 --> 00:39:15,400
Типу, квадратик, потім іде горизонтально, 
припіднявся, горизонтально, припіднявся, 
горизонтально.

88
00:39:15,500 --> 00:39:22,500
І це якраз дає нам можливість побудувати 
візуально тіпа, що це є нахилина, якби, лінія.

89
00:39:22,600 --> 00:39:27,400
І от при великій пікселізації цієї сходинковості 
вже не видно. А от при таких

90
00:39:27,500 --> 00:39:33,700
сходинковість дуже величезна. І ось це є 
проблема дизайнерів – малювати маленькі іконочки.

91
00:39:33,800 --> 00:39:43,600
Знову ж таки, роздільча здатність іконок 
під різні пропорції екранів, під різні щільності 
пікселів

92
00:39:44,400 --> 00:39:50,800
Екранів зараз є дуже багато. І ось ці от 
всі іконки в різні екрани, під різні пристрої

93
00:39:50,900 --> 00:39:58,100
їх треба всі перемялювати і, потім ви формуєте 
скріни з різними роздільчими здатностями.

94
00:39:58,200 --> 00:40:02,000
Напевно, ми зараз зробимо перерву по часу, 
так?

95
00:40:02,100 --> 00:40:10,600
І потім продовжимо цей крок ще далі. Можете 
сходити на перерву і перекусити щось, і потім 
продовжимо.

96
00:40:11,200 --> 00:40:19,100
Ми з вами зупинилися на типах іконок, так? 
І ось ці всі скріни, які ви малювали в 4-тій 
лабараторній, так?

97
00:40:19,200 --> 00:40:27,700
Для всіх тих іконокчних елементів, які ви 
там зробили, ще потім треба робити ось такі 
серії іконок під різну роздільчу здатність.

98
00:40:27,800 --> 00:40:33,300
Ну, і ось тут на слайді я вам показав, які 
є спецільні такі iconmaker-и.

99
00:40:33,400 --> 00:40:41,700
Там якраз можна малювати попыксельно + ви 
створюєте палітру всіх типових кольорів, 
які у вас будуть.

100
00:40:41,800 --> 00:40:47,000
Ви можете вибирати роздільчу здатність для 
іконок. Які у вас будуть незамальовані зони

101
00:40:47,100 --> 00:40:50,300
І ось якраз ви бачите ось цю-от пікселізацію. 
Так?

102
00:40:50,400 --> 00:40:56,500
Ось це найтяжча частина – зробити так, щоб 
при формуванні картиночки

103
00:40:56,600 --> 00:41:01,600
зробити правильні ось ці піксельовані кроки.

104
00:41:01,700 --> 00:41:06,500
І для того, щоб ті роздільчі здатності при 
любому маштабі завжди відображалися.

105
00:41:06,600 --> 00:41:12,100
Ось наприклад, 16х16, так? Щоб візуально 
здавалося, що тут є літера "А",

106
00:41:12,200 --> 00:41:17,400
там іде буквально по два, по три пікселя. 
А коли у вас є величезна іконка,

107
00:41:17,500 --> 00:41:22,900
наприклад, як тут 256x256, так? У нас для 
написання букви "A"

108
00:41:23,000 --> 00:41:27,500
є набагато більше простору і, її у нас чітко 
видно.

109
00:41:27,600 --> 00:41:32,400
Для дизайнерів іконок тяжко зробити ось цей 
варіант і цей варіант, щоб вони майже

110
00:41:32,500 --> 00:41:37,300
ідентично по змісту виглядали в обидвох версіях.

111
00:41:40,400 --> 00:41:43,800
Ось тут ви теж бачите способи заставок.

112
00:41:45,500 --> 00:41:50,800
Багато сайтів мають таке верхнє поле там, 
де є основна заставка

113
00:41:50,900 --> 00:41:57,700
І так само під різні роздільчі здатності, 
під логотипи теж треба робити різні пікселізації, 
так?

114
00:41:57,800 --> 00:42:03,500
Ось тут у нас є логотип там, наприклад, на 
150, на 200 пікселів, 256, 48.

115
00:42:03,600 --> 00:42:11,300
І при цьому завжди цей логотип буде при різних 
роздільчих здатностях мати одну й ту саму 
пропорціюю

116
00:42:11,400 --> 00:42:16,200
І завжди буде масштабуватися в правильному 
зображенні.

117
00:42:16,300 --> 00:42:20,200
Теж ось ці от всі варіанти для кожного елемента 
промальовуються.

118
00:42:20,900 --> 00:42:26,300
Є ось такі величезні каталоги, там, де є 
 вже намальовані типові іконки.

119
00:42:26,400 --> 00:42:35,900
Звичайно, ті всі іконки малювалися художниками. 
Ви мусете їм платити відсоток за використання 
їхньої графічної інформації.

120
00:42:36,000 --> 00:42:39,900
Є цілі каталоги, які ви можете придбати, 
чи ті чи інші іконки.

121
00:42:40,000 --> 00:42:50,500
Ну, і знову ж таки, якщо ви їх купуєте для 
свого проекту, вони будуть мати всі можливі 
габарити і всі можливі кольорні палітри на 
екрані.

122
00:42:50,600 --> 00:42:55,100
Знову ж таки, ось ця от немоніка. Яким чином 
позначається GPS координати,

123
00:42:55,200 --> 00:43:00,500
яким чином,наприклад, позначаються різні 
активні стани, неактивні стани

124
00:43:00,600 --> 00:43:05,500
яким чином позначаються, наприклад, фотоапарати. 
Чому саме так намальована картиночка?

125
00:43:05,600 --> 00:43:10,900
Це теж визначається дизайнерами, психологами.

126
00:43:11,000 --> 00:43:18,700
Тобто як людина психологічно спрощений рисунок 
сприймає і чи в неї є реакція на цей рисунок.

127
00:43:18,800 --> 00:43:27,400
Наступний крок. Коли ми розібралися з вами 
з ось цими іконками, з елементами на екрані 
кнопочок.

128
00:43:27,500 --> 00:43:35,600
Нам далі необхідно розібратися з кольорами, 
так? Кольори – це є дуже важлива частина 
сприйнятя людиною.

129
00:43:35,700 --> 00:43:46,200
Є люди які сприймають повністю весь спектр 
кольорів. Є деякі люди з обмежинями кольорного 
сприйняття чисто по зору, так?

130
00:43:46,300 --> 00:43:51,100
Це є дальтонізм. Є повний дальтонізм, є частковий 
дальтонізм.