SF Symbols - Symbole für Entwickler

Gleiche Funktionen sollten gleich funktionieren und gleich aussehen.

Diese alte Regel für Softwaredesign ist bis heute uneingeschränkt gültig und besonders wichtig ist sie in einer Zeit, in der sich macOS und iOS optisch annähern. Der Anspruch ist gerechtfertigt. Ein Anwender, der mit der Arbeit auf einem iPad vertraut ist, sollte auf einem Mac für die gleiche Funktion nicht eine komplett andere grafische Oberfläche vorfinden. Zuvor Gelerntes soll vertraut und leicht wiederzukennen sein. Für Entwickler beginnt die Arbeit deshalb bei dem Symbol, das eine Aktion auslöst.

Einige Icons in Programmen sind inzwischen so weit verbreitet, dass die hinterlegte Funktion für die meisten Anwender nicht erklärt werden muss. Eines der bekanntesten Symbole ist die Diskette, hinter der sich in vielen Programmen die Funktion zum Speichern der Daten verbirgt. Obwohl im Alltag kaum noch Disketten zum Einsatz kommen, wird das Symbol auf Grund seiner Bekanntheit weiterhin benutzt. Sogar die neuste Version von Microsoft Office verwendet es. Ein anderes Beispiel ist das Symbol eines Zahnrades, mit dem man in der Regel zu den Einstellungen der Anwendung gelangt.

Leider ist ein guter Entwickler nicht zwangsläufig ein guter Designer und die Gestaltung eines Symbols mit hohem Wiedererkennungswert ist keine leichte Aufgabe. Gut aussehen soll das Icon auch und natürlich sollen alle Symbole einer Anwendung im Design zueinander passen. Das sind mehrere Anforderungen, die es zu erfüllen gilt, doch glücklicherweise hat sich Apple dieser Probleme angenommen. Im Rahmen der WWDC Konferenz im Jahr 2019 veröffentlichte das Unternehmen aus Cupertino unter dem Namen SF Symbol eine kostenlose Sammlung von Symbolen. Der Name bezieht sich auf die Schriftart San Francisco, an dessen Design die Symbole angelehnt sind. Welche Icons die Sammlung enthält, erfährt man als Entwickler am einfachsten aus der von Apple bereitgestellte Anwendung mit dem gleichen Namen. Das Programm SF Symbol kann aus dem Entwicklerportal geladen werden.

Für Entwickler ist der Einsatz der SF Symbols im SwiftUI-Code einfach, denn die Icons sind im Framework hinterlegt. Sie müssen nicht importiert oder referenziert werden. Es genügt, ein Symbol über seinen Namen anzusprechen. Eine anschließende Konfiguration ist der eines Textes nicht unähnlich. Beispielsweise kann die Farbe (foregroundColor) ohne Probleme geändert werden. Außerdem kann ein Symbol ohne Qualitätsverlust skaliert werden.

// Beispiel für ein einfaches Icon aus SF Symbols

Image(systemName: "tray.and.arrow.up")

    .foregroundColor(Color.red)

    .font(.largeTitle)

Die meisten Symbole können von Entwicklern nach belieben verwendet werden, nur einige Icons wurden von Apple für speziellen Aufgaben reserviert. Dazu zählen zum Beispiel Symbole für Dienste wie iCloud oder FaceTime oder Icons, die Apple Produkte darstellen.

Noch enthält die SF Symbols Bibliothek nicht für alle Anwendungsfälle ein geeignetes Symbol. Es ist zu erwarten, dass Apple die Anzahl der bereitgestellten Symbol in Zukunft erweitert. Mit der Ankündigung von iOS 14 und macOS 11 Big Sur wurde die Sammlung um 750 zusätzliche Einträge erweitert. Einige davon unterstützen sogar mehrere Farben in einem Symbol.

// Beispiel für ein mehrfarbiges Icon aus SF Symbols

Image(systemName: "externaldrive.badge.xmark")

    .renderingMode(.original)

    .imageScale(.large)

Geschrieben am: 01.06.2020
Technologien: Swift, SwiftUI, macOS, iOS