Restyle Sites restyling
Utilizza l’agente di modernizzazione esperienza per applicare una progettazione durante la migrazione o modificare l’aspetto di un progetto Edge Delivery Services esistente. Copiare fedelmente l’aspetto di un sito sorgente e sostituirlo deliberatamente con un nuovo design è una richiesta diversa. Indicare lo stato desiderato.
L’aspetto risiede nel codice del progetto: i CSS globali impostano l’aspetto del contenuto predefinito e ogni blocco ha i propri CSS e JavaScript. Insieme possono assegnare lo stesso contenuto semantico a qualsiasi progettazione senza ristrutturarlo, perché JavaScript può ricreare il markup nel browser; vedi Come viene creato e aggiornato il tuo sito. Pertanto, un restyle puramente visivo modifica il codice in Git e lascia solo i contenuti creati.
Questa guida è per la persona che conduce un restyle. Se sei un designer che apporta singole modifiche visive esaminate da uno sviluppatore, inizia con Modifica elemento visivo.
Accettare le modifiche e i contenuti prepare
Connetti il progetto e conferma l’autorizzazione per modificarlo. Salva una revisione del codice di base e mantieni il contenuto interessato prima delle modifiche.
Fornisci:
- Origine contenuto: pagine esistenti il cui testo, immagini, collegamenti, metadati e significato devono essere conservati o approvati.
- Documentazione di progettazione: un componente o un frame Figma specifico, un sito Web di riferimento autorizzato, uno screenshot o una specifica di progettazione. Denomina la versione e gli stati desktop e mobile rilevanti.
- Ambito: token globali (proprietà personalizzate CSS per colori, composizione tipografica e spaziatura) e contenuto predefinito, blocchi selezionati, una pagina o l’intero sito.
- Cosa non deve cambiare: contenuto, URL, modelli di authoring, comportamento di accessibilità e integrazioni.
- Output: contenuto che gli autori possono modificare, nell’opzione di archiviazione 🔗 utilizzata dal progetto o un prototipo di progettazione statica, se necessario.
Le schermate e i siti di riferimento possono lasciare non specificate le interazioni e le regole reattive. Posponili in una pagina di esempio prima di applicarli all’intero sito.
Riferimenti, prototipi e consegna design-output
L’agente supporta il lavoro di progettazione da siti di origine, Figma e riferimenti forniti. L’importazione Figma e la riprogettazione guidata sono funzionalità opzionali che offre per attivare il progetto quando una richiesta ne ha bisogno. Hanno input e output diversi; non presumere che funzionino allo stesso modo.
- Per un blocco Figma, fornisci il relativo collegamento componente o nodo. Per una nuova pagina, fornisci un frame specifico anziché un intero file.
- L’importazione di file Figma richiede un token di accesso Figma e l’autorizzazione alla lettura del file. Vedi Lavoro da un design Figma.
- Un’anteprima statica della progettazione di HTML mostra il nuovo design sulle copie delle pagine, per aiutarti a scegliere una direzione. Gli autori non possono modificare tali copie; non si tratta dei documenti del sito o delle pagine Experience Manager.
- Se gli autori devono modificare il risultato, richiedere il contenuto del sito e i modelli di blocco nell’opzione di archiviazione utilizzata dal progetto, quindi controllarli come descritto per contenuto basato su documenti o authoring Experience Manager.
Riprogettazione guidata guided-redesign
La riprogettazione guidata porta un sito, o un insieme delle sue pagine, a una nuova progettazione in più fasi. Viene fornito dal componente aggiuntivo Stardust, stardust@excat-extended. L’agente acquisisce la progettazione corrente, registra la direzione desiderata, crea prototipi prima e dopo per la revisione e quindi trasforma la progettazione approvata in blocchi e contenuti. Utilizzala per una riprogettazione su più pagine anziché per il restyling di una pagina o di un blocco. L’agente mantiene i file di lavoro e l’avanzamento di una riprogettazione nel repository, in modo da poterli continuare in una conversazione successiva.
Non è necessario conoscere le fasi per nome. Descrivi il risultato desiderato, ad esempio “Riprogetta la home page e le pagine dei prodotti in uno stile più leggero e redazionale”, e l’agente propone i passaggi. Puoi anche richiedere un passaggio direttamente:
L’attivazione della riprogettazione guidata attiva anche il componente aggiuntivo design craft, che applica a ogni pagina le linee guida front-end sulla qualità del design. Rivedi ogni fase prima di continuare e convalida il risultato distribuito come descritto di seguito.
Restyle Durante La Migrazione during-migration
Utilizza questo percorso quando il contenuto proviene da un sito web esistente ma la progettazione di destinazione è diversa.
- Completare l’ambito del progetto e della migrazione, inclusa la posizione in cui è archiviato il contenuto.
- Definisci il sistema di progettazione di destinazione: composizione tipografica, colori, spaziatura, contenuto predefinito e blocchi riutilizzabili. Riutilizza le convenzioni di progetto esistenti nella posizione appropriata.
- Per Figma, imposta l’accesso, quindi crea i blocchi o le varianti necessarie da nodi di componenti specifici. Vedi Riprogettazione con blocchi da Figma e Creazione di un blocco da Figma.
- Esegui la migrazione di una pagina di esempio per ciascun modello in tale raccolta blocchi. Mantieni il sito attivo come origine di contenuto e Figma o il riferimento approvato come origine di progettazione.
- Confronta il contenuto con il sito web di origine e l’aspetto con la progettazione di destinazione. Non giudicare la pagina riprogettata in base all’aspetto del vecchio sito.
- Verifica che gli autori possano modificare il risultato e che funzioni a ogni larghezza dello schermo. Correggere le mappature o i modelli di contenuto dove necessario, quindi continuare in batch.
Ad esempio:
Applica la progettazione approvata in
https://www.figma.com/design/AbC123/Brand-Refresh?node-id=12-345durante la migrazione dihttps://www.example.com/products/tents. Le pagine live sono l’origine del contenuto; il riferimento definisce il nuovo aspetto. Mantieni testo, collegamenti, metadati e immagini significative. Seleziona prima una pagina di esempio. Crea contenuti che gli autori possono modificare in Experience Workspace. Non caricare, inviare o pubblicare.
Sostituisci gli URL di esempio con il tuo e, per l’authoring Experience Manager, supponi che il contenuto sia memorizzato in JCR.
Se una nuova pagina non dispone di un sito Web di origine, vedere Creare una nuova pagina da Figma: una cornice specifica fornisce il testo, le risorse e la progettazione. Questo è diverso dal mappare il contenuto del sito web esistente in un nuovo design.
Ripristina un sito esistente existing-site
Non è richiesta una nuova migrazione.
-
Connetti il progetto esistente e il ramo previsto. Chiedi all’agente di leggere le convenzioni di progettazione del progetto, i blocchi e i modelli di authoring.
-
Identifica le pagine della linea di base relative ai modelli e alle varianti interessati. Registra l’aspetto corrente e le interazioni importanti.
-
Indicare la portata del cambiamento e ciò che deve rimanere. Ad esempio:
Ridefinire il progetto esistente utilizzando la progettazione approvata in
https://www.figma.com/design/AbC123/Brand-Refresh. Modificare i colori e la composizione tipografica globali e la presentazione delle schede in/e/products. Mantieni contenuti, URL, modelli, analisi, comportamento da tastiera e integrazioni. Riutilizzare token e blocchi. Mostra prima l’ambito proposto; non reimportare contenuti, né caricare, inviare o pubblicare.Sostituisci l’URL e i percorsi di esempio con i tuoi.
-
Aggiorna prima i token condivisi e gli stili globali dove la modifica è globale. Applica lo stile specifico del blocco solo se necessario.
-
Visualizza l’anteprima di tutte le pagine di esempio interessate, non solo della pagina utilizzata per derivare la progettazione. Includi larghezze dei dispositivi mobili, intestazioni lunghe, contenuto facoltativo mancante e diverse varianti. Una modifica globale del token può interessare pagine esterne all’esempio originale, quindi includi anche quelle.
-
Se il progetto richiede modifiche strutturali o del modello, prendi una decisione separata ed esplicita. Pianifica il modo in cui il contenuto esistente viene spostato nella nuova struttura anziché riscrivere automaticamente il contenuto dell’autore.
-
Rivedi le differenze di codice e i controlli del progetto, quindi invia e consegna tramite il flusso di lavoro del progetto esistente. Le modifiche di stile sono codice: raggiungono il sito attivo non appena il ramo viene unito in
main, quindi controlla prima le pagine interessate nell’URL di anteprima del ramo. Consulta La pubblicazione delle modifiche.
Convalida e recupero validate
Il restyle viene eseguito quando il contenuto rimane corretto, la progettazione approvata funziona a ogni larghezza dello schermo, le interazioni rimangono utilizzabili e gli autori possono comunque modificare, salvare e riaprire le pagine di esempio. Controlla il contrasto, la messa a fuoco, l’ordine di lettura, il significato dell’immagine e i requisiti di prestazioni del progetto. Un punteggio di somiglianza non lo decide per te.
Se il risultato non è corretto, identifica la pagina o il blocco interessato e specifica se si tratta di un token, di uno stile condiviso, di uno stile di blocco, di una struttura o di una mappatura del contenuto. Correggete quel livello e ricontrollate tutte le varianti interessate. Per gli errori di accesso Figma, controlla il collegamento del nodo, le autorizzazioni del file, il token e che l’importazione Figma sia attiva per il progetto prima di riprovare.
Ripristina il codice indesiderato tramite il flusso di lavoro Git del progetto. Ripristinare separatamente i contenuti remoti modificati; il ripristino del codice non annulla i caricamenti. Mantenere la linea di base fino a quando il restyle non viene approvato.
Passa il puntatore del mouse sul riferimento approvato e sulla relativa versione, sui file modificati, sulle pagine interessate, sulle modifiche al modello e al contenuto, sui risultati della verifica, sulle lacune note e su come recuperare codice e contenuto, utilizzando il passaggio di consegne del progetto.