Ottimizza le app per ChromeOS

Le app Android svolgono un ruolo importante nel ridefinire l'aspetto dell'informatica moderna sugli schermi di grandi dimensioni. Tuttavia, l'esecuzione della tua app per dispositivi mobili su Chromebook non offre agli utenti l'esperienza migliore.

In questa pagina vengono spiegati alcuni modi in cui puoi personalizzare la tua esperienza con fattori di forma convertibili e laptop. Consulta il nostro elenco completo di test per scoprire di più su come testare la compatibilità dell'app su questi dispositivi.

Sfrutta il supporto per la modalità multi-finestra in formato libero

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

Gli utenti possono ridimensionare la finestra contenente la tua app Android, come mostrato nella figura 1. Per assicurarti che le finestre in formato libero vengano ridimensionate senza problemi e mostrino all'utente l'intero contenuto, leggi le linee guida in Gestione finestre.

Figura 1. Una finestra dell'app ridimensionabile.

Se la tua app viene eseguita su ChromeOS, puoi migliorare l'esperienza utente seguendo queste best practice:

  • Gestisci correttamente il ciclo di vita dell'attività in modalità multi-finestra e assicurati di continuare ad aggiornare l'interfaccia utente, anche quando l'app non è la finestra più attiva.
  • Assicurati che il layout della tua app venga regolato in modo appropriato ogni volta che l'utente ridimensiona la finestra.
  • Personalizza le dimensioni iniziali della finestra dell'app specificando le dimensioni del lancio.
  • Tieni presente che l'orientamento dell'attività principale dell'app influisce su tutte le finestre.

Personalizzare 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 delle finestre e il pulsante Indietro. Per dare un aspetto raffinato e personalizzato alla tua app per ChromeOS, definisci dei valori colorPrimary e, se possibile, colorPrimaryDark nel tema dell'app.

colorPrimaryDark viene utilizzato per colorare la barra superiore. Se viene definito solo colorPrimary, ChromeOS utilizza una versione più scura nella barra superiore. Per saperne di più, consulta la sezione Stili e temi.

Supporta tastiera, trackpad e mouse

Tutti i Chromebook sono dotati di tastiera fisica e trackpad, mentre alcuni hanno anche un touchscreen. Alcuni dispositivi possono convertire da laptop a tablet.

Le app per ChromeOS supportano l'input da mouse, trackpad e tastiera, in modo che l'app sia utilizzabile senza touchscreen. Molte app supportano già mouse e trackpad e non richiedono alcun lavoro. Tuttavia, è meglio personalizzare il comportamento dell'app in base al mouse e per supportare e distinguere tra input del mouse e touch.

Assicurati che:

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

Figura 2. Scorrimento con la rotellina del mouse.

Figura 3. Stati al passaggio del mouse sul pulsante.

Ove opportuno, differenzia tra input tocco e mouse. Ad esempio, se tocchi un elemento e tieni premuto su un elemento potrebbe attivarsi un'interfaccia utente a selezione multipla, mentre se fai clic con il tasto destro del mouse sullo stesso elemento potrebbe essere attivato un menu opzioni.

Cursori personalizzati

Personalizza i cursori del mouse delle tue app per indicare con quale elemento della UI 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 ridimensionabili dei livelli
  • Puntatori a mano aperta e chiusa per i contenuti che possono essere sottoposti a panoramica o trascinati con un gesto di clic e trascinamento
  • Elaborazione delle rotelline

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

Scorciatoie da tastiera e navigazione

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

Allo stesso modo, gestisci tutti gli elementi importanti dell'interfaccia utente utilizzando la navigazione nelle schede. Ciò è particolarmente importante per l'accessibilità. Per soddisfare gli standard di accessibilità, tutte le piattaforme dell'interfaccia utente devono avere stati evidenti e conformi all'accessibilità, come mostrato nelle figure seguenti:

Figura 4. Tabing trasversale.

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

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

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

Migliora ulteriormente l'input utente

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 con il pulsante secondario del trackpad o tramite tocco e pressione su un touchscreen:

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

Trascina

La creazione di interazioni tramite trascinamento, come quella nella figura seguente, può integrare nella tua app funzionalità di produttività efficienti e intuitive. Per ulteriori informazioni, consulta la sezione Trascinamento.

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

Supporto per stilo

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

Prendi in considerazione le potenziali variazioni di hardware per stilo durante la progettazione delle interazioni con lo stilo. Per una panoramica delle API per stilo, consulta la pagina Compatibilità dell'input su schermi di grandi dimensioni.

Rendi reattivi i tuoi layout

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

  • Mostra l'architettura dell'app.
  • Limita la lunghezza del testo e le dimensioni delle immagini alla larghezza massima.
  • Sfrutta al meglio gli immobili nella barra degli strumenti dell'app.
  • Migliora il posizionamento delle autorizzazioni dell'interfaccia utente adattando l'app all'utilizzo del mouse anziché dell'uso dei dita.
  • Ottimizza le dimensioni di video e immagini, stabilisci 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 ulteriori 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 una nuova finestra.
  • Rimuovi o riduci l'importanza dei componenti a scorrimento orizzontale.
  • Evita l'interfaccia utente modale a schermo intero. Utilizza l'interfaccia utente incorporata, ad esempio gli indicatori di avanzamento e gli avvisi, per tutte le azioni non critiche.
  • Utilizza componenti migliorati dell'interfaccia utente, come i selettori di data e ora, campi di testo e 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 di piccole e medie dimensioni.
  • Rimuovi o modifica i pulsanti di azione mobili (FAB) per una migliore navigazione da tastiera. Per impostazione predefinita, un FAB viene inserito per ultimo in ordine di tabulazione trasversale. Crealo per primo, perché è l'azione principale, oppure sostituiscilo con un'altra richiesta di invito di livello superiore.

Figura 8. Simulazioni di un layout reattivo sullo schermo di un telefono e di un computer.

Un pulsante Indietro a livello di sistema è un pattern riportato dai dispositivi portatili di Android, che non si adatta altrettanto bene in un contesto desktop.

Poiché l'app diventa sempre più personalizzata per un ambiente laptop, prova a scegliere un pattern di navigazione che attenua i valori del pulsante Indietro. Consenti all'app di gestire il proprio stack di cronologia fornendo pulsanti indietro in-app, breadcrumb o altre route di escape come i pulsanti di chiusura o di annullamento nell'interfaccia utente a schermo grande.

Puoi stabilire se mostrare o meno un pulsante Indietro nella finestra dell'app impostando una preferenza all'interno del tag <activity>. L'impostazione 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 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, ad esempio i cambiamenti di orientamento, in ChromeOS. In questo modo si evitano problemi quando la fotocamera viene utilizzata con un orientamento errato. 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 ridimensionabile la tua app.

Gestire le impostazioni dei dispositivi

Prendi in considerazione 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 suoni hanno controlli del volume propri. Segui le linee guida per utilizzare i dispositivi a volume fisso.

Modificare la luminosità dello schermo

Non puoi regolare la luminosità del dispositivo su ChromeOS. Le chiamate a system settings e WindowManager.LayoutParams vengono ignorate.

Materiali didattici aggiuntivi

Per ulteriori informazioni sull'ottimizzazione delle app Android per i Chromebook, consulta le seguenti risorse: