Azərbaycanca AzərbaycancaБеларускі БеларускіDansk DanskDeutsch DeutschEspañola EspañolaFrançais FrançaisIndonesia IndonesiaItaliana Italiana日本語 日本語Қазақ ҚазақLietuvos LietuvosNederlands NederlandsPortuguês PortuguêsРусский Русскийසිංහල සිංහලแบบไทย แบบไทยTürkçe TürkçeУкраїнська Українська中國人 中國人United State United StateAfrikaans Afrikaans
Підтримка
www.wikidata.uk-ua.nina.az

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

Metro UI

Metro UI

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

image
Логотип Metro

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

Історія

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

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

Принципи

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

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

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

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

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

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

Шрифт

image
Нова версія використовуваного в типографіці Metro шрифта Segoe UI (внизу), створена для Windows 8.
  • Як основний шрифт використовуються шрифти з сімейства шрифтів Segoe, розробленого Стівом Меттесоном з Agfa Monotype та ліцензованого Microsoft. Для Zune Microsoft створила спеціальну версію під назвою Zegoe UI, а для 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 продовжує свій ривок до великої, великої типографіки тут, забезпечуючи складний, акуратно розроблений макет, який майже настільки ж функціональний, наскільки привабливий». CNET похвалив Metro, кажучи, що «він трохи сміливіший і неформальний, ніж жорсткі, стерильні „сітки“ з значків і схоже на картотеку меню iPhone і iPod touch». Товариство промислових дизайнерів Америки (англ. The Industrial Designers Society of America, IDEA) нагородило Windows Phone, яка використовує Metro, золотою нагородою «Народний вибір дизайну», а також премією «Кращий на виставці»:

Інновації тут — плавна взаємодія і зосередженість на даних, без використання умовностей традиційного користувацького інтерфейсу — вікон і рамок. Дані стають візуальними елементами і елементами управління. Прості жести і переходи дозволяють глибше проникати в зміст. По-справжньому елегантний і унікальний досвід взаємодії.
Оригінальний текст (англ.)
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

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

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

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

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

Для позначення створених в стилі 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. . Архів оригіналу за 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. — , 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 // . — , 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.

Посилання

  • Создание макета приложения // docs.microsoft.com. — 2015. — 12 декабря.
  • Windows Phone System Design — Codename Metro [Архівовано 27 листопада 2014 у Library of Congress](англ.)
  • Шрифт в интерфейсе Windows 8. История и примеры [ 26 вересня 2020 у Wayback Machine.]
  • From Transportation to Pixels / Mike Kruzeniski // blogs.windows.com. — 2011. — 17 February. — Дата звернення: 21.09.2014. (Повідомлення в офіційному блозі Windows про подібний дизайн.)

Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет

Metro vnutrishnya kodova nazva hudozhnogo stilyu oformlennya grafichnogo interfejsu koristuvacha produkciyi kompaniyi Microsoft yakij vikoristovuyetsya z drugoyi polovini 2000 h rokiv Harakterni osoblivosti oriyentaciya na tipografiku i akcent na tekst grafichnij minimalizm plavna animaciya odin z vidminnih elementiv stilyu ploski pryamokutni plitki Logotip Metro Spochatku buv rozroblenij dlya vikoristannya v Windows Phone takozh vikoristovuvavsya pri stvorenni koristuvalnickogo interfejsu v enciklopediyi Encarta i MSN 2 0 a takozh Zune i Windows Media Center Piznishe na osnovi Metro buv pobudovanij interfejs Windows Phone vebsajtu Microsoft Xbox 360 Windows 8 Xbox One Windows 10 chastkovo IstoriyaZa vlasnoyu versiyeyu dizajneriv Microsoft vvazhayetsya sho prototipom hudozhnogo rishennya posluzhili znaki yaki chasto zustrichayutsya v sistemah gromadskogo transportu napriklad roztashovani v sistemi perevezen King County Metro yaka obslugovuye veliku oblast Sietla de roztashovana shtab kvartira Microsoft Ranni elementi stilyu Metro zustrichayutsya v Windows Media Center dlya Windows XP yakij vikoristovuye tekst yak osnovnu formu navigaciyi Cej interfejs buv perenesenij v bilsh pizni versiyi Media Center U 2006 roci interfejs Zune buv onovlenij z vikoristannyam cih principiv Dizajneri Microsoft virishili pereproektuvati interfejs z velikim uporom na chistu tipografiku Ci principi i novij koristuvalnickij interfejs Zune buli vikoristani v Windows Phone bagato virishen yakoyi buli vikoristani v Windows 8 Ploski kolorovi zhivi plitki buli vvedeni v Metro na rannih stadiyah rozrobki Windows Phone Microsoft rozpochala integraciyu cih elementiv u inshi svoyi produkti z pryamim vplivom pomitnim v bilsh novih versiyah Windows Live Messenger i Windows 8 PrincipiPrincipi proyektuvannya movi dizajnu Microsoft za ekranu startu v Windows 8 ta Xbox One vgori ta Windows 10 vnizu sho takozh vikoristovuyetsya v Windows Store ta Plitki predstavlyayut atomni odinici informaciyi Stil Metro zasnovanij na principah dizajnu shvejcarskogo stilyu Osnovnimi principami Metro ye akcent na garnij tipografici i velikij tekst yakij vidrazu kidayetsya v ochi Microsoft nazivaye Metro prostim chistim suchasnim a takozh onovlennyam porivnyano z zasnovanimi na znachkah interfejsami Windows Android i iOS Microsoft rozrobila Metro specialno dlya zmicnennya grupi zagalnih zavdan dlya priskorennya vikoristannya Ce dosyagayetsya za rahunok viklyuchennya zajvoyi grafiki i zamist cogo opori na faktichnij zmist dlya funkcionuvannya yak osnovnogo interfejsu Veliku rol vidigraye animaciya Microsoft rekomenduye plavni perehodi i vzayemodiyu z koristuvachem na osnovi realnih ruhiv takih yak natiskannya abo peremishennya Ce stvoryuye u koristuvacha vrazhennya zhivogo i chujnogo interfejsu z dodanim vidchuttyam glibini Microsoft sklala vnutrishnij spisok principiv yaki vvazhayutsya osnovoyu Metro Priblizno odnochasno z oficijnim vipuskom Windows 8 26 zhovtnya 2012 roku oskilki vse bilshe rozrobnikiv i partneriv Microsoft pochali pracyuvati nad stvorennyam novih dodatkiv v stili Metro po cij temi bulo stvoreno bagato vebsajtiv z resursami v tomu chisli osoblivi pravila rozrobki grafichnih interfejsiv dlya Windows Store ShriftNova versiya vikoristovuvanogo v tipografici Metro shrifta Segoe UI vnizu stvorena dlya Windows 8 Yak osnovnij shrift vikoristovuyutsya shrifti z simejstva shriftiv Segoe rozroblenogo Stivom Mettesonom z Agfa Monotype ta licenzovanogo Microsoft Dlya Zune Microsoft stvorila specialnu versiyu pid nazvoyu Zegoe UI a dlya Windows Phone simejstvo shriftiv Segoe WP Dlya Windows 8 takozh bula stvorena specialna versiya z tiyeyu zh nazvoyu Segoe UI Vsi ci shrifti v osnovnomu rozriznyayutsya lishe neznachnimi detalyami Najbilsh ochevidni vidminnosti mizh Segoe UI i Segoe WP vidno v cifrovih simvolah Versiya Segoe UI yaka vikoristovuyetsya v Windows 8 shozha na Segoe WP Simvoli z pomitnimi drukarskimi zminami v cij versiyi vklyuchayut 1 2 4 5 7 8 a takozh I i Q OcinkiRannya reakciya na Metro bula v cilomu pozitivnoyu V oglyadi Zune HD Engadget skazav Microsoft prodovzhuye svij rivok do velikoyi velikoyi tipografiki tut zabezpechuyuchi skladnij akuratno rozroblenij maket yakij majzhe nastilki zh funkcionalnij naskilki privablivij CNET pohvaliv Metro kazhuchi sho vin trohi smilivishij i neformalnij nizh zhorstki sterilni sitki z znachkiv i shozhe na kartoteku menyu iPhone i iPod touch Tovaristvo promislovih dizajneriv Ameriki angl The Industrial Designers Society of America IDEA nagorodilo Windows Phone yaka vikoristovuye Metro zolotoyu nagorodoyu Narodnij vibir dizajnu a takozh premiyeyu Krashij na vistavci Innovaciyi tut plavna vzayemodiya i zoseredzhenist na danih bez vikoristannya umovnostej tradicijnogo koristuvackogo interfejsu vikon i ramok Dani stayut vizualnimi elementami i elementami upravlinnya Prosti zhesti i perehodi dozvolyayut glibshe pronikati v zmist Po spravzhnomu elegantnij i unikalnij dosvid vzayemodiyi Originalnij tekst angl 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 Izabel Ankona konsultant po koristuvackomu dosvidu v IDEA 25 serpnya 2012 roku Piter Brajt angl Peter Bright iz zrobiv oglyad poperednoyi versiyi Windows 8 prisvyativshi pershu chastinu oglyadu zistavlennyu ekranu Pusk Windows 8 pobudovanogo v stili Metro i jogo poperednoyi versiyi v Windows 7 i bilsh rannih Perebirayuchi yih plyusi i minusi Piter Brajt prijshov do visnovku sho ekran Pusk hocha j ne pozbavlenij deyakih problem ye yavnim peremozhcem Vidmova vid vikoristannya nazvi MetroU serpni 2012 roku pochali hoditi chutki sho odin z rozdribnih partneriv Microsoft nimecka kompaniya Metro AG pogrozhuvala sudovim pozovom proti Microsoft za porushennya prav na tovarnij znak Metro Rozrobnikam i spivrobitnikam Microsoft bula rozislana pam yatka yaka zaklikala vidmovitisya vid vikoristannya termina Metro u zv yazku z rezultatami peregovoriv z vazhlivim yevropejskim partnerom Microsoft timchasovo nazivaye movu dizajnu Modern UI 9 serpnya 2012 z yasuvalosya sho Microsoft planuye vikoristovuvati termin Windows 8 shob zaminiti Metro u spozhivchih materialah a termin Modern UI priznachenij dlya rozrobnikiv yaki planuyut stvoryuvati programne zabezpechennya na osnovi novih principiv dizajnu Z veresnya 2012 roku v dokumentaciyi MSDN vikoristovuyetsya termin mova dizajnu Microsoft angl Microsoft design language koli jdetsya pro movu dizajnu Krim togo na konferenciyi rozrobnikiv Microsoft Build 2012 kompaniya takozh vikoristovuye nazvu mova dizajnu Microsoft Dlya poznachennya stvorenih v stili Metro dodatkiv dlya Windows 8 vzhivayutsya termini dodatok v stili Windows 8 angl Windows 8 style app i dodatok Magazinu Windows angl Windows Store app Div takozhWindows Aero Windows RT Windows Runtime Universalnij dodatok WindowsPrimitkiWindows Phone 7 Series UI Design amp Interaction Guide arh 15 05 2013 2010 18 March Data zvernennya 09 10 2010 Metro Design Language of Windows Phone 7 arh 24 05 2013 microsoft com Data zvernennya 05 10 2012 Metro Blackboard arh 24 05 2013 Browse Blackboard Home Businessinsider com 2011 25 April Data zvernennya 03 11 2011 Windows Phone UI and Design Language arh 24 05 2013 Data zvernennya 09 10 2010 From Transportation to Pixels Windows team blog 2011 16 lyutogo Metro Design Language of Windows Phone 7 Microsoft Design toolbox arh 15 05 2013 Microsoft com Data zvernennya 08 09 2011 Arhiv originalu za 30 listopada 2012 Procitovano 7 serpnya 2020 Zegoe the new Zune font arh 25 05 2013 Long Zheng istartedsomething com Data zvernennya 15 10 2012 Zune HD review arh 25 05 2013 Joshua Topolsky AOL 2009 17 September Data zvernennya 19 02 2013 Zune HD 64GB Review arh 25 05 2013 CNET 2009 17 September Data zvernennya 19 02 2013 Windows Phone wins IDEA 2011 people s choice design award arh 28 05 2013 Tom Warren WinRumors 2011 18 September Data zvernennya 19 02 2013 Windows Phone 7 arh 28 05 2013 Industrial Designers Society of America 2011 8 June Data zvernennya 03 11 2011 Windows 8 on the desktop an awkward hybrid arh 25 05 2013 Peter Bright 2012 25 April Data zvernennya 19 02 2013 Microsoft vynuzhdena smenit nazvanie interfejsa arh 09 03 2013 BBC 2012 3 August Data zvernennya 19 02 2013 Microsoft to drop Metro name for Windows 8 arh 26 05 2013 BBC News Data zvernennya 26 05 2013 Microsoft officlally renaming Metro UI to Modern UI arh 26 05 2013 The Register 2012 1 August Data zvernennya 26 05 2013 Make great Windows Store apps arh 26 05 2013 MSDN Data zvernennya 17 09 2012 Design case study iPad to Windows Store app angl MSDN Arhiv originalu za 26 travnya 2013 Procitovano 1 listopada 2012 Guidelines for typography arh 26 05 2013 MSDN Data zvernennya 01 11 2012 Roadmap for Windows Store apps using DirectX and C arh 26 05 2013 MSDN Data zvernennya 01 11 2012 The Microsoft design language arh 26 05 2013 Channel 9 Microsoft Data zvernennya 01 11 2012 Microsoft Design Language The newest official way to refer to Metro arh 26 05 2013 Mary Jo Foley Data zvernennya 01 11 2012 PosilannyaSozdanie maketa prilozheniya docs microsoft com 2015 12 dekabrya Windows Phone System Design Codename Metro Arhivovano 27 listopada 2014 u Library of Congress angl Shrift v interfejse Windows 8 Istoriya i primery 26 veresnya 2020 u Wayback Machine From Transportation to Pixels Mike Kruzeniski blogs windows com 2011 17 February Data zvernennya 21 09 2014 Povidomlennya v oficijnomu blozi Windows pro podibnij dizajn

Дата публікації:
Топ