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