57:13.0
57:16.4
старатися малювати в квадратному виконанні.
57:16.5
57:21.3
Ви так само в четвертій лабораторній намагаєтесь
57:21.4
57:26.2
зробити розбивку функціоналу по наших скрінах
57:26.3
57:31.1
ну і як правило в smart годинниках є дуже багато
57:31.2
57:36.0
оцих от прокруток, так у вас є колесо ,яке може вам прокручувати той безел
57:36.1
57:40.9
і відповідно вам необхідно всі ті леаути
57:41.0
57:45.8
просто зробити у вертикальній смужковій якби
57:45.9
57:50.7
форматуванні.І відповідно оці от прокрутки вам дають
57:50.8
57:55.6
більше можливостей для відображення елементів . Знов ж таки
57:55.7
58:00.5
ви бачите один елемент, другий елемент , ну там три елементи влазить
58:00.6
58:05.4
на екран і якби більше ми не зможемо зробити. Оце
58:05.5
58:10.3
є так само типові шаблончики для
58:10.4
58:15.2
розкладки по отаких невеличких екранчиках ,
58:15.3
58:20.1
тобто ми можемо давати рівномірну пропорцію
58:20.2
58:25.0
для рисунка , для текста , якісь збільшені елементи зображення,
58:25.1
58:29.9
відображати великі зображення і кілька налаштувань ,
58:30.0
58:34.8
статус елемента, час тривалості, вибір елементів ,
58:34.9
58:39.7
елементи відображення статистики , різні
58:39.8
58:44.6
види таймерів , налаштувань і відображень, тобто знов ж таки
58:44.7
58:49.5
ви бачите, що на скріні у нас чотири елемента ,
58:49.6
58:54.4
три елемента в основному , два елемента в основному ,
58:54.5
58:59.3
два-три рядочка тексту , дві-три іконочки,
58:59.4
59:04.2
один, як правило, елемент керування і тому фактично
59:04.3
59:09.1
великий програмний продукт треба розбити на семпл
59:09.2
59:14.0
мікро-іконочок. Так, тепер на цьому слайді
59:14.1
59:18.9
ви теж бачите способи організації розкладки по
59:19.0
59:23.8
екранах , ну і плюс ще в той момент,
59:23.9
59:28.7
коли ми маємо можливість щось виконати , якусь дію, тут ще
59:28.8
59:33.6
показано, що відбувається якась вібрація , тобто активація елемента
59:33.7
59:38.5
ті елементи, які є ще апаратні теж
59:38.6
59:43.4
відображаються на оцих от скрінах , що теж вони залучаються до нашої
59:43.5
59:48.3
роботи. Оце теж є типові приклади , що ми
59:48.4
59:53.2
можемо відображати на таких маленьких дисплейчиках. Тобто,
59:53.3
59:58.1
як правило, максимум, що ми можемо вивести , це якесь одне повідомлення і то ще не
59:58.2
60:03.0
обов'язково , що воно є повне , якась одна єдина кнопка активації.
60:03.1
60:07.9
Буквально один-два є елементи з нашого чату, є якась обмежена
60:08.0
60:12.8
клавіатура для набору даних, є обмеження по
60:12.9
60:17.7
діях калькулятора чи введенні даних чи
60:17.8
60:22.6
якогось компаса чи наприклад інформації про GPS-координати,
60:22.7
60:27.5
скорочена версія календарів, скорочена версія
60:27.6
60:32.4
якихось таймерів, відображення
60:32.5
60:37.3
адресної книги і т.д. Ну три-чотири елементи максимум влазить
60:37.4
60:42.2
у нас на екран. Оце так само є приклади
60:42.3
60:47.1
типових елементів, які, як правило, є на екранах.
60:47.2
60:52.0
Це наш перелік всіх можливих додатків, які підключені
60:52.1
60:56.9
до телефона, відображення календарних даних, відображення
60:57.0
61:01.8
якихось часових даних, відображення розкладів, відображення
61:01.9
61:06.7
дій , підтвердження якихось дій,
61:06.8
61:11.6
тривалостей, знов три-чотири рядка, одна кнопка,
61:11.7
61:16.5
дві кнопки , три кнопки, один єдиний елемент, компонент на
61:16.6
61:21.4
екрані ,який у нас розміщується. Так само отут ви бачите приклади
61:21.5
61:26.3
для карти з обмеженням виведення, таймери, відображення
61:26.4
61:31.2
дій, відображення картинок, запуск медіа-
61:31.3
61:36.1
плеєра, підтвердження дії виконання,
61:36.2
61:41.0
одна дія - один підпис , одна дія - один підпис.
61:41.1
61:45.9
Це є приклади вікон для
61:46.0
61:50.8
різних будильників, сповіщень з додатків,
61:50.9
61:55.7
створення певного таймера,
61:55.8
62:00.6
відображення інформації про погоду, про температуру,
62:00.7
62:05.5
добавляння подій в календар, відображення списку
62:05.6
62:10.4
календарних дій або переписки. Це так само є приклади
62:10.5
62:15.3
для відображення години, відображення калькуляторів,
62:15.4
62:20.2
відображення набору даних, можливо якийсь набір телефонів і
62:20.3
62:25.1
медіа-плеєрів. Це так само от приклади є реалізацій
62:25.2
62:30.0
таких от скрінів і плюс завжди, коли
62:30.1
62:34.9
робиться розкладка по скрінах, потім ще робиться так звана бібліотека
62:35.0
62:39.8
всіх елементів типових ,які потім будуть використовуватись як
62:39.9
62:44.7
частинки основних скрінів, так званий user
62:44.8
62:49.6
interface kit, тіпа набір типових елементів, які потім вже розміщуються
62:49.7
62:54.5
по чуть-чуть на кожній розкладці. Оці
62:54.6
62:59.4
елементики вони потім легше будуть для програмістів, ви
62:59.5
63:04.3
вже потім їх або пообрізаєте і потім вже будете підставляти в ті зони, які вам будуть потрібні.
63:04.4
63:09.2
Тут є чітко видимі елементи і просто їх
63:09.3
63:14.1
будемо розміщати на поверхні наших юаутів.
63:14.2
63:19.0
І тут так само представлена така бібліотека типових елементів
63:19.1
63:23.9
конструктивів для телефонів, тобто як виглядають кнопки для
63:24.0
63:28.8
скидання дзвінка, піднімання дзвінка ,як виглядає типовий елемент керування
63:28.9
63:33.7
або звуком або якимись діями, керування плеєром,
63:33.8
63:38.6
різні види статусів вікон,яким чином формуються
63:38.7
63:43.5
бокові елементи для відображення тексту, яким чином формуються списки.
63:43.6
63:48.4
Тобто ці от набори виводяться окремо
63:48.5
63:53.3
від загальних скрінів. Ну і знов-таки, коли ви
63:53.4
63:58.2
створили окремі скріни, вам необхідно потім зробити
63:58.3
64:03.1
розкладку по сценарію і вказати,
64:03.2
64:08.0
що саме відбулося під час активації і
64:08.1
64:12.9
переходу між тими скрінами, тобто при натисканні на це, ми отримаємо
64:13.0
64:17.8
перехід на цей скрін, при натисканні інакшому куди далі ми переходимо
64:17.9
64:22.7
і оці от сценарії дають можливість розуміти логіку
64:22.8
64:27.6
загального формування нашого інтерфесу користувача. Ну і
64:27.7
64:32.5
те,що я вам казав на початку роботи з тими
64:32.6
64:37.4
смарт годинниками, що роздільча здатність колись
64:37.5
64:42.3
давним-давно, у 84-му році, була 500 на 300,
64:42.4
64:47.2
перші айфончики в 7-му році були 400 на 320,
64:47.3
64:52.1
ну і відповідно смарт годинника теж в районі 400-500.
64:52.2
64:57.0
Зараз роздільча здатність, тобто, яким чином, що ви раніше робили скріни,
64:57.1
65:01.9
що років 10 назад, що зараз теж по роздільчій
65:02.0
65:06.8
здатності майже те саме, скільки інформації ми можемо відобразити на
65:06.9
65:11.7
екрані. Ну і оці всі види прототипів
65:11.8
65:16.6
різних ескізів, різних типів
65:16.7
65:21.5
тих ескізів, як правило, всі ті ескізи мають певну назву,
65:21.6
65:26.4
вони використовуються потім для описів технічної
65:26.5
65:31.3
документації для дизайнерів, для програмістів і вже по тих
65:31.4
65:36.2
шаблонах ми далі можемо зробити повноцінні ескізи і їх наповнити.
65:36.3
65:41.1
Цим як раз ви і займаєтесь у другій і в четвертій лабораторці. Оці от
65:41.2
65:46.0
розкладки по поділу елементів теж є характерні,
65:46.1
65:50.9
цим ви як раз зайнялися, потім тегами робите в п'ятій лабораторці і
65:51.0
65:55.8
в шостій лабораторці. Теж робите розбивку на зони,
65:55.9
66:00.7
розбиваєте XML тегами поділ
66:00.8
66:05.6
і відповідно потім наповнюєте елементами.
66:05.7
66:10.5
Це теж є приклади
66:10.6
66:15.4
наповнення таких сторінок, порожні сторінки, з верхніми картинками, з
66:15.5
66:20.3
центральними картинками, з меншими елементами.
66:20.4
66:25.2
Звичайно, що у більшості програм необхідно робити чергування для того,
66:25.3
66:30.1
щоб фокус уваги людини не припинявся і людина постійно акцентувала
66:30.2
66:35.0
увагу. Тобто частину інформацію на одній сторінці таким способом відобразили,
66:35.1
66:39.9
потім на іншій - іншим способом, ще інакшим, ще інакшим і тоді людина кожний
66:40.0
66:44.8
раз бачить щось нове і цікаве, і відповідно вона акцентує свою увагу і
66:44.9
66:49.7
краще сприймає той матеріал,який є. Тут так само бачите є приклад
66:49.8
66:54.6
для десктопних, для планшетних і для телефонних
66:54.7
66:59.5
розкладок. Тобто є перенесення оцих всіх зон
66:59.6
67:04.4
по розкладці, так звані адаптивні інтерфейси
67:04.5
67:09.3
і плаваючі розкладки. Ну і
67:09.4
67:14.2
ще ми з вами в четертій лабораторці намагаємось
67:14.3
67:19.1
зробити, переробити інтерфейси під різні пристрої:
67:19.2
67:24.0
під різні види планшетів, під різні види смартфонів,
67:24.1
67:28.9
під різні роздільчі здатності, якийсь, можливо, функціонал винести
67:29.0
67:33.8
на різні види гаджетів, для різних видів ноутбуків,
67:33.9
67:38.7
андроїд-пристроїв, ну і можливо, навіть
67:38.8
67:43.6
на плейстейшини і на ігрові консолі,
67:43.7
67:48.5
де теж важливий елемент є , що тут є дуже сильно обмежена клавіатура
67:48.6
67:53.4
і в основному гіроскопічне керування елементами,
67:53.5
67:58.3
і відповідно у нас залученість кількості елементів на екрані має бути скорочена.
67:58.4
68:03.2
Ну і що останнє таке з'явилося - це відповідно є
68:03.3
68:08.1
способи організації інтерфейсу у вигляді віртуальної реальності, тобто треба
68:08.2
68:13.0
врахувати, що людина може обертати свій погляд на всі 360 градусів
68:13.1
68:17.9
і може одночасно керувати кількома елементами,
68:18.0
68:22.8
тобто тут фактично всі наші скріни - вони
68:22.9
68:27.7
ожуть з'являтися у будь-якому положенні екрану. Ну і звичайно,
68:27.8
68:32.6
тут трошки спрощений варіант, так, що просто проініціюються так само прямокутні
68:32.7
68:37.5
зони. Хоча краще було би напевно зробити по принципу глобуса,
68:37.6
68:42.4
тобто коли у нас розкладка глобуса, вона робиться меридіанами
68:42.5
68:47.3
різними і екваторними елементами і от робити по принципу
68:47.4
68:52.2
такого якби кавунчика, що оті всі скріни
68:52.3
68:57.1
малювати з врахуванням потім сферичного складання
68:57.2
69:02.0
оцих елементів , тобто по принципу географії, по принципу картографії,
69:02.1
69:06.9
яку ви вчили колись у школі. Хороша ідея,
69:07.0
69:11.8
але треба врахуваи, щоб людина відволікалась, трошки рухалась і тоді
69:11.9
69:16.7
вона не буде засиджуватись, не буде голова боліти, руки не будуть, тобто вона віртуально
69:16.8
69:21.6
буде намагатись щось рухати в просторі. Оце ми з вами
69:21.7
69:26.5
розібрали п'ятий крок до кінця по принципах
69:26.6
69:31.4
організації площинного розміщення основних компонентів
69:31.5
69:36.3
і тепер, як правило, коли розібрались з площинною розкладкою,
69:36.4
69:41.2
переходять до шостого кроку. Шостий крок
69:41.3
69:46.1
передбачає, які саме пристрої ми таки
69:46.2
69:51.0
лишимо як пристрої керування. У нас була з вами лекція про
69:51.1
69:55.9
ергономіку пристроїв взаємодії - це різні види клавіатури, різні види джойстиків,
69:56.0
70:00.8
різні види і способи організації мишки,
70:00.9
70:05.7
так звані мишки у вигляді куль, тред-боли,
70:05.8
70:10.6
різноманітні джойстики і графічні планшети з сенсорним екраном і
