Smartes Responsive UX-Design: Clevere Tipps, Tricks und Techniken

1. Einführung: Also, hallo da. Ich hoffe, Sie haben heute einen Kaffee gehabt, denn das wird eine Reise sein. Also, ich möchte Sie auf eine Reise für intelligente Responsive Design-Muster nehmen und es wird ziemlich viel Spaß machen. Mein Name ist Vitaly und ich bin Chefredakteur und Smashing Magazine auf dem Magazin für Designer und Entwickler, und in den letzten Jahren habe ich eine Menge Arbeit für responsive Design war klein und groß Gerät. Ich suche immer nach bestimmten Designmustern der Verfolgung Problem wir können sie tatsächlich in einer Weise lösen, dass sie später auf meine Arbeit anwenden können. Als Chefredakteur führe ich diese Messung offensichtlich selbst durch, es ist nur eine Website, es ist nicht sehr viel. Mehr Pseudo-Silhouette auf diese Weise nur eine Website zu sehen. Aber wir als Wissenschaftler und Entwickler sehen vielleicht, dass es anders ist, und wir sehen überall viele Boxen, und unsere Aufgabe ist es im Grunde, diese Boxen einfach zu verschieben, um sicherzustellen, dass wir eine Website erstellt haben, sich nach oben und unten skaliert, wie wir wollen. Nun, das ist natürlich nicht einfach, aber es ist noch schwieriger Website, ist schwieriger. Dies ist wie eine Vielzahl von Boxen von kleinen bis großen, Tabletten zu Bildschirm so, offensichtlich Auftragnehmer. Es geht nicht nur um Bildschirme, sondern auch um die Art und Weise, wie Menschen tatsächlich mit unseren Schnittstellen interagieren. Also, das ist eine große Sache. In diesem Workshop geht es nicht darum, in diesem Wasser ging es nicht um Kisten. Mir ist es nicht wirklich egal, aber denken Sie an Responsive Design mit boxy Überblick, wir sind nur Form. In dieser Klasse geht es auch nicht um Box-Trends, denn wirklich Trends kommen und gehen, aber sie bleiben nicht wirklich. Also, für mich gibt es tatsächlich einige Ideen für die Ergebnisse Gedanken darüber, was Sie auf Ihre Arbeit darüber hinaus anwenden können. Es geht auch nicht um Frameworks wie Skinning Dinge und um sicherzustellen, dass sie funktionieren, sondern vielmehr um tatsächliche Ideen und Techniken. Richtig. Seitdem zeige ich Arbeiten oder Scheitern in realen Projekten und warum? Es geht auch um Designmuster richtig. Was sind die Dinge, die wir tatsächlich voran gehen und auf unsere Arbeit anwenden können , wenn wir tatsächlich Ernterückstände liefern? Die meisten Dinge, die ich zeigen werde, sind ein bisschen verrückt, vielleicht mögen Sie die meisten von ihnen nicht. Sie könnten klingen oder könnten aussehen, dass sie manchmal seltsam und fehl am Platz sind. Sie sind auch manchmal ziemlich komplex und ungewöhnlich. Möglicherweise stoßen Sie nicht ständig auf dieses Problem, aber Sie können auf ähnliche Probleme stoßen und sobald Sie dies tun, werden Sie genau wissen, was zu tun ist und wie Sie damit umgehen. Das wird eine ganze Menge Spaß machen, wir werden zuerst in den reaktionsfähigen, nicht reagierenden Schüler schauen, große Perspektive und dann tauchen wir tief in diese kleinen molekularen Komponenten ein und wir werden über einige interessante Möglichkeiten, wie man die Dinge richtig macht. Befestigen Sie Ihren Sicherheitsgurt, das wird eine ziemliche Reise sein. 2. AUFGABE: In Ordnung. Während ein paar Komponenten zu entwerfen ist eine Sache, aber tatsächlich Zusammenstellung innerhalb der Schnittstelle ist eine ganz andere Geschichte. Nun, eigentlich kann man nicht einfach voran gehen und mitnehmen, einen Tisch entwerfen und vielleicht Typografie hier drüben auswählen, und vielleicht ein paar Leuchtkästen dort runtergehen und ihn dann ganz zusammenstellen und es ein Design nennen. Nun, das ist nicht wirklich Design. Das ist eher so, als würde man Dinge zusammenstellen. Design braucht ein großes Ganze. Sie müssen wissen, wohin Sie optisch und auch in Bezug auf das Layout gehen, oder? Also, es erfordert ein bisschen mehr Arbeit. Jetzt können wir all diese Komponenten betrachten, über die wir einzeln gesprochen haben, aber Sie müssen wissen, wir müssen genau wissen, wie wir sie in einem bestimmten Kontext zusammenziehen können, oder? Also, was, wenn wir uns die komplexere Schnittstelle genauer ansehen, oder? Oder vielleicht nur ein Beispiel für eine komplexe Schnittstelle wirklich. Was, wenn wir wirklich über eine Schnittstelle wie diese nachdenken, richtig? Ein Artikellayout, zeitschriftenähnliches Layout. Also, was wir hier haben, ist ein schönes Layout, das ich ausgewählt habe, und dieser Artikel, den ich ausgewählt habe , der Kunst gerichtet ist. Also, es ist viel los, oder? Aber wenn Sie genau darüber nachdenken, nun, es gibt nur wenige Komponenten, oder? Aber genauer gesagt, naja, sie werden immer und immer wieder wiederholt. Außerdem gibt es natürlich einige mehr oder weniger komplexe Abschnitte, aber Sie werden viele Illustrationen finden. Sie werden viele vollständige Anführungszeichen finden, Sie werden viele der verschiedenen kleinen Komponenten finden, die tatsächlich die Schnittstelle bilden. Also, was, wenn wir sie betrachten? Eigentlich, wenn man sie und diese Seite auf dieser Seite anschaut, was Sie herausfinden werden, naja, es gibt tatsächlich 26 davon, richtig? Also, indem wir diese Seite neu erstellen, können wir eine Menge lernen, was, wie alle diese Komponenten zu setzen, oder erkunden Sie alle Entwurfsmuster , über die wir in den nächsten paar Abschnitten sprechen werden. Ziehen Sie sie in einem einzigen Stück zusammen. Wir haben Navigation, Topographie, kunstgerichtete Bilder, Illustrationen, Grafiken, Diagramme, Pull-Zitate, Seitennoten, Fußnoten, Medienelemente, Biografie, verwandte Artikel, Newsletter-Box, Werbeeinheiten, Werbeboxen, Mir geht die Luft aus, in Ordnung? Also, das ist eine Menge. Also, was, wenn wir das tatsächlich nehmen und die verschiedenen Komponenten betrachten, aus denen es besteht, versuchen, sie zu entwerfen, stylen und sie zusammenzusetzen. Vielleicht reorganisieren Sie sie, schauen Sie sich genau an all die verschiedenen Details, die sie tatsächlich ausmachen, und fügen Sie sie dann in einer Schnittstelle zusammen. Vielleicht wird es ähnlich aussehen und vielleicht wird es sehr anders aussehen, aber der Punkt ist, dass dies unser Experiment und Übung sein wird, um all die Dinge, die wir erforschen werden, und einen Weg zu finden, wie sie funktionieren. Also, lasst uns das machen. 3. Was sind Design Patterns?: Design Muster Nun, wenn wir über Designmuster sprechen , haben sie in der Community keinen guten Ruf. Wenn wir über Designmuster nachdenken, neigen wir dazu, über faule Lösungen nachzudenken, oder wenn Sie möchten, abseits der Regalkomponenten. Sie nehmen es einfach aus dem Regal, Sie wenden es auf Ihr Projekt an. Manchmal denken wir über den Kontext nach, den wir haben, und du rufst den Tag an. Das ist so ziemlich es, richtig. Nun, das ist nicht ganz das, worüber ich gesprochen habe , wenn wir in dieser Sitzung über Designmuster sprechen. Wir nennen auch die Sache berühmten bescheidenen Kerl Art von Parallax und einseitige Design ist ein Muster. Aber für mich sind sie das nicht. Sie sind eher wie Trends, und Trends sind nicht wirklich wichtig, aber Techniken tun es. Also, wenn wir hier über Muster sprechen, sprechen wir von intelligenten, nützlichen Designtechniken, die tatsächlich bewiesen haben, in realen Projekten zu arbeiten. Also, diese Techniken sind nicht wirklich ein sicherer kugelsicherer Endpunkt eines Designs. Sehen Sie sie eher wie ein Design-Gespräch oder wie ein Starter, Design Konversation Starter. Das ist etwas, mit dem Sie anfangen würden, auf dem Sie aufbauen würden. Also würden Sie tatsächlich eine dieser Lösungen nehmen dann werden Sie über die Möglichkeiten nachdenken, wie Sie es anwenden können. Bauen Sie darauf auf und wenden Sie es auf Ihr Projekt an. Also, sie sind nie Art von Finish-Lösungen, sondern eher wie eine formlose Ideen, die Sie pflegen müssen, die Sie formen müssen, und sie zum Leben erwecken müssen. Nun, Mark Boulton tatsächlich, sagte einmal, dass Design-Prozess ist seltsam und kompliziert, weil es Menschen und Organisationen beteiligt, die oft seltsam und kompliziert sind. Nun, um ehrlich zu sein, in vielen der Projekte, an denen ich gearbeitet habe, ist dies genau das Problem, weil Manager, Leute, mit denen ich an den Projekten arbeite, tatsächlich eine sehr standardisierte oder klassische Sicht haben , wie reagiert Prozess funktioniert, und um ehrlich zu sein, wie ein kreativer Prozess im Allgemeinen funktioniert. Sieht so aus. Wo Sie irgendwo einen Anfang haben, und Sie haben irgendwo ein Ende, und dann folgen Sie einfach Ihren Iterationen, und Sie folgen einfach durch, richtig. Es ist sehr linear. Es ist sehr berechenbar. Aber das ist in Wirklichkeit überhaupt nicht so, richtig. Denn die Realität sieht sehr, sehr anders aus. Für mich ist es eher wie eine akribische Reihe von Sprints, bei denen man irgendwo anfängt und anfängt zu erkunden, und man divergiert, und man findet heraus, dass ich das tun sollte, oder vielleicht sollte ich das tun. Vielleicht sollte mein Tisch so aussehen. Ich mache mein Layout so aussehen wird, und so weiter, und so weiter, richtig. Also, Sie gehen wirklich voran und erkunden, und Sie finden heraus, was am besten funktioniert, um Ihre Anforderungen zu erfüllen. Dann werden Sie irgendwann mit Toten, Sackgassen enden. Nun, es gibt keinen Weg von dort. Vielleicht hat jemand deine Idee getötet, vielleicht ist sie still in einem Meetingraum gestorben oder was auch immer. Aber du musst überdenken. Du musst über verschiedene Wege nachdenken, um dasselbe Problem anzugehen, und hier fühle ich, dass du mehr Zeit verlierst, und weil ich effizient sein will, kann ich es mir nicht leisten, Zeit zu verlieren. Dies ist also genau der Punkt, an dem diese Entwurfsmuster äußerst hilfreich sein können, weil Sie wissen können, okay, in dieser Situation, dieses spezifische Muster, diese spezifische Lösung könnte gut funktionieren. Ich werde es nicht eins-zu-eins anwenden. Aber angesichts des Kontexts, den ich habe, könnte ich versuchen, einen Weg zu finden, um es tatsächlich richtig zu implementieren, so dass diese Phase der Erkundung nicht so viel Zeit in Anspruch nehmen muss, richtig. Also, Sie können von hier zu etwas bewegen, ein besserer Ort, an dem Sie tatsächlich leicht kommen können, und dann auf die endgültige Idee konvergieren. Deshalb, wenn wir tatsächlich beginnen, sehr oft zu entwerfen. Wir gehen tatsächlich in Ihre Stores wie Styleguide Boilerplate Pattern Tabellenkalkulation, die tatsächlich alle diese verschiedenen Komponentenauf einer Seite und all die verschiedenen Frameworks auf der anderen Seite auflisten alle diese verschiedenen Komponenten . Also ist es großartig für Prototyping, weil Sie einfach voran gehen und schauen können, okay, vielleicht brauche ich Vorkommen Selektor und Sie müssen nicht von Grund auf neu schreiben. - Richtig. Sie können es einfach nehmen und es in Ihrem Projekt, in Ihrem Design, in Ihrem Code bringen, und Sie haben es, richtig. Das Offensichtliche ist wahrscheinlich nicht das, was Sie verwenden werden, wenn Sie tatsächlich anfangen zu entwerfen oder zu bauen. Aber das ist wirklich großartig für Prototyping, um schnell zu sein. Also, das ist eine Art von Designmustern, von denen ich spreche. Etwas Nacktes, etwas, das man braucht, um sich zu formen und zu formen und das man baut, wenn man anfängt. Nun, in den nächsten Abschnitten, wir viele verschiedene Segmente aus verschiedenen Bereichen abdecken, und wir werden mit der Navigation beginnen, und wir werden verschiedene Arten von Navigation, Ikonographie, Akkordeons, Tabellen und Kalender, Formulare, Eingabeelemente. Nun, bilden Elemente im Allgemeinen, Timelines, Diagramme und Diagramme, Karten, Fußnoten und so weiter, und so weiter. Je mehr wir gehen, desto schwieriger oder komplexer werden einige dieser Komponenten sein. Aber am Ende wird alles tatsächlich Sinn machen, weil sie nicht wirklich so schwierig sind. Also, gehen wir weiter, und lassen Sie uns mit der Navigation fortfahren. 4. Navigation: Überraschenderweise ist es wirklich, wirklich schwer, Inhalte zugänglich zu machen und auf allen verschiedenen Bildschirmen verfügbar zu machen, und es ist nicht nur das Layout-Problem. Es ist auch eine Frage, was Sie setzen, und wo, und wie Sie präsentieren Navigation. Weil Sie vielleicht sechs, sieben, acht Mega-Dropdowns im großen Blick haben , aber was zur Hölle werden Sie damit in kleinerer Ansicht machen? Nun, das ist immer ein Problem. Nun, es gibt Büros etablierte Content-Paradigma der Content-Parität, die ohnehin reaktionsfähiges Design herrscht, was sagt, na ja, Ihre Benutzer werden tun, was sie im Grunde tun wollen. Wann immer jemand zu Ihnen kommt und sagt, dass Ihre Benutzer nicht X tun, oder verwenden Sie diese Funktion, oder lesen Sie diesen Artikel, oder brauchen Sie diesen spezifischen Teil des Designs, na ja, fragen Sie immer die Motive, weil Sie nie wissen. Die Menschen können tun, was sie wollen, und sie werden es tun. Deshalb ist diese Inhaltsparität wirklich weit verbreitet. Es bedeutet nicht, dass Erfahrung identisch sein wird und überall die gleiche sein wird. Sie können nicht so viel Inhalt haben, so viel Navigation sowohl auf dem Desktop als auch auf einem kleinen Bildschirm, aber Sie können, und Sie müssen sicherstellen, dass alle Inhalte und alle Funktionen auf beiden zugreifen. Also, vielleicht können Sie tatsächlich die vollständige Navigation große Ansicht anzeigen, aber vielleicht können wir auch progressive Offenlegung oder Akkordeons verwenden, oder einfach Dinge hinter dem Link in einer kleineren Ansicht als auch verstecken. Nun, ein falscher Weg, dies zu tun, wäre, tatsächlich voran und nehmen Sie die Navigation, die Sie auf dem Desktop haben, und übersetzen Sie sie fast eins zu eins, um sicherzustellen, dass es auf Mobilgeräten mehr oder weniger gleich aussieht und es funktioniert auf mobil. Hier haben wir eine Middlesex-London Health Unit Website und das ist eigentlich, was sie tun, wo sie primäre Navigation oben haben, globale Navigation, und Sie haben Unter-Dropdowns, und Sie haben auch Suche, und Sie haben auch offensichtlich einen regelmäßigen Navigationsinhalt verwandte Elemente, und so weiter und so weiter. Also, was sie in der kleineren Ansicht tun, ist eigentlich so ziemlich alles zu zeigen. Sie haben immer noch diese globale Navigation an der Spitze, Sie haben ein großes Logo, und dann haben Sie Ihre Dropdowns, weil mit ein paar stumme, seltsame, oder geheimnisvolle Dropdowns hier. Aber dann haben sie auch Unternavigation oben oder unten, sorry, und wenn Sie darauf klicken, wird es tatsächlich erweitert, und dann haben Sie auch eine Suchleiste. Nun, das ist einfach viel zu viel Navigation, Sie brauchen nicht so viel Navigation überhaupt, weil offensichtlich die Art und Weise, wie Menschen mit dem Gerät interagieren, ist anders auf Desktop und Handy. Auf dem Desktop, na ja, Sie haben eine Menge Klicken, auf mobilen Gerät, während Sie vielleicht am Ende mit einer Menge Wischen und Scrollen nach unten. Also, was Sie immer tun können, ist offensichtlich priorisieren. Das ist es, was WWF tut. Nun, offensichtlich haben sie eine Menge Inhalt zu zeigen, wie verwandte Projekte und Nachrichten, und all die verschiedenen Projekte, an denen sie arbeiten. Aber, genauer gesagt, haben sie viele Archive aus all den Jahren. Also, jede einzelne Sache, die sie in der Navigation haben, ist ein Dropdown: Arten, Orte, Bedrohungen, Unsere Arbeit, und so weiter und so weiter. Aber anstatt sie alle in einem großen, riesigen Akkordeon zu zeigen , priorisieren sie. Obwohl sie stattdessen tun, ist eigentlich mit zwei Links, Call-to-Action-Schaltflächen, die tatsächlich zu Spenden, Spenden und Adoption führen. Dann haben sie auch das berüchtigte Hamburger-Symbol in der rechten oberen Ecke, das nur in den primären Navigationsabschnitten gleitet, nicht alles, sondern nur die primäre. Also, wenn Sie dort ankommen, können Sie tatsächlich weiter navigieren. Wenn die Verringerung der Komplexität hatten sie acht Dropdowns in etwas viel mehr überschaubar. Nun, die Off-Canvas selbst, ist es nicht immer eine gute Idee das zu haben, denn wenn Sie mit der Off-Canvas-Navigation enden, werden Sie immer mit vielen sekundären Elementen in dieser Schublade versteckt und sie sind nicht notwendigerweise verwendet. Also, denken Sie zweimal darüber nach, was Sie tatsächlich dort platzieren. In der Tat, was wir in den letzten Jahren versuchen zu tun, ist tatsächlich zu versuchen , herauszufinden, was wir tun können, um solche Prioritäten zu setzen. Also bieten wir zuerst eine Suche selbst und machen sie so gut wie möglich, und wir haben versucht, einige Tests durchzuführen, um herauszufinden, ob Benutzer es tatsächlich brauchen? Benutzen sie es? Sind sie in Ordnung mit der Suche allein ohne Navigation gänzlich? Normalerweise sind sie natürlich nicht, also fügen wir eine Navigationsebene hinzu, und wenn es immer noch gleich ist, fügen wir die zweite Navigationsebene hinzu. Also, wir denken immer über die Navigation als Zwiebel-Layer und Sie fügen mehr hinzu, nur wenn Sie brauchen, dann mussten wir nie mehr als zwei Ebenen haben. Also, diese Hamburger-Ikone ist offensichtlich überall, aber was wir auch herausgefunden haben, dass es sehr interessant ist, ist, dass Menschen die Hamburger-Ikone in sehr unterschiedlichen Szenarien verwenden. Nun, da Navigationsoptionen nicht verfügbar sind, wenn Sie auf die Website zugreifen, was wir jetzt feststellen, ist Fähigkeitstest, dass die Leute tatsächlich gehen, um dieses Symbol zu verwenden , um tatsächlich Informationen darüber zu erhalten, worum es auf der Website geht. Aber anstatt tatsächlich in einen Abschnitt innerhalb der Schublade zu gehen, ist das, was sie tatsächlich tun, nur es zu öffnen und wieder zu schließen. Ich habe nur die Vorstellung davon bekommen, was es ist. Also, dieses Muster, das tatsächlich Star Wars verwendet, wenn Sie tatsächlich das Hamburger-Symbol und Off-Leinwand haben, und dann die Navigation von links nach rechts gleiten, na ja, das ist sehr praktisch. Aber wir können es etwas besser machen, wenn wir nur sicherstellen, dass, wenn Sie tatsächlich auf dieses Symbol klicken, Sie immer die X-Taste oder X-Symbol haben, oder was auch immer, um es sofort zu schließen. Nur ein bisschen besser. Nun, die Hamburger Ikone selbst, es gab eine Menge Diskussionen darüber, aber vor allem ist es wirklich wichtig zu bedenken, dass es nicht von jedem verstanden wird. Auch wenn Sie ein Symbol in Ihre Benutzeroberfläche einfügen und einige wichtige Aktionen dahinter verbergen, könnte es zu einem niedrigen Interaktionsverhältnis kommen. Es ist wahrscheinlich in fast jedem einzelnen Projekt passiert, an dem wir arbeiten, also müssen Sie dort wirklich vorsichtig sein. Time.com ist das beste Beispiel dafür, wo sie tatsächlich das Symbol hinzugefügt haben und sie bemerkten, dass die tatsächliche Konvertierung abnahm und die Klicks sank, so dass sie das Textmenü hinzugefügt, um zu erklären, was es ist, weil sie fühlten vielleicht Menschen verstehe einfach nicht, was es ist und es hat sich nicht wirklich geändert. Dann haben sie ein Overlay hinzugefügt, das erklärt, was dieses Symbol bedeutet, und es hat sich immer noch nicht viel geändert. Denn wenn Sie etwas hinter einem Symbol verstecken, sollten Sie sich nicht fragen, warum die Leute aufhören zu klicken. Stattdessen, was wir tun können, ist, wie Luke Rublevka vorschlägt, Burger-Symbol wird nicht endlich erkannt, also verwenden Sie vielleicht einfach Menü statt, um sicherzustellen, dass das klar ist. Halten Sie wichtige Aktionen sichtbar, nicht hinter einem Symbol mit einem übersichtlichen Beschriftungsmenü und löschen Sie die Form für Tanz. Wenn Sie das Hamburger-Symbol verwenden müssen, können Sie es tatsächlich auf diese Weise verwenden, wo es tatsächlich auf der rechten Seite schweben kann, auf der linken Seite, während Sie die Website nach unten scrollen. Also, es ist immer verfügbar, aber es ist nicht wirklich aufdringlich. Also, es ist ziemlich cool. Aber auch das wichtigste ist, das nützlichste Muster, das wir ständig verwenden , ist das, das wir Menü und Suchmuster nennen. Es spielt keine Rolle, wie viel primäre Navigation Sie haben, und es spielt keine Rolle, wie komplex Ihre Schnittstelle innerhalb Ihrer Website ist. Vielleicht haben Sie Tabs und Akkordeon, vielleicht alles vermischt. Was Sie immer tun können, ist es tatsächlich auf diese einfache Menü- und Suchansicht zu bringen, wo Sie das Menü haben und außerhalb der Leinwand sein können, wenn Sie viele Elemente haben, oder es könnte einfach zwischen dem Logo und dem Inhalt gleiten, wenn es nur fünf oder sechs ist. Dann haben Sie die Suche, und dann erlauben Sie Menschen zu suchen. Was auch immer Sie in Ihrer Schnittstelle haben, na ja, Sie können einfach die Ausrichtung manchmal ändern, wenn es Tabs sind, könnte es immer noch Tabs sein. Dann, das horizontale Akkordeon, wird es in vertikale Akkordeon verwandelt werden. Tatsächlich ist das Akkordeon in vielen, vielen Szenarien die goldene Kugel. Wenn Sie nicht wissen, was Sie tun sollen, versuchen Sie es mit Akkordeon. Aus irgendeinem seltsamen Grund funktioniert es immer fast überall. Eine andere häufige Sache, die Sie beachten sollten, ist, wenn Sie diese Off-Canvas haben, immer mit diesem unbequemen Bereich enden, weil Sie einige Elemente zeigen können, so ziemlich alle Elemente in großer Ansicht, aber Sie können nicht viele Elemente in der kleineren Ansicht, also was passiert dazwischen? Dazwischen endet man sehr oft damit, nichts zu zeigen, obwohl man könnte. Also, was, wenn Sie tatsächlich diesen verfügbaren Speicherplatz sinnvoll nutzen, und das ist, was der Wächter tut. Jetzt hat The Guardian 13, 14 Elemente, die in großer Ansicht angezeigt werden und dann hatten sie diese alte Schaltfläche. Sie können auch klicken und dann Informationen über alle anderen Navigationsoptionen erhalten , die Sie haben. Aber sie priorisieren, was wichtig ist, was mehr Verkehr zu ihnen antreibt und diese Elemente werden in diesem nach diesen Verkehrsprioritäten von links nach rechts aufgelistet . Also, die wichtigsten sind stark verwendeten Abschnitte sind immer verfügbar, und sie können so viel wie möglich zeigen, wann sie können und wenn Sie zeigen müssen, um alles andere zu sehen, können Sie tatsächlich alles andere sehen. Es ist eigentlich das gleiche, was Google tut. Google Docs, weil es seltsam wäre, nur ein paar Symbole zuerst zu zeigen, und dann haben Sie ein Hamburger-Symbol, um alle von ihnen zu zeigen, es macht einfach keinen Sinn. Also, das funktioniert sehr gut. Das letzte, was tatsächlich ziemlich gut funktionieren kann, ist vielleicht über komplexere Navigationen wie diese nachzudenken, wo Sie viele Filter haben, was hier wirklich gut funktionieren könnte, ist eigentlich die Abschnitte, die Sie entwerfen müssen, in diesem Fall ein paar Filter für vielleicht eine E-Commerce-Website. Versuchen Sie, den Inhalt allein zu betrachten, extrahieren Sie die Bedeutung und gestalten Sie sie neu. Also, wenn Sie darüber nachdenken, na ja, Sie könnten ein paar Filter haben , vielleicht ist es eine Marke, vielleicht ist es Farbe, Dinge wie diese. Also, Sie können es tatsächlich in Stücke, in Tabs, und präsentieren Sie sie unten, drei von ihnen, so dass die Leute, wenn Sie auf sie klicken, können sie tatsächlich drei, vier Elemente auf einmal bekommen und sie können navigieren Sie mit ihnen. Es macht nur viel mehr Sinn. Eine andere Sache, die in diesen Szenarien wirklich gut funktionieren kann , ist dieser Ansichtsmodus-Ansatz , der ihn ein wenig weiter entfernt nimmt. Nun, die Idee ist, Off-Canvas-Muster zu verwenden, aber auch mit diesem Ansichtsmodus-Ansatz, wenn Sie tatsächlich gekapselte Ansichten haben können. Also, Sie haben den Inhalt auf der Rückseite und gleichzeitig haben eine Ebene der Navigation auf der rechten Seite, oder auf der linken Seite, natürlich, abhängig von Ihrem Design. Was in vielen Szenarien überraschend gut funktionieren kann, hier ist es auf Krebszerfall getan, wo Sie tatsächlich ein paar Navigationselemente haben und es kann leicht navigieren und den Inhalt zur gleichen Zeit sehen. Sie können es natürlich auch in komplexeren Szenarien wie in einer Kasse hier haben, wo hier auf cottonbureau.com wenn Sie einen Artikel in den Warenkorb legen möchten und Sie auschecken möchten, Sie tun Check-out und alles in diesen gekapselten Ansichten wieder außerhalb der Canvas ist. Es kann wirklich hilfreich sein. Also, was können wir tun? Nun, wir können über die Navigation in Zwiebel-Layern nachdenken, zuerst die Suche hinzufügen, über primäre Navigation, sekundäre Navigation, vielleicht Akkordeons, Dinge wie diese, aber nie, wahrscheinlich keine gute Idee sich tatsächlich zu bewegen über die dritte Ebene der Navigation hinaus. Halten Sie die Tasten in der Nähe und öffnen Sie sie an der gleichen Stelle . Wenn die Benutzer also tatsächlich auf das Symbol klicken, um die Schublade zu öffnen, können sie es sofort schließen. Wenn Sie viele Elemente in der Navigation angezeigt haben, denken Sie über dieses Menü und Suchmuster mit Off-Canvas nach. Es funktioniert so ziemlich überall. Zur gleichen Zeit können wir es auf Priorität plus Muster erweitern, was eigentlich noch besser ist, wenn man bedenkt, dass Sie einige wirklich wichtige Call-to-Action-Schaltflächen haben könnten , zum Beispiel einen Aufruf zu Action-Links, die sie behalten müssen überall. Sie haben ein paar Elemente, die Sie einfach in den Inhalt mit der Menü-Taste zwischen dem Logo und dem Inhalt schieben können. Es ist wirklich eine gute Idee, wichtige Aktionen sichtbar zu halten , und wenn Sie eine sehr komplexe Navigation haben, könnten Sie in Betracht ziehen, tatsächlich ein paar Registerkarten zu haben, versuchen Sie, diese Komplexität, die Sie haben, in etwas zu reduzieren mehr überschaubar, um überschaubare Chunks. Auch, weil wir größere Bildschirme haben, denken Sie darüber nach, dass Bedienelemente am unteren Rand Ihres mobilen Bildschirms zugänglich sind, nicht unbedingt oben, weil manchmal diese oberen Steuerelemente können wirklich schwer zu treffen sein, während die unteren sind viel, viel einfacher zu treffen. Vor diesem Hintergrund können Sie tatsächlich eine Art von Navigation erstellen, die bemerkenswert gut über verschiedene Bildschirme funktioniert und das Interface nicht überfüllt anfühlt. Nun, da wir eine Vorstellung davon haben, was mit der Navigation zu tun ist, können wir zu einigen kleinen kleinen Icons übergehen und sicherstellen, dass sie auch reagieren. 5. Ikonografie: Nun, im Navigationsbereich, haben wir über das Hamburger-Symbol gesprochen und dann wissen einige Leute vielleicht nicht wirklich, was dieses Symbol bedeutet. Also, die Auswahl eines Symbols ist sehr wichtig. Aber was zählt, ist auch, wie man dieses Symbol anzeigt, oder? Und hier kommt das Konzept der responsiven Ikonographie ins Leben. Denn wenn Sie tatsächlich mit einem Designer darüber sprechen, woran sie tatsächlich gedacht haben, wenn sie tatsächlich ein Symbol entwerfen oder entwerfen, werden sie immer über den Sweet Spot sprechen, diesen Bereich, in dem sie ausgewählt haben, um die -Symbol zuerst. Kein Wunder, wenn Sie dieses Symbol abskalieren oder das Symbol nach unten skalieren, sieht es nicht so scharf oder so gut aus, oder? Also, nur weil ein Bild skalierbar ist, bedeutet es nicht, dass es lesbar sein wird, und die meisten visuellen Elemente haben diesen perfekten Pfeil, perfekte Größe, für die sie entworfen wurden. Nicht nur Symbole, sondern so ziemlich jedes visuelle Element. wir das im Hinterkopf behalten, müssen wir vielleicht überlegen, das zu tun, oder? Art der Dinge die Ebene der Treue für unsere Symbole basierend auf dem Ansichtsfenster-Bildschirm oder der Höhe anpassen . Nun, Sie könnten gut denken, dass dies in vielen Szenarien nicht wirklich notwendig ist , wie warum würden Sie sechs, sieben verschiedene Illustrationen erstellen, um eine Art einzigartige Erfahrung für all diese Bildschirme zu schaffen? Nun, Sie brauchen es vielleicht nicht für all diese Visuals, alle Symbole, aber es gibt einen spezifischen Anwendungsfall mit wirklich, wirklich wichtig zu werden , und das ist Branding. Denn sehr oft haben Sie ein Logo, das viel Platz einnimmt, wirklich wertvollen Druckraum auf einem mobilen Gerät nimmt und es für einige gute Materialien reserviert, die nicht wirklich darauf achten wollen, weil sie für den Inhalt kamen, Richtig? Also, was machst du dann? Nun, du könntest wirklich das Niveau der Treue anpassen. Vielleicht haben Sie drei verschiedene Ansichten oder drei verschiedene Designs für Ihr Logo, und dann entscheiden Sie, wann Sie was setzen, um den Platz zu reduzieren, der für die Anzeige des Logos benötigt wird. Also, schieben Sie den Inhalt nach vorne, damit Sie ihn immer besser sehen können. In der Tat, viele Szenarien, könnte man denken, gut diese Art von Reduktion Logo ist wirklich schwierig, weil Sie verlieren eine Menge Details und das Logo ist wirklich wichtig für eine Marke, aber in vielen Fällen ist es einfach nicht, dass überhaupt schwierig, denn je mehr Sie vereinfachen, desto zeitloser wird es, und es wird immer noch erkennbar sein, wie Sie in diesen Szenarien sehen können. Was sind die praktischen Techniken, die Sie bei der Gestaltung dieser Logos verwenden können? Nun, Sie können über den Detailgrad nachdenken, Sie können über die Dicke der Linien nachdenken, oder Sie können über die Texte oder die Umrisse des Textes nachdenken, oder was genau gesagt und wie Sie es entwerfen, die Textur und solche Dinge. Sie können auch über die Position und die Struktur nachdenken. Wenn Sie also ein Symbol haben und einen Text darunter haben, möchten Sie vielleicht tatsächlich darin nachschauen und einige der Elemente neu positionieren , damit sie nicht so viel vertikalen Raum einnehmen. Natürlich haben wir auch so etwas wie kreisförmigen Text um Ihr Logo herum. Nun, es geht einfach nicht in kleinen Bildschirmen zu arbeiten, so können Sie tatsächlich genauso gut nur entfernen und versuchen, es ein bisschen einfacher zu machen, und auch denkwürdiger, und die Art und Weise, wie Sie es später bauen würden, setzen Sie einfach verschiedene Icons in SVGs hellen und möglicherweise nur ein paar Medienhinweise innerhalb von SVG verwenden, um bestimmte Bildschirme gezielt zu gestalten, um bestimmte Bildschirme zu gestalten. Nun, das ist, was wir mit dem eigentlichen Symbol tun können , aber wirklich müssen wir über die Position ein bisschen mehr nachdenken, denn in diesem wirklich einfachen Beispiel hier, was ich tun kann, wählen Sie, aber auch wo setzen Sie es? Wenn Sie also ein paar Akkordeon haben , setzen Sie das Symbol rechts oder links vom Text? Oder welches Symbol würden Sie tatsächlich auswählen, würden Sie einen Plus- oder Pfeil nach unten nach rechts verwenden? Das ist irgendwie wichtig. Nun, die gute Nachricht ist, dass die Jungs die die Studie leiteten, herausgefunden haben, dass so ziemlich jeder versteht, was es bedeutet , also kannst du einen Text links , rechts, Symbole links und rechts haben. Die Leute bekommen es, aber die Leute klicken auf verschiedene Bereiche. Die Heatmap wird also sehr unterschiedlich sein, je nachdem , wo Sie Ihr Symbol platzieren und nicht nur die Heatmap, sondern auch die tatsächliche Abschlusszeit der Aufgabe wird ebenfalls unterschiedlich sein, und dann sprechen wir nicht über ein paar 100 Millisekunden. Hier beträgt der Unterschied etwa 1,5 Sekunden zwischen der mit der meisten Zeit oder der geringsten Zeit, also ist es wirklich wichtig. Also, was machen wir hier? Nun, was wir herausfinden, ist, dass die Art, wie das Symbol auf der rechten Seite platziert ist, es wird nur dazu neigen, auf das Symbol und nicht auf den Text zu klicken, jetzt ist das wirklich wichtig, und alle Optionen mit Symbolen auf der rechten Seite führte zu einer langsameren Aufgabe Fertigstellung, obwohl es nicht bedeutet, dass es geht, nicht in unseren Szenarien funktionieren wird, auch nicht in unseren Szenarien funktionieren wird, tut mir leid. Was es bedeutet, ist, wenn wir tatsächlich ein Symbol auf der rechten Seite setzen, stellen wir besser sicher, dass das wirklich, wirklich groß ist , denn sonst werden die Leute nicht in der Lage sein, darauf zu klicken. Wir können natürlich auch die tatsächliche Dicke und die Stile ändern , während wir schweben und es tatsächlich sehr körnig anpassen, und das ist, was wir heute tun können, ohne viel Zeit im Code verbringen zu müssen. Also, das sind alle Optionen, die wir haben, um unsere Symbole ein wenig besser auftauchen zu lassen. Also, was können wir tun? Jetzt können wir Symbole für ein klares Aussehen vereinfachen, damit sie wirklich besser und schärfer aussehen. Wir können vertikalen Platz sparen, indem diesen kleinen Trick verwenden, bei dem wir tatsächlich einen Teil des Logos neu positionieren, so dass es nicht so viel vertikalen Raum einnimmt. Spezielle Bereiche vor allem, wenn wir wissen, dass sich die Benutzer auf das Symbol konzentrieren, wie sie es in Sub-Drop-Downs tun, wenn sie in der rechten Seite platziert werden, wählen Sie größere Symbole, so dass sie leichter zu tippen, und offensichtlich sind wir müssen ein Symbol in Abhängigkeit vom Kontext rechts auswählen. Und möglicherweise sogar vermeiden Sie Symbole ganz, wenn wir können, wenn wir etwas ein bisschen klareres wie Menü anstelle eines Hamburgers haben müssen. - Richtig. Dies sind die Dinge, die Sie tun können, um Ihre Symbole ein wenig reaktionsfähiger zu machen, um sicherzustellen, dass sie funktionieren und überall schön aussehen. Nun, da wir uns tatsächlich mit Visuals befasst haben, können wir vielleicht zur Struktur übergehen und über etwas so Phantasievolles wie Tabellen reden, als nächstes. 6. Tabellen und Kalender: Strukturmetalle natürlich auch. Jetzt sprachen wir über visuelles Design, wir sprachen über Navigation und es gibt Möglichkeiten den Inhalt in einem Layout neu zu mischen, um sicherzustellen, dass er funktioniert, aber einige Komponenten sind nur schwieriger zu bewältigen. Denken Sie an Komponenten mit festen Beziehungen wie Tabellen oder Kalendern. Sie können nicht einfach voran gehen und sie bewegen und auf wenig Raum drücken. Möglicherweise müssen Sie vollständig überdenken, wie Sie den Inhalt darstellen , der tatsächlich in Ihrer Tabelle oder in einem Kalender verbleibt. Das Problem ist sehr oft Tabellen sehen einfach schrecklich aus und arbeiten schrecklich auf mobilen Bildschirmen. Sie müssen die ganze Zeit hineinzoomen und verkleinern und Sie können nicht den gesamten Tisch sehen und es ist wirklich, wirklich ärgerlich. Also, wie gehen wir mit ihnen um? Jetzt gibt es eine einfache Lösung. Die Sache ist, dass Sie nicht unbedingt alle Spalten in Ihrer Tabelle ständig anzeigen müssen, oder? Als Designer könnten Sie sich für okay entscheiden, in diesem speziellen Szenario werde ich diese Spalten priorisieren. Ich werde erkennen, was wichtig ist, und ich werde es an den Benutzer schieben und ihnen erlauben, tatsächlich auszuwählen, was sie sehen möchten. Vielleicht wollen sie sowieso nicht alles auf einmal sehen. Lassen Sie sie also auswählen, was sie sehen wollen, und wenn sie alles gut sehen wollen, dann können Sie das tatsächlich tun. Dann haben Sie diese iframe-Erfahrung, die wir vermeiden möchten. Aber standardmäßig treffen wir tatsächlich Entscheidungen darüber, wie viele Spalten angezeigt werden, und diese Erfahrung wird voll reagieren. Sie werden dieses Beispiel erweitern, indem Sie eine Anzeige alle Schaltfläche und Anzeige-Taste haben. Was es für den Benutzer vielleicht ein bisschen einfacher macht, in der Tabelle zu navigieren und was ich wahrscheinlich auch nur standardmäßig aktiviert hätte , ist der sogenannte Fokusmodus. Wo Sie dem Benutzer tatsächlich helfen können, auf eine bestimmte Zeile oder eine Spalte oder eine Zelle zu tippen, und markieren Sie den Bereich, in dem sie sich tatsächlich befinden. Denn vor allem, wenn Sie alle Spalten sehen möchten, könnten Sie in diesem riesigen Ozean von Daten landen , durch die Sie navigieren müssen, und Sie könnten den Überblick verlieren. Vielleicht wissen Sie nicht genau, welche Ziffern Sie betrachten. Also, das ist wirklich, wirklich wichtig und nützlich. Also, hier ist ein praktisches Beispiel dafür. Wo die Muse-Anwendung Implikation für das Rating-Personal war und was sie taten, ist, na ja, sie haben ein Datenraster erstellt, das genau dieses Muster verwendet. Also, Sie können auf der rechten Seite hier sehen, na ja, Sie können einfach auf eine Zelle tippen und es den Inhalt ändern, die tatsächlichen Daten ändern. Gleichzeitig können Sie auswählen, was Sie sehen möchten, welche Optionen oder welche Spalten Sie sehen möchten, und Sie werden sie sehen. Die Auswahl wird standardmäßig von Designern vorgenommen. Manchmal möchten Sie vielleicht einen festen Header haben. Das funktioniert auch, weil Sie möglicherweise eine große Tabelle in der großen Ansicht und dann eine kleine Ansicht haben, die Sie vielleicht über Wasser halten möchten. Also, Sie könnten es intakt halten. Sie können also tatsächlich voran gehen und es anzeigen, während alle anderen Elemente diese iframe-Erfahrung haben werden. Manchmal kann man auch etwas ganz anderes machen. Also, hier haben Sie eine Datentabelle mit vielen Daten und Sie könnten wählen, einfach voran zu gehen und vielleicht visualisieren. Warum nicht? So könnten Sie einen Tisch in etwas ganz anderes verwandeln. Vielleicht ein Diagramm oder ein Diagramm. Es macht Sinn, aber in diesem Fall würde ich nur voran gehen und nicht nur Diagramm auf der kleinen Ansicht und nur Tabelle auf großer Ansicht anzeigen, sondern dem Benutzer tatsächlich erlauben, auszuwählen, was er sehen möchte. Einige haben vielleicht standardmäßig eine Diagrammansicht mit Tabling auf Mobilgeräten und dann der Desktop mit einer Tabelle mit dem Graph-Link, mit dem Benutzer die Ansicht ändern können. Ein sehr häufiges Muster ist ein Optionsfeldmuster. Wann immer Sie eine Matrix von zwei oder mehr spezifischen Dingen haben , die Sie möchten, dass der Benutzer auswählen kann, na ja, Sie enden immer mit dieser Art von Muster. Wo Sie zum Beispiel in Kinos haben, haben Sie möglicherweise noch einen Titel der Sendung, und Sie haben möglicherweise Timings oben. In diesem Fall, wenn Sie nur ein wenig Platz sparen möchten, können Sie nur bis zu den Überschriften ein wenig tun. In diesem Fall sparen Sie in dieser Zeit auf diese Weise tatsächlich ziemlich viel Platz, indem Sie nicht viel tun, um ehrlich zu sein. Nun, eine andere Sache, die Sie natürlich tun können, ist mit Kalendern umzugehen. Jetzt haben Kalender eine ganz andere Geschichte. Du kannst nicht einfach sagen, dass ich freitags fallen werde, weil sie keine Rolle spielen. Nun, eigentlich tun sie das. Also, was machst du? Nun, in diesem Fall, denken Sie etwas abstrakter darüber nach, wie Sie tatsächlich entwerfen. Denken Sie über den Inhalt nach, der tatsächlich in dieser Tabelle aufgeführt ist. Extrahieren Sie es, gestalten Sie es neu , mischen Sie es neu und legen Sie es speziell für den mobilen Raum entwickelt. Also, hier haben wir diesen Tisch mit Tagen auf der Oberseite und der Zeit auf der linken Seite und Sie können einfach voran gehen und tatsächlich einfach nur in etwas ganz anderes verwandeln. Vielleicht zwei Ansichten. Eine wäre eine kleine Tabelle und die andere wird eine Datenbank sein, denn das ist offensichtlich viel einfacher, reaktionsschnell zu werden. Also, Sie brauchen nicht, um diese Eins-zu-Eins-Erfahrung zu haben. Es kann sich sehr unterscheiden. Oder jede andere Art von Tisch. Sie können so ziemlich die gleiche Logik anwenden. Hier haben Sie AFC und NFC Liga für NFL Playoffs und offensichtlich, Sie haben eine Menge Details und Sie können nicht einfach fallen einige Spalten. Es ist einfach nicht so, wie es funktioniert. In diesem Fall können Sie einfach versuchen, etwas mit der Größe zu spielen und die Topographie ein wenig zu ändern, Polsterung, Modellierung und so weiter. Irgendwann funktioniert es einfach nicht mehr. Also, Sie können umdrehen, offensichtlich. Flip einfach das Layout ein wenig zeigt AFC Liga standardmäßig, was sie tun, und dann mit einem Schieberegler gleiten über in die NFC-Liga. Aber es könnte genauso gut vielleicht eine Reihe von Akkordeons verwenden und vielleicht einfach das Niveau der visuellen Treue hier ändern. Sie müssen nicht die ganze Zeit alle Logos zeigen , und so könnten Sie etwas Platz sparen. Also, was kannst du tun? Nun, Sie können wichtige Spalten priorisieren und Spalten löschen , die Sie nicht benötigen, und Benutzern erlauben, auszuwählen, was sie sehen möchten. Sie können auch für die Navigation festlegen, damit die Benutzer zwischen den Tabellenteilen in Fragmenten und Teilen wechseln können. Sie können Inhalte visualisieren und Überschriften neu positionieren. Kippen Sie sie ein wenig, um ein wenig vertikalen Raum zu sparen. Sie können auch nur eine geringere Treue für wirklich komplexe Tabellen wie Turniertabellen, aber genauer gesagt, schauen Sie sich immer den Inhalt an, extrahieren Sie die Bedeutung davon und versuchen Sie, ihn neu zu verwenden oder neu zu verpacken und zu entwerfen es richtig für den mobilen Raum. Denn das ist wirklich eine sehr oft sehr andere Sache als das, was Sie auf dem Desktop haben. Also, im Hinterkopf, haben Sie ein paar Strategien, um mit Tabellen umzugehen. Also, gehen wir weiter zu Web-Formularen als nächstes. 7. Webformulare (Teil I): Also, von all den Komponenten, die wir haben, sind einige lächerlich ärgerlich. Wenn ich über nervig spreche, spreche ich von Web-Formularen. Denn beide Formulare sind sehr mühsam und sie sind extrem schwierig und wirklich nur frustrierend auf einem mobilen Gerät auszufüllen. Also, wie kann ich sie besser machen? Vor allem, über responsive Design im Allgemeinen nachzudenken. Nun gibt es offensichtliche allgemeine Strategien, die wir ständig im Auge behalten müssen, und sie sind wirklich nicht so schwierig. Nun müssen wir zunächst Beschriftungen über den Eingabefeldern platzieren, nur weil wir wirklich diesen schönen linearen Pfad erstellen, dem ihr folgen könnt , ohne nach links, nach rechts scrollen zu müssen, um herauszufinden, was das Label tatsächlich ist. Nun, manchmal platzieren wir tatsächlich das Platzhalterattribut, was manchmal ein bisschen schwierig sein kann. Nur weil Sie vielleicht nicht wissen, was sie tippen und ob sie gestört oder abgelenkt werden. Also, vielleicht ist es wirklich gut oder eine schlechte Idee, wirklich einfache Etiketten über die Felder zu setzen. Eine andere Sache ist, dass es manchmal wirklich schwierig ist, visuelles Feedback zu bekommen, man weiß einfach nicht, ob die Daten übermittelt wurden oder nicht. Aktivieren Sie also immer, um die Schaltfläche sofort beim Klicken zu deaktivieren. So haben Benutzer sofort ein wirklich gutes visuelles Feedback. Wir können natürlich auch Inline-Formularvalidierung verwenden. Aber wir können es an verschiedenen Orten verwenden. Vor allem, wenn es um das Passwort geht, ist es besser, es tatsächlich zu haben, nachdem ein Feld übrig ist, das anzeigt, dass der Benutzer seine Eingabe eingereicht und beendet hat. Manchmal könnte es eine gute Idee sein, es auch unterwegs zu machen, oder? Es hängt davon ab. Deaktivieren Sie auch die automatische Korrektur, da sie wirklich Fehler verursachen kann. Deaktivieren Sie es für E-Mail-Adressen, da sonst Sie mit sehr seltsamen Eingaben enden könnten. Deaktivieren Sie die automatische Groß-/Kleinschreibung E-Mail zum Beispiel, oder in anderen Bereichen, die es nicht unbedingt benötigen. Verwenden Sie natürlich auch das entsprechende Tastaturlayout. Ich meine, es hat keinen Sinn, eine E-Mail-Tastatur herauszuziehen, wenn Sie eine Seitenleiste verwenden, um Ziffern in Ihre Telefonnummerneingabe einzugeben , richtig? Also, seien Sie vorsichtig damit. Leider sind die meisten Formen jedoch immer noch extrem langweilig. Dieser, bei dem Sie tatsächlich die linke Klammer in die Eingabefelder eingeben müssen, um die Daten zu übermitteln. Andere sind einfach böse wie diese. Wir haben getan, um sicherzustellen, dass wir bequem zwischen Dänemark und Finnland in der Zählerauswahl, die Sie wählen müssen, wenn Sie nicht wollen, um die Versicherungskosten zu erhöhen, oder einfach nur so langweilig wie diese. Aber am wichtigsten ist, das Problem ist, dass diese Formen sie nicht wirklich über die tatsächliche Interaktion denken, sie denken über Struktur. Dies ist ein schwieriger Teil, weil das Ausfüllen eines Formulars wie dieses auf dem mobilen Gerät wirklich schwierig ist. Benötigt viel Aufwand, eine Menge Wasserhähne, und es ist wirklich nicht bequem, es zu tun. Also, was, wenn wir darüber nachdenken, bessere Formen ein bisschen anders zu gestalten. Vielleicht mehr so, wo, auf der linken Seite haben Sie eindeutig eine Form. Es hat eine wirklich klare, einfache, uns bekannte Plattformstruktur und es fühlt sich auch wie Form an. Also, wenn Sie dies entwerfen, entwerfen Sie ein Formular. Aber auf der rechten Seite entwerfen Sie eine Schnittstelle. Es ist eigentlich der gleiche Eingang. Der einzige Unterschied ist, dass Sie als Benutzer benötigt werden, um zu bearbeiten, klicken Sie auf bestimmte Elemente, um sie zu bearbeiten, oder? Dann, wenn Sie fertig sind, klicken Sie einfach auf Start statt fortzufahren. Also, der richtige fühlt sich ein bisschen mehr wie Schnittstelle und viel weniger wie eine Form an, richtig? Es fühlt sich an wie Fortschritt und nicht wie Langeweile, was eine große Sache ist. Nun ist type form auch einer jener Ansätze, die Ihnen helfen, genau das zu erreichen. Fühlen Sie sich ein bisschen mehr wie eine Schnittstelle und weniger wie ein Formular. Also, in diesem Fall, na ja, die Idee ist, die ganze Zeit auf die Eingabe zu konzentrieren. Also, anstatt die Maus tatsächlich zu bewegen oder überall die ganze Zeit zu tippen, sollten Sie sich nur auf die Eingabe konzentrieren, also tippen Sie. Wenn Sie dann von einem Feld zum anderen wechseln möchten, drücken Sie einfach die Eingabetaste oder wählen Sie A, B, C, D. Sie verwenden kein Auswahl-Dropdown-Menü weil Sie sie nicht alle offensichtlich auf dem Desktop verwenden, Sie verwenden einfach Tastenkombinationen die ganze Zeit überall. Wenn Sie von der linken nach rechts, vom vorherigen zum nächsten Eingabefeld wechseln möchten , können Sie das mit den Steuerelementen am unteren Rand tun, oder? Dann im Allgemeinen, wenn Sie diese wirklich langweiligen, lästigen, Strukturelemente wie ein Eingabefeld vermeiden können, können Sie dies tun, indem Sie eine intelligentere Eingabeelemente verwenden. Zum Beispiel, wenn Sie nur zwei Optionen wie ein- und ausblenden haben, können Sie einfach einen Schalter dafür verwenden, so dass Benutzer einfach tippen und zwischen den beiden wechseln können. Wenn Sie so etwas wie eine Preisklasse haben, richtig, mit einem Minimum mit maximalem Wert, offensichtlich ist die Folie eine viel bessere Wahl dafür. Dann auch, wenn Sie dem Benutzer nur einen bestimmten Wert, einen diskreten Wert wie 1, 2, 3, 4, 5, auswählen lassen möchten , warum listen Sie nicht einfach alle mit segmentierten Steuerelementen auf und lassen Sie die Benutzer einfach darauf tippen. Die letzte, die auch sehr wichtig ist, vor allem, wenn es darum geht, zu überprüfen und Dinge wie diese, nur ein einfacher Stepper, so dass Benutzer erhöhen oder verringern den Wert, zum Beispiel, die Menge der Produkte oder Kopien eines Buches, das sie kaufen wollen, Dinge wie diese. Wirklich einfach zu machen und wirklich, wirklich hilfsbereit. In der Tat können Schieberegler tatsächlich einen langen Weg gehen. So können Sie verschiedene Arten von Schiebereglern, einen einzelnen Schieberegler und einen doppelten Schieberegler, kontinuierliche Schieberegler, diskrete Schieberegler und so weiter und so weiter verwenden. Kontinuierliche Schieberegler sind diejenigen, bei denen Sie sagen, unbestimmte Werte haben. Preistemperatur und diskrete Schieberegler von Dingen wie Kleidungsgröße. Es ist immer eine gute Idee, kontinuierliche eine beizubehalten und zu verwenden und keine Nullergebnisseite zu verhindern. Sie können Ihre Schieberegler tatsächlich erweitern, um mehr als nur einen Wertebereich anzuzeigen. Vielleicht zeigt tatsächlich tatsächliche Meta-Daten über die Anzahl der Optionen, die Sie in dieser bestimmten Preisklasse haben. Also, hier wissen Sie genau basierend auf der Höhe der Balken, wie viele Optionen Sie haben. Es könnte eine gute Idee sein, vielleicht auch einen Kontext in Bezug auf Text hinzuzufügen. Auch die Art und Weise, wie Sie Ihren Schieberegler verteilen, könnte auch eine Rolle spielen. Achten Sie darauf, dass Sie immer ungefähr die gleiche Menge an Artikeln in jeder Preisklasse haben. Auf diese Weise sollten Sie sicherstellen, dass Benutzer nie mit Null Ergebnisseite alle zusammen enden werden , sehr ähnlich wie Airbnb, wo Sie genau diese rechtliche Bar auf der Rückseite haben. Also, um hier zusammenzufassen. Nun, im Grunde können wir versuchen, alle Formen ein wenig weniger wie Formulare und ein wenig mehr wie tatsächliche Schnittstelle mit diesen traditionellen Schnittstellenelementen wie Schiebereglern wie Umschalter, wie Schalter, die tatsächliche Schnittstelle mit diesen traditionellen Schnittstellenelementen wie Schiebereglern wie Umschalter, wie Schalter, tatsächlich wirklich weg von Eingabefeldern und wählen Sie Balken, wählen Sie Dropdowns alle insgesamt. Je weniger wir sie verwenden, desto besser wird die Erfahrung sein. Also, das ist nicht so schwierig, aber es kann wirklich einen großen Unterschied machen. 8. Webformulare (Teil II): Also, nur ein paar kleinere Änderungen, wie wir im letzten Teil gesehen haben, können wir sicherstellen, dass sich Ihr Formular vielleicht nicht wirklich wie ein Formular anfühlt, vielleicht eher wie eine Schnittstelle. Sie sind nur sehr klein, aber es gibt einen kleinen Unterschied. Nun, wenn Sie wirklich alles zusammen setzen, könnten Sie mit einer Schnittstelle wie dieser enden. Also, Sie wollen ein paar ausgewählte haben- große wirklich ausgefallene Auswahl-Drop-Downs, die wirklich bequem zu tippen sind. Möglicherweise haben Sie ein paar segmentierte Steuerelemente, wie dieses. Sie könnten am Ende mit wirklich prominenten Tasten, die so einfach zu klicken sind, so dass der Wechsel zwischen der Kasse fühlt sich nicht wirklich wie eine große Sache mehr. Es ist bequem, aber am Ende haben Sie immer noch diese Eingabefelder, und es gibt nicht viel, was Sie dagegen tun können. Sie müssen immer noch Daten eingeben. Ja, Sie können diese schicken Optionsfelder verwenden, wie sie es hier tun, aber am Ende fühlt es sich immer noch an wie Arbeit. Vielleicht, wenn wir Eingabefelder ganz vermeiden können, würde es funktionieren, aber wir müssen Daten eingeben. Werfen wir einen Blick auf einige andere Beispiele, wie Sie diese Eingabefelder tatsächlich vermeiden können, und machen sie ein bisschen besser, wenn Sie sie verwenden müssen. Also, einer von ihnen ist natürlich, wenn Sie irgendwelche sekundären Elemente, Adresse, optionale Adresse oder einen optionalen Telefoneingang oder was auch immer haben, wenn Sie wissen, dass Sie sie nicht unbedingt brauchen, zeigen Sie sie standardmäßig nicht an. Verwenden Sie etwas wie progressive Offenlegung, wie mit dem Plus-Button oder was auch immer, das es tatsächlich anzeigen würde, lassen Sie sie auf dem Klick erscheinen, weil Sie sie nicht wirklich brauchen. Eine andere Sache ist, dass Sie tatsächlich eine Menge sensibler Daten haben, nach denen Sie fragen. Warum erklären Sie nicht den Benutzern, warum Sie diese Daten benötigen. Ob es sich um Telefoneingang oder E-Mail-Adresse oder irgendetwas handelt, geben Sie einfach einen kleinen Hinweis, um ihnen wirklich zu versichern, warum Sie diese Daten tatsächlich benötigen, denn es könnte sehr gut sein, dass sie die Gründe, warum Sie es brauchen. Eine andere Sache ist die E-Mail-Adresse. Jetzt wissen wir, dass E-Mail-Adresse eines der kritischen Elemente ist, die Sie immer im E-Commerce haben und es ist wirklich wichtig zu haben. Aber wenn Sie eine falsche E-Mail-Adresse haben, ist es, als ob der Kunde nie existiert. Also, vielleicht können Sie die Eingabe tatsächlich ein bisschen einfacher machen. Wenn Benutzer also etwas eingeben, können Sie vielleicht etwas wie Autocomplete, Auto-Vorschlagen, mit den gängigen E-Mail-Anbietern bereitstellen , die laut Ihrer Datenbank stark von Benutzern verwendet werden. Vielleicht ist es Facebook, vielleicht ist es Gmail. Aber wenn jemand tatsächlich in Gmail tippt, ist es wirklich viel einfacher für sie zu korrigieren, weil sie einfach Tab, nicht wirklich eine große Sache. Das ist wirklich, wirklich bequem. Die andere Möglichkeit, es tatsächlich zu verbessern, besteht darin, Benutzer zu bitten, ihre E-Mail zu bestätigen , kurz bevor sie ihre Bestellung absenden oder bevor sie ihr Feedback-Formular einreichen, nur um sicherzustellen, dass sie tatsächlich die E-Mail-Adresse angegeben haben. Da das eigentliche Problem darin besteht, dass die meisten Benutzer, wenn sie aufgefordert werden, die E-Mail-Adresse in das Eingabefeld erneut einzugeben, Kopiereinfügung verwenden. In der Tat, 60 Prozent der Benutzer nach Baymard Forschung, konsequent kopieren Sie die E-Mail-Adresse einfügen, anstatt die E-Mail neu eingeben. Also, es ist keine gute Idee, es tatsächlich zu haben, weil die meisten Leute es sowieso nicht benutzen. Also, wenn sie an erster Stelle einen Fehler gemacht haben, werden sie es wiederholen, weil sie sowieso einfügen. Entfernen Sie also das E-Mail-Verifizierungsfeld ganz. Du brauchst es nicht. Stattdessen könnten Sie vielleicht Inline-Autocomplete verwenden, indem Sie Inline wirklich überprüfen, ob es richtig ist, oder einfach eine Überprüfungsseite haben, auf der es gefragt wird. Sehr oft haben Sie Situationen, in denen Sie Platzhalter haben , um Platz zu sparen, vor allem in mobilen. Nun, das Problem mit Platzhaltern ist, wenn Leute anfangen zu tippen, verschwinden sie. Also, das ist eine große Sache, weil sie tatsächlich Kontexte verlieren. Also, Sie können tatsächlich beides haben. Also, SP wird mit der Eingabe beginnen, Sie können diesen Titel tatsächlich ein wenig nach oben schieben. Also, es ist nicht so prominent, aber es ist immer noch verfügbar, so dass es nicht verloren geht. Diese Eingaben oder diese Beschriftungen können auch reaktionsschnell sein. Also, wenn Sie keinen Platz haben, um es oben zu zeigen, können Sie sie tatsächlich auf der rechten Seite oder wann immer zeigen. So können Sie wirklich flexibel sein. die gleiche Weise wie mit Textarea. All diese kleinen Dinge können wirklich zusammenfassen, also, wenn zusammengefasst, machen Sie einen Unterschied. Also, hier, wenn Sie tatsächlich mit der Eingabe beginnen, erhöht sich die Textbereichsgröße automatisch. Sie müssen also keine acht oder 10 Zeilen für Textarea reservieren. Sie können dabei flexibler sein. Reduzieren Sie erneut die Gesamthöhe des Formulars. Wenn es um das Geburtsjahr geht, nun, manchmal brauchen Sie nicht das genaue Datum, vielleicht brauchen Sie nur das Jahr. Also, fragen Sie nach Jahr. Sie benötigen nicht zwei zusätzliche Eingaben für den Monat und für das Datum. Das gleiche gilt auch für Länderauswahl, die endlos sein kann, fast endlos, fühlen sich wie endlos, wo Sie vielleicht am Ende einfach nicht wissen, wo Sie Ihr Land zu finden. Wenn Sie aus den Niederlanden kommen, oder aus den Niederlanden oder Holland oder vielleicht wird Ihr Land in der Länderauswahl priorisiert. So können Sie einfach Benutzer bitten, die ersten zwei, drei Zeichen ihres Landes einzugeben . Das ist nicht wirklich eine große Sache und wenn sie tippen, können Sie die Synonyme im Rücken erkennen. Es spielt also keine Rolle, ob sie CH, Schwei oder die Schweiz tippen. Oder wenn sie DE, Deutschland oder Deutschland eingeben, kann man erkennen, dass es sowieso dasselbe ist, und es ist viel einfacher auszufüllen. In der Tat, wenn man über Länder spricht ist es manchmal nicht sehr notwendig, nach Städten überhaupt zu fragen, weil man nach einer Postleitzahl fragen kann. In der Tat hier ist eine kleine Studie, die zeigt, dass einmal, wenn Sie Benutzer zuerst nach Postleitzahl fragen und dann Stadt und Staat automatisch vorfüllen, im Durchschnitt die Abschlussrate viel höher ist, weil Sie es richtig vorhersagen werden basierend auf Bibliotheken wie ZippoPotam.us, zum Beispiel. Also, während Sie mit der Eingabe beginnen, können Sie während der Eingabe Ihrer Postleitzahl tatsächlich die Stadt und den Bundesstaat vorfüllen , damit Benutzer sie nicht vollständig eingeben müssen. Natürlich ist der König der Eingabefelder, was die Krone der Webformulare hier ist, die Kreditkarteneingabefelder. Manchmal sind diese Formulare wirklich schwer einzugeben weil sie Sie fragen, ob es sich um MasterCard oder Visa handelt, und Sie haben viele Eingabefelder, die Sie durchgehen müssen. Was ist, wenn wir alles in einem zusammenfassen? Also, in diesem Fall fragen Sie einfach, was ist Ihre Kreditkarte? Bitte geben Sie Ihre Kreditkartennummer ein, Sie sehen nur an der, Hinweis unten. Dann fangen Sie einfach an zu tippen. Nun, man kann tatsächlich im Rücken erkennen, was es ist, ob es Visa oder MasterCard oder irgendetwas anderes ist. Sobald Sie diese Eingabe haben, na ja, ist es irgendwie zur Seite gleiten, und es tippt weiter. Beachten Sie also, dass die Benachrichtigung am unteren Rand diese Änderung hinweist. Also, Sie wissen, was Sie eingeben, und wenn Sie etwas haben, das Art von Feedback, visuelles Feedback erfordert , können Sie auch das Symbol ändern. Hier in diesem Fall bietet es EV und dann schließlich Postleitzahl, und irgendwann, wenn alles korrekt ist, das ist in Ordnung, das ist grünes Licht. Es ist viel einfacher ein Eingabefeld, das einfach funktioniert und es ist wirklich nicht so eine große Sache. Nun, was bedeutet das? Nun, wenn Sie komplexe Interaktionen vermeiden können, wenn Sie komplexe, wirklich lästige Eingabefelder vermeiden können , wie zum Beispiel Auswahl-Dropdown-Menü, tun Sie das bitte. Im Allgemeinen, wenn Sie einem Benutzer ermöglichen können, irgendeine Art von Eingabe mit einem Tippen oder einem Klick bereitzustellen , suchen Sie das. Wenn Sie vereinfachen können, natürlich, wenn Sie einige formale Elemente vereinfachen können, tun Sie das. Bevorzugen Sie Optionsfelder, Umschalter und Schieberegler, nur weil sie auf einem mobilen Gerät so viel einfacher zu manipulieren sind. Wenn Sie bestimmte Felder, Eingabefelder sekundäre Felder nicht benötigen, müssen Sie diese nicht sofort anzeigen. Zeigen Sie sie als progressive Offenlegung. Verwenden Sie ein Floating-Label-Muster, um tatsächlich nie den Kontext dessen zu verlieren, was Benutzer eingeben. Auch weil die meisten Leute E-Mails sowieso kopieren und einfügen, vermeiden Sie einfach die E-Mail-Verifizierung, verwenden Sie etwas wie Inline-Check oder bitten Sie sie später, die E-Mail-Adresse zu überprüfen. Wenn Sie langwierige Eingaben haben, denken Sie über einfachere gängige Möglichkeiten nach, diese Komplexität tatsächlich in etwas überschaubareres zu reduzieren. Nutzen Sie auch die Postleitzahl. Sobald Sie nach der Postleitzahl gefragt haben, können Sie viele Daten davon vorfüllen. Im Allgemeinen sollten Sie einfach eine Eingabe anstelle von verwenden, da Sie in den meisten Fällen nicht wirklich ein Dropdown-Menü benötigen, besonders für Dinge wie Länderauswahl, Sie brauchen es einfach nicht. Auf diese Weise können Sie nur durch die Verwendung dieser kleinen Grundregeln sicherstellen, dass, wenn Sie ein Eingabefeld haben, es wirklich einem Zweck dient, und Ihre Formulare werden am Ende wirklich viel kürzer sein, und die Benutzer hoffentlich wird viel glücklicher sein. 9. Anpassen von Mikro-Komponenten (Teil I): Also, einige der Komponenten, über die wir gesprochen haben , werden in so ziemlich jedem Projekt verwendet werden, in jedem reaktionsfähigen Projekt. Denken Sie an Navigation oder sogar an Tabellen. Aber einige von ihnen werden vielleicht überhaupt nicht oder sehr selten verwendet. Nun ist das Problem jedoch, wenn Sie nicht darüber nachgedacht haben, wie eine bestimmte Komponente in den Kontext passt, könnten Sie wirklich schwierige Situationen haben. Einige dieser Komponenten sind also wirklich schwierig zu verwalten, sobald alles andere eingestellt ist. Werfen wir einen Blick auf einige dieser Mikrokomponenten, die Sie vielleicht benötigen, aber Sie brauchen wahrscheinlich nicht die ganze Zeit. Wenn Sie also über die Komponenten auf einer sehr strategischen Ebene nachdenken, ist dies eine gute Art, darüber nachzudenken, als Ebenen von Erfahrungen. Als Patty Toland sprach in einem für Vorträge für die Filament-Gruppe, sagte sie, dass wir über das Entwerfen von responsiven Komponenten in Bezug auf die Schichtung verschiedener Ebenen von Erfahrungen und Funktionalität nachdenken können . Wir beginnen als funktionale Ebene und ebnen für jede Komponente und für alle Komponenten eine verbesserte Ebene auf. Also fangen wir mit etwas wirklich Grundlegendes an, das wir eigentlich nur brauchen. Wir beginnen mit der Geschwindigkeit, schlank, stellen sicher, dass die Web-Komponente, die wir erstellen, schlank , schnell ist und sie wirklich stark optimiert ist. Darüber hinaus stellen wir sicher, dass es eine zugängliche voll funktionsfähige über die gesamte Palette von Bildschirmen und Geräten. Sobald wir das haben, können wir tatsächlich anfangen, über die Struktur zu sprechen und wie die Komponente tatsächlich ändert, abhängig von den Rastern, Haltepunkt, von der Reihenfolge und dem Layout. Und dann tatsächlich, wenn wir das haben, wenn wir genau wissen, was das reaktionsfähige Verhalten dieser Komponente ist, können Sie über die Dekoration in Bezug auf Stil oder Logo-Marke, Farben, Schriftarten und so weiter denken . Denken Sie also immer zuerst an diese Pyramide , wenn Sie tatsächlich eine benutzerdefinierte Komponente entwerfen. Nehmen wir an, Sie müssen eine Timeline entwerfen. Nun, Timeline ist keine große Sache, na, normalerweise haben Sie nur eine Timeline und Sie bleiben daran. Es kann horizontal sein, es kann vertikal sein. In diesem Fall können wir tatsächlich ein wenig mit der Topographie spielen, ein wenig mit der Schriftgröße und dem Padding. Da sollten wir diese schöne Zeitlinie behalten, und wir könnten wahrscheinlich alles fernhalten, aber dann ist das eigentliche Leseerlebnis vielleicht nicht gut, weil die Ausrichtung zu kurz sein wird. Also, in diesem Fall können Sie es einfach in etwas anderes verwandeln , wie eine Übersicht über jene Elemente, die genauso gut funktionieren. Wenn es um Grafiken oder Diagramme geht, ist es nicht so schwierig oder im Grunde sind es nur Medienelemente, so dass Sie sie einfach in den mobilen Raum drücken können. Aber Sie müssen sicherstellen, dass diese Tortendiagramme oder was auch immer Sie verwenden, immer noch groß genug sind. Also müssen Sie sie tatsächlich größer machen, nicht klein für mobilen Raum. Und jetzt werden all diese Interaktionen natürlich noch an Ort und Stelle sein müssen. Und auch zur gleichen Zeit, manchmal haben Sie diese animierten Elemente. So könnten Sie die Dicke von Linien und wie sie gezeichnet werden, je nachdem, was Sie entwerfen möchten, wirklich überdenken . Nun, hier ist eine nette Fallstudie von Globe und Mail, von Teehan Lax , der Global Mail entwirft, und sie sprechen viel über die Designs von Finanzkomponenten, speziell für Börsen. Und wieder über Infografiken und Diagramme nachzudenken, und sie werden tatsächlich alle verschiedenen Ansichten und auch speziell Beschriftungen betrachtet , weil in dieser Position, wenn für Grafiken, Position von Beschriftungen und die Farbe der Etiketten kann dramatisch wichtig sein. Weil Sie sicherstellen möchten, dass diese Infografiken sowohl auf einem Bildschirm mit schlechter Qualität als auch auf einem Bildschirm von guter Qualität gut aussieht . Denken Sie also nicht nur an die Dicke der Linien, sondern auch an Etiketten und wo Sie sie positionieren, und natürlich muss sich das Niveau der Treue ändern. Manchmal können Sie genau das gleiche zeigen, sowohl auf mobilen als auch auf dem Desktop, und auch die Farben zu wählen, zum Beispiel die Hintergrundfarben, kann es einen großen Unterschied machen. Karten im Allgemeinen sind eine große Sache, denn wenn Sie eine Karte haben, und Sie zum Beispiel die Karte und die CG-Karte als Filter verwenden, gibt vielleicht als Filter an, wie Sie hier tun, und es funktioniert gut auf dem Desktop, aber es funktioniert nicht wirklich auf Handy überhaupt, wegen eines fetten Fingers Problem sind Sie nicht in der Lage, auf einen bestimmten Zustand zu tippen, besonders wenn seine Größe nicht groß genug ist. Es ist einfach wirklich eine große Sache. Indem wir zu dieser Schichtung zurückkehren, über die wir am Anfang gesprochen haben, warum fangen wir nicht wirklich mit etwas Funktionalem an, wie ein Auswahl-Drop-down-Menü, wie Sie hier sehen können? Und dann stellen Sie Standards und verbessern Sie es zu etwas, das für größere Bildschirme ein bisschen sinnvoller ist. Weniger wie eine tatsächliche Karte, auf der Sie tatsächlich tippen und auswählen können, was Sie auswählen möchten. Mit Karten im Allgemeinen können Sie tatsächlich ein wenig weiter gehen und wenn Sie einen wirklich kleinen Bereich haben , den Benutzer auswählen möchten, lassen Sie sie einfach mehrere Länder gleichzeitig auswählen und dann eine kleine Liste auffordern Sie alle, damit sie tatsächlich das bestimmte Teil auswählen können, das sie ausgewählt haben möchten. Eine wirklich kleine Sache, aber kann in der Tat ziemlich, ziemlich nützlich sein. Aber Sie müssen die Karte nicht ständig im Vordergrund laden. Da Sie wissen, dass Sie viele Karten in Ihrem Design haben, können Sie damit enden, dass die Benutzer tatsächlich wieder direkt in die Karte scrollen, was wahrscheinlich nicht das ist, was Sie wollen. Also, in diesem Fall, was Sie tun können, ist tatsächlich ein Bild bereitzustellen, nur ein Bild der Karte, einen Screenshot der Karte, wenn Sie möchten, mit einem Link zu Google Maps oder einem beliebigen Karten-Service, den Sie verwenden. Dann, wenn Sie wissen, dass der größte Bildschirmplatz verfügbar ist, Bildschirmbreite verfügbar ist, können wir tatsächlich den tatsächlichen iFrame anzeigen. Richtig. Aber Sie müssen es nicht die ganze Zeit im normalen Raum anzeigen und die Karte bedingt laden, wenn Sie es brauchen, und nur einen Link anzeigen, wenn Sie ihn nicht benötigen. Das Gleiche gilt auch für Leuchtkästen, denn sehr oft klicken Sie auf ein Bild, oder tippen Sie auf ein Bild auf der Seite, und dann haben Sie ein Bild und tatsächlich die kleinste Größe, obwohl es ein Leuchtkasten. Also, zeigen Sie das Bild einfach in einer kleinen Ansicht. Richtig. Mit einem Link zur tatsächlichen großen Ansicht, so dass Benutzer zoomen und verkleinern können, wenn sie möchten, und dann die bedingte Lichtbox bedingter anzeigen und laden können. Nur wenn Sie es brauchen, weil es wirklich nicht die ganze Zeit notwendig ist. In Ordnung. Also, was können wir daraus lernen? Nun im Allgemeinen, denken Sie über diese Pyramide den ganzen Weg nach, denken Sie über die Geschwindigkeit und den Zugang, die zuerst kommen, stellen Sie sicher, dass Sie dort gut sind, und dann können Sie tatsächlich Maßstab und Stil später verwenden , um wirklich zu erstellen schöne reiche reaktionsfreudige Erfahrungen. Nun ist das Umdrehen oder Ändern der Richtung in den meisten Fällen nicht gut genug. Ich meine, die Anpassung von Desktop auf Handy, was leider ist, was wir die meiste Zeit tun werden, kann ziemlich schwierig sein. Es ist nicht nur die Anpassung des Layouts, denken Sie darüber nach, den Grad der Treue zu ändern, indem die verschiedenen Ansichten ändern, da es sich um eine Infografik jeder benutzerdefinierten Komponente handelt. Auch wenn es um Karten und Leuchtkästen geht, denken Sie über das bedingte Laden dieser iFrames nach, und wenn Sie nicht sicherstellen können, dass sich der Benutzer bei der Auswahl einer kleinen Eingabe wohl fühlt , rufen Sie einfach die Listenansicht beim Tippen, damit sie bei Bedarf die Eingabe angeben können. Aber im Allgemeinen können Sie, sobald Sie all dies im Auge haben, sicherstellen, dass alle diese Komponenten, wenn sie eintreten, effektiv und effizient behandelt werden können. Benutzer müssen also nicht warten, und sie haben immer noch sehr gute Erfahrung beim Navigieren auf Ihrer Website. 10. Anpassen von Mikro-Komponenten (Teil II): Im vorherigen Abschnitt haben wir über ein paar visuelle Mikrokomponenten gesprochen, oder? Dinge wie Karten, Dinge wie Leuchtkästen, die tatsächlich ein Medienelement in ihnen haben. Also, das macht sie tatsächlich ziemlich präsent. Gleichzeitig gibt es viele strukturelle Komponenten, die möglicherweise nicht so prominent positioniert sind. Nun, es kommt darauf an, wie wir in einer Sekunde sehen werden, aber das kann tatsächlich viel mehr Arbeit erfordern, um im Auge zu behalten, besonders wenn man an Paniermehl denkt, all diese kleinen Details. Also, schauen wir uns einige von ihnen an. Also, ich glaube wirklich, dass, wenn ein Designproblem reagiert werden kann, irgendwann, es reagiert gelöst wird. Das Problem ist, dass wir dazu neigen, zu übersehen. Übersehen Sie etwas so großes wie prominentes wie ein Karussell. Richtig? Nun haben wir über die Grafik in der vorherigen gesprochen, aber hier ist wirklich wichtig, die tatsächliche Struktur des Karusells. Nun, sehr oft, wenn wir nur von der tatsächlichen Präsentation abstrahieren, enthält es ein paar Fehler und ein paar Punkte in der Mitte, die für Fortschritt stehen soll, Art von welchem Schritt Sie gerade sind, und sehr oft sind sie wirklich schlecht gestaltet. So ist dies wahrscheinlich eines der schlimmsten Beispiele, wo Sie ein wirklich prominentes großes Bild in der Mitte haben, und dann diese kleinen Punkte, die Ihre Navigationselemente sein sollen. Richtig? Auf diese Weise navigieren Sie. Dies ist einfach nicht sehr praktisch, weshalb viele Designer neigen dazu, sich von Karussells zu entfernen. Zum Beispiel kann dies hier als Karussell dargestellt werden, und es basiert oft auf Daten, auf soliden Daten. Denn wenn man sich anschaut, wie viele Leute eigentlich Karussell benutzen, um genauer zu sein, wie viele Leute tatsächlich Bild zwei, drei, vier usw. sehen , wird man mit einer überraschend niedrigen Zahl enden, richtig? Es geht um zwei bis drei Prozent für Position 2, Position 3, Position 4, Position 5, was wirklich keine große Sache ist. Das sind nicht viele Leute. Offensichtlich hilft das Drehen eines Karussell in einen zufälligen Bildgenerator, Scrollen durch die Positionen, Scrollen durch die Positionen, nicht wirklich, nur weil die Leute nicht damit navigieren. So können wir es besser machen, vielleicht wie Amazon es tut, wo statt nur Pfeile und Punkte zu zeigen, etwas Kontext bieten. Warum sollten die Leute darauf klicken? Stellen Sie etwas wie eine Miniaturansicht oder einen Text bereit, was es den Benutzern wirklich einfacher macht, voranzugehen und auf eines dieser Felder zu klicken , um mehr Informationen über ein Produkt, ein Angebot oder was auch immer Sie haben zu erhalten . Es ist sehr hilfreich, nur einen Kontext zur Verfügung zu stellen. Eine andere Sache ist Paniermehl, also sollte ich Schritte voranschreiten. Wenn Sie sich im Desktop auschecken, ist es vollkommen in Ordnung, alle Schritte zu zeigen, die der Benutzer durchlaufen muss. Aber manchmal kann ich es einfach auf einfachen Text reduzieren , wie Sie hier in der linken oberen Ecke sehen können. Wir zeigen nur Schritt eins von fünf und nennen den Schritt, und das ist so ziemlich es. So einfach kann es sein. Wenn der Benutzer also zum zweiten, dritten usw. wechselt , ändern Sie einfach den Text entsprechend. Wirklich keine große Sache. Nun können diese Fortschrittsschritte wirklich so einfach sein wie die vorherigen, oder ein bisschen schwieriger. Hier, ist, wo Sie tatsächlich scrollen Sie den Text nach unten. Sie können tatsächlich einen Kontext darüber bereitstellen, wie weiter das ins Lesen gekommen ist, oder beenden Sie diesen Abschnitt eines Artikels zu lesen, was irgendwie wirklich sehr hilfreich ist. Eine andere Sache in einer ganz anderen Einstellung ist E-Commerce-Checkouts. Nun, hier wieder, Sie haben Ihre Einkaufskarte, und dann, wie Sie tatsächlich zur Kasse gehen, was Sie sehen, ist, dass, anstatt tatsächlich mit diesen Fortschrittsschritten, sie als Tabs fungieren. So können Sie zwischen Versand und Abrechnung wechseln und sehr schnell überprüfen, weil sie tatsächlich so ziemlich wie Schritte handeln, was auch sehr praktisch ist. Sie müssen nicht wirklich auf dem Text allein zeigen, wenn Sie können. Das gleiche gilt für, wenn Sie eine Flugauswahl oder so etwas haben. Paniermehl müssen hier nicht wie Paniermehl aussehen. Zum Beispiel können Sie wieder Sachen wie einen kleinen Umschalter haben, mit dem Sie anzeigen können, um alles in der gesamten Ansicht zu sehen. Standardmäßig könnten Sie jedoch eine sehr einfache kompakte Ansicht haben, ohne den Benutzer überhaupt ablenken zu müssen. Eine weitere sehr wichtige Sache im Auge zu behalten ist, dass, neigen wir dazu, über vertikale Medien Karussell vergessen. Jetzt sind vertikale Karussell oft sehr wichtig, weil die Breite des Bildschirms, die Breite des Layouts kann wirklich unterschiedlich sein. Weil Sie vielleicht nur einen großen Bildschirm haben, einen kleinen Bildschirm, aber die Breite allein sagt nicht wirklich, ob es sich um ein mobiles Gerät handelt oder nicht. Während die Höhe, könnte ein sehr guter Indikator sein, dass es tatsächlich ein mobiles Gerät oder kein mobiles Gerät ist. Also, denken Sie über mobile Vasco Musik Ansichten. Vor allem, wenn Sie so etwas wie diese Navigation haben, wo Sie ein paar Elemente erscheinen. Nun, wenn Sie auf ein Symbol klicken, ist dies nicht sehr skaliert, da dies irgendwann nicht mehr sichtbar ist. Es wird sehr schwierig sein zu navigieren. Also, vielleicht könnten Sie tatsächlich darüber nachdenken, Akkordeon basierend auf der Höhe zu verwenden. Also, wenn Sie wissen, dass es nichts von Höhe zu zeigen gibt, können alle Elemente tatsächlich noch mehr verwenden, und Art von Show wie der MoorLink, und zeigen Sie die Abschnitte in Teilen. Es kann sehr hilfreich sein. Zeichnen Sie jetzt die Vergleiche. Offensichtlich haben Sie auf dem Handy nicht viel Platz. Also, was musst du tun? Nun, die einzige Möglichkeit, die Sie haben, ist tatsächlich die volle Höhe für den Vollbildmodus im Grunde zu verwenden. Klicken Sie als Benutzer auf Vergleichen, besetzen Sie einfach den gesamten verfügbaren Platz mit dieser Folienbox, um es einfacher für sie zu vergleichen. Auch Fußnoten und Seitennoten und Magazinlayouts. Also, sehr oft endet man mit unbequemen Fußnoten irgendwo am unteren Rand, wo man da rüber springen muss, um zurück zu springen, oder Nebennoten, die tatsächlich irgendwie zwischen zwei Absätzen gedrückt werden. Nun, vielleicht könnten Sie etwas wie Inline-Randnotizen verwenden, oder wie Sie hier sehen können, wenn Sie auf dieses Symbol tippen, können Sie tatsächlich Informationen über die spezifische Randnotiz erhalten, und es könnte auf der unten oder es auf der Oberseite erscheinen könnte, ist es wirklich an Ihnen. Aber versuchen Sie, es in Kontext zu stellen. Sie müssen nicht dazu bringen, dass die Leute von einem Ort zum anderen springen. Dasselbe gilt auch für PDFs, da PDFs wirklich aufdringlich sind. Ich meine, Sie müssen die gesamte PDF-Datei herunterladen, wenn Sie Seite 18 lesen möchten. Das ist nicht wirklich cool. Also, vielleicht könnten Sie tatsächlich mit Ihren Thumbnails zeigen. Also, wenn Leute die PDF-Datei herunterladen möchten, denke ich, dass sie tatsächlich voran gehen und herunterladen können, aber es kann ein Humax sein, also könnte es eine Weile dauern. Zur gleichen Zeit, nur so etwas wie wirklich kleine Miniaturansichten, wirklich stark optimierte Thumbnails Wenn Leute also zum Beispiel nur auf Seite 17 gelangen wollen, können sie mit 50 oder 40 Kilobyte dorthin gelangen, ohne Laden Sie das gesamte PDF herunter. Also, Karussells sind nicht schlecht. Sie unterscheiden sich nicht viel von Akkordeons, nur etwas anders in der vorherigen Offenbarung. Sie brauchen jedoch Kontexte, also geben Sie einen Kontext, einige aussagekräftige Details, so dass die Menschen geneigt sind, von einem Bereich zum anderen zu gehen. Breadcrumbs können Tabs oder Akkordeons sein, oder so einfach wie Klartext. Verwenden Sie vertikale Medienabfragen, weil sie oft sehr guter Indikator sind, dass Sie ein mobiles Gerät haben. Zeigen Sie Produktvergleiche im Vollbildmodus, denn es gibt keinen anderen Weg wirklich. Anstatt Seitennotizen auf die Seite oder tatsächlich Fußnoten unten zu setzen , können Sie sie vielleicht direkt im Inhalt inline, und zur gleichen Zeit, was Sie mit vielen PDFs zu tun haben. Bieten stark optimierte Thumbnail, einige Leute tatsächlich nicht sehr schnell auf sie zugreifen können. Das kann auch einen langen Weg gehen. Richtig. Als nächstes werden wir über Bilder sprechen, insbesondere über die reaktionsschnelle Skalierung nach oben. Wie wir den gesamten verfügbaren Platz nutzen können, um das Beste für unsere Layouts zu machen. 11. Responsive Upscaling: Wenn wir uns mit Responsive Design beschäftigen, haben wir in der Regel diese einfache Absicht, vom Desktop-Raum auf mobilen Raum zu gehen. Wir bewegen uns zwischen diesen beiden Räumen. Während zur gleichen Zeit, ist es wirklich wichtig für uns zu berücksichtigen, nicht nur in den mobilen Raum selbst, die offensichtlich entscheidend und wichtig ist, sondern auch diese großen Displays, große Bildschirme Platz. Also, wir optimieren eine Menge von Desktop bis Mobile, aber wir sollten vielleicht auch vom Desktop zu diesem großen Raum optimieren, weil sie uns viele Möglichkeiten bieten , Erfahrungen zu machen, denn wir werden viel besser nutzen. Also, lassen Sie uns einige dieser Wege sehen. Nun, wie Mike Pick in einem seiner Artikel Analyst auseinander schrieb „Indem wir die letzten Bildschirme umarmen, können wir die Möglichkeit haben oder die Möglichkeit nutzen, innerhalb einer größeren Falte zu arbeiten den Benutzern gleichzeitig mehr Inhalte zu präsentieren, Lektion Scrollen auf längeren Seiten, und schaffen Sie eine umfangreichere und umfangreichere Benutzererfahrung.“ Nun, das bietet viele Vorteile, denn wenn Sie über die allgemeine Ansicht nachdenken, die Sie haben, wenn Sie auf eine zufällige E-Commerce-Website gehen, ist dies, was die Erfahrung fühlen wird. Es gilt nicht nur für Sie mit viel Leerraum überall, es gilt nicht nur für E-Commerce, es wird auch in Zeitungen sehr ähnlich sein. Hier haben wir MSNBC, die vollständig reagiert von diesem Auto-Mobile, aber nicht so sehr, wenn Sie weiter oben gehen überhaupt. Das gleiche gilt auch für quartz.com, wo wir vielleicht dieses wirklich prominente große Bild an der Spitze haben, und eine sehr winzige Spalte, in der sich der Inhalt befindet. Also, vielleicht können wir es etwas besser machen. Also, ein paar Ideen für E-Commerce speziell von BioMart Instituten in einem der Artikel des Smashing Magazins vertreten sind, und die Ideen sind sehr einfach, und sie sind auch wirklich einfach zu implementieren. Nutzt nur den Raum wirklich, das ist so ziemlich es. Wenn Sie also fünf Elemente pro Zeile anzeigen können, zeigen nur fünf Elemente pro Zeile an, während Sie die Anzahl der Elemente erhöhen, die Sie in Ihrem Raster anzeigen können. Geben Sie auch etwas wie sehr wichtige wichtige Dinge wie Bestellung, so Übersicht über Bestellungen oder Zugriff auf Ihr Konto, oder Support-Hotline. Sehr subtil auf eine sehr subtile Weise, aber irgendwo auf der rechten oder auf der linken Seite, so dass Benutzer immer Zugriff darauf haben können. Wenn Sie so etwas wie ein wirklich prominentes Bild haben, das Sie hervorheben möchten, anstatt sie klein im Raster zu machen, lassen Sie es einfach brechen Sie sie Raster und zeigen Sie sie wirklich prominent. Auch die Schaltfläche „In den Einkaufswagen“ oder „Kasse“ könnte wirklich wichtig sein, um im Auge zu behalten, zu schauen, immer verfügbar zu halten. Filter, wir sprachen über Füllungen in Rechtsstreitigkeiten Abschnitte, ein Abschnitt, in dem, wenn Sie eine Menge von Filtern haben, können Sie möglicherweise Tabs verwenden, um sie am unteren Rand des Bildschirms zu präsentieren, so dass, wenn Benutzer auf sie klicken, sie haben ein wenig Poperze, aber wenn Sie eine Menge Sicherheit haben, können Sie einfach die Filter zeigen. Also, hier können Sie einen Farbfiltertyp, Größenfilter und so weiter haben. Nur da der Benutzer die Seite nach unten scrollt, können sie tatsächlich Zugriff auf Filter haben, da die Filter mit ihnen scrollen. Das Gleiche gilt für kürzlich angesehene Artikel und In den Einkaufswagen auf der Überprüfungsseite, und auch Bestellübersicht, die in der mobilen Ansicht nur in der Regel auf den unteren Rand des Patienten springt. Es sollte alles anwesend sein. Nun, die Idee ist, nun, was ist, wenn Sie eine starke wie schwere visuelle Präsenz haben? Also, wenn Sie ein visuelles Hintergrundbild haben, was Sie immer tun können, ist nur ein wenig zu erweitern. In einer mobilen Ansicht haben Sie möglicherweise kein Leerzeichen, um es anzuzeigen, aber Sie vergrößern sicherlich die Ansicht. Also, Sie können einfach den Raum verwenden, verwenden Sie eine Farbe, um es zu zeigen.Dies ist ziemlich das gleiche über alle Hintergrund neben, die Hintergrund haben. Sie können den Hintergrund immer ein wenig erweitern, so dass er sich nicht so verloren fühlt. Nun, es gibt einige interessante Beispiele dafür, was Sie tatsächlich damit machen können. Einer meiner Favoriten ist UNIQLO, weil sie anstatt nur ein paar Elemente zu haben, eine eingeschränkte Anzahl von Elementen pro Zeile angezeigt wird, eine eingeschränkte Anzahl von Elementen pro Zeile angezeigt wird,tatsächlich nach oben skalieren. Manchmal haben Sie vielleicht ein, zwei, aber manchmal haben Sie vielleicht sechs, sieben, acht usw., was Sinn macht, es verwandelt eine Produktübersicht in eine Produktwand, was nützlich ist. Furtado, Fahrrad Furtado, sie zeigen tatsächlich ein großes, prominentes Bild von einem Produkt, das sie verkaufen. Möglicherweise müssen Sie das Produkt nicht so groß zeigen, aber es geht in die richtige Richtung, sie nutzen nur den verfügbaren Platz. Die große Unzufriedenheit ist ein Magazin, und sie haben ein schönes Magazin Rasterlayout, aber sie nutzen auch immer den gesamten verfügbaren Platz. Also, ein Bild wird wirklich groß in der großen Ansicht sein, das cool wird sein, die Topographie wird sein, es wird sich sehr Magazin wie fühlen, weil es keine maximale Breite insgesamt gibt. Wenn Sie scrollen, oder gehen Sie nach unten und reduzieren Sie die Größe, während sie immer noch die gleiche Erfahrung haben, natürlich nur die Bilder ein bisschen kleiner. Aber es ist wirklich schön, Konsistenz darin zu haben, wie sie klein werden, wie sie groß werden. Manchmal haben Sie vielleicht eine wirklich komplexe Illustrationen , die einfach zu skalieren nach oben und unten. Also, hier haben Sie all diese Illustrationen und es spielt keine Rolle, welche Höhe oder Breite Sie haben, vielleicht haben Sie Ende Vollbild-Anzeige, es wird nur die ganze Zeit angezeigt, macht Sinn, obwohl die Topographie könnte ein bisschen größer sein. Aber mein Lieblingsbeispiel ist bei weitem das Kreml-Website-Beispiel, wo, wenn Sie viel Platz haben, nun, Sie haben dieses Dual-Panel-Layout, wenn Sie möchten, wo Sie ein Suchergebnis auf der linken Seite haben, und haben die Inhalt dieser Seite auf der rechten Seite, was Sinn macht, es ist nützlich. Zur gleichen Zeit, wenn Sie nicht über den Platz, wird nur ein Overlay sein. Also, Sie müssen es schließen und dann gehen Sie zum nächsten. Aber wenn Sie Platz haben, ist es wirklich schön zu erkennen, zu navigieren, denn hier können Sie einen öffnen, und dann kann es eine andere öffnen, und Sie können wirklich diese Doppelansicht haben. Also, es macht Sinn. Nun, um zusammenzufassen, was können wir tun? Zwar gibt es natürlich ein paar Optionen. Zuallererst müssen wir das Design erweitern, um den Bildschirm zu füllen. Andernfalls könnte sich der Benutzer verloren fühlen, wenn Sie viel zu viel Breitbild und links auf der rechten Seite haben, und die Topographie ist klein. Fußnoten und die Randnoten, insbesondere in Magazinlayouts, können tatsächlich auf der linken oder rechten Seite springen, da Sie den verfügbaren Platz nutzen können. Sie können auch mehrspaltige, Multi-Panel-Layouts wie Kreml oder Tradus betrachten . Sie werden Produktraster erweitern, wie UNIQLO, wo Sie nur mehr Produkte anzeigen, wenn Sie Platz dafür haben. Aber vor allem bringen Sie wichtige Aktionen in den Fokus, so Dinge wie In den Warenkorb oder Kasse, wie diese kritischen Buttons, können immer auf eine sehr schöne Art und Weise präsentiert werden, vielleicht subtil, vielleicht nicht so subtil, so dass Benutzer immer Zugriff auf sie haben können, denn wenn Sie das haben, werden sich Benutzer nicht verloren fühlen, und das ist eine wirklich gute Sache. 12. Komplexes Responsive Interface Design: Manchmal wissen Sie also genau, welche Art von Komponenten Sie benötigen. Aber manchmal bekommst du ein Projekt, ein seltsames Projekt, und du musst daran arbeiten. Es erfordert, dass es wirklich kreativ wird und einen Weg findet, wie man Dinge zum Laufen bringt. Nicht etwas, das einfach verrückt sein kann, vielleicht arbeiten Sie plötzlich plötzlich an einem japanischen Projekt mit Sprache, die Sie nicht verstehen, oder vielleicht müssen Sie ein sehr interessantes, interaktives Spiel oder so etwas bauen . Das ist machbar. Aber in beiden Fällen müssen Sie herausfinden, wie Sie arbeiten können, die responsive Schnittstellen erreichen. Manchmal fordern sie nur nach kundenspezifischen Lösungen. Häufiger werden diese Schnittstellen sehr schwierig und sehr komplex und nicht so einfach sein, wie man vielleicht denkt. Also, werfen wir einen Blick auf einige von ihnen. Einer der prominentesten, die verfügbar sind, das ist einfach überall, ist natürlich die Kasse. Wir könnten denken, dass die Kasse ein relativ einfacher Prozess ist, aber es ist nicht, weil es viele Checkout-Berührungspunkte mit dem Benutzer durch zu gehen. Vom Hinzufügen eines Artikels zum Einkaufswagen, zur Überprüfung der Rückerstattungsrichtlinie oder zur Überprüfung der Zahlungsoptionen, Beschlagnahme der Gebotsadresse oder der Lieferadresse, zum Abschließen der Zahlung oder vielleicht sogar zum Feststellen, dass die Autorisierung Fehler, der am Ende nicht funktioniert hat, verlassen Sie den Warenkorb, melden Sie sich an, um die Rechnung schließlich herunterladen, und dann einfach alles fertig und hoffen auf melden Sie sich an, um die Rechnung schließlich herunterladen, das Beste, dass sie das Produkt zu bekommen. Es ist ein langer Prozess und leider, in vielen Szenarien, E-Commerce fühlt sich sehr langweilig und sehr langweilig. Werfen wir einen Blick auf einige Beispiele, wie man es besser macht. Also, hier ist ein schönes Beispiel dafür, für eine wirklich schöne E-Commerce-Erfahrung. Also, ein Dollar-Rasierclub, wo sie nicht so viele Produkte haben, aber sie haben ein paar. Was sie haben, ist eine wirklich einfache Ebene mit einer wirklich einfachen Seite, wo Sie freie Optionen haben, um aus der Desktop-Ansicht zu wählen, und die kleinere Ansicht, na ja, Sie drehen diesen schönen kleinen Schieberegler , den Sie verwenden können, um navigieren Sie zwischen diesen drei Elementen. Dann können Sie offensichtlich einen von ihnen vergrößern und Informationen darüber erhalten, und so weiter und so weiter. Wählen Sie einen Artikel potenziell aus, und dann wird er dem Warenkorb hinzugefügt. Außerdem können Sie immer noch mehr Sachen hinzufügen. Also, hier können wir zum nächsten gehen, wenn wir nichts anderes wollen. Sie können mit nur zwei von einem zurückgehen. Sie können auch die Anzahl der Elemente ändern, die Sie auswählen möchten. Offensichtlich fügen Sie weitere Elemente aus dem Fund hinzu. Siehst du, wie schnell es ist, und siehst du, wie schick es ist? Es ist wirklich schön. Es hatte immer noch diese schöne Einkaufswagenerfahrung, die wie ein Pop-Up ist, wie eine Leuchtbox, aber es ist wirklich wirklich schön. Es kann die Menge wirklich leicht ändern. Es ist nur ein sehr schönes, sehr fokussiertes Erlebnis. Ordnung dann, irgendwann offensichtlich, werden Sie im Warenkorb landen und hier werden Sie die Daten ausfüllen, alle Kreditkartendaten eingeben, ich werde nicht hoffentlich kaufen. Es gibt so wenig, viele kleine Details wie Rechnungsadresse wird die gleiche wie die Lieferadresse sein, und dieser Artikel, das Symbol wird nur verfügbar sein, wenn alles andere korrekt ist. Es ist nur eine sehr schöne Erfahrung für hier in der E-Commerce-Website. Eine weitere ähnliche Erfahrung ist hier von Harris, wo Sie sehr ähnliche Erfahrung haben, aber es einfach wirklich eng, wirklich sauber und schön. Also, ausgehend von der Erschwinglichkeit für Schaltflächen, und wie Sie den Artikel in den Warenkorb und die Pick-Größe hinzufügen, es ist alles nur so konzipiert, wie es sein soll. Es muss nicht so schwierig sein. Während der Versandoptionen und so weiter so weiter, so dass die Zahlung ist nicht wirklich eine große Sache. Beachten Sie auch, dass zum Beispiel, wenn Sie Fehler beheben möchten, diese Ihnen erlauben, Fehler zu beheben, aber Sie müssen dies nicht tun. Also, es ist eine sehr schöne sehr verzeihende Schnittstelle. Also, wenn Sie ein schönes Beispiel für eine E-Commerce-Erfahrung haben wollen , die wirklich gut funktioniert, schauen Sie sich diese beiden Beispiele an, ich denke, dass sie wirklich gut sind. Aber manchmal haben Sie offensichtlich eine ganz andere Erfahrung, wie Typekit. Denken Sie an jede Schnittstelle, wo Sie viele seltsame Blob von Inhalten in der Mitte der Seite haben, wie diese. Sie haben viele verschiedene Boxen, animierte Boxen tatsächlich, die einige Hinweise oder Informationen Hover bieten. Wenn Sie sich gerade entschieden haben, alles in einer einzigen Seite zu kleben, wird dies wirklich schlecht enden. Es wird nicht schön aussehen, also werden Sie nicht eine schöne Erfahrung damit zu schaffen. Aber was Sie in diesen Fällen immer tun können, ist, diesen Blob von Daten in etwas zu verwandeln, das besser überschaubar ist wie einen Schieberegler. Ich wünschte, wir hätten hier ein wenig umschalten, um zum vorherigen und zum nächsten zu gehen, eine Reihe von Bildern oder Optionen, aber das ist eigentlich Schieberegler, die Sie durch wischen können, wenn Sie möchten, was wirklich schön ist. Es ist eine wirklich einfache Möglichkeit, diese Komplexität zu reduzieren , müssen wir etwas mehr überschaubar in der mobilen Ansicht. Nun, aber manchmal haben sie immer noch etwas wirklich wirklich Weltraum, wie dieses. Also, Sie haben ein kleines Projekt, Management-Projekt, eine kleine Plattform, wo Benutzer in der Lage sein sollen, Tickets für Shows, Events, Stadionaufführungen zu kaufen , was auch immer. Sie wollen nicht nur in der Lage sein, alle verfügbaren Bereiche zu betrachten, sondern auch in der Lage zu sein, in eine bestimmte Reihe zu zoomen, in der sie sitzen wollen, und wählen Sie den Sitz, an dem sie tatsächlich sitzen wollen, vielleicht sogar ein Vorschau darauf, wie es von diesem bestimmten Ort aus aussehen wird. Das hört sich nach einem wirklich komplizierten Thema an. Also, wie würden Sie eigentlich damit umgehen, eine Schnittstelle wie diese zu entwerfen? Wie würdest du es zum Laufen bringen? Nun, Sie werden wahrscheinlich mit etwas wie, Ich weiß nicht, vielleicht einige der Einstellungen, Muster, wo Sie bieten können, fragen Sie uns einfach sagen, welche Preisklasse Sie mögen, welche Art von Sitzen würden Sie bevorzugt. Außerdem gibt es vielleicht spezielle Hot Deals, die in bestimmten Bereichen stattfinden, und so weiter so weiter. Also, am Ende, was Sie tun könnten, ist, dass es hier nicht mehr verfügbar ist. Ich wähle eine dieser spezifischen Optionen, die Sie mögen, die für Sie als Benutzer wichtig sind, oder vielleicht passen einige Filter wie diese und andere Einstellungen an, um diese Komplexität, die Sie anzeigen müssen, wirklich zu minimieren. Oder Sie könnten am Ende mit dem Entwerfen von benutzerdefinierten Komponenten wie diese, wo Sie mit einem interaktiven Gitarren-Taps zu tun haben. Also, offensichtlich, müssen Sie den unterschiedlichen Abstand zwischen den verschiedenen Komponenten neu berechnen , die Sie gerade auf der Seite spielen, auf diesen verschiedenen Registerkarten. Das wird ein Albtraum, aber wenn das machbar ist, denke ich, dass so ziemlich alles machbar ist. Wenn Sie diese verschiedenen Schnittstellen wirklich erkunden wollen, nun, gehen Sie zu japanischen oder chinesischen Websites, denn japanische und chinesische Websites sind wirklich weit voraus, als wir es sind. Wir denken viel über die Optimierung von Desktop bis Mobile nach, aber sie denken viel über die Optimierung Mobile auf Desktop nach, weil sie ohnehin mobile-first sind. Also, wieder, wenn Sie über diesen Blob von Daten nachdenken, oder ob sie eine andere visuelle Sprache haben, na ja, Sie können einfach viel von ihnen lernen. Wie, dieser Blob von Daten verwandelt sich in etwas überschaubares als eine Reihe von Bereichen, blockieren Elemente mit Kundenillustrationen anstelle dieser großen Bilder. Also, es ist irgendwie eine seltsame Richtung, wenn Sie möchten. Das gleiche gilt für diese Seite hier drüben, wo Sie viele Bereiche und auch viele Animationen haben. Selbst die kleinen Infografiken oder Wegesucher, wenn Sie möchten, werden immer noch prominent angezeigt. Sie sind auch ansprechbar. Also, diese Bereiche, die vielleicht nicht so einfach zu entwickeln und zu bauen sind, sind immer noch ansprechbar, was ziemlich bemerkenswert ist. Also, Sie am Ende mit diesen Erfahrungen, und Sie können viel über die Übereinstimmung und die Verwendung von Wasser lernen, und so weiter und so weiter, nur indem Sie dies tun. Was kannst du tun? Nun, Sie können Komplexität abbauen, nur indem Sie versuchen, die Treue zu reduzieren. Sie brauchen nicht die ganze Zeit hohe Wiedergabetreue. Ich kann Sie fragen, was für sie wichtig ist, fragen Sie sie nach ihren Vorlieben, denken über Möglichkeiten, tatsächlich besser für sie präsentiert, so dass sie tatsächlich diese Schnittstelle navigieren können. Sie können im Hinterkopf behalten, was wichtig ist und es für sie priorisieren, wirklich sensible Standardwerte festlegen, Smart Default macht es Sinn. Wenn Sie über diese komplexen Datenblobs nachdenken, denken Sie darüber nach, sie in einen Schieberegler zu verwandeln , der leicht zu navigieren ist. Wenn Sie über E-Commerce-Website nachdenken, stellen Sie einfach sicher, dass Sie diese One-Tap-Regel im Auge haben die ganze Zeit. Also, diese können klicken, fügen Sie einen Artikel in den Warenkorb wirklich leicht, ändern Sie die Anzahl der Artikel, Kasse mit intelligenten Standardeinstellungen wie Festlegen von Adresse, Einstellung der Lieferadresse, gleiche wie Rechnungsadresse, und so etwas. Dies kann wirklich einen langen Weg gehen, und nur erweiterte Verhalten sinnvoll, weil es eine Sache ist, eine Karte zu zeigen, mit Sitzplätzen und wo die Leute tatsächlich ein Ticket finden, wo sie sitzen wollen, aber es ist eine wirklich eine andere Sache, um einen netten Assistenten zu erstellen, der Sie bitten würde, speziell alle Fragen, die es braucht, um eine sinnvolle Ausgabe in diesem zu liefern, und nicht zu viel Ausgabe. Denken Sie also über die Dinge nach und dann muss selbst die komplexeste Schnittstelle nicht das Gefühl haben, dass es wirklich komplex und wirklich schwierig zu navigieren ist. 13. Letzte Gedanken: Nun, das war eine ziemlich Reise. Während wir uns viele verschiedene Komponenten angesehen haben, angefangen von sehr kleinen, irgendwie von wirklich einfachen wie einem Hamburger-Symbol und solchen Dingen zu etwas fortgeschrittenem wie Tabellen und Boxen und Kalendern zu bewegen und wie diese und dann in Richtung etwas wirklich fortgeschrittenes und wirklich komplexes Benutzeroberflächen. Die Frage ist, was machen wir jetzt damit? Nun, offensichtlich bin ich wieder, ich will nur sicherstellen, dass wir hier alle auf dem klaren Weg sind. Ich sehe nicht, dass all diese Techniken, alle Lösungen als endgültige Endpunkte für jedes Design. Ich glaube nicht, dass Sie einfach weitermachen können und es sofort auf Ihr Projekt anwenden und es einfach einen Tag nennen können. Auf diese Weise funktioniert es nicht, da der Kontext in Ihrem Szenario anders sein wird. Aber ich denke, es ist wirklich wertvoll, wirklich nützlich, sich all die verschiedenen Dinge bewusst zu sein, die Sie tun können, wenn Sie auf ein Problem wie dieses stolpern. Also nur um zu wissen, welche Art von Optionen Sie haben, wenn Sie mit dem Kalender zu tun haben, wenn Sie mit Tisch zu tun haben, müssen wir mit all diesen verschiedenen Dingen zu tun. Nehmen Sie also all diese Ideen mit und bauen Sie auf ihnen auf, um etwas Neues zu erschaffen. Und Nachrichten sind nicht wieder der endgültige Standpunkt und das Endergebnis dessen, was Sie bauen sondern der Konversationsstarter für Ihren Designprozess, denn das ist im Wesentlichen so ziemlich es. Das ist es, was es ist. Und offensichtlich haben wir jetzt all diese Techniken an Ort und Stelle. Es macht keinen Sinn, sich einfach hinzusetzen und sie anzusehen, wir müssen sie in die Praxis umsetzen. Lassen Sie uns also versuchen, einen guten Weg finden, um sie tatsächlich in unserem Kontext, im Kontext unseres kleinen Projekts, funktionieren zu lassen . Werfen wir einen Blick auf das Projekt, das Sie auch auf Ihrem Bildschirm sehen können, und denken über all die verschiedenen Komponenten, über die wir gesprochen haben, aber auch diejenigen, die tatsächlich dieses Magazin-Layout ausmachen, über das wir gesprochen haben, richtig. Versuchen Sie, sie zu identifizieren, versuchen Sie, sie richtig zu entwerfen, versuchen Sie sicherzustellen, dass sie sich gut zusammen fühlen und versuchen sie wirklich reagieren in einer Weise, dass es sowohl für kleine Bildschirme, sehr kleine Bildschirme und für größere Bildschirme. Und dann vielleicht tatsächlich neu mischen sie auf eine Weise, die am besten für diese ungeregelten Beiträge funktionieren würde , die wir entwerfen müssen. Nun, wenn ich an Responsive Design denke, tatsächlich, habe ich diese Ansicht dieser Platte Voyager, die 1977 in den Weltraum geschickt wurde , um mit Aliens zu kommunizieren, so dass Aliens uns finden und tun können, was sie wollen mit uns. Das ist eine sehr Art optimistischer Sicht, aber das ist okay. Denn irgendwann musste jemand zu einem visuellen Designer gehen, sie bitten, eine visuelle Sprache zu entwerfen, die den Test der Zeit standhält und für Aliens entworfen wird, richtig. Das ist eine ziemliche Aufgabe, würde ich sagen. Nicht dieses kleine Projekt, das wir entwerfen müssen, ist nicht so kompliziert, wie Sie wissen, wie dieses hier. Aber an diesem Punkt müssen wir darüber nachdenken, was wir zur Unterstützung dieser Person tun würden. Wie man etwas entwirft, das den Test der Zeit für die kommenden Jahre und Jahre standhalten würde. Aber wie sich herausstellt, ist das, was wir heute mit dem Web tun, nicht viel anders, weil wir Schnittstellen herstellen können , wir können Erfahrungen machen, die die Zeit für die kommenden Jahre und Jahre bestehen müssen . Denn wenn sie zugänglich sind, wenn sie schnell sind, wenn sie mit einer echten Art von Wartung im Auge erstellt werden, können wir sie wirklich, wirklich gut funktionieren, sogar in 10 oder 15 Jahren und sowohl zugänglich als auch reaktionsschnell und schön zur gleichen Zeit, so dass unsere Benutzer wirklich, wirklich finden sie entzückend. diesem Hintergrund hoffe ich, dass Sie in der Lage sein werden, diese Schnittstellen zu erstellen. Vielleicht mit ein paar Techniken, die wir geteilt haben und über in dieser Klasse diskutiert. Also, ich möchte Simon C Page für die Titelseite für die Klasse danken. Ich habe irgendwo eine Homer Simpson Situation, ich bin mir nicht sicher, wo. Die Abbildungen des Abschnitts, die animierten Illustrationen wurden von Guillaume Kurkdjian aus Nantes, Frankreich gemacht. Er ist ein erstaunlicher Illustrator. Also, wenn Sie nach einem Illustrator suchen, ist er eine wirklich gute Option, um in Betracht zu ziehen. Ich hatte auch ein Hypercube-Bild in einem der frühesten Abschnitt und ich hoffe wirklich, dass dies hilfreich war und dass Sie jetzt in der Lage sein werden, eine wirklich schöne Schnittstelle zu erstellen , und ich kann es kaum erwarten, Ihre Projekte zu sehen, Skizzen, Wireframes, alles andere im Projektverzeichnis hier. Vielen Dank, dass Sie Teil dieser Klasse sind. Ich hoffe, dass einige der Techniken, die wir heute besprochen haben, die Sie heute entdeckt haben, wirklich hilfreich für Sie waren. Ich freue mich sehr darauf, zu sehen, was Sie mit den Projekten machen werden. Also fühlen Sie sich frei, etwas einzureichen, sei es wie frühe Skizzen, Entwürfe müssen kein richtiges Mockup sein oder was auch immer, Wireframes, was auch immer. Ich werde wirklich glücklich sein, ein Feedback zu geben, aber vielleicht können wir eine oder zwei Techniken entdecken, die wirklich hilft oder helfen wird , einige lästige Dinge loszuwerden, die wir manchmal noch im Web haben. Wie Formen, zum Beispiel oder so ziemlich alles andere. Also, ich freue mich sehr darauf, zu sehen, was euch einfallen wird und wenn ich es habe, kann ich euch einen Rat geben, wenn wir sowieso helfen können, werde ich das Beste tun, was ich kann. - Ich denke. Ja, das werde ich. Sicher. Ich verspreche es. Garantiert. In diesem Sinne hoffe ich, Sie bald und einen Teil der Welt zu sehen und einen wirklich guten Tag zu haben und freue mich auf ein Gespräch mit Ihnen. 14. Entdecke Design auf Skillshare: Art und Weise.