Modificare il carattere e le impostazioni di colore nelle app AEM Mobile.

Nota:

  Typekit è ora chiamato Adobe Fonts ed è incluso in Creative Cloud e altri abbonamenti. Ulteriori informazioni.

Potete personalizzare le app caricando i font da utilizzare nelle schede della pagina di ricerca, nelle visualizzazioni app e negli articoli HTML. Potete inoltre modificare i colori utilizzati nelle diverse viste app, ad esempio il menu dell'app, le barre di navigazione e i prompt di accesso.

 

Utilizzo di font personalizzati

Potete utilizzare la sezione Font e personalizzazione app del portale per caricare font personalizzati da utilizzare nelle schede di layout, negli articoli HTML e nelle viste delle app, ad esempio il menu dell'app.

Per fare riferimento ai font negli articoli HTML, consultate Creazione di articoli HTML per AEM Mobile: Utilizzo di font condivisi.

  1. Nel portale, fate clic su Contenuti e layout, quindi fate clic su Font e personalizzazione app. Selezionate la scheda Font.

    customize_fonts_main
  2. Per aggiungere i font singolarmente, fate clic su Aggiungi > Aggiungi font.

  3. Trascinate i file dei font nella sezione Aggiungi font oppure fate clic sul pulsante Sfoglia e specificate il file del font.

    Dopo aver trascinato e rilasciato il file del font, viene aggiunto automaticamente il nome font.

    Per migliorare le prestazioni e ridurre le dimensioni dell'app, è consigliabile limitare i font caricati per includere solo i font che pianificate di utilizzare nell'app.

    Aggiunta di font
  4. Terminato il caricamento dei font, specificate il font al momento della modifica delle schede e dei layout, della creazione di articoli HTML o della personalizzazione delle viste dell'app.

    Scegliete i font da un elenco a discesa
    Scelta di un font caricato durante la modifica di una scheda di layout.

  5. Create o ricreate l'app personalizzata per visualizzare i font in anteprima.

    L'app AEM Preflight non consente la visualizzazione di font personalizzati. Ogni volta che si aggiungono o si modificano i font, dovete creare o ricreare l'app per visualizzare le modifiche.

    Consultate Visualizzazione in anteprima del contenuto del progetto per AEM Mobile.

Nota:

assicuratevi di disporre delle licenze adeguate per utilizzare il font nella vostra app.

Aggiungere font in blocco

Invece di aggiungere i font uno per volta, potete trascinare e rilasciare più file in una finestra.

  1. Nella sezione Font e personalizzazione app del portale, fate clic su Aggiungi > Aggiungi font in blocco.
  2. Selezionate i file di font che desiderate caricare in una finestra Finder o Esplora risorse, quindi trascinate e rilasciate i file di font selezionati sull'icona.
  3. Controllate l'elenco dei font da caricare. Selezionate il font che non desiderate caricare e fate clic sull'icona meno ( – ) che viene visualizzata. Fate clic su Carica per caricare i font.

Font dispositivo e font Web

Per visualizzare il font nei telefoni e nei tablet è necessario solo il font dispositivo. Tuttavia, per ogni font utilizzato, consigliamo di caricare sia il font dispositivo (OpenType o TrueType) che il font Web (.woff). I font dispositivo sono utilizzati nelle pagine di ricerca del telefono e del tablet. I font Web vengono utilizzati in Desktop Web Viewer, nelle app Windows (se non è possibile installare .otf o .ttf) e per la visualizzazione in anteprima dei font nelle schede.

Con la licenza font giusta si dovrebbe disporre dell'accesso alla versione .woff del font. In genere è inclusa nel pacchetto di licenza dei font. Per informazioni dettagliate, contattate il licenziatario.

I font a cui avete accesso tramite Adobe Typekit non sono disponibili per il caricamento.

 

Nota:

ogni volta che aggiungete un nuovo font, dovete rigenerare l'app per renderlo disponibile.

Utilizzo dei font nelle app Windows

Windows applica le regole di utilizzo dei font incluse nei font dalla fonderia. Se il font non è contrassegnato come “installabile” dalla fonderia, il sistema operativo Windows si rifiuterà di caricarlo. È possibile verificare se il font è contrassegnato come “Installabile” facendo clic con il pulsante destro del mouse sul font e visualizzando le proprietà. Per risultati ottimali, includete una versione Web del font (.woff) per le app Windows.

Personalizzazione delle viste dell'app

Potete specificare colori e font diversi per le diverse viste che compaiono nell'app, inclusi la barra di navigazione app, il menu dell'app e le schermate di accesso e paywall. Potete inoltre mostrare o nascondere il menu dell'app o l'opzione Account nel menu dell'app e potete sempre mostrare o nascondere la Barra di navigazione.

Tenete presente quanto segue:

  • L'immagine di anteprima Personalizzazione app non fornisce una rappresentazione completamente precisa. Accertatevi di verificare i colori e i font della personalizzazione app creando un'app personalizzata.
  • Le impostazioni relative ai temi dei colori (Tema chiaro, Tema scuro o Tema personalizzato) sono impostazioni globali che si applicano a tutte le viste di ciascuna piattaforma. Tema chiaro e Tema scuro sono predefiniti e non possono essere modificati. Se modificate qualsiasi colore o impostazione font, il tema passa a Personalizza.
  • Accertatevi di fare clic su Salva per salvare il lavoro prima di allontanarvi. Salva si applica solo alla piattaforma corrente.

Video Personalizzazione app

Video Personalizzazione app
Questo video illustra le nuove funzionalità di personalizzazione app rilasciate nelle versioni 2016.14 e 2017.1.

  1. Nel portale, fate clic su Contenuti e layout, quindi fate clic su Font e personalizzazione app. Selezionate la scheda Personalizzazione app.

    customize_allscreens
  2. Specificate la piattaforma (iOS o Android).

    Le impostazioni specificate si applicano solo alla piattaforma selezionata. In questa fase, il salvataggio delle impostazioni di personalizzazione non è disponibile, pertanto è necessario specificare le impostazioni di personalizzazione app separatamente per iOS e Android.

  3. Selezionate la vista Tutte le schermate. Per utilizzare un'impostazione predefinita, scegliete Tema chiaro o Tema scuro. Se modificate le impostazioni di colore o font, viene selezionato automaticamente Tema personalizzato. Per le impostazioni personalizzate, avviate la vista Tutte le schermate, quindi selezionate le impostazioni di colore e font che desiderate utilizzare.

    Quando viene selezionata l'opzione Tutte le schermate, le modifiche apportate vengono applicate a tutte le viste. Potete quindi ignorare le impostazioni di colore e font personalizzate per ogni singola vista.

    Nota:

    le impostazioni di font e colore sono associate a ciascun tema: Tema chiaro, Tema scuro e Tema personalizzato. Quando selezionate un tema diverso, le impostazioni di font e colore vengono reimpostate.

  4. Nella vista Tutte le schermate specificare le impostazioni relative ai gesti per l'app.

    Pizzicate per zoom – Specificate se abilitare o disabilitare il gesto di pizzicare per zoom per ciascun tipo di articolo. Se disabilitate questa opzione, gli utenti non potranno pizzicare per ingrandire o ridurre la visualizzazione articolo.

    • L'opzione Articoli raster include articoli basati su InDesign e articoli basati su PDF in cui l'opzione “Adattare una pagina completa allo schermo” è selezionata.
    • L'opzione Articoli PDF include articoli PDF in cui l'opzione “Adattare una pagina completa allo schermo” non è selezionata.
    • L'opzione Articoli HTML include articoli basati su HTML.

    Pizzica per chiudere (solo iOS): sugli iPad, potete pizzicare per uscire dalle pagine di ricerca e tornare alla visualizzazione precedente. Specificate se abilitare o disabilitare questo gesto.

    Scorrimento Bezel (solo iOS): nelle app iOS, potete scorrere da sinistra per tornare alla visualizzazione precedente o visualizzare Menu app dalla visualizzazione di livello principale. Specificate se abilitare o disabilitare questo gesto.

    customize_gestures
  5. Selezionate la singola vista app scegliendo un'opzione dal menu o facendo clic sulle frecce di navigazione, quindi specificate le impostazioni di colore personalizzate e le impostazioni di font per quella singola vista.

    customize_app_appmenu2
  6. Per nascondere l'opzione di Menu app o Account, andate alla vista Menu app. Fate clic sull'icona Menu app per attivarla o disattivarla. Oppure, fate clic sull'opzione Accedi per attivare o disattivare l'opzione Account.

    Quando Menu app è disattivato, il menu dell'app non può essere visualizzato nell'app.

    Quando Accedi è disattivato, l'opzione “Account” non viene visualizzata nella parte inferiore del Menu app.

    Quando la barra dei menu è nascosta, potete utilizzare i formati navto e goto per fornire collegamenti di navigazione e attivare funzionalità quali Cerca. Consultate Collegamenti ipertestuali negli articoli AEM Mobile.

    Se nascondete l'opzione Accedi (opzione Account nell'interfaccia utente) o la barra dei menu potete utilizzare HTML e le API JavaScript Cordova per consentire agli utenti di effettuare l'accesso e disconnettersi. Per il codice di esempio che consente a un utente di accedere tramite un banner dinamico, consultate Creazione di banner e di banner dinamici: Banner dinamici.

  7. Per modificare il comportamento della barra di navigazione, navigate fino alla vista Barra di navigazione app. Scegliete dalle seguenti opzioni per tablet e telefono.

    Impostazione predefinita: la barra di navigazione viene visualizzata solo quando l'utente tocca un'area dell'articolo non interattiva. La barra di navigazione nasconde il contenuto dell'articolo se visualizzata.

    Sempre visibile: se si seleziona questa opzione, la barra di navigazione viene visualizzata nella parte superiore delle schermate di navigazione e gli articoli e non possono essere nascosti. Quando la barra di navigazione è impostata per essere visualizzata sempre, il contenuto nella parte superiore dell'articolo non viene nascosto. Gli articoli HTML iniziano nella parte superiore dello schermo sotto la barra di navigazione. Gli articoli con layout fisso vengono ridotti e viene aggiunto l'effetto letterbox.

    app_customization_example
    Quando la barra di navigazione è impostata su Sempre visibile, il contenuto a layout fisso viene ridotto e viene aggiunto l'effetto letterbox.

    Sempre nascosta: se si seleziona questa opzione, la barra di navigazione e la barra di stato vengono disabilitate e nascoste. Quando la barra di navigazione è nascosta, potete utilizzare i formati navto e goto negli articoli per fornire collegamenti di navigazione e attivare funzionalità quali il pulsante Indietro e le opzioni Condivisione social network. Consultate Collegamenti ipertestuali negli articoli AEM Mobile.

    Barra di stato visibile e barra di navigazione nascosta: se si seleziona questa opzione, la barra di navigazione viene disabilitata e nascosta, e la barra di stato viene sempre visualizzata. Il contenuto dell'articolo viene visualizzato sotto la barra di stato e ridimensionato, e se necessario, viene aggiunto l'effetto letterbox.

    app_customization_navbars
  8. Fate clic su Salva per salvare le impostazioni per la piattaforma corrente.

    Facendo clic su Salva le impostazioni per la piattaforma corrente vengono salvate. Se lavorate contemporaneamente su piattaforme iOS e Android, accertatevi di fare clic su Salva per ciascuna piattaforma.

  9. Generare o rigenerare l'app personalizzata per visualizzare le impostazioni dell'app personalizzate.

    I font caricati e le impostazioni app personalizzate sono integrate nell'app. Ogni volta che caricate nuovi font o modificate le impostazioni di personalizzazione app, è necessario rigenerare l'app per visualizzare le modifiche.

    L'app AEM Preflight non visualizza le impostazioni di personalizzazione dell'app.

    Consultate Visualizzazione in anteprima del contenuto del progetto per le app AEM Mobile.

Altri metodi di personalizzazione app

Oltre a utilizzare la sezione Font e personalizzazione app del portale, potete apportare altre modifiche alla personalizzazione.

  • Nelle impostazioni progetto potete specificare un'immagine marchio in modo che appaia nel menu.
  • Durante la creazione dell'app, potete stabilire se il telefono è a doppio orientamento (iOS), solo verticale o solo orizzontale. Per le app iOS e Android, potete inoltre determinare se l'app funziona sui cellulari, sui tablet o su entrambi.
  • Nelle impostazioni raccolta potete determinare se consentire lo scorrimento orizzontale per passare ad articoli diversi. Potete inoltre determinare se una raccolta appare come una pagina di ricerca o si apre sul primo elemento della raccolta. Inoltre, potete consentire agli utenti di salvare le raccolte per la visualizzazione offline.
  • Utilizzate i modelli di layout per stabilire l'aspetto delle pagine di ricerca della raccolta.
  • Potete abilitare funzionalità quali condivisione social network, adesione e ricerca.

 

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online