Visuelle Änderungen mit dem Experience Modernization Agent vornehmen visual-changes
Dieses Handbuch richtet sich an Designer und andere, die das Aussehen einer Site ändern: Farben, Schriftarten, Abstände und das Layout der Blöcke. Sie beschreiben eine Änderung am Experience Modernization Agent in der Experience Modernization Console, überprüfen sie in der Vorschau und senden sie zur Überprüfung an einen Entwickler. Der Agent schreibt den Code, sodass Sie weder CSS noch JavaScript schreiben müssen. Ihre Änderungen gelangen jedoch über das Git-Repository zur Website. Daher benötigen Sie die Grundlagen: Sie übertragen Ihre Arbeit an eine Verzweigung und übergeben sie in einer Pull-Anfrage. Wenn diese Begriffe neu für Sie sind, lesen Sie In diesem Handbuch verwendete Wörter.
Bevor Sie beginnen before-you-start
Fragen Sie die Person, die das Projekt leitet, nach Folgendem:
- Zugriff auf die Konsole. Sie melden sich mit Ihrer Adobe ID an. Siehe Öffnen der Experience Modernization Console.
- Die Site, an der gearbeitet werden soll. Sie verbinden das Git-Repository der Site mit Ihrem Konsolenarbeitsbereich, und Sie benötigen Schreibzugriff auf das Repository, um dies zu tun. Siehe Verbinden Ihrer Site.
- Ihr Teil der Arbeit. Legen Sie fest, welche Blöcke, Seiten oder Stile Ihnen gehören, sodass niemand außer Ihnen die gleichen Dateien zur gleichen Zeit ändert. Siehe Mit einer Person beginnen und dann die Arbeit .
- Übergabe. Die meisten Teams schützen die Hauptverzweigung, sodass ein Entwickler jede Änderung überprüft. Fragen Sie, ob Sie mit Neuen PR erstellen pushen. Siehe Übergabe zur Überprüfung.
- Für Figma-Designs, ein Figma-Sitz, der Dateien lesen kann. Siehe Arbeiten aus einem Figma-Design.
Ihre Arbeit verbleibt in Ihrem eigenen Konsolenarbeitsbereich, bis Sie sie per Push übertragen. Nichts, was Sie in der Vorschau versuchen, gelangt von selbst auf die Live-Site.
Was Sie ändern können what-you-can-change
Auf einer Edge Delivery Services-Site schreiben Autorinnen und Autoren den Inhalt, und der Code entscheidet, wie er aussieht. Eine visuelle Änderung ändert daher den Code der Site, hauptsächlich ihre CSS, und lässt den Inhalt, den Autoren eingegeben haben, so wie er ist. Sie müssen Seiten nicht erneut importieren oder hochladen.
Jeder Teil des Codes erreicht einen anderen Teil der Site. Bevor Sie um eine Änderung bitten, entscheiden Sie, wie weit sie reichen soll:
--link-color in den globalen Stilen benannt sind.Varianten, Abschnittsstile und Vorlagen werden nur dort wirksam, wo sie von Autoren angewendet werden. Bitten Sie den Agenten, eine auf die Seite anzuwenden, an der Sie arbeiten, damit Sie sie sehen können, und teilen Sie den Autoren mit, wann sie verwendet werden soll.
Einige Anfragen gehen über das Erscheinungsbild der Website hinaus. Durch das Hinzufügen eines Felds, das von Autorinnen und Autoren ausgefüllt wird, das Ändern der Struktur von Blockinhalten oder das Hinzufügen eines Verhaltens wie eines Karussells wird das Inhaltsmodell des Blocks oder seine Logik geändert. Beschreiben Sie, was Sie benötigen, und überlassen Sie diese Entscheidungen dem Entwickler. Siehe Erstellen, Aktualisieren und Umgestalten von Blöcken.
Änderung auf einige Seiten beschränken impact
Änderungen an einem Block oder an den globalen Stilen wirken sich auf jede Seite aus, die diese verwendet. Bevor Sie nach einem Block fragen, fragen Sie den Agenten, bei dem der Block oder Stil verwendet wird, z. B. „Welche Seiten in meinem Arbeitsbereich verwenden den Kartenblock?“
Wenn eine Änderung nur für einige Seiten gelten soll, fragen Sie stattdessen nach einer der folgenden Seiten:
- Eine Blockvariante, bei der nur einige Instanzen eines Blocks anders aussehen sollten.
- Ein Abschnittsstil, wenn ein Teil einer Seite, z. B. ein hervorgehobener Bereich, ein eigenes Erscheinungsbild benötigt.
- Eine Seitenvorlage wenn ein Seitentyp, z. B. alle Produktseiten, einen eigenen Look benötigt.
Zeig, was du meinst references
Ein Bild ist oft genauer als eine Beschreibung. Verwenden Sie Dateien anhängen (Papierklammer-Symbol) in der Eingabeaufforderung, um Folgendes anzuhängen:
- Ein Screenshot des gewünschten Ergebnisses oder des Problems mit einem Satz darüber, was zu beachten ist.
- Seiten des Markenstils, als Bilder oder als Word- oder PowerPoint-Datei.
Sie können auch auf eine Seite der Website verweisen, die bereits gut aussieht: „Lassen Sie die Karten auf /adventures wie die Karten auf /magazine aussehen.“ Verwenden Sie nur Designs und Referenz-Sites, die Ihr Team verwenden darf.
Der Agent erinnert sich nicht an die Markenregeln zwischen den Gesprächen. Sobald eine Regel festgelegt wurde, z. B. Schaltflächenstile oder Überschriftengrößen, bitten Sie den Agenten, sie in die Anweisungsdateien des Projekts zu schreiben, damit sie in jeder Unterhaltung der Regel folgt. Siehe Projektanweisungen und -speicher.
Arbeiten aus einem Figma Design figma
Der Agent kann ein Design von Figma über das Figma Import Add-on lesen. Dadurch werden die Farben, Typografie, Abstände und Variablen des Designs in die Design-Token der Site und ihre Komponenten in Blöcke oder Blockvarianten umgewandelt.
- Erstellen Sie in Figma ein persönliches Zugriffstoken mit den schreibgeschützten Bereichen, die in den Einstellungen Anmeldeinformationen der Konsole aufgeführt .
- Öffnen Sie in der Konsole Einstellungen geben Sie das Token unter Anmeldeinformationen ein und klicken Sie auf Speichern. Es kann einige Minuten dauern, bis ein neues Token wirksam wird.
- Wählen Sie in Figur eine Komponente oder einen Rahmen aus und kopieren Sie deren Link. Der Link enthält einen
node-id, der Ihre Auswahl identifiziert. - Senden Sie in der Konsole eine Eingabeaufforderung mit dem Link, z. B. „Aktualisieren Sie den Teaser-Block entsprechend dieser Figma-Komponente:
{Figma link}. Verwenden Sie unsere vorhandenen Design-Token wieder.“
Was Sie wissen sollten:
- Jeweils eine Komponente oder ein Frame. Der Agent erstellt einen Block aus einer Komponente oder eine Seite aus einem Frame. Überprüfen Sie jedes Ergebnis, bevor Sie den nächsten Link senden. Siehe Erstellen eines Blocks aus Figma und Erstellen einer neuen Seite aus Figma.
- Ihr Token, Ihre Dateien. Das persönliche Zugriffstoken liest jede Figma-Datei, die Sie öffnen können, und nichts anderes. Die FIGMA gibt sie heraus und setzt ihre Grenzen. Jede Person speichert ihr eigenes Token. Es hat nichts mit Design-Token zu tun, den Farben und dem Abstand, den der Agent vom Design liest.
- Ihr Figmasitz. Sie benötigen einen Dev oder Full Figma Sitz; siehe Figma und Design Systeme. Wenn die Konsole einen Figma-API-Fehler mit dem Status 429 meldet, hat das Token das Figma- erreicht.
- Das Add-on. Der Figma-Import ist eine optionale Funktion. Wenn es für Ihr Projekt nicht aktiviert ist, bietet der Agent an, es einzuschalten.
- Design-Token. Vergleichen Sie die neuen Token mit den vorhandenen. Wenn sich ein Figma-Wert nur geringfügig von einem vorhandenen Token unterscheidet, entscheiden Sie, welches beibehalten werden soll, anstatt beide beizubehalten.
Was Ihr Unternehmen genehmigt, bevor Personen Figma mit dem Agenten verwenden, finden Sie unter Figma und Design-Systeme.
Nehmen Sie Ihre erste Änderung vor first-change
- Öffnen Sie eine Seite im Vorschaufenster der Konsole.
- Wählen Sie im Viewport die Breite aus, die Sie überprüfen möchten: Desktop, Tablet oder Mobile.
- Aktivieren Sie Inspektionsmodus über das Auswahlsymbol im Vorschaubereich.
- Wählen Sie das Element aus, das Sie ändern möchten, z. B. eine Überschrift, ein Bild oder eine Schaltfläche. Das Element wird Ihrer Eingabeaufforderung hinzugefügt: Der Agent erhält seine HTML und seine Position auf der Seite und beschränkt seine Änderungen auf dieses Element.
- Beschreiben Sie die Änderung und ihren Umfang. Senden Sie dann die Eingabeaufforderung. Beispiel: „Verwenden Sie für diese Schaltfläche unseren primären Stil, hier und auf jeder Seite.“
- Wenn der Agent abgeschlossen ist, wählen Sie Vorschau aktualisieren, wenn die Vorschau nicht aktualisiert wurde. Überprüfen Sie das Ergebnis bei jeder Größe Viewport.
- Wenn etwas nicht stimmt, sagen Sie, was Sie sehen, z. B. „Auf einem Mobilgerät berührt der Text das Bild.“ Bitten Sie jeweils um eine Änderung, und überprüfen Sie sie, bevor Sie die nächste anfordern.
Um eine Änderung rückgängig zu machen, bitten Sie den Agenten, sie rückgängig zu machen. Um alle nicht gepushten Änderungen in einer Datei abzulegen, öffnen Sie die Ansicht Änderungen und wählen Sie Verwerfen neben der Datei aus. Siehe Änderungen Aktionen.
Wenn der Agent nach einigen Versuchen immer noch keine Änderung erhält, fragen Sie Ihren Entwickler oder wählen Sie Support anfordern in der Menüleiste aus und beschreiben Sie, worum Sie gebeten haben und was Sie sehen. Ihre Anfrage erreicht das Team, das den Agenten erstellt. Wenn ein Gespräch nicht gut läuft, kann die Konsole auch Hilfe unter Brauchen Sie Hilfe? Siehe Support anfordern.
Beispiel-Eingabeaufforderungen example-prompts
- „Verwenden Sie für alle Überschriften die Schriftart für Überschriften aus dem angehängten Stilhandbuch.“
- „Geben Sie den Karten im Kartenblock die gleiche Höhe, wobei ihre Schaltflächen unten ausgerichtet sind.“
- „Fügen Sie eine
darkVariante des Teaser-Blocks mit weißem Text auf unserer dunklen Markenfarbe hinzu und wenden Sie ihn auf den zweiten Teaser auf/adventuresan.“ - „Fügen Sie einen
highlightAbschnittsstil mit hellem Hintergrund und mehr Platz über und unter hinzu und verwenden Sie ihn für den Newsletter-Abschnitt auf der Startseite.“ - „Stapeln Sie auf einem Mobilgerät die Spalten und platzieren Sie das Bild über dem Text.“
- „Welche Seiten in meinem Arbeitsbereich verwenden den Hero-Block? Zeigen Sie mir, wie jeder Einzelne auf diesen Wechsel reagiert.“
- „Schreiben Sie die Schaltflächenstile, auf die wir uns geeinigt haben, in die Anweisungsdateien des Projekts.“
Vor der Übergabe prüfen check
- Überprüfen Sie die Größe Viewports, insbesondere Mobile.
- Markieren Sie andere Seiten, die denselben Block, denselben Stil oder dieselbe Vorlage verwenden, und nicht nur die Seite, an der Sie gearbeitet haben.
- Überprüfen Sie, wie das Design mit echten Inhalten umgeht: lange Überschriften, kurze Überschriften, fehlende Bilder und Listen mit vielen Elementen.
- Vergewissern Sie sich, dass der Text vor dem Hintergrund lesbar bleibt. Sie können den Agenten fragen: „Überprüfen Sie den Farbkontrast von Text im Teaser-Block im Vergleich zu WCAG AA.“
- Öffnen Sie nach dem Pushen die in der Pull-Anfrage aufgelisteten Vorschau-URLs und überprüfen Sie die dortigen Seiten. Siehe Konsolenvorschau unterscheidet sich von der Site.
Übergabe zur Überprüfung hand-over
- Pushen Sie Ihren Code mit Neuen PR erstellen, wie in Änderungen des Push-Codes beschrieben. Staging Sie nur die Dateien, die zu Ihrer Änderung gehören, und beschreiben Sie sie in einem einfachen Satz, wie z. B. „Abgerundete Ecken und Schatten für Karten.“
- Wählen in der Benachrichtigung " anzeigen“ aus und senden Sie den Link der Pull-Anfrage an den Entwickler, der sie überprüft.
Um die vom Validierungsverantwortlichen angeforderten Änderungen vorzunehmen, arbeiten Sie weiter an derselben Verzweigung und übertragen Sie mit Push an die aktuelle Verzweigung. Die Pull-Anfrage wird aktualisiert.
Ihre Änderung gelangt auf die Live-Site, wenn sie der Entwickler zusammenführt. Wenn Sie auch Text oder Bilder auf einer Seite geändert haben, bedeutet dies eine Inhaltsänderung: Sie erreicht die Website nur, wenn die Seite hochgeladen und veröffentlicht wird. Stimmen Sie den Autoren zu, die dies tun. Siehe Koordinieren von Inhaltsänderungen.
In diesem Handbuch verwendete Wörter glossary
--link-color.main.Abschnitte, Blöcke und Standardinhalte werden unter " der Inhaltsstruktur“ ausführlicher .