31:20.8 - 31:26.8
Доступних елементів, чи не доступних елементів. Можливість їх підключити чи не підключити.

31:28.0 - 31:32.7
Так само є спосіб організації сторінок, заголовків.

31:32.8 - 31:40.1
Спосіб послідовного відображення тексту інформації, графічної інформації, галереї, різних картинок.

31:40.2 - 31:45.1
Розміщення фотографій, основних контактних даних, опис діяльності.

31:45.2 - 31:52.5
Або наприклад адресна книга з основними елементами, які є в адресній книзі.

31:52.6 - 31:59.5
Пошукові елементи, різні "step by step" візерти, 1-ий крок, 2-ий, 3-ій, 4-ий.

31:59.6 - 32:05.6
Підтвердження виконаності певних кроків для досягнення наших елементів.

32:05.7 - 32:13.8
Ви так само бачили, що на початку семестру я вам теж зробив презентацію слайдову,

32:13.9 - 32:21.3
там де теж постарався вам на початку семестра показати, які кроки для лабораторок нам треба виконати в картинках,

32:21.4 - 32:23.4
щоб досягти успіху.

32:23.5 - 32:33.3
Ну і відповідно є вибір тарифних різних елементів, де ми зараз знаходимся, варіантні, вот це вот такий, ви зараз дуже часто бачите

32:33.4 - 32:39.0
на сайтах мобільних операторів або операторів телебачення,

32:39.1 - 32:44.0
де необхідно вибрати тарифний план і порівняти тарифні плани між собою

32:44.1 - 32:49.1
Вікна підтвердження, вікна невдалої спроби виконання дій.

32:49.4 - 33:03.6
[CROSSTALK]

33:04.6 - 33:11.1
От же ми з вами зупинилися знову ж таки на таких основних кількох шаблонах,

33:11.2 - 33:15.8
які поділяють площину нашого екрану на зональність.

33:15.9 - 33:26.2
І от тут ви теж бачите ще одну серію шаблонів типових,при організації наших layout-ів.

33:26.3 - 33:30.2
Є один із способів, знову ж таки вдала, не вдала спроба.

33:30.3 - 33:36.6
Спроба інтеграції групи картинок в основну сторінкову групу.

33:37.2 - 33:44.3
Група так званих послідовних плиточок-розкладки наших елементів.

33:44.8 - 33:54.7
Є типові спливаючі підказки, які вказують або кількість наявних відгуків, або кількість наявних поштових відправлень,

33:54.8 - 33:59.8
або кількість коментарів, або рейтинг певного елемента.

34:00.0 - 34:11.4
Є зонування на вставлення рейтинга тієї чи іншої сторінки, знову ж таки тарифні плани, опис профайла якогось користувача,

34:11.5 - 34:19.5
так звані "pop-up" спливаючі календарі - тобто у нас є зона відображення якоїсь дати і ми можемо або відредагувати її,

34:19.6 - 34:27.9
або змінити певну дату. І у нас є спливаючий якийсь елемент календаря, знову ж таки він може бути або щомісячний,

34:28.0 - 34:36.4
або щотижневий, або щоквартальний, або можливо цілорічний, або до конкретного тижня, тобто тут вже іде типи відображення календарів.

34:37.3 - 34:42.0
Багато колонкове відображення простих, звичайних текстів, медіагалерея.

34:42.5 - 34:47.8
Затримки на момент завантаження якогось певного елемента,

34:47.9 - 34:54.0
відображення анімації про те, що іде процес підгруження завантаження елементів

34:54.1 - 34:58.9
або процентовий спосіб відображення завантаження.

34:59.4 - 35:09.0
Наприклад task-сторінка, де ми відмічаємо: виконав роботу, чи не викинув цю роботу і відповідно маємо список.

35:09.5 - 35:18.1
Це так само є типовий спосіб організації покрокового виконання, тобто є невелика зона інфографіки,

35:18.2 - 35:24.5
яка або кольорами, або розмірами змінює вот ці графічні документи.

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

35:35.3 - 35:47.5
А так само є різноманітні відображення структури великої програми або структури сайту тобто які сторінки є сайтові, так званий site-map

35:47.6 - 35:53.8
де є показування, де ви ще можете перейти по елементах.

35:54.2 - 36:00.9
Різноманітні елементи сторінковості або прокруток, або каруселей інформації.

36:01.1 - 36:11.2
Різні графіки діаграмності, візулізації даних, різні чати і так звані зони перв'ю певного документа.

36:11.3 - 36:19.1
Вот ви зараз, коли користуєтесь Гугл доксами, ви часто бачите, що коли ви вибираєте якісь там пдф або картинку,

36:19.1 - 36:27.6
так воно є спливаючим елементом і ви знову ж таки можете прокручувати і дивитись вже повноцінний документ в повному обсязі.

36:30.0 - 36:41.6
Так, вот це так само є приклади, ще деяких форм відображення інформації: переписка,

36:41.7 - 36:53.1
відображення різних описів, це як правило робиться на сторінках, наприклад готелей або ресторанів, або меню різних ресторанів,

36:53.2 - 37:04.7
там де є картинка, є опис продукту або опис страви, діаграмні елементи, каруселі попереднього перегляду файлів.

37:05.0 - 37:15.6
Збільшений спосіб перегляду файлів організації, різні сторінки по налаштуванню параметрів або програмного продукту,

37:15.7 - 37:26.0
або наприклад медіаплеяра, різні синтезатори, різні гучності, або наприклад роботи х кольорами, або роботи з картинками,

37:26.1 - 37:32.8
там де ви хочете яскравість, контрасність, колірність, глибину, прозорість підкоректувати.

37:32.8 - 37:40.2
Знову ж таки різні способи організації сіткових елемнтів табличності на сторінках.

37:41.4 - 37:51.2
Невеличкі текстові пункти параметрів елементів, способи розшарювання елементів, способи відображення картографії.

37:51.3 - 38:03.4
Різні види спливаючих вікон, наприклад для лінукс систем, для мак-систем, для якихось так само лінукс або андроїдівських систем

38:03.6 - 38:11.9
Для віндовс систем і так далі, тобто яким чином організовується заголовок нашого вікна.

38:11.9 - 38:22.0
Ну і відповідно завжди робляться для всіх іконок, які потім будуть розміщуватися на наших панелях, на наших елементах.

38:22.1 - 38:29.9
Робляться так звані палітри всіх можливих станів іконок, тобто коли іконка знаходиться в активованому стані

38:30.0 - 38:37.6
або коли ми наводимо наш курсор, або палець або стилус на певний елемент, він підсвічується яскравіше.

38:37.7 - 38:46.7
Статус активованості, статус не активованості або наприклад заблокованості для будь яких дій.

38:46.8 - 38:56.6
І от так для кожної іконки завжди розмальовуються всі можливі стани цього іконочного елемента на наших вікнах

38:56.6 - 39:00.9
і створиться така якби палітра всіх елементів.

39:01.5 - 39:12.0
Оце є ще один приклад, яким чином організовуються вікна для відображення статистичних різних даних.

39:12.1 - 39:18.7
Ну в основному інфографіка якраз корелюється чимось іншим предметом - візуалізація даних.

39:18.8 - 39:28.9
Тобто зона картинок, зона підкартинок, основного каденту, розділяння на елементи, статистичні діаграми, великі графіки,

39:29.0 - 39:38.7
зв'язані елементи яким чином відображаються чи послідовно, чи у вигляді ієрархічного зв'язного чи не зв'язного графа

39:39.3 - 39:43.0
і це дає можливість відображати дані.

39:43.3 - 39:53.4
Тепер вот це є так само дані, які дають можливість робити step-by-step виконання дій користувачем,

39:53.5 - 40:01.0
тобто виконай першу дію, подивись що треба було виконувати, переходь до наступного кроку, подивись, що треба виконувати,

40:01.0 - 40:09.5
Перейди до наступного, що треба виконувати і є як би дорожня карта, що за чим виконувати, щоб ми досягли якоїсь дії.

40:09.5 - 40:18.1
Або наприклад як от зроблено в Фейсбуку, деяких ще соціальних мережах, тобто є певні дати вузлові,

40:18.1 - 40:27.0
що відбувалося, якісь картинки, можливо якісь коментарі, описи, можливо група якихось коментарів і картиночок.

40:27.1 - 40:36.2
І дуже часто на багатьох сайтах завжди роблять от таке правостороннє, лівостороннє поєднання тому, що

40:36.4 - 40:44.6
коли фокус уваги людини, як правило падає на картинки і людина переводить погляд на ліво та право,

40:44.6 - 40:57.0
вот цей вот момент переведення фокусу уваги на певну зону, він активує, якби поновлює увагу людини на новий елемент.

40:57.4 - 41:10.0
Ну і плюс за рахунок моторики очей так само активується увага і людина краще сприймає довгі документи з нашими намірами.

41:10.5 - 41:21.6
Так, тепер ми більше вже переходимо до, попередні всі слайди це стосувалися в основному декстопних розкладок

41:21.7 - 41:31.4
і для телевізорів, ноутбуків, планшетів, а тепер буде серія розкладок, які характерні для смартфонів,

41:31.5 - 41:38.9
для телефонів, ви так само зараз в лабораторках, в 4-ій теж робите такі ескізи.

41:39.0 - 41:45.3
Оце, наприклад, у нас знову ж таки є адресна книга, деталізація адресної книги

41:45.4 - 41:51.0
або, наприклад, у нас є панель відображення картинок з підписами цих картинок,

41:51.1 - 41:55.9
ну і відповідно треба враховувати діагональ нашого пристрою.

41:56.1 - 42:02.1
Чим більше у нас є оце співвідношення висоти й ширини, тим більше елемнтів ми можемо розмістити,

42:02.2 - 42:12.5
відповідно ми можемо вирішувати, чи це буде вже сторінковістю з закладками, чи буде одноколоночне відображення

42:12.6 - 42:15.0
чи наприклад двохколоночне відображення.

42:18.3 - 42:26.3
Вот на цьому слайді так само представлені типові розкладки, які характерні для наших смартфонів

42:26.6 - 42:38.3
Так, тобто є відображення елементів, є відображення мікропанелей, є основний заголовок, є можливість зробити пошук.

42:38.9 - 42:45.2
Якщо ми активуємо цей елемент у нас панелька відповідно з'являється, відображає нам більше даних.

42:45.3 - 42:54.5
Або, наприклад, понельочне вкладання сусідніх елементів, оці всі панельки можуть розтягуватися в залежності від того,

42:54.6 - 42:58.2
скільки даних у нас виводиться в елементах.

42:59.5 - 43:05.3
Тут так само ви бачите поєднання і графіків і заголовки з більшим елементом.

43:05.4 - 43:09.1
Є поля введення даних, занесення даних, зберігання даних.

43:09.2 - 43:19.6
Основний акцент уваги на елементу, додаткові елементи, які потім у нас теж активуються і розгортаються до повного екрану.

43:20.8 - 43:24.2
Теж типові розкладки, які є.

43:24.5 - 43:36.6
Тут ви теж бачите деякі типові розкладки, теж є пошукове поле, основне поле, перелік різних параметрів для цього елемента.

43:37.0 - 43:49.9
Є основні заголовки, є картинки, так само є акценти по зонах і є так само зонування більшими елементами, меншими елементами.

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

44:00.6 - 44:03.4
навпаки зробити для всіх пристроїв.

44:04.0 - 44:16.3
Теж є приклади організації галереї: основний перегляд, міні-прев'ю або є послідовність перемикання між слайдами, або між контентом

44:16.3 - 44:22.2
і суб-галереї, повноекранне роздивляння, кнопка повернення назад,

44:22.3 - 44:29.0
щоб можна було вернутися на скорочену галерею або на прев'ю галереї.