Windows Phone 7 UI: l’icona e la Tile.

Le UI guidelines di luglio introducono due elementi molto importanti per integrare le nostre applicazioni per Windows Phone 7 nella User Experience dell’utente e sono l’icona e la Tile.

L’icona, che nel template fornito con i Tools (almeno nella versione beta) ha il nome di ApplicationIcon.png, viene aggiunta al progetto come “content” e viene referenziata nel file WMAppManifest.xml  in questa riga:

    <IconPath IsRelative="true" IsResource="false">ApplicationIcon.png</IconPath>

L’icona deve avere una dimensione di 63x63 62x62 pixel e dovrebbe essere un formato PNG o JPEG. La versione beta dei tool permette di selezionere nei setting solo il formato PNG.*

L’integrazione purtroppo non è completa: come si vede dell’immagine l’icona della mia applicazione “Do Not Push” non ha il colore di sfondo (in questo del tema “blue”) chiamato “Accent”: quel colore, disponibile come risorsa chiamata PhoneAccentColor PhoneAccentBrush all’applicazione, non  viene per ora applicato all’icona anche se abbiamo scelto uno sfondo trasparente per il nostro PNG.

Application Icon 

Speriamo che nella versione RTM questo fastidioso inconveniente venga risolto o che venga fornita una documentazione ufficiale su come sfruttare l’Accent per colorare l’icona dell’applicazione.

La tile è una icona più grande, di dimensione 173x173 pixel che viene utilizzata nello start menu per eseguire rapidamente la nostra applicazione e per visualizzare le notifiche appunto dette Tile. La tile può essere posizionata nello start menu solo dall’utente finale con il comando “pin to start”

pin to start

Le informazioni della Tile sono contenuti sempre nel file WMAppManifest.xml in questa sezione:

        <TemplateType5>
          <BackgroundImageURI IsRelative="true" IsResource="false">Background.png</BackgroundImageURI>
          <Count>7</Count>
          <Title>Do Not Push</Title>
        </TemplateType5>

Anche in questo caso il tool in versione beta visualizza solo formati PNG e non ha il supporto del colore “Accent”. Nel realizzare questa icona occorre prevedere una zona libera nella parte bassa nella quale verrà automaticamente posizionato il nome dell’applicazione. La tile notification verrà posizionata in alto a destra in un cerchio del colore dell’Accent con un numero in bianco da 1 a 99.

Tile 

L’icona verrà visualizzata con un velo opaco rispetto alla vostra icona originale. Il layer che contiene il titolo dell’applicazione ha infatti un fondo opaco che si sovrappone alla vostra icona, per permettere la visualizzazione del testo in bianco anche su icone molto chiare.

Vi sono anche Tile a doppia larghezza, ma sono riservate per Microsoft, Il produttore del telefono o il carrier telefonico.

 

*Aggiornato con le specifiche finali.

Print | posted on venerdì 10 settembre 2010 14:48

Comments have been closed on this topic.