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

7

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?

Geben Sie hier die Bildbeschreibung ein

Ben Suarez
quelle
Vermutlich bedeutet dies nur, dass die Rinnenbreite nicht in der Spaltenbreite enthalten ist. Aus Ihrem Bild: "Außenrinne" würden 2 Spalten 145 Pixel messen, aber mit "Innenrinne" würden 2 Spalten 120 Pixel (?) messen
Yorik

Antworten:

6

Geben Sie hier die Bildbeschreibung ein

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.

PixelSnader
quelle
3

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 .

AAGD
quelle
Beachten Sie dies in der Frage: "In einem reaktionsschnellen Raster?" Ich denke, Ben versteht es, Dinge von der Seite des Ansichtsfensters fernzuhalten. Das Problem ist nicht "Was sind sie?", Sondern "Warum brauchen Sie sie in Sketch?".
Zivil
3

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.

Manuelles Konfigurieren der Auffüllung in den Layout-Rastereinstellungen von Sketch

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!

Verwenden der Außenrinnen von Sketch zur Berechnung der Polsterung

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.

Zivilkleidung
quelle
1
"Sie können Ihr Raster so einrichten, dass es immer etwas kleiner als das Ansichtsfenster ist." Das ist eine Außenrinne.
PixelSnader
Es gibt zwei verschiedene Möglichkeiten, um dorthin zu gelangen: • Entwerfen Sie ein Raster, das nkleiner als das Ansichtsfenster ist, ODER • Entwerfen Sie ein Raster in voller Breite mit Außenrinnen.
Zivil
1
Ich befestige das Rad nicht am Auto, ich befestige das Auto am Rad. Die Frage ist "warum sollte ich diese brauchen", die Antwort ist äußere Polsterung, Leerzeichen, Rinne oder was auch immer für eine leichte semantische Variation Sie darauf werfen möchten.
PixelSnader
Die Antwort ist, dass Sie über die Beziehung zwischen Raster und Ansichtsfenster etwas anders nachdenken können. Das ist alles, keine Autos oder Räder erforderlich.
Zivil