Haupt / Wie Man

So verwenden Sie Symbolschriftarten in Ihren mobilen Apps

Das Entwerfen für Mobilgeräte kann sehr schnell komplex werden. Aufgrund der Vielzahl unterschiedlicher Bildschirmgrößen und Pixeldichten ist es nahezu unmöglich, pixelgenaue Grafiken für native Apps bereitzustellen.

Beim Entwerfen von Symbolen für mobile Apps müssen wir uns zwei Aspekten des Entwurfsprozesses stellen. Positiv zu vermerken ist das eigentliche Design der Symbole, dh das Drücken von Pixeln, um attraktive Grafiken zu erstellen, die den Menschen helfen, Ihre Benutzeroberfläche zu verstehen und sich darüber zu freuen. Auf der dunklen Seite gibt es jedoch mühsame Bürokratie. Sobald Ihre Meisterwerke komponiert sind, müssen Sie Ihre Arbeit in jedem Projekt aufteilen, organisieren, optimieren und anpassen, damit Entwickler die Grafiken für alle verschiedenen Zielgeräte anwenden können.

Laden Sie die Quelldateien herunter für dieses Tutorial

So sehr ich es auch liebe, Pixel zu verschieben, habe ich kürzlich viel zu viel Zeit damit verbracht, Ordner zu bereinigen und die Spezifikationen der Zielgeräte nachzuschlagen. Obwohl es eine Vielzahl von Plug-Ins gibt, mit denen Sie Symbole und Grafiken in mehreren Lösungen aus einer Hand exportieren können, ist es eine vermeidbare Aufgabe, optimierte Bilder für unterschiedliche Auflösungen und Pixeldichten für verschiedene Betriebssysteme zu verfolgen. Werfen wir einen Blick auf vektorbasierte Symbolschriftarten.

Destillieren einer Reihe von Symbolen innerhalb von Sekunden mithilfe des Fontello-Symbolschriftgenerators und einiger wunderschöner Entypo-Piktogramme in einer verkleinerten Bibliothek

Freunde mit Vorteilen

Bei der Gestaltung von Benutzeroberflächen für die Produktion versuchen viele von uns Designern, sich so lange wie möglich von pixelbasierten Bildern fernzuhalten und aus verschiedenen Gründen nach vektorbasierten Quellen zu suchen. Zum Beispiel erfordert die Arbeit in einem Team die Fähigkeit, schnelle Änderungen vorzunehmen, ohne an Qualität zu verlieren. Die Beibehaltung überschaubarer Dateigrößen sowie die Möglichkeit, UI-Elemente für eine Vielzahl von Bildschirmgrößen bereitzustellen, sind die vernachlässigbaren Attribute, mit denen Sie langfristige Projekte ohne größere Kratzer durchführen können.

In Bezug auf Reaktionsfähigkeit, Ladezeiten oder Retina-Displays ist es gängige Praxis, beim Entwerfen für das Web vektorbasierte Ansätze wie CSS-Effekte zu wählen, um eine qualitativ hochwertige Benutzeroberfläche für jeden Benutzertyp bereitzustellen. Aufgrund der jüngsten Verbesserungen von Browsern, die benutzerdefinierte Schriftarten unterstützen, tendieren viele Designer aus demselben Grund sogar dazu, ihre Symbole in Web-Schriftarten umzuwandeln. Als Designer für native mobile Apps und viel Zeit mit dem Schneiden, Organisieren und Verpacken von Grafiken war ich neugierig, ob es möglich ist, die technischen Fortschritte des Webdesigns zu nutzen. In der Hoffnung, während des Designprozesses Auflösungen, Gerätegrößen und dergleichen aus den Augen zu verlieren und mich mehr auf die wichtigen Aspekte meiner Arbeit zu konzentrieren, entschied ich mich, Symbolschriftarten zu verwenden, um die Benutzeroberfläche für iOS- und Android-Apps zu verbessern.

Verwenden Sie die Eigenschaftsliste Ihrer Anwendung, um eine beliebige benutzerdefinierte Schriftart zu laden, die sich in Ihrem Projektordner befindet

Symbolschriftarten sind ein erstaunlicher Ansatz für skalierbares Design. Es gibt mehrere Vorteile gegenüber Bitmap-Bildern. Wenn Sie die native App-Entwicklung berücksichtigen, haben diese Vorteile erhebliche Auswirkungen auf Ihren Design-Workflow sowie auf die Versandqualität Ihres Produkts.

Skalierbarkeit: Schriftbasierte Symbole sind auflösungsunabhängig und können beliebig skaliert werden. Ihre Symbole sehen unabhängig von Netzhaut, HDPI, XHDPI usw. gestochen scharf aus. Da sich das Rendering automatisch an das Zielgerät anpasst, können Sie jedes aktuelle, zukünftige oder beliebigste Geräteformat berücksichtigen.
Größe: Im richtigen Verhältnis geschnitten, hat eine Symbolschrift eine unglaublich kleinere Dateigröße als eine Reihe von Pixelbildern. In diesem Fall müssen Sie nicht für verschiedene Zielgeräte sorgen. Ihre App muss nur mit einer einzigen Datei ausgestattet sein, die erst beim Start Ihrer App geladen wird.
Wartbarkeit: Da Ihre Symbole in eine einzelne Schriftartdatei gepackt werden, müssen Sie diese einzelne Datei nur während Ihres gesamten Projekts verwalten. Ihr Icon-Set kann jederzeit geändert oder erweitert werden und wird natürlich durch die Dateistruktur der Schriftartdatei organisiert.
Annahme: Obwohl die Verwendung von Symbolschriftarten Ihnen und Ihren Kollegen möglicherweise einen neuen Workflow auferlegt, ist die Übernahme ihrer Verwendung recht einfach. Es gibt zahlreiche kostenlose und professionelle Tools, mit denen Sie sie im Handumdrehen integrieren und auf fast jeder mobilen Plattform, jedem Webbrowser oder jedem Betriebssystem schnell großartige Ergebnisse erzielen können.
Flexibilität: Einer der wichtigsten Vorteile der Verwendung von Symbolschriftarten ist die Möglichkeit, sie zu bearbeiten. Jede Anforderung, Farbe, Größe oder Aussehen zu ändern, kann im laufenden Betrieb gestellt und getestet werden, indem nur wenige Codezeilen geändert werden.
Interaktivität: Aufgrund der Flexibilität und einfachen Bearbeitung von Schriftarten durch Code sind Symbolschriftarten in der Art und Weise, wie sie zur Laufzeit bearbeitet werden können, einzigartig. Mithilfe von Symbolschriftarten können Sie mühelos verschiedene Status anzeigen, Effekte anwenden und Animationen erstellen.

Obwohl Symbolschriftarten viele Vorteile bieten und einige interessante Gestaltungsmöglichkeiten bieten, sind sie natürlich keine Allzwecklösung. Wenn für Ihr Design komplexe Grafiken oder Symbole mit mehr als einer Farbe erforderlich sind, hat dieser Ansatz seine Grenzen. Beliebte und geniale Verwendungen von Symbolschriftarten finden sich jedoch im gesamten Internet. Da die Verwendung von Symbolschriftarten im Webdesign bereits sehr beliebt ist, gibt es eine Vielzahl von Diensten, mit denen Sie einen fantastischen Symbolschriftartensatz erstellen können.

Nach dem Anschluss der Steckdose können Sie das Etikett jederzeit nach dem Laden der Ansicht problemlos ändern

Verwenden von Symbolschriftarten unter iOS

Die Verwendung einer Symbolschriftart für die iOS-Entwicklung ist ziemlich einfach. Um loszulegen, können Sie einen Dienst wie z Fontello oder IcoMoon um einige Symbole zu sammeln und sie sofort in Ihre App zu integrieren. Alternativ können Sie einige Zeit damit verbringen, Ihre eigenen zu erstellen. Am Ende ist dies die ganze kreative Arbeit, die es braucht. Jetzt müssen wir nur noch die Symbole in unsere App integrieren.

Alles, was Sie für dieses Tutorial benötigen, ist ein grundlegendes Verständnis der Dateistruktur einer iOS-App und Ihrer Symbolschriftdatei als .ttf . Um Ihr neues Icon-Set in einer echten App zu verwenden, erstellen wir ein neues Xcode-Projekt mit a Single View-Anwendung für iOS. Nachdem Sie das Projekt erstellt haben, kopieren Sie die Schriftartdatei in Ihren Anwendungsordner. Im Idealfall wird es direkt in Ihrem angezeigt Projektnavigator .

Um Xcode darauf aufmerksam zu machen, wie Sie die importierte Datei verwenden möchten, müssen Sie eine Referenz in die Datei einfügen Info.plist Ihrer Bewerbung. Diese Liste finden Sie in der Unterstützende Dateien Ordner und repräsentiert eine Metadatentabelle mit mehreren Schlüsseln und Werten. Damit Xcode Ihre Schriftartdatei beim Erstellen der App enthält, fügen Sie einfach eine Zeile hinzu (per Rechtsklick, Zeile hinzufügen ) zur Liste und benennen Sie den neuen Schlüssel Von der Anwendung bereitgestellte Schriftarten . Danach können Sie den Schlüssel mit Ihren Schriftartdefinitionen füllen. In unserem Fall wäre dies der Wert fontello.ttf zum Punkt 0 . Jetzt weiß Xcode, wozu die importierte Datei gut ist, und wir können sie verwenden.

Sobald Sie Ihr Etikett festgelegt haben, wird beim Ausführen des Simulators ein klares und klares Symbol angezeigt

Wechseln Sie in das Storyboard Ihrer App und fügen Sie der Ansicht, in der ein Symbol angezeigt werden soll, ein Etikett hinzu. Nach dem Erstellen des Etiketts müssen wir ein erstellen Auslauf für das Etikett, damit wir unsere Symbolschrift mit dem Etikett verbinden können. Wenn Sie an Ihrem Storyboard arbeiten, können Sie ganz einfach eine Steckdose erstellen, indem Sie die Option auswählen Assistent Editor-Modus .

Es zeigt Ihre Schnittstelle (die Aussicht ) sowie den zugehörigen Header seiner ViewController . Halten Sie nun einfach die Steuerung gedrückt ( Strg ) und ziehen Sie eine Verbindung vom Etikett in die Kopfzeile des ViewController direkt unter dem @Schnittstelle Erklärung. Danach können Sie ihm einen Namen geben und et voila, die Steckdose wird erstellt. Es sollte ungefähr so aussehen:

@property (weak, nonatomic) IBOutlet UILabel *iconLabel

Jetzt, da Sie das Etikett über Code bearbeiten können, können Sie das bearbeiten ViewController (das .m Datei) und wenden Sie das Symbol auf das Etikett an. Geh in die viewDidLoad Funktion in der ViewController und fügen Sie die folgenden Zeilen hinzu, um die Schriftart festzulegen und einen Text darauf anzuwenden. Ihre viewDidLoad Funktion sollte dann so aussehen:

( void)viewDidLoad{ [super viewDidLoad]; [iconLabel setFont:[UIFont fontWithName:@'fontello' size:130]]; [iconLabel setText:[NSString stringWithUTF8String:'u2692']]; }

Der erste hinzugefügte Befehl definiert die für die Beschriftung verwendete Schriftart und legt deren Größe fest. In diesem Fall ist es auf 130 Punkte eingestellt. Behalten Sie bei Verwendung dieses Befehls den Namen Ihrer Schriftart im Auge. Hier müssen Sie auf den tatsächlichen Namen der Schriftart verweisen, dh auf das, was angezeigt wird, wenn Sie die Schriftart im Schriftartenbuch oder einem anderen Schriftarteneditor öffnen. Beachten Sie jedoch, dass sich der Schriftname möglicherweise von seinem Dateinamen unterscheidet.

Die zweite hinzugefügte Zeile innerhalb der Funktion verweist auf das codierte Unicode-Zeichen für Hammer und Pick (2692) unseres Beispielsymbols, wie es von Fontello verwendet wird.

Obwohl etwas kryptisch, ist es ziemlich einfach, das Unicode-Zeichen eines Symbols in Ihrem Schriftsatz zu erhalten. Wenn Sie die Schriftart mit einem Schriftarteneditor Ihrer Wahl öffnen oder auf einen Dienst wie z IcoMoon können Sie mühelos den Unicode erkennen, der sich hinter dem Symbol versteckt.

Sie können jede Art von gewünschter UI-Eigenschaft mithilfe des Android XML-Vokabulars deklarieren

Farben, Verläufe und Schatten

Nachdem das Symbol referenziert wurde, sind Sie fertig. Da wir das Etikett durch Code manipulieren, müssen Sie Ihre App ausführen, um die Ergebnisse Ihrer Arbeit zu sehen. Am Ende ist dies alles, was Sie brauchen, um Ihr Icon-Set in eine App zu integrieren. Ab diesem Punkt beginnt der wahre Spaß. Alle Textmanipulationen wie Farben, Transparenz, Verläufe und Schatten liegen jetzt in Ihren Händen. Sie können beispielsweise Befehle wie die folgenden anwenden, um das Symbol in eine rote Farbe mit einem schwarzen Schatten zu ändern.

iconLabel.textColor = [UIColor redColor]; iconLabel.shadowColor = [UIColor blackColor]; iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);

Es gibt viele andere Effekte. Einige sind komplexer als andere, aber im Allgemeinen ist hier jede Art von Texteffekt, Animation oder komplexerer Manipulation verfügbar, die Sie sich vorstellen können.

Verwenden von Symbolschriftarten unter Android

Ebenso wie Sie die Vorteile benutzerdefinierter Symbolschriftarten in iOS nutzen können, können Sie sie bei der Entwicklung von Apps für Android verwenden. In Bezug auf den Anwendungsbereich ist Android noch interessanter, da für diese Plattform weitaus mehr unterschiedliche Bildschirmauflösungen und -dichten verfügbar sind. Darüber hinaus unterstützt Android standardmäßig keine Vektorgrafiken, was für Entwickler und Designer gleichermaßen ein Schlag ist, wenn man die verschiedenen Android-Geräte berücksichtigt.

Um mit Ihrer neuen Android-App zu beginnen, benötigen Sie lediglich ein grundlegendes Verständnis der Dateistruktur einer Android-App und Ihrer Symbolschriftdatei als .ttf . Verwendung der Eclipse IDE , ausgestattet mit dem Android ADT können Sie beginnen, indem Sie eine neue erstellen Android-Anwendungsprojekt mit einer Leere Aktivität . Nachdem Sie Ihre Anwendung eingerichtet haben, kopieren Sie die ttf Datei in den Assets-Ordner Ihres Projekts. Nach erfolgreichem Kopieren wird es in der angezeigt Paket-Explorer .

Als nächstes möchten Sie eine erstellen Textübersicht in dem Aussicht Ihrer Hauptaktivität. Sie finden die Datei im Layoutordner Ihrer Ressourcen ( Rindfleisch ). Es sollte aufgerufen werden activity_main.xml . In den meisten Fällen platziert das Android SDK bereits eine Textübersicht in dein Aussicht mit dem Label 'Hallo Welt!'. Wir können das nutzen Textübersicht sofort, um unser Symbol darauf anzuwenden.

Nachdem Sie die Eigenschaften Ihres Symbols definiert haben, können Sie das Ergebnis mithilfe des Simulators anzeigen

Um das zu manipulieren Textübersicht Wechseln Sie vom grafischen Layout zum XML Ihres Aussicht am unteren Rand des Interface Builder. Fügen Sie jetzt einfach eine hinzu Ich würde zu deinem Textübersicht um eine Referenz zu erstellen, auf die wir später mit einem Befehl leicht zugreifen können.

Ihre Textübersicht sollte so aussehen:

Mit Hilfe der ID können wir auf die zugreifen Textübersicht von überall in unserer Android App. Sie können jetzt in die wechseln MainActivity.java Datei und fügen Sie Code hinzu, um Ihre Symbolschriftart zu laden. Innerhalb Ihrer Hauptaktivität wird eine Funktion aufgerufen onCreate . Zum Laden der Schriftart und Anwenden des Symbols sind lediglich die folgenden Zeilen am Ende der Funktion erforderlich:

TextView iconLabel = (TextView) findViewById(R.id.iconLabel); Typeface font = Typeface.createFromAsset(getAssets(), 'fontello.ttf'); iconLabel.setTypeface(font); iconLabel.setText('u2692');

Ähnlich wie im iOS-Beispiel verwenden wir einen Verweis auf unser Label und teilen Android mit, welche benutzerdefinierte Schriftart wir auf diese anwenden möchten Textübersicht . In der folgenden Zeile wenden wir dann das codierte Unicode-Zeichen für an Hammer und Pick (2692) unseres Beispielsymbols, wie es von Fontello verwendet wird, so wie es in Java geschrieben ist. Wenn Sie die App von hier aus ausführen, wird Ihr Symbol auf der angezeigt Aussicht Ihrer Hauptaktivität.

Nachdem Sie das Symbol erfolgreich angewendet haben, können Sie es jetzt beliebig bearbeiten. UI-Spezifikationen in Android werden normalerweise im Interface Builder bzw. in den zugehörigen XML-Dateien für Ihre Aktivitäten erstellt. Um Ihrem Symbol einige Effekte hinzuzufügen, kehren Sie einfach zum XML-Teil Ihrer Hauptaktivität zurück, in dem wir zuvor die ID hinzugefügt haben, und fügen Sie weitere Befehle hinzu. Mit den folgenden Änderungen wird Ihr Symbol beispielsweise etwas größer angezeigt, in Rot mit etwas Transparenz und einem diskreten Schatten.

android:id='@+id/iconLabel' android:textSize='120dp' android:textColor='#ccff0000' android:shadowColor='#99000000' android:shadowRadius='2' />

Es gibt viele andere Effekte. Ähnlich wie im iOS-Beispiel liegt jetzt jede Art von Texteffekt, Animation oder komplexeren Manipulationen in Ihren Händen. Darüber hinaus besteht einer der Vorteile von Symbolschriftarten in der breiten Akzeptanz von benutzerdefinierten Schriftarten in verschiedenen Betriebssystemen. Auf jeder Plattform, die benutzerdefinierte Schriftarten unterstützt, können Sie eine Vielzahl neuer Effekte erzielen.

Mit einem Schrifteditor können Sie vorhandene Symbole optimieren oder Ihrer Kreativität freien Lauf lassen und Ihre eigenen Meisterwerke erstellen

Einpacken

Die Verwendung von Symbolschriftarten kann einen unglaublichen Einfluss auf die Qualität Ihrer nativen App-Entwicklung haben. In Anbetracht der Skalierbarkeit von Symbolschriftarten ist es fast möglich, Bildschirmdichten oder Auflösungen beim Entwerfen für jede Art von mobilem Gerät zu vergessen. Darüber hinaus können Symbolschriftarten in der gesamten Anwendung flexibel verwendet und zur Laufzeit bearbeitet werden, um Echtzeiteffekte und Animationen zu unterstützen. Darüber hinaus kann die Verwendung von Symbolschriftarten aufgrund der einfachen Übernahme von Symbolschriftarten in den Entwurfsworkflow und ihrer allgemeinen Wartbarkeit eine große Verbesserung Ihres Workflows bewirken, da weniger Aufwand erforderlich ist und unabhängig von Auflösung oder Bildschirmdichte bessere Ergebnisse erzielt werden zielen auf.

Wörter: Robert Brauer

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 244