Що потрібно знати про інтерфейс Metro

На лекціях для розробників незмінно виникає питання про те, що ж таке інтерфейс в стилі Metro Багато хто думає, що це всього лише уявлення програми у вигляді «живої плитки» замість старих іконок на робочому столі Насправді стиль Metro включає дуже багато концепцій і принципів організації інтерфейсу додатку Спробуємо розібратися, що ж таке інтерфейс в стилі Metro і які його переваги та інновації

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

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

Серед стандартних елементів можна виділити панель додатки (Application Bar), Яка зявляється при натисканні правої кнопки миші або при виконанні жесту, спрямованого від нижньої межі планшета до центру Прикладом реалізації такої панелі може служити додаток Internet Explorer 10 в стилі Metro Тут присутні відразу дві панелі програми, що забезпечують взаємодію користувача з вікнами і надають механізм навігації, але тільки тоді, коли це необхідно користувачу В інший час користувач працює тільки з контентом сторінки

Рис 23

У разі, коли панель програми не дозволяє забезпечити всі можливості, використовують стандартну панель налаштувань системи, в яку можна інтегрувати і налаштування активного застосування Нижче показано, як настройки Internet Explorer 10 (версія в стилі Metro) інтегруються в панель налаштувань системи

Рис 24

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

Наступний принцип, на якому грунтується інтерфейс Metro, – це чуйність при взаємодії користувача з інтерфейсом Це досягається шляхом вставки анімації, яка запускається при взаємодії користувача з тим чи іншим елементом інтерфейсу (контентом) Важливо те, що користувач може взаємодіяти з додатком за допомогою як миші, так і пальця Якщо взаємодія здійснюється з допомогою миші, то статичність інтерфейсу ще припустима (принаймні, курсор миші рухається) Але у випадку взаємодії з інтерфейсом за допомогою пальців може виникати відчуття «підвішеному» програми для статичного інтерфейсу Адже не будь-яка взаємодія з контентом призводить до якихось конкретних дій (перехід на іншу сторінку, прокрутка і т д) Тому необхідно намагатися зробити інтерфейс динамічним і чуйним стосовно дій користувача З іншого боку, не слід надмірно перевантажувати анімацією свій інтерфейс, необхідно намагатися зберігати баланс

Розробники Windows 8 неабияк допомогли Вам, створивши нові типи елементів, які підтримують анімацію за замовчуванням Тому часто Ви будете використовувати вбудовані можливості, не вдаючись без великих зусиль

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

&ltVisualStateManagerVisualStateGroups&gt

&ltVisualStateGroup x:Name=&quotOrientationStates&quot&gt

&ltVisualState x:Name=&quotFullScreenLandscape&quot /&gt

&ltVisualState x:Name=&quotFilled&quot /&gt

&ltVisualState x:Name=&quotFullScreenPortrait&quot /&gt

&ltVisualState x:Name=&quotSnapped&quot&gt

.

&lt/ VisualState x:Name=&quotSnapped&quot&gt

&lt/VisualStateGroup&gt

&lt/VisualStateManagerVisualStateGroups&gt

Вся справа в тому, що багато пристроїв, які надходять сьогодні на ринок, підтримують великий набір дозволів і різні варіанти орієнтації Саме тому необхідно розробляти інтерфейс таким чином, щоб він добре працював в будь-яких типах дозволів екрану і з підтримкою портретному та ландшафтному режимі Тут Вам може допомогти симулятор планшета, що дозволяє відобразити додаток в екранах з різним дозволом Найменшим з дозволів вважається 1024 х 768, хоча і більш стандартне для планшета – це 1366 х 768 (зазвичай на нього і слід орієнтуватися)

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

При роботі над кількома додатками для Windows 8 beta вдалося побачити багато прикладів того, що додаток може успішно працювати з мишею, але бути абсолютно непристосованим для роботи з жестами Як приклад можна взяти додаток, що відображає на екран журнал або книгу Виникає бажання реалізувати перегортання сторінок так, як це відбувається в звичайній книзі Користувач бере миша, тягне за край сторінки, і вона успішно перевертається Але як тільки користувач починає працювати з жестами, замість перевороту сторінок у нього зявляється панель управління системи або додаток перемикається на інше Вся справа в тому, що система також реалізує свої дії у відповідь на жести, і це необхідно враховувати

В цілому, створюючи додаток в стилі Metro, потрібно памятати про наступні речі:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp робота за допомогою торкань і жестів переважатиме серед користувачів додатку Тому необхідно ретельно тестувати додаток

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp реалізувати механізми взаємодії з контентом слід таким чином, щоб вони не перетиналися зі стандартними механізмами, закладеними в операційній системі Ось приклад декількох стандартних жестів:

Зрушення вниз

За допомогою даного жесту користувач може «перетягнути» вікно додатка в прикріплений режим або режимFilled При цьому, якщо програма має верхню панель (Application Bar), Спочатку відобразиться вона, а тільки потім вікно почне зменшуватися і рухатися слідом за пальцями користувача

Зрушення вліво

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

Зрушення вправо

За допомогою жесту «Зрушення вправо» користувач може перемикатися між додатками, запущеними в даний момент

Зрушення вгору

Рух пальця, спрямоване знизу вгору (від краю екрану) дозволяє активувати панель програми У стандартному варіанті панель додатки розташовується саме знизу додатки

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Визначаючи реакцію на жести, орієнтуйтеся на сформований мову жестів:

Дотик

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

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

Переміщення

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

Збільшення

(Зменшення)

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

Поворот

Круговий рух двох пальців викликає обертання вибраного обєкту

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

Припустимо, що Ви розробляєте спеціалізований додаток, яке дозволяє створювати зображення Створивши зображення, Ви хочете мати можливість опублікувати його в Facebook, Twitter та інших соціальних мережах Щоб це зробити, Ви можете реалізувати функціональність клієнтів Facebook, Twitter і тд, що не дуже правильно, тому що потребують неабияких зусиль, і подібна функціональність вже присутня на машині у користувача Крім того, соціальних мереж багато, і Ви заздалегідь не знаєте, в якій з них користувач буде публікувати свої дані Тому логічно було б задіяти вже існуючі програми, надавши всім програмам по роботі з соціальними мережами спеціалізований джерело даних Вашого застосування

Природно, щоб один додаток могло надавати дані, а друге – використовувати, необхідно, щоб вони працювали за заздалегідь сформованим правилам або контрактами І такі контракти є, Windows 8 надає їх у великій кількості Ось деякі з типів контрактів:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Search  – Завдяки цьому контракту Ваше додаток може стати джерелом пошуку даних Пошук всередині вашої програми зявляється на панелі інструментів операційної системи, але даним контрактом можуть скористатися і інші додатки

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Sharing – За допомогою цього контракту Ви можете відкрити доступ до даних інших додатків Вище був описаний приклад інтеграції додатки з соціальними мережами

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Play To – Цей контракт призначений для передачі мультимедійних файлів з програми на зовнішні пристрої

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Settings – Даний контракт надає доступ до налаштувань Вашого застосування, завдяки чому система може інтегрувати всі налаштування в свою панель інструментів

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp App to App – Завдяки цьому типу контрактів додатки можуть не тільки обмінюватися даними, а й надавати доступ до різних сховищ, якими оперують

Як було сказано вище, щоб активувати той чи інший контракт у Вашому додатку, необхідно зайти в налаштування пакета і скористатися вкладкою Declarations При цьому Visual Studio надає кілька готових шаблонів, що дозволяють підключити контракти до Ваших додаткам:

Рис 25

У главі 6 буде розказано, як працювати з більшістю контрактів в Windows 8

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

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

Сьогодні багато пристрої оснащені не тільки передавачами WiFi, але і 3G-модемами і велику частину часу знаходяться в мережі Незважаючи на це, при проектуванні власного додатка необхідно враховувати і можливість роботи після розєднання Іншими словами, програма має працювати навіть при відключенні від мережі

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

У сучасному світі користувач може мати більш ніж один пристрій Завдання розробника при проектуванні додатків в стилі Metro полягає в тому, щоб зробити використання додатка «рідним» на будь-якому з пристроїв Для цього Windows 8 пропонує безліч механізмів, які дозволяють зберегти налаштування в хмарі і використовувати їх на будь-який інший машині користувача

Отже, тепер ми знаємо про XAML як мовою, що дозволяє описати інтерфейс, а також розглянули основні принципи побудови інтерфейсу Metro Перейдемо до елементів управління, які присутні у вікнах усіх програм

Сергій Лутай, Сергій Байдачний, Windows 8 для C # розробників

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*