Information

[360 VR 4K] ч.2 Кроки проектування графічних користувацьких систем. Людино-машинна взаємодія

Basic shortcuts

Ctrl + SSave subtitles
Ctrl + click
Double click
Edit highlighted caption
TabEdit next caption
Shift + TabEdit previous caption
EscLeave edit mode
Ctrl + SpacePlay / pause video
Ctrl + HomePlay selected caption
Ctrl + EnterSplit caption at cursor position
at current time

Advanced shortcuts

Ctrl + InsertAdd new caption
Ctrl + DeleteDelete selected caption
Ctrl + IEdit currently played segment
Shift + EnterNew line when editing
Ctrl + LeftPlay from -1s
Ctrl + RightPlay from +1s
Alt + LeftShift caption start time -0.1s
Alt + RightShift caption start time +0.1s
Alt + DownShift caption end time -0.1s
Alt + UpShift caption end time +0.1s

Annotation shortcuts

Ctrl + 1Hesitation
Ctrl + 2Speaker noise
Ctrl + 3Background noise
Ctrl + 4Unknown word
Ctrl + 5Wrong segment
Ctrl + 6Crosstalk segment
You are in the read-only mode. Close
05:29.2
05:33.2
а потім тут виводиться основний контент, або наприклад зона верхня
05:33.3
05:38.1
або зона меню, або зона якихось виборів, ну і тут виводиться основна інформація
05:38.2
05:43.0
є двоподілкові, є наприклад
05:43.1
05:47.9
зона окремих статей і основний матеріал, є так само зони
05:48.0
05:52.8
верхнього поділу інформації, бокові
05:52.9
05:57.7
тобто для різних складностей інформації ми можемо робити різні форматування
05:57.8
06:02.6
і різні розкадровки по наших сторінках
06:02.7
06:07.5
щоб легше вмістити зони важливої інформації
06:07.6
06:12.4
зони основної роботи, зони навігації, зони якоїсь прокрутки
06:12.5
06:17.3
і перегляду допоміжних елементів, ну і відповідно
06:17.4
06:22.2
йдуть або фрейми, або панелі, на яких вже розміщуються кнопки або картинки
06:22.3
06:27.1
емм
06:27.2
06:32.0
підвисло воно
06:32.1
06:36.9
так, розберемо такий ось слайд
06:37.0
06:41.8
це так само ви бачите типові схеми розміщення
06:41.9
06:46.7
найбільш вживаних елементів по сторінках, ось тут наприклад
06:46.8
06:51.6
верхній ряд, це от пропонується, яким чином можна організувати
06:51.7
06:56.5
стартову сторінку для якогось сайту, тобто може бути
06:56.6
07:01.4
зона опису, зона одноколонкова, двоколонкова, трьохколонкова
07:01.5
07:06.3
або наприклад акцентування уваги на основні якби розділи
07:06.4
07:11.2
тобто є розділ, є якась прев'ю, ще один розділ, ще одна прев'ю і тд
07:11.3
07:16.1
знову ж таки, може воно просто містити звичайний текст або
07:16.2
07:21.0
текст разом з якимось переходом, з якоюсь картинкою, яка
07:21.1
07:25.9
наприклад потім розтягнеться по всій сторінці, оце само є
07:26.0
07:30.8
типові кілька шаблонів, які описують
07:30.9
07:35.7
різноманітну інформацію про компанію, про команду
07:35.8
07:40.6
про контактну інформацію, наприклад
07:40.7
07:45.5
основні події, які відбувались в компанії, хто саме там працює
07:45.6
07:50.4
детальна інформація, дійові особи
07:50.5
07:55.3
перелік людей, які працюють в команді, відповідно геолокація і яким чином зв'язатись
07:55.4
08:00.2
і форма зворотнього зв'язку, якщо наприклад брати
08:00.3
08:05.1
новосні сторінки, знову ж таки є картинки, є заголовки
08:05.2
08:10.0
є описи, які ж надалі можна роздивитись
08:10.1
08:14.9
якщо ми беремо якийсь блок сформованих, каталогізованих документів або файлів
08:15.0
08:19.8
або файлів для скачування, або шаблоних документів, відповідно вони
08:19.9
08:24.7
як правило оформляються у вигляді сітки і вказуються
08:24.8
08:29.6
у вигляді іконок, який контент всередині знаходиться кожних наших файлів
08:29.7
08:34.5
або є сітковий спосіб представлення, або
08:34.6
08:39.4
стрічковий спосіб задання, знову ж таки каталогізація по
08:39.5
08:44.3
різних каталогах, ну і відповідно галерея фотографій або картинок
08:44.4
08:49.2
вона зразу містить прев'ю для
08:49.3
08:54.1
кожної картинки, так само як іконки вмісту документів
08:54.2
08:59.0
ну ми вот таким чином з вами зараз і лабораторні онлайн здаємо
08:59.1
09:03.9
через гугл докси і через гугл драйв, відповідно
09:04.0
09:08.8
живі реалізації ви теж знаєте
09:08.9
09:13.7
як правило ще коли роблять сторінки то формують кілька видів шаблонів
09:13.8
09:18.6
з різними колірними палітрами, тобто тут ви бачите
09:18.7
09:23.5
взяли такі кофейно-бежеві кольори, або сині кольори роблять, або зелені
09:23.6
09:28.4
тобто якийсь домінуючий колір буде в нашій сторінці, тут ви теж бачите
09:28.5
09:33.3
зони карусельних прокруток, зони статей, зони картинок
09:33.4
09:38.2
зони різних додаткових описів, наприклад
09:38.3
09:43.1
певні тарифні елементи різних видів послуг
09:43.2
09:48.0
або товарів, або тарифних підписок
09:48.1
09:52.9
так само зона чату або коментування і опису, хто це зробив
09:53.0
09:57.8
тобто користувачів, які заносяться, зона чату як правило теж формується з лівої сторони
09:57.9
10:02.7
одна особа з правої сторони, друга особа.. тобто є закономірність часових переходів
10:02.8
10:07.6
так само як формується наприклад слайдова зона
10:07.7
10:12.5
теж є у нас карусельний елемент, який дає можливість нам
10:12.6
10:17.4
вправо вліво якісь картинки,або статті, або ще щось
10:17.5
10:22.3
знову ж таки способи оформлення описів
10:22.4
10:27.2
може бути просто фотографія людини і де людина працювала
10:27.3
10:32.1
чим займалась, або може бути ще заголовок
10:32.2
10:37.0
у вигляді фонового зображення будинку, підприємства, логотипу
10:37.1
10:41.9
Ну і відповідно є ще типовий спосіб
10:42.0
10:46.8
організації переліку товарів, переліку послуг у вигляді такої
10:46.9
10:51.7
сіткової каруселі, де можна прогортати потрібні вам елементи
10:51.8
10:56.6
вот тут так само є приклади організації
10:56.7
11:01.5
розміщені компоновки для характеристики якогось документа
11:01.6
11:06.4
його властивості, коли документ був створений, кількість сторінок, кількість слів порахованих
11:06.5
11:11.3
ну якщо брати за основу вордівський документ, тобто всі
11:11.4
11:16.2
технічні характеристики, ким було створено, коли було створено
11:16.3
11:21.1
коли останній раз модифікації відбувались, коли останній раз резервна копія робилась
11:21.2
11:26.0
або наприклад інформація про типовий продукт, типовий товар, основна фотографія
11:26.1
11:30.9
допоміжні фотографії, можливість придбати або зарезервувати, і якийсь короткий опис
11:31.0
11:35.8
знову ж таки типовий спосіб організації
11:35.9
11:40.7
кошика для покупки, тобто є товари
11:40.8
11:45.6
є їх короткий опис, можливо кількість якась, є можливість добавити кількість
11:45.7
11:50.5
знищити кількість, тобто робота з кошиком покупки
11:50.6
11:55.4
ну відповідно типова форма для здійснення оплати, це є банківські реквізити
11:55.5
12:00.3
якісь реквізити для доставки, яким способом оплати ми збираємось оце здійснити
12:00.4
12:05.2
чи онлайнівським, чи пейпалом, чи веб мані
12:05.3
12:10.1
або іншими сервісами, відповідно є ще один з варіантів
12:10.2
12:15.0
організації медіа сторінки, там де є
12:15.1
12:19.9
наприклад або відео кліпи, або звукові кліпи, там де є можливість
12:20.0
12:24.8
керування по черзі звуковими відтвореннями, ходити по плейлистах
12:24.9
12:29.7
є можливо якісь картинки з виконавцями
12:29.8
12:34.6
або можливо якісь кадри з відеокліпа, відповідно є доріжка
12:34.7
12:39.5
і вказується тайм-час скільки вже звукових хвилин
12:39.6
12:44.4
ви прослухали і скільки вам ще залишилось
12:44.5
12:49.3
також типові сторінки по організації аналітичних даних, як правило
12:49.4
12:54.2
перше завжди вказують картинку з діаграмами, з графіками, для того, щоб відразу акцентувати увагу
12:54.3
12:59.1
на якби згруповану інформацію, у вас зараз є такий предмет
12:59.2
13:04.0
візуалізація даних, якраз там ви розглядаєте ці способи
13:04.1
13:08.9
групування даних і їхніх візуальних представлень, як правило потім вказується
13:09.0
13:13.8
вже решта числових статистичних даних якимось списком
13:13.9
13:18.7
де вже можна детальніше роздивитись ці пікові
13:18.8
13:23.6
або провали в графіках, знову ж таки дуже часто використовуються
13:23.7
13:28.5
способи організації інфографіки, там де у нас формуються
13:28.6
13:33.4
різні діаграми, процентні співвідношення і описуються назви
13:33.5
13:38.3
що саме зі статистичного співвідношення використовується
13:38.4
13:43.2
тут ви бачите одразу акцент іде на діаграми, тут є і діаграми
13:43.3
13:48.1
і короткі описи йдуть, чимось оці дві сторінки так само є
13:48.2
13:53.0
можливість описувати якісь властивості об'єкта
13:53.1
13:57.9
який ми розглядаємо з картинками, з описами, або наприклад
13:58.0
14:02.8
двоколонкові організації списків, наприклад різні
14:02.9
14:07.7
способи голосування за якийсь товар, тобто
14:07.8
14:12.6
або вибираєш один варіант, або другий варіант, і по черзі в такій каруселі йде прокрутка
14:12.7
14:17.5
оцих голосувань, і по черзі можна зробити статистичний аналіз
14:17.6
14:22.4
що саме людина вибирає на екрані, знову ж таки відео галерея
14:22.5
14:27.3
чимось вона нагадує звукову галерею
14:27.4
14:32.2
є способи організації просто у вигляді сіткового
14:32.3
14:37.1
або наприклад основне відео як в ютубі завжди показується, а потім є додаткові відео
14:37.2
14:42.0
які ви можете так само розглянути, тобто такі рецепти
14:42.1
14:46.9
організації вони якби провірені вже часом, багато досліджень
14:47.0
14:51.8
було проведено чому саме розміщується з лівої сторони, з правої сторони, де є фокус уваги людини
14:51.9
14:56.7
які габарити оцих елементів мусять бути в пропорції до висоти-ширини
14:56.8
15:01.6
наприклад вашого екрану
15:01.7
15:06.5
і відповідно такий спосіб організації в часі вже сформувався
15:06.6
15:11.4
і його варто використовувати як рецепт для наступних створень
15:11.5
15:16.3
отут ви теж бачите способи
15:16.4
15:21.2
організації сторінки для якогось виконавця
15:21.3
15:26.1
тобто якийсь альбом, альбом як правило має обкладинку
15:26.2
15:31.0
яка потім на дисках або медіа заставках іде
15:31.1
15:35.9
є кадри з кліпів і є звукові
15:36.0
15:40.8
способи організації наприклад картографічної інформації
15:40.9
15:45.7
сіткові елементи з каруселями для організації портфоліо
15:45.8
15:50.6
наприклад дизайнера або послуг різноманітних
15:50.7
15:55.5
або виконаних проектів, як правило календарі
15:55.6
16:00.4
є стандартизовані елементи, яким чином формується календарна розбивка
16:00.5
16:05.3
по місяцях, по кварталах, по тижнях
16:05.4
16:10.2
щоденні календарі, тобто усі ці сіткові елементи вони як правило
16:10.3
16:15.1
уже є достатньо добре пророблені
16:15.2
16:20.0
вже зроблені пропорції, підсвітки, кольори, шрифти, нам треба ці шаблони
16:20.1
16:24.9
вставляти в наші реалізації, і наприклад типовий елемент
16:25.0
16:29.8
опису, що нам треба робити під час якоїсь події
16:29.9
16:34.7
як правило є якесь чітке розуміння, яка це є дата
16:34.8
16:39.6
який день тиждень, а потім йде опис що нам треба робити
16:39.7
16:44.5
так само є типовий елемент, який показує так звану хмару ключових слів
16:44.6
16:49.4
де ми можемо робити розбивку по групах
16:49.5
16:54.3
і до кожного з елементів робити хмару ключових слів
16:54.4
16:59.2
типова сторінка організації
16:59.3
17:04.1
наприклад пошукової інформації, тобто мусить бути поле вводу
17:04.2
17:09.0
мусить бути якась кнопка або параметри для фільтрації в межах
17:09.1
17:13.9
введеної інформації, і як правило є списковий спосіб організація
17:14.0
17:18.8
для виведення знайдених результатів плюс є
17:18.9
17:23.7
елемент пейджинейшин сторінковості, щоб ми могли
17:23.8
17:28.6
дальше і дальше вибирати оці сторінки, знову ж таки це є
17:28.7
17:33.5
приклад організації відеохостингу і є ще такі цікаві сторінки
17:33.6
17:38.4
як часто задані питання, тобто є якесь питання
17:38.5
17:43.3
є якась відповідь, питання-відповідь, питання-відповідь і знову ж таки є елемент сторіновості
17:43.4
17:48.2
для добавляння елементі плюс медіа тег
17:48.3
17:53.1
ось тут на цьому слайді ви так само бачите деякі
17:53.2
17:58.0
так звані модальні вікна, які
17:58.1
18:02.9
якби є другорядними в більшості програмних продуктів і на сайтах
18:03.0
18:07.8
це наприклад типове підтвердження якоїсь дії користувача
18:07.9
18:12.7
тобто є опис короткий, що саме відбулось, що саме людина намагалась зробити
18:12.8
18:17.6
і чи відбулось воно вдало чи невдало
18:17.7
18:22.5
тобто є якась емблема, що одразу характеризує, що дія виконалась
18:22.6
18:27.4
і аналогічно є навпаки, коли якась дія не виконалась