So fügen Sie iPhone App-Symbol mit Cordova

Für eine mobile App ist das Symbol ein integraler Bestandteil einer App, die es vom Rest der Crowd trennt. Es ist auch das Erste an einer App, die potenzielle Nutzer sehen werden - deshalb haben viele Designer so viel über das Design von Icons nachgedacht. In diesem Beitrag zeigen wir Ihnen anhand unserer Diskussion über den Aufbau einer mobilen App mit Cordova, wie Sie ein Symbol für Ihre App hinzufügen .

Bevor wir anfangen, müssen wir zuerst die Icons vorbereiten. Hier sind ein paar Ressourcen, die hilfreich sein können:

• 38 schöne IOS App Icon Designs für Ihre Inspiration
• Generieren Sie einfach Android oder IOS App Icons mit MakeAppIcon
• 50 tolle IOS Icon Designs
• 20 flache mobile Icons Designs

Apple-Symbol-Anforderung

Abhängig von einigen Faktoren wie der iOS-Version, dem Bildschirm, auf dem die App läuft, der Anzahl der benötigten Symbole, der Größe und den Pixeln kann sich das Bild stark unterscheiden. Apple benötigt viele verschiedene Symbolgrößen, um in iOS-Dialogbildschirme auf der Einstellungsseite, der Spotlight-Suchseite, dem Hauptbildschirm usw. zu passen.

Sie müssen diese Spezifikationen bei der Erstellung Ihres Symbols berücksichtigen.

Erstellen der Symbole

Angenommen, unsere Anwendung sollte bis zu iOS 6.1 unterstützen, benötigen wir 6 Größen für das Symbol. Scheint viel Arbeit, oder? Nun, keine Sorge, Sie können AppIconTemplate verwenden. AppIconTemplate ist eine Photoshop-Vorlage und wird mit einer voreingestellten Photoshop-Aktion geliefert, die den Workflow beim Entwerfen und Generieren mehrerer Symbolgrößen optimiert.

Laden Sie die Vorlage herunter und verwenden Sie sie in Photoshop und generieren Sie das Symbol mit der Photoshop-Aktion. Als ein Beispiel, hier sind die Symbole, die wir damit generiert haben. Ihr Icon-Design würde wahrscheinlich viel schöner aussehen.

Hinzufügen der Symbole zur Anwendung

Um die Symbole hinzuzufügen, verschieben Sie sie zu den /platforms/ios/{AppName}/Resources/icons, die erstellt wurden, als wir zuvor die Plattform für iOS mit dem Befehl cordova platform zum Projekt cordova platform .

Außerdem ist es besser, die Symbole entsprechend der Apple-Standardnamenskonvention umzubenennen, wie im obigen Screenshot gezeigt: icon- [size] - [@ 2x]. @2x Suffix wird verwendet, um die Retina-Anzeige zu adressieren. Sobald die Symbole bereit sind, klicken Sie auf die Wiedergabeschaltfläche, um die App zu erstellen und im iPhone Simulator anzuzeigen. Und Sie sollten Ihr neues Symbol so sehen.

Entfernen des Symbols Glossy Effect

Manchmal kann der Glanzeffekt, den iOS dem Symbol verleiht, die Symboldetails blockieren. Wenn Sie den {appname}-info.plist entfernen möchten, öffnen Sie die Datei {appname}-info.plist in Xcode. Wählen Sie dann YES für Symbol enthält bereits die Option Glanzeffekte, wie im folgenden Screenshot gezeigt.

Starten Sie die App über Xcode neu. Wie Sie unten sehen können, sollten Sie feststellen, dass das Symbol ohne Glanzeffekt angezeigt wird.

Fazit

In diesem Beitrag haben wir das Symbol zu unserer App hinzugefügt. Vorausgesetzt, dass Sie die App-Funktionalität erstellt haben, sind wir der Veröffentlichung der App einen Schritt näher gekommen. Was Sie jetzt tun müssen, ist, Ihr Icon so ansprechend wie möglich zu gestalten.

Komprimieren und optimieren Sie Bilder bis zu 90% mit Compressor.io

In der Vergangenheit haben wir viele Tipps zur Bildoptimierung für Webdesigner gegeben. Aber neue Werkzeuge entstehen immer und Kompressor ist einer der besten.Es ist eine kostenlose Web-Anwendung, die eine beliebige Anzahl von Bildern (unter 10 MB) aufnehmen und ihre Dateigröße ohne Qualitätsverlust optimieren kann . We

(Tech- und Design-Tipps)

Erweiterte Tipps & Tricks für bessere Online-Privatsphäre und Sicherheit

Mit sozialen Netzwerken und vielen Orten, an denen Sie Zeit online verbringen können, ist es wichtig, sich der Sicherheitsmaßnahmen bewusst zu sein , die Sie ergreifen können und welche Fallstricke Sie vermeiden sollten . Mit der Standardbestandskonfiguration Ihrer Systeme und Browser sollten Sie sicher sein, aber ob Sie sicher genug sind, hängt davon ab, wie ernst Sie Ihre Sicherheit und Privatsphäre online nehmen.Die

(Tech- und Design-Tipps)