Design für alle Größen und Bildschirme: Responsives Design in Skizze | Bryan Zavestoski | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Design für alle Größen und Bildschirme: Responsives Design in Skizze

teacher avatar Bryan Zavestoski, Independent UI/UX Designer and Educator

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

7 Einheiten (18 Min.)
    • 1. Einführung

      2:24
    • 2. Was ist reaktionsfähiges Design

      3:44
    • 3. Erste Sketch Option Stretch

      2:03
    • 4. Zweite Größenanpassung Pin in die Ecke

      2:19
    • 5. Dritter Größenanpassung von Objekt anpassen

      1:41
    • 6. Endgültige Resizing schwimmen an Ort und Stelle

      1:42
    • 7. Alles zusammenführen

      4:26
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

612

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Hinweis: Ab der Version 44 hat Sketch die Funktionsweise der Größenänderung aktualisiert und es ist viel anders als in der Zeit, als dieser Kurs aufgenommen wurde. Einige der Sketch Inhalte sind möglicherweise nicht mehr relevant, aber dieser Kurs sollte dir trotzdem noch einige Informationen über die Grundlagen des responsive Designs geben.

Dieser Kurs vermittelt dir das ansprechende Design und erklärt, wie du ansprechende Layouts gestalten kannst. Es wird sich auf die neuen resizing in der Design-App konzentrieren. Skizze ist schnell das am häufigsten verwendete Werkzeug für das Web- und Mobildesign geworden und ersetzt Photoshop für viele Designer. In einem aktuellen Update hat Sketch die Fähigkeit für Objekte eingeführt, um zu reagieren und auf Änderungen anzupassen.

Skizze definiert vier unterschiedliche Verhaltensweisen darüber, wie Objekte verändern sollen:

  • Dehnen
  • Pin to corner
  • Objekt verkleinern
  • Schweben an Ort und Stelle

Wir werden uns auf die Verwendung jeder Größenänderung konzentrieren und durch die Kombination aller in unserem Kursprojekt beenden.

Dieser Kurs ist für alle gedacht, die Interesse an Webdesign haben. Es wird nicht über die absoluten Grundlagen von Skizze gehen, weshalb etwas Vertrautheit mit Skizze oder einer anderen Design-Anwendung hilfreich ist, aber nicht notwendig.

Triff deine:n Kursleiter:in

Teacher Profile Image

Bryan Zavestoski

Independent UI/UX Designer and Educator

Kursleiter:in

Hi! I'm Bryan Zavestoski, a User Interface and Product Designer. I've worked with businesses from some of the largest financial services companies in the world to small but mighty, living room startups. I'm now taking the knowledge I've gained from these organizations and sharing it with the design community.

If I'm not designing, I'm probably running around outside, whether that means climbing, skiing, or hiking.

Learn InVision Studio - Tutorials for new and experienced designers

Zavzen Design - Product Design for B2B SaaS businesses

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Hi, ich bin Brian, ein freiberuflicher Interface-Designer. In diesem Kurs konzentrieren wir uns auf die neuen Werkzeuge für die Wiederdimensionierung in der Design-APP-Skizze. Wir werden uns ansehen, wie diese Werkzeuge verwendet werden können, um Designs zu erstellen, die alle Bildschirmgrößen anpassen . Mit diesen Tools ist es einfach, Designs zu erstellen, die auf eine Vielzahl von Layouts, Geräten und Größen reagieren können . Ich persönlich machte den Wechsel von Photoshopped auf Skizze vor etwa zwei Jahren, und ich persönlich habe mich fast ausschließlich auf Skizze verlassen. Seitdem werden viele Web-Designer eine ähnliche Geschichte davon erzählen, wie sie Fotoshop verlassen haben und sich nun auf das Entwerfen mit Skizze konzentrieren . Warum wird die Skizze so schnell übernommen? Skizziert ein Werkzeug, das mit Blick auf das digitale Design erstellt wurde. Nun, Photo Shop ist ein Foto-Editor, der Hacks war, um als Web-Design-Tool zu arbeiten. Sketch ist die App der Wahl für Interface- und Web-Designer geworden, weil es sich auf Lee auf die Werkzeuge konzentriert , die sie benötigen. Ohne alle drei D-Tools, Fotofilter und andere Funktionen, die sie selten verwenden, ist Sketch jetzt eine noch bessere Wahl für Webdesigner geworden. Mit der Hinzufügung der neuen Größenoptionen Mitte 2016 hinzugefügt, indem es einem Designer die Möglichkeit gibt, zu ändern, wie Layer wirkt, wenn es kleiner oder größer wird, können Designs viel flexibler werden. Diese Flexibilität ist wichtig, da die mobile Nutzung die mobile Webnutzung seit der Desktop-Nutzung zum ersten Mal im Jahr 2014 explodiert und nun fast 2/3 des gesamten Webverkehrs ausmacht . Die Zeit der Gestaltung für eine einzelne Bildschirmgröße oder ein Gerät ist vorbei. Wir brauchen jetzt einen Weg, um die flexible und sich ständig verändernde Zukunft von APS und Websites für das Klassenprojekt zu gestalten. Wir werden eine einzelne Seite Ofen-Events App erstellen. Diese Seite wird in der Lage sein, die Größe auf eine Vielzahl von Bildschirmgrößen zu ändern. Diese Klasse ist für alle, die mehr über Responsive Design und wie man es erstellt lernen möchten . Ich werde nicht über die absoluten Grundlagen der Skizze gehen, so dass einige Erfahrungen mit Sketch Photoshopped oder einem anderen Design-Tool definitiv hilfreich sein werden . Aber ich werde durch jeden Schritt sprechen, den ich mache, und einige der Hotkeys auch amüsant . Selbst wenn Sie neu im Skizzieren sind, erhalten Sie eine gute Vorstellung davon, was möglich ist, wenn Sie mit Skizze entwerfen. Also lasst uns einspringen und ein wenig darüber reden, was genau responsive Design ist 2. Was ist reaktionsfähiges Design: Sie haben wahrscheinlich den Begriff Responsive Design gehört, der herumgeworfen wurde. Aber was genau bedeutet es? Laut Wikipedia ist Responsive Webdesign ein Ansatz für Webdesign, der darauf abzielt, Desktop-Webseiten als Reaktion auf die Größe des Geräts anzuzeigen. Einer sieht mit. Grundsätzlich bedeutet dies, dass Ihre Website oder APP das Erscheinungsbild basierend auf dem Gerät ändert, in dem jemand sie ansieht. Wie oft haben Sie sich eine Website auf Ihrem Handy angesehen und mussten vergrößern, um die Seite zu lesen ? Responsive Design hilft, diese Fälle zu vermeiden und macht Ihre Inhalte überall und für jedermann zugänglich . Viele Designer bevorzugen einen mobilen ersten Ansatz für Responsive Design. Dies vermeidet das häufige Problem des Versuchs, alles vom Desktop-Bildschirm auf einen winzigen Telefonbildschirm zu passen . Indem Sie zuerst den Inhalt kürzen, ist es viel einfacher, auf einen größeren Bildschirm zu erweitern, der dem responsive Design ähnelt. Adaptives Design ändert auch das Erscheinungsbild basierend auf der Größe, in der es angezeigt wird. jedoch adaptive Entwurf ändert sichjedochnur an einigen bestimmten Punkten. Während viele Design-Tools adaptive Designs durch die Verwendung mehrerer Kunsttafeln oder Dokumente erstellen können , ist Sketch aufgrund seiner neuen Dimensionierungsfunktionen einzigartig qualifiziert, um responsive Design . Jetzt werden wir einen Blick auf ein paar Beispiele für adaptive, responsive und ah hybriden Ansatz für Web-Design werfen. Ich habe vier verschiedene Beispiele für die verschiedenen Arten von Design zusammengestellt, die wir verwenden können, um sich an verschiedene Bildschirmgrößen anzupassen . Die erste Website, Apple verwendet einen adaptiven Ansatz, also werde ich die Größe ändern und Sie können sehen, dass das Bild des Mac-Buches kleiner wird, wenn mein View-Port kleiner wird. Es ist nicht wirklich eine allmähliche Veränderung, obwohl Sie sehen können, wie es irgendwie springt, die verschiedenen Größen zu sein. Und dann, ähnlich, mit dem Header, können Sie sehen, dass es jede einzelne Option hat. Mac iPad, iPhone Uhr. Und dann, wenn es kleiner wird, wird es nur mit diesem Symbol auf der linken Seite, das Ihnen erlaubt, zu all diesen Optionen zu gelangen . Dies ist also ein adaptiver Ansatz. Wir gehen weiter zum nächsten. Coca Cola Coca Cola verwendet eine Art hybriden Ansatz, den Sie sehen können, wenn ich es skaliere. Es wird ziemlich schnell kleiner schnappen, aber dann, in diesem mittleren Abschnitt, können Sie sehen, einige der Bilder beginnen, Größe zu ändern und der Text re fließt nur ein wenig , bevor schließlich an den mobilen Vieux Port gefangen. Dies verwendet also ein wenig Responsive Design in diesem mittleren Abschnitt, wo die Bilder und Textur ändern, aber in erster Linie adaptiv ist. Unser nächstes Beispiel. McDonald's. Sie sind voll reaktionsschnell Website. Wenn ich die Größe des Ansichtsports ändere, können Sie sehen, dass der Text die Größe ändert. Die Bilder ändern sich die Größe. Diese Bilder nehmen immer die volle Breite des Bildschirms ein, egal welche Größe es ist. Und dann wird schließlich zu Ziel dot com gehen. Wir haben ein paar Optionen von Gegenständen direkt hier. Wenn ich die Größe ändere, können Sie sehen, dass dieser auch voll reagiert. Alle Bilder werden in der Größe geändert und Sie können dann auch in ihren vorgestellten Kategorien sehen. Hier wird von Ah gehen, sechs Spalten, fünf Spalten. Die Spalten werden tatsächlich kleiner. Und dann, wenn wir noch kleiner werden, scrollen wir nach unten und wir haben vier Spalten. Dann schließlich wird es noch weniger Spalten bekommen. Die Gegenstände sind gerade ein wenig klein. Wir scrollen noch etwas weiter und sie sind bis zu drei Spalten. Also unabhängig davon, was Vieux Port, Sie sehen dies an es sieht immer noch gut aus. Hier haben wir eine Art mittlere. Sie können sehen, dass nichts völlig abhebt. Alles nimmt die Menge an Bildschirm ein, die sie in voller Größe wollen. Die Bilder sind ein wenig größer. Sie werden ein wenig offensichtlicher sein, aber immer noch an jede einzelne Größe anpassen. 3. Erste Sketch Option Stretch: jetzt, da wir ein wenig über Responsive Design gesprochen haben und warum wir es verwenden möchten. Lassen Sie uns sehen, wie wir einige dieser Techniken in Skizze verwenden können. Die erste Wieder Dimensionierung Option, die wir betrachten werden, ist Stretch Stretches genannt, die Standard-Wiederdimensionierung Option. Jedes Mal, wenn Sie eine Gruppe oder ein Symbol mit Streckung erstellen, werden alle Abstände und Objekte proportional skaliert. Das bedeutet, dass sich die Objekte innerhalb der Gruppe und der Abstand zwischen diesen Objekten verdoppeln, wenn wir unsere Gruppe zweimal asl ARJ machen würden. Lassen Sie uns in die Skizze springen und sehen, wie wir Stretch auf unsere Designs anwenden können. Wenn wir eine Ebene auswählen, können wir in der rechten Werkzeugleiste nach den Optionen für die Wiederdimensionierung suchen. Wie Sie sehen können, sind sie nicht da. Das erste, was ich tun werde, ist, die fünf Ebenen zusammen mit Befehl G zu gruppieren. Sobald sie gruppiert sind, wählen wir alle vier Felder innerhalb der Gruppe aus. Ich halte Befehl und Shift gedrückt, um jede Ebene innerhalb der Gruppe auszuwählen. Jetzt in der Symbolleiste können wir die Option für die Wiederdimensionierung sehen. Wie Sie vielleicht erraten haben, ist es bereits auf Dehnung eingestellt. Wir können die Größe dieser Gruppe ändern und sehen, wie die Objekte innerhalb der Gruppe handeln. Jedes Objekt zerquetscht Luft dehnt sich, um im Behälter zu bleiben. Dieses Feld ist 140 Pixel hoch und 140 Pixel breit und hat 40 Pixel von jeder Kante. Wenn wir die Gesamtgruppengröße durch beide teilen, werden die Größe und der Abstand von den Kanten halbiert. Hier wähle ich das Symbol innerhalb unserer Textgruppe aus. Wenn ich die Größe ändere, verzieht sich das Symbol sehr schnell, um fast unkenntlich zu sein. Wir müssen eine andere Wieder Dimensionierung Option finden, die hier funktionieren könnte. 4. Zweite Größenanpassung Pin in die Ecke: Als nächstes werden wir auf die zweite Wieder Dimensionierung Option Pin an Ecke suchen. Wenn ein Objekt so eingestellt ist, dass es an Ecke angeheftet wird, behält es die gleiche Größe bei. Unabhängig davon, wie die Größe der äußeren Gruppe geändert wird. Die Position von der nächsten Kante bleibt auch gleich, egal wie groß eine Gruppe wird. Wenn ein Objekt 10 Pixel vom Rand entfernt war, bleibt es 10 Pixel vom Rand entfernt. Pinter Corner hat einen speziellen Fall. Wenn ein Objekt zwischen zwei Kanten zentriert ist, bleibt es zwischen diesen Kanten zentriert. Wenn die Größe der Gruppe geändert wird, Penta Corner nützlich sein, um Elemente in einer mobilen Statusleiste oder einem Website-Header zu positionieren . Zum Beispiel. In IOS gibt es ein mobiles Signal und einen Träger auf der linken Seite und den Akkuprozentsatz auf der rechten Seite. Wenn diese Statusleiste für ein größeres oder kleineres Telefon erweitert werden sollte, möchten wir, dass diese Elemente in der Nähe des Bildschirmrand bleiben. Es kann auch auf einer Website nützlich sein, um das Hauptlogo zentriert zu halten oder das Hauptlogo auf der linken Seite des Bildschirms zu halten. Werfen wir nun einen Blick auf ein Beispiel hier. Ich habe ein ähnliches Dokument wie das letzte Video eingerichtet. Zuerst sollten wir jede der Ebenen auswählen und sie so einstellen, dass sie an Ecke geheftet werden. Also halte ich Befehl und Shift gedrückt, um jede dieser Ebenen auszuwählen. Und dann werde ich zu den Wiederdimensionierungsoptionen gehen. Es ist derzeit auf Strecken, was die Standardeinstellung ist, und dann ändere ich das in Anheften an Ecke. Sehen wir uns nun an, wie diese reagieren, wenn ich die ganze Gruppe auswähle. Wie Sie sehen können, bleibt jedes der Objekte die gleiche Größe. Es bleibt auch der gleiche Abstand zu jeder der Kanten. Schauen wir uns diese nur an, um sicherzustellen, dass dieses Objekt 140 Pixel breit und 140 Pixel hoch ist , und es hat einen Abstand von 40 Pixel von jeder Kante. Ich wähle die gesamte Gruppe aus, ändere die Größe so, dass sie viel kleiner ist, und wähle dann die obere linke Gruppe erneut aus. Wie Sie sehen können, sind es immer noch 140 Pixel x 140 Pixel und es hat immer noch einen Abstand von 40 Pixel von jeder Kante. Um den benutzerdefinierten Fall zu betrachten, über den ich gesprochen habe, schauen wir uns diesen oberen Abschnitt hier an. Ich habe bereits gesagt, dass unsere Ikone an Ecke angeheftet werden soll. Mal sehen, was passiert, wenn wir die ganze Gruppe bewegen. Ich mache es größer und mache es kleiner. Das Symbol bleibt zentriert. 5. Dritter Größenanpassung von Objekt anpassen: Unsere 30 Dimensionierungsoption wird als Resize Objekt bezeichnet. Wenn sie zum Ändern der Größe des Objekts gesendet wird, bleibt der Abstand von allen vier äußeren Kanten gleich. Die Größe des Objekts wird dann geändert, um die gesamte Größe des verbleibenden Raums zu füllen. Das Objekt verhält sich etwas anders, wenn die Ebene drei Seiten der äußeren Gruppe berührt . Wenn dies der Fall ist, bleibt eine Ebene gleich groß. Dieses besondere Verhalten kann für Seitenleisten oder mobile Tab-Leisten nützlich sein. Wir werden oft wollen, dass diese Artikel unabhängig von der gesamten Außengröße gleich groß bleiben . Größe des Objekts kann nützlich sein, wenn sie auf Text angewendet wird. Ein großer Textblock kann verwendet werden, um den gesamten verbleibenden Raum zu füllen. Andere Objekte oder Text innerhalb eines Listenelements können so eingestellt werden, dass sie immer das ganze mit dieser Liste füllen , unabhängig davon, ob die Listengröße größer oder verkleinert wird. Sehen wir uns nun an, wie die Größenänderung des Objekts funktioniert. Zunächst wähle ich jede unserer inneren Gruppen aus und ändere sie von „Strecken“, um die Größe des Objekts zu ändern. Ich wähle unsere äußere Gruppe aus und beginne sie neu zu dimensionieren, da Sie sehen können, dass unsere Objekte die Größe ändern, aber sie behalten den gleichen Abstand von den Kanten. Lassen Sie uns testen, dass dieser Block 140 x 140 Pixel beträgt und 40 Pixel von einer Kante und 450 von der anderen Kante entfernt ist. Wenn ich die Größe etwas vergrößere, haben wir immer noch den Abstand von 40 Pixeln und 450 Pixeln von jeder Kante, aber die Größe unseres Objekts hat sich geändert. 6. Endgültige Resizing schwimmen an Ort und Stelle: Jetzt haben wir es auf die vierte und letzte Wieder Dimensionierung Option Fluss an Ort und Stelle geschafft. Wenn die Option „Float an Ort und Stelle“ festgelegt ist, bleibt ein Layer immer gleich groß. Dies ähnelt dem Pin an Ecke, aber der Fluss an Ort und Stelle unterscheidet sich und wie er den Raum um das Objekt herum ändert. Nun, Pinchuk Orner hält ein Objekt in der gleichen Entfernung von seiner nächsten Kante. Der Flow an Ort und Stelle passt den Abstand proportional an. Es ist am besten, dies in Bezug auf Prozentsätze zu denken. Wenn ein Objekt 10% von seiner nächsten Kante entfernt ist, bleibt es 10% von dieser Kante entfernt. Wenn eine Gruppe größer wird, wächst der Abstand von der nächsten Kante in der angezeigten Pixelmessung, blieb aber 10% der Gesamtgruppengröße erhalten. Float an Ort und Stelle kann für Symbole innerhalb einer Tab-Leiste oder für Text in einer Tabelle nützlich sein. Wenn die Größe der Tab-Leiste oder Tabelle geändert wird, bleiben alle darin enthaltenen Elemente gleich groß, positionieren sich jedoch neu, um gleichmäßig verteilt zu werden . Also hier ist unsere endgültige Wieder Dimensionierung Option Float an Ort und Stelle. Ich habe bereits eingegangen und jedes der Quadrate ausgewählt und sie so eingestellt, dass sie an Ort und Stelle schweben, Also mal sehen, wie sie alle reagieren, wählen Sie unsere Gruppe, greifen Sie einen Ankerpunkt und ändern Sie die Größe. Sie können sehen, dass alle Quadrate ihre gleiche Größe beibehalten, aber die Abstände von den Kanten werden etwas kleiner oder etwas größer. Ich wähle es aus. Es ist der gleiche Standard 40 und 40, die wir gesehen haben, und dann werde ich die Gruppe wieder ausgewählt, ändern Sie sie ein wenig nach unten. Sie können sehen, dass es ein wenig näher ist, wenn wir es noch einmal betrachten. 23.35 und 31.54 Es basiert also wirklich auf den Prozentsätzen und nicht auf den tatsächlichen Pixelabständen . 7. Alles zusammenführen: Lassen Sie uns nun alle Optionen für die Wiederdimensionierung in eine tatsächliche Schnittstelle zusammenbringen. Wie ich bereits in der Einleitung erwähnt, Unser Klassenprojekt ist ein einzelner mobiler App-Bildschirm basierend auf Ihrer Lieblings-Band oder Film. Hier ist ein Beispiel, das jede der Optionen für die Wiederdimensionierung verwendet. Hier ist unser Beispiel Events bei für das Class-Projekt. Werfen wir einen Blick auf einen Überblick über die gesamte Seite, indem Sie auf Befehl eins drücken. Sie können sehen, ich habe sechs unsere Board bis für iPhone sieben Größe für iPhone sieben plus und zwei für iPad Pro auf der Oberseite eingerichtet . Wir haben alle Standard-Wieder Größenoptionen angewendet, und auf der Unterseite haben wir alle benutzerdefinierten Wieder Größenoptionen, so dass wir die Seiten Größe ändern können , wie wir möchten. Werfen wir einen Blick auf die APP alle unsere iPhone sieben Größe Befehl wählen, um in sie zu zoomen und Befehl Null, um sicherzustellen, dass wir bei 100% sind. Vergrößern. Wir haben eine Menge der Standardfunktionen für ein IOS up. Wir haben unsere Statusleiste oben, unsere Titelleiste. Innerhalb der APP. Wir haben die Zeit und den Ort unserer Veranstaltung und die Möglichkeit, Tickets zu kaufen. Und schließlich haben wir die Leute, die an der Veranstaltung teilnehmen und einige der Symbole, um zu verschiedenen Teilen der App zu gelangen . Werfen wir einen Blick darauf, was passiert, wenn wir die Größe ändern. Ich werde zu unserem iPhone sieben blättern plus Größe es nach oben. Alles sieht immer noch ziemlich gut aus. Einige Dinge werden ein wenig gestreckt, aber es ist nicht super offensichtlich, genau hier. Wenn wir auf das iPad Pro Forever gehen , kann ich es hier oben ändern und Sie können sehen, eine Menge Dinge haben Art von gehandelt. Nicht genau so, wie er sie gerne hätte. Unsere Header-Leiste ist wirklich groß geworden, und einige unserer Icons werden ein wenig gequetscht. Teil der Ausrichtung ist aus einem Schwung, wenn wir nach unten scrollen, einige der Symbole für die Zeit in Position sind irgendwie weg vom Text, und unsere Profilbilder haben sich in Ovale anstatt Kreise verwandelt. Mal sehen, wie wir das korrigieren können. Also, jetzt bin ich in unser iPhone sieben plus zoomen, mit den Wieder Größenoptionen angewendet alle Größe es wieder nach oben. Wir bekommen jetzt keine Streckung auf den Icons, aber es ist nicht super offensichtlich. Also werfen wir einen Blick auf das iPad Pro noch einmal. Ich werde es neu vergrössern und dann schauen wir uns genauer an. Unsere Kopfleiste hat die gleiche Größe erhalten und sind Symbole sehen nicht so aus, als wären sie überhaupt gestreckt . Wenn wir hier klicken, können wir sehen, dass einige dieser Objekte an der Ecke angeheftet sind, so dass sie die gleiche Größe bleiben. Und dann dieser, der als schwebender Ort zentriert ist. Es wird also die ganze Zeit zentriert bleiben. Wenn wir nach unten scrollen, haben wir unseren Standort und die Zeit, die Luft gesendet wird, um an Ort und Stelle zu schweben, und wir können sehen, dass das Symbol direkt neben den Bildern bleibt. Kaufen Sie Tickets. Es ist ein wenig zu groß, aber wir wollen, dass es größer wird, wenn es auf dem iPad ist. Also hier haben Sie es gesendet, um die Größe des Objekts zu ändern. Was wir tun können. Moment können wir die Zeit einfach etwas nach oben verschieben, und wir haben eine wirklich große Aktion, um die Tickets zu kaufen. Wir können nach unten scrollen und sehen. Unsere Leute haben sich ein wenig ausgebreitet, und ähnlich wie mit unseren Symbolen, haben sie die gleiche Größe erhalten, aber sich ausgebreitet. So sind wir ziemlich nah an dem, was wir wollen das iPad Toe aussehen mit nur ein paar Anwendungen der Wieder Größenoptionen. Keines unserer Symbole Luft gestreckt. Unsere Profilbilder sind immer noch Kreise, und ein großer Teil des Textes hat sich so angeordnet, wie wir es wollten. Wir müssen ein paar kleine Updates machen, aber nichts zu großes. Nun, da wir uns ein Beispiel angeschaut haben, würde ich gerne sehen, was jeder einfällt. Fühlen Sie sich frei, Skizzen, Ideen und Ihre finalen Bildschirme zu teilen . Wenn jemand eine Frage hat, Feedback wünscht oder einfach nur sein Projekt teilen möchte, hinterlassen Sie einen Kommentar unten. Im Community-Abschnitt dieses Kurses hat eine letzte Notenskizze einige Einschränkungen. Wie Sie auf unserem iPad-Beispiel gesehen haben, gehen die Wiederdimensionierungsoptionen nur so weit. Designs müssen immer noch manuell geändert werden, wenn die Größen viel größer oder kleiner als das ursprüngliche Design sind. Wir haben mehr Flexibilität und Freiheit im Design als je zuvor, aber es gibt immer Raum für Verbesserungen. Wir werden sehen, was die Zukunft bringt. Vielen Dank, dass Sie an diesem Kurs teilgenommen haben. Ich hoffe, Sie haben etwas gelernt, und wenn Sie es genossen haben, lassen Sie bitte eine Überprüfung der Gerichte unten. Nochmals vielen Dank und glückliches Design