Wie erstellt man Schnittstellen in einem Grafikeditor für responsive Grid-Systeme, wenn man bedenkt, dass sie nicht pixelgenau sind?

Jedes responsive CSS-Rastersystem verwendet Prozentwerte mit langen Dezimalpunkten für die Spaltenbreite (z. B. „16.66666667 %“). Ich verstehe nicht, wie ich das Raster in Photoshop anordnen soll, da Elemente der Benutzeroberfläche entweder länger oder kürzer sind als vom CSS-Raster erwartet, was zu bestimmten Problemen mit dem gesamten Layout führt (Elemente können ihre Position verschieben, weil der Zahlenrundung) – im Browser sieht es am Ende anders aus.

Nehmen wir zur besseren Veranschaulichung die Werte von Bootstrap: Die Spaltenbreite für den größten Container beträgt ~97 Pixel. Also, wie soll ich das Raster in einem Grafikeditor anlegen, soll ich es auf 97 oder 98 runden, oder vielleicht sollte ich diese genauen Werte vergessen und nicht für die genauen Pixelzahlen entwerfen, sondern für die Anzahl der Spalten – was auch immer die Breite?

Ich meine, ich kann einfach nicht darüber hinwegkommen, dass es nicht gleich aussehen wird, die Füllungen würden anders sein, als ich sie gezeichnet habe (manchmal sogar unterschiedlich, wenn ein Element 100% einer Spalte einnimmt [bzw zwei] Breite, sagen wir, eine Schaltfläche mit etwas Text darauf kann die Polsterung links von 30 und die Polsterung rechts von 32 haben; es ist auffällig und nicht richtig), die Breiten wären unterschiedlich, die Zwischenstege wären unterschiedlich und bald. Ich verstehe nicht, wie Sie mit dieser Inkonsistenz und mangelnden Präzision eine funktionale und schöne Benutzeroberfläche erstellen können.

Kannst du bitte deine Erfahrungen teilen? Wie machst du das? Liege ich mit etwas falsch? Vielleicht gibt es etwas Gutes, das ich über das Entwerfen von responsiven/flüssigen Grid-Systemen lesen kann? Ich danke Ihnen sehr.

Wenn ich Responsive-Design-Mockups mache, verwende ich Vektorsoftware, mehr oder weniger aus diesem Grund – um nicht mehr in exakten Pixeln zu denken. Früher habe ich Illustrator verwendet, aber jetzt bevorzuge ich InDesign mit Illustrator/Photoshop für Illustrationen/Fotos. Ich habe meinen InDesign-Workflow noch nicht genagelt, aber wenn diese Frage kein Duplikat ist (wir hatten einige davon), komme ich zurück, wenn ich die Fehler ausgebügelt habe, und poste eine Antwort, in der sie detailliert beschrieben wird.

Antworten (2)

Ich kann einfach nicht darüber hinwegkommen, dass es nicht gleich aussehen wird

Du musst darüber hinwegkommen. :)

Das Fazit ist, dass Sie in statischen Tools wie PhotoShop nicht einfach UI-Mockups erstellen können und erwarten, dass responsive Layouts ordnungsgemäß berücksichtigt werden.

Der beste Weg, damit umzugehen, ist das Design in den Browsern. Dies funktioniert natürlich nicht für alle, da nicht jeder UI-Code schreiben möchte. Daher ist der zweitbeste Weg, Seite an Seite mit dem UI-Entwickler zu arbeiten.

Ich schlage diesen Fluss in diesen Situationen vor:

  • Erstellen Sie zuerst die mobile Ansicht. Arbeiten Sie in Ihrem Bildeditor mit 2-facher oder 3-facher Größe, damit Sie wissen, dass Sie mit einer ausreichenden Auflösung arbeiten können, wenn Sie vergrößern müssen
  • Arbeiten Sie mit dem UI-Entwickler zusammen, um die mobile Ansicht im Code zu implementieren.
  • Arbeiten Sie mit dem UI-Entwickler zusammen, um jetzt darüber nachzudenken, wie die anderen Ansichten zusammenkommen, und optimieren Sie die Bilder nach Bedarf, während Sie fortfahren.
Es geht darum, die innere Pedanterie loszulassen oder in der Analyselähmung einzufrieren. ;) Eine andere Möglichkeit ist, aufzuhören.

Was Sie erwähnen, ist genau der Grund, warum Responsive Design so schwierig ist. Sie haben keine Leinwand mehr, mit der Sie beginnen können. Das Starten eines Designs ist nicht mehr dasselbe wie das „Öffnen von Photoshop“. Sie müssen zuerst in Ihrem Kopf arbeiten. Wie soll das Design auf verschiedenen Geräten aussehen und wie soll es sich ändern, wenn sich die Bildschirmgröße nur geringfügig ändert (z. B. zwischen verschiedenen Telefontypen).

Sie mögen sich darüber beschweren, dass es fast unmöglich ist, gleichzeitig für alle verschiedenen Telefontypen zu entwerfen, aber die Realität sieht so aus, wie die Website angezeigt wird. Mit anderen Worten, wenn Sie sich an einen gemeinsamen Nenner halten und nur dafür entwerfen, wird Ihre Website immer noch auf verschiedenen Geräten angezeigt. Sie müssen die Kontrolle über zumindest einige Teile des Designs aufgeben. Früher war dies die Größe des linken und rechten Rands in den alten Tagen mit fester Breite, aber die Dinge sind nicht mehr so ​​einfach.

Hier sind ein paar Tipps, die mir in den Sinn kommen:

  • Bauen Sie langsam mit Low-Fidelity-Prototypen auf. Skizzieren Sie weiterhin einfache Prototypen für verschiedene Bildschirme und bauen Sie langsam Ihre Vorstellung davon auf, wie das gesamte Design funktionieren sollte.
  • Arbeiten Sie vom Inhalt aus : Beginnen Sie mit einer sehr soliden Vorstellung davon, welche Art von Inhalt Sie haben und welche Ziele die Website tatsächlich erreichen soll. Servieren Sie Nachrichten, Videos, Rezepte? Arbeiten Sie nach Möglichkeit mit den tatsächlichen Inhalten, die Sie bereitstellen.
  • Denken Sie in Systemen, nicht in Seiten : Befreien Sie sich von der Idee einer Seite. Ein richtiges responsives Design ist eine intelligente Methode, strukturierte Inhalte auf das Gerät zu übersetzen, das der Benutzer gerade verwendet. Sie entwerfen dieses System.
  • Halten Sie das Design einfach und flach : Es gibt einen Grund, warum flaches Design mit responsivem Design zusammenpasst. Da das Skizzieren eines flachen Designs in Photoshop nur wenige Minuten dauert, können Sie viele davon für verschiedene Bildschirmgrößen erstellen und sehen, wie das System als Ganzes aussieht, anstatt wie die einzelnen Bildschirme aussehen. Wenn jeder Knopf perfekt verarbeitet ist, mit vielen dezenten 3D-Effekten, würde das einfach zu lange dauern
Wie erstellt man Schnittstellen in einem Grafikeditor für responsive Grid-Systeme, wenn man bedenkt, dass sie nicht pixelgenau sind?
AntwortenHierDatenschutz-Bestimmungen1y, 0v