Podstawy interfejsu Windows 8 - Tworzenie wspaniałych aplikacji  

Tłumaczenie na podstawie Making great Metro style apps: Aurelia Tokarek

[Ta dokumentacja jest wstępna i może ulec zmianie.]

Opublikowano: 2012-04-17

Aplikacje pod nowy interfejs Windows 8 są centralnym punktem doświadczenia użytkownika (ang. user experience) w systemie Windows 8 Consumer Preview. Posiadają wspólny zestaw cech, zapewniających spójny, elegancki wygląd, potęgujący wrażenia.

W tym momencie mogłoby paść pytanie: „OK., więc czym są aplikacje pod nowy interfejs Windows 8 i czym różnią się od aplikacji desktopowych?” Aplikacje Windows 8 są angażujące, bez zbędnych dodatków, wypełniają cały ekran, więc lepiej koncentrują uwagę użytkowników. Aplikacje te współpracują ze sobą, ułatwiając wyszukiwanie, udostępnianie i wysyłanie zawartości pomiędzy nimi. Użytkownik, podłączony do Internetu, jest na bieżąco, aplikacje pobierają najnowszą zawartość. Po pobraniu, aplikacja jest połączona z kontem użytkownika, dzięki czemu można z niej korzystać na dowolnym urządzaniu z systemem Windows.

Możesz tworzyć aplikacje za pomocą Tobie najlepiej znanego języka. Do wyboru masz: JavaScript, C#, Visual Basic oraz C++. Windows Store oferuje do tego wszystko, czego potrzebujesz, aby sprzedać Twoje aplikacje i wszystko, co potrzebne użytkownikom do ich instalacji.

Wykorzystanie projektu

Zawartość jest sercem aplikacji, a oddanie treści nieograniczonej ramkami jest podstawą projektowania aplikacji. Wszystko inne jest dodatkiem, umożliwiającym interakcję z treścią.

Prezentacja zawartości

Zaprojektuj interfejs użytkownika swojej aplikacji, aby pokazać zawartość.

Układ – czytelny i otwarty

• minimalizuj rozpraszanie uwagi, pomóż użytkownikom zanurzyć się w treść, pozostawiając tylko najbardziej istotne elementy na ekranie,
• daj „pooddychać” treści poprzez usunięcie zbędnych linii, pól oraz niepotrzebnych efektów graficznych, takich jak rozmycie i gradient. Użyj otwartej przestrzeni do kształtowania treści,
• ogranicz zbędne funkcje, będące stale na ekranie, takie jak zakładki. Niech użytkownicy koncentrują się na aktualnej treści.

Hierarchia – czytelna

Język projektowania aplikacji pod interfejs Windows 8 opiera się na czystej, pięknej typografii, pomagającej użytkownikowi zrozumieć hierarchię zawartości. Użyj typografii zamiast linii i pól, ułatwiając ustalenie struktury hierarchii:

• użyj rozmiaru, grubości, koloru w tekście, konsekwentnie, do przekazywania informacji na elemencie znaczącej zawartości. Zbiór możliwości powinien być niewielki, tak, aby użytkownicy mogli łatwo zobaczyć, w jaki sposób zawartość pasuje do siebie w całej hierarchii. Patrz Guidelines and checklist for text and typography,
• użyj domyślnego arkusza stylów, aby uzyskać predefiniowany szablon typu dla tekstu.

Styl interfejsu – zarys

Kiedy ludzie skupiają się na treści, skład zawartości tworzy tożsamość aplikacji. Znajomy zarys pomaga użytkownikom instynktownie rozpoznać Twoją aplikację w Windows 8 (w przeciwieństwie do np. strony internetowej):

• dopasuj się do stylu interfejsu Windows 8, aby zapewnić poczucie swojskości i zaufania,
• rozpocznij z szablonem projektów Visual Studio Grid lub Split, aby zobaczyć układ. Zobacz wytyczne Visual Studio JavaScript project templates for Metro style apps.

Interakcja z zawartością

Użyj interakcji, które dają użytkownikom kontrolę i pewność.

Bezpośrednie interakcje

Najbardziej naturalnym sposobem, by ludzie mogli wchodzić w interakcje z zawartością jest bezpośredniość:

• jeśli jest to możliwe, pozwól zakończyć działania przez bezpośrednie manipulowanie treścią, a nie pośrednią manipulację. Na przykład, zamiast dodawać przyciski na ekranie, daj użytkownikowi możliwość dotknięcia elementu, aby wyświetlić szczegóły przeciągnięcia pionowego, przenieść pomniejszenia, czy zobaczyć pełny kontekst,
• wykorzystaj szybki i płynny zoom semantyczny do nawigacji po długiej liście zawartości.

Wykorzystaj krawędzie

Niektóre akcje nie mogą być osiągnięte poprzez bezpośrednią manipulację. Dla nich pokaż polecenia kontekstowo, tylko wówczas, gdy są potrzebne, aby uniknąć zaśmiecania. Wykorzystaj krawędzie ekranu, aby użytkownicy mogli znaleźć polecenia:

• umieść polecenia na pasku aplikacji (App bar). Są one wywoływane, po przeciągnięciu palcem od dolnej lub górnej krawędzi, oraz chowane po zakończeniu ich działania,
• wykorzystaj charms, które mogą być wywoływane na żądanie poprzez przeciągnięcie palca od prawej krawędzi do wyszukania, udostępniania, obsługi urządzeń lub ustawień,
• unikaj umieszczania poleceń na ekranie oraz unikaj wyświetlania zduplikowanych punktów, które są dostępne w charms,
• projektuj dla wygody i umieszczaj często używane elementy w pobliżu krawędzi.

Więcej informacji: Commanding design.

Bądź szybki i płynny

Niech Twoja aplikacja odpowiada na akcje użytkownika szybko, z odpowiednio dobraną energią.

Celowe animacje

Ruch jest podstawowym elementem języka projektowania pod nowy interfejs Windows 8. Dobrze opracowane animacje wnoszą życie do aplikacji i zwiększają odczucia:

• użyj animacji wizualnej, aby opowiedzieć historię. Wszystko przychodzi skądś i odchodzi gdzieś w czytelnym interfejsie,
• wykorzystaj bibliotekę animacji, zestaw animacji, w zależności od scenariusza, które są zaprojektowane do przekazywania informacji. Znane animacje wzmacniają koncepcję, użytkownik wie, czego może się spodziewać. Zobacz: Animating your UI.

Zaprojektowane dla dotyku

Aplikacje zorientowane są głównie na dotyk. Mobilizują one ręce i palce. Są komfortowe i ergonomiczne:

• poznaj język dotykowy Windows 8 i używaj gestów konsekwentnie, i w sposób naturalny. Więcej informacji: Touch interaction design,
• pozwól podążać zawartości za Twoim palcem. Wyjdź poza dotyk i wykorzystaj przesuwanie, np. zoom semantyczny, aby Twoi użytkownicy mogli szybko nawigować i współdziałać z zawartością,
• zapewnij natychmiastową informację zwrotną, aby użytkownicy wiedzieli, czy osiągnęli zamierzony cel. Zapewnij możliwość cofnięcia, zatwierdzaj tylko po akceptacji użytkownika i zachęcaj do poszukiwań,
• nie buduj oddzielnych interakcji dla dotyku i myszy.

Wbudowany system kontrolek

Wykorzystaj wbudowane kontrolki, aby uzyskać płynne, piękne, zgodne animacje i zoptymalizowany dotyk. Dla przykładu:

• wybór poprzez przesunięcie palca jest wbudowany w kontrolkę ListView. Może być rozszerzony przez zoom semantyczny, aby umożliwić użytkownikom szybką i płynną nawigację przy długich listach. Zobacz zalecenia dla kontrolki ListView,
• kontrolka FlipView umożliwia użytkownikom przeciąganie, aby przenosić się między elementami. Posiada wbudowane animacje,
• przyciski: toggle, chceckbox, radio button, rating i slider zapewniają zwrotną informację wizualną i umożliwiają anulowanie akcji.

Więcej informacji: UX guidelines for Metro style apps.

Piękne skalowanie oraz Snap

Przygotuj wspaniały wygląd Twojej aplikacji na każdym urządzeniu, niezależnie od rozmiaru i rozdzielczości.

Skalowanie do wielu ekranów

Twoja aplikacja ma szanse być używana na setkach milionów komputerów z systemem Windows 8. Te komputery będą miały szeroki zakres wielkości ekranu i rozdzielczości, od <10’’ tabletów do 27’’ monitorów:

• najlepiej, wykorzystaj ekran przy użyciu płynnego układu wbudowanego w platformę. Na przykład, kontrolka ListView automatycznie dopasuje swoją zawartość na podstawie dostępnej przestrzeni,
• platforma umożliwia automatyczne skalowanie w oparciu o wielkość ekranu urządzenia i rozdzielczość. Umożliwia dodanie trzech rozmiarów plików grafiki rastrowej lub użycie skalowalnej grafiki wektorowej, aby Twoja aplikacja zawsze była wyraźna i elegancka. Więcej informacji znajdziesz w Guidelines for scaling to screens i Guidelines for scaling to pixel density,
• użyj symulatora w Microsoft Visual Studio, aby zobaczyć, jak Twoja aplikacja będzie wyglądała na różnych urządzeniach.

Projektowanie dla różnych widoków

Wielozadaniowość jest naturalna. Naturalne jest więc, że dwie aplikacje mogą działać obok siebie za pomocą przypięcia (ang. Snap). Wszystkie aplikacje muszą być dopasowane do widoku Snap, pozwalając tym samym utrzymać aplikacje na ekranie dłużej:

• zaprojektuj funkcjonalny widok Snap Twojej aplikacji. Zachowaj kontekst użytkownika, kiedy przełącza się pomiędzy widokami,
• po przypięciu, szerokość aplikacji jest ustalona na 320 pikseli, a wysokość jest zmienna. Przesuwaj zawartość aplikacji pionowo, aby uniknąć konfliktu z krawędziami,
• inne aplikacje także mogą znajdować się w tym stanie, gdy Twoja aplikacja jest na ekranie. Zaprojektuj swoją aplikację, aby płynnie wyświetlała informacje od minimalnej szerokości 1024 pikseli.

Więcej informacji na Guidelines for snapped and fill views.

Użyj właściwego kontraktu

Kontrakty są klejem łączącym aplikacje w nowym interfejsie windows 8 z systemowym interfejsem użytkownika. Dwie aplikacje, które zaimplementowały te same kontrakty, mogą ze sobą współpracować, umożliwiając złożone scenariusze:

• dla niektórych, najbardziej powszechnych kontraktów, takich jak: wyszukiwanie, współdzielenie i wybór plików, możesz wykorzystać odpowiednie szablony z Visual Studio,
• unikaj tworzenia alternatywnego interfejsu, który może zmylić użytkownika,
• zobacz kompletną listę kontraktów aplikacji App contracts and extensions.

Udostępnij

Kontrakt tego typu pozwala użytkownikom wymieniać się danymi z jednej aplikacji do innej aplikacji. Jedna aplikacja jest źródłem, które coś udostępnia, druga zaś – aplikacja docelowa odbiera udostępnioną zawartość, za pomocą zestawu wspólnych formatów danych:

• każda aplikacja powinna być źródłem udostępniania i implementować możliwie najszerszy zestaw formatów,
• aplikacje, które publikują, przechowują lub przekształcają współdzielone dane, są dobrymi kandydatami jako cel udostępniania. Przykłady obejmują komunikację, sieci społecznościowe i aplikacje połączone z urządzeniami.

Zobacz również Guidelines and checklist for sharing content.

Wyszukaj

Kontrakty wyszukiwania pozwalają przeszukać zawartość aplikacji z dowolnego miejsca w systemie Windows. Wyniki są dostarczane przez aplikacje i wyświetlane w interfejsie aplikacji:

• użyj elementu charms do wyszukiwania w aplikacji, szczególnie kiedy kontent wyszukiwania jest współdzielony przez całą aplikację (np. produkty w aplikacji zakupowej). Nie wykorzystuj systemowego wyszukiwania, kiedy jest ono ograniczone do aktualnego widoku np. wyszukanie słowa w dokumencie,
• zapewniaj podpowiedzi wyszukiwania , aby pomóc znaleźć coś szybko,
• zapewnij sposób nawigacji pomiędzy stroną z wynikami wyszukania a interfejsem aplikacji.

Patrz również Guidelines and checklist for search.

Selektor plików

Kontrakty selektora plików pozwalają użytkownikom na dostęp do treści aplikacji z innej aplikacji. Po wywołaniu wyboru pliku, użytkownicy mogą przeglądać i wybierać pliki, zarówno z lokalnego pojemnika jak i innej aplikacji, która wspiera kontrakt wyboru pliku:

• wykorzystaj ten kontrakt w Twojej aplikacji, jeśli przechowuje ona pliki mogące być przydatnymi dla użytkowników z innego kontekstu,
• wykorzystaj kontrolkę ListView, aby uzyskać wbudowaną płynność i wybór.

Patrz również Guidelines and checklist for file pickers

Zainwestuj w kafelki

Kafelek to drzwi do aplikacji. Umieszczony na ekranie startowym, jest rozszerzeniem aplikacji i może dostarczać informacje w sposób bardziej osobisty i interesujący niż tradycyjne ikony. Zainwestuj w projekt kafelka, a wciągniesz użytkowników do swojej aplikacji:

• dostosowuj treść wyświetlaną na kafelku do użytkownika i zachowaj jego świeżość, aktualizując ją, jeśli zmieni się zawartość aplikacji. Istnieje szeroki wybór wstępnie zaprojektowanych szablonów kafelków. Wybierz najlepiej pasujący do Twojej aplikacji,
• umieszczaj zawartość, która żyje na stronie głównej aplikacji, aby użytkownicy mogli łatwo ją znaleźć po uruchomieniu aplikacji,
• użyj drugorzędnych kafelków, aby promować ciekawe podsekcje treści w Twojej aplikacji. Patrz Guidelines and checklist for secondary tiles.

Patrz również Guidelines and checklist for tiles.

Twoja aplikacja ma być połączona i pełna życia

Zapewnianie nowych treści, poprzez żywe kafelki oraz powiadomienia, sprawia, że ludzie czują się podłączeni do aplikacji. Zarówno żywe kafelki jak i powiadomienia korzystają z tej samej infrastruktury i mogą być aktualizowane za pomocą Windows Push Notification Service, lokalnie, podczas gdy aplikacja jest uruchomiona lub w czasie zaplanowanym wcześniej.

 

Żywe kafelki

Wyświetlaj w sposób ciągły dynamiczne, istotne i spersonalizowane treści na kafelku. Świeża zawartość kafelka daje użytkownikom powód, aby umieścić kafelek na ważnym miejscu ekranu startowego:

• kafelki mogą pokazywać do pięciu ostatnich aktualizacji. Na przykład, żywe kafelki aplikacji informacyjnej mogą wyświetlać kilka wiadomości każdego dnia,
• zawartość pokazanych bieżących aktualizacji powinna być dostępna na stronie głównej aplikacji. Usuń nieaktualne powiadomienia, jeśli już są nieistotne lub niedostępne na stronie głównej,
• należy używać identyfikatorów, pokazujących proste, numeryczne lub ikonowe informacje.

 

Powiadomienia

Aplikacje mogą korzystać z powiadomień, aby krótko pokazać informację, która musi być dostępna z dowolnego miejsca w systemie Windows:

• większość aplikacji powinna być cicha. Użytkownik powinien mieć możliwość włączenia bądź wyłączenia powiadomień,
• użytkownik powinien mieć kontrolę nad powiadomieniami. Powinny się pokazywać tylko wtedy, kiedy naprawdę są istotne, krytyczne. Jeśli notyfikacje są krytyczne pokaż je na kafelku,
• możliwe jest połączenie powiadomień, jeśli istnieje wiele aktualizacji występujących w krótkim czasie,
• nie używaj powiadomień, aby pokazać błędy lub ostrzeżenia. Błędy powinny pojawiać się w wysuwanych oknach i oknach dialogowych.

Zobacz również Guidelines and checklist for toast notifications.

Wędrówka w chmury

Roaming

Przesyłając dane, utwórz spójne wrażenie pomiędzy urządzeniami, umożliwiając użytkownikowi rozpoczęcie zadania tam, gdzie zostało przerwane:

• wykorzystaj konta Microsoft oraz pojemniki w chmurze do przechowywania i przesyłania ustawień, stanów oraz małej ilości treści użytkownika,
• przykłady ustawień aplikacji, które warto przesyłać:
  —   listę miast i wybór jednostek Celsjusza/Fahrenheita w aplikacji pogoda,
  —   kanały RSS subskrybowane przez użytkownika,
  —   ulubione zespoły w aplikacji sportowej,
• przykłady stanów aplikacji, które warto przesyłać:
  —   ostatni punkt kontrolny lub ruch w grze,
  —   ostatnio odtworzony utwór.

Przeczytaj wskazówki na Guidelines for roaming application data.

Zarządzanie cyklem życia aplikacji

Zapewnij ciągły dostęp poprzez zachowanie stanu, bez konieczności wyraźnego zapisu przez użytkownika:

• wznawiaj aplikację po jej opuszczeniu, a nie uruchamiaj od nowa. Użytkownik powinien mieć możliwość przełączania pomiędzy aplikacjami i powrotu do koszyka zakupów, nieskończonej wiadomości e-mail, czy gry, której przecież nie zakończył,
• startowanie aplikacji od nowa, jeśli przez dłuższy czas nie była używana, a poprzedni kontekst nie ma już znaczenia. Na przykład dla aplikacji z wiadomościami prasowymi, jeżeli była ona przez długi czas nieużywana, to poprzednio otwarte artykuły stały się już przestarzałe,
• nie należy zamykać aplikacji, gdy zostanie usunięta poza ekran. Pozostaw systemowi zarządzanie życiem aplikacji, aby użytkownicy mogli powrócić do aplikacji tak szybko, jak to tylko możliwe. Nie umożliwiaj użytkownikowi możliwości zamknięcia Twojej aplikacji.

Przeczytaj również Guidelines for app suspend and resume.

Zapamiętaj podstawowe zasady projektowania aplikacji

Skorzystaj z tych pomocnych zasad w projekcie. Więcej informacji Metro style design principles.

Pokaż dumę rzemiosła

• poświęć czas i energię dla małych rzeczy, które wbrew pozorom są postrzegane przez wielu,
• projektuj aplikacje kompletne i eleganckie.

Zrób więcej za mniej

• niech użytkownicy będą zanurzeni w tym, co kochają, a sami zbadają resztę,
• zaprojektuj czyste i celowe doświadczenie, pozostawiając najbardziej istotne elementy na ekranie.

Bądź szybki i płynny

• niech użytkownik kontaktuje się bezpośrednio z zawartością i odpowiada na akcje szybko, z odpowiednią energią,
• stwórz poczucie ciągłości, opowiedz historię używając stosownego ruchu.

Bądź prawdziwie cyfrowy

• wykorzystaj w pełni nośnik cyfrowy. Usuń fizyczne granice. Twórz rzeczy wydajniejsze i łatwiejsze niż w rzeczywistości,
• wykorzystaj fakt, że jesteśmy pikselami na ekranie. Projektuj w wyrazistych, nasyconych kolorach, obrazy, które wykraczają poza granice realnego, materialnego świata.

Wygraj jako jeden

• współpracuj z innymi aplikacjami, sprzętem i systemem,
• skorzystaj z tego, co ludzie już wiedzą, zapewniając tym samym znajomość kontroli i zaufania.

Kolejne kroki

1. Getting started with Metro style apps - pobierz narzędzia i przykłady. Wykonaj pierwszą aplikację.
2. Planning Metro style apps - zdecyduj, co chcesz utworzyć i jak korzystać z platformy Windows.
3. Designing UX for apps - dowiedz się, jak wykorzystać zasady projektowania.
4. Developing Metro style apps (JavaScript) - twórz aplikacje od podstaw.
5. Debugging and testing Windows Metro style apps - użyj wbudowanych narzędzi w Visual Studio do testowania i debugowania aplikacji.
6. Packaging your app using Visual Studio - przygotuj swoją aplikację do publikacji w Windows Store.

 

---