Questa pagina è stata tradotta dall'API Cloud Translation.

Ottimizza le app per ChromeOS

Le app per Android hanno un ruolo importante nella ridefinizione dell'aspetto del computing moderno su schermi di grandi dimensioni. Tuttavia, il semplice fatto di eseguire l'app mobile su Chromebook non offre agli utenti la migliore esperienza.

Questa pagina illustra alcuni modi in cui puoi personalizzare la tua esperienza per i fattori di forma di laptop e convertibili. Consulta il nostro elenco completo di test per scoprire di più su come verificare la compatibilità della tua app su questi dispositivi.

Sfrutta il supporto della modalità multi-finestra a forma libera

L'implementazione delle app per Android su ChromeOS include il supporto di base per più finestre. Invece di occupare sempre lo schermo intero, Android esegue il rendering delle app su ChromeOS in contenitori di finestre di forma libera, che sono più appropriati per questi dispositivi.

Gli utenti possono ridimensionare la finestra contenente l'app per Android, come mostrato nella figura 1. Per assicurarti che le finestre di forma libera ridimensionino senza problemi e mostrino all'utente tutti i contenuti, leggi le linee guida nella sezione Gestione delle finestre.

Figura 1. Una finestra dell'app ridimensionabile.

Puoi migliorare l'esperienza utente quando la tua app viene eseguita su ChromeOS seguendo queste best practice:

Gestisci correttamente il ciclo di vita dell'attività in modalità a più finestre e assicurati di continuare ad aggiornare l'interfaccia utente, anche quando la tua app non è la finestra in primo piano.
Assicurati che l'app aggiusti il layout in modo appropriato ogni volta che l'utente ridimensiona la finestra.
Personalizza le dimensioni iniziali della finestra dell'app specificandone le dimensioni di avvio.
Tieni presente che l'orientamento dell'attività principale dell'app influisce su tutte le sue finestre.

Personalizzare il colore della barra superiore

ChromeOS utilizza il tema dell'app per colorare la barra superiore visualizzata sopra l'app, che viene mostrata quando gli utenti tengono premuti i controlli della finestra e il pulsante Indietro. Per fare in modo che la tua app sia raffinata e personalizzata per ChromeOS, definisci i valori colorPrimary e, se possibile, colorPrimaryDark nel tema dell'app.

colorPrimaryDark viene utilizzato per colorare la barra in alto. Se è definito solo colorPrimary, ChromeOS ne utilizza una versione più scura nella barra superiore. Per ulteriori informazioni, consulta Stili e temi.

Supportare la tastiera, il trackpad e il mouse

Tutti i Chromebook sono dotati di una tastiera fisica e un trackpad e alcuni hanno anche un touchscreen. Alcuni dispositivi possono passare dalla modalità laptop alla modalità tablet.

Nelle tue app per ChromeOS, supporta l'input da mouse, trackpad e tastiera in modo che l'app sia utilizzabile senza un touchscreen. Molte app supportano già il mouse e il trackpad senza bisogno di alcuna operazione aggiuntiva. Tuttavia, è meglio personalizzare il comportamento dell'app in modo appropriato per il mouse e supportare e distinguere tra input del mouse e tocco.

Assicurati che:

Tutti i target sono selezionabili con il mouse.
Tutte le piattaforme scorrevoli touch scorrono in base agli eventi della rotellina del mouse, come mostrato nella figura 2.
Gli stati di passaggio del mouse vengono implementati con un'attenta valutazione per migliorare la rilevabilità dell'interfaccia utente senza sopraffare l'utente, come mostrato nella figura 3.

Figura 2. Scorri con la rotellina del mouse.

Figura 3. Stati di passaggio del mouse del pulsante.

Se opportuno, distingui tra input del mouse e tocco. Ad esempio, toccare e tenere premuto un elemento potrebbe attivare un'interfaccia utente di selezione multipla, mentre fare clic con il tasto destro del mouse sullo stesso elemento potrebbe attivare un menu di opzioni.

Cursori personalizzati

Personalizza i cursori del mouse della tua app per indicare in che modo gli utenti possono interagire con gli elementi dell'interfaccia utente. Puoi impostare il PointerIcon appropriato da utilizzare quando gli utenti interagiscono con un elemento applicando il modificatore pointerHoverIcon.

Nelle tue app, mostra quanto segue:

Cursori a forma di I per il testo
Punti di ridimensionamento ai bordi dei livelli ridimensionabili
Indicatori a forma di mano aperta e chiusa per i contenuti che possono essere spostati o trascinati utilizzando un gesto di clic e trascinamento
Elaborazione delle rotelle

La classe PointerIcon fornisce costanti che puoi utilizzare per implementare cursori personalizzati.

Poiché ogni Chromebook ha una tastiera fisica, fornisci i tasti di scelta rapida per consentire agli utenti di essere più produttivi. Ad esempio, se la tua app supporta la stampa, puoi utilizzare Control+P per aprire una finestra di dialogo di stampa.

Analogamente, gestisci tutti gli elementi importanti dell'interfaccia utente utilizzando la navigazione con i tasti Tab. Questo è particolarmente importante per l'accessibilità. Per soddisfare gli standard di accessibilità, tutte le interfacce utente devono avere stati di messa a fuoco evidenti e conformi all'accessibilità, come mostrato nelle seguenti figure:

Figura 4. Tablatura trasversale.

Figura 5. Sostituzione di un gesto di scorrimento con un controllo visualizzato al passaggio del mouse.

Assicurati di implementare alternative con tastiera o mouse per le funzionalità di base nascoste sotto le interazioni specifiche per il tocco, ad esempio le azioni tocca e tieni premuto, i gesti o altri gesti multi-touch. Un esempio di soluzione è fornire pulsanti che vengono visualizzati su una piattaforma quando si passa il mouse sopra.

Per ulteriori informazioni sul supporto di tastiera, trackpad e mouse, consulta La compatibilità degli input su schermi di grandi dimensioni.

Migliorare ulteriormente l'input degli utenti

Per ottenere funzionalità di livello desktop per la tua app, considera i seguenti input orientati alla produttività.

Menu contestuali

I menu contestuali di Android, che sono un altro acceleratore per indirizzare gli utenti alle funzionalità della tua app, possono essere attivati con un clic del mouse o del pulsante secondario del trackpad o tramite un tocco e una pressione su un touchscreen:

Figura 6. Un menu contestuale visualizzato con il clic con il tasto destro del mouse.

Trascina

La creazione di interazioni con trascinamento, come quella nella figura seguente, può apportare alla tua app funzionalità di produttività efficienti e intuitive. Per saperne di più, consulta Trascinamento.

Figura 7. Trascinare in un'interfaccia ad albero dei file.

Supporto per stilo

Il supporto dello stilo è fondamentale per le app di disegno e di scrittura di appunti. Fornire un supporto migliorato per Chromebook e tablet dotati di stilo implementando interazioni personalizzate per l'utilizzo dell'input dello stilo.

Tieni conto delle potenziali variazioni in diversi hardware dello stilo quando progetti le interazioni con lo stilo. Per una panoramica delle API di stylus, consulta Compatibilità di input su schermi di grandi dimensioni.

Rendi i layout adattabili

Sfrutta al meglio lo spazio sullo schermo disponibile per la tua app, indipendentemente dal suo stato visivo (schermo intero, verticale, orizzontale o a finestra). Ecco alcuni esempi di buon utilizzo dello spazio:

Mostra l'architettura dell'app.
Limita la lunghezza del testo e le dimensioni delle immagini a una larghezza massima.
Sfrutta meglio gli spazi immobiliari nella barra degli strumenti dell'app.
Migliora il posizionamento delle funzionalità dell'interfaccia utente adattando l'app all'utilizzo del mouse anziché all'utilizzo del pollice.
Ottimizza le dimensioni di video e immagini, imposta un insieme di larghezza e altezza massima per tutti i contenuti multimediali e massimizza la leggibilità e la scansionabilità.
Utilizza le classi di dimensioni della finestra e i layout dei riquadri per implementare il design adattivo.
Rimuovi o riduci l'importanza dei componenti con scorrimento orizzontale.
Evita l'interfaccia utente modale a schermo intero. Utilizza l'interfaccia utente in linea, come indicatori di avanzamento e avvisi, per tutte le azioni non critiche.
Utilizza componenti dell'interfaccia utente migliorati, come i selettori di data e ora, i campi di testo e i menu progettati per mouse, tastiera e schermi più grandi.
Utilizza le modifiche in linea, le colonne aggiuntive o l'interfaccia utente modale anziché una nuova attività per una funzionalità di modifica da piccola a media.
Rimuovi o modifica i pulsanti di azione flottanti (FAB) per una navigazione migliore con la tastiera. Per impostazione predefinita, un FAB si posiziona per ultimo nell'ordine di tabulazione trasversale. Inseriscila per prima, perché è l'azione principale, o sostituiscila con un'altra funzionalità di livello superiore.

Figura 8. Simulazioni di un layout adattabile su uno schermo di dimensioni di uno smartphone e di un computer.

Un pulsante Indietro a livello di sistema è un pattern ereditato dalle origini dei dispositivi Android, che non si adatta bene a un contesto desktop.

Man mano che la tua app diventa sempre più personalizzata per un ambiente laptop, valuta la possibilità di adottare un pattern di navigazione che non metta in evidenza il pulsante Indietro. Lascia che sia l'app a gestire la propria pila di cronologia fornendo pulsanti Indietro in-app, breadcrumb o altre vie di fuga come pulsanti di chiusura o annullamento nell'interfaccia utente dello schermo grande.

Puoi stabilire se la tua app mostra un pulsante Indietro nella finestra impostando una preferenza all'interno del tag <activity>. Un'impostazione di true nasconde il pulsante Indietro:

<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />

Risolvere i problemi relativi alle immagini di anteprima della fotocamera

Possono verificarsi problemi con la fotocamera quando l'app può essere eseguita solo in orientamento verticale, ma l'utente la esegue su uno schermo orizzontale. In questo caso, l'anteprima o il risultato acquisito potrebbe essere ruotato in modo errato.

Per semplificare lo sviluppo della fotocamera, ti consigliamo di utilizzare la libreria CameraX.

Per maggiori dettagli, consulta la spiegazione dei problemi relativi all'anteprima della videocamera.

Gestire le impostazioni del dispositivo

Tieni conto delle seguenti impostazioni del dispositivo per le app in esecuzione su ChromeOS.

Regolare il volume

I dispositivi ChromeOS sono dispositivi con volume fisso: le app che riproducono audio hanno i propri controlli del volume. Segui le linee guida per lavorare con i dispositivi con volume fisso.