Bento-Gitter (Apple Breeze):Bento-Gitter

Der Stil Bento Grids ist ein visueller Designstil, der sich durch Minimalismus, Klarheit und ein hohes Maß an Organisation auszeichnet und häufig in modernen Web- und mobilen App-Oberflächen zu finden ist. Dies wird erreicht, indem der Inhalt in sauber gerasterte Module unterteilt wird, die jeweils Symbole, Überschriften und kurze Beschreibungen enthalten, wodurch ein Layout entsteht, das einer Bento-Box mit Abschnitten für Lebensmittel ähnelt. Der Stil betont den Weißraum, die Ausrichtung und die Konsistenz und verwendet weiche Hintergrundfarben, die mit scharfen Vordergrundelementen kontrastiert werden, um ein sauberes, angenehmes Leseerlebnis zu schaffen. Auf einem persönlichen Blog oder einer Portfolioseite würden Bento Grids zum Beispiel Projektprofile, Artikelzusammenfassungen oder Kompetenzbeschreibungen auf Karten unterschiedlicher Größe anzeigen und so einen visuellen Gesamteffekt von Ordnung und Schönheit erzeugen.

Hinweis auf das Stichwort

Entwerfen Sie eine moderne, minimalistische, hochwertige Produkt-/Dienstleistungseinführungsseite mit einem Layout im Bento-Grid-Stil, das alle wichtigen Informationen kompakt auf einem Bildschirm präsentiert.

Wesentliche Inhalte: [hier die wesentlichen Inhalte eintragen

Design-Anforderungen:
1) Bento-Grid-Layout: Erstellen Sie ein Raster aus unterschiedlich großen Karten, die jeweils eine bestimmte Informationskategorie enthalten, mit einem kompakten, aber nicht überfüllten Layout.
2) Kartendesign: Alle Karten sollten klare, abgerundete Ecken (20px Randradius), einen weißen/hellgrauen Hintergrund, einen subtilen Schatteneffekt und einen leichten Schwebeeffekt nach oben haben, wenn man den Mauszeiger bewegt.
3) Farbschema: Minimalistisches Farbschema, hauptsächlich weißer/hellgrauer Hintergrund mit Farbverläufen als Akzentfarben (bestimmte Farben können angegeben werden, z. B. von hellviolett #C084FC bis dunkelviolett #7E22CE).
4. typografische Hierarchie:
   - Große, fettgedruckte Zahlen/Überschriften: Verwenden Sie einen Farbverlauf, um die wichtigsten Datenpunkte und Überschriften hervorzuheben.
   - Mittelgroße und kleine Überschriften: für Kartenüberschriften, die die Inhaltskategorien klar angeben
   - Kleiner Text: Verwenden Sie Grau, um beschreibenden Text zu präsentieren.
5. inhaltliche Gliederung:
   - Obere Zeile: Hauptankündigungen, Produktmerkmale, Leistungsindikatoren oder wichtige Verkaufsargumente
   - Mittlere Zeile: Produktspezifikationen, technische Details, Funktionsmerkmale
   - Untere Zeile: Benutzerhandbuch und Schlussfolgerung/Aufforderung zum Handeln
6. visuelle Elemente:
   - Verwenden Sie einfache Symbole zur Darstellung von Merkmalen
   - Fortschrittsbalken oder Diagramme zur Darstellung vergleichbarer Daten
   - Raster und Kartenlayouts schaffen einen visuellen Rhythmus
   - Registerkarten zur Anzeige kategorisierter Informationen in kleinen Kapseln
7. responsives Design: Die Seiten sollten sich an unterschiedliche Bildschirmgrößen anpassen können und auch auf mobilen Geräten gut lesbar sein

Referenz zum Designstil:
- Der allgemeine Designstil ähnelt der Produktspezifikationsseite auf der Website von Apple.
- Verwenden Sie viel Weißraum und einfache visuelle Elemente.
- Heben Sie Zahlen und wichtige Merkmale hervor und reduzieren Sie lange Texte.
- Verwenden Sie Farbverläufe, um wichtige Daten hervorzuheben.
- Angemessene Abstände zwischen den Karten, um eine klare visuelle Trennung zu schaffen

Fallstudien

Figma feingestalteter Entwurf

Offizielle Anleitungen zur Verwendung des Programms:Figma Learning Path - Grundlegende Einführung, Chinesisch Tutorial - Figma Chinese Community

Browser-Plugin Chinesische Plugin-Installation und Download:FigmaCN - Chrome Web Store

Kunde (empfohlen):‍ ‍ Figma Chinesisch + Installationsanleitung - Flying Book Cloud Dokumente

Zuerst müssen wir das Figma-Plugin html.to.design finden, das wir dieses Mal verwenden werden. Suchen Sie einfach danach, indem Sie auf das Symbol mit der Tab-Leiste am unteren Rand einer beliebigen Figma-Datei klicken.

Dann geben wir die URL der Seite ein, die wir importieren wollen. Wenn Sie sie nicht haben, können Sie sie mit Youware bereitstellen und auf die Schaltfläche Importieren klicken.

Zunächst einmal wollen wir die Kopfzeile des Titels ist auch auf der Karte hinzugefügt, dieses Mal haben wir gewählt, um die Kopfzeile Header Breite als die folgenden alle Karten summieren sich auf die Breite der Karte ist breiter, so dass zunächst ihre Breite auf 1472px vereinheitlicht wird.

Nachdem wir den Stil der folgenden grauen Karte ohne seinen Inhalt kopieren wollen, wählen Sie einfach eine zufällige graue Karte unten, und dann mit der rechten Maustaste - Kopieren und Einfügen als - Kopieren Eigenschaften auf der Linie, Einfügen ist das gleiche wie die Auswahl auf der Header-Karte wählen Sie Eigenschaften einfügen, werden Sie feststellen, dass die Kopfzeile hat auch eine Karte.

Als Nächstes beheben wir das Problem, dass die Karten hier in Model Scale nicht den ganzen Platz einnehmen. Indem wir die Karte Model Scale auswählen und die Optionstaste gedrückt halten, stellen wir fest, dass die Breite der bimodalen Schulungskarte 398 beträgt und die Karten dann einen Abstand von 24px haben müssen.

Die Breite der Karte für den Modellmaßstab sollte also 350+398-24 betragen. Sie können die mathematische Formel direkt in das Eingabefeld für die Breite schreiben, Figma rechnet dann für Sie, ist das nicht OK?

Schließlich tun wir den letzten Schritt vor dem Export, die ganze Karte um die Ränder einiger Probleme, links und rechts ist sehr breit nach oben und unten ist sehr schmal, wir wollen, dass sie die gleiche sein, dieses Mal müssen wir nur wählen Sie die html-Body-Ebene, und dann das rote Feld Teil der Abstände sind auf eine einheitliche 32 auf sie geändert.

Wenn Sie dem Bild einen Farbverlauf hinzufügen möchten, wie ich es im obigen Vorzeigebild getan habe, können Sie postspark verwenden (https://postspark.app/screenshot) solche Werkzeuge.