Linee guida per l'adattamento in base alla densità in pixel

Articolo
05/15/2015

Le app di Windows Runtime (eseguite su Windows, Windows Phone o entrambi) vengono adattate automaticamente dal sistema per assicurare leggibilità e funzionalità coerenti indipendentemente dalla densità in pixel dello schermo. Segui queste linee guida per preservare la qualità dell'interfaccia utente della tua app quando viene adattata per dispositivi con densità in pixel diverse.

Nota Queste linee guida non valgono per le app di Windows Phone che usano Silverlight. Per indicazioni specifiche su Silverlight, vedi Multi-resolution apps for Windows Phone 8.

Differenza di densità in pixel tra uno slate HD e uno standard

Descrizione

Senza adattamento, le dimensioni fisiche degli oggetti sullo schermo diminuiscono con l'aumentare della densità in pixel del dispositivo. Quando gli elementi dell'interfaccia utente rischiano di risultare troppo piccoli per essere toccati o il testo di diventare illeggibile, Windows adatta automaticamente l'app in base ai seguenti valori di ridimensionamento predefiniti:

App di Windows Store

1.0 (100%, non viene applicato alcun ridimensionamento)
1.4 (ridimensionamento del 140%)
1.8 (ridimensionamento del 180%)

App di Windows Phone Store:

1.0 (100%, nessun ridimensionamento)
1.4 (ridimensionamento del 140%)
2.4 (ridimensionamento del 240%)

Windows determina il plateau di ridimensionamento da usare in base alle dimensioni dello schermo fisico, alla sua risoluzione, al valore DPI e al fattore di forma. Se le specifiche dello schermo soddisfano una soglia specifica, Windows utilizza il plateau di ridimensionamento più elevato successivo. Puoi usare ResolutionScale (Windows) o RawPixelsPerViewPixel (Windows Phone) per determinare il fattore di scala.

L'app verrà adattata automaticamente ma per assicurarti che l'interfaccia utente rimanga precisa e funzionale indipendentemente dalla densità in pixel del dispositivo, usa le indicazioni seguenti per preparare la tua app per il ridimensionamento.

Cosa fare e cosa non fare

Usa Scalable Vector Graphics. Windows ridimensiona automaticamente questi formati senza produrre artefatti evidenti. Per le app in JavaScript, usa SVG. Puoi usare grafica definita in XAML nelle app scritte in C#, C++ o Visual Basic.
Usa il caricamento delle risorse per le immagini bitmap nel pacchetto dell'app e predisponi un'immagine separata per ogni fattore di scala. Includi il fattore di scala nel nome del file di immagine (ad esempio, Assets\Square7070Logo.scale-100.png). Tieni presente che Windows caricherà automaticamente l'immagine corretta per la scala corrente. L'esempio di ridimensionamento in base al valore DPI illustra come usare il caricamento delle risorse per le immagini.

Per i requisiti delle immagini relativamente alla certificazione dell'app, vedi Scelta delle immagini dell'app. Per dettagli sulle convenzioni di denominazione, vedi Guida introduttiva: Utilizzare risorse di file o immagine (app di Windows Store in JavaScript e HTML) o Guida introduttiva: Utilizzare risorse di file o immagine (app di Windows Store in C#/VB/C++ e XAML).
Quando crei le risorse per diversi valori di ridimensionamento predefiniti:
- Non progettare immagini bitmap al 100% per poi ridimensionarle manualmente. Anche con programmi per immagini di alta qualità, è probabile che si creino sfocature.
- Tieni presente che riducendo un'immagine grande ad alta risoluzione non sempre si ottengono risultati precisi e puliti. Se tuttavia non è disponibile l'immagine vettoriale originale, è preferibile ridurre le dimensioni di un file ad alta risoluzione piuttosto che di uno a bassa risoluzione.
Se l'app carica le immagini in fase di esecuzione usando il codice, ad esempio usando direttamente DirectX, non XAML o HTML per creare l'interfaccia utente, scegli la proprietà ResolutionScale (Windows) o RawPixelsPerViewPixel (Windows Phone) per determinare la scala e caricare manualmente le immagini in base alla percentuale di scala.
Usa le API Thumbnail per le immagini di file system. Le API di anteprima ottimizzano le presentazioni memorizzando nella cache versioni ridotte dell'immagine a fini di anteprima. Per informazioni dettagliate, vedi Accesso efficiente al file system.
Specifica l'altezza e la larghezza delle immagini anziché usare il ridimensionamento automatico, per evitare che il layout venga modificato quando vengono caricate immagini più grandi.
Usa le unità griglia e le sottounità tipografiche. Usa le dimensioni definite per la griglia tipografica di 20 pixel per le unità griglia principali e 5 pixel per le unità griglia secondarie, in modo da assicurare che nei layout non si verifichi uno slittamento dei pixel dovuto all'arrotondamento dei pixel. Nelle unità divisibili per 5 pixel non si verificherà l'arrotondamento dei pixel.
Usa la query resolution media per le immagini Web remote Se la tua app è scritta in JavaScript e contiene un'immagine Web remota, usa la funzionalità resolution media CSS @media con la proprietà background-imageper sostituire le immagini in fase di esecuzione.
Non usare immagini di dimensioni non corrispondenti a multipli di 5. Quando vengono ridimensionate in scala 140%, 180% e 240%, nelle unità non multiple di 5 pixel può verificarsi uno slittamento dei pixel.