1
00:31:20,800 --> 00:31:26,960
Доступних елементів, чи не доступних елементів. 
Можливість їх підключити чи не підключити.

2
00:31:28,000 --> 00:31:32,700
Так само є спосіб організації сторінок, заголовків.

3
00:31:32,800 --> 00:31:40,100
Спосіб послідовного відображення тексту інформації, 
графічної інформації, галереї, різних картинок.

4
00:31:40,200 --> 00:31:45,240
Розміщення фотографій, основних контактних 
даних, опис діяльності.

5
00:31:45,200 --> 00:31:52,500
Або наприклад адресна книга з основними елементами, 
які є в адресній книзі.

6
00:31:52,600 --> 00:31:59,240
Пошукові елементи, різні "step by step" візерти, 
1-ий крок, 2-ий, 3-ій, 4-ий.

7
00:31:59,600 --> 00:32:05,600
Підтвердження виконаності певних кроків для 
досягнення наших елементів.

8
00:32:05,700 --> 00:32:13,890
Ви так само бачили, що на початку семестру 
я вам теж зробив презентацію слайдову,

9
00:32:13,900 --> 00:32:21,300
там де теж постарався вам на початку семестра 
показати, які кроки для лабораторок нам треба 
виконати в картинках,

10
00:32:21,400 --> 00:32:23,400
щоб досягти успіху.

11
00:32:23,500 --> 00:32:33,300
Ну і відповідно є вибір тарифних різних елементів, 
де ми зараз знаходимся, варіантні, вот це 
вот такий, ви зараз дуже часто бачите

12
00:32:33,400 --> 00:32:39,000
на сайтах мобільних операторів або операторів 
телебачення,

13
00:32:39,100 --> 00:32:44,690
де необхідно вибрати тарифний план і порівняти 
тарифні плани між собою

14
00:32:44,100 --> 00:32:49,100
Вікна підтвердження, вікна невдалої спроби 
виконання дій.

15
00:32:49,400 --> 00:33:03,600
[CROSSTALK]

16
00:33:04,600 --> 00:33:11,100
От же ми з вами зупинилися знову ж таки на 
таких основних кількох шаблонах,

17
00:33:11,200 --> 00:33:15,800
які поділяють площину нашого екрану на зональність.

18
00:33:15,900 --> 00:33:26,200
І от тут ви теж бачите ще одну серію шаблонів 
типових,при організації наших layout-ів.

19
00:33:26,300 --> 00:33:30,200
Є один із способів, знову ж таки вдала, не 
вдала спроба.

20
00:33:30,300 --> 00:33:36,600
Спроба інтеграції групи картинок в основну 
сторінкову групу.

21
00:33:37,200 --> 00:33:44,300
Група так званих послідовних плиточок-розкладки 
наших елементів.

22
00:33:44,800 --> 00:33:54,700
Є типові спливаючі підказки, які вказують 
або кількість наявних відгуків, або кількість 
наявних поштових відправлень,

23
00:33:54,800 --> 00:33:59,800
або кількість коментарів, або рейтинг певного 
елемента.

24
00:34:00,000 --> 00:34:11,400
Є зонування на вставлення рейтинга тієї чи 
іншої сторінки, знову ж таки тарифні плани, 
опис профайла якогось користувача,

25
00:34:11,050 --> 00:34:19,130
так звані "pop-up" спливаючі календарі - 
тобто у нас є зона відображення якоїсь дати 
і ми можемо або відредагувати її,

26
00:34:19,600 --> 00:34:27,900
або змінити певну дату. І у нас є спливаючий 
якийсь елемент календаря, знову ж таки він 
може бути або щомісячний,

27
00:34:28,000 --> 00:34:36,400
або щотижневий, або щоквартальний, або можливо 
цілорічний, або до конкретного тижня, тобто 
тут вже іде типи відображення календарів.

28
00:34:37,300 --> 00:34:42,000
Багато колонкове відображення простих, звичайних 
текстів, медіагалерея.

29
00:34:42,500 --> 00:34:47,020
Затримки на момент завантаження якогось певного 
елемента,

30
00:34:47,900 --> 00:34:54,000
відображення анімації про те, що іде процес 
підгруження завантаження елементів

31
00:34:54,100 --> 00:34:58,900
або процентовий спосіб відображення завантаження.

32
00:34:59,400 --> 00:35:09,000
Наприклад task-сторінка, де ми відмічаємо: 
виконав роботу, чи не викинув цю роботу і 
відповідно маємо список.

33
00:35:09,500 --> 00:35:18,420
Це так само є типовий спосіб організації 
покрокового виконання, тобто є невелика зона 
інфографіки,

34
00:35:18,200 --> 00:35:24,500
яка або кольорами, або розмірами змінює вот 
ці графічні документи.

35
00:35:24,600 --> 00:35:35,000
А тут іде перелік тих завдань, які нам необхідно 
було би виконати під час проходження певних 
етапів роботи з нашим інтерфейсом.

36
00:35:35,300 --> 00:35:47,980
А так само є різноманітні відображення структури 
великої програми або структури сайту тобто 
які сторінки є сайтові, так званий site-map

37
00:35:47,600 --> 00:35:53,620
де є показування, де ви ще можете перейти 
по елементах.

38
00:35:54,200 --> 00:36:00,980
Різноманітні елементи сторінковості або прокруток, 
або каруселей інформації.

39
00:36:01,100 --> 00:36:11,200
Різні графіки діаграмності, візулізації даних, 
різні чати і так звані зони перв'ю певного 
документа.

40
00:36:11,300 --> 00:36:19,130
Вот ви зараз, коли користуєтесь Гугл доксами, 
ви часто бачите, що коли ви вибираєте якісь 
там пдф або картинку,

41
00:36:19,130 --> 00:36:27,470
так воно є спливаючим елементом і ви знову 
ж таки можете прокручувати і дивитись вже 
повноцінний документ в повному обсязі.

42
00:36:30,000 --> 00:36:41,990
Так, вот це так само є приклади, ще деяких 
форм відображення інформації: переписка,

43
00:36:41,700 --> 00:36:53,100
відображення різних описів, це як правило 
робиться на сторінках, наприклад готелей 
або ресторанів, або меню різних ресторанів,

44
00:36:53,200 --> 00:37:04,020
там де є картинка, є опис продукту або опис 
страви, діаграмні елементи, каруселі попереднього 
перегляду файлів.

45
00:37:05,000 --> 00:37:15,160
Збільшений спосіб перегляду файлів організації, 
різні сторінки по налаштуванню параметрів 
або програмного продукту,

46
00:37:15,700 --> 00:37:26,000
або наприклад медіаплеяра, різні синтезатори, 
різні гучності, або наприклад роботи х кольорами, 
або роботи з картинками,

47
00:37:26,100 --> 00:37:32,990
там де ви хочете яскравість, контрасність, 
колірність, глибину, прозорість підкоректувати.

48
00:37:32,990 --> 00:37:40,980
Знову ж таки різні способи організації сіткових 
елемнтів табличності на сторінках.

49
00:37:41,400 --> 00:37:51,950
Невеличкі текстові пункти параметрів елементів, 
способи розшарювання елементів, способи відображення 
картографії.

50
00:37:51,300 --> 00:38:03,400
Різні види спливаючих вікон, наприклад для 
лінукс систем, для мак-систем, для якихось 
так само лінукс або андроїдівських систем

51
00:38:03,600 --> 00:38:11,620
Для віндовс систем і так далі, тобто яким 
чином організовується заголовок нашого вікна.

52
00:38:11,620 --> 00:38:22,970
Ну і відповідно завжди робляться для всіх 
іконок, які потім будуть розміщуватися на 
наших панелях, на наших елементах.

53
00:38:22,100 --> 00:38:29,900
Робляться так звані палітри всіх можливих 
станів іконок, тобто коли іконка знаходиться 
в активованому стані

54
00:38:30,000 --> 00:38:37,600
або коли ми наводимо наш курсор, або палець 
або стилус на певний елемент, він підсвічується 
яскравіше.

55
00:38:37,700 --> 00:38:46,850
Статус активованості, статус не активованості 
або наприклад заблокованості для будь яких 
дій.

56
00:38:46,800 --> 00:38:56,380
І от так для кожної іконки завжди розмальовуються 
всі можливі стани цього іконочного елемента 
на наших вікнах

57
00:38:56,380 --> 00:39:00,410
і створиться така якби палітра всіх елементів.

58
00:39:01,500 --> 00:39:12,520
Оце є ще один приклад, яким чином організовуються 
вікна для відображення статистичних різних 
даних.

59
00:39:12,100 --> 00:39:18,700
Ну в основному інфографіка якраз корелюється 
чимось іншим предметом - візуалізація даних.

60
00:39:18,800 --> 00:39:28,900
Тобто зона картинок, зона підкартинок, основного 
каденту, розділяння на елементи, статистичні 
діаграми, великі графіки,

61
00:39:29,000 --> 00:39:38,610
зв'язані елементи яким чином відображаються 
чи послідовно, чи у вигляді ієрархічного 
зв'язного чи не зв'язного графа

62
00:39:39,300 --> 00:39:43,160
і це дає можливість відображати дані.

63
00:39:43,300 --> 00:39:53,580
Тепер вот це є так само дані, які дають можливість 
робити step-by-step виконання дій користувачем,

64
00:39:53,500 --> 00:40:01,030
тобто виконай першу дію, подивись що треба 
було виконувати, переходь до наступного кроку, 
подивись, що треба виконувати,

65
00:40:01,030 --> 00:40:09,620
Перейди до наступного, що треба виконувати 
і є як би дорожня карта, що за чим виконувати, 
щоб ми досягли якоїсь дії.

66
00:40:09,620 --> 00:40:18,980
Або наприклад як от зроблено в Фейсбуку, 
деяких ще соціальних мережах, тобто є певні 
дати вузлові,

67
00:40:18,980 --> 00:40:27,980
що відбувалося, якісь картинки, можливо якісь 
коментарі, описи, можливо група якихось коментарів 
і картиночок.

68
00:40:27,100 --> 00:40:36,200
І дуже часто на багатьох сайтах завжди роблять 
от таке правостороннє, лівостороннє поєднання 
тому, що

69
00:40:36,400 --> 00:40:44,760
коли фокус уваги людини, як правило падає 
на картинки і людина переводить погляд на 
ліво та право,

70
00:40:44,760 --> 00:40:57,490
вот цей вот момент переведення фокусу уваги 
на певну зону, він активує, якби поновлює 
увагу людини на новий елемент.

71
00:40:57,400 --> 00:41:10,000
Ну і плюс за рахунок моторики очей так само 
активується увага і людина краще сприймає 
довгі документи з нашими намірами.

72
00:41:10,500 --> 00:41:21,600
Так, тепер ми більше вже переходимо до, попередні 
всі слайди це стосувалися в основному декстопних 
розкладок

73
00:41:21,700 --> 00:41:31,950
і для телевізорів, ноутбуків, планшетів, 
а тепер буде серія розкладок, які характерні 
для смартфонів,

74
00:41:31,500 --> 00:41:38,900
для телефонів, ви так само зараз в лабораторках, 
в 4-ій теж робите такі ескізи.

75
00:41:39,000 --> 00:41:45,300
Оце, наприклад, у нас знову ж таки є адресна 
книга, деталізація адресної книги

76
00:41:45,400 --> 00:41:51,980
або, наприклад, у нас є панель відображення 
картинок з підписами цих картинок,

77
00:41:51,100 --> 00:41:55,900
ну і відповідно треба враховувати діагональ 
нашого пристрою.

78
00:41:56,100 --> 00:42:02,100
Чим більше у нас є оце співвідношення висоти 
й ширини, тим більше елемнтів ми можемо розмістити,

79
00:42:02,200 --> 00:42:12,500
відповідно ми можемо вирішувати, чи це буде 
вже сторінковістю з закладками, чи буде одноколоночне 
відображення

80
00:42:12,600 --> 00:42:15,000
чи наприклад двохколоночне відображення.

81
00:42:18,300 --> 00:42:26,020
Вот на цьому слайді так само представлені 
типові розкладки, які характерні для наших 
смартфонів

82
00:42:26,600 --> 00:42:38,300
Так, тобто є відображення елементів, є відображення 
мікропанелей, є основний заголовок, є можливість 
зробити пошук.

83
00:42:38,900 --> 00:42:45,200
Якщо ми активуємо цей елемент у нас панелька 
відповідно з'являється, відображає нам більше 
даних.

84
00:42:45,300 --> 00:42:54,500
Або, наприклад, понельочне вкладання сусідніх 
елементів, оці всі панельки можуть розтягуватися 
в залежності від того,

85
00:42:54,600 --> 00:42:58,200
скільки даних у нас виводиться в елементах.

86
00:42:59,500 --> 00:43:05,300
Тут так само ви бачите поєднання і графіків 
і заголовки з більшим елементом.

87
00:43:05,400 --> 00:43:09,100
Є поля введення даних, занесення даних, зберігання 
даних.

88
00:43:09,200 --> 00:43:19,600
Основний акцент уваги на елементу, додаткові 
елементи, які потім у нас теж активуються 
і розгортаються до повного екрану.

89
00:43:20,800 --> 00:43:24,010
Теж типові розкладки, які є.

90
00:43:24,500 --> 00:43:36,600
Тут ви теж бачите деякі типові розкладки, 
теж є пошукове поле, основне поле, перелік 
різних параметрів для цього елемента.

91
00:43:37,000 --> 00:43:49,900
Є основні заголовки, є картинки, так само 
є акценти по зонах і є так само зонування 
більшими елементами, меншими елементами.

92
00:43:50,100 --> 00:44:00,740
Оці розкладки ви потім використовуєте як 
шаблони для 4-ої лабораторки, там де ви намагаєтесь 
з "декстопних" програмочок

93
00:44:00,740 --> 00:44:03,480
навпаки зробити для всіх пристроїв.

94
00:44:04,000 --> 00:44:16,450
Теж є приклади організації галереї: основний 
перегляд, міні-прев'ю або є послідовність 
перемикання між слайдами, або між контентом

95
00:44:16,450 --> 00:44:22,110
і суб-галереї, повноекранне роздивляння, 
кнопка повернення назад,

96
00:44:22,300 --> 00:44:29,000
щоб можна було вернутися на скорочену галерею 
або на прев'ю галереї.