Video Modelli di layout e progettazione

Video Modelli di layout e progettazione
Progettate l'aspetto e i contenuti dell'app mobile mediante i modelli di layout e le schede (8 min).
Adobe

Informazioni su layout, schede e pagine di ricerca

Un modello di layout determina il modo in cui viene visualizzata una raccolta in una pagina di ricerca. Gli elementi in una raccolta vengono visualizzati nel layout della pagina di ricerca come schede. Quando create un modello di layout, effettuate una delle seguenti operazioni:

  • Definizione delle proprietà di layout, ad esempio il numero di colonne, i valori relativi a margine e rilegatura, la forma delle celle.
  • Creazione di schede e definizione dell'aspetto di queste.
  • Definizione delle regole di mapping in base ai metadati per determinare il contenuto associato alle schede.

L'aspetto della pagina di ricerca è determinato dal design del layout, dai design delle schede e dalle impostazioni di metadati degli elementi della raccolta.

Pagina di ricerca con un layout a 3 colonne
Questa pagina di ricerca utilizza un layout a 3 colonne. Il layout include schede a larghezza completa, 2x1 e 1x1 che rappresentano banner, articoli e altre raccolte.

Le schede consentono di determinare l'aspetto del contenuto nella pagina di ricerca. Le immagini in miniatura possono essere visualizzate in modo diverso sulle schede di differenti misure, a seconda delle impostazioni di layout. Ad esempio, un'immagine in miniatura che un tempo veniva rappresentata in una scheda 3x1 può passare a una scheda 1x1 se i metadati vengono aggiornati.

Layout schede
L'area gialla rappresenta la stessa scheda 2x2 visualizzata in un layout a 3 colonne (sinistra) e a 5 colonne con proporzioni della cella differenti (destra).

Tenete presente quanto segue:

  • All'interno di un modello di layout potete definire diversi tipi di layout (talvolta denominati “rappresentazioni”) per tablet, telefoni e Web.
  • Il blocco delle schede su una specifica posizione della griglia non è ancora supportato.
  • L'uso delle regole di mappatura per determinare l'ordine del contenuto non è ancora supportato. Le regole di mappatura determinano il contenuto che viene applicato alle schede.

Utilizzo dei modelli di layout per creare schede e layout

Lo strumento di creazione Sfoglia pagina è un nuovo metodo per creare schede e layout. Al momento, potete utilizzare sia lo strumento di creazione Sfoglia pagina che le schede esistenti Schede e Layout per progettare le pagine di ricerca.

Con lo strumento di creazione Sfoglia pagina, potete utilizzare la stessa interfaccia per creare layout, progettare schede ed eseguirne il mapping ai contenuti. Durante il processo di creazione, potete specificare una raccolta esistente da visualizzare mentre regolate le impostazioni della pagina di ricerca. Potete modificare la dimensione del dispositivo di destinazione, attivare e disattivare una griglia e fare clic su un'area della scheda per modificare le impostazioni per quell'area di testo o dell'immagine. Inoltre, potete riordinare gli elementi nella raccolta importata.

Potete importare i layout già creati per creare una nuova versione basata sulle impostazioni del layout esistente.

I modelli di layout richiedono un'app creata con la release 2015.8 (dicembre 2015) o versioni successive.

 

  1. Create una raccolta e aggiungete contenuto.

  2. Nel portale on-demand (https://aemmobile.adobe.com), fate clic su Contenuto e layout > Modelli di layout.

  3. Fate clic su Crea per definire un modello di layout da zero.

  4. Definite le proprietà di layout.

    Definite le proprietà di layout

    Sul lato destro dello strumento di layout Sfoglia pagina specificate un nome di layout e definite le proprietà di layout quali il numero di colonne e la spaziatura di margini e rilegatura.

    Importa raccolta

    Fate clic su Importa raccolta e importate una delle raccolte, per vedere in che modo le modifiche influiscono sul contenuto di destinazione. Quando salvate il layout, potete scegliere di applicarlo alla raccolta. Potete persino riorganizzare gli elementi all'interno delle raccolte. Tali modifiche alla raccolta vengono conservate quando salvate il modello di layout.

    Menu Anteprima

    Utilizzate il menu di anteprima per selezionare l'orientamento orizzontale o verticale. Selezionate una dimensione dispositivo destinazione. Quando apportate modifiche al layout, selezionate dimensioni di dispositivo diverse per la visualizzazione in anteprima, per assicurarvi che il progetto funzioni su tutti i dispositivi di destinazione.

  5. Create le schede

    Create le schede

    Fate clic sul segno più per creare una scheda. Nel pannello più a destra specificate un nome scheda e modificate le impostazioni. Le opzioni nel pannello più a destra cambiano a seconda dell'area della scheda selezionata.

    Per modificare l'area di testo, espandete le proprietà della scheda sul lato sinistro e selezionate l'elemento sul quale desiderate lavorare, ad esempio Immagine e Area testo. Se non desiderate visualizzare i metadati scheda, fate clic sull'icona Nascondi accanto ai metadati.

    Potete inoltre fare clic sull'area di anteprima centrale per modificare le impostazioni per quell'area. Sperimentate con le impostazioni al di sopra dell'area di anteprima per modificare lo zoom, visualizzare il layout o la scheda oppure mostrare o nascondere il contenuto.

  6. Definite le regole di mapping per le schede.

    Definite le regole di mapping per le schede

    Fate clic su “Mapping”, quindi fate clic su “Aggiungi ruolo” accanto alla scheda selezionata.

    Definite le proprietà di mapping. Ad esempio, potete impostare una regola per i banner con un'importanza elevata. Quando impostate le regole di mapping, potete visualizzare in anteprima quale contenuto della raccolta è assegnato a una determinata scheda.

    Trascinate gli elementi nella raccolta per modificarne l'ordine. Quando salvate il modello di layout, queste modifiche vengono applicate.

  7. (Facoltativo) Create layout aggiuntivi (denominati “rappresentazioni”) per definire impostazioni di aspetto diverse per tablet, telefoni e Web, come descritto in seguito.

  8. Salvate e chiudete il modello di layout.

    Quando salvate il modello di layout, vi viene richiesto di applicare il modello di layout alla raccolta importata, se il layout non è stato assegnato a tale raccolta.

  9. Assegnate il modello di layout alle raccolte.

    È possibile assegnare il modello di layout a una raccolta sia durante la modifica del modello di layout, sia quando si modifica Proprietà raccolta.

    Assegnate un layout a una raccolta.

Impostazioni del layout

Il layout consente di determinare l'aspetto delle pagine di ricerca della raccolta.

Se desiderate utilizzare layout diversi per telefoni e tablet, definite più layout (denominati “rappresentazioni di layout”) all'interno di un modello di layout, come descritto in seguito. 

Specificate le seguenti impostazioni.

Proporzioni della cella

Utilizzate questa opzione per modificare la forma della cella, che viene espressa nel rapporto width:height. Ad esempio, una cella 1:1 è quadrata, una cella 4:3 è più larga che alta e una cella 3:4 è più alta che larga. Se specificate un numero positivo, ad esempio 3,5, create una proporzione cella di 3.5:1.

Colonne

Specificate il numero di colonne. Una scheda non può disporre di un numero di colonne superiore rispetto al layout.

Unità margini di rilegatura

Indicate se desiderate utilizzare i DIP o le percentuali per specificare i valori di rilegatura e margini. Le rilegature determinano la spaziatura tra le schede. I margini determinano la spaziatura tra i margini esterni della scheda e l'area di visualizzazione del dispositivo.

Colore di sfondo del layout

Specificate un colore per lo sfondo della pagina di ricerca. Questo colore appare nei margini e nelle rilegature e può essere visualizzato attraverso la trasparenza della scheda.

Immagine di sfondo

Se selezionate questa opzione, l'immagine specificata per l'Immagine di sfondo della raccolta viene visualizzata nella pagina di ricerca. Se si specificano Immagine di sfondo e Colore di sfondo del layout, Immagine di sfondo ha la precedenza. Se Immagine di sfondo include la trasparenza, viene visualizzato il colore di sfondo. Immagine di sfondo è a schermo intero e viene ridimensionata in modo da essere adattata. Inoltre, è statica. Le schede scorrono davanti allo sfondo della raccolta.

Impostazioni scheda

Quando create una scheda, vengono specificate le caratteristiche del design, viene definito il numero di celle di layout alle quali sono applicate e vengono specificate altre proprietà. Tuttavia, non viene specificato il contenuto associato alla scheda. Tale operazione viene eseguita quando si configurano le regole di mapping.

La dimensione effettiva della scheda è determinata dal layout cui la scheda è applicata. Ad esempio, una scheda 3x2 applicata a un layout a 3 colonne avrà un aspetto molto diverso da una scheda 3x2 applicata a un layout a 12 colonne.

Quando specificate le impostazioni, l'area della visualizzazione dell'anteprima mostra l'aspetto approssimativo della scheda utilizzando il contenuto della raccolta importata.

Quando specificate le impostazioni per le schede, è importante capire concetti quali il modo in cui i diversi elementi della scheda interagiscono tra loro.

Ordine o gerarchia

Lo sfondo della scheda si sovrappone al layout. L'area delle immagini della scheda si sovrappone allo sfondo della scheda. L'area del testo della scheda si sovrappone all'area delle immagini della scheda.

Immagini della scheda

Le immagini per le raccolte, gli articoli e gli sfondi delle raccolte vengono centrate, ridimensionate e ritagliate secondo necessità per riempire l'area delle immagini della scheda.

Le schede sono visibili in una pagina di ricerca delle raccolte. Le schede possono avere determinate proprietà che sono semi-trasparenti e rivelare il colore di sfondo o l'immagine per la raccolta. Alcune parti di una scheda possono essere semi-trasparenti e aumentare la leggibilità del testo o della tinta dell'immagine di una scheda; tuttavia, le immagini sono opache.

Formato scheda

Quando specificate un formato scheda “Immagine a sinistra” e “Immagine a destra”, accertatevi che il layout utilizzato per la scheda lasci lo spazio sufficiente affinché l'area delle immagini e i metadati del testo vengano visualizzati affiancati. Per evitare che l'area di testo venga ritagliata, potrebbe essere necessario modificare le proporzioni della cella del layout o aumentare la larghezza della cella.  

Sfondi, bordi e margini

Una scheda può avere un colore e una trasparenza. Il colore della scheda serve da sfondo per l'immagine della scheda e le aree di testo.

Lo sfondo della scheda può essere coperto da immagini, aree di testo e bordi. L'area delle immagini e quella del testo sono davanti allo sfondo della scheda. Le immagini e le aree di testo sono dotate di margini.

I margini spostano l'area delle immagini e quella del testo lontano dal bordo della scheda. La specifica dei margini consente di rivelare lo sfondo semi-trasparente della scheda. Le immagini possono avere sovrapposizioni di colore con trasparenza per colorare un'immagine. Le aree di testo, inoltre, possono disporre della spaziatura, che consente di spostare le etichette (metadati) lontano dal margine dell'area di testo.

Le aree di testo dispongono, inoltre, di sfondi di colore che supportano la trasparenza. Potete utilizzare sfondi di colore per aggiungere contrasto o rendere il testo più leggibile.

I bordi sono non trasparenti e spingono tutti gli elementi dentro il margine della scheda. Se desiderate un margine della scheda semi-trasparente e in grado di interagire con lo sfondo del layout, utilizzate i margini per le aree di immagine e quelle di testo. Se desiderate spazio tra le schede, utilizzate la rilegatura nel layout.

Opzioni delle impostazioni scheda
L'area delle immagini è al di sopra dello sfondo scheda. L'area di testo della scheda è al di sopra dell'area delle immagini della scheda.

DIP (Device Independent Pixels)

Con l'acronimo DIP si intende un'astrazione di un pixel utilizzata da un'app che viene poi convertita in pixel fisici da un sistema sottostante. Ad esempio, se specificate un bordo di 10 dip la rappresentazione sarà identica su un iPad 1024x768 SD e su un iPad HD 2048x1536.

Campi dei metadati

Quando definite i campi dei metadati, potete includere testo e due elementi di metadati all'interno dello stesso campo. Se, ad esempio, definite il campo dei metadati come {{title}} di {{author}}, nella scheda verranno visualizzati i metadati dell'articolo, quali “Pesca in Argentina di Jane Doe”. In alternativa, potete creare campi separati per {{title}} e {{author}} in modo che i metadati vengano visualizzati su righe diverse della scheda.

Se il contenuto mappato alla scheda non include i metadati per il campo specificato, il campo viene ignorato a meno che includa testo aggiuntivo, come quello relativo all'autore di {{author}}. Per impostazione predefinita, le schede includono tre campi di metadati. Fate clic sull'icona a forma di occhio nel riquadro più a sinistra per nascondere o visualizzare ciascun campo di metadati.

Quando scegliete l'elemento di metadati {{Published Date (Default)}}, per determinare il formato vengono utilizzate le impostazioni e la lingua del dispositivo. Ad esempio, la data viene visualizzata come MM/GG/AAAA in inglese (US) e GG/MM/AAAA in tedesco.

Potete selezionare qualsiasi font caricato tramite la sezione Font e personalizzazione app del portale. Consultate Personalizzazione di app AEM Mobile: Utilizzo di font personalizzati.

Mappatura del contenuto alle schede

Impostando le regole di mapping si determina quali schede vengono applicate al contenuto in base ai metadati. Ad esempio, potete creare una regola di mappatura che applica una scheda grande a qualsiasi articolo con priorità impostata su “Alta” e creare una seconda regola di mappatura che applica una scheda più piccola a qualsiasi articolo con priorità impostata su “Normale”.

Per ciascun contenuto, le regole di mappatura vengono valutate in sequenza. Viene applicata la prima regola di mappatura che corrisponde ai metadati di contenuto. Il contenuto deve essere conforme a tutte le impostazioni regole specificate. Ad esempio, se la regola di mappatura include Tipo impostato su Banner e Importanza impostata su Alta, il contenuto deve essere un banner con importanza elevata affinché la regola sia applicata.

Supponete, ad esempio, di aver creato una scheda 3x1 e una scheda 1x1. Create la prima regola di mappatura con Tipo=Articoli e Importanza=Alta. Per la scheda 1x1, create una seconda regola di mappatura senza metadati specificati. In questo esempio, la regola 3x1 dovrebbe essere prioritaria rispetto alla regola 1x1; in caso contrario, gli articoli di importanza elevata, verranno assegnati a schede 1x1.

I metadati utilizzati nelle impostazioni regola sono sensibili alle maiuscole/minuscole. La creazione di una regola con una parola chiave interna “blu” non si applica al contenuto con la parola chiave interna“Blu”. Se il contenuto include più parole chiave, la regola di mappatura necessita di un sola parola chiave per conformarsi a tal impostazione.

La mappatura scheda non determina l'ordine del contenuto in una pagina di ricerca. Determina solo quale contenuto viene mappato alle schede.

Regola attiva

Utilizzate l'opzione “Regola attiva” per applicare una scheda solo a un numero specificato di elementi che corrispondono ai criteri. Ad esempio, potete creare una regola di mapping che applica una scheda ampia solo al primo elemento della raccolta. Al momento della modifica della regola, selezionate Regola attiva > A volte, e specificate il numero di elementi ai quali desiderate applicare questa regola.

In questo esempio, la regola applica la scheda grande solo al primo elemento della raccolta.

Mappa elementi

Utilizzate l'opzione “Mappa elementi” per applicare una scheda ogni n schede che corrispondono ai criteri. Ad esempio, se desiderate creare schede alternative, create una scheda che applica la regola a schede alterne, a partire dal primo elemento che corrisponde alla regola. In questo esempio, a partire dal secondo elemento si procederà a formattare un elemento sì e uno no in base alla regola successiva che corrisponde ai criteri.

Tale regola applica la scheda a elementi alterni. La regola di qualificazione successiva viene applicata agli altri elementi in alternanza.

Rappresentazioni di layout per telefoni e tablet

 

Le rappresentazioni di layout offrono flessibilità di progettazione, consentendo di definire i diversi aspetti per la stessa raccolta su tablet, telefoni e Desktop Web Viewer. Grazie a questa nuova funzione, ora è possibile fornire lo stesso contenuto per tutte le piattaforme e i dispositivi supportati, continuando a mantenere il controllo della progettazione. Quando create un modello di layout, potete definire impostazioni di layout e scheda diverse per tablet, telefoni e Web. Le impostazioni di rappresentazione per ciascun dispositivo di destinazione determinano quindi l'aspetto della pagina di ricerca, a seconda del dispositivo.

Le rappresentazioni di layout si rivelano particolarmente utili per i progetti con una sola raccolta di primo livello, ma possono essere efficaci anche per progetti con due raccolte di primo livello nei quali utilizzate le stesse raccolte per telefoni e tablet.

Nei seguenti esempi, le schede in questo modello di layout hanno un aspetto diverso su tablet e telefoni.

Quando create un modello di layout, inizialmente viene creata solo la rappresentazione per tablet. Si tratta della rappresentazione predefinita che si applica a tablet, telefoni e Web, a meno che non viene aggiunto un nuovo layout telefono o Web. Quando aggiungete un layout (altrimenti denominato “rappresentazione”) per il telefono o per il Web, questo eredita le impostazioni dalla rappresentazione per tablet predefinita. Da quel momento, eventuali modifiche apportate alle impostazioni della scheda o del layout si applicano solo a tale rappresentazione (le regole di mapping della scheda si applicano a tutte le rappresentazioni).

Nota:

se create un layout in anticipo all'interno del processo e in seguito vi rendete conto di averlo creato troppo presto, potete eliminarlo, modificare le impostazioni relative a tutte le rappresentazioni e quindi ricreare la rappresentazione.

  1. Create un modello di layout. Create schede e applicate regole di mapping. Specificate le impostazioni che si applicano a tutti i dispositivi di destinazione.

    Di regola, è consigliabile cominciare con il layout tablet, aggiungere le schede e le regole di mapping, quindi modificare le impostazioni scheda e layout valide per tutti i dispositivi. Quindi, create un layout telefono e modificate le impostazioni valide unicamente per il telefono (e successivamente il Web, se necessario). In tal modo, eviterete di specificare le stesse impostazioni per ciascuna rappresentazione.

  2. Per creare una rappresentazione telefono, fate clic su Telefono > Aggiungi layout, quindi fate clic su Crea layout. Con l'opzione Telefono selezionata, specificate le impostazioni scheda e layout specifiche per il telefono.

  3. Per creare una rappresentazione per Desktop Web Viewer, fate clic su Web > Aggiungi layout, quindi fate clic su Crea layout. Con l'opzione Web selezionata, specificate le impostazioni scheda e layout specifiche per Desktop Web Viewer.

  4. Salvate il modello di layout e applicatelo alle raccolte. Verificate i risultati.

    Le rappresentazioni di layout richiedono un'app creata con la release 2015.8 (dicembre 2015) o versioni successive.

Per rimuovere un layout, fate clic per visualizzare il menu a discesa del layout, quindi fate clic sull'icona del cestino. Non potete rimuovere il layout predefinito.

Per modificare le dimensioni dell'anteprima di destinazione, scegliete una dimensione diversa del menu del dispositivo.

Per modificare il layout predefinito, fate clic per visualizzare il menu a discesa del layout, quindi scegliete Rendi predefinito. Il layout predefinito viene quindi utilizzato per qualsiasi tipo di dispositivo non specificato. Se, ad esempio, disponete unicamente di layout telefono e tablet e utilizzate il telefono per impostazione predefinita, il layout telefono viene applicato al Web.

Utilizzate il menu per modificare le opzioni di anteprima, impostare un layout predefinito o rimuovere il layout.

Ordine delle schede

In generale, l'ordine del contenuto in una raccolta determina l'ordine del contenuto in un layout. Tuttavia, se la disposizione delle schede lascia degli spazi vuoti nel layout lungo un margine, l'ordine del contenuto può cambiare in quanto gli spazi vuoti del margine possono riempirsi di schede più piccole in posizione inferiore nell'ordine. Supponiamo, ad esempio, che il primo articolo in una griglia a 3 colonne sia una scheda 2x1, il secondo elemento viene mappato a una scheda 3x1 e il terzo a una scheda 1x1. In questo caso, la scheda 1x1 verrà visualizzata nello spazio vuoto nella riga superiore al di sopra del secondo elemento.

Impostazione dell'ordine delle schede
Il terzo elemento si sposta in avanti rispetto al secondo elemento per riempire lo spazio vuoto.

Eliminazione di schede e layout

Per eliminare un layout o un modello di layout, dovete innanzitutto rimuovere tutti i riferimenti al layout dalle raccolte. Nello specifico, modificate le raccolte per assegnare un layout diverso. Dopo aver applicato un layout diverso alle raccolte, è quindi necessario ripubblicare le raccolte qualora fossero state pubblicate precedentemente. Potete quindi annullare la pubblicazione del layout o del modello di layout ed eliminarlo.

Per eliminare una scheda che non appartiene a un modello di layout, dovete innanzitutto rimuovere tutti i riferimenti al layout dalle raccolte. Nello specifico, modificate i layout per rimuovere o modificare tutte le regole di mappatura che fanno riferimento alla scheda. Dopo aver rimosso o modificato le regole di mappatura del layout, è quindi necessario ripubblicare i layout qualora fossero stati pubblicati precedentemente. Potete quindi annullare la pubblicazione della scheda ed eliminarla. Se una scheda fa parte di un modello di layout, potete eliminarla in qualsiasi momento.

Non è possibile eliminare la scheda o il layout predefiniti.

Copia dei layout a un progetto diverso

Potete copiare i modelli di layout da un progetto all'altro all'interno dello stesso account. Se il progetto di destinazione include un modello di layout con lo stesso nome, potete stabilire se sovrascrivere il layout esistente o copiarne uno nuovo.

  1. Selezionate i modelli di layout che desiderate copiare e scegliete Copia layout in un altro progetto.

  2. Nell'elenco dei progetti disponibili nel vostro account, selezionate il progetto in cui desiderate copiare i layout.

  3. Se desiderate sostituire il layout copiato al layout con lo stesso nome presente nel progetto di destinazione, selezionate Sovrascrivi se esiste.

    Se non selezionate questa opzione, viene visualizzato un messaggio di errore nel caso in cui il layout del progetto di destinazione abbia lo stesso nome di quello copiato.

  4. Fate clic su Copia nella destinazione.

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