Einführung in das Design mobiler Anwendungen mit Sketch

1. Einführung: Hi, ich bin Andrew Mercando. Ich bin ein Digital Product Designer hier bei Skillshare. Also, als Designer bei Skillshare, ich an dem gesamten Designprozess arbeiten, ob es darum geht, neue Funktionen zu skizzieren, einige Drahtrahmen zusammenzustellen, die unser Engineering-Team anfangen kann, zu sprengen und zu bauen, oder tatsächlich UI für, sagen wir, unsere iPhone-App oder eine Website zu entwerfen . Also, in dieser Klasse werden wir uns auf das letzte Stück konzentrieren. Ich werde Ihnen beibringen, wie Sie wirklich schnell schöne Benutzeroberflächen mit Sketch erstellen können. Ich denke, es ist eine gute Zeit, Sketch zu lernen. Es ist eines der neueren Design-Tools, aber es ist wirklich ein Tool, das von Grund auf für Benutzeroberflächen gebaut wird [unhörbar]. So gibt es eine Reihe von Funktionen, die es wirklich einfach machen, Ideen aus dem Kopf und auf den Bildschirm zu bekommen , so dass Sie schnell die Ergebnisse Ihrer Ideen und Ihrer Arbeit sehen können. Also, ich denke, diese Klasse ist großartig für alle, die ihren ersten Vorgeschmack auf das mobile App-Design bekommen wollen . Wir werden die Grundlagen von Sketch abdecken, also Dinge wie das Erstellen Ihrer ersten Formen und das Styling Ihrer Formen in Ihrem Text, um ein wirklich schönes iPhone-Erlebnis zu machen. Am Ende dieser Klasse sollten Sie ein wirklich großes Verständnis für das Werkzeug haben und was es tun kann, und wie Sie es wirklich nutzen können, um jede Idee zu machen, die Sie möglich haben. 2. Projekt: Design einer To-Do-List-App: Diese Klasse ist wirklich für Anfänger, so dass Sie keine Erfahrung brauchen, um in diese Klasse zu kommen. Sie brauchen keine andere Software zu kennen, wir werden wirklich von den Grundlagen der Skizze beginnen und während der Lektionen wirklich auf diesen Kernkonzepten aufbauen und sehr schnell entwerfen uns ein wirklich schönes To- Do List App. Ich denke, dass To-Do-List App ein großartiges erstes UI-Design-Projekt ist, so dass unsere App wirklich einfach sein wird. Es wird nicht eine Tonne von Bildschirmen sein, aber es wird Ihnen erlauben, wirklich kreativ mit, wie Sie die To-Do-Liste App entwerfen möchten. Ich werde Sie durch die Gestaltung meiner eigenen To-Do-Liste App führen, und Sie werden alles über die Grundlagen der Skizze lernen und wie wirklich schnell qualitativ hochwertige, schöne Benutzeroberfläche Design zu produzieren . Ich bin wirklich aufgeregt zu sehen, was ihr euch einfällt. Stellen Sie sicher, dass Sie Ihr Projekt in die Skillshare Project Gallery hochladen, und ich werde durchgehen und Feedback und Kommentare zu dem, was Sie erstellen. 3. Formen, Text und einfaches Styling: Hey, Leute, willkommen zu eurer ersten Lektion. Wenn Sie Sketch noch nicht heruntergeladen haben, gehen Sie zu bohemiancoding.com. Auf dieser Seite können Sie eine kostenlose Testversion herunterladen. Sobald Sie alle eingerichtet und installiert sind, beginnen wir mit einer brandneuen Sketch-Datei. Sobald Sie alle eingerichtet und installiert sind, öffnen Sie die Sketch-Datei, die ich mit Ihnen verknüpft habe, auf der Registerkarte Klassenprojekt auf skillshare.com. In diesem Video gehen wir über einige der Grundlagen von Sketch. Am Ende lernen Sie, wie Sie Formen wie Rechtecke, Kreise und sogar einige komplexere erstellen, um ein Projekt-Coverfoto zu erstellen, wie Sie hier sehen. Lassen Sie uns beginnen, dieses Projekt Titelfoto neu zu erstellen. Also, das erste, was wir tun wollen, ist ein neues Rechteck auf unsere Sketch-Leinwand einfügen . Sie können alles, was Sie möchten, in die Sketch-Arbeitsfläche einfügen, indem Sie in dieser Einfüge-Dropdown-Liste in der oberen linken Ecke der Benutzeroberfläche gehen. Hier haben Sie alles, was Sie auf die Sketch-Arbeitsfläche einfügen können. Wir werden die meisten dieser Dinge in dieser Klasse durchgehen, aber im Moment beginnen wir mit der Form und wählen Rechteck. Sie können auch die Tastenkombination R für den schnellen Zugriff auf Rechteck verwenden. Sie werden sehen, dass mein Cursor zu einem Fadenkreuz mit einem kleinen Quadrat daneben geändert hat. Also, was Sie jetzt tun möchten, ist klicken und ziehen, um Ihr Rechteck zu erstellen. Mach dir keine Sorgen um die Größe, denn wir werden das in einer Sekunde anpassen. Großartig, also hast du dein erstes Rechteck erstellt. Also jetzt, lasst es uns ein wenig anpassen. Wenn wir hier auf die rechte Seite von Sketch gehen, werden Sie sehen, dass wir unser Inspektorfenster haben, und hier können wir alle verschiedenen Eigenschaften unsererFormen oder irgendetwas anderes anpassen alle verschiedenen Eigenschaften unserer , das wir in Skizze. Beginnen wir damit, seine Größe zu ändern. Sie werden die Breite Textfeld auswählen und lassen Sie uns, dass 800 und drücken Sie die Eingabetaste. Sie werden sehen, dass die Breite Ihrer Form aktualisiert, sobald Sie Enter drücken, und jetzt lassen Sie uns auch einfach machen es 450 Pixel hoch. Großartig. Jetzt haben wir ein Rechteck in der exakten Größe, die wir wollen. Also, das nächste, was ich tun möchte, ist, dieses Rechteck tatsächlich zu einer anderen Farbe zu machen . Wenn wir also zu diesem Füllbereich im Inspektorfenster gehen und auf dieses kleine graue Feld klicken, sehen Sie eine kleine QuickInfo, die eine Reihe von verschiedenen Optionen für das Styling dieses Rechtecks hat. So kann ich die Farbe ändern, indem ich einfach die gewünschte Farbe aus diesem kleinen Farbwähler auswähle. Ich kann auch eine der voreingestellten Farboptionen von Sketch verwenden. Also lass uns voran gehen und unser Rechteck blau machen. Also bin ich ziemlich glücklich mit dieser Farbe blau. Also, ich werde nach draußen klicken, um einfach den Farbwähler zu schließen. Sie werden direkt darunter sehen, gibt es einen weiteren Abschnitt namens Ränder. Mit den Rahmen können Sie steuern, ist der Stil des Umrisses Ihrer Form. Lassen Sie mich diese 10 Pixel breit machen, damit Sie besser sehen können, wovon ich rede. Also, die Grenze ist im Grunde nur ein Umriss Ihrer Form. Sie können wählen, wo die Position ist, also entweder innerhalb zur Mitte oder direkt außerhalb Ihrer Form, und genau wie Füllungen können Sie auch die Farbe anpassen. Ich will eigentlich keinen Rahmen an meinen Formen, also werde ich voran gehen und das Häkchen deaktivieren. Also als nächstes machen wir einen Kreis. Sie können entweder zur Einfüge-Dropdown-Liste gehen oder Sie können einfach O drücken, um ein neues Oval zu erstellen. Also dieses Mal, wenn Sie klicken und ziehen, ich möchte, dass Sie gedrückt halten Shift. Was Sie hier sehen werden, ist, dass, wenn Sie die Höhe und Breite des neuen Ovals ziehen , das Sie erstellen oder gleich bleiben. Ich gehe voran und zentriere diesen Kreis. Also, Sie werden hier oben in der Größe sehen, wir haben ein Oval erstellt, das 230 Pixel breit und 230 Pixel hoch ist. Da wir die Verschiebung nach unten gehalten haben, während wir sie erstellt haben, sind die Proportionen dieser Form Beschränkung. Wenn Sie dies vorangehen und ziehen, um die Größe zu ändern, werden Sie sehen, dass es immer die gleiche Breite und Höhe bleibt. Sie können dies deaktivieren, indem Sie auf dieses kleine Schloss zwischen Breite und Höhe im Inspektorfenster klicken. Moment werde ich es anlassen, weil ich will, dass das ein perfekter Kreis ist. Ich gehe voran und zentriere es in meinem Hintergrund. Sie werden sehen, dass diese kleine rote Richtlinie zeigt anzeigt, dass Sie jetzt Ihren Kreis zentriert haben. Lasst uns diesen Kreis stylen. Ich werde die Grenze abschalten und ich will sie nur weiß machen. Also verwende ich eine der globalen Farben von Sketch, um diese in Weiß zu ändern. Ehrfürchtig. Also habe ich jetzt einen Hintergrund und einen Kreis. Lassen Sie uns voran und erstellen Sie jetzt unser Häkchen. Lassen Sie uns also darüber nachdenken, was ein Häkchen ist. Grundsätzlich sind es zwei überlappende Rechtecke. Also geh ich weiter und zeichne die jetzt. Lassen Sie uns unser erstes Rechteck 20 Pixel breit und 100 Pixel hoch machen, und wir machen nur ein zweites Rechteck, das 20 Pixel hoch ist, indem wir es 60 Pixel breit machen. Großartig. Also, lasst uns diese beiden einfach übereinander positionieren. Also, was wir jetzt tun wollen, ist, diese beiden Rechtecke zu nehmen und sie in nur eine einzige Form zu verwandeln. Also, was Sie tun möchten, ist wählen Sie beide Ihre Rechtecke und gehen Sie hier nach oben zu Ihren zusammengesetzten Formoptionen. Wir gehen über die erste. Also, was Vereinigung tut, ist es braucht zwei überlappende Formen und erzeugt eine Form, indem sie sie kombiniert Gehen Sie also voran und klicken Sie auf Vereinigung. So sehen Sie jetzt, was Sie haben, ist nur eine Form aus unseren beiden Rechtecken, die als eine Form gestylt und bearbeitet werden können. Also, ich gehe voran und drehe dieses negative 45 Grad, um ein Häkchen zu machen, und gehe einfach voran und positioniere das direkt über dem Kreis. Ehrfürchtig. Also, lassen Sie uns unsere nächste zusammengesetzte Form machen. Wenn Sie also Ihr Häkchen und Ihren Kreis auswählen, gehen Sie hier hoch und versuchen wir das Subtrahierwerkzeug. Also, was das tut, ist, dass es subtrahiert, was die obere Form von der unteren Form ist. Also, was das tatsächlich getan hat, ist, dass es eine Form mit einem Häkchen erstellt hat, das daraus ausgeschnitten ist. Also, das nächste, was ich meinem Projekt Coverfoto hinzufügen möchte , ist der Titel unserer App. Um dies zu tun, füge ich meiner Leinwand eine Textebene hinzu. Die Tastenkombination für Textebene ist T und ich gehe einfach voran und klicke. Also, was Sie sehen, ist ein vorgefüllter Text erscheint, der besagt, dass etwas tippt und es ist bisher ausgewählt. Ich fange an, den Namen meiner App, Todo App, einzugeben , es erscheint direkt auf meiner Leinwand. Sie können Escape drücken, um aus dem Textbearbeitungsmodus zu kommen. Ehrfürchtig. Also lassen Sie uns jetzt den Stil unseres Textes ändern. Im Inspektorfenster sehen Sie, dass ich hier einige textspezifische Optionen habe. Die erste ist die Schrift. Dies wird im Grunde nur jede Schriftart ziehen, die Sie auf Ihrem Computer installiert haben. Ich ändere meine jetzt in Bell Gothic und setze meinen Text fort. Unter der Schrift und dem Gewicht haben Sie einige andere Optionen. Also, in diesem kleinen Zahnrad, können Sie Dinge tun, wie fügen Sie eine Unterstreichung oder einen Durchgestrichen oder ändern Sie Ihren Text in eine Liste. Ähnlich wie bei den Formebenen können Sie verschiedene Farben für Ihren Text auswählen. Ich werde voran gehen und meine weiß lassen, und Sie können auch die Größe Ihres Textes anpassen. Also mache ich meine 48. Manchmal schließen sich diese kleinen Tooltips nicht, aber wenn Sie einfach auf die Schaltfläche „Farbe“ klicken, wird sie sich normalerweise verlassen. Sie haben also auch die Kontrolle über die Ausrichtung Ihres Textes. Im Moment ist meiner übrig, also wird jeder Text, den ich ihm hinzufüge, einfach links hinzugefügt. Ich werde das eigentlich zentriert machen wollen. Also, wenn ich Text zu diesem Titel hinzufüge, wird es einfach voran gehen und sich selbst zentrieren. Die nächste Option, die Sie haben, ist Breite. Also, hier gibt es zwei Möglichkeiten. Wenn Sie beim Erstellen der Textebene einfach auf klicken, erstellen Sie eine automatische Breite. Grundsätzlich ist das, wofür dies gut ist, eine einzelne Textzeile. Wenn ich diese Textzeile weiter hinzufüge, werden Sie feststellen, dass sie nie ein Wort umbricht. Wenn ich einen Textabsatz erstellen möchte, kann ich diesen entweder in „Fest“ ändern; oder während ich meine Textebene erstelle, kann ich klicken und ziehen, um eine Textebene mit einer bestimmten Dimension zu erstellen. Lassen Sie mich das einfach in Schwarz ändern. Wenn ich hier tippe, werden Sie Wörter Zeilenumbruch bemerken. Dies ist also besser, wenn Sie einen Absatz oder einen mehrzeiligen Textbereich setzen. Moment werde ich voran gehen und das löschen. Unter der Breite können Sie auch den Abstand zwischen den Zeichen, die Zeilenhöhe und den Absatzabstand anpassen, wenn Sie ein Textfeld mit fester Breite erstellen möchten. Ich liebe diese Schriftart, die ich gewählt habe, nicht, also werde ich eigentlich als nächstes zurück zu Avenir gehen und das nicht mutig machen. Ich mache das nur zu einem einfachen Medium. Ehrfürchtig. So haben wir einen tollen Start in unser Projekt-Coverfoto. Im nächsten Video lernen wir, wie man etwas fortschrittlicheres Styling macht, um etwas wirklich Einzigartiges zu kreieren, das wir dann auf Skillshare hochladen können. 4. Fortgeschrittenes Styling und Feinschliff: In Ordnung. Nun, da wir einen Griff auf einige der Grundlagen der Skizze haben, lassen Sie uns etwas fortschrittlicheres Styling machen. Also, das erste, was ich tun möchte, ist über einige Fülloptionen zu sprechen, die wir haben. Also, wenn Sie voran gehen und wählen Sie Ihren Hintergrund hier, werden Sie aus dem letzten Video wissen, dass wir nur eine sehr einfache Füllung von Blau gemacht haben. Sketch ist jedoch ziemlich mächtig, da Sie mit ihm mehrere Füllungen zu jedem Objekt auf seiner Leinwand hinzufügen können . Also, wenn Sie hier zum Füllbereich gehen und dieses kleine Plus-Symbol drücken, werden Sie feststellen, dass wir jetzt zwei verschiedene Füllungen für dieses Objekt haben. Also, was wir hier haben, ist eine Farbverlaufsfüllung. Mit einem Farbverlauf können Sie Dinge wie die Richtung des Farbverlaufs steuern Sie können auch die Farbe des Farbverlaufs ändern, indem Sie einen dieser Endpunkte auswählen und den Farbverlauf mithilfe der Farbauswahl anpassen. Also, lass mich weitermachen und das ein bisschen tiefer von einem Blau hier drüben machen, und hier drüben sieht das so weit ziemlich cool aus. Lassen Sie uns also einige der anderen Fülloptionen erkunden. Also, Sie haben auch Dinge wie radiale Verläufe, also wird uns das zu einem Gradienten machen, der von einem Mittelpunkt emittiert, Winkelverläufe oder etwas namens Musterfüllungen. Also, was Musterfüllungen sind, ist im Grunde, Skizze wird Ihren Bereich mit einem Bild Ihrer Wahl füllen. Ich werde eine Hintergrundfüllung hinzufügen, aber ich werde dieses kleine Graphpapier suchen Raster hier drüben wählen . Ich kann die Skala meines Füllstrahls von hier aus anpassen. Also, lassen Sie mich das ungefähr 55 machen, das sieht gut aus, und ich schließe den Füllsammler. Jetzt habe ich keine granulare Kontrolle über die Farbe dieser Füllung, aber was ich tun kann, ist den Mischmodus und auch die Deckkraft zu ändern. Also, lassen Sie mich einfach voran und ändern Sie dies in eine 20-prozentige Deckkraft. Ich werde Enter drücken und dann vielleicht multiplizieren obwohl es einfach normal zu lassen, wahrscheinlich meinen Bedürfnissen entspricht. Ehrfürchtig. Also, jetzt habe ich dieses coole Gitterpapier suchen Farbverlauf gefüllten Hintergrund. Also, das nächste, was ich tun möchte, ist darüber zu sprechen, einige Schlagschatten zu unseren Objekten hinzuzufügen. Wenn ich also mein Häkchen anwähle und hier in den Schattenbereich im Inspektorfenster gehe und einen neuen hinzufüge, wirst du sehen, dass meiner Komposition ein kleiner Schlagschatten hinzugefügt wurde. Ich habe die volle Kontrolle darüber, also wenn ich den x- und y-Offset 00 machen möchte, also ist es direkt darunter, bekommst du nur dieses Glühen um ihn herum. Ich werd das aufstoßen, um dir zu zeigen, wie das aussieht. Es fängt wirklich an, dies so aussehen zu lassen, als würde es ein wenig vom Bildschirm fallen. Es gibt ihm ein wenig Tiefe, das schwebt über meinem Hintergrund. Ich mache dies zu einer Sechs, und Sie können auch Dinge tun, wie die tatsächliche Farbe und Deckkraft dieses Hintergrunds zu ändern. Ich bin ziemlich zufrieden mit den Standardeinstellungen, aber wenn ich es zu einem Rot machen wollte, was schwer zu sehen ist, weil es so transparent ist, können Sie das auch tun. Schatten können auf jedes Objekt angewendet werden. So können Sie tatsächlich voran gehen und Ihrem Text auch einen Schatten hinzufügen. Also, ich mache diese sechs, und jetzt sieht der Text so aus, als würde er auch abspringen. In Ordnung. Also, jetzt, da ihr euch mit der Skizze auskennt, möchte ich, dass ihr euer Projekt-Coverfoto so gestaltet, wie ihr wollt. Du kannst ein bisschen verrückt werden. Stellen Sie sich dies als eine Gelegenheit vor, den Ton und die künstlerische Richtung für den Rest Ihrer App festzulegen . Wenn Sie mit dem Styling Ihres Titelfotos fertig sind, laden wir dieses in die SkillShare Project Gallery hoch, damit Sie den restlichen Klassenkameraden zeigen können, was Sie erstellen möchten. 5. Exportieren und Hochladen: Nun, da Sie Ihr Projekt-Coverfoto so gestaltet haben, wie Sie möchten, möchte ich ein wenig über Ebenen und gute Hygiene sprechen , während Sie eine Skizze entwerfen. Sie werden also auf der linken Seite der Skizzenoberfläche feststellen, dass Sie im Grunde alles haben , was Sie dem Skizzenbereich bisher hinzugefügt haben. Diese Liste ermöglicht es Ihnen, Ihr Objekt zu bestellen , so dass Sie Dinge vor- oder hintereinander platzieren können. Sie können auch Ihre zusammengesetzten Shapes erweitern, um jedes der Shapes, aus denen es besteht, auf granulare Weise anzupassen , und vor allem können Sie diese Layer umbenennen. Also, was ich gerne mache, ist, dass ich einfach wirklich organisiert bleiben und meine Ebene umbenennen, damit sie leicht zu finden sind und zu Ihnen zurückkehren können. Also, lass uns voran gehen und diesen einen Hintergrund nennen. Wir ändern den Namen dieses zu Häkchen und wir können unseren Text so belassen, wie er ist, skizziert standardmäßig Namen, Ihre Textebenen, was auch immer Sie in sie eingeben. Ehrfürchtig. Also, jetzt haben wir eine schöne saubere Designdatei. Eine weitere Funktion der Skizze, die Ihnen hilft, organisiert zu bleiben, ist die Gruppierung. Also, was soll ich damit meine? Also, wenn ich zu meiner Leinwand gehe und Sie dies auch aus Ihrem Ebenenfenster tun können und alle meine Ebenen auswählen und Befehl G drücken, werden Sie sehen, dass es alles in einen Ordner reduziert hat. Also, im Grunde, was das ist eine Gruppe und Skizze. Also, ich kann diese Gruppe benennen, also nenne ich sie einfach Coverfoto und jetzt wird Skizze dies als ein Objekt behandeln. Also, wenn ich darauf klicke, wird es die Gruppe auswählen und ich kann sie herumziehen und alles, was in dieser Gruppe ist, wird zusammen verschoben. Wenn ich Dinge in der Gruppe auswählen möchte, kann ich entweder den Befehl gedrückt halten und das lässt mich tief in die Gruppe auswählen , oder ich kann auf Objekte doppelklicken und das lässt mich eine Ebene tiefer in die Gruppierungen gehen. Jetzt, wo ich mein Projektcover Foto gruppiert habe, kann ich voran gehen und es auswählen und wenn ich in die untere rechte Ecke der Skizzenoberfläche gehe , gibt es diesen kleinen Bereich namens Make exportierbar. Was ich damit tun kann, ist die Größe und den Dateityp auszuwählen , die ich diese Gruppe exportieren möchte, damit ich diese Dateien außerhalb der Skizze verwenden kann. So kann ich verschiedene Bilddateien von PNG zu PDF zu SVG wählen. Ich werde meinen PNG verlassen. Ich kann auch mehrere Exporte der gleichen Optionen vornehmen. Also, wenn ich für iPhone entwerfe und ich Grafiken mit 2x oder 3x brauche, kann ich das auch tun. Wenn ich sowohl PNGs als auch SVGs brauche, kann ich diese auch einfach auf einen Schlag exportieren. Ich werde diese beiden Optionen tatsächlich löschen. Wenn Sie auf Foto exportieren klicken, werden Sie sehen, dass Ihre Dateiauswahl angezeigt wird und Sie können das einfach speichern, wo immer Sie wollen. Ehrfürchtig. Jetzt, da Sie Ihr Coverfoto exportiert haben, melden Sie sich bei Skillshare an, starten Sie Ihr Projekt und laden Sie es als Ihr Coverfoto hoch, und ich kann es kaum erwarten zu sehen, was ihr erstellt. 6. Seiten und Zeichenflächen: In Ordnung. Also sind wir bereit, mit der Gestaltung unserer App zu beginnen. Lassen Sie uns jedoch zunächst ein wenig darüber sprechen, wie Sketch-Dateien strukturiert sind. Also haben wir über die Layer-Liste in Gruppen gelernt, aber Sketch hat auch andere Organisationstools, die wirklich genial sind, wenn Sie Apps oder Webseiten entwerfen oder was auch immer Sie mit Sketch entwerfen werden. Also, wenn Sie dies bemerken, Gets Started Here Ausrufezeichen, ist ein kleines Dropdown-Menü. Was dies ist eine Seite in Sketch. Sketch ermöglicht es Ihnen, Ihre Datei in verschiedene Seiten zu unterteilen, die jeweils eine eigene Leinwand haben. Dies ermöglicht es Ihnen, alles, was Sie gerade arbeiten, in Gruppen zu teilen , die organisatorisch sinnvoll sind. Also, für diese Datei habe ich eine Seite für unsere Haupt-App-Bildschirme erstellt, ich habe eine andere Seite mit Interaktionen und Microstates eingefügt, und ich habe zwei andere Seiten mit einigen anderen Komponenten enthalten , die wir verwenden, während wir einige UI tun. Ich habe einige einfache UI-Komponenten von iOS enthalten , die wir verwenden werden, wenn wir unsere App tatsächlich entwerfen. Wenn Sie also auf das kleine Symbol klicken, können Sie die Seiten erweitern, um eine vollständige Liste dessen zu sehen, was Sie haben und schnell zu ihnen springen. Sie können auch eine neue Seite direkt von hier aus hinzufügen und ähnlich zu Gruppen oder Layer-Listen. Du kannst das benennen, was immer du willst. Ich gehe weiter und lösche das. Also, Seiten sind wirklich großartiges Werkzeug, um Sie in Sketch organisiert zu halten. Also, lasst uns auf eine der Seiten gehen. Lassen Sie uns in App-Bildschirme gehen. Also, in App Screens, werden Sie sehen, dass wir eine Reihe von, im Grunde, App-Ansichten haben. Wenn Sie klicken und ziehen müssen, wenn Sie die Leertaste gedrückt halten, wird der Mauszeiger gesperrt und Sie werden in der Lage sein, die Leinwand herum zu ziehen, nur super hilfreich, wenn Sie die Skizzenoberfläche navigieren. Also, was ich in App Screens getan habe, ist, dass ich eine Reihe von Artboards erstellt habe. Was Zeichenflächen im Grunde sind, sind eine besondere Art von Gruppe. Also, Zeichenflächen sind feste Rahmen. Ich verwende sie gerne, um verschiedene Zustände meiner App darzustellen. So habe ich zum Beispiel unser App-Icon. Wenn Sie zur Ebenenliste wechseln, können Sie die Zeichenfläche erweitern, um genau zu sehen , welche Formen und Objekte sich auf der Zeichenfläche befinden. Sie werden feststellen, wie ein Beispiel, dass diese Zeichenflächen sind feste Rahmen. Also, wenn sich etwas in Ihrer Zeichenfläche befindet und Sie es von der Seite ziehen, wird es tatsächlich für Sie zuschneiden. Also, ich werde das einfach nochmals eingeben. Um eine Zeichenfläche zu erstellen, können Sie entweder in die Dropdown-Liste Einfügen gehen oder die Tastenkombination A drücken, und Sie werden feststellen, dass Ihr Inspektorfenster eine Reihe von vordefinierten Vorlagen enthält , die Sketch enthält. Wenn ich dieser Datei einen weiteren Bildschirm hinzufügen wollte, klicke ich einfach auf iPhone 6 und du wirst sehen, dass Sketch neben meiner letzten Zeichenfläche eine weitere Zeichenfläche hinzufügt. Ehrfürchtig. So können Zeichenflächen wie jedes andere Objekt in Sketch, Listenansicht UI benannt werden. Zeichenflächen können auch herumgezogen und dort platziert werden, wo immer Sie sie auf der Leinwand haben möchten. Während wir entwerfen, werde ich einfach unsere UI-Zeichenflächen direkt unter unsere Wireframe-Zeichenflächen legen . Also kann ich schnell auf die Drahtmodelle zurückgreifen, die wir für uns selbst angelegt haben. Ehrfürchtig. Also, das sind nur einige der großartigen Funktionen, die Sketch hat, um Sie organisiert und sehen, während Sie entwerfen. Also, im nächsten Video, werden wir tatsächlich beginnen, an einigen der Benutzeroberfläche für unsere App zu arbeiten. 7. Überschrift: Ok. Jetzt sind wir bereit, mit dem Entwerfen der Benutzeroberfläche für eine To-Do-Listen-App zu beginnen. Das erste, was ich tun will, ist, gehen Sie zurück zu meinem Coverfoto und nehmen Sie es einfach und bringen Sie es in meine App-Bildschirme Seite, so dass ich zurück auf das Styling, das ich in ihm gesetzt. Also, ich gehe einfach vor und lege es direkt neben meinem ersten UI-Bildschirm, den ich hier unten habe. Also, was ich jetzt tun werde, ist, einfach voran und erstellen Sie die anderen Art-Boards für die Haupt-UI-Abschnitte. Also, was ich tun werde, ist, dass ich diese Kunsttafel ein paar Mal dupliziere. Also, ich kann entweder zum App-Board-Erstellungstool gehen, indem Sie die A drücken oder ich kann diese App-Board auswählen und ich kann die Option gedrückt halten und ziehen. Was das tun wird, ist, dass es nur duplizieren wird, was ich hier mache. Also werde ich einfach diese anderen drei Kunsttafeln erstellen und einige direkt unter den Drahtmodellen platzieren, die ich erstellen werde. Sie können voran gehen und einfach diese umbenennen, und eine letzte für Editieraufgabe, genial. Also, lassen Sie uns hineinzoomen und schauen Sie sich unsere Wireframes an. Also, in der Listenansicht haben wir im Grunde einen Header, in dem wir einen neuen To-Do-Artikel hinzufügen können, wir haben einen Abschnitt für unsere nicht fertig gestellten Artikel und wir haben eine Auflistung unserer fertig gestellten Artikel. Scheint so, als hätte jeder einzelne Wireframe, für den wir UI machen werden, einen dieser Header. Also, das ist wahrscheinlich ein guter Ort, um als erstes zu beginnen, was wir voran gehen und schaffen werden. Also, lasst uns jetzt damit anfangen. Also, das erste, was ich tun möchte, ist tatsächlich den Hintergrund für meinen Header zu erstellen. Also, ich werde R drücken, um ein neues Rechteck zu erstellen. Ich werde das ziehen, um die volle Breite meines Kunstboards für ein iPhone sechs, das 375 Pixel breit ist , wenn wir an der 1X entwerfen und ich werde einfach die Grenze davon entfernen. Also, was ich jetzt tun möchte, ist, zurückblicken auf mein Projekt-Coverfoto und beginnen einige Styling-Hinweise daraus zu nehmen. Also, das erste, was ich bemerken werde, ist, dass es diesen wirklich satten blauen Hintergrund hat. Wenn ich also weiter gehe und auf den Hintergrund meines Coverfotos klicke , kann ich sehen, was ich hier zurück habe. Also, wenn ich zu dieser Füllung gehe, möchte ich dieses Blau für meinen Header. Also, ich kann entweder voran gehen und den Hex-Wert direkt hier kopieren oder ich kann dieses kleine Plus hier unten neben meinen Dokumentfarben treffen. Was das tun wird, ist es, um diese Farbe für mich zu speichern und mir erlauben, nur schnellen Zugriff in jedem meiner Farbwähler zu haben. Also, lassen Sie uns den Hintergrund unserer Kopfzeile auswählen und es einfach so schön blau machen. Also, das nächste, was ich zu diesem Header hinzufügen möchte, ist diese, iOS-Statusleiste hier oben. Wie ich in einem vorherigen Video erwähnt habe, habe ich einige dieser iOS-Komponenten eingeschlossen, habe auch einen Link in den Klassennotizen in der Projektbeschreibung und füge das einfach direkt dort ein. Also, jetzt, da es da drauf ist, Sie nur wollen, um es bündig mit der Oberseite und den Seiten Ihres Kunstboards zu positionieren , und Sie haben jetzt Ihre iOS-Statusleiste. Also, das sieht wirklich schnell aus wie eine echte iPhone-App. Also, das nächste, was ich tun möchte, ist, fügen Sie einfach meinen Titel und meine Aktionslinks zur Kopfzeile hinzu. Also, gehen Sie einfach voran und drücken Sie „T“, um eine neue Textebene hinzuzufügen. Dazu möchten Sie nur klicken, weil Sie nicht wollen , dass es mit Textebene fixiert wird. Nennen wir das Todos, da dies eine Liste unserer To-Do-Artikel ist. Ich werde das zentriert machen. Also, wenn ich den Inhalt dieser Box anpassen möchte, wird es schön und zentriert halten, und ich werde es ein wenig dicker machen, indem ich es zu einem mittleren Schriftgewicht mache, nur weil es ein Titel ist, also sollte es ziemlich wichtig sein. Die Größe ist 18, ich bin eigentlich ziemlich glücklich damit für jetzt, also werde ich das verlassen. Als nächstes erstellen wir die Aktion. Also, wir hatten einen kleinen neuen Link hier oben rechts in unserem Header. Also, was ich tun werde, ist, ich wähle meinen Titel und ich werde „Option“ drücken, und ziehen Sie ihn. Während ich dieses Mal ziehe, ich Shift gedrückt. Was das tun wird, ist, es das einfach entlang der X- oder Y-Achse ziehen wird. In diesem Fall zieht es es es entlang des x. Also, es ändert nicht die y-Koordinaten davon, es wird nur das x ändern. Also, ich werde das einfach fallen lassen. Da dies rechtsbündig ist, ändere ich die Ausrichtung nach rechts und tippe hier neu ein. Ich kann den Abstand überprüfen, wie weit dieses Objekt von verschiedenen Dingen in der Kopfzeile entfernt ist, indem ich es einfach auswähle und die Alt-Taste drücke. Was das tun wird, wird es einige Messwerkzeuge aufzeigen , die Sketch uns zur Verfügung stellt. Sie werden also sehen, dass dies 13 Pixel vom rechten Rand des Kunsttafels entfernt ist und der Begrenzungsrahmen dieser x-Ebene 27 Pixel vom unteren Rand unseres Hintergrunds entfernt ist. Je nachdem, welche Beträge überschaufen, gibt es mir verschiedene Messwerkzeuge. Das nächste, was ich tun möchte, ist eigentlich auch einfach nur ein bisschen leichter zu machen. Also, es hat ein wenig von einem anderen Typ Gewicht als der Titel meiner App. Das ist also ein ziemlich großer Header. Ich denke tatsächlich, irgendwo unten um die Mitte der 60er Jahre ist wahrscheinlich eine bessere Headergröße für uns. Also, was ich dort tun werde, ist, ich werde die Höhe ändern, und dann möchte ich das einfach zwischen der Statusleiste und dem unteren Rand meines Hintergrunds zentrieren . Also, das war 13, also lass mich das einfach bis zu 10 passen. Dann haben wir 10 und 11. Also werden wir das nicht perfekt sogar bekommen, aber es ist wahrscheinlich gut für jetzt. Dann gehe ich weiter und ändere das auf 16. manchmal Wenn Sie ein Objekt ausgewählt haben und die Wahltaste gedrückt halten, um es zu verschieben, wird es um ein Zehntel eines Pixels verschoben. Es ist eine wirklich seltsame Sache, die Sketch tut. Ich weiß nicht, warum jemand das ein Zehntel eines Pixels verschieben möchte aber es ist nur eine dieser kleinen Macken, die Sketch hat, hoffentlich werden sie eines Tages reparieren. Also, was ich eigentlich tun werde, ist sicherzustellen, dass dies 16 Pixel von der Seite dieses Kunstboards entfernt ist . Cool. Nun, das nächste, was ich tun möchte, ist, diesem Header einfach ein wenig Tiefe zu geben. Also, ein Header sitzt auf Ihrer Benutzeroberfläche und die Dinge werden wahrscheinlich dahinter gleiten. Also, was ich tun will, ist nur einen einfachen kleinen Schlagschatten hier hinzuzufügen. Der Standard-Schlagschatten ist also ein wenig dunkel. Also, ich gehe in die Farbe und lasse mich das auf 30 Prozent Deckkraft niederschlagen, und ich mache die Unschärfe auch ein bisschen weniger, vielleicht machen Sie den Offset in der Y-Achse nur eins. Also, ja. Das gibt mir einen schönen subtilen Schatten. Also, es wird wirklich so aussehen, als würden die Dinge dahinter vorbeigehen. Also, großartig. Jetzt haben wir unsere Kopfzeile, gehen wir weiter und bleiben einfach organisiert. Also, ich wähle den Hintergrund aus und lasse mich das einfach umbenennen und alles andere ist ziemlich richtig benannt, aber ich werde einfach voran gehen und diese in Header-Gruppe gruppieren. Ehrfürchtig. Jetzt haben Sie eine Kopfzeile, die Sie auf dem Rest Ihres iPhone-App-Bildschirms verwenden können. Also, wenn Sie es einfach zur Create.Task-Ansicht hinzufügen und dies in Speichern ändern, haben Sie eine wirklich wiederverwendbare Komponente, die Sie in Ihrer gesamten App verwenden können. Sie müssen fortfahren und das kleine x erstellen, um aus der Ansicht Speichern oder dem Symbol „Zurück“ zu gelangen. Also kann ich voran gehen und das jetzt einfach tun. Also mache ich zwei Rechtecke. Lassen Sie uns also drei Pixel breit und 35 Pixel hoch machen. Töte die Grenze drauf. Kopieren Sie es [unhörbar] Befehl, V-Ende drehen Sie einfach, dass 90 Grad. Es sieht so aus, als wäre das ein bisschen abseits der Mitte. Also, warum machen wir das nicht gerade Zahlen. Ich werde meine.Union Tool verwenden und dann werde ich sie um 45 Grad drehen und ich könnte das jetzt direkt in meine Kopfzeile setzen. Es ist ein bisschen groß, also mach ich es einfach auf 20 20 und mache es zu einer weißen Farbe. Cool. So können Sie jetzt voran gehen und Ihren Header wie Sie wollen und duplizieren Sie ihn auf alle Art-Boards, die für den Rest Ihrer App benötigt werden , und ich werde Sie im nächsten Video sehen. 8. Symbole: In unserer letzten Lektion haben wir unsere Benutzeroberfläche begonnen, indem wir Kopfzeilen für jeden unserer App-Bildschirme erstellt haben. Als nächstes beginnen wir mit der Erstellung einiger Objekte, die sich in unserer Listenansicht befinden. Lassen Sie uns die Listenansicht vergrößern, indem Sie Command Plus drücken und unsere Leinwand ziehen, indem Sie die Leertaste gedrückt halten. Was wir in dieser Listenansicht haben, sind ein paar sich wiederholende Elemente. Also, wir haben einen wiederholten Header für jeden dieser Abschnitte, und dann innerhalb jeder dieser Abschnitte, wir haben nicht getan, todos, und wir haben einige abgestrichen todos. Also, was ich Ihnen in dieser Lektion zeigen möchte, ist, wie Sie ein wiederverwendbares Stück Design erstellen. Beginnen wir also damit, diese Abschnittstitel als ein wirklich einfaches Beispiel zu machen. Sketch hat also ein wirklich leistungsfähiges Werkzeug namens Symbole. Also, wenn ich voran gehe und ein Rechteck für meinen Abschnittskopf erstelle, gehe ich einfach voran und ich werde dies stylen, ich werde das hier unten bringen, bis es wirklich hellblaugrau ist. Ich füge diese Farbe zu meinen Dokumentfarben hinzu, da ich sie möglicherweise wiederverwenden möchte. Ich erstelle diesen kleinen Hintergrund für meinen Abschnittskopf und ich werde einfach voran gehen und ich werde einen Titel dafür erstellen. Also, ich nenne das nicht fertig, und ich werde einfach die Schriftart anpassen. Ich mache das wirklich zu einem schönen Dunkelblau. Alles läuft mit einer Art blauen Farbton hier, und ich werde es visuell zentrieren. Mache dies 16 Pixel von der Seite weg, um meinem Actionelement hier zu entsprechen. Toll, das sieht ein bisschen groß aus, also werde ich das auf 14 niederschlagen und es einfach da drin zentrieren. Awesome! Lassen Sie mich also eine Gruppe dafür erstellen und dies eine Abschnittsüberschrift nennen. Ihre App hat möglicherweise eine Reihe von Abschnittsüberschriften. Wir haben also einen Abschnitt „Nicht Fertig“, aber wir haben auch einen Abschnitt „Fertig“. Jetzt kann ich einfach, die gleiche Weise wie wir unsere Header erstellt haben, einfach zwei Objekte wie diese erstellen. Aber wenn ich die Farbe ändern möchte, um ein Dunkel mit einer hellen Überschrift zu sagen, muss ich genau dasselbe tun oder es erneut kopieren und diesen anderen Abschnittskopf neu erstellen. Zum Glück gibt Ihnen Sketch ein ziemlich großartiges Werkzeug namens Symbole, wo Sie, wenn Sie nur eines aktualisieren, können Sie den Rest von ihnen aktualisieren. Es wird automatisch den Rest von ihnen aktualisiert. Also, lassen Sie es uns ausprobieren. Wenn Sie also Ihre Überschrift auswählen, die Sie ein Symbol erstellen möchten, und klicken Sie einfach mit der rechten Maustaste darauf, können Sie zu dieser Option Symbol erstellen gehen. Alternativ können Sie auch hier in der Kopfzeile nach oben gehen. Wenn Sie also ein Symbol erstellen, werden Sie feststellen, dass es diesen Ordner in diese violette Farbe geändert hat . Sie also jetzt eine weitere Abschnittsüberschrift in dieser violetten Farbe haben, WennSie also jetzt eine weitere Abschnittsüberschrift in dieser violetten Farbe haben,werden sie beide aktualisiert, und Sie können dies für alles tun, was Sie wollen. Wenn Sie also Ihre Typstile aktualisieren, wird es aktualisiert. Wenn Sie die Größen und Farben aktualisieren , wird es nur aktualisiert. Also, eine Sache, die Sie wissen sollten, dass standardmäßig wird es auch den Text hier in aktualisieren. Sie werden feststellen, dass ich den Text geändert habe und er sich an beiden Stellen geändert hat. Aber das ist nicht etwas, was wir wollen. Also, was Sie tun müssen, ist tatsächlich, auf Ihrer Textebene zu diesem kleinen Häkchen, gehen Sie auf Ihrer Textebene zu diesem kleinen Häkchen,das angezeigt wird, wenn Ihre Textebene in Assemble ist, und drücken Sie einfach Textwert aus Symbol ausschließen. Also, was Sie jetzt tun können, ist tatsächlich verschiedene Textwerte drin und das Symbol wird ignorieren, was in diesem Textfeld ist, aber es behält immer noch alle seine Styling-Optionen, so dass Sie konsistent bleiben und die Styling. Eine andere Sache zu beachten ist, diese beiden Symbole verknüpft sind, aber Sie können den Titel von ihnen unabhängig ändern, wenn Sie organisiert bleiben möchten. Also, Sie können Abschnitt Überschrift für diesen Kerl tun und drücken Fertig und dann können Sie hier tun, nicht fertig. Cool, also ist das wirklich mächtig. Also, das nächste, was wir tun werden, ist, Symbole zu verwenden, um die Zeilen unserer to do Liste zu erstellen. Also, diese sind alle im Grunde gleich und wir wollen Symbole erstellen. Also, wenn wir das Styling eines von ihnen aktualisieren, ändern sie sich alle. Also, lasst uns anfangen, diese Zeile zu erstellen. Also, lassen Sie uns das Element Nicht Fertig zu tun erstellen. Also, ich werde ihm nur einen Hintergrund geben. Ich werde diesen Hintergrund für jetzt weiß machen. Was ich tun möchte, ist Kopieren und Einfügen direkt dort. Ich möchte nur einen wirklich leichten Strich auf der Unterseite machen , so dass ich jedes meiner zu tun Dinge trennen kann. Also, ich habe dieses Objekt. Was ich jetzt tun werde, ist, dass ich die Höhe auf ein Pixel hoch ändere. Also, ich mache einen und du wirst sehen, dass ich jetzt ein Rechteck mit einem Pixel habe. Ich nenne dies einen unteren Strich, und ich werde dieses Objekt Hintergrund nennen. Also, ich möchte, dass dies unten mit dem Hintergrund ausgerichtet ist, dieser untere Strich und der Hintergrund unten ausgerichtet ist. Also, ich wähle beide dieser Objekte aus und ich komme hierher zu diesen Ausrichtungswerkzeugen, und was Sie tun können, ist, dass Sie Dinge tun können, wie es an der Mitte, an der Spitze oder an der Unterseite ausrichten können. Also, ich möchte meine nach unten ausrichten. Also, ich habe diesen kleinen Schlag hier unten. Das nächste, was ich tun möchte, ist ein leeres Häkchen zu setzen , um anzugeben, dass dieses Objekt noch nicht ausgecheckt wurde. Also, gehen wir zurück zu unserem Projekt-Coverfoto. Wir haben bereits ein Häkchen gesetzt, also gehe ich einfach weiter und nehme es direkt von hier aus. Ich kopiere es und füge es in meine neue Zeile ein und ändere es direkt dort. Ich mache das 40 Pixel mal 40 Pixel, und dann wähle ich den Hintergrund aus, und ich werde mein Ausrichtungswerkzeug verwenden, um sicherzustellen, dass es nur mittig ausgerichtet ist. Lassen Sie uns diese 16 Pixel von der Seite entfernen. Großartig. Bevor wir weiter gehen, werde ich einfach voran gehen und ich gruppiere diese in eine Gruppe und nenne es einfach Task - Not Done. Ehrfürchtig. Also, ich möchte das Styling ändern. Ich werde tatsächlich die Farbe in unser kleines Hellblau ändern, und ich möchte, dass es auf die Reihe eingeprägt aussieht, anstatt darüber zu schweben. Also schalte ich den Schatten aus und probiere einen dieser kleinen inneren Schatten aus. Also, machen Sie die Null. Halten Sie es eine Unschärfe von drei, aber ändern Sie dies nur auf 30, so dass es nur ein wenig subtiler ist. Ich kann wirklich... lassen Sie mich 20 versuchen. Großartig. Also, jetzt haben wir unser leeres Häkchen. Es sieht so aus, als ob es etwas ist, das ausgefüllt werden muss und wir können voran gehen und einfach den Titel dafür erstellen. Also, ich werde diesen 18 Punkt machen, ich will es mittel machen, und ich nenne es Lorem Ipsum. Ehrfürchtig. Es hat meine schöne dunkelblau auf da und ich weiß, dass auf einigen von ihnen gab es ein Fälligkeitsdatum also werde ich einfach voran gehen und ich werde eine Fälligkeitsdatumsschicht hinzufügen. Ich werde das viel kleiner machen, vielleicht eine 14 und ich mache das ein bisschen heller grau-blau und ich kann das regelmäßig machen. Sagen wir: „Morgen um 12:00 Uhr.“ Awesome, und richten Sie diese aus. Ihr könnt das so gestalten, wie ihr es für richtig hält. Spielen Sie mit der Größe und dem Abstand herum, bis Sie etwas haben, das Sie mögen. Ich wähle beide aus und hoffe, dass sie nicht in meiner Gruppe sind. Also, wenn Sie etwas zu einer Gruppe hinzufügen möchten, die bereits existiert, gehen Sie einfach zu dieser Ebenenliste und ziehen Sie sie einfach direkt hinein und jetzt, ich sollte in der Lage sein, die Messung weg von diesem Häkchen zu tun. Ok, großartig. Also, jetzt habe ich diese 16 Pixel mal 16 Pixel und manchmal mag ich auch nur Sachen aufstellen. Mit Sketch erhalten Sie diese Werkzeuge. Sie werden Lineale genannt und im Grunde, wofür diese gut sind, ist, dass Sie auf diese Lineale auf der Seite klicken und diese Richtlinien wirklich schnell zu Ihrer Datei hinzufügen können. Also, was ich tun könnte, ist tatsächlich die Grundlinie davon und die Spitze dieses zu richten. Also, alles passt wirklich ordentlich in dieses kleine Häkchen. Sie können Lineale immer loswerden, indem Sie sie direkt vom Lineal ziehen. Also, es ist ein wirklich schnelles und einfaches Werkzeug. Ok, genial. Also, was wir jetzt tun wollen, ist, wählen Sie diese ganze Gruppe und wir werden ein Symbol daraus erstellen, und dann sicher sein, dass Sie zurück gehen und beide Textwerte aus dem Symbol ausschließen. Also, wenn Sie diesen Kerl kopieren und einfügen, möchten Sie etwas tun, wie den Text hier ändern, es wird es für alle von ihnen ändern. Ehrfürchtig. Ich gehe weiter und ändere das wieder in das dunklere Blau. Ich ziehe einfach diese Zeilenüberschrift, weil ich jetzt meine beiden Not Done Elemente habe. Also, was ich jetzt tun möchte, ist meine Fertigen Elemente zu erstellen. Aber Sie wissen, wenn ich hier runtergehe und ich einfach eine weitere Instanz dieses Symbols erstelle und dann beginne ich das mit vielleicht wie einem Grün auszufüllen, wird es es für alle ausfüllen, und das ist nicht etwas, was wir wollen. Also, was Sie eigentlich tun wollen, ist mit der rechten Maustaste auf dieses neue Symbol und Sie werden es lösen wollen. Also, was das tun wird, ist, dass es nicht mehr mit dem Rest des Symbols verbunden ist, so kann ich voran gehen und ändern, wie ich es für richtig halte und meine anderen Symbole werden sich nicht ändern. Aber ich kann auch einfach voran gehen und ein neues Symbol daraus erstellen, so dass ich jetzt meine Fertigen Zeilen hier unten machen kann. Also, vielleicht will ich, dass das durchgestrichen wird. Ehrfürchtig. Also, was ich möchte, dass Sie jetzt tun, ist nur den Rest der Bildschirme auf dieser Seite zu beenden. Denken Sie daran, dass Sie einige der Komponenten verwenden können, die ich auf der iOS-Komponentenseite enthalten habe , oder Dinge komplett von Grund auf neu erstellen können. Es liegt wirklich an Ihnen, wie Sie Ihre App gestalten möchten. Ich werde dich im nächsten Video erwischen, wo wir über den Mikrozustand reden. 9. Mikrostaaten und Symbole: Okay, hoffentlich konnten Sie die Hauptbildschirme Ihrer App fertigstellen. In diesem Video gehen wir über einige der letzten Wechselwirkungen von Mikrostaaten. Lasst uns jetzt zur Seite gehen. Also hier haben wir ein paar Mikrostate. Wir haben unsere Wechselwirkungen. Ein leerer Zustand für unsere ListView, wenn entweder die App zum ersten Mal geladen wird oder vielleicht, nachdem Sie alle Ihre Aufgaben erledigt und gelöscht haben und schließlich eine Bestätigung zum Löschen von Aufgaben haben. Beginnen wir mit diesen Zeileninteraktionen. Genau wie bei der Gestaltung der Hauptverwendung unserer App werde ich einfach voran gehen und ein neues Kunstboard hinzufügen. Ich werde es iPhone sechs Größe machen. Ich ziehe es direkt unter die Zeileninteraktionen und ich werde es Zeileninteraktionen UI nennen. Ich will nicht, dass mein Kunstbrett weiß ist, also habe ich zwei Möglichkeiten. Ich kann entweder ein Rechteck zeichnen und das gesamte Kunstboard mit einer rechteckigen Farbe bedecken oder ich kann das Kunstboard auswählen und eine Hintergrundfarbe dafür aktivieren. Also lassen Sie mich das tun. Ich mache es so hellblau, dass ich an anderen Orten in der App verwendet habe. Ok, genial. Also, jetzt haben wir unsere Zeileninteraktion. Also, das erste, was ich tun möchte, ist, einfach eine Standard-Aufgabenreihe auf mein Kunstboard zu werfen . Also kann ich entweder zu meinen App-Bildschirmen zurückkehren und das Symbol kopieren und einfügen, das ich in der vorherigen Video-Lektion erstellt habe, oder ich kann einfach eine Instanz dieses Symbols einfügen. Also, wenn Sie hier zum „Einfügen“ Drop-down-Menü gehen, werden Sie sehen, dass Sie jetzt einen Symbolbereich haben. Also, hier sind alle Symbole, die ich bisher in meiner App erstellt habe. Lassen Sie uns die Aufgabe nicht erledigt und es wird nur eine Instanz dieses Symbols direkt auf meine Kunsttafel hinzufügen. Denken Sie daran, alles, was Sie hier ändern, wird alle Seiten in Ihrer Skizzendatei ändern. Also, wenn Sie hier etwas ändern, wird es sich auch in Ihren Hauptansichten der App ändern. Behalten Sie das im Hinterkopf. Also, wir haben unsere Standard-Zeile. Die nächste, die wir tun wollen, ist nur eine Zeile hinzuzufügen. Es sieht so aus, als hätten wir ein kleines neues Symbol direkt oben auf der Stelle, wo das Häkchen gerade ist. Also, lassen Sie uns das schaffen. Also, ich werde einfach hineinzoomen. Ich erstelle ein neues Oval und ich möchte es genau so groß wie das Häkchenoval erstellen und denken Sie daran, dass Sie dies nicht in das Symbol einfügen möchten, weil es dann das Oval auf alle Ihre Zeilen legt. Also, ich gehe weiter und mache das weiß und ich will die Grenzen so schön blau machen, ich werde es auf zwei stoßen und ich werde nur das Wort neu hinzufügen. Also, ich will keinen weißen Text hier drauf, ich mache diesen blauen auch und mache ihn einfach ein bisschen fett. Ich setze meine Ausrichtung auf zentriert. Wenn ich also ein Ausrufezeichen oder etwas hinzufügen wollte, könnte ich das sehr leicht machen. Awesome, also verkleinere ich ein wenig. Das ist wie ein Tab groß für meinen Geschmack. Also, ich werde es um 11 versuchen. Das sieht gut aus und dann, wenn ich normalerweise alle Großbuchstaben verwende, mag ich die Buchstaben ein wenig ausräumen, also tippen Sie einfach einen auf das Zeichen ein und geben Sie diese Buchstaben ein. Versuchen wir zwei, ich glaube, einer funktionierte besser. Okay, großartig, jetzt haben wir unseren neuen Zeilenstatus. Die nächste, die wir tun wollen, sind ein paar dieser Wischinteraktionen. Es sieht so aus, als hätte jede dieser Interaktionen ein ziemlich konsistentes Symbol mit einem Label und einem Hintergrund. Also werde ich eigentlich nur voran gehen und alle Symbole auf einmal erstellen , um sie alle konsistent zu machen. Also, mal sehen. Wir haben ein Häkchen, einen Mülleimer und einen kleinen Bleistift. Also, lassen Sie uns jeden dieser jetzt erstellen. Beginnen wir mit dem Häkchen. Das sollte jetzt ziemlich einfach für uns sein, weil wir es so oft gemacht haben und lassen Sie mich einfach 25 mal sieben machen und dann werde ich ein weiteres Rechteck sieben Pixel breit machen lassen Sie uns 50 Pixel hoch machen und ich werde einfach voran gehen und passen Sie das direkt da drin an. Okay, cool und genau wie wir es getan haben, bevor wir uns nur vereinigen und dem eine negative 45-Grad-Rotation geben. Nun, lassen Sie uns diese zwei Pixel dick machen und ich werde es draußen machen. Das sieht so aus, als ob es ein bisschen groß sein könnte, also lass uns einfach klopfen, dass auf etwa 35 Pixel hoch ist und das ist etwa die Größe ich für alle unsere Symbole jetzt verwenden werde, okay großartig. Also, ich werde mir eigentlich nur kleine Führer hier machen, damit ich alles relativ im gleichen Maßstab behalten kann . Machen wir jetzt unseren Mülleimer. Machen Sie den Mülleimer, was ich tun will, ist nur erstellen Sie die Mülleimer Basis und der Mülleimer hat eine breitere Oberseite als es unten tut. Eine Möglichkeit, dies in der Skizze zu tun, besteht darin, auf mein Rechteck zu doppelklicken , um in den Pfadbearbeitungsmodus zu wechseln. Der Pfadbearbeitungsmodus lässt mich tun, ist, jeden der Ankerpunkte auf dieser Form einzeln auszuwählen oder wenn ich die Umschalttaste gedrückt halte, kann ich zwei gleichzeitig auswählen und jetzt, wenn ich diese verschiebe, werden Sie sehen, dass ich in der Lage bin, einfach zu bewegen diese Ankerpunkte, während die restlichen Ankerpunkte, die nicht ausgewählt sind, stationär bleiben. Also, was wir eigentlich tun wollen, ist einfach voran und wählen Sie diesen einen unteren Ankerpunkt auf einmal und verschieben Sie ihn einfach in zwei Pixel in die Mitte. Großartig. Jetzt lasst uns einfach so stylen, wie wir es wollten, das ist für jetzt in Ordnung und wir wollen keine Mitte füllen. Also, lassen Sie uns jetzt die Oberseite des Mülleimers erstellen. Also, wenn wir nur ein Rechteck machen und wir können es ein paar Pixel breiter machen. Lasst uns diese einfach aufstylen und wir werden das für die Außenseite einstellen. Ok, großartig. Ich fühle mich wie mein Mülleimer ist vielleicht ein bisschen schmal, also werde ich einfach voran gehen und es ein wenig erweitern und dann das herausziehen und ich werde einfach voran gehen und diese zentrieren. Ehrfürchtig. Dann lassen Sie uns einfach einen kleinen Griff geben, ich zoomte hinein, ich zoomen Sie zurück, indem Sie ein letztes Rechteck erstellen und wir machen , dass die Dicke zwei die Füllung abnehmen und was wir jetzt tun müssen , und wir werden diese Dinge einfach überlagern direkt oben auf jedem Sonstiges. Also, wir haben ein kleines Häkchen und wir haben einen Mülleimer und der letzte, den wir machen wollen, ist ein Bleistift. Also beginnen wir mit einem einfachen Rechteck. Lassen Sie uns das etwa sieben oder acht Pixel breit machen. Machen Sie einfach die Dicke zwei und entfernen Sie die Füllung. Also, genau wie wir es mit dem Mülleimer getan haben, lassen Sie uns auf dieses Rechteck doppelklicken. Wir wählen die beiden oberen Ankerpunkte aus. So können wir nicht nur sie selbst bewegen, sondern auch den Radius bestimmter Ankerpunkte steuern. Also, stoßen Sie dies bis zu vier, da dies acht Pixel breit ist, sollte dies im Grunde ein perfekt rundes Ende dieses Bleistifts sein. Jetzt möchten wir die Spitze des Bleistifts erstellen. Wenn Sie also den Mauszeiger über diese Linien bewegen, werden Sie sehen, dass sich der Cursor zu einem kleinen Stift mit einem Plus dreht. Was das tun wird, ist, dass es hier einen Ankerpunkt hinzufügen wird. Also, wenn Sie klicken, werden Sie sehen, dass ich einen brandneuen Ankerpunkt auf dieser Form habe und jetzt kann ich das auswählen und ich kann es ziehen und verschieben, wie ich will. Also, ziehen Sie es einfach ein paar Pixel nach unten, um es zu einem scharfen Ende zu machen wie es ein normaler Bleistift hätte. Ok, toll. Vielleicht möchten Sie einfach voran und fügen Sie hier eine kleine Linie hinzu, um zu zeigen, wo die Spitze des Bleistifts beginnt, und Sie können das tun, indem Sie L für das Linien-Werkzeug drücken und dann einfach eine Linie direkt darüber ziehen und Sie möchten dass genau da drin und dann einfach wieder einfach voran und machen es eine zwei Pixel dicke Linie und ähnlich vielleicht hat dieser Bleistift einen Radiergummi auf der Oberseite, so können Sie einfach voran und ziehen Sie eine Linie dort zu. Cool. Also, was wir jetzt tun wollen, ist, dass wir das wahrscheinlich gruppieren und es nennen wollen, geben Sie ihm einen Namen, also werde ich es Icon Edit nennen. Wir machen das Gleiche mit unserem Mülleimer. Großartig. Also haben wir einige wirklich einfache Symbole , die wir jetzt verwenden können, wenn wir unsere Zeilen erstellen. Auch hier können Sie diese Lineale einfach loswerden, indem Sie sie direkt dort wegziehen. Also, lassen Sie uns unsere Hauptaufgabenzeile kopieren und einfügen, und was wir tun wollen, ist, es einfach über ein wenig zu schieben und wir werden ein Rechteck erstellen, das genau die gleiche Höhe hat wie es ist. Verschieben Sie seine Grenze und dieser sollte wahrscheinlich grün sein, um zu bezeichnen, dass Sie gerade etwas abchecken. Wir ziehen unser Häkchensymbol direkt darüber und zentrieren es in der Mitte, lassen Sie uns voran gehen und machen diesen Strich weiß und fügen nur ein kleines Etikett hinzu, damit die Leute wissen, was passieren wird. Wir machen Ausrufezeichen. Lassen Sie uns es wieder weiß machen und es in die Mitte stellen und da gehen wir. Cool und jetzt können Sie einfach dasselbe für die anderen beiden Zeileninteraktionen tun. Also, wir werden das einfach zweimal kopieren. Lassen Sie uns das in ein Rot ändern und wir bringen diese Symbole hier drüben ein. Wir werden diese Typen wahrscheinlich löschen wollen. Setzen Sie das direkt in die Mitte. Das ist das Werkzeug „Ausrichten“. Lassen Sie uns diese negativen 45 Grad machen und wir werden gehen wollen, um die alles weiß zu machen. Kopieren Sie das. Ehrfürchtig. Also, jetzt haben wir unsere Zeileninteraktionen. Also, Sie können voran gehen und beenden Sie diese Zeilen Stile, wie Sie möchten, so dass sie Ihre App passen und dann, wenn Sie mit diesen fertig sind, beenden Sie einfach den Rest der Mikrostate, die wir hier drin haben. Also, die leere und die Bestätigungsnachricht. Denken Sie daran, dass ich eine Bestätigungsnachricht in die iOS-Komponenten aufgenommen habe. Wenn Sie die Standard-iOS-Betriebssystem-Bestätigungsnachricht verwenden möchten , oder Sie können einfach Ihre eigene benutzerdefinierte erstellen. Es liegt an dir. Im nächsten Video lernen wir, wie wir unsere Bildschirme exportieren, damit wir sie mit anderen teilen können. 10. Zeichenflächen exportieren: Okay, jetzt, da wir fertig sind, unsere iPhone-App zu entwerfen, werden wir unsere Bildschirme exportieren wollen, damit wir sie entweder mit einem Ingenieur teilen können , der unsere App oder sie in die Skillshare Projekt-Galerie hochladen, , wo wir Feedback von unseren Klassenkameraden bekommen können. Sketch macht es also wirklich einfach, dies zu tun. Wählen Sie alle Zeichenflächen aus, die Sie exportieren möchten, aus der Ebenenliste auf der linken Seite von Sketch aus. Dann, was Sie tun werden, ist zurück zu dieser unteren rechten Ecke zu kommen und drücken Sie diese machen exportierbare Taste. Sie werden eine kleine Vorschau von jeder Ihrer Zeichenflächen sehen und Sie können auch verschiedene Größen hinzufügen. Nur um Ihnen zu zeigen, was das tut, werde ich voran ein Plus treffen und ich werde die 2X-Größe hier hinzufügen , so dass ich doppelte Bilder meiner Originale bekomme. Also werde ich voran gehen und ich werde Export Zeichenflächen treffen, ich wähle den Ordner, in den ich sie exportieren möchte, und ich werde den Export-Button drücken. Eine schnelle und einfache Funktion, die Sketch ermöglicht, ist die Möglichkeit, direkt per Mail oder sogar iMessage direkt aus Sketch zu teilen. Manchmal ist es praktisch. Also, wenn ich Sketch minimiere und zu dem Ordner navigiere , in dem ich alle meine Zeichenflächen App gespeichert habe, kann ich sehen, dass ich eine Kopie jeder meiner Zeichenflächen in png sowohl in 1X Größe als auch in 2X Größe habe. Ich bin jetzt bereit, diese mit meinen Freunden zu teilen oder sie in die Skillshare Projektgalerie hochzuladen. Was ich möchte, dass du jetzt tust, ist deinen Haupt-App-Bildschirm in die Skillshare Projektgalerie hochzuladen, und ich und deine anderen Klassenkameraden werden dort reingehen und einige Kommentare und Feedback zu deiner Arbeit abgeben . 11. Entdecke Design auf Skillshare: Art und Weise.