Questa pagina è stata tradotta dall'API Cloud Translation.

Ottimizza le app per ChromeOS

Le app per Android svolgono un ruolo importante nel ridefinire l'aspetto dell'informatica moderna su schermi di grandi dimensioni. Ma il semplice esecuzione di un'app mobile su Chromebook non offre agli utenti un'esperienza ottimale.

Questa pagina descrive alcuni modi per personalizzare la tua esperienza con fattori di forma convertibili e laptop. Consulta il nostro elenco completo dei test per scoprire di più sui test della tua app per verificarne la compatibilità su questi dispositivi.

Sfrutta il supporto per il multi-finestra in formato libero

L'implementazione delle app per Android su ChromeOS include il supporto multi-finestra di base. Anziché occupare sempre lo schermo intero, Android esegue il rendering delle app su ChromeOS in container di finestre in formato libero, opzione più appropriata per questi dispositivi.

Gli utenti possono ridimensionare la finestra che contiene l'app per Android, come mostrato nella Figura 1. Per assicurarti che le finestre in formato libero si ridimensionano correttamente e mostrino all'utente tutti i contenuti, leggi le linee guida in 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à multi-finestra e assicurati di continuare ad aggiornare la UI, anche quando l'app non è la finestra più in primo piano.
Assicurati che il layout dell'app venga adattato in modo appropriato ogni volta che l'utente ridimensiona la finestra.
Personalizza le dimensioni iniziali della finestra dell'app specificando le dimensioni di lancio.
Tieni presente che l'orientamento dell'attività principale dell'app influisce su tutte le relative finestre.

Personalizza il colore della barra superiore

ChromeOS utilizza il tema dell'app per colorare la barra superiore visualizzata nella parte superiore dell'app, che mostra quando gli utenti tengono premuti i controlli della finestra e il pulsante Indietro. Per fare in modo che la tua app abbia un aspetto raffinato e personalizzato per ChromeOS, definisci i valori colorPrimary e, se possibile, colorPrimaryDark nel tema della tua app.

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

Supporta tastiera, trackpad e mouse

Tutti i Chromebook sono dotati di tastiera fisica e trackpad e alcuni hanno anche un touchscreen. Alcuni dispositivi possono convertire il formato laptop in tablet.

Nelle app per ChromeOS, supporta l'input da mouse, trackpad e tastiera in modo che l'app sia utilizzabile senza touchscreen. Molte app supportano già mouse e trackpad senza la necessità di ulteriori operazioni. Tuttavia, è meglio personalizzare il comportamento dell'app in modo appropriato in base al mouse e supportare e distinguere tra gli input del mouse e del tocco.

Assicurati che:

Tutti i target sono cliccabili con il mouse.
Tutte le superfici scorrevoli al tocco scorrono sugli eventi della rotellina del mouse, come mostrato nella Figura 2.
Gli stati di passaggio del mouse vengono implementati con un giudizio attento per migliorare il rilevamento dell'interfaccia utente senza sopraffare l'utente, come mostrato nella figura 3.

Figura 2. Scorrimento con la rotellina del mouse.

Figura 3. Stati al passaggio del mouse del pulsante.

Se necessario, differenzia tra input del mouse e input tocco. Ad esempio, il tocco e la pressione di un elemento potrebbe attivare un'interfaccia utente a selezione multipla, mentre il clic con il tasto destro del mouse sullo stesso elemento potrebbe attivare un menu delle opzioni.

Cursori personalizzati

Personalizza i cursori del mouse delle app per indicare con quale elemento dell'interfaccia utente l'utente può interagire e in che modo. Puoi impostare PointerIcon da utilizzare quando gli utenti interagiscono con una vista chiamando il metodo setPointerIcon().

Nelle app, mostra quanto segue:

Puntatori I-beam per il testo
Punti di manipolazione di ridimensionamento ai bordi dei livelli ridimensionabili
Puntatori a mano aperta e chiusa per contenuti che possono essere spostati con panoramica o trascinamento con un gesto di clic e trascinamento
Rotelline di elaborazione

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

Ogni Chromebook ha una tastiera fisica. Fornisci tasti di scelta rapida per consentire agli utenti di essere più produttivi. Ad esempio, se l'app supporta la stampa, puoi utilizzare Ctrl+P per aprire una finestra di dialogo di stampa.

Allo stesso modo, puoi gestire tutti gli elementi importanti dell'interfaccia utente utilizzando la navigazione tramite schede. Questo è particolarmente importante per l'accessibilità. Per soddisfare gli standard di accessibilità, tutte le piattaforme UI devono avere stati specifici per gli elementi ovvi e conformi all'accessibilità, come mostrato nelle figure seguenti:

Figura 4. Schede trasversali.

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

Assicurati di implementare alternative da tastiera o mouse per le funzionalità principali nascoste nelle interazioni specifiche del tocco, come azioni di tocco e pressione, scorrimenti o altri gesti multi-touch. Una soluzione di esempio è fornire pulsanti che appaiano in una superficie al passaggio del mouse.

Per maggiori informazioni sul supporto di tastiera, trackpad e mouse, consulta Compatibilità degli input su schermi di grandi dimensioni.

Migliora ulteriormente l'input dell'utente

Per ottenere una 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 con il pulsante secondario del trackpad oppure toccando e tenendo premuto su un touchscreen:

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

Trascina

Creare interazioni di trascinamento, come quella nella figura seguente, può aggiungere una funzionalità di produttività efficiente e intuitiva nella tua app. Per ulteriori informazioni, consulta la pagina relativa al trascinamento.

Figura 7. Trascinamento in un'interfaccia ad albero di file.

Supporto per stilo

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

Tieni conto delle potenziali variazioni dei diversi hardware stilo quando progetti le interazioni con lo stilo. Per una panoramica delle API per lo stilo, vedi Compatibilità dell'input su schermi di grandi dimensioni.

Rendi adattabili i tuoi layout

Sfrutta al meglio lo spazio dello schermo disponibile per la tua app, indipendentemente dal suo stato visivo (a schermo intero, verticale, orizzontale o a finestre). 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 le proprietà immobiliari nella barra degli strumenti dell'app.
Migliora il posizionamento delle proposte dell'UI adattando l'app all'utilizzo del mouse anziché dell'uso delle dita.
Ottimizza le dimensioni di video e immagini, definisci un insieme di larghezza e altezza massime per tutti i contenuti multimediali e massimizza la leggibilità e la leggibilità.
Implementa un sistema di colonne adattabile. Per maggiori informazioni, consulta la sezione Griglia di layout adattabile.
Ridimensiona e modifica l'interfaccia utente quando necessario utilizzando il sistema a colonne. Se possibile, evita di aprire nuove finestre.
Rimuovi o riduci l'importanza dei componenti di scorrimento orizzontale.
Evita l'interfaccia utente modale a schermo intero. Utilizza l'interfaccia utente in linea, come gli indicatori di avanzamento e gli avvisi, per tutte le azioni non critiche.
Utilizza componenti dell'interfaccia utente migliorati, ad esempio selettori di data e ora, campi di testo e menu progettati per mouse, tastiera e schermi più grandi.
Utilizza modifiche in linea, colonne aggiuntive o UI modale invece di una nuova attività per una funzionalità di modifica di piccole e medie dimensioni.
Rimuovi o modifica i pulsanti di azione mobile (FAB) per migliorare la navigazione da tastiera. Per impostazione predefinita, le posizioni FAB sono l'ultima nell'ordine di tabulazione trasversale. Invece, sceglila per prima, perché è l'azione principale, o sostituiscila con un'altra attrattiva di livello superiore.

Figura 8. Simulazioni di un layout adattabile su uno schermo di dimensioni pari a un telefono e a un computer.

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

Man mano che la tua app diventa sempre più personalizzata per un ambiente laptop, considera l'idea di passare a uno schema di navigazione che rende meno il pulsante Indietro. Consenti all'app di gestire il proprio stack di cronologia fornendo pulsanti Indietro, breadcrumb o altri percorsi di escape in-app, come i pulsanti di chiusura o annullamento, come parte dell'interfaccia utente sullo schermo di grandi dimensioni.

Puoi controllare se la tua app mostra o meno un pulsante Indietro nella sua 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 se l'app può essere eseguita solo con orientamento verticale, ma l'utente la esegue su uno schermo orizzontale. In questo caso, l'anteprima o il risultato acquisito potrebbero essere ruotati in modo errato.

La modalità di compatibilità cambia il modo in cui il sistema gestisce gli eventi in ChromeOS, ad esempio le modifiche dell'orientamento. In questo modo è possibile evitare problemi quando la fotocamera viene usata nella modalità di orientamento errata. Per attivare la modalità di compatibilità, devi soddisfare i seguenti criteri:

Scegli come target almeno Android 7.0 (livello API 24). Il livello minimo dell'SDK può essere inferiore.
Rendi la tua app ridimensionabile.

Gestire le impostazioni del dispositivo

Considera le seguenti impostazioni del dispositivo per le app eseguite su ChromeOS.

Regolare il volume

I dispositivi ChromeOS sono dispositivi a volume fisso: le app che riproducono l'audio hanno i propri controlli del volume. Segui le linee guida per utilizzare dispositivi a volume fisso.