Metro (інтерфейс)

Матеріал з Вікіпедії — вільної енциклопедії.
(Перенаправлено з Metro UI)
Перейти до навігації Перейти до пошуку
Логотип Metro

Metro — внутрішня кодова назва художнього стилю оформлення графічного інтерфейсу користувача продукції компанії Microsoft, який використовується з другої половини 2000-х років. Характерні особливості — орієнтація на типографіку і акцент на текст, графічний мінімалізм, плавна анімація, один з відмінних елементів стилю — плоскі прямокутні «плитки».

Спочатку був розроблений для використання в Windows Phone, також використовувався при створенні користувальницького інтерфейсу в енциклопедії Encarta і MSN 2.0, а також Zune і Windows Media Center. Пізніше на основі Metro був побудований інтерфейс Windows Phone, вебсайту Microsoft, Xbox 360, Windows 8[1], Xbox One, Windows 10 (частково).

Історія

[ред. | ред. код]

За власною версією дизайнерів Microsoft вважається, що прототипом художнього рішення послужили знаки, які часто зустрічаються в системах громадського транспорту — наприклад, розташовані в системі перевезень King County Metro[2], яка обслуговує велику область Сіетла, де розташована штаб-квартира Microsoft.

Ранні елементи стилю Metro зустрічаються в Windows Media Center для Windows XP, який використовує текст як основну форму навігації. Цей інтерфейс був перенесений в більш пізні версії Media Center. У 2006 році інтерфейс Zune був оновлений з використанням цих принципів. Дизайнери Microsoft вирішили перепроектувати інтерфейс з великим упором на чисту типографіку. Ці принципи і новий користувальницький інтерфейс Zune були використані в Windows Phone, багато вирішень якої були використані в Windows 8. Плоскі кольорові «живі плитки» були введені в Metro на ранніх стадіях розробки Windows Phone. Microsoft розпочала інтеграцію цих елементів у інші свої продукти з прямим впливом, помітним в більш нових версіях Windows Live Messenger, Live Mesh і Windows 8.[1]

Принципи

[ред. | ред. код]
Принципи проєктування мови дизайну Microsoft за екрану старту в Windows 8 та Xbox One (вгорі) та Windows 10 (внизу), що також використовується в Windows Store, Xbox Music та Xbox Video: Плитки представляють атомні одиниці інформації

Стиль Metro заснований на принципах дизайну швейцарського стилю. Основними принципами Metro є акцент на гарній типографіці і великий текст, який відразу кидається в очі. Microsoft називає Metro «простим, чистим, сучасним», а також «оновленням» порівняно з заснованими на значках інтерфейсами Windows, Android і iOS[3].

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

Велику роль відіграє анімація. Microsoft рекомендує плавні переходи і взаємодію з користувачем на основі реальних рухів (таких, як натискання або переміщення). Це створює у користувача враження «живого» і чуйного інтерфейсу з «доданим відчуттям глибини»[4][5].

Microsoft склала внутрішній список принципів, які вважаються основою Metro[6].

Приблизно одночасно з офіційним випуском Windows 8 (26 жовтня 2012 року), оскільки все більше розробників і партнерів Microsoft почали працювати над створенням нових додатків в стилі Metro, по цій темі було створено багато вебсайтів з ресурсами, в тому числі особливі правила розробки графічних інтерфейсів для Windows Store[7].

Шрифт

[ред. | ред. код]
Нова версія використовуваного в типографіці Metro шрифта Segoe UI (внизу), створена для Windows 8.
  • Як основний шрифт використовуються шрифти з сімейства шрифтів Segoe, розробленого Стівом Меттесоном з Agfa Monotype та ліцензованого Microsoft. Для Zune Microsoft створила спеціальну версію під назвою Zegoe UI[8], а для Windows Phone — сімейство шрифтів «Segoe WP». Для Windows 8 також була створена спеціальна версія з тією ж назвою Segoe UI.

Всі ці шрифти в основному розрізняються лише незначними деталями. Найбільш очевидні відмінності між Segoe UI і Segoe WP видно в цифрових символах. Версія Segoe UI, яка використовується в Windows 8, схожа на Segoe WP. Символи з помітними друкарськими змінами в цій версії включають 1, 2, 4, 5, 7, 8, а також I і Q.

Оцінки

[ред. | ред. код]

Рання реакція на Metro була в цілому позитивною. В огляді Zune HD Engadget сказав: «Microsoft продовжує свій ривок до великої, великої типографіки тут, забезпечуючи складний, акуратно розроблений макет, який майже настільки ж функціональний, наскільки привабливий»[9]. CNET похвалив Metro, кажучи, що «він трохи сміливіший і неформальний, ніж жорсткі, стерильні „сітки“ з значків і схоже на картотеку меню iPhone і iPod touch»[10]. Товариство промислових дизайнерів Америки (англ. The Industrial Designers Society of America, IDEA) нагородило Windows Phone, яка використовує Metro, золотою нагородою «Народний вибір дизайну», а також премією «Кращий на виставці»[11]:

Інновації тут — плавна взаємодія і зосередженість на даних, без використання умовностей традиційного користувацького інтерфейсу — вікон і рамок. Дані стають візуальними елементами і елементами управління. Прості жести і переходи дозволяють глибше проникати в зміст. По-справжньому елегантний і унікальний досвід взаємодії.
Оригінальний текст (англ.)
The innovation here is the fluidity of experience and focus on the data, without using traditional user interface conventions of windows and frames. Data becomes the visual elements and controls. Simple gestures and transitions guide the user deeper into content. A truly elegant and unique experience.

— Ізабель Анкона, консультант по користувацькому досвіду в IDEA[12]

25 серпня 2012 року Пітер Брайт (англ. Peter Bright) із Ars Technica зробив огляд попередньої версії Windows 8, присвятивши першу частину огляду зіставленню екрану «Пуск» Windows 8 (побудованого в стилі Metro) і його попередньої версії в Windows 7 і більш ранніх. Перебираючи їх плюси і мінуси, Пітер Брайт прийшов до висновку, що екран «Пуск», хоча й не позбавлений деяких проблем, є явним переможцем[13].

Відмова від використання назви Metro

[ред. | ред. код]

У серпні 2012 року почали ходити чутки, що один з роздрібних партнерів Microsoft — німецька компанія Metro AG — погрожувала судовим позовом проти Microsoft, за порушення прав на товарний знак «Metro». Розробникам і співробітникам Microsoft була розіслана пам'ятка, яка закликала відмовитися від використання терміна «Metro», у зв'язку з результатами переговорів з «важливим європейським партнером»[14][15]. Microsoft тимчасово називає мову дизайну «Modern UI».

9 серпня 2012 з'ясувалося, що Microsoft планує використовувати термін «Windows 8», щоб замінити «Metro» у споживчих матеріалах, а термін «Modern UI» призначений для розробників, які планують створювати програмне забезпечення на основі нових принципів дизайну[16]. З вересня 2012 року в документації MSDN використовується термін «мова дизайну Microsoft» (англ. Microsoft design language), коли йдеться про мову дизайну[17][18][19][20]. Крім того, на конференції розробників Microsoft Build 2012 компанія також використовує назву «мова дизайну Microsoft»[21][22].

Для позначення створених в стилі Metro додатків для Windows 8 вживаються терміни «додаток в стилі Windows 8» (англ. Windows 8-style app), і «додаток Магазину Windows» (англ. Windows Store app).

Див. також

[ред. | ред. код]

Примітки

[ред. | ред. код]
  1. ↑ а б Windows Phone 7 Series UI Design & Interaction Guide : [арх. 15.05.2013]. — 2010. — 18 March. — Дата звернення: 09.10.2010.
  2. ↑ Metro Design Language of Windows Phone 7 : [арх. 24.05.2013]. — microsoft.com. — Дата звернення: 05.10.2012.
  3. ↑ Metro - Blackboard : [арх. 24.05.2013] / Browse Blackboard Home. — Businessinsider.com, 2011. — 25 April. — Дата звернення: 03.11.2011.
  4. ↑ Windows Phone UI and Design Language : [арх. 24.05.2013]. — Дата звернення: 09.10.2010.
  5. ↑ From Transportation to Pixels. — Windows team blog, 2011. — 16 лютого.
  6. ↑ Metro Design Language of Windows Phone 7 | Microsoft Design .toolbox : [арх. 15.05.2013]. — Microsoft.com. — Дата звернення: 08.09.2011.
  7. ↑ UX guidelines for Windows Store Apps. Архів оригіналу за 30 листопада 2012. Процитовано 7 серпня 2020.
  8. ↑ “Zegoe”, the new Zune font. : [арх. 25.05.2013] / Long Zheng // istartedsomething.com. — . — Дата звернення: 15.10.2012.
  9. ↑ Zune HD review : [арх. 25.05.2013] / Joshua Topolsky. — AOL, 2009. — 17 September. — Дата звернення: 19.02.2013.
  10. ↑ Zune HD 64GB Review : [арх. 25.05.2013] // CNET. — CBS Interactive, 2009. — 17 September. — Дата звернення: 19.02.2013.
  11. ↑ Windows Phone wins IDEA 2011 – people’s choice design award : [арх. 28.05.2013] / Tom Warren // WinRumors. — 2011. — 18 September. — Дата звернення: 19.02.2013.
  12. ↑ Windows Phone 7 : [арх. 28.05.2013] // Industrial Designers Society of America. — 2011. — 8 June. — Дата звернення: 03.11.2011.
  13. ↑ Windows 8 on the desktop—an awkward hybrid : [арх. 25.05.2013] / Peter Bright // Ars Technica. — Condé Nast Digital, 2012. — 25 April. — Дата звернення: 19.02.2013.
  14. ↑ Microsoft вынуждена сменить название интерфейса : [арх. 09.03.2013]. — BBC, 2012. — 3 August. — Дата звернення: 19.02.2013.
  15. ↑ Microsoft to drop 'Metro' name for Windows 8 : [арх. 26.05.2013]. — BBC News. — Дата звернення: 26.05.2013.
  16. ↑ Microsoft officlally renaming Metro UI to Modern UI : [арх. 26.05.2013]. — The Register, 2012. — 1 August. — Дата звернення: 26.05.2013.
  17. ↑ Make great Windows Store apps : [арх. 26.05.2013]. — MSDN. — Дата звернення: 17.09.2012.
  18. ↑ Design case study: iPad to Windows Store app (англ.). MSDN. Архів оригіналу за 26 травня 2013. Процитовано 1 листопада 2012.
  19. ↑ Guidelines for typography : [арх. 26.05.2013]. — MSDN. — Дата звернення: 01.11.2012.
  20. ↑ Roadmap for Windows Store apps using DirectX and C++ : [арх. 26.05.2013]. — MSDN. — Дата звернення: 01.11.2012.
  21. ↑ The Microsoft design language : [арх. 26.05.2013]. — Channel 9 (Microsoft). — Дата звернення: 01.11.2012.
  22. ↑ Microsoft Design Language: The newest official way to refer to 'Metro' : [арх. 26.05.2013] / Mary Jo Foley. — Дата звернення: 01.11.2012.

Посилання

[ред. | ред. код]
Отримано з https://uk.wikipedia.org/w/index.php?title=Metro_(інтерфейс)&oldid=42833836