Was ist das Slice-Tool und wie werden sie praktisch eingesetzt?

Dies ist eine Noob-Frage, und ich habe im Internet nach Antworten zum Slice-Tool in Sketch gesucht. Ich verstehe, dass es sich um eine Art Ebene handelt, aber ich verstehe nicht, warum und wann sie verwendet werden . Andere Fragen, die ich habe -

  • Wann kommen sie zum Einsatz?
  • Wie organisieren Sie sie, damit Sie effizient und schnell sein können?

Die Quellen, die ich ausgecheckt habe, sind Skizzendokumente , Youtube -Videos

Vielen Dank im Voraus!

Antworten (1)

Slices in Sketch App sind tatsächlich das gleiche Konzept wie Slices in Affinity Designer oder in Adobe Illustrator – sie kombinieren eine Möglichkeit, einen bestimmten Bereich eines Designs als exportierbar als separate grafische Entität auszuwählen, und eine Art „Eimer“ für mit einer oder mehreren spezifischen Exporteinstellungen, die sich darauf beziehen, wie dieser bestimmte Bereich exportiert werden soll.

Anwendungsfall:

Mit Sketch entwerfen Sie ein UI ( U ser Interface ) für eine Website.

Sie entwerfen die gesamte Seite, geben ihr Einschränkungen, um sie reaktionsfähig zu machen, setzen Haltepunkte, gehen durch die Einrichtung der Interaktivität, damit Ihr Mockup durchklickbar ist ... dann richten Sie Slices ein, die Exportbereiche definieren.

Sie teilen das gesamte Design auf, so dass Sie eine Kopfzeile, eine Navigationsleiste, einen Textbereich und eine Fußzeile erhalten, und zusätzlich zerteilen Sie alle Symbole und Schaltflächen einzeln. Die Kopf- und Fußzeilen, die Sie beispielsweise als .pngs exportieren, in drei verschiedenen Maßstäben und für alle Fälle auch als einzelne .svg-Datei. Sie entscheiden sich dafür, Ihren Körperbereich als drei .png-Dateien mit unterschiedlichen Auflösungen zu exportieren, aber da der Körperhintergrund in diesem Fall ein gerastertes fotografisches Bild hat, entscheiden Sie sich dafür, keine .svg-Datei zu erstellen. Die Schaltflächen und Symbole, die Sie auswählen, verwenden nur .svg, weil Sie wissen, dass Sie genug CSS-Kenntnisse haben, um sie live im endgültigen Design neu einzufärben, und Sie vermuten, dass dies erforderlich sein wird.

Da Sie beim Einrichten Ihrer Slices sorgfältig vorgegangen sind, haben Sie jetzt einen Batch-Export von allem mit einem Klick. Noch wichtiger ist, dass dies auch dann der Fall sein wird, wenn Sie das Design durch mehrere Runden von Kundenbewertungssitzungen iterieren, und ein letztes Mal, wenn Sie leicht iterieren müssen, um mit dem Backend-Codierer zu arbeiten, den der Kunde plötzlich zugewiesen hat – diesem Codierer freut sich sehr , konsistente Ergebnisse von Ihnen zu erhalten , und erwähnt später, als er gebeten wird, einen Designer zu empfehlen, gerne, wie zuverlässig und einfach Sie mit ihm arbeiten.