Was ist der Zweck von Außenrinnen in einem reaktionsschnellen Netz?

Sketch bietet die Möglichkeit, dem Raster Außenrinnen hinzuzufügen. Wofür sind diese und was wäre ein Beispiel für eine Situation, in der diese nützlich sind?

Wenn Sie nur interne Dachrinnen haben, scheint der Inhalt innerhalb der Ränder des Blattes oder Bildschirms eng zu sein. Wenn Sie die externe Rinne hinzufügen, schaffen Sie einen gewissen Freiraum zwischen Inhaltskanten und physischen Kanten, sodass es so aussieht, als würden die Dinge bequemer passen.

Auf randlosen Medien (Papier, Beschilderung) wird außerdem ein gewisser Pufferraum zwischen Hintergrund und Inhalt geschaffen, wodurch das optische Ausbluten verringert und das Fokussieren erleichtert wird.

Außenrinnen erzeugen einen Rand außerhalb eines Layoutrasters, sodass Bild- und Textelemente nicht direkt an den Seiten von Bildschirmen haften, die kleiner als die Gesamtbreite sind . Ich denke, Margins wäre äußerlich ein besserer Begriff als Gutter .

Die anderen Antworten sind richtig, aber ich denke, sie könnten Ihre Hauptfrage vermissen:

Warum benötigt Sketch zusätzliche Dachrinnen, um kleine Bildschirme zu handhaben?

Das tut es nicht. Sie können Ihr Raster so einstellen, dass es etwas kleiner als das Ansichtsfenster (oder in diesem Fall die Zeichenfläche) ist. Berechnen Sie beispielsweise die Total width, um eine 90% -Spalte zu imitieren, und lassen Sie dann die centerSchaltfläche die Seitenränder handhaben.

Der Grund, warum ich Außenrinnen in Sketch mag, ist, dass ich mir die Größe des Ansichtsfensters (z. B. 1024) als ganze Zahl vorstellen kann. Ich gebe die volle Größe des Ansichtsfensters und meine gewünschten Rasterspezifikationen (mit Außenrinnen) ein und Sketch berechnet, um die Polsterung beizubehalten, nach der ich suche.

Szenario ohne Außenrinnen

Ich entwickle ein Tablet-Layout mit einer Breite von 1024, also trete ich zurück und versuche, eine Hauptspalte herauszufinden, die mir zusätzlichen Platz für Seitenränder lässt. Ich strebe ein gutes, altmodisches 12-Säulen-Raster an, geräumige 32-Pixel-Dachrinnen, verwende das gleiche außen und erhalte ca. 51-Pixel-Säulen mit einer Gesamtbreite von 960 ( (960-(32*11))/12). Das ist noch nützlicher, wenn ich bereits einen harten Haltepunkt im Sinn habe.

Szenario mit Außenrinnen

Für dasselbe 1024-Ansichtsfenster habe ich möglicherweise keinen festen Haltepunkt im Sinn. Mein Ziel ist es, das Zielgerät zu maximieren. Also konzentriere ich mich auf die gewünschte Rasterauffüllung und lasse sie sich an das Ansichtsfenster / die Zeichenfläche anpassen. Sketch macht die Mathematik für mich, weil ich nur ein alberner Designertyp bin. Und Sie können im folgenden Beispiel sehen, dass ich 2 Pixel pro Spalte gewonnen habe, weil Sketch Außenrinnen wie Bootstrap berechnet: 50% der Innenrinnen. Stellen Sie sich vor, wie viel besser die Welt mit 24 weiteren Pixeln in meinem Design sein wird!

Das gleiche aber anders

In beiden Fällen können Sie das gleiche Ergebnis erzielen. Es kommt nur darauf an, wie Sie gerne über den Raum nachdenken. Und wenn Ihnen die Außenpolsterung mit der halben Dachrinne nicht gefällt, lassen Sie dieses Kontrollkästchen deaktiviert und rollen Sie Ihre eigene. (In Zukunft erwarte ich mehr Kontrolle über diese äußeren Ränder.)

IIRC, diese Konvention stammt von Bootstrap (oder vielleicht dem 960-Raster). Ich glaube, Bootstrap hat immer noch Außenrinnen, obwohl ich seit einiger Zeit kein BS-Stylesheet mehr geschrieben habe.