Mobile App Design: Einfache Tools zur schnellen Prototypenentwicklung deiner App-Idee | Ronnie Peters | Skillshare
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Mobile App Design: Einfache Tools zur schnellen Prototypenentwicklung deiner App-Idee

teacher avatar Ronnie Peters, Founder and CEO at 360 Design

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Willkommen

      1:23

    • 2.

      Projekt

      1:18

    • 3.

      Die zündende Idee

      0:53

    • 4.

      Das Mobiltelefon als Medium

      1:19

    • 5.

      Funktionalität

      1:39

    • 6.

      Tools und Schritte

      0:56

    • 7.

      Einführung in Axure

      3:00

    • 8.

      Discovery, Definition, Design

      3:30

    • 9.

      Sitemap

      3:56

    • 10.

      Fluss

      2:37

    • 11.

      Design-Elemente

      0:48

    • 12.

      Bildschirmgröße & Auflösung

      2:42

    • 13.

      Wireframing

      4:09

    • 14.

      Axure Recap

      1:52

    • 15.

      Deine Sitemap verbinden

      0:51

    • 16.

      Verlinkung & Veröffentlichung in HTML

      3:26

    • 17.

      Einführung in Flinto

      2:05

    • 18.

      Übergänge

      5:06

    • 19.

      Exportieren auf dein Telefon

      0:57

    • 20.

      Die fertige App

      2:54

    • 21.

      Fertigstellung

      0:37

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

1.314

Teilnehmer:innen

4

Projekte

Über diesen Kurs

Du möchtest wissen, wie du deine Idee für eine mobile Anwendung zum Leben erwecken kannst, weißt aber nicht, wo du anfangen sollst? Dieser 45-minütige Kurs führt dich durch den Prototyping-Prozess, und das Beste daran: Du brauchst keine Programmierkenntnisse zu haben! Ronnie Peters, der CEO von 360 Design, erzählt, wie seine Design- und Strategieagentur mit Photoshop, Axure, Illustrator und Flinto schnell funktionierende Prototypen für Apps erstellt. Du erhältst die Tools und das Wissen, um deine eigene mobile App zu entwickeln, die du mit Kunden, Kollegen oder Freunden teilen kannst. 

Triff deine:n Kursleiter:in

Teacher Profile Image

Ronnie Peters

Founder and CEO at 360 Design

Kursleiter:in

Ronnie Peters is a strategist and digital designer working with a range of clients, from startups to some of the largest brands in the world. He is Founder and CEO of 360 Design, a digital design and innovation company, devoted to the seamless integration of interactive and brand experience. The companies work results in the design of websites, mobile apps, social media and digital strategy solutions for companies such as American Express, Merrill Lynch, Accenture, Time Warner, The New York Times, Office Depot, HP, Turner Broadcasting, SAP, McGraw Hill, Scholastic, and UBS to name a few. The firm collaborates with brands to develop innovative digital solutions that focus on business goals, technology integration, and the spirit of the brand while putting the customer / user at the cente... Vollständiges Profil ansehen

Skills dieses Kurses

Design UX/UI-Design Prototyping

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Willkommen: Hallo, mein Name ist Ronnie Peters von 360 Design. Das ist Irving, Chief Attention Officer, und heute werden wir Prototypen für eine mobile App erstellen. Was ich tun möchte, ist, einen Prototyp zu entwickeln, bevor ich tatsächlich zur Codierungsphase gehe. Wichtig daran ist, dass es mir viel Zeit erspart, und es wird mir viel Mühe ersparen, und ich möchte es auf mein Handy, diesen Prototyp, bekommen und es mit meinen Freunden und Kollegen teilen können damit wir uns die Idee und den Proof of Concept ansehen können. Ebenso möchte ich über die verschiedenen Werkzeuge sprechen, die wir verwenden werden. Du könntest eine Vielzahl von verschiedenen Werkzeugen verwenden. Es gibt eine Menge da draußen, Dinge wie Sketch, Illustrator, Photoshop. Sie könnten sogar auf Papier schreiben und skizzieren , wenn Sie wollen und Papierprototypen machen. Wir gehen direkt auf den Computerbildschirm und verwenden eine Reihe von Tools , die ich ausgewählt habe. Ich bin ein Kreativer. Ich hatte das Glück, mit einigen der ersten Websites für Blinde involviert zu sein, und es brachte mich dazu, über User Interface Design nachzudenken und Menschen dabei zu helfen tatsächlich mit digitalen Medien und Kommunikation viel zu interagieren. Ich leite jetzt eine Designfirma namens 360 Design, und wir konzentrieren uns auf die Benutzererfahrung und den Schnittpunkt der Marke. 2. Projekt: Bei 360 Design konzentrieren wir uns darauf, Benutzererlebnisse zu schaffen , die die Probleme der Selbstkommunikation überraschen und begeistern. Also, was wir als diese Klasse tun werden, ist eine mobile App zu bauen, einen Prototyp für eine mobile App für einen Client namens Metrie. Sie entwickeln Türen und Leisten, und wir werden eine wirklich spannende App für sie rund um Türen erstellen. Was ich mache, ist, dass ich über einige der Dinge nachdenke, die wir in der Vergangenheit gemacht haben, einige der Benutzererlebnisse, die wir hatten , die besonders erfolgreich waren und darüber nachdenke, wie wir sie tatsächlich anwenden können, um eine sehr interessante und ansprechende und nützliche Erfahrung für diesen bestimmten Kunden, und dieses Problem. Also, was ist die eine große Idee hier? Die einzige große Idee hier ist, dass wir in der Lage sein wollen, dass Menschen diese Produktpalette für diesen Kunden entdecken und entdecken und auf ihrem mobilen Gerät. Die Zielgruppe, für die wir arbeiten, sind Architekten und Innenarchitekten sowie Menschen, die in ihrem Haus Renovierungsarbeiten durchführen. Wir wollen Mobilität und Mobiltelefon nutzen, um Menschen zu ermöglichen, Türen zu erkunden und sie in ihrem Raum zu zeigen. 3. Die zündende Idee: Also, ich denke viel über die Art von Dingen technisch, die ich mit dieser App tun kann, und all die erstaunlichen Funktionen, die es hat. Dinge wie die neue 3D Touch, Audio, Video, Mobilität und all die Dinge, die damit einhergehen. Die andere Sache, an die ich wirklich denke, ist, was die große Idee für meine App ist. Denken Sie an wirklich erfolgreiche Apps wie Uber, wie Seamless, wie Yahoo Weather. Sie machen eine Sache, und sie machen eine Sache wirklich gut. Also, wenn Sie denken und planen oder App, die wir in ein paar Minuten gehen, denken Sie darüber nach, was die große Idee ist, was das große Konzept, das ich eigentlich als Kernerfahrung in meiner App haben möchte. Wie werde ich Menschen begeistern, Leute überraschen und wirklich etwas entwickeln und bauen, das sehr klar, sehr prägnant ist und eines gut macht. 4. Das Mobiltelefon als Medium: Bevor wir mit dem kreativen Prozess beginnen, möchte ich nur ein wenig über Apps und die große Idee sprechen, was das Konzept ist, das wir haben. Als wir mit der Gestaltung einer mobilen App oder einer Reihe von mobilen Apps für die Buchserie beauftragt wurden , waren wir wirklich daran interessiert, was die Buchreihe tatsächlich ergänzen würde , nicht wiederholen würde. Wir könnten den Inhalt eines Buches nehmen und Sie könnten es einfach in eine mobile App und erstellen Sie einen Seitenwender und etwas, das Sie tatsächlich lesen könnten, im Grunde den Inhalt des Buches. Aber das nutzt nicht die Vorteile dieses Mediums. Also, was ich wirklich tun möchte, ist, zu schauen, was mobile Apps wirklich gut zu tun sind. Was ist Mobilität? Was ist die Interaktion der Menschen? Die Tatsache, dass sie überall sind, wenn sie tatsächlich eine von ihnen verwenden und was können wir tun, um die Vorteile all der Technologie zu nutzen, die hier herauskommt, die ganz anders ist als das, was Sie tatsächlich in der linearen Bucherfahrung bekommen. Der Vorteil, den wir mit einem mobilen Gerät haben, kann ich überall sein, es ist völlig nicht-linear und es hat alle Werkzeuge, Audio , Kamera, Video, Touch, etc., die sie nicht in der Bucherfahrung haben. Also, wie werden wir das in vollem Umfang nutzen? Also, das sind einige der Dinge, über die ich tatsächlich nachdenke, bevor ich überhaupt anfange, die mobile Anwendung zu erstellen. 5. Funktionalität: Also, ich denke über diese App nach und hier ist ein Zimmer. Nehmen wir an, dass wir tatsächlich in gegangen sind und die App wird alles über die Lage sein, zu visualisieren, wie dieser Raum mit einer anderen Palette von Türprodukten in ihm aussieht. Ich denke zurück über eine der Apps, die wir entworfen Super, Head Esploder X. In dieser App, eines der Hauptmerkmale war, dass Sie tatsächlich Bilder von Ihren Freunden nehmen und sie erfassen konnten . Dann könntest du sie ins Spiel setzen. Machen Sie ein Foto, verwenden Sie das Foto, und dann könnte ich im Grunde die Größe ändern, das Foto bewegen und dann speichern und es dann im Spiel verwenden. Also, ich denke über diese Technologie nach und was ich tun möchte, ist dieses Konzept in dieser speziellen App zu verwenden. Also, was ich in der Lage sein möchte, ist die Tür-App zu öffnen. Also, ich gehe in einen Raum und ich kann diese besondere Tür sehen, und was ich tun möchte, ist, die Türen meiner Klienten über die Oberseite dieses zu bringen, ein Foto davon zu machen, es mit meinen Kunden zu teilen, es mit meine Freunde, teilen Sie es mit allen, die an diesem speziellen Innenraumprodukt-Projekt beteiligt sind. Dann möchte ich wissen, wo ich das bestimmte Produkt tatsächlich kaufen kann. Also, das ist die große Idee. Es wird wirklich ansprechend sein und jetzt gehen wir voran und herauszufinden, wie wir tatsächlich gehen und bauen diese spezielle Prototyp-App. 6. Tools und Schritte: Es gibt viele verschiedene Tools, die Sie verwenden können, um eine App zu Prototypen zu erstellen. Wir könnten auf dem Papier beginnen, Wireframes erzeugen, Benutzerflüsse generieren und dann Screens Prototyping erstellen, wir könnten diese auslegen und diese an die Wand legen, einfach anfangen, die App zu erstellen und zu visualisieren und zu visualisieren und was auf der tatsächliche Bildschirme. Wir können Werkzeuge online und online verwenden wir haben eine Menge Variation und viele verschiedene Werkzeuge, die uns zur Verfügung stehen. Ich werde Axure RP verwenden und ich werde eine Anwendung namens Flinto verwenden. Wir werden Photoshop verwenden, und wir werden Illustrator verwenden. Sie müssen diese Werkzeuge nicht verwenden, es gibt viele andere Werkzeuge da draußen, aber was wirklich wichtig ist, ist der Prozess, den wir heute durchlaufen werden , um von der Idee zum fertigen Prototyp zu gelangen. Das ist es, was wirklich wichtig ist. 7. Einführung in Axure: Werfen wir einen Blick auf die Tools, die wir für die Konzeption und Prototyping unserer App-Idee verwenden werden. Also, ich habe Flinto, die die Anwendung ist , in der wir tatsächlich den fertigen Prototyp bauen werden. Wir werden in der Lage sein, das zu teilen und wir werden Mail verwenden, um das mit anderen Leuten zu teilen und es auf mein Handy zu bekommen. Diese Axure RP, wo wir Wireframes, Sitemaps und viele der Elemente, die wir tatsächlich in der Prototype App verwenden werden zu bauen . Wir werden auch Illustrator und Photoshop verwenden, um uns beim Erstellen von Symbolen und verschiedenen Komponenten zu unterstützen , die wir verwenden werden. Wir können dies auch in einem Browser anzeigen. Hier ist Axure mit der linken Navigation, die verschiedene Bildschirme, die ich entworfen habe, und Dateien, die ich in Axure geöffnet habe, zeigt . Ich habe hier ein paar Dinge im Voraus vorbereitet, und wir werden diese durchmachen. Der erste ist, dass ich einen Übersichtsbildschirm gemacht habe. Die Übersicht erlaubt mir nur, den Überblick zu behalten, wo ich im Projekt bin, die Schritte, die ich unternommen habe, was ich getan habe. Ich habe normalerweise ein Datum oder eine Uhrzeit nach diesen, nur damit ich das sehen kann, und vor allem, wenn ich diese Datei mit anderen teilen und als Team arbeite. Wir können Fortschritte sehen und das alles auf dem neuesten Stand halten. Ich habe ein Prozessflussdiagramm, das ich Ihnen zeigen werde, was der Prozess ist, den wir durchlaufen werden, verschiedene verschiedene Designelemente, die ich angesammelt habe, und dann einige der verschiedenen Bildschirme, die wir angefangen haben, zu setzen zusammen, ein Sitemap-Fluss, und dann die Bildschirme, die wir tatsächlich in den Prototyp setzen. Aber lasst uns mit dem Prozess beginnen. Also haben wir ein wenig über die große Idee und das Konzept gesprochen , und das werden wir mit dem Entdeckungsprozess beginnen. Für wen ist diese App eigentlich? Vielleicht möchten Sie sogar die Persona aufschreiben, die Art der Person, die Sie tatsächlich mit Ihrer App anvisieren, wer ist Ihre Zielgruppe dafür? Die Größe des potenziellen Marktes, was ist das große Problem, das Sie zu lösen versuchen? Was ist die große Idee der App? Welche Plattform nutzt das Publikum tatsächlich? Sollte dies auf einem Android-Telefon gehen? Sollte das auf einem iPhone gehen? Vielleicht machen Sie eine Wettbewerbsanalyse und sehen Sie, ob jemand anderes da draußen tatsächlich eine App wie diese hat. Dann bringen wir es in die Definitionsphase. Wir werden uns einige der Details ansehen, was in der App ist, was ist der eigentliche Inhalt. Dann gehen wir durch die eigentliche Entwurfsphase selbst. Der Grund, warum ich hier eine Reihe von Pfeilen habe , ist, weil wir den Entwurfsprozess beginnen, dann gehen wir in eine Prototyp-Bereitstellung. Wir werden das testen. Und dann, basierend auf dem Testen, gehen wir zurück und machen einige Neuentwürfe. So können Sie sehen, dass dieser Prozess hier eine Reihe von verschiedenen Schritten oder Tests durchführen könnte , bevor wir tatsächlich in den endgültigen Entwurfsprozess gehen, den wir dann in Code nehmen und bereitstellen und dann, sobald wir es werden wir es messen und verbessern. 8. Discovery, Definition, Design: Für diese App in der Entdeckungsphase, für wen ist das? Wir haben ein bisschen darüber geredet. Unsere Zielgruppe sind Architekten, Innenarchitekten und Menschen, die renovieren oder ein Haus bauen. Wir wissen, dass persona ziemlich gut, wir haben eine Menge Arbeit mit diesem speziellen Kunden gemacht, wir machen eine Menge Web-Arbeit und eine Menge von Branding und Promotions für sie. Also, ich verstehe diesen Markt ziemlich gut, und wer das anvisiert. Die Größe des potenziellen Marktes, wir denken, es gibt genug Leute da draußen, das ist eine lebensfähige App, die wir bauen werden. Das Problem, das wir lösen wollen, ist, dass wir Menschen wirklich engagieren wollen , wenn sie in ihrem Raum sind, sie suchen in diesem Raum und mögen: „Wie? Wie würde das mit diesem speziellen Produkt in diesem Raum aussehen? Das ist also das Problem, das wir lösen wollen, und die große Idee ist, dass wir unsere Kamera am Telefon öffnen können und wir in diese Türen gleiten und viele verschiedene Türen auswählen können, dann werden wir in der Lage sein, ein Foto von dieser Tür in meinem Raum zu machen. Dann werden wir es teilen können, ob ich es mit einem Architekten teile, ob ich es mit einem Innenarchitekten teile, ob ich es mit jemandem teile, den ich mir den Raum dieses Raumes ansehen möchte, oder nehmen Sie es einfach mit mir zu einem Home Depot oder Lowe's in der Lage zu sein, tatsächlich kaufen dieses bestimmte Produkt. Also, das ist die große Idee hier, der Kern der App, die wir eigentlich bauen werden. Ich bin mir nicht sicher, ob jemand anderes so etwas getan hat, also bin ich ziemlich enttäuscht über die Gestaltung dieser speziellen App, weil dies auf dem Markt für diese bestimmte Zielgruppe in diesem speziellen -Produkt. Der nächste Schritt ist die Definitionsphase. Also, lassen Sie uns diese bestimmte App definieren. Schauen wir uns die besonderen Funktionen und Funktionen an, die wir hier haben wollen und was ist der Inhalt. Alles wieder, ich kenne diesen Inhalt wirklich gut. Ich kenne diese Tür-Produkte. Ich weiß, was wir in der Art von Bildern haben, was wir in der Art von Kopie und Inhalt haben. Ich weiß auch, dass es eine Kartenfunktion gibt, die wir auf unserer Website haben , wo ich herausfinden kann, wo ich dieses bestimmte Produkt kaufen kann. Ich werde darüber nachdenken, all diese Dinge in dieser speziellen App zu integrieren, und diese werden der Kern der Erfahrungen sein. Also, zuerst geht es darum, unsere Türen auf die Seite zu bringen, sie in meinem Raum zu zeigen, in meinem Zimmer, dann wird es ein Foto davon machen, dann möchte ich in der Lage sein, das zu speichern, das teilen, herauszufinden, wo ich kann kaufe das. Das ist wirklich der Kern der Erfahrung. Also, das ist die Definitionsphase. Nun, Sie möchten wahrscheinlich all dies aufschreiben, Sie möchten vielleicht Whiteboard dies, Sie möchten dies in eine Art von Dokument einfügen und teilen Sie dies. Also, Sie werden dies im Detail betrachten, und Sie machen ein paar verschiedene Iterationen von Versionen davon. Aber ich habe das durchdacht und das ist, wo ich gerade mit der Definitionsphase bin. Als nächstes werden wir in die Entwurfsphase kommen. Also, das ist, wo wir wirklich beginnen, in die Benutzererfahrung zu bekommen und Karte aus, Wireframe out, was diese App wird alles über sein. Also, wir werden einige dieser Details auf Seiten zu bekommen, aber lassen Sie uns einfach über diese wirklich schnell reden. Ich werde das entwickeln, was man Sitemap nennt. Also, ich mappe einfach alle verschiedenen Seiten auf, die dort sind. Nicht allzu unähnlich von einer Sitemap, ich werde ein Flussdiagramm machen. Also, ich denke über die Art und Weise, in der jemand tatsächlich wird durch diese App zu bewegen. Dann werde ich ein paar Wireframing machen. Also werde ich auf einzelne Seiten schauen, und einige der Elemente oder Bildschirme und die Elemente, die tatsächlich dort sein werden. Dann beginnen wir, diese verschiedenen Komponenten zusammen zu setzen und dann beginnen wir mit dem Aufbau unserer App. Also, das ist der Anfang der Entwurfsphase, die wir uns jetzt ansehen werden. 9. Sitemap: Werfen wir einen Blick auf eine Sitemap. Also, in der Sitemap, was ich angefangen habe, sind all die verschiedenen Bildschirme, die ich für diesen speziellen Prozess entwerfen könnte. Auch hier hätte ich das auf dem Papier beginnen können. Ich hätte das skizzieren können. Ich gehe sofort in die Tat, um diese Elemente tatsächlich zu zeichnen. sind also nur einzelne Boxen, die ich auf dem Bildschirm und Flussdiagramm gezeichnet habe, und dann ist das Schöne hier, dass ich tatsächlich reingehen kann, und ich kann das nehmen, und ich kann das tatsächlich mit einer meiner Seiten verknüpfen. Später kann ich diese Sitemap tatsächlich als Website veröffentlichen, und ich kann Leute tatsächlich um sie klicken lassen. Also kann ich hier tatsächlich auf den Ladebildschirm klicken, und ich kann zu dieser Ladebildseite gehen, und ich werde das tatsächlich sehen können, und dann kann ich darauf klicken und dann zu einer anderen gehen. Also, das ist eigentlich eine Möglichkeit, einen groben Prototyp zu bauen, nur eine Aktion, bevor ich ihn überhaupt auf mein Handy bekomme. Also, woran denke ich hier? Ich weiß, dass es einen Ladebildschirm geben wird. Was passiert, wenn Sie auf ein Symbol auf Ihrem Desktop tippen, es lädt tatsächlich die App, und während die App geladen wird, können wir eine Grafik dort oben platzieren, bevor Sie tatsächlich zu dem gelangen, was ich den Home-Bildschirm nenne. Dann denke ich von diesem Home-Bildschirm über all die verschiedenen Seiten nach, die ich haben könnte. Also, Sammlung von Türen, wo zu kaufen, Kontaktseite, über Seite, die von diesen Türen führen könnte , die ich über meinen Kamera-Bildschirm setzen, was zu einer Tür Detailseite, die ich werde in der Lage sein, zu erfassen Tür, und dann werde ich in der Lage sein, es zu teilen. Also, das war eine Sitemap. Das war eine Idee, die ich für diese spezielle App hatte. Dann, hier ist eine andere, die eine etwas andere Art ist, sich diesem zu nähern. Ich gehe sofort vom Ladebildschirm zum Aufnahmebildschirm. Also, hier fange ich bereits an, über verschiedene Benutzererfahrungen und verschiedene Möglichkeiten, sich durch die eigentliche Anwendung zu bewegen, nachzudenken . Also, der vorherige mit Art von zwei Schritten, bevor ich zum Kern der Erfahrung kam, kommt dieser direkt hinein und es beginnt sofort mit der Kameraaufnahme, an die ich denke. Ich erfasse eine Tür in meinem Raum und dann teile ich sie, also ist es wirklich ein schneller Prozess, um zu diesem Sharing Point zu gelangen , wo ich wirklich denke, die Art der Begegnung der Benutzererfahrungen und wo Sie die meisten Freude und die meiste Art von Engagement. Dann haben wir die Türdetails, die ich sofort wieder von der Betrachterseite bekommen kann, und dann kann ich auf die Karte gehen und herausfinden, wo ich dieses Produkt kaufen kann. Ich kann die Marke kontaktieren, oder erfahren Sie mehr über die Marke und die App, et cetera, et cetera. Also, das ist nur ein alternativer Weg. Also, ich ermutige Sie wirklich, auf verschiedene Arten zu suchen, um Ihre Seiten zu organisieren. Das war einer von ihnen. Das war noch eine. Bevor wir noch tiefer in den Designprozess einsteigen, denke ich nur an den Benutzer und die Seiten, mit denen sie konfrontiert werden, an den Inhalt, mit dem sie konfrontiert werden, an die Erfahrung, die sie haben werden. Wieder möchten Sie vielleicht über einige der Apps nachdenken, die Sie vielleicht verwenden, wie Uber, über die ich gesprochen habe, wie Yahoo Weather, die ich mag. Wir waren mit Seamless und der Seamless-App beteiligt und entwarfen UI- und UI-Elemente dafür, und dies sind Apps, die sich wirklich darauf konzentrieren Menschen so schnell wie möglich zu bekommen, was sie wollen. Denken Sie also wirklich darüber nach, während Sie Ihre Sitemap entwickeln und entwerfen. 10. Fluss: Während ich die Sitemap entwickle, fange ich auch an, über den Fluss nachzudenken. Das ist also das Engagement, das die Leute haben werden, so werden sie sich durch die App-Erfahrung bewegen, und das werden die Interaktionen sein, die sie haben. Also, es ist ähnlich wie die Sitemap, aber ich bin weniger besorgt mit Seiten, und ich bin wirklich besorgt mit Aktionen und wie ich diese Aktionen gruppieren. Also, ich weiß, dass ich hier eine willkommene Startseite haben werde. Ich weiß, dass ich eine Art Home-Bildschirm haben werde, also ist dies auf der Versionszeile der Sitemap, die wir uns angesehen haben. Dann werde ich den Leuten die Wahl geben, dass sie herausfinden wollen, wie sie die App benutzen, wollen sie gehen und anfangen, auf die Türprodukte zu schauen und Fotos zu machen? Was ist die Aktion von dort, oder der nächste Abschnitt? Sie könnten auf die Produktdetailseite gehen. Sie könnten ein Foto machen. Sie könnten auf die Bildseite gehen, dann könnten sie über diese verschiedenen Social-Media-Kanäle teilen, sie könnten Farben wählen. Dann konnten sie herausfinden, wo sie kaufen können, oder sie könnten sich an die Marke wenden. Also denke ich über diese Ströme nach und wie das arrangiert werden könnte. Aber das sieht für mich ein bisschen beschäftigt aus. Also, indem ich dieses machte, fing ich an, wirklich darüber nachzudenken, ob es einen besseren Weg gibt , dies tatsächlich zusammenzusetzen, und so habe ich das zweite Konzept entwickelt, das, wenn Sie es hier sogar nur in diesem Diagramm sehen es sieht noch einfacher aus. Also, ich bekomme diese beiden Versionen, nur damit Sie den Unterschied zwischen der einen und der anderen sehen können. Also, ich denke über den Ladebildschirm nach, den wir dort keine Wahl haben müssen, aber dann gehen wir wirklich direkt zum Kern der App-Erfahrung, wo ich möchte, dass die Leute in der Lage sein, Bilder zu machen, sich die Türprodukte anzusehen, und dann beginnen Sie, all diese Dinge zu engagieren, zu teilen und zu tun oder tiefer in die Produktdetails zu gehen , wenn sie herausfinden möchten, wo sie kaufen, die Marke kontaktieren oder mehr über die App selbst erfahren möchten. Also, dieser hier denke ich, ist ein viel einfacherer Weg und Weg zu gehen. Nur damit du es weißt, nur um einen Blick darauf zu werfen, wie ich ein paar dieser Dinge gebaut habe. Lassen Sie uns einfach auf einige der Dinge gehen, die ich hier in Photoshop getan habe. Hier sind einige der Symbole, die ich gerade zusammengestellt habe sehr grob. Auch hier ist dies ein Prototyp, also habe ich gerade diese Symbole so gebaut, dass wir schneiden, was wir kopieren und einfügen und sie direkt hier in die Tat umsetzen , damit Sie beginnen können, einige der Aktionen zu sehen , die ich darüber nachdenke Leute werden tatsächlich haben. 11. Design-Elemente: Werfen wir einen Blick auf einige der anderen Dinge, die ich hier gemacht habe. Ich habe eine Seite namens Design-Elemente erstellt, und auf dieser Seite habe ich gerade alle kleinen Stücke zusammengeworfen, die Symbole, die wir uns angesehen haben, die ich in Photoshops entworfen habe, einige Schaltflächen, die ich hier eingefügt habe. Hier sind einige der Tür-Produkte, hier ist der Raum, den ich im Hintergrund verwenden möchte, hier sind einige Farben aus den Markenrichtlinien, von der Marke und einige ihrer Logos. Also, ich habe gerade alle diese Elemente auf eine Seite geworfen. Das ist, was ich besonders an Aktion mag, dass ich diese Art von Halteflächen haben kann, und dann kann ich einfach kommen und diese Elemente nehmen, und sie verwenden, wenn ich beginne, Bildschirme und Drahtmodelle zu entwerfen. 12. Bildschirmgröße & Auflösung: Bevor wir tatsächlich mit dem Wireframing beginnen, möchte ich nur ein wenig über Bildschirmgröße und -auflösung sprechen. Für diese spezielle App, Ich werde es für iPhone 6 plus zu entwerfen, das ist das Telefon, das ich habe und ich benutze, so dass ist, was ich werde zu verwenden. Nun, während meiner Entdeckungsphase sah ich meine Zielgruppe an, ich fand heraus, was die meisten von ihnen in Bezug auf das Gerät verwenden, auf dem sie sein werden, und ich entwerfe speziell für diese Zielgruppe und für dieses Gerät. Also, ich werde nur wählen iPhone und ein paar Dinge hier über Auflösung, jetzt, weil dies ein Prototyp ist, ist mir wirklich egal , dass es absolut kristallklar und scharf aussieht. Es geht darum, die Idee und das Konzept da draußen zu bekommen. Dies ist nicht das endgültige Design. Aber wenn ich mir Bildschirmauflösungen anschaue, war das ursprüngliche iPhone 320 mal 480 Pixel. Das iPhone 6 ist 750 von 1334, und das 6 plus ist 1244 von 2208. Nun, das ist eine enorme Größe, um Prototypen in zu machen. Wenn Sie tatsächlich auf die Größe dieses bestimmten Bildschirms schauen , ist es viel zu umständlich und sperrig für meinen Geschmack. Also, was ich tun werde, ist eigentlich meine Wireframes in der iPhone 6-Größe zu entwerfen und dann, wenn ich sie in meine Prototyping-Anwendung bekomme , wo ich sie alle zusammennähe und dies in eine Mini-Prototyp-App verwandle, bin ich Ich werde sie hochskalieren, und das kümmert mich mir nicht wieder. Es wird etwas Unschärfe in der Entschließung geben, aber ich habe wirklich nicht so viel über das endgültige Design nachgedacht. Dies ist nur ein Prototyp in diesem Stadium. Die andere Sache, über die ich sprechen möchte, ist die Bildschirmausrichtung. Wie Sie wahrscheinlich von der Verwendung von Apps wissen, können Sie Ihren Bildschirm horizontal drehen und einige Apps werden sich neu ausrichten und alles auf einen horizontalen Bildschirm skalieren und dann drehen Sie ihn vertikal und sie werden in eine vertikale Position. Auch hier ist dies ein Prototyp und ich möchte nur diese Idee und das Konzept vor den Menschen bringen und es testen, um meine Flüsse in Gang zu bringen und die Bildschirme richtig zu gestalten und über die Elemente nachzudenken, die auf dem Bildschirm. Und deshalb entscheide ich mich, diesen Prototyp in einem vertikalen Format zu machen. Also, ich habe die Bildschirmauflösung aus dem Bild genommen. Ich werde für eine Bildschirmgröße und -auflösung gehen, die einfach ist. Ich gehe für eine Orientierung, die nur vertikal ist, und drittens werde ich nur für das iPhone gehen. Ok. Also, ich vereinfachen die Welt, in der ich arbeiten werde, wieder, nur weil dies ein Prototyp ist. 13. Wireframing: Also haben wir uns unsere Zielgruppe angesehen. Wir wissen, dass sie auf dem iPhone sind. Wir würden nur einen Prototyp bauen, also gehen wir für eine Größe, die tatsächlich nur für uns funktioniert und wieder, weil die Orientierung, wir gehen nur für vertikale gehen. Auch hier, weil dies in diesem Stadium ein Prototyp ist, und ich bin nicht allzu besorgt darüber, dass dies sowohl horizontal als auch vertikal arbeiten muss. Wir bleiben nur bei einer vertikalen Orientierung. Also, hier ist mein Ladebildschirm. Ich werde die App öffnen Türen für jetzt rufen. Hier ist das Firmenlogo. Wieder, einfach diese Dinge auf eine Seite zu setzen und dann denke ich über den Home-Bildschirm nach, wohin das gehen würde. Also, hier ist mein Home-Bildschirm und ich habe eine Wahl, die Tür zu wählen. Nun, das geht weg von der Sitemap Nummer eins und hier war wo ich diesen zusätzlichen Bildschirm gegen Version zwei, wo ich dachte, warum gehen wir nicht einfach direkt in die eigentliche App selbst, und geben den Menschen die Türerfahrung , die ich will, dass sie haben, und sie sofort engagieren? Also, hier sind einige der Elemente, die ich zusammengestellt habe , die wir auf der Seite mit Designelementen gesehen haben. Ich nehme nur ein paar dieser Dinge, kopiere diese, und ich bringe sie auf diese Seiten. Also, ich kann beginnen, diese Elemente als Teil dieses Designs zu verwenden, um diese Bildschirme zu machen. Nun, eines der großartigen Dinge, die tatsächlich tut, ist hier unten zu meistern. Also kann ich tatsächlich Elemente wie meine oberen Navigationspfade erstellen, und das kann durchgehend konsistent sein, und ich kann diese Master einfach auf jede Seite ziehen, die ich entwerfe, und dann werden sie durchgehend konsistent sein. Wenn ich dann den Master bearbeite, wird er ihn auf allen verschiedenen Drahtframe-Seiten bearbeiten. Das kann also extrem zeitsparend und vorteilhaft sein. Also, hier denke ich, ich nenne dies den Home-Bildschirm, aber das ist im Grunde, wo ich tatsächlich anfangen, die App zu verwenden. Wenn ich dann auf den Link oben klicke, gehe ich zu einer Detailseite. Also, jetzt wird dies eine lange Scroll-Seite sein. Hier gibt es also mehr Informationen, als auf einer Seite passt. Also, ich werde das nur als eine große lange Seite erstellen und später werden wir herausfinden, wie man diesen Scroll richtig macht. Also, was ich beginne zu tun, ist, sich diese Sitemap anzusehen und die Elemente zu verwenden, die sich auf dieser Sitemap befinden, gekoppelt mit den Entscheidungen, die Leute im Fluss treffen, um darüber nachzudenken, was tatsächlich auf diesen Bildschirmen und Seiten ist. Also, das war die ursprüngliche Idee für die Homepage, nicht sehr spannend und nur eine große Wahl dort. Dann würde das zu dieser Türseite führen und wenn Sie sich von der Sitemap erinnern, haben wir Türen. Wir haben, wo wir kaufen können. Wir haben Kontakt. Wir haben etwa. Dann haben wir Produktdetails. Also, das ist eine Menge Dinge, die auf meinem Bildschirm haben, die die ganze Zeit auf Immobilien nehmen, aber ich werde nicht unbedingt verwenden. Also, ich wollte dir nur zeigen, dass es mein Ausgangspunkt ist, und warum nehmen wir das nicht einfach und setzen das nebenan, und ich werde mit dir über ein paar Gedanken reden, die dahinter vor sich geht, wo ich tatsächlich möchte mit dieser Seite enden. Also, das war die alte Homepage, aber jetzt, mit einer Ebene nach unten und in der ersten Iteration, aber hier denke ich wirklich daran, mit diesem neuen Home-Bildschirm zu gehen. Ich habe alle diese Knöpfe über den Boden genommen und ich habe sie in dieses Hamburger-Symbol gesetzt. Ich werde später darüber nachdenken, wie ich in der Lage sein möchte, diese Navigation verfügbar zu machen und Leute auf diese anderen Seiten innerhalb der App-Erfahrung zu bringen? Aber was es getan wird, ist es meine Bildschirm Immobilien erhöht, die so wertvoll in einem mobilen Erlebnis wie diesem ist. Also, ich zeige Ihnen diese paar Ideen, um über den Prozess nachzudenken, den ich tatsächlich durchmache, während ich die Seiten, die auf der Website sind, verdrahtet. 14. Axure Recap: Also, lassen Sie uns kurz zusammenfassen, wo wir gerade sind. Meine Firma über ein paar Seiten hier, also halte ich nur den Überblick und notiere die Schritte, die ich unternommen habe, und den Prozess, den ich durchgemacht habe. Die Prozessseite, die war, Ich habe dies hier zu Ihrem Vorteil, um Ihnen die Schritte und Phasen zu zeigen , die ich durchmache. Also, dass ich normalerweise nicht in die App setzen würde. Ich habe diese Seite hier, wo ich angefangen habe, alle meine Icons und Design-Elemente, Logos von den Farben des Unternehmens basierend auf den Markenrichtlinien und dann diese Sammlung von Elementen, die ich für den Designprozess verwenden werde, zu setzen Logos von den Farben des Unternehmens basierend auf den Markenrichtlinien und dann diese . Also, ich habe die hier drin. Seitengrößen, über die wir gesprochen haben, ich halte nur, dass es vielleicht als Referenz. Wir haben ein paar verschiedene Sitemap-Versionen durchlaufen und scheinen sich jetzt mehr auf diese zu stützen. Dies ist der Punkt, an dem ich könnte, wenn ich beide Sitemap-Ideen und Prototypen beide tatsächlich nehmen und sie dann gegeneinander testen wollte . Ich werde eigentlich nur dieses spezielle bauen weil ich denke, dass dies nur eine bessere Lösung ist, aber die Tatsache, dass ich diesen Prozess durchlaufen habe, ein paar verschiedene Dinge während des Wireframing-Prozesses auszuprobieren , war sehr nützlich für mich. Dann ging ich weiter und fing an, einige der Bildschirme zu bauen, so sehr einfach Wireframe eines Ladebildschirms. Der ursprüngliche Home-Bildschirm für die erste Idee und dann die nachfolgenden Seiten und dann wieder die eine, die ich eigentlich bauen werde, was diese ist, eine Boden-Detailseite. Es tut mir leid, Tür Detailseite und dann habe ich andere Seiten, wie, wo zu kaufen Seite. Ich habe noch nicht getan, die Kontaktseite und einige der anderen Seiten, die, die über Seite, zum Beispiel, dass wir wissen, dass wir in der endgültigen App haben wollen. 15. Deine Sitemap verbinden: Ich habe früher darüber gesprochen, wie wir tatsächlich einen HTML-Prototyp mit iShare erstellen können, so dass wir diese Bildschirme sehr schnell zusammenstellen könnten, bevor wir überhaupt eine tatsächliche App erstellen, um auf mein Handy zu gehen. Also, werfen wir einen Blick auf ein oder zwei der Funktionen hier. In der Sitemap haben wir diese unsere, wo zu kaufen. Wir gehen hier rein und wir werden es mit einer Referenzseite verbinden, also gibt es eine Möglichkeit zu kaufen. Wir werden in die Details gehen. Wählen Sie dort eine Referenzseite aus. Da ist die Tür-Detailseite, die wir bekommen haben. Also, ich habe diese anderen Wireframes noch nicht gebaut. Aber was mir das erlauben wird, ist tatsächlich von diesem auf diese spezifischen Seiten zu klicken . 16. Verlinkung & Veröffentlichung in HTML: In der Zwischenzeit habe ich ein bisschen Hauswirtschaft gemacht und ich habe die linke Seite hier aufgeräumt , um die Dinge ein wenig klarer für mich zu machen. Ich werde hier zurück in die Sitemap gehen und ich werde nur sicherstellen, dass diese mit den richtigen Stellen verbunden sind. Dieser spezielle Bildschirm hier , der derzeit Dual Collection eins genannt wird, werde ich tatsächlich diese Referenzseite neu verknüpfen, weil das jetzt an den neuen Ort gehen wird, weil dies das neue Schema ist, das ich mir einfallen kann. Dann Tür Detail, Ich möchte nur sicherstellen, dass diese Referenzseite an die richtige Stelle geht, ist es. Das geht auf die Tür-Detailseite, also ist das okay. Der Ladebildschirm, ich möchte nur sicherstellen, dass diese Referenzseite korrekt ist, und es ist. Also, das sind die Bildschirme, die ich tatsächlich entworfen habe, und ich werde in der Lage sein, alle miteinander zu verknüpfen. Ich werde auch in der Lage sein, in einige dieser Bildschirme zu gehen und sie als auch zu verbinden. Nun, dieser spezielle Bildschirm hier, ich werde nur dieses Logo bis zur nächsten Seite in der Sequenz verknüpfen , nur damit ich das habe. Es ist kein tatsächlicher Link, den wir in der App selbst haben würden , weil der Ladebildschirm auf die Homepage gehen wird. Aber ich werde es mit dem verknüpfen, was wir nennen, Türkollektion. Da gehen wir hin. Also, wenn ich das tatsächlich tippe, verknüpfen Sie das auch. Erstellen Sie eine Verknüpfung. Das wird auch auf die Tür-Sammlungsseite gehen. Wenn ich dann auf der Tür-Sammlungsseite bin, habe ich dies mit der Tür-Detailseite verbunden. Ich weiß, ich wollte, dass das passiert. Dann haben wir eine braune Tür, die ich haben wollte, die mit dieser Seite verbunden ist. Wenn ich dann auf die braune Türseite gehe, können wir sehen, dass ich zurück zur weißen Tür komme. Lassen Sie uns einen Link erstellen, der zum Startbildschirm geht. Also, ich werde nur das nehmen und ich werde sagen, erstellen Sie einen Link, und dann geht das zurück auf die Tür-Sammlungsseite. Also, da gehen wir hin. Also, jedes Mal, wenn ich darauf tippe, das geht einfach zurück zu dieser Seite. Also, lassen Sie uns all diese Dinge als einen sehr schnellen HTML-Prototyp zusammennähen. Also, ich werde gehen und veröffentlichen, und ich werde sagen „Generieren HTML-Dateien“, „Generieren“ Wie Sie sehen können, bin ich jetzt in einer Webbrowser-Umgebung. Ich kann hier gehen und ich kann auf diese bestimmte Sitemap Seite klicken und ich kann all diese verschiedenen Seiten sehen. Also, das ist sehr nützlich für mich nur als Organisationsprinzip, nur um zu sehen, dass ich all diese Seiten habe, sehen, wie sie miteinander verbunden sind. Ich glaube, wir haben gesagt, als wir auf dem Ladebildschirm waren. Wir werden in der Lage sein, auf das Symbol zu klicken, das hier gehen würde. Das würde uns zu den Brauntönen bringen, Grün. Wenn wir dann auf das Symbol klicken, wird es uns zurück nach Hause bringen. Wenn wir dies anklicken, wird es auf die Detailseite gehen. In Ordnung. Also, sehr, sehr schnell da. Ich habe gerade einen Flow und ein paar Klick-Throughs erstellt. Also, das ist eine Art Prototyping, aber es ist nicht auf meinem Handy. Es ist auf der Webseite. Nun, ich könnte die URL veröffentlichen, ich könnte das teilen. Wir tun das oft, um mit Kunden zu teilen oder mit den Programmierern zu teilen, nachdem wir etwas mehr aufgeräumt und ein wenig mehr Design-Arbeit getan haben etwas mehr aufgeräumt und und einige der anderen Drahtrahmen zu diesen Seiten fertig gestellt haben. Aber ich will das auf mein Handy bringen. 17. Einführung in Flinto: Ich bringe Flinto hoch. In Flinto hier habe ich angefangen, alle verschiedenen Bildschirme zusammenzustellen, die ich in Azure entworfen habe. Wie ich bereits sagte, hätten Sie dies in Illustrator tun können, Sie hätten dies auf Papier tun können, und dann diese scannen und/oder Bilder von ihnen und in Photoshop schneiden können. Es gibt alle Arten von Möglichkeiten, auf denen Sie all diese Elemente zusammenbringen können. Ich habe dir nur einen Weg gezeigt, es zu tun. Es ist die Art, wie ich derzeit gerne arbeite, aber es gibt viele verschiedene Möglichkeiten, um diesen Punkt tatsächlich zu erreichen. Was wir uns also anschauen, sind verschiedene iPhone-Bildschirme, und was ich getan habe, ist all die verschiedenen Elemente dort platziert, und was ich zeige, sind benachbarte Zustände des Bildschirms. Also, das ist die Startseite oder die Tür-Detailseite, und der Bildschirm daneben, Ich zeige, wo ich das Menü aktiviert habe, die Hamburger-Navigation. Sie können sehen, dass ich ein paar kleinere Änderungen vorgenommen habe. Ich habe über das Branding gewechselt, um das Hamburger-Symbol in die ganz obere linke Ecke zu setzen . Ich habe das getan, damit ich dieses Panel über schieben kann , wo ich die verschiedenen Zustände der Navigation sehen kann. Ich habe verschiedene Türbehandlungen hier, die ich über den Hintergrund gleiten werde. Dort können Sie auch unsere Produktdetails-Seite hier sehen. Dies ist eigentlich die ganze Seite, und wir haben eine Folienfunktion, so dass wir nach oben und unten gleiten können, dieser Seite nach oben und unten scrollen, in der Lage sein, sich das anzusehen. Dann, was wir getan haben, ist alle diese Seiten zusammengenäht , so dass wir verschiedene farbige Türen aktivieren können. Also, es gab einige sehr spezifische Dinge, die ich tun wollte, und warum ich dies in diese Anwendung bringen möchte, ist, weil sie einige schöne Übergänge hier haben und ich diese Übergänge anpassen kann. Eines der wichtigsten ist, wie ich die Tür tatsächlich hin und her schiebe, und deshalb wollte ich all diese Elemente nach Flinto bringen, um das zu erreichen. 18. Übergänge: Eines der wichtigsten und zentralen Funktionen dieser App, über die wir gesprochen haben , ist, wie ich in der Lage sein möchte, diese Türen über die Kamera zu schieben. Also, ich werde die Kamera automatisch aktivieren, wenn die App geöffnet wird und dann möchte ich in der Lage sein, diese Produkte über diese Kameraansicht zu schieben , die ich in meinem Bildschirm geöffnet habe. Also, werfen wir einen Blick auf die Übergänge dort, ich werde hier rüber gehen und sagen: „Übergang bearbeiten“. Dies ist eine der großartigen Eigenschaften von Flinto, es erlaubt mir zu zeigen, hier werden wir es einfach in Zeitlupe tun, der Vorbildschirm, der eine weiße Tür darüber hat und was ich tun möchte , ist die weiße Tür zu wischen und bringen in einer Holztür, also schauen wir uns das noch einmal an. Also, bei einer sehr spezifischen Aktion hier, habe ich gesagt, dass ich will, dass die Tür in einem Winkel ist und es auf der rechten Seite ist, ich möchte, dass sie über gleitet und dann werde ich es positionieren, ich würde das mit meinem Daumen als Benutzer tun, aber dann es bildet sich in einer zentralen Position, es ist absolut vertikal. Es vielleicht eine Pensions-Zoom-Funktionen, Ich könnte das skalieren und wenn es um die Entwicklung dieser App geht, werde ich mit den Entwicklern sprechen, Ich werde Notizen zusammen mit dem Prototyp schreiben , um die Entwickler zu sagen , wie diese bestimmte Funktion funktionieren würde. Aber dieses hier ist etwas, das ich wirklich in der Lage sein möchte, kundenspezifisches Design und durch Animieren es den Entwicklern genau zu zeigen, wie ich möchte, dass diese Tür hineinrutschen. Das ist also eine sehr spezifische Aktion und ich bin begeistert, dass ich das tatsächlich mit einem sehr einfachen Satz von Werkzeugen tun kann. Also, schauen wir uns einfach einige der anderen Übergänge an. Wir sprachen über die Hamburger-Symbol, also das ist ein weiterer Übergang, den ich wirklich speziell machen wollte. Dies ist der Bildschirm, bevor Sie auf das Hamburger-Symbol klicken und wenn ich darauf klicke, gleitet diese Seite über und die Navigation gleitet hinein. Schauen wir uns das einfach noch einmal an, in langsam, dass. Also, die Aktion, die ich hier bekam, das ist, bevor ich auf das Hamburger-Symbol klicke und dann klicke ich auf das Hamburger-Symbol, und Sie können sehen, dass die Navigation tatsächlich nach unten skaliert wurde und es ist in gleitet, es war in 20 Grad Winkel und dann ist es wurde in eine horizontale Position. Also, lassen Sie uns das einfach verlassen. Also, das sind ein paar Übergänge dort, wir haben das Gleiche hier unten los, wieder bringen das Hamburger-Symbol in der primären Navigation heraus , wenn ich auf der Kartenfunktion bin, das wäre natürlich passiert mit all diese Bildschirme, aber ich werde nicht durchgehen und all das für diese animieren, das wird mich zu lange dauern und ich muss das nicht wirklich wieder für dieses Prototyp-Feature tun. Aber eines der anderen Dinge, die ich tun muss und über die wir gesprochen hatten, ist in der Lage, die Farbe der Tür zu ändern. Also, dieser Bildschirm hier wird tatsächlich auf diese Seite verlinken, so dass Sie sehen können, dass die rote Linie hervorhebt. Also, wenn ich auf das braune Symbol dort klicke, wird braune Tür auftauchen. Wenn ich auf die Rosenfarbe klicke, wird die Rosetür hereinkommen. Also, das sind nur einige sehr einfache Transaktionen und ich habe gerade ein Crossfade als Übergangsmethode für diese bestimmte Funktion gemacht . Dann kommt es zu langen Scrolling-Seite und wir wissen, dass wir nach unten scrollen müssen, also lassen Sie uns zurück zu aktivieren, hier gehen wir, Sie können sehen, dass dies der Scrollbereich ist und ich habe hier einige Anweisungen, dass es ein leichtes Springen zu ihm und es wird vertikal nach oben und unten auf der Seite scrollen. Also, sehr schnell, ging ich von der Konzeptidee in Bezug auf eine Sitemap, Wire-Frames, machte einige kurze Flows, dann erstellt die Draht-Frame-Designs für diese speziellen Bildschirme, ich zog sie hier, ich kopiert und eingefügt. Ich habe begonnen, einige Übergangselemente zu erstellen und ich habe hier die Anfänge eines Prototyps. Also, lassen Sie uns gehen und werfen einen Blick sehr schnell in ihrem Vorschaumodus, wie das tatsächlich funktionieren könnte. Also, hier ist der Vorschaubildschirm, lassen Sie uns einfach auf den Startbildschirm gehen, also hier ist es und es gibt diese Türaktion, die ich wollte, also wird dies ein Daumen-Swipe auf dem Telefon sein. Sie können sehen, dass ich in der weißen Tür bin, und ich kann über die Holztür streichen und diese Holztür hochziehen, ich kann die Holztür rüber streichen und diese Glastür heraufbringen. Also, ich habe meine Aktion dort laufen, die scheint genau so zu funktionieren, wie ich es wollte, schauen wir uns das Hamburger-Feature an. Okay, so gehen Sie von dort zu wo zu kaufen, dort ist es zurück zu dieser Seite. 19. Exportieren auf dein Telefon: Nun, da wir zu einem Punkt gekommen sind, wo wir eine Reihe von verschiedenen Bildschirmen haben und wir verschiedene verschiedene Übergänge, Effekte und Links ausprobiert haben , möchte ich das jetzt auf mein Telefon bringen, damit ich anfangen kann zu fühlen, wie es tatsächlich in einem Smartphone-Gerät. Ich möchte es so schnell wie möglich an einige meiner Kollegen senden und ihr Feedback bekommen und von ihnen erfahren, was sie sehen, funktioniert und was nicht funktioniert und wie sie die App und das gesamte App-Erlebnis mögen. Ich werde es nur teilen und ich werde es mir als E-Mail senden, ich kann es auch an andere Leute senden. Also, da gehen wir hin. Ich nenne es Flinto Prototyp, und das wird auf meinem Handy kommen. 20. Die fertige App: Also hier ist meine E-Mail mit dem Flinto-Prototyp darin, und was ich hier habe, ist die Flinto-App, die ich heruntergeladen habe , die dann den Prototyp lädt, den ich in das eingebaut habe und hier ist es. Also, das ist meine App mit der Swipe-Funktion, die ich sehr daran interessiert war , zu sehen, wie das tatsächlich funktionieren würde. Das ist also großartig. Das scheint für mich gut zu laufen. Hier ist die Produktdetailseite mit der Schiebefunktion, der Scrolling- und Langlaufseite. Schlagen wir einfach zurück, gehen Sie zurück zu dieser Seite, gehen Sie zurück auf die Homepage hier. Einige der anderen Funktionen, die wir uns angesehen haben, ist die Funktion, wo zu kaufen, so dass diese Seite hier ist. Ich habe noch nichts mit der Suchfunktion gemacht oder meine Postleitzahl geändert. wären also einige der anderen Dinge, die ich jetzt betrachten möchte , und vielleicht ist dies ein Scrollbereich darunter mit all diesen verschiedenen Orten. Das wäre etwas, das ich anfangen möchte, anzuschauen oder was passiert wenn ich tatsächlich auf einige dieser Marker auf der Karte tippe. Gehen wir einfach zurück zur Homepage von hier. Das andere Hauptmerkmal, das wir uns ansehen, war die Fähigkeit, die Farbe der Tür, die ich tatsächlich über die Kameraansicht geschoben habe, tatsächlich zu färben oder zu ändern. In Ordnung, also, da hast du es. In einer relativ kurzen Zeit haben wir eine Reihe von verschiedenen Schritten durchlaufen, vor allem, Blick auf die Funktionen und die Funktionen, die wir wollen, um diese App haben, für wen es eigentlich ist, wirklich suchen und über diese Zielgruppe nachzudenken, über die Plattform nachzudenken, auf der wir diese tatsächlich aufbauen möchten, in diesem Fall iPhone 6 Plus in diesem Fall. Dann gingen wir auf die Sitemap, Flows, Wireframeing-Prozess, dann nahmen wir die Wireframes, wir steckten sie in Flinto und dann haben wir diese Übergänge erstellt und wir haben etwas geschaffen, das wir jetzt mit anderen Menschen teilen können und dann kann ich jetzt erleben und wirklich bestimmen, ob das tatsächlich für mich so funktioniert, wie ich es will? Gefällt mir diese Swipe-Funktion tatsächlich? Gibt es vielleicht einen besseren Weg, diesen Übergang zu machen? Möchte ich einen weißen Hintergrund dahinter haben? Vielleicht nicht. Vielleicht könnten diese Farben hier durch meine Kameraansicht auf diesem speziellen Hintergrund mehr im Raum sein . Ich habe auch nicht das nächste Hauptmerkmal gemacht, was passiert, wenn ich hier ein Bild mache, klicke auf die Kamera und teile es dann. waren also einige der anderen wichtigen Dinge, die ich diesem Prototyp hinzufügen möchte , und das ist, wo wir zu diesem Zeitpunkt so weit sind. 21. Fertigstellung: So haben wir verschiedene Schritte und Phasen durchlaufen und verschiedene Tools verwendet , um die Konzeptidee prototypisiert und auf Ihr Smartphone zu bekommen. Vielen Dank, dass Sie diesen Kurs gemacht haben, und ich freue mich sehr darauf, zu sehen, was Sie tun und was Sie produzieren und die Prototypen, die Sie entwickeln. Bitte wenden Sie sich an mich und teilen Sie Ihre Konzepte und Prototypen. Ich würde gerne sehen, was Sie tun, und ich freue mich darauf, die Verbindung zu haben und hoffentlich bald Ihre App im iTunes Store zu sehen.