Share
Wenn Sie noch nie von Shopify gehört haben, haben Sie sich vielleicht unter einem Felsen niedergelassen. Shopify ist einer der beliebtesten Services für die Erstellung von E-Commerce-Lösungen im Internet. Kürzlich wurde die Frontseite neu gestaltet.
Heute werfen wir einen Blick auf die Feinheiten des Redesigns und sprechen ein wenig darüber, wie das Redesign zustande gekommen ist. Lass uns eintauchen!
Die Umstellung auf Responsive ist die hauptsächliche Änderung, die Shopify bei dieser Neugestaltung vorgenommen hat, und die Detailgenauigkeit an jedem Haltepunkt lässt keinen Benutzer zurück.
Shopify ist ein hervorragendes Beispiel für Designentscheidungen basierend auf der Bildschirmgröße. Schauen wir uns einige dieser Beispiele an, beginnend mit der Homepage.
Für die Dauer dieses Artikels verwenden wir den Begriff "mobil" in Bezug auf den kleinsten Haltepunkt, "tablet" für die nächste Haltepunktgröße und "desktop" für die höheren Haltepunkte. Es gibt mehr als nur drei grundlegende Haltepunkte in diesem Design, aber diese Begriffe geben uns einen Rahmen, um über Geräte nachzudenken.
Bei der mobilen Größe sehen wir einen klaren Handlungsaufruf, Loslegen, das wird zweimal wiederholt. Wir sehen auch eine minimale Version des shopify-Logos, einen zentrierten Slogan und einen vertikal gestapelten grünen Farbblock mit einer überlagerten Funktion eines Shopify-Kunden. Ein Hamburger-Menü-Button befindet sich oben links in der Kopfzeile.
Sobald wir an den Tablet-Haltepunkt gelangen, können wir feststellen, dass sich die Präferenz von der vertikalen Stapelung wegbewegt und stattdessen der Inhalt horizontal platziert wird. Der Detaillierungsgrad oder die "Inhaltsauflösung" erhöht sich; Wir sehen ein detaillierteres Logo (immer noch in der Mitte), einen größeren Text und das Image des Shopify-Kunden zeigt mehr Details.
Am interessantesten ist, dass der grüne Block vom vertikalen Stapel in eine horizontale Ausrichtung verschoben wird, die sich auf der rechten Seite des Headers befindet. Wir sehen auch eine Einloggen neben dem primären Handlungsaufruf oben in der Kopfzeile. Bei der Tablettgröße sehen wir immer noch das Hamburger-Menü.
Die höchste Detailebene in der Kopfzeile finden Sie in der Desktop-Version der Kopfzeile. Das Logo wird nach links ausgerichtet und das Hamburger-Menü wird durch ein explizites Menü ersetzt. Wir behalten die horizontale Ausrichtung, die im Haltepunkt des Tablets angezeigt wird. Auf der linken Seite die Loslegen Call-To-Action wird in eine Formularübermittlungsschaltfläche umgewandelt, in der der Benutzer seine E-Mail-Adresse eingeben kann. Darunter sehen wir einen brandneuen Inhalt: „Vertrauen von über 100.000 Ladenbesitzern“.
Die Kopfzeile ist eine Fallstudie zur Entscheidungsfindung für Mobilgeräte. Was sind die wichtigsten Elemente, die niemals entfernt werden sollten? Welche Elemente eignen sich für jeden Haltepunkt und für Geräte, die normalerweise in diesen Haltepunkt passen? Shopify hat sich beispielsweise dafür entschieden, das Image eines einzelnen Shopify-Kunden an allen Haltepunkten zu verwenden. Auf Desktops wird jedoch nur die quantitative Meldung "Von über 100.000 * Ladenbesitzern vertrauenswürdig" angezeigt. Diese Entscheidungen sind übergeordnet und mehr als ästhetisch ausgerichtet.
*Hinweis: seit wir diesen Artikel geschrieben haben, hat Shopify diese Zahl auf 120.000 erhöht.
Accentsconagua
Es sei darauf hingewiesen, dass Shopify viele webstandard-freundliche Reaktionstechniken verwendet, wie z. B. die Verwendung von
Das Hintergrundbild, und nicht-semantisches JavaScript-Laden. Dadurch können Geräte mit hochauflösenden Bildschirmen Bilder mit höherer Auflösung anfordern. Beachten Sie, dass Sie auf allen umgestalteten Seiten von Shopify keine pixelierten Bilder finden.
Shopify verwendet auch Base-64-codierte Daten-Uris, um bestimmte Bilder im gesamten Design zu definieren, einschließlich der leichten Textur auf dem grünen Block im Header. Dies vermeidet eine unnötige zusätzliche HTTP-Anforderung und ist besonders effektiv für UI-Images mit kleineren Details, die nicht in SVG-Dateien konvertiert werden können, und für sich wiederholende Muster.
Apropos SVG: Das Shopify-Logo verwendet auch einen 64-kodierten Daten-URI, um ein SVG-Bild zu definieren. Dies funktioniert auf dieselbe Weise wie bei den vorherigen uri-kodierten Bildern.
Die primäre mobile Navigation basiert auf einer verdeckten Seitenleiste, die angezeigt wird, wenn das Hamburger Menü angeklickt oder berührt wird.
Die Animation erfolgt mit verwandeln und translateX, in Kombination mit der folgenden Übergangsregel:
Übergang: Transformieren Sie 0,6 s in Kubik-Bezier (0,66, 0, 0,41, 1);
Die Schublade selbst ist auf eingestellt Position: feststehend, mit einem Überlauf-y Regel auf gesetzt scrollen. Wenn die Schublade geöffnet wird, erhält das Körperelement eine js-schublade-offen Klasse, die die Höhe auf 100% und den Überlauf auf ausgeblendet setzt. Dies verhindert, dass der Benutzer die Inhaltsseite scrollen kann, während die Navigation geöffnet ist.
Auf einigen der internen Seiten ist eine sekundäre Navigation vorhanden, die einfach stilisiert ist Element. Hier ist das CSS, das zur Stilisierung verwendet wird Element:
.nav__mobile__select width: 100%; Hintergrund: transparent url ( "data: image / svg + xml; base64, PCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3 ... wIDUuMTkyLDMuNzM1IDguODY1LDAuMDEgMTAuMjg5LDEuNDE0IAkiLz4KPC9nPgo8L3N2Zz4K") no-repeat rechts von der Mitte; Grenze: keine; -webkit-erscheinung: keine; -Moz-Aussehen: keine; -ms-Aussehen: keine; -o-Aussehen: keine; Erscheinung: keine; Farbe: # 767676;
Wieder sehen wir die Daten-URI-Technik, die für den Abwärtspfeil auf der rechten Seite des Selects verwendet wird, sowie das Aussehen Regel, die Browser-Stile auf Basisebene definiert.
Das gleiche Hauptmenü wird sowohl für Tablet- als auch für mobile Haltepunkte verwendet, das sekundäre Menü wird jedoch nur unterhalb des mobilen Haltepunkts verwendet. Am Desktop-Haltepunkt werden die Menüs explizit angezeigt. Das sekundäre Menü auf Seitenebene wird oben auf der Seite angezeigt. Die Navigationsleiste selbst verwendet Headroom, ein JavaScript-Plugin, um die Anzeige einer sticky Navigationsleiste auf der Grundlage verschiedener Aktionen zu steuern. Auf den internen Seiten wird beispielsweise die primäre Navigationsleiste ausgeblendet, wenn der Benutzer nach unten blättert, wobei nur die sekundäre Navigation sichtbar bleibt. Sobald der Benutzer jedoch beginnt, nach oben zu blättern, wird die primäre Navigationsleiste wieder angezeigt.
Nach unten scrollen, weg
Nach oben scrollen, da ist esApropos Slider-Menüs: Shopify hat eine interessante Strategie gewählt, um auf Klicks auf Call-to-Action-Schaltflächen zu reagieren: Eine Schublade, die sich auf der rechten Seite des Bildschirms mit einem Menü befindet. Diese Schublade ist sowohl auf dem Tablet als auch auf dem Handy sichtbar. Auf dem Desktop werden die Formulareingaben über einem halbtransparenten schwarzen Hintergrund im Vollbildmodus im modalen Stil abgelegt.
Die Seite "Online verkaufen" enthält einige besonders interessante Überlegungen zu Reaktionserwägungen.
Das Header-Bild ist die erste offensichtliche Antwort, da es an jedem Haltepunkt die Größe ändert. Am Desktop-Haltepunkt tritt jedoch eine geringfügigere Änderung auf. Anstatt nur eine Schaffen Sie Ihren Laden Wenn Sie auf die Schaltfläche klicken, wird ein Formular mit drei Feldern angezeigt, in dem Benutzer aufgefordert werden, sich in einer einzigen Formularübermittlung anzumelden und zu erstellen. Dies folgt dem gleichen Muster vom Aufruf der Aktion zur Startseite.
Ein anderes Inhaltsmodul, das an mehreren Stellen wiederholt wird, wird auf der Seite "Online verkaufen" angezeigt. Am mobilen Haltepunkt ist das Modul im Wesentlichen ein Akkordeon aus Inhaltsabschnitten mit jeweils einem Header und einem + Schaltfläche, die den Abschnitt anzeigt. Nach dem Aufdecken kann der Benutzer a anklicken oder berühren - Schaltfläche, um diesen Abschnitt auszublenden.
An den Haltepunkten von Tablets und Desktops ändert sich das Modul jedoch zu einer detaillierteren horizontalen Schaltflächennavigation.
Jeder Schaltfläche in der Navigation ist ein Inhaltsblock zugeordnet. Die Schaltflächenkopie ändert sich von längeren, aussagekräftigeren Überschriften zu einzelnen Wörtern, die von einem Symbol begleitet werden. Die Inhaltsabschnitte selbst enthalten größere Bilder, die dem Abschnittsnamen zugeordnet sind.
Das gleiche Muster wird auf der Seite "Online verkaufen" zweimal angezeigt. Das Akkordeon wird auch anderweitig wiederverwendet, unter anderem am mobilen Haltepunkt auf der Funktionsseite. Ein interessanter Unterschied besteht jedoch darin, dass das Akkordeon-Modul nicht immer von den oben beschriebenen Tastenabschnitten begleitet wird. Auf der Features-Seite sehen Sie auf der linken Seite eine feste Inhaltsnavigation, auf der rechten Seite scrollbare, immer sichtbare Inhaltsbereiche.
In zwei Abschnitten, "Bring deinen Laden mit, wohin auch immer du gehst", und am Ende weiter unten: "Wir sind hier, um dir zu helfen, 24 Stunden am Tag, 7 Tage die Woche". Die Bildauswahl wird an verschiedenen Haltepunkten getroffen. Im Abschnitt „Bring dein Geschäft mit, wohin auch immer du gehst“ wird das Bild eines iPhones nur am Haltepunkt des Tablets und darüber angezeigt. Im Abschnitt „24/7“ zeigt ein Bild von Kundendienstmitarbeitern sieben Personen an Haltepunkten für mobile Geräte und Tablets, wächst jedoch am Desktop-Haltepunkt auf dreizehn Personen an. Dies wird mit der
Beachten Sie das IE9-spezifisch Element; Dies erlaubt IE9 die Verwendung der
Am mobilen Haltepunkt werden die Testimonials als Einzelelemente in einem Karussell dargestellt.
Bei der Tablettgröße und größer werden diese Folien parallel zueinander angezeigt.
Es ist nicht ganz klar, warum Shopify sich für ein Karussell anstelle einer vertikalen Anordnung der Elemente entschieden hat, aber einige fundierte Vermutungen sind möglich. Beispielsweise hätte Shopify möglicherweise nicht den für das Stapeln der Testimonials erforderlichen vertikalen Platz geopfert, damit der Benutzer schneller zum endgültigen Aufruf zum Handeln gelangt. Oder es könnte einfach eine ästhetische Wahl sein.
Die Preisseite könnte als eine der wichtigsten Seiten auf einer bestimmten Service-Marketing-Seite angesehen werden. Aus diesem Grund ist es fast sicher, dass die Entscheidungen von Shopify auf dieser Seite sorgfältig durchdacht wurden. Schauen wir uns an, wie sich der Inhalt im Verlauf der verschiedenen Haltepunkte ändert.
Der Benutzer wird aufgefordert, einen Plan zu wählen, der zu seinem Budget passt, und es stehen drei Optionen zur Verfügung: Online verkaufen, im Geschäft verkaufen oder beides.
Wenn Sie eine dieser Optionen wählen, werden die Preismodule entsprechend der von Ihnen ausgewählten Situation geändert. Diese Änderung wird auch von einer Farbänderung begleitet. Eine subtile Design-Entscheidung, die Shopify getroffen hatte, war die Verwendung von Gelb für „Online“, Blau für „In Store“ und Grün für die Kombination von beiden. Dies ist besonders schlau, da Blau und Gelb tatsächlich Grün erzeugen.
Nachdem der Benutzer seinen Point of Sale ausgewählt hat, werden ihm vertikal angeordnete Blöcke angezeigt, die den Preis und den Namen des Plans sehr deutlich zeigen. Jeder Block enthält außerdem eine Dropdown-Liste mit den Details zum Plan, in der die detaillierten Informationen des Plans angezeigt werden, wie z.
FAQs werden im Akkordeonmodul, das zuvor beschrieben wurde, unten angezeigt. Die Akkordeon-Header beziehen sich auf die Arten von Fragen, und jeder Abschnitt enthält mehrere Fragen. Dies unterscheidet sich von dem üblichen Ansatz, für jede Frage ein Akkordeon zu schaffen.
Am Haltepunkt des Tablets verschieben sich sowohl der Point-of-Sale-Picker als auch die Preisblöcke in eine horizontale Anordnung.
Details werden jetzt angezeigt, ohne dass in jedem Inhaltsblock ein Dropdown-Menü angeklickt werden muss. Der Point-of-Sale-Picker wechselt auch von Nur-Text zu Text, der von einem Symbol begleitet wird. Der "Professional" -Plan ist geringfügig vertikal von den beiden anderen Plänen versetzt und wird als "beliebtester" Plan bezeichnet. Sowohl beim Tablet als auch bei den mobilen Haltepunkten ist ein "Starter" -Plan so konzipiert, dass er viel weniger Aufmerksamkeit auf sich zieht und nicht die Testen Sie Shopify kostenlos Aufruf zum Handeln. Interessanterweise wird der gleiche mangelnde Fokus auf den Shopify Plus-Plan angewandt, der für Pläne mit hohem Volumen auf Unternehmensebene gilt.
FAQs leben nicht mehr in einem Akkordeon, sondern werden in einem zweispaltigen Layout angezeigt.
Die einzige inhaltliche Änderung der Desktopgröße ist, dass die weniger fokussierten Pläne neben den drei primären Plänen in eine vierte Spalte eingefügt werden.
Beispiele für Shopify-Themen sind letztendlich der beste Weg, um die Flexibilität und Anwendungsfälle für Shopify zu kommunizieren. Diese Seiten haben einige großartige Beispiele für responsive Interaktivität gezeigt, auf die wir hinweisen möchten.
Häufig leiden modale Fenster auf Mobilgeräten unter einer mangelnden absichtlichen Designüberlegung für mobile Benutzer. Dies gilt nicht für Shopifys „Beispiel“ -Modale. Der Modal ist auf Bilder nahe dem Vollbildmodus fokussiert und enthält unten Navigationsschaltflächen und Metadaten.
Wenn Sie zu einem Tablett-Layout wechseln, werden die Pfeile und Metadaten rechts neben dem Bild angezeigt. Der Übergang zwischen den einzelnen Modalarten nutzt a Rahmen und verblassen Attributverschiebung. Der Übergang lässt auf einen Zoomeffekt innerhalb und außerhalb des Bildindex schließen. Zu jeder Zeit, wenn das Modal geöffnet ist, sowohl ein Handlungsaufruf als auch ein X sind vorhanden und bieten dem Benutzer die entsprechenden Exit-Pfade.
Das Raster selbst bietet kontextabhängige Filter, mit denen der Benutzer auf den verschiedenen Thementypen navigieren kann. Der Effekt der Skalen- und Deckkraftverschiebung wird auch hier wiedergegeben.
Die Strategie von Shopify für die Fußzeilennavigation offenbart eine weitere Situation, in der die Inhaltsauflösung verwendet wird. Am mobilen Haltepunkt werden zwei Spalten angezeigt:
Beim Tablet und größeren Haltepunkten werden zwei völlig neue Abschnitte eingeführt, die einen direkteren Zugriff auf Details zum Innendetails und zu Autoritätsseiten bieten (inhaltsbasierte Seiten, die eine Autorität für ein bestimmtes Thema festlegen)..
Letztendlich zeigt dies, dass Shopify eine Strategie für die Inhaltsauflösung festgelegt hat: welche Inhalte sollten verfügbar sein alles Haltepunkte auf alles Welche Inhalte sollten nur verfügbar sein, wenn auf dem Bildschirm ein Desktop oder Tablet angezeigt wird? Diese Art von Fragen führt zu einer besseren Gesamtstrategie für Inhalte und sollte wohl Teil aller Responsive-Design-Bemühungen sein.
Shopify hat es geschafft, ein beeindruckendes Redesign durchzuführen, das sowohl bei der Inhaltsentwicklung als auch bei den ansprechenden Überlegungen eine hohe Integrität aufweist.
Darüber hinaus haben sie einige der besten Techniken eingesetzt, die moderne Browser bieten. Auch wenn im gesamten Shopify-Ökosystem noch Seiten vorhanden sind, die noch nicht auf das neue Techniken- und Design-System umgestellt wurden, bieten die nach vorne gerichteten Website- und primären Marketing-Seiten Webdesignern und Front-End-Entwicklern ein solides und einzigartiges responsives Designmodell von.
