• Artykuł

     

Jak konsumenci widzą Twoją aplikację w Windows Store - Obrazy aplikacji  Udostępnij na: Facebook

Tłumaczenie na podstawie App images: Natalia Łapińska

Opublikowano: 2012-07-30

W tym odcinku przedstawione zostały różne rodzaje obrazów, których potrzebuje Twoja aplikacja. Poznasz sposoby ich efektywnego użycia do promocji Twojej aplikacji.

W celu zapewnienia lepszego doświadczenia na komputerach o różnej rozdzielczości ekranu, należy załączyć skalowalne wersje obrazów Twojej aplikacji. Zauważ, że skalowalne obrazy powinny zostać zaprojektowane zgodnie z określonym rozmiarem, a nie w wyniku zmiany rozmiaru oryginalnego obrazu.

Ten artykuł opisuje obrazy aplikacji. Wymagane obrazy zaznaczono pogrubieniem.

Nazwa obrazu Wymagane 80% rozmiaru 100% rozmiaru 140% rozmiaru 180% rozmiaru Zdefiniowane w
Store logo tylko 100% obrazu nie dotyczy 50x50 70x70 90x90 Package/Properties/Logo
Logo tylko 100% obrazu 120x120 150x150 210x210 270x270 Package/Applications/Application/VisualElements/ @Logo
Small logo tylko 100% obrazu 24x24 30x30 42x42 54x54 Package/Applications/Application/VisualElements/ @SmallLogo
Splash screen tylko 100% obrazu nie dotyczy 620x300 868x420 1116x540 Package/Applications/Application/VisualElements/ SplashScreen
Wide logo nie wymagane 248x120 310x150 434x210 558x270 Package/Applications/Application/VisualElements/ DefaultTile/@WideLogo
Badge logo nie wymagane nie dotyczy 24x24 33x33 43x43 Package/Applications/Application/VisualElements/ LockScreen

Opisano również poniższe obrazy, używane przez Windows Store:

  • zrzuty ekranu - wymagany jest jeden zrzut ekranu, ale każda aplikacja może mieć do 8 zrzutów ekranu. Obrazy zrzutów ekranu muszą mieć wymiary 1366x768 lub większe w orientacji poziomej albo co najmniej 768x1366 w orientacji pionowej, jak również rozmiar pliku nieprzekraczający 2MB,
  • obrazy promocyjne - obrazy promocyjne nie są wymagane, chociaż możesz zapewnić do 4 takich obrazów. Jeśli będziesz załączał jakiekolwiek obrazy, przynajmniej jeden z nich powinien być w rozmiarze 414x180 pikseli. Obrazy promocyjne mogą mieć również wymiary: 414x468, 558x756 i 846x468.

Wymagane obrazy dla Twojej aplikacji

Przy tworzeniu aplikacji w Windows Strore musi ona zawierać poniższe obrazy:

  • store logo,
  • logo,
  • small logo,
  • splash screen.

Store logo jest obrazem używanym przez Windows Store przy każdym wyświetleniu strony Twojej aplikacji w wynikach wyszukiwania  i przy opisie aplikacji na tej stronie.

Określasz ten element w części Package/Properties/Logo Manifestu aplikacji.

Wskazówka
Atrybut BackgroundColor w części VisualElements ustawia kolor tła strony Twojej aplikacji w Windows Store. Upewnij się, że wybrane kolory dla BackgroundColor i kolor tekstu na pierwszym planie (ForegroundText) są wystarczająco kontrastujące i tekst da się łatwo odczytać.

Szczegóły obrazu

Wymagane Wymagany jest tylko obraz o wymiarze 50x50 pikseli.
Rozmiar

100%: 50x50

140%: 70x70

180%: 90x90
Typ .png, .jpg, .jpeg

Przykład

Poniższe obrazy ilustrują różne miejsca w Windows Store, w których użyto obrazu „store logo”.

Na tym obrazie zaznaczone jest „store logo”, wyświetlane przez Windows Store z pozostałymi informacjami o aplikacji, gdy aplikacja znajduje się w wynikach wyszukiwania.

Nazwa aplikacji, wyświetlona w tytule, który zawiera „store logo”, pochodzi z wartości DisplayName Manifestu aplikacji. W celu uzyskania więcej informacji na temat nazw aplikacji zobacz Where your app's name appears.

Ten obraz pokazuje „store logo”, które Windows Store wyświetla z informacjami o aplikacji w wykazie kategorii.

Nazwa aplikacji, wyświetlona w tytule, który zawiera „store logo”, pochodzi z wartości DisplayName Manifestu aplikacji. W celu uzyskania więcej informacji na temat nazw aplikacji zobacz Where your app's name appears.

Ten obraz pokazuje „store logo”, tak jak pojawia się ono w katalogu aplikacji Windows Store.

Nazwa aplikacji, wyświetlona w tytule, który zawiera „store logo”, pochodzi z wartości DisplayName Manifestu aplikacji. W celu uzyskania więcej informacji na temat nazw aplikacji zobacz Where your app's name appears.

Aby dowiedzieć się więcej o innych danych, wyświetlanych na stronie aplikacji, zobacz Informacje na stronie aplikacji.

Więcej informacji o możliwościach wykorzystania tego obrazu znajdziesz:

Obraz logo reprezentuje kwadratowy obrazek tytułowy aplikacji na ekranie startowym. Określasz obraz logo w manifeście aplikacji atrybutem Logo w części VisualElements.

Ważne
Projektując obraz logo, rozważ, czy chcesz załączyć nazwę Twojej aplikacji na obrazku, czy chcesz, aby Windows nałożył jej nazwę na obraz. W celu uzyskania więcej informacji na temat nazw aplikacji zobacz Where your app's name appears. Aby dowiedzieć się więcej o tym, jak wyświetlać (lub nie) nazwę w Windows, przeczytaj o atrybucie ShowName z części DefaultTile.

Szczegóły obrazu

Wymagane Wymagany jest tylko obraz o wymiarze 150x150 pikseli.
Rozmiar

80%: 120x120

100%: 150x150

140%: 210x210

180%: 270x270
Typ .png, .jpg, .jpeg

 

Przykład

Ten obraz pokazuje logo aplikacji Store z nazwą aplikacji, nałożoną w rogu obrazka.

Więcej informacji o możliwościach wykorzystania tego obrazu znajdziesz:

 

Small logo jest wyświetlane z nazwą Twojej aplikacji w wynikach wyszukiwania, zwróconych na ekranie startowym. Small logo jest również używane w liście wyszukiwanych aplikacji, gdy strona startowa jest pomniejszona.

Small logo wybierane jest w Manifeście aplikacji poprzez atrybut SmallLogo w części VisualElements.

Szczegóły obrazu

Wymagane Wymagany jest tylko obraz o wymiarze 30x30 pikseli.
Rozmiar

80%: 24x24

100%: 30x30

100%: 42x42

100%: 54x54
Typ .png, .jpg, .jpeg

Przykład

Ten obraz pokazuje small logo aplikacji Control Panel, tak jak wyświetlane jest w wynikach wyszukiwania dla słowa „control”.

W celu uzyskania więcej informacji na temat wyświetlania nazwy aplikacji z tym obrazkiem zobacz  Where your app's name appears.

Natomiast, ten obraz podkreśla small logo aplikacji Store, znajdującej się na górze listy wyszukiwanych aplikacji.

Nazwa wyświetlona obok logo jest wartością atrybutu DisplayName z części VisualElements. W celu uzyskania więcej informacji na temat nazw aplikacji zobacz Where your app's name appears.

Więcej informacji o możliwościach wykorzystania tego obrazu:

Splash screen

Twoja aplikacji musi zapewniać obrazek splash screen, który wyświetlany jest przez krótki okres, kiedy użytkownik otwiera aplikację. Możesz również określić kolor tła, który zostanie w tym czasie użyty. Wybierz obraz i opcjonalny kolor tła w części SplashScreen Manifestu aplikacji.

Żeby określić obraz, ustaw atrybut Image na ścieżkę obrazu w pakiecie aplikacji. Obraz wyświetlany będzie na kolorze tła, zdefiniowanym atrybutem BackgroundColor. Możesz wyświetlić tylko kolor, jeśli określisz jedynie wartość atrybutu BackgroundColor.

Wskazówka
Jeżeli nie określisz atrybutu BackgroundColor w elemencie SplashScreen, zostanie użyty kolor, określony przez atrybut BackgroundColor w części VisualElements.

Szczegóły obrazu

Wymagane Wymagany jest tylko obraz o wymiarze 620x300 pikseli.
Rozmiar

100%: 620x300

140%: 868x420

180%: 1116x540
Typ .png, .jpg, .jpeg

Przykład

To jest obraz splash screen dla aplikacji.

Więcej informacji o możliwościach wykorzystania tego obrazu znajdziesz:

Opcjonalne obrazy dla Twojej aplikacji

Twoja aplikacja może zawierać więcej obrazów, gdy tworzysz ją dla Windows Store. Te opcjonalne obrazy mogą pomóc Twojej aplikacji w zapewnieniu bogatszego doświadczenia użytkownika:

Zdefiniowanie wide logo umożliwia Twojej aplikacji zaprezentowanie szerokiego tytułu na ekranie startowym. Chociaż wide logo nie jest wymagane, jeśli nie załączysz je do aplikacji, niemożliwa będzie zmiana jej rozmiaru na szeroki oraz wyświetlanie powiadomień w szerokim formacie.

Możesz określić obraz wide logo w Manifeście aplikacji, w atrybucie WideLogo elementu DefaultTile.

Ważne
Projektując obraz logo rozważ, czy chcesz załączyć nazwę Twojej aplikacji na obrazku, czy chcesz, aby Windows nałożył jej nazwę na obraz. Więcej informacji na temat nazwy aplikacji, która jest wyświetlana na obrazku znajdziesz: Where your app's name appears. Aby dowiedzieć się więcej, jak wyświetlać (lub nie) nazwę w Windows, przeczytaj o atrybucie ShowName z części DefaultTile.

Szczegóły obrazu

Wymagane Brak
Rozmiar

80%: 248x120

100%: 310x150

140% 434x210

180% 558x270
Typ .png, .jpg, .jpeg

Przykład

Ten obraz pokazuje wide logo Desktop z jego nazwą, nałożoną w rogu obrazu.

Więcej informacji o możliwościach wykorzystania tego obrazu znajdziesz:

Badge logo to obraz, który jest wyświetlany obok znaczku powiadomienia w celu zidentyfikowania aplikacji na zablokowanym ekranie. Nie jest używany nigdzie indziej.

Określasz obraz „badge logo” przez atrybut  BadgeLogo elementu LockScreen Manifestu aplikacji.

Szczegóły obrazu

Wymagane Brak
Rozmiar

100%: 24x24

140%: 33x33

180%: 43x43
Typ .png, .jpg, .jpeg

 

Ważne
Obraz nie może być monochromatyczny.

Przykład

Ten obraz pokazuje „badge logo” aplikacji i znaczek powiadomienia na zablokowanym ekranie.

Więcej informacji o możliwościach wykorzystania tego obrazu znajdziesz:

Obrazy, które dostarczasz razem z aplikacją

Powinieneś mieć przygotowane te obrazy, kiedy będziesz dostarczać Twoją aplikację do Windows Store.

Zrzuty ekranu

Zrzuty ekranu są obrazami Twojej aplikacji, które wyświetlane są dla Twoich klientów w opisie na stronie aplikacji.

Postaraj się, aby każdy zrzut ekranu podkreślał kluczowe właściwości Twojej aplikacji.

Musisz zapewnić, co najmniej, jeden zrzut ekranu, kiedy dostarczasz aplikację. Możesz załączyć do 8 zrzutów ekranu. Każdy obraz musi zawierać krótki podpis, który opisuje obraz za pomocą co najwyżej 200 znaków. Każdy zrzut ekranu, który dostarczysz, musi być co najmniej wymiarów 1366 x 768 lub 768 x 1366 pikseli i być w formacie .png z rozmiarem nieprzekraczającym 2MB.

Szczegóły obrazu

Wymagane Wymagany jest jeden zrzut ekranu, ale każda aplikacja może mieć do 8 zrzutów ekranu.
Rozmiar

1366x768 (lub większy, jeśli w orientacji poziomej)

768x1366 (lub większy, jeśli w orientacji pionowej)
Typ .png

Przykład

Ten obraz pokazuje zrzut ekranu, wyświetlony na stronie aplikacji dla aplikacji Labyrinth.

Obrazy promocyjne

Zespół redakcyjny Windows Store używa obrazów promocyjnych, kiedy przedstawiają Twoją aplikację w Windows Store. Zapewnienie obrazów promocyjnych dla Twojej aplikacji nie gwarantuje, że będzie ona w ten sposób podkreślona. Ale niezałączenie ich, gwarantuje praktycznie, że nie będzie.

Możesz zapewnić obrazy w kilku rozmiarach. Dostarczenie obrazu w każdym rozmiarze daje zespołowi redakcyjnemu Windows Store większą elastyczność, jeśli podjęta zostanie decyzja o podkreśleniu Twojej aplikacji.

Zazwyczaj wybierane są obrazy najbardziej charakterystyczne dla Twojej aplikacji. Od zrzutów ekranu preferowane są obrazy pokazujące logo, branding czy postacie z gier. Jeżeli dostarczysz zrzuty ekranu, upewnij się, że są one właściwie zrobione.

Nie używaj czarnego ani białego, jako głównych kolorów tła dla Twoich obrazów. Zamiast tego użyj koloru uzupełniającego dla logo albo dla elementu dominującego na Twoim obrazie.

Kiedy Windows Store wyświetla Twój obraz promocyjny, dodawana jest nazwa aplikacji, jej cena, oraz ocena na dole obrazka, tak więc sam nie musisz umieszczać tych informacji.

Szczegóły obrazu

Wymagane Brak, zobacz wskazówka.
Rozmiar

Jeden lub więcej z tych rozmiarów:

414x180

414x468

558x756

846x468
Typ .png

Wskazówka

Musisz zaprojektować promocyjne obrazy w podanych wymiarach. Jeśli zamierzasz dostarczyć jeden obraz (chociaż nie są one wymagane) niech będzie w wymiarach 414x180 pikseli.

Przykład

To jest przykład poziomego obrazu promocyjnego, który może mieć 414x468 lub 558x756 albo oba wymiary.

To jest przykład poziomego obrazu promocyjnego, który może mieć 414x180 lub 846x468 albo oba wymiary.

Jeżeli używasz w obrazie logo, wyśrodkuj je w poziomie i umieść lekko powyżej linii wyśrodkowanej pionowo.  

Pokazane w tym przykładzie wymiary stanowią jedynie punkt odniesienia. Nie załączaj ich na swoich obrazach. Obszar wokół logo będzie najprawdopodobniej inny, jeżeli użyjesz logo Twojej aplikacji. Upewnij się, że obszar wokół logo ma co najmniej 30 pikseli z lewej i prawej strony.

Te przykłady pokazują również informacje o aplikacji, dodawane przez Windows Store na dole obrazka. Nie dodawaj ich do Twojego obrazka.

Podsumowanie

Ten odcinek kończy cykl „Jak konsumenci widzą Twoją aplikację w Windows Store”.