1 00:57:13,000 --> 00:57:16,400 старатися малювати в квадратному виконанні. 2 00:57:16,500 --> 00:57:21,300 Ви так само в четвертій лабораторній намагаєтесь 3 00:57:21,400 --> 00:57:26,200 зробити розбивку функціоналу по наших скрінах 4 00:57:26,300 --> 00:57:31,100 ну і як правило в smart годинниках є дуже багато 5 00:57:31,200 --> 00:57:36,000 оцих от прокруток, так у вас є колесо ,яке може вам прокручувати той безел 6 00:57:36,100 --> 00:57:40,900 і відповідно вам необхідно всі ті леаути 7 00:57:41,000 --> 00:57:45,800 просто зробити у вертикальній смужковій якби 8 00:57:45,900 --> 00:57:50,700 форматуванні.І відповідно оці от прокрутки вам дають 9 00:57:50,800 --> 00:57:55,600 більше можливостей для відображення елементів . Знов ж таки 10 00:57:55,700 --> 00:58:00,500 ви бачите один елемент, другий елемент , ну там три елементи влазить 11 00:58:00,600 --> 00:58:05,400 на екран і якби більше ми не зможемо зробити. Оце 12 00:58:05,500 --> 00:58:10,300 є так само типові шаблончики для 13 00:58:10,400 --> 00:58:15,200 розкладки по отаких невеличких екранчиках , 14 00:58:15,300 --> 00:58:20,100 тобто ми можемо давати рівномірну пропорцію 15 00:58:20,200 --> 00:58:25,000 для рисунка , для текста , якісь збільшені елементи зображення, 16 00:58:25,100 --> 00:58:29,900 відображати великі зображення і кілька налаштувань , 17 00:58:30,000 --> 00:58:34,800 статус елемента, час тривалості, вибір елементів , 18 00:58:34,900 --> 00:58:39,700 елементи відображення статистики , різні 19 00:58:39,800 --> 00:58:44,600 види таймерів , налаштувань і відображень, тобто знов ж таки 20 00:58:44,700 --> 00:58:49,500 ви бачите, що на скріні у нас чотири елемента , 21 00:58:49,600 --> 00:58:54,400 три елемента в основному , два елемента в основному , 22 00:58:54,500 --> 00:58:59,300 два-три рядочка тексту , дві-три іконочки, 23 00:58:59,400 --> 00:59:04,200 один, як правило, елемент керування і тому фактично 24 00:59:04,300 --> 00:59:09,100 великий програмний продукт треба розбити на семпл 25 00:59:09,200 --> 00:59:14,000 мікро-іконочок. Так, тепер на цьому слайді 26 00:59:14,100 --> 00:59:18,900 ви теж бачите способи організації розкладки по 27 00:59:19,000 --> 00:59:23,800 екранах , ну і плюс ще в той момент, 28 00:59:23,900 --> 00:59:28,700 коли ми маємо можливість щось виконати , якусь дію, тут ще 29 00:59:28,800 --> 00:59:33,600 показано, що відбувається якась вібрація , тобто активація елемента 30 00:59:33,700 --> 00:59:38,500 ті елементи, які є ще апаратні теж 31 00:59:38,600 --> 00:59:43,400 відображаються на оцих от скрінах , що теж вони залучаються до нашої 32 00:59:43,500 --> 00:59:48,300 роботи. Оце теж є типові приклади , що ми 33 00:59:48,400 --> 00:59:53,200 можемо відображати на таких маленьких дисплейчиках. Тобто, 34 00:59:53,300 --> 00:59:58,100 як правило, максимум, що ми можемо вивести , це якесь одне повідомлення і то ще не 35 00:59:58,200 --> 01:00:03,000 обов'язково , що воно є повне , якась одна єдина кнопка активації. 36 01:00:03,100 --> 01:00:07,900 Буквально один-два є елементи з нашого чату, є якась обмежена 37 01:00:08,000 --> 01:00:12,800 клавіатура для набору даних, є обмеження по 38 01:00:12,900 --> 01:00:17,700 діях калькулятора чи введенні даних чи 39 01:00:17,800 --> 01:00:22,600 якогось компаса чи наприклад інформації про GPS-координати, 40 01:00:22,700 --> 01:00:27,500 скорочена версія календарів, скорочена версія 41 01:00:27,600 --> 01:00:32,400 якихось таймерів, відображення 42 01:00:32,500 --> 01:00:37,300 адресної книги і т.д. Ну три-чотири елементи максимум влазить 43 01:00:37,400 --> 01:00:42,200 у нас на екран. Оце так само є приклади 44 01:00:42,300 --> 01:00:47,100 типових елементів, які, як правило, є на екранах. 45 01:00:47,200 --> 01:00:52,000 Це наш перелік всіх можливих додатків, які підключені 46 01:00:52,100 --> 01:00:56,900 до телефона, відображення календарних даних, відображення 47 01:00:57,000 --> 01:01:01,800 якихось часових даних, відображення розкладів, відображення 48 01:01:01,900 --> 01:01:06,700 дій , підтвердження якихось дій, 49 01:01:06,800 --> 01:01:11,600 тривалостей, знов три-чотири рядка, одна кнопка, 50 01:01:11,700 --> 01:01:16,500 дві кнопки , три кнопки, один єдиний елемент, компонент на 51 01:01:16,600 --> 01:01:21,400 екрані ,який у нас розміщується. Так само отут ви бачите приклади 52 01:01:21,500 --> 01:01:26,300 для карти з обмеженням виведення, таймери, відображення 53 01:01:26,400 --> 01:01:31,200 дій, відображення картинок, запуск медіа- 54 01:01:31,300 --> 01:01:36,100 плеєра, підтвердження дії виконання, 55 01:01:36,200 --> 01:01:41,000 одна дія - один підпис , одна дія - один підпис. 56 01:01:41,100 --> 01:01:45,900 Це є приклади вікон для 57 01:01:46,000 --> 01:01:50,800 різних будильників, сповіщень з додатків, 58 01:01:50,900 --> 01:01:55,700 створення певного таймера, 59 01:01:55,800 --> 01:02:00,600 відображення інформації про погоду, про температуру, 60 01:02:00,700 --> 01:02:05,500 добавляння подій в календар, відображення списку 61 01:02:05,600 --> 01:02:10,400 календарних дій або переписки. Це так само є приклади 62 01:02:10,500 --> 01:02:15,300 для відображення години, відображення калькуляторів, 63 01:02:15,400 --> 01:02:20,200 відображення набору даних, можливо якийсь набір телефонів і 64 01:02:20,300 --> 01:02:25,100 медіа-плеєрів. Це так само от приклади є реалізацій 65 01:02:25,200 --> 01:02:30,000 таких от скрінів і плюс завжди, коли 66 01:02:30,100 --> 01:02:34,900 робиться розкладка по скрінах, потім ще робиться так звана бібліотека 67 01:02:35,000 --> 01:02:39,800 всіх елементів типових ,які потім будуть використовуватись як 68 01:02:39,900 --> 01:02:44,700 частинки основних скрінів, так званий user 69 01:02:44,800 --> 01:02:49,600 interface kit, тіпа набір типових елементів, які потім вже розміщуються 70 01:02:49,700 --> 01:02:54,500 по чуть-чуть на кожній розкладці. Оці 71 01:02:54,600 --> 01:02:59,400 елементики вони потім легше будуть для програмістів, ви 72 01:02:59,500 --> 01:03:04,300 вже потім їх або пообрізаєте і потім вже будете підставляти в ті зони, які вам будуть потрібні. 73 01:03:04,400 --> 01:03:09,200 Тут є чітко видимі елементи і просто їх 74 01:03:09,300 --> 01:03:14,100 будемо розміщати на поверхні наших юаутів. 75 01:03:14,200 --> 01:03:19,000 І тут так само представлена така бібліотека типових елементів 76 01:03:19,100 --> 01:03:23,900 конструктивів для телефонів, тобто як виглядають кнопки для 77 01:03:24,000 --> 01:03:28,800 скидання дзвінка, піднімання дзвінка ,як виглядає типовий елемент керування 78 01:03:28,900 --> 01:03:33,700 або звуком або якимись діями, керування плеєром, 79 01:03:33,800 --> 01:03:38,600 різні види статусів вікон,яким чином формуються 80 01:03:38,700 --> 01:03:43,500 бокові елементи для відображення тексту, яким чином формуються списки. 81 01:03:43,600 --> 01:03:48,400 Тобто ці от набори виводяться окремо 82 01:03:48,500 --> 01:03:53,300 від загальних скрінів. Ну і знов-таки, коли ви 83 01:03:53,400 --> 01:03:58,200 створили окремі скріни, вам необхідно потім зробити 84 01:03:58,300 --> 01:04:03,100 розкладку по сценарію і вказати, 85 01:04:03,200 --> 01:04:08,000 що саме відбулося під час активації і 86 01:04:08,100 --> 01:04:12,900 переходу між тими скрінами, тобто при натисканні на це, ми отримаємо 87 01:04:13,000 --> 01:04:17,800 перехід на цей скрін, при натисканні інакшому куди далі ми переходимо 88 01:04:17,900 --> 01:04:22,700 і оці от сценарії дають можливість розуміти логіку 89 01:04:22,800 --> 01:04:27,600 загального формування нашого інтерфесу користувача. Ну і 90 01:04:27,700 --> 01:04:32,500 те,що я вам казав на початку роботи з тими 91 01:04:32,600 --> 01:04:37,400 смарт годинниками, що роздільча здатність колись 92 01:04:37,500 --> 01:04:42,300 давним-давно, у 84-му році, була 500 на 300, 93 01:04:42,400 --> 01:04:47,200 перші айфончики в 7-му році були 400 на 320, 94 01:04:47,300 --> 01:04:52,100 ну і відповідно смарт годинника теж в районі 400-500. 95 01:04:52,200 --> 01:04:57,000 Зараз роздільча здатність, тобто, яким чином, що ви раніше робили скріни, 96 01:04:57,100 --> 01:05:01,900 що років 10 назад, що зараз теж по роздільчій 97 01:05:02,000 --> 01:05:06,800 здатності майже те саме, скільки інформації ми можемо відобразити на 98 01:05:06,900 --> 01:05:11,700 екрані. Ну і оці всі види прототипів 99 01:05:11,800 --> 01:05:16,600 різних ескізів, різних типів 100 01:05:16,700 --> 01:05:21,500 тих ескізів, як правило, всі ті ескізи мають певну назву, 101 01:05:21,600 --> 01:05:26,400 вони використовуються потім для описів технічної 102 01:05:26,500 --> 01:05:31,300 документації для дизайнерів, для програмістів і вже по тих 103 01:05:31,400 --> 01:05:36,200 шаблонах ми далі можемо зробити повноцінні ескізи і їх наповнити. 104 01:05:36,300 --> 01:05:41,100 Цим як раз ви і займаєтесь у другій і в четвертій лабораторці. Оці от 105 01:05:41,200 --> 01:05:46,000 розкладки по поділу елементів теж є характерні, 106 01:05:46,100 --> 01:05:50,900 цим ви як раз зайнялися, потім тегами робите в п'ятій лабораторці і 107 01:05:51,000 --> 01:05:55,800 в шостій лабораторці. Теж робите розбивку на зони, 108 01:05:55,900 --> 01:06:00,700 розбиваєте XML тегами поділ 109 01:06:00,800 --> 01:06:05,600 і відповідно потім наповнюєте елементами. 110 01:06:05,700 --> 01:06:10,500 Це теж є приклади 111 01:06:10,600 --> 01:06:15,400 наповнення таких сторінок, порожні сторінки, з верхніми картинками, з 112 01:06:15,500 --> 01:06:20,300 центральними картинками, з меншими елементами. 113 01:06:20,400 --> 01:06:25,200 Звичайно, що у більшості програм необхідно робити чергування для того, 114 01:06:25,300 --> 01:06:30,100 щоб фокус уваги людини не припинявся і людина постійно акцентувала 115 01:06:30,200 --> 01:06:35,000 увагу. Тобто частину інформацію на одній сторінці таким способом відобразили, 116 01:06:35,100 --> 01:06:39,900 потім на іншій - іншим способом, ще інакшим, ще інакшим і тоді людина кожний 117 01:06:40,000 --> 01:06:44,800 раз бачить щось нове і цікаве, і відповідно вона акцентує свою увагу і 118 01:06:44,900 --> 01:06:49,700 краще сприймає той матеріал,який є. Тут так само бачите є приклад 119 01:06:49,800 --> 01:06:54,600 для десктопних, для планшетних і для телефонних 120 01:06:54,700 --> 01:06:59,500 розкладок. Тобто є перенесення оцих всіх зон 121 01:06:59,600 --> 01:07:04,400 по розкладці, так звані адаптивні інтерфейси 122 01:07:04,500 --> 01:07:09,300 і плаваючі розкладки. Ну і 123 01:07:09,400 --> 01:07:14,200 ще ми з вами в четертій лабораторці намагаємось 124 01:07:14,300 --> 01:07:19,100 зробити, переробити інтерфейси під різні пристрої: 125 01:07:19,200 --> 01:07:24,000 під різні види планшетів, під різні види смартфонів, 126 01:07:24,100 --> 01:07:28,900 під різні роздільчі здатності, якийсь, можливо, функціонал винести 127 01:07:29,000 --> 01:07:33,800 на різні види гаджетів, для різних видів ноутбуків, 128 01:07:33,900 --> 01:07:38,700 андроїд-пристроїв, ну і можливо, навіть 129 01:07:38,800 --> 01:07:43,600 на плейстейшини і на ігрові консолі, 130 01:07:43,700 --> 01:07:48,500 де теж важливий елемент є , що тут є дуже сильно обмежена клавіатура 131 01:07:48,600 --> 01:07:53,400 і в основному гіроскопічне керування елементами, 132 01:07:53,500 --> 01:07:58,300 і відповідно у нас залученість кількості елементів на екрані має бути скорочена. 133 01:07:58,400 --> 01:08:03,200 Ну і що останнє таке з'явилося - це відповідно є 134 01:08:03,300 --> 01:08:08,100 способи організації інтерфейсу у вигляді віртуальної реальності, тобто треба 135 01:08:08,200 --> 01:08:13,000 врахувати, що людина може обертати свій погляд на всі 360 градусів 136 01:08:13,100 --> 01:08:17,900 і може одночасно керувати кількома елементами, 137 01:08:18,000 --> 01:08:22,800 тобто тут фактично всі наші скріни - вони 138 01:08:22,900 --> 01:08:27,700 ожуть з'являтися у будь-якому положенні екрану. Ну і звичайно, 139 01:08:27,800 --> 01:08:32,600 тут трошки спрощений варіант, так, що просто проініціюються так само прямокутні 140 01:08:32,700 --> 01:08:37,500 зони. Хоча краще було би напевно зробити по принципу глобуса, 141 01:08:37,600 --> 01:08:42,400 тобто коли у нас розкладка глобуса, вона робиться меридіанами 142 01:08:42,500 --> 01:08:47,300 різними і екваторними елементами і от робити по принципу 143 01:08:47,400 --> 01:08:52,200 такого якби кавунчика, що оті всі скріни 144 01:08:52,300 --> 01:08:57,100 малювати з врахуванням потім сферичного складання 145 01:08:57,200 --> 01:09:02,000 оцих елементів , тобто по принципу географії, по принципу картографії, 146 01:09:02,100 --> 01:09:06,900 яку ви вчили колись у школі. Хороша ідея, 147 01:09:07,000 --> 01:09:11,800 але треба врахуваи, щоб людина відволікалась, трошки рухалась і тоді 148 01:09:11,900 --> 01:09:16,700 вона не буде засиджуватись, не буде голова боліти, руки не будуть, тобто вона віртуально 149 01:09:16,800 --> 01:09:21,600 буде намагатись щось рухати в просторі. Оце ми з вами 150 01:09:21,700 --> 01:09:26,500 розібрали п'ятий крок до кінця по принципах 151 01:09:26,600 --> 01:09:31,400 організації площинного розміщення основних компонентів 152 01:09:31,500 --> 01:09:36,300 і тепер, як правило, коли розібрались з площинною розкладкою, 153 01:09:36,400 --> 01:09:41,200 переходять до шостого кроку. Шостий крок 154 01:09:41,300 --> 01:09:46,100 передбачає, які саме пристрої ми таки 155 01:09:46,200 --> 01:09:51,000 лишимо як пристрої керування. У нас була з вами лекція про 156 01:09:51,100 --> 01:09:55,900 ергономіку пристроїв взаємодії - це різні види клавіатури, різні види джойстиків, 157 01:09:56,000 --> 01:10:00,800 різні види і способи організації мишки, 158 01:10:00,900 --> 01:10:05,700 так звані мишки у вигляді куль, тред-боли, 159 01:10:05,800 --> 01:10:10,600 різноманітні джойстики і графічні планшети з сенсорним екраном і