In diesem Video erkläre ich, wie Sie mithilfe von Sketch die Aktivitätsringe der Apple Watch neu erstellen können. Dies ist die perfekte Übung, um zu zeigen, wie sehr Sketch Mathematik liebt. Sie werden überrascht sein, wie viel Sketch für Sie berechnen wird. Lass uns aktiv werden!
Mal sehen, was wir hier anstreben. Dieses Bild stammt von www.apple.com und zeigt die Ringe im Kontext:
Die Activity Rings von Apples Watch UI sind ziemlich gut erkennbarBeginnen Sie mit einer Zeichenfläche von 512px Quadrat; Dafür gibt es ein Preset.
Fügen Sie eine Hintergrundfarbe aus reinem Schwarz (# 000000) hinzu und fügen Sie ein Kreisobjekt mit 300px zur Mitte hinzu. Dieser Kreis hat keine Füllung, sondern einen schönen farbigen Strich von 25 Pixeln.
Duplizieren Sie den ersten Ring und verkleinern Sie ihn, indem Sie 52px von der Breite subtrahieren. Sie können dies tun, indem Sie buchstäblich eingeben 300-52 Im Größenfeld führt Sketch die Berechnung für Sie durch.
Richten Sie ihn mittig mit dem ersten Ring aus.
Neu einfärben, dann den Vorgang für einen dritten Ruf wiederholen.
Gruppieren Sie die drei Ringe und nennen Sie die Gruppe etwas wie "zurück". Duplizieren Sie die Gruppe und benennen Sie sie mit "Front". Wir werden vorerst an der Frontgruppe arbeiten, also kannst du die auf der Rückseite verstecken.
Um unseren Ringen einen Fortschrittsbalkeneffekt zu geben, verwenden wir einen Strichstrich. Sketch bietet dazu einen Trick: Wir bitten ihn, den exakten Umfang des Kreises zu berechnen, indem die Breite (300px) mit pi π multipliziert wird. Geben Sie die Berechnung ein 300 * 3.14159265359 in dem Spalt Eingabe der Grenzen Dialog und der Kreis wird effektiv verschwinden. Dies liegt daran, dass die Lücke zwischen ihren Strichen den gesamten Durchmesser des Kreises abdeckt. Durch das Einkerben der Strich Messung sehen wir, wie unser Kreis wieder erscheint.
Skizze ♥ MatheDamit fertig, wieder im Grenzen Dialog, runden die Enden des Strichs ab:
Zum Schluss gehe zu Ebene> Transformieren> Vertikal spiegeln um den Ring umzudrehen, damit er bei null Grad beginnt.
Wenn die Kreise fertig sind, machen Sie die rückseitige Gruppe wieder sichtbar, und drücken Sie 1 die Deckkraft auf 10% reduzieren.
Jetzt müssen Sie nur noch Symbole an den Enden der Striche hinzufügen. Erstellen Sie eine neue Zeichenfläche aus 16px und erstellen Sie die Symbole, die Sie benötigen. Ich habe einige einfache Pfeilsymbole erstellt, aber Sie können sogar einige passende Icons von GraphicRiver verwenden:
Folgendes haben wir geschaffen:
Ich danke Ihnen, dass Sie diese kurze UI-Übung mit ein paar neuen Sketch-Tricks gelehrt haben.