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

Знову ж таки по функціоналу, необхідно і часові зони врахувати,

бо одне діло, що ви, наприклад, врахували формат відображення часу, так?

А ще є важливо, де саме часова зона і чи це все буде синхронізовано.

Наприклад, ви зробили фотографію десь в Америці, потім переїхали сюди(Україна).

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

Яким чином будуть форматуватися стрічки, яким цілі області текстові будуть форматуватися.

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

Чи є якесь обмеження... Наприклад, англійський текст можна вводити, чи,

наприклад, можна кирилицю тільки вводити. Чи є на це заборона чи нема заборони на це.

От ці елементи треба врахувати. І...

Коли ви будете формувати якраз ваші інтерфейси,

то ви якраз формуєте ваш рівень бізнес логіки.

Відповідно ви враховуєте, яка є культура, наприклад, одного регіону,

культуру другого регіону. У вас є якийсь набір типових елементів

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

елемент зовнішнього... інтерфейс для вашої програми.

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

Тепер перейдемо до наступного кроку.

З локалізацією ви розібралися. Що теж треба це все продивитися. Ну, в лабароторних

4-тій і 2-гій, здається, з вас так само ніхто

не пробував робити якісь врахування локалізації і

врахування елементів часових для програм. Тепер

11-тий крок – це, звичайно що, формування способу відображення комп'ютерної графіки і форматування іконок.

Є великі каталоги типових іконок. Навіть є xml-подібна мова

icons.yml, яка дає можливість у вигляді текстового формату

писати компоненти іконок, і потім їх відображати

вже на екрані не як... картинка стала. Що є просто іконочка.

Вона дизайнером по пікселях була колись намальована. А є мова

xml-ська, в якій ви описуєте, які елементики мають бути намальовані на цій іконці.

Наприклад, там... якись... кружечечок, якийсь намальований мусить бути...

сторіночка, намальований знак заборони, там якісь ножечки, або

там якісь ножиці, або там знак папочки. І вот ці вот елементи потім комбінується між собою.

Якщо ви хочете видалити папку, то буде згенерована папка і буде згенерований... картиночка "Видалити".

Якщо, наприклад, ви щось забираєте/зберігаєте, активність/ не активність – бужуть мінятися кольори.

І якраз необхідно врахувати різні види графіки.

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

Якщо ви зробите фіксовані... картинки.

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

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

І ви не зможете нормально відображати дані.

Всі ці елементи формуються, розглядаються,

+ необхідно чітко врахувати, яким чином будуть обраховувані динамічні елементи-мультімейти.

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

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

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

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

Наприклад, приходить якась нотифікація – є мікрозвук. Знову ж таки, звукові файли вони є різних кодувань

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

+ Треба врахувати гучність цього сигналу.

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

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

в тій часовій моделі, яку ми пробували з вами робити в 3-тій лабараторній по моделі GOMS.

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

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

Ви знаєте, що є багато різних іконок.

При чому, іконки малюються в різних форматах

і потім ви їх можете інтегрувати в свої програмки. Так? Це є і векторні різноманітні формати, і растрові, і анімаційні формати.

Необхідно формувати ось такі

пакети різних варіантів, форматів графічних для вашої програми.

Є, впринципі, деякі заборони на деякі види форматів

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

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

Це от є іконки на 512 елементів, різну кількість колірності з елементами маштабування чи не маштабування.

Традиційні іконки, які завжди були, це 32х32+

Це найбільш такий використовуваний формат завжди був. Останнім часом, звичайно, вже використовують

і зразу же дають в програмні продукти – роздільчу здатність 512 і 1024.

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

є можливість налаштовувати, яким чином буть відображатися іконки:

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

тобто це десь ось ця зона. Ну, і, звичайно, супермаленькі іконочки – це от наші 32 і 16 пікселів.

Це найперші іконки: 16 на 16,- які в нас тільки були.

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

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

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

Проблем з криволінійними елементами фактично не існує, але от на малювати подібну іконочку, наприклад, 16 на 16, чи 22, чи 32

Ось тут є проблема. Я не знаю, чи ви вчили алгоритми растрової графіки

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

- У вас не було такого предмета? "Комп'ютерна графіка" був предмет? - Ще ні.

- На наступний семестр.

- Так.

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

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

Бачите ось тут такі мікросходинки ідуть?

- М-м, да.

так? Тіпа квадратік, потім горизонтальна смужка, квадратик один піднівся...

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

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

І от при великій пікселізації цієї сходинковості вже не видно. А от при таких

сходинковість дуже величезна. І ось це є проблема дизайнерів – малювати маленькі іконочки.

Знову ж таки, роздільча здатність іконок під різні пропорції екранів, під різні щільності пікселів

Екранів зараз є дуже багато. І ось ці от всі іконки в різні екрани, під різні пристрої

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

Напевно, ми зараз зробимо перерву по часу, так?

І потім продовжимо цей крок ще далі. Можете сходити на перерву і перекусити щось, і потім продовжимо.

Ми з вами зупинилися на типах іконок, так? І ось ці всі скріни, які ви малювали в 4-тій лабараторній, так?

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

Ну, і ось тут на слайді я вам показав, які є спецільні такі iconmaker-и.

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

Ви можете вибирати роздільчу здатність для іконок. Які у вас будуть незамальовані зони

І ось якраз ви бачите ось цю-от пікселізацію. Так?

Ось це найтяжча частина – зробити так, щоб при формуванні картиночки

зробити правильні ось ці піксельовані кроки.

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

Ось наприклад, 16х16, так? Щоб візуально здавалося, що тут є літера "А",

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

наприклад, як тут 256x256, так? У нас для написання букви "A"

є набагато більше простору і, її у нас чітко видно.

Для дизайнерів іконок тяжко зробити ось цей варіант і цей варіант, щоб вони майже

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

Ось тут ви теж бачите способи заставок.

Багато сайтів мають таке верхнє поле там, де є основна заставка

І так само під різні роздільчі здатності, під логотипи теж треба робити різні пікселізації, так?

Ось тут у нас є логотип там, наприклад, на 150, на 200 пікселів, 256, 48.

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

І завжди буде масштабуватися в правильному зображенні.

Теж ось ці от всі варіанти для кожного елемента промальовуються.

Є ось такі величезні каталоги, там, де є вже намальовані типові іконки.

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

Є цілі каталоги, які ви можете придбати, чи ті чи інші іконки.

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

Знову ж таки, ось ця от немоніка. Яким чином позначається GPS координати,

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

яким чином позначаються, наприклад, фотоапарати. Чому саме так намальована картиночка?

Це теж визначається дизайнерами, психологами.

Тобто як людина психологічно спрощений рисунок сприймає і чи в неї є реакція на цей рисунок.

Наступний крок. Коли ми розібралися з вами з ось цими іконками, з елементами на екрані кнопочок.

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

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

Це є дальтонізм. Є повний дальтонізм, є частковий дальтонізм.