так само цікаві є інтервальні елементи що ви можете задати початкову точку та кінцеву точки і робити перемикання між ними.

Знову ж таки кругова діаграма яка дає можливість обирати різні сектори і задавати ті чи інші елементи

це чимось нагадує перемикач як DROPbox чи CHECKLIST де ви можете обирати селектором певні елементи

Так само визначаються всі стилі для кнопок їхніх станів коли ви активуєте якісь елементи або деактивуєте якісь елементи.

от на цьому слайді теж показані спеціалізовані деякі перемикачі, вони більш імітують фізичні кнопки (пластмасові) які є на різних пристроях

це на пральних машинках, на холодильниках, на мультиварках.

Просто вони виконані у вигляді трьохвимірних проекційних зображень у вигляді симетричних проекцій і відображаються на екрані

Тут так само бачите елемент який нагадує чимось Dropbox або Radiobutton який вибирає той чи інший елемент на екрані, покращує візуалізацію, покращує сприйняття

і відповідно такі набори, колекції формуються для різних версій програми. Наприклад, для вебівської версії одні контроли

для наприклад мобільних телефонів інші контроли, і формуються кілька варіантів одного і того самого інтерфейсу.

Ось тут так само показано всі стани і варіанти формування наприклад якогось меню.

Формування меню у вигляді прямокутних варіантів, з закоругленими сторонами, у вигляді еліпсоїдних елементів активності

або у вигляді різноманітних форм табуляторів, тобто формується ось така палітра

і вже у фінальній версії коли ви її будете відображати, вже тоді вибирається як саме вони будуть у фінальній версії

Те саме наприклад стосується варіанта підсвічування активності, ми можемо просто поміняти колір

змінити наприклад активні елементи меню і неактивні елементи

лишити колір без змін для тексту, просто зробити якісь підреслення; зробити і зміну тексту і ще й підкреслення

змінити положення, тут було підкреслення знизу зверху.

Ще є якась активна іконка яка відображає елемент, тобто знову ж таки проробляються ось такі от варіанти,

і в залежності від того який варіант найбільше збере активність користувачів і їхню увагу - той елемент потім залишається у фінальній версії нашого інтерфейсу.

Тут ви теж бачите як формується повна палітра і для кнопок, і для Radiobutton, їх всіх стани, їхні елементи активності

які кольори міняються при активному стані контрола, які кольори залишаються нективними.

Тобто оці всі елементи дизайнерами формуються і далі вже передаються для програмістів

щоб вони формували наш програмний код і робили візуалізацію.

Ось тут ви теж бачите приклади палітр, вони так само даються дизайнерами, і вже далі йде нарізка кожного елемента на екрані

тобто є повний скрін де ці елементи знаходяться а потім окремий словник типових контролів ї їхніх станів на екрані.

Теж ви тут бачите всі можливі контроли які ми з вами вчили на першій лабораторній: рейтингові іконки і всі можливі їхні стани,

випадаючі елементи, всі можливі кнопки, стани кнопок, активності, неактивності, paginations, перехід на наступні елементи, в кінець елемента,

тобто різні pagination елементи, і кнопки перемикання Radiobuttons для відображення наших списків на екрані.

Ще є дуже багато стилів які відображають зараз для мобільних телефонів ось тут таку найосновнішу кнопочку, яка є кнопочкою меню,

особливо це зустрічається в мобільних додатках. Як бачите тут є багато таких варіантів як дизайнери формували оцю іконку

яка дає можливість відкривати меню налаштувань якогось додатка. І таким способом, і таким

і ці всі назви є систематизовані для відобораження дизайнерами і потім вже обирається фінальна версія для нашого додатку

Є так само багато стилів для очікування, коли вам необхідно показати якийсь певний процес який триває, або завантаження, або математична обробка

або наприклад ми маємо якийсь час на завантаження або очікування реакції вашої програми на щось.

Теж формується ціла база даних можливих варіантів і потім вже на основі статистики яке з відображень найкраще сприймалось тою чи іншоб групою користувачів

наприклад для дітей, для старших людей, для людей з якимимсь обмеженнями зору, для різних роздільчих здатностей екранів

вже для різних пристроїв будуть відображатись різні ось такі елементи і вже вибиратися один з них при фінальному відображенні.

І якщо ми з вами проведемо статистику по програмних продуктах, які елементи найчастіше використовуються, і ви так само це робили наприклад в другій лабораторній, в третій лабораторній.

Там є більше 98 таких конструктивів користувацьких інтерфейсів, це є і кнопки, і круглі кнопки, і Checkboxes, і групування елементів,

і панелі і текстові поля для редагування, різноманітні види іконок, написи, гіперпосилання, спливаючі підказки, розділювачі на екрані, статусні стрічки,

різноманітні панелі які показують стан процесу до якого проценту ми дійшли.

Якщо зробити повний аналіз того що дизайнери найчастіше використовують, зразу впадає в очі ось ця частина діаграми і ось ця частина діаграми.

Такі більш складні елементи як списки, різномантіні види діалогів, різноманітні способи відображення допомоги, інформаційні панелі, різні групування елементів,

вони дуже рідко використовуються, і це так само залежить від виду програмного забезпечення

тобто в яких програмних продуктах дизайнери а також програмісти яку частину елементів використали а яку не використали.

Необов'язково зводити усе до кількох видів елементів на екрані, треба періодично формувати ще якісь версії,

пробувати більш інноваційні елементи, які дизайнери придумують та аналізують на основі користувацьких взаємодій.

І так само намагатись їх тут впроваджувати в нові версії програмних продуктів.

Звичайно що є якісь обмеження по платформах, наприклад на DESKTOP платформах під WINDOWS,під MacOS,під Linux в нас є більше можливостей запрограмувати ось ці всі інтерфейсні елементи.

Якщо ми беремо маленькі екрани, з маленькою роздільчою здатністю, звісно що ті самі версії програмних продуктів просто технічно неможливо використовувати на маленьких екранах,

і нам всеодно доведеться звести усе до спрощених елементів, традиційних які були першими придумані для інтерфейсів користувача.

В коді нам дійсно треба підтримувати всі платформи. На цьому слайді ви бачите основні статистичні дані, які елементи найчастіше використовуються програмістами та дизайнерами.

Ми бачимо що найбільше в нас використовуються кнопки, та різноманітні іконки - тобто це іконки для кнопок і іконки які позначають якісь події,

іконки які активують увагу людини на екрані. Фактично у нас є тут 14 %, тут майже 10 % , це такий найбільший елемент користувацького інтерфейсу.

Ну і ви завжди коли щось малюєте на екранах стараєтесь мнемонічно, іконками подати матеріал на екрані.

Тепер коли ми розібралися з вами з тим спектром елементів які в нас будуть використовуватись на екранах, які кнопки, чи вони будуть чи не будуть.

Можна переходити до 8-го кроку, цей крок стосується написання чіткості повідомлень. Тобто крім красивих кнопочок

завжди коли користувач буде щось робити, йому буде необхідно якимось чином розуміти що відбувається. Тобто вам необхідно буде продумати й акуратно сформувати речення,

які будуть з'являтися на екрані під час якоїсь певної роботи вашої програми. При чому ці речення бажано робити не дуже довгими,

тому що час на прочитання кожного слова ( ми з вами вчили часові затримки) він збільшується і відповідно ефективність роботи буде малою.

Звичайно що треба написати тексти так щоб було чітко зрозуміло що сталося з вашою системою, що вона вимагає і яка має бути реакція людини на ці повідомлення.

Ну це вже більше віноситься до лінгвістики, до правопису, до чіткості формування думок і написання їх в екранах комп'ютера.

Ну і тепер 9-й крок з 14-ти можливих. Нам необхідно забезпечити так званий зворотній зв'язок і допомогу для наших користувачів.

Користувачіне зовсім і дуже часто не розуміють яким принципом керувалися дизайнери для формування інтерфейсів. Їм легше запитати ніж намагатися знайти якусь там відповідь або кнопочку або панельку

або змінити зовншішній вигляд деяких вікон. Їм легше просто натиснути кнопку допомоги, кнопку підтримки і задати своє питання

Більшість питаннь які задаються службі підтримки вони як правило одні й ті самі, і тому формуються так звані списки типових запитань,

і списки типових відповідей на ті події які відбуваються. При чому збір ось цієї інформації про ті типові питання які задавав користувач вони дають можливість потім в наступних кроках удосконалити інтерфейс,

і позбутись оцих проблемних місць на екрані. Тому зворотній зв'язок і допомога, консультування це є дуже важливі елементи в створенні нових версій інтерфейса,

і це допомагає зменшити проблемні зони і взагалі може перемалювати повністю зовнішній вигляд вашої програми.

Дуже часто ви бачите різноманітні спливаючі підказки, це є так званий віртуальний агент і він відноситься до соціалізованого інтерфейсу (ми колись з вами вчили класифікацію цих інтерфейсів),

де ви можете задавати свої запитання або надиктовувати їх на мікрофон, і є ціла база даних типових відповідей.

Хтось можливо пробував з вас на сайті Київстару, у них є такий помічник