1
00:04:44,000 --> 00:04:51,000
так само цікаві є інтервальні елементи що 
ви можете задати початкову точку та кінцеву 
точки і робити перемикання між ними.

2
00:04:51,100 --> 00:05:00,800
Знову ж таки кругова діаграма яка дає можливість 
обирати різні сектори і задавати ті чи інші 
елементи

3
00:05:00,900 --> 00:05:09,000
це чимось нагадує перемикач як DROPbox чи 
CHECKLIST де ви можете обирати селектором 
певні елементи

4
00:05:09,100 --> 00:05:20,200
Так само визначаються всі стилі для кнопок 
їхніх станів коли ви активуєте якісь елементи 
або деактивуєте якісь елементи.

5
00:05:21,900 --> 00:05:36,600
от на цьому слайді теж показані спеціалізовані 
деякі перемикачі, вони більш імітують фізичні 
кнопки (пластмасові) які є на різних пристроях

6
00:05:36,700 --> 00:05:41,700
це на пральних машинках, на холодильниках, 
на мультиварках.

7
00:05:41,800 --> 00:05:51,000
Просто вони виконані у вигляді трьохвимірних 
проекційних зображень у вигляді симетричних 
проекцій і відображаються на екрані

8
00:05:51,100 --> 00:06:04,900
Тут так само бачите елемент який нагадує 
чимось Dropbox або Radiobutton який вибирає 
той чи інший елемент на екрані, покращує 
візуалізацію, покращує сприйняття

9
00:06:05,000 --> 00:06:14,100
і відповідно такі набори, колекції формуються 
для різних версій програми. Наприклад, для 
вебівської версії одні контроли

10
00:06:14,200 --> 00:06:20,900
для наприклад мобільних телефонів інші контроли, 
і формуються кілька варіантів одного і того 
самого інтерфейсу.

11
00:06:26,200 --> 00:06:34,100
Ось тут так само показано всі стани і варіанти 
формування наприклад якогось меню.

12
00:06:34,200 --> 00:06:46,100
Формування меню у вигляді прямокутних варіантів, 
з закоругленими сторонами, у вигляді еліпсоїдних 
елементів активності

13
00:06:46,200 --> 00:06:51,800
або у вигляді різноманітних форм табуляторів, 
тобто формується ось така палітра

14
00:06:51,900 --> 00:06:59,700
і вже у фінальній версії коли ви її будете 
відображати, вже тоді вибирається як саме 
вони будуть у фінальній версії

15
00:06:59,800 --> 00:07:06,900
Те саме наприклад стосується варіанта підсвічування 
активності, ми можемо просто поміняти колір

16
00:07:07,000 --> 00:07:11,500
змінити наприклад активні елементи меню і 
неактивні елементи

17
00:07:11,600 --> 00:07:19,100
лишити колір  без змін для тексту, просто 
зробити якісь підреслення; зробити і зміну 
тексту і ще й підкреслення

18
00:07:19,200 --> 00:07:24,500
змінити положення, тут було підкреслення 
знизу зверху.

19
00:07:24,600 --> 00:07:31,500
Ще є якась активна іконка яка відображає 
елемент,  тобто знову ж таки проробляються 
ось такі от варіанти,

20
00:07:31,600 --> 00:07:47,500
і  в залежності від того який варіант найбільше 
збере активність користувачів і їхню увагу 
- той елемент потім залишається у фінальній 
версії нашого інтерфейсу.

21
00:07:47,600 --> 00:07:58,700
Тут ви теж бачите як формується повна палітра 
і для кнопок, і для Radiobutton, їх всіх 
стани, їхні елементи активності

22
00:07:58,800 --> 00:08:05,300
які кольори міняються при активному стані 
контрола, які кольори залишаються нективними.

23
00:08:05,400 --> 00:08:10,300
Тобто оці всі елементи дизайнерами формуються 
і далі вже передаються для програмістів

24
00:08:10,400 --> 00:08:16,900
щоб вони формували наш програмний  код і 
робили візуалізацію.

25
00:08:17,000 --> 00:08:26,700
Ось тут ви теж бачите приклади палітр, вони 
так само даються дизайнерами, і вже далі 
йде нарізка кожного елемента на екрані

26
00:08:26,800 --> 00:08:34,900
тобто є повний скрін де ці елементи знаходяться 
а потім окремий словник типових контролів 
ї їхніх станів на екрані.

27
00:08:35,000 --> 00:08:46,100
Теж ви тут бачите всі можливі контроли які 
ми з вами вчили на першій лабораторній: рейтингові 
іконки і всі можливі їхні стани,

28
00:08:46,200 --> 00:08:57,600
випадаючі елементи, всі можливі кнопки, стани 
кнопок, активності, неактивності, paginations, 
перехід на наступні елементи, в кінець елемента,

29
00:08:57,700 --> 00:09:09,400
тобто різні pagination елементи, і кнопки 
перемикання Radiobuttons для відображення 
наших списків на екрані.

30
00:09:09,500 --> 00:09:21,300
Ще є дуже багато стилів які відображають 
зараз для мобільних телефонів ось тут таку 
найосновнішу кнопочку, яка є кнопочкою меню,

31
00:09:21,400 --> 00:09:31,800
особливо це зустрічається в мобільних додатках. 
Як бачите тут є багато таких варіантів як 
дизайнери формували оцю іконку

32
00:09:31,900 --> 00:09:37,600
яка дає можливість відкривати меню налаштувань 
якогось додатка. І таким способом, і таким

33
00:09:37,700 --> 00:09:48,900
і ці всі назви є систематизовані для відобораження 
дизайнерами і потім вже обирається фінальна 
версія для нашого додатку

34
00:09:49,000 --> 00:10:01,200
Є так само багато стилів для очікування, 
коли вам необхідно показати якийсь певний 
процес який триває, або завантаження, або 
математична обробка

35
00:10:01,300 --> 00:10:11,600
або наприклад ми маємо якийсь час на завантаження 
або очікування реакції вашої програми на 
щось.

36
00:10:11,700 --> 00:10:25,400
Теж формується ціла база даних можливих варіантів 
і потім вже на основі статистики яке з відображень 
найкраще сприймалось тою чи іншоб групою 
користувачів

37
00:10:25,500 --> 00:10:33,800
наприклад для дітей, для старших людей, для 
людей з якимимсь обмеженнями зору, для різних 
роздільчих здатностей екранів

38
00:10:33,900 --> 00:10:43,700
вже для різних пристроїв будуть відображатись 
різні ось такі елементи і вже вибиратися 
один з них при фінальному відображенні.

39
00:10:43,800 --> 00:10:59,300
І якщо ми з вами проведемо статистику по 
програмних продуктах, які елементи найчастіше 
використовуються, і ви так само це робили 
наприклад в другій лабораторній, в третій 
лабораторній.

40
00:10:59,400 --> 00:11:11,900
Там є більше 98 таких конструктивів користувацьких 
інтерфейсів, це є і кнопки, і круглі кнопки, 
і Checkboxes, і групування елементів,

41
00:11:12,000 --> 00:11:24,800
і панелі і текстові поля для редагування, 
різноманітні види іконок, написи, гіперпосилання, 
спливаючі підказки, розділювачі на екрані, 
статусні стрічки,

42
00:11:24,900 --> 00:11:30,800
різноманітні панелі які показують стан процесу 
до якого проценту ми дійшли.

43
00:11:30,900 --> 00:11:43,600
Якщо зробити повний аналіз того що дизайнери 
найчастіше використовують, зразу впадає в 
очі ось ця частина діаграми і ось ця частина 
діаграми.

44
00:11:43,700 --> 00:11:59,000
Такі більш складні елементи як списки, різномантіні 
види діалогів, різноманітні способи відображення 
допомоги, інформаційні панелі, різні групування 
елементів,

45
00:11:59,100 --> 00:12:05,500
вони дуже рідко використовуються, і це так 
само залежить від виду програмного забезпечення

46
00:12:05,600 --> 00:12:14,000
тобто в яких програмних продуктах дизайнери 
а також програмісти яку частину елементів 
використали а яку не використали.

47
00:12:14,100 --> 00:12:27,100
Необов'язково зводити усе до кількох видів 
елементів на екрані, треба періодично формувати 
ще якісь версії,

48
00:12:27,200 --> 00:12:34,700
пробувати більш інноваційні елементи, які 
дизайнери придумують та аналізують на основі 
користувацьких взаємодій.

49
00:12:34,800 --> 00:12:40,100
І так само намагатись їх тут впроваджувати 
в нові версії програмних продуктів.

50
00:12:40,200 --> 00:12:53,400
Звичайно що є якісь обмеження по платформах, 
наприклад на DESKTOP платформах під WINDOWS,під 
MacOS,під Linux в нас є більше можливостей 
запрограмувати ось ці всі інтерфейсні елементи.

51
00:12:53,500 --> 00:13:06,000
Якщо ми беремо маленькі екрани, з маленькою 
роздільчою здатністю, звісно що ті самі версії 
програмних продуктів просто технічно неможливо 
використовувати на маленьких екранах,

52
00:13:06,100 --> 00:13:16,800
і нам всеодно доведеться звести усе до спрощених 
елементів, традиційних які були першими придумані 
для інтерфейсів користувача.

53
00:13:16,900 --> 00:13:33,600
В коді нам дійсно треба підтримувати всі 
платформи. На цьому слайді ви бачите основні 
статистичні дані, які елементи найчастіше 
використовуються програмістами та дизайнерами.

54
00:13:33,700 --> 00:13:48,000
Ми бачимо що найбільше в нас використовуються 
кнопки, та різноманітні іконки - тобто це 
іконки для кнопок і іконки які позначають 
якісь події,

55
00:13:48,100 --> 00:14:03,000
іконки які активують увагу людини на екрані. 
Фактично у нас є тут 14 %, тут майже 10 % 
, це такий найбільший елемент користувацького 
інтерфейсу.

56
00:14:03,100 --> 00:14:12,900
Ну і ви завжди коли щось малюєте на екранах 
стараєтесь мнемонічно, іконками подати матеріал 
на екрані.

57
00:14:13,000 --> 00:14:24,200
Тепер коли ми розібралися з вами з тим спектром 
елементів які в нас будуть використовуватись 
на екранах, які кнопки, чи вони будуть чи 
не будуть.

58
00:14:24,300 --> 00:14:38,000
Можна переходити до 8-го кроку, цей крок 
стосується написання чіткості повідомлень. 
Тобто крім красивих кнопочок

59
00:14:38,100 --> 00:14:50,300
завжди коли користувач буде щось робити, 
йому буде необхідно якимось чином розуміти 
що відбувається. Тобто вам необхідно буде 
продумати й акуратно сформувати речення,

60
00:14:50,400 --> 00:15:00,600
які будуть з'являтися на екрані під час якоїсь 
певної роботи вашої програми. При чому ці 
речення бажано робити не дуже довгими,

61
00:15:00,700 --> 00:15:11,600
тому що час на прочитання кожного слова ( 
ми з вами вчили часові затримки) він збільшується 
і відповідно ефективність роботи буде малою.

62
00:15:11,700 --> 00:15:24,800
Звичайно що треба написати тексти так щоб 
було чітко зрозуміло що сталося з вашою системою, 
що вона вимагає і яка має бути реакція людини 
на ці повідомлення.

63
00:15:24,900 --> 00:15:35,900
Ну це вже більше віноситься до лінгвістики, 
до правопису, до чіткості формування думок 
і написання їх в екранах комп'ютера.

64
00:15:36,000 --> 00:15:51,600
Ну і тепер 9-й крок з 14-ти можливих. Нам 
необхідно забезпечити так званий зворотній 
зв'язок і допомогу для наших користувачів.

65
00:15:51,700 --> 00:16:08,500
Користувачіне зовсім і дуже часто не розуміють 
яким принципом керувалися дизайнери для формування 
інтерфейсів. Їм легше запитати ніж намагатися 
знайти якусь там відповідь або кнопочку або 
панельку

66
00:16:08,600 --> 00:16:18,700
або змінити зовншішній вигляд деяких вікон. 
Їм легше просто натиснути кнопку допомоги, 
кнопку підтримки і задати своє питання

67
00:16:18,800 --> 00:16:29,700
Більшість питаннь які задаються службі підтримки 
вони як правило одні й ті самі, і тому формуються 
так звані списки типових запитань,

68
00:16:29,800 --> 00:16:45,600
і списки типових відповідей на ті події які 
відбуваються. При чому збір ось цієї інформації 
про ті типові питання які задавав користувач 
вони дають можливість потім в наступних кроках 
удосконалити інтерфейс,

69
00:16:45,700 --> 00:17:00,100
і позбутись оцих проблемних місць на екрані. 
Тому зворотній зв'язок і допомога, консультування 
це є дуже важливі елементи в створенні нових 
версій інтерфейса,

70
00:17:00,200 --> 00:17:08,400
і це допомагає зменшити проблемні зони і 
взагалі може перемалювати повністю зовнішній 
вигляд вашої програми.

71
00:17:08,500 --> 00:17:25,700
Дуже часто ви бачите різноманітні спливаючі 
підказки, це є так званий віртуальний агент 
і він відноситься до соціалізованого інтерфейсу 
(ми колись з вами вчили класифікацію цих 
інтерфейсів),

72
00:17:25,800 --> 00:17:33,300
де ви можете задавати свої запитання або 
надиктовувати їх на мікрофон, і є ціла база 
даних типових відповідей.

73
00:17:33,400 --> 00:17:38,800
Хтось можливо пробував з вас на сайті Київстару, 
у них є такий помічник