1
00:44:09,900 --> 00:57:20,600
Список галереї, повноекранне роздивляння, 
кнопка повернення назад, щоб можна було вернутися 
на скорочену галерею, або на прев'ю галерею, 
вспливаюча клавіатура для поля введення, 
або перелік адресної книги у вигляді списку 
разом з текстом, або лише у вигляді віконечок, 
звичайних картинок прев'ю для наших елементів, 
або для списку різних додатків, які використовуються 
у вашому телефоні. Тут теж показані приклади 
яким чином організувати меню. Тобто у нас 
є якийсь елементи додавання, у нас є викликання 
бокового меню, у нас є якісь дії, які ми 
можемо виконати над змістом, є різноманітні 
панелі, які спливають збоку, є у нас організація 
галереї, які основні дії ми можемо виконувати 
з галерейними елементами, типовий спосіб 
організації фотокамери і додатків для фотографування. 
Як правило там завжди є кнопка фотографування, 
є попередні декілька картинок, можливо є 
якесь налаштування якості фотографій і їхнього 
способу фотографування, або сцени фотографування, 
є сітка фокусування і центрування зображення. 
Типові способи організації відео та аудіо 
перегляду. Відповідно якийсь браузер для 
інтернет-сторінок, де можна переходити на 
сторінку далі, сторінку раніше і відповідно 
вводити дані для перегляду. Оце теж є приклади 
організації форм. Воно як правило на малих 
дисплеях з вертикальною орієнтацією. Ви не 
можете організувати форму в якій буде кілька 
полів вводу стояти по боках. Як правило організовуєте 
у вигляді послідовних полів. Ну і плюс спливаючі 
клавіатури, спосіб організації чату, спосіб 
організації адресної книги, списку різних 
справ, які потрібно виконати. Ви бачите, 
що воно фактично дублюється що з телефонами, 
що з планшетами. Хіба що там міняється кількість 
елементів і враховується, що натискання пальцем 
потребує більше площі ніж, наприклад: клікання 
мишкою, або клікання електронним стилусом. 
Спосіб організації календаря чимось нагадує, 
єдине, що потрібно враховувати, що спливаючі 
вікна як правило для гаджетів не роблять, 
бо за рахунок маленького екрану. Це є декілька 
прикладів організації створення нового профілю 
для контактної адресної книги, організації 
більшості різноманітних будильників, які 
дають нам вказування часу й чи він активний, 
чи не активний. Майже на усіх платформах 
цей спосіб організації майже ніде не міняється 
і його часто використовують. Спосіб організації 
новин, спосіб організації різних додатків 
і деталізації інформації на екрані. Коли 
робиться, наприклад, розкладка по картинках, 
то завжди крім того, що ми намалювали на 
екрані якийсь ескіз, робляться ще такі виноски 
і там описується що саме має відбуватися 
в якомусь елементі, або куди веде та, чи 
інша кнопка, або те, чи інше натискання. 
Відповідно необхідно обробити буде часові 
затримки: скільки часу людина витрачає на 
дослідження цього списку. Це теж є приклади 
організації переліку адресної книги, різних 
статей, організації залогінення в якийсь 
сервіс, теж є поле введення пароля і логіна, 
спосіб відображення різних сторінок, створення 
елементів, занесення елементів. Теж ми з 
вами робили в другій лабораторній і зараз 
ви дуже часто в четвертій лабораторній забуваєте 
малювати такі схеми діалогові. Тобто ви нові 
ескізи понамальовували, а потім просто не 
робите цю схему. Тобто яким чином ми переміщаємося 
вже тепер для телефонів, яким чином переміщаємося 
з якого наметах на який. Відповідно ці підписи 
характеризують елементи. Знову ж таки є основні 
лінії, не основні лінії і підпис що саме 
ми хотіли досягти, коли робимо елементи. 
До речі, зараз, коли ви робите в четвертій 
лабораторній нові ескізи, ви в основному 
малюєте ескізи у вертикальній орієнтації 
телефонів, хоча горизонтальна орієнтація 
теж є дуже важливою, тобто коли ви повертаєте 
телефон на бік. -Але ж можна заблокувати. 
Можна, але це погано, краще дати людині можливість 
малювати одні скріни для такого положення, 
інший скрін - для другого. Ви даєте роботу 
програмістам і даєте роботу дизайнерам, плюс 
задовільняє те потреби користувача для всіх 
видів користування.  -А якщо малий бюджет? 
Для програмістів грошей не треба економити, 
програмістам треба дати зарплату. Укрзалізниця 
буде робити собі тільки вертикальну програмку. 
Ми зробимо свій додаток, де буде букова. 
Завжди є зміст, просто треба придумати, що 
робитиме бокова. -Але ж ти не будеш деякі 
ігри грати вертикально.  Краще зробити все, 
як користувач поверне боком, як поверне повним 
обертом, тому що у вас, як правило, камера, 
яка тут є, може бути ліворуч, може бути праворуч. 
А ви як користувач сидите, дивитесь на камеру 
телефона в центральній точці. У вас робочий 
інтерфейс або з правої сторони, або з лівої 
сторони, відповідно селфі получається інакше, 
то треба крутити камерою і давати можливість 
робити інтерфейс для будь-якого положення: 
і так стояти, і так лежати, і ще вниз лежати, 
і ще вправо. Усі можливі 90 градусів всіх 
чотирьох положень варто би якимось чином 
описати, тому що керуючі елементи зараз в 
телефонах з різних боків знаходяться. Це 
ви теж робите в четвертій лабораторній і 
ті, хто ще не робили четверту лабу, постарайтеся 
цей момент якимось чином врахувати в тих 
ідеях, які ви малюєте для ваших скрінів. 
Особливо це стосується тих, хто обрав собі 
мікропроекти. Ваш мікропроект - це якраз 
ваша дитинка, яку ви хочете реалізувати, 
відповідно ви на всі 300 відсотків попрацюєте 
і свій проект прокачаєте. Що ще з'явилося 
таке нове цікаве в інтерфейсах, що теж тепер 
необхідно враховувати? Коли з'явилися так 
звані брови в екранах, з'явилися ті зони, 
де необхідно розмістити якусь інформацію. 
Раніше ми завжди обмежувалися прямокутною 
зоною, малювали ескізи і все було класно 
і все було чудово. Тепер нам необхідно теж 
ці зони враховувати, я не знаю чи там, ті, 
що вже четверту лабораторну здавали, так 
по пам'яті не пам'ятаю, чи ви малювали зразу 
ескізи з тими вирізами під камеру, чи не 
малювали, це треба переглянути буде. Дехто 
там, здається, по пам'яті. -Там були, що 
робили під десятий Айфон. Бачите, з'явилося 
ще поле роботи для дизайнерів, яким чином 
обіграти ці елементи, яким чином обіграти 
ці заокруглення, яким чином промалювати ці 
пікселі. Знову ж таки є людині години, є 
додаткова робота, є додаткова зарплата, є 
додаткові можливості реалізації, щоб ваша 
програмка відображалася на будь-яких екранах, 
на будь-яких роздільних елементах. Тепер 
ми з вами дійшли до типових шаблончиків для 
смартгодинників. Багато з вас теж вже смартгодинники 
мають, смартбраслети ви теж вже собі купуєте. 
Тут основний момент, що знову-таки у нас 
є дві основні групи дисплеїв для смартгодинників: 
це такі майже квадратні по пропорції 3:4 
більшість є годинників, є ще такі круглі 
годинники, є ще круглі з нижньою такою полоскою 
обрізаною. Тобто ці елементи теж потрібно 
малювати для різних форм відображення на 
годинниках. Як правило на годинниках ми не 
можемо розмістити багато елементів, плюс 
процесори і пам'ять там дуже обмежена, відображення 
на екрані теж є дуже обмеженим, відповідно 
нам усі ці функціонали, які ми робили на 
великих ескізах нам потрібно дробити на мікро 
віконечка. Тобто у нас з вами були такі розкладки: 
у нас була панель меню, у нас була ще якась 
панель, у нас була одна стаття, друга стаття, 
третя, четверта. Фактично ті всі зони поділу 
якраз будуть потім окремими скрінами. Тобто 
є окремо скрін навігації - зробили окремо 
частину, є окрема зона відображення якоїсь 
мікро статті, картинки, або маленького тексту 
- зробили ще один скрін. Тобто програмний 
продукт: беремо скрін і ділимо його на ці 
зони і кожна мікро зона - це якраз буде екран 
мікро відображення якоїсь інформації. Знову 
ж таки у нас є дуже велике обмеження по кількості 
мікро стрічок і по типу шрифтів, які відображаються. 
Ви знаєте, що роздільна здатність для смартгодинників, 
здається, не перевищує зараз 480х480. Тобто 
це є рівень початку 80-тих - 70-тих років, 
коли дисплеї ще були трубочні і роздільна 
здатність взагалі була крихітна. Відповідно 
пікселізація тут є дуже велика, тип шрифтів 
є важливий і відповідно зі шрифтами і іконками 
особливо взагалі тут є проблема. Так ви знаєте 
там, що є типові іконки 16х16, в Маках останні 
версії 512х512, здається, для іконок, плюс 
повний градієнт. З іконками тут є дуже велика 
проблема, плюс квадратна матриця, відповідно 
треба старатися всі іконки малювати в квадратному 
виконанні