Share
Dieser Beitrag ist der erste Teil einer 10-teiligen iPhone-Design-Serie, die auf Mobiletuts + vorgestellt wird. Jede Woche beschäftigen wir uns mit verschiedenen Aspekten der Gestaltung schöner und benutzbarer mobiler Schnittstellen für iOS. Um jedes Mal, wenn ein neuer Beitrag in dieser Serie eingeht, eine Erinnerung zu erhalten, müssen Sie sich unbedingt per E-Mail oder über unseren RSS-Feed anmelden!
Sind Sie ein Webdesigner, der von der Idee begeistert ist, iPhone-Apps zu entwerfen, aber nicht wissen, wie Sie damit anfangen sollen? Oder Sie haben vielleicht ein paar Apps entwickelt, möchten aber Ihre Fähigkeiten mit grundlegendem Wissen darüber verbessern, warum wir bestimmte Designentscheidungen für Mobilgeräte treffen? Diese Serie richtet sich sowohl an Einsteiger als auch Fortgeschrittene, die im Bereich mobiler Designs einen großen Akzent setzen möchten!
Die Themen, auf die Sie sich in dieser Serie freuen können, umfassen sowohl praktische Techniken und Beispiele als auch mobile Design-Theorie. Das Folgende ist eine Aufstellung dessen, was wir im Verlauf dieser Serie behandeln werden:
Kann ich nicht einfach Apps entwerfen? Denn für Mobile zu entwerfen, ist eigentlich nur für einen kleineren Bildschirm gedacht, richtig?
Nicht wirklich. Das Design für mobile Geräte unterscheidet sich vom Design von Websites oder Desktop-Anwendungen. Die Unterschiede vervielfachen sich rapide, da immer mehr mobile Geräte mit zusätzlichen Funktionen und einzigartigen Hardwarebedingungen auf den Markt kommen. Werfen wir einen Blick auf die Unterschiede zwischen Design für Web und Mobile, um besser zu verstehen, wie Benutzer mit den einzelnen Plattformen interagieren.
In diesem Artikel bezieht sich der Begriff "Web" auf Websites mit Laptop / Desktop und auf Webanwendungen. Wenn wir für webbasierte Anwendungen entwerfen, wird die Hardware, mit der unser Design betrachtet wird, normalerweise als gegeben vorausgesetzt. Wir werden unsere Monitore oder Laptops nicht aufheben und neigen oder berühren. In der Tat sind die taktilen Interaktionen typischerweise auf Folgendes beschränkt:
Mobile ist ein völlig anderes Tier. Wir arbeiten nicht nur mit neuer und vielfältiger Hardware, sondern auch das mobile Design hat das Potenzial, uns auf ganz unterschiedliche Weise emotional zu beeinflussen. Mobile ist eine persönliche und personenzentrierte Plattform. Denken Sie immerhin an das, was wir als viele dieser Geräte bezeichnen: Handgeräte. Sie passen in unsere Hand, unsere Tasche oder neben unserer Brieftasche. Wir benutzen sie, um zu telefonieren und Kontakte zu knüpfen, und sie sind fast immer an unserer Seite. Diese Faktoren beeinflussen alle unsere emotionale Wahrnehmung des Geräts.
In Bezug auf die Hardwarefunktionen gibt es eine Unmenge von Interaktionspunkten, die sich alle direkt auf Designaspekte auswirken. Diese schließen ein:
Als Designer haben wir alle Stärken und Schwächen, Kompetenzbereiche und Desinteresse. Bevor Sie sich mit den Grundlagen des iPhone-Designs beschäftigen, ist es eine gute Idee, sich die Eigenschaften talentierter mobiler Designer anzusehen.
Die gute Nachricht ist, dass Sie dies lernen können. Die Frage ist, wie interessiert Sie das? Für die Entwicklung mobiler Geräte ist ein Benutzererlebnis erforderlich, das weit über das hinausgeht, was die meisten beim Design für das Web gesehen haben. Selten erstellen wir mobile Schnittstellen, die nur für den ästhetischen Wert gedacht und genossen werden sollen. Eine große Mehrheit der mobilen Schnittstellen ist aufgabenorientiert und anwenderorientiert.
Die Wahrheit ist, dass bei den meisten mobilen Apps, die auf Hilfsprogrammen basieren, die Menschen nicht lange auf Ihr Design achten. Wenn dies der Fall ist, haben Sie etwas falsch gemacht, und wenn sie nicht herausfinden können, was Sie schnell genug tun können, gehen sie. Sie löschen. Sie schreiben dann eine unangenehme Rezension.
Designer, die den einfachsten Übergang zum mobilen haben, sind diejenigen, die einen hohen Standard an Benutzerfreundlichkeit und Kreativität schätzen. Die Idee, dass das Entwerfen für das Benutzererlebnis zuerst das kreative Potenzial beeinträchtigt, ist das genaue Gegenteil der Realität.
Für Mobile zu entwerfen ist für Designer heutzutage einer der aufregendsten und kreativsten Spielplätze. Es ist buchstäblich ein offenes Spielfeld und reif für Innovationen. Um zu erklären, wie es ist, ein mobiler Designer zu sein, werfen Sie einen Blick auf die Geschichte des Produktdesigns.
Bevor Sie ein mobiles Gerät kaufen konnten, das mehrere Aufgaben ausführte, hatten wir ein Produkt, das eine Aufgabe erfüllte. Ein Tastentelefon, ein Wecker, eine Taschenlampe - für jedes dieser Objekte waren ein eigenes Produktentwicklungsteam, ein Designer und ein Vermarkter erforderlich.
Heute können natürlich alle diese Aufgaben auf einem Gerät ausgeführt werden. Ziemlich erstaunlich! Was cool ist, ist die gleiche Planung, Liebe zum Detail und ästhetisches Design, die in das Telefon, die Uhr und die Taschenlampe von gestern gesteckt wurde!
Betrachten Sie es nicht nur als "dafür gibt es eine App", sondern als "dafür ein Produkt". Sie entwerfen nicht nur Apps. Sie entwerfen Produkte.
Das Aufregendste beim Entwerfen für mobile Geräte ist, dass Sie meistens auf einer wirklich leeren Leinwand arbeiten. Natürlich gibt es grundlegende und universelle Designregeln, die beachtet werden müssen, aber die Wahrheit ist, dass viele Designregeln und -erwartungen, die sich auf Mobile beziehen, immer noch definiert werden.
Die Herausforderung für Designer besteht darin, Designs zu erstellen, die für den Benutzer, die Marke und die anstehende Aufgabe zutreffend sind. In manchen Fällen bedeutet dies, Standardkontrollen zu verwenden und eine rein nutzbare Schnittstelle bereitzustellen. Zu anderen Zeiten bedeutet es, alle Standards zu ignorieren und ein Design zu schaffen, das völlig einzigartig ist. In jedem Fall muss der Benutzer intuitiv verstehen, wie er die App innerhalb eines Augenblicks verwendet.
Dies ist die erste Frage, die Designer für mobile Geräte offenbar zu stellen scheinen. Gute Nachrichten, Pixel-Pushers: es ist Photoshop! Mit der Verbreitung von Geräten, Bildschirmgrößen und Auflösungen sind Vektorformen (oder Vektor-Smart-Objekte) auch ein großer Teil des Designs für mobile Geräte.
Ich persönlich bevorzuge die Erstellung von Vektorformen in Illustrator und das Kopieren und Einfügen dieser Objekte in Photoshop als Formebene. Für Vektorobjekte, die nicht übermäßig komplex sind, bevorzuge ich diese Methode der Verwendung von intelligenten Objekten. Daher wechsle ich nicht ständig von Photoshop zu Illustrator.
In einem weiteren Beitrag dieser Serie werden alle Details zu den verschiedenen Bildschirmgrößen, Auflösungen, Bilddateitypen und Abmessungen der Abschnittsbereiche erläutert: "So verwenden Sie iPhone- und iPad-Designvorlagen".
iPhone Apps werden auf verschiedene Weise entwickelt. In einem späteren Beitrag werden wir uns mit dem Thema "Wie für verschiedene iPhone-Apps gestalten" beschäftigen. Im Allgemeinen werden iPhone-Apps jedoch in der Programmiersprache Objective-C mit einem Apple-Programm namens Xcode geschrieben. Apple bietet alle Entwicklungssoftware, die Sie benötigen, um eine App kostenlos zu erstellen, wenn Sie sich als Apple-Entwickler registrieren. Um die Software installieren zu können, benötigen Sie jedoch einen Apple-Computer, auf dem die neueste Version des Betriebssystems OS X ausgeführt wird. Eine weitere Überlegung ist, dass Sie sich für das tatsächliche Entwickeln und Testen von Anwendungen auf einem physischen iPhone oder iPod touch auf dem Apple Developer-Programm anmelden und eine jährliche Gebühr von 99 USD zahlen müssen.
Bei den Apps, die scheinbar als "Vorlagen" angezeigt werden, werden in der Regel die von Cocoa-Touch bereitgestellten Standard-Oberflächenelemente verwendet, die den Standardrichtlinien der Benutzeroberfläche von Apple folgen. Diese Richtlinien definieren grafische Standards und Verwendungsmuster für die Standardbenutzeroberflächenelemente und erleichtern jedem Entwickler das Erstellen und Entwerfen einer App. Normalerweise sehen Sie unten eine schwarze Tab-Leiste und oben eine betitelte Nav-Leiste. Die Registerkarten führen Sie zu verschiedenen Informationskategorien, während Sie mit der Navigationsleiste in diesen Kategorien navigieren können.
Die Apps, die nicht die Standard-Oberflächenelemente enthalten, wurden benutzerdefiniert erstellt. Nahezu alle Casual- und Serious-Spiele sind kundenspezifisch und einige lustige Tools und Dienstprogramme enthalten auch benutzerdefinierte Grafiken.
Die Entscheidung, benutzerdefinierte Grafiken gegenüber Standardgrafiken zu verwenden, basiert häufig auf dem für das Projekt verfügbaren Gesamtbudget. Es reicht nicht aus, das Budget für die Gestaltung der benutzerdefinierten Grafiken zu haben. Ein Budget muss vorhanden sein, damit ein Entwickler die benutzerdefinierten Grafiken implementieren kann. Die Integration des benutzerdefinierten App-Designs kann für Entwickler oder Entwicklungsteams manchmal sehr schwierig sein, und diese Zeit kann sich summieren!
Angesichts des erhöhten Zeit- und Kostenaufwands für die Erstellung einer benutzerdefinierten Benutzeroberfläche ist es wichtig zu berücksichtigen, inwieweit benutzerdefinierte Grafiken die Benutzererfahrung tatsächlich über das, was mit den standardmäßig von Apple verfügbaren Benutzeroberflächenelementen verfügbar ist, verbessern. UDID Sender ist ein gutes Beispiel für eine App, die nur eine kleine Sache macht und nicht viel benutzerdefiniertes Design benötigt. Diese App greift auf die UDID Ihrer Geräte zu (etwa wie das Lizenz-Tag Ihres iPhones) und sendet sie per E-Mail an einen Entwickler, sodass Sie Vorabversionen von Apps für Betatests installieren können. Diese Art von App benötigt keine benutzerdefinierten Grafiken.
Großartig! Der nächste Beitrag in dieser Serie lässt Sie Ihre Füße nass werden, indem Sie mit vorgefertigten Designvorlagen herumspielen. Ich werde Sie durch einige Grundlagen des Designs Ihrer ersten App führen, einschließlich Standards, Best Practices und grundlegenden Designregeln und -theorien für Mobilgeräte.
Schicken Sie mir eine E-Mail und ich schicke Ihnen einen 20% Rabatt-Gutschein für ein Jahr Downloads auf Tapptics!
Accentsconagua