{"id":14668,"date":"2022-03-14T08:17:24","date_gmt":"2022-03-14T07:17:24","guid":{"rendered":"https:\/\/www.centigrade.de\/?post_type=blog&#038;p=14668"},"modified":"2022-03-14T09:18:25","modified_gmt":"2022-03-14T08:18:25","slug":"prototyping-mit-protopie-echtzeit-datenfunktionalitaet-zur-realisierung-eines-automobilprototypen","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/prototyping-mit-protopie-echtzeit-datenfunktionalitaet-zur-realisierung-eines-automobilprototypen\/","title":{"rendered":"Prototyping mit ProtoPie: Echtzeit-Datenfunktionalit\u00e4t zur Realisierung eines Automobilprototypen"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-14671\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Elexir-Car.jpg\" alt=\"Elexir Auto\" width=\"884\" height=\"584\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Elexir-Car.jpg 884w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Elexir-Car-300x198.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Elexir-Car-768x507.jpg 768w\" sizes=\"auto, (max-width: 884px) 100vw, 884px\" \/><\/p>\n<p>Anfang des Jahres wandte sich das Start-up-Unternehmen <a href=\"https:\/\/www.elexir.eu\/de\/\" target=\"_blank\" rel=\"noopener\">Elexir<\/a> mit einer einzigartigen Vision eines nachhaltigeren Autos an uns. Sie haben ein hochgradig anpassbares und erweiterbares Shared-Car entwickelt, mit dem Ziel, dass gleiche Erlebnis zu bieten wie ein eigenes personalisiertes Auto. Um dies zu erreichen, haben sie eine vollkommen neue Software-Architektur entwickelt. Durch die Verwendung eines Open-Source-Softwarekonzepts erm\u00f6glichen sie es jedem, zu ihrem System beizutragen und geben den Kunden die M\u00f6glichkeit, Hardwareelemente zu ersetzen, hinzuzuf\u00fcgen und von weiteren Softwareverbesserungen zu profitieren.<!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-14925\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Elexir-UI-Prototype.jpg\" alt=\"Elexir UI Prototype\" width=\"1600\" height=\"844\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Elexir-UI-Prototype.jpg 1600w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Elexir-UI-Prototype-300x158.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Elexir-UI-Prototype-1500x791.jpg 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Elexir-UI-Prototype-768x405.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Elexir-UI-Prototype-1536x810.jpg 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<h2>Kick Off<\/h2>\n<p>Ich war von der Idee sofort begeistert. Als wir uns dem Projekt anschlossen, hatte Elexir seine Software-Architektur bereits etabliert. Ein neues Auto-HMI von Grund auf zu entwickeln, ist eines der coolsten Projekte, das ich mir vorstellen kann. Au\u00dferdem waren sie mit ihrer Entwicklung bereits so fortgeschritten, dass sie die volle Kontrolle \u00fcber jedes Hardwareelement im Auto hatten! Das Einzige, was noch fehlte, war eine visuelle Darstellung, um Stakeholder von Ihrer Idee zu \u00fcberzeugen.<\/p>\n<h2>Warum Protopie?<\/h2>\n<p>Mit dem Schwerpunkt auf Hardware-Integration und Personalisierung wussten wir, dass wir eine fortschrittliche Design-Software ben\u00f6tigten, die weit \u00fcber die Grenzen statischer Bildschirme hinausgeht. Wir wollten einen Prototypen erstellen, der den Benutzern einen guten Eindruck von unseren Ideen vermittelt, es uns erm\u00f6glicht, schnell zu iterieren und in einem extrem kurzen Zeitraum eine L\u00f6sung zu finden. Da wir schon fr\u00fcher mit <a href=\"https:\/\/www.protopie.io\/\" target=\"_blank\" rel=\"noopener\">ProtoPie<\/a> gearbeitet haben und dadurch wussten, was die Software kann, kamen wir direkt zu dem Entschluss, dass dies das beste Tool ist, um diese Aufgabe zu bew\u00e4ltigen. Es war genau das richtige Projekt, um die M\u00f6glichkeiten von ProtoPie in Bezug auf Echtzeit-Datenanbindung, mehrere Hardware-Ger\u00e4te und Bildschirme voll auszusch\u00f6pfen. Um unseren Zeitplan einzuhalten, mussten wir auch die M\u00f6glichkeit haben, gleichzeitig zusammenzuarbeiten. Durch die Nutzung der fortschrittlichen Komponentenfunktionen und einer separaten Bibliothek konnten wir einzelne Elemente weiterentwickeln und sie anschlie\u00dfend zusammenzuf\u00fcgen.<\/p>\n<div style=\"padding:0 0 0 0;position:relative;\"><div class=\"MediaEmbedContainer\"><iframe src=\"https:\/\/player.vimeo.com\/video\/687117931?h=10a57eebeb&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&#038;controls=0&#038;autoplay=1&#038;loop=1\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" title=\"Elexir UI Seat Adjustment\"><\/iframe><\/div><\/div>\n<p><script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script><\/p>\n<h2>Design<\/h2>\n<p><em>&#8222;Wir wollen das Rad nicht neu erfinden&#8220;<\/em> (ich denke, in diesem Zusammenhang kann ich dieses kitschige Wortspiel verwenden). Wir haben versucht, den Benutzer nicht zu \u00fcberfordern, indem wir vertraute Interaktionsmechanismen verwenden und nur die f\u00fcr jeden Anwendungsfall notwendigen Informationen anzeigen, um ein schlankes, minimalistisches Gef\u00fchl zu erzeugen. Andererseits wollten wir die Benutzerf\u00fchrung durch dreidimensionale Visualisierungen und direktes Feedback verbessern. Die Idee, visuelle Darstellungen von realen Objekten zu verwenden, um eine breite Palette von Funktionen zu steuern, hat uns fasziniert und die Dinge wirklich in Bewegung gebracht.<\/p>\n<div style=\"padding:0 0 0 0;position:relative;\"><div class=\"MediaEmbedContainer\"><iframe src=\"https:\/\/player.vimeo.com\/video\/687123135?h=a79c942c58&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&#038;controls=0&#038;autoplay=1&#038;loop=1\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" title=\"Elexir UI Components\"><\/iframe><\/div><\/div>\n<p><script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script><\/p>\n<h2>Workflow<\/h2>\n<p>Selbst bei gr\u00f6\u00dferer Skalierung, die im Falle moderner Autos zwangsl\u00e4ufig eintritt, haben wir versucht, schlank zu bleiben. Wir verfolgten einen kontinuierlichen und additiven Ansatz bei der Einf\u00fchrung neuer Komponenten in unsere Bibliothek und versuchten, sie erweiterbar und wiederverwendbar zu machen, damit sie f\u00fcr ein breiteres Spektrum von Anwendungen eingesetzt werden k\u00f6nnen. Um dies zu erreichen, verfolgten wir den <em>\u201eatomic design\u201c<\/em> Ansatz, d. h. wir bauten kleine Komponenten, die schlie\u00dflich in gr\u00f6\u00dferen Organismen verschachtelt wurden.<\/p>\n<p>Um die Wartbarkeit zu gew\u00e4hrleisten, verwendeten wir mehrere Dateien f\u00fcr verschiedene Teile und Ausgabeger\u00e4te der Software. Alle Komponenten sind in einer Bibliothek hinterlegt und in den Dateien verlinkt. Anstatt tagelang statische Screendesigns zu entwerfen, definierten wir zusammen mit Elexir eine visuelle Sprache, richteten ein paar Basiskomponenten ein, um sie zu testen und gingen direkt zu ProtoPie \u00fcber. Unser Workflow war von diesem Zeitpunkt an in drei Entwicklungsphasen unterteilt:<\/p>\n<ol>\n<li>Visuelles Design<\/li>\n<li>Ankopplung mit Echtzeitdaten durch den OBD port<\/li>\n<li>Integration in das reale Produkt zum weiteren Testen und iterieren<\/li>\n<\/ol>\n<div style=\"padding:0 0 0 0;position:relative;\"><div class=\"MediaEmbedContainer\"><iframe src=\"https:\/\/player.vimeo.com\/video\/687130779?h=7bd7e4add1&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&#038;controls=0&#038;autoplay=1&#038;loop=1\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" title=\"car-seattrunk\"><\/iframe><\/div><\/div>\n<p><script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script><\/p>\n<p>Prototyping war schon immer ein wichtiger Teil meines Workflows, denn es hilft mir, Ideen schnell zu visualisieren, zu testen und zu iterieren, ohne dabei zu viel Zeit zu verschwenden. Im Laufe der Jahre habe ich eine Vielzahl von Tools getestet und verwendet, was oft zu Frustration aufgrund von technischen Einschr\u00e4nkungen oder mangelnder Funktionalit\u00e4t f\u00fchrte. Die fortschrittlichen Komponentenfunktionen von ProtoPie erm\u00f6glichen es mir, weit \u00fcber den blo\u00dfen \u00dcbergang zwischen mehr oder weniger statischen Bildschirmen hinauszugehen. Eine dedizierte Komponentenbibliothek als \u201esingle source of truth\u201c zu haben und UI-Komponenten isoliert zu erstellen und dennoch zwischen ihnen kommunizieren zu k\u00f6nnen, gibt mir die Flexibilit\u00e4t, die ich bisher nirgendwo anders gefunden habe. Dar\u00fcber hinaus war die M\u00f6glichkeit, alles direkt auf dem Endprodukt mit echter Hardware zu testen, ein absoluter \u201egamechanger\u201c f\u00fcr uns!<\/p>\n<h2><strong>Fazit und Quick Tips<\/strong><\/h2>\n<p>Unser Ziel war eine dreidimensionale Darstellung des Autos und seiner Komponenten sowohl f\u00fcr das Navigationssystem als auch f\u00fcr die Einstellungen. Die Verwendung von Videos oder statischen Bildern w\u00e4re nicht ausreichend gewesen, da wir viel mehr Flexibilit\u00e4t ben\u00f6tigten, um unsere Anforderungen zu erf\u00fcllen. Es gibt zwar noch keine M\u00f6glichkeit, dreidimensionale Daten in ProtoPie zu integrieren, aber mit seinen Features wie Variablen und Funktionen gibt es fast nichts, wof\u00fcr man nicht eine L\u00f6sung finden k\u00f6nnte. Eine gro\u00dfe Hilfe ist auch immer die ProtoPie-Community. Mit einer schnellen Recherche habe ich andere gefunden, die vor dem gleichen Problem standen und bereits L\u00f6sungen daf\u00fcr gefunden haben.<\/p>\n<p>Ich mag das Trigger- und Response System von ProtoPie sehr. Mit Funktionen wie chains, if-conditions, send\/response-Funktionen und der Integration von Lottie gibt es nichts, was ich mir mehr w\u00fcnschen k\u00f6nnte. Aber es kann auch sehr schnell un\u00fcbersichtlich werden. Ich empfehle jedem, seine Layer zu benennen und das Design weiter zu strukturieren, indem man die Assets in Komponenten aufteilt. Vor allem bei gr\u00f6\u00dferen Projekten wie in diesem Fall w\u00e4re ich ohne dies v\u00f6llig verloren gewesen.<\/p>\n<p>Die Leistung ist normalerweise kein gro\u00dfes Problem in ProtoPie. Es scheint mit allem, was ich ihm zuwerfe, gut zurechtzukommen. Zumindest, wenn ein paar einfache Regeln befolgt werden:<\/p>\n<ul>\n<li>Bilder nicht in einer gr\u00f6\u00dferen Aufl\u00f6sung integrieren, als sie ausgegeben werden sollen.<\/li>\n<li>SVGs anstatt Pixel-Grafiken verwenden, sowie Lottie-Dateien anstelle von Videos.<\/li>\n<\/ul>\n<p>Abgesehen von der Verwendung von Variablen zum Speichern und \u00dcbermitteln von Daten, k\u00f6nnen Variablen auch bei der Fehlersuche n\u00fctzlich sein. Oft wei\u00df ich nicht, was genau passiert. Um ein besseres Verst\u00e4ndnis zu bekommen, erstelle ich eine Variable und binde den entsprechenden Wert, den ich auslesen m\u00f6chte, daran.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"author":58,"featured_media":0,"template":"","tags":[546,906,84,390],"class_list":["post-14668","blog","type-blog","status-publish","hentry","tag-motion-design","tag-protopie","tag-prototyping-de","tag-ux-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/14668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/58"}],"version-history":[{"count":7,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/14668\/revisions"}],"predecessor-version":[{"id":14937,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/14668\/revisions\/14937"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=14668"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=14668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}