Share
Hvis du aldri har hørt om Shopify før, har du kanskje tatt opp bolig under en stein. Shopify er en av de mest populære tjenestene for å skape e-handelsløsninger på nettet, og de har nylig omformet deres fremsidevendte nettsted.
I dag skal vi se på noen av de finere detaljene i redesignet, og snakk litt om hvordan redesignet ble oppnådd. La oss dykke inn!
Skiftet til lydhør er den primære endringen Shopify gjort i dette redesignet, og detaljnivået ved hvert bruddpunkt etterlater ingen bruker bak.
Shopify er et godt eksempel på design beslutningsprosesser basert på skjermstørrelse. La oss ta en titt på noen av disse eksemplene, starter med hjemmesiden.
I løpet av denne artikkelen bruker vi termen "mobil" i forhold til det minste brytepunktet, "tablett" for å referere til neste pausepunktsstørrelse og "desktop" for å referere til de høyere brytpunktene. Det er mer enn bare tre grunnleggende bruddpunkter i dette designet, men disse vilkårene gir oss et rammeverk for å tenke på enheter.
Ved mobilstørrelse ser vi en klar oppfordring til handling, Kom i gang, som ekko to ganger. Vi ser også en minimal versjon av shopify-logoen, en sentrert tagline og en vertikalt stablet grønn fargeblokk med en overlaid funksjon av en Shopify-kunde. En hamburger stil menyknapp er plassert øverst til venstre på toppteksten.
Så snart vi beveger oss opp til tablettbruddspunktet, kan vi se at preferansen skifter bort fra vertikal stabling, og i stedet er innholdet horisontalt plassert. Nivået på detaljer, eller "innholdsoppløsning", øker; Vi ser en mer detaljert logo (fortsatt sentrert), større tekst, og bildet av Shopify-kunden viser mer detaljert informasjon.
Kanskje mest interessant, den grønne blokken skifter fra den vertikale stakken til en horisontal justering, floated til høyre side av toppteksten. Vi ser også en Logg Inn knappen ved siden av den primære handlingen øverst på toppteksten. På tablettstørrelsen ser vi fortsatt hamburger-stil-menyen også.
Det høyeste detaljnivået i toppteksten finner du i skrivebordsversjonen av overskriften. Logoen justeres til venstre, og hamburgermenyen er erstattet med en eksplisitt meny. Vi beholder den horisontale tilpasningen som vises i tablettbruddspunktet. På venstre side, den Kom i gang kall til handling blir omgjort til en skjema for innsendingsknapp, med et tekstfelt for brukeren å skrive inn e-postadressen sin. Under dette ser vi et helt nytt innhold, "Betrodd av over 100 000 butikkeiere."
Overskriften er en case studie i å ta beslutninger for mobil. Hva er de viktigste elementene som aldri bør fjernes? Hvilke elementer passer for hvert bruddpunkt og enheter som vanligvis passer inn i det bruddpunktet? Shopify har for eksempel valgt å bruke bildet av en enkelt Shopify-kunde på alle bruddpunkter, men viser kun den kvantitative meldingen "Tillatt av over 100 000 * butikkeiere" på skrivebord. Denne typen beslutninger er høyere nivå og er mer enn estetisk fokusert.
*Merk: siden vi begynte å skrive denne artikkelen, har Shopify oppdatert dette nummeret til 120.000.
Accentsconagua
Det skal bemerkes at Shopify bruker mange web-standard-vennlig responsive teknikker, for eksempel bruken av
De bakgrunnsbilde, og ikke-semantisk JavaScript-lasting. Dette gjør det mulig for enheter med høyoppløselige skjermbilder å be om høyere oppløsningsbilder. Legg merke til at du ikke finner pixelerte bilder gjennom noen av de redesignede sidene på Shopify.
Shopify bruker også base-64-kodede data-uri til å definere bestemte bilder gjennom hele designet, inkludert den lille teksten på den grønne blokken i toppteksten. Dette unngår en unødvendig ekstra HTTP-forespørsel, og er spesielt effektiv for mindre detaljer UI-bilder som ikke kan konverteres til SVG, og gjentatte mønstre.
Når det gjelder SVG, bruker Shopify-logoen også en base-64-kodet data-uri for å definere et SVG-bilde. Dette fungerer på samme måte som de tidligere uri-kodede bildene.
Den primære mobilnavigasjonen er avhengig av en skjult sidebjelke på skjermen som vises når hamburgermenyen klikkes eller berøres.
Animasjonen er oppnådd ved hjelp av forvandle og translateX, i kombinasjon med følgende overgangsregel:
overgang: transformer 0.6s kubisk-bezier (0.66, 0, 0.41, 1);
Skuffen selv er satt til posisjon: fast, med en flow-y regelen sett til bla. Når skuffen er åpnet, mottar kroppselementet a js-skuff åpen klassen, som setter høyden til 100% og overløp til skjult. Dette forhindrer brukeren i å rulle innholdssiden mens naven er åpen.
En sekundær navigasjon er tilstede på noen av de interne sidene, som bare er stilisert element. Her er CSS brukt til å stylisere element:
.nav__mobile__select width: 100%; bakgrunn: gjennomsiktig url ("data: image / svg + xml; base64, PCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3 ... wIDUuMTkyLDMuNzM1IDguODY1LDAuMDEgMTAuMjg5LDEuNDE0IAkiLz4KPC9nPgo8L3N2Zz4K") ikke gjenta høyre senter; grense: ingen; -webkit-utseende: ingen; -moz-utseende: ingen; -ms-utseende: ingen; -o-utseende: ingen; utseende: ingen; farge: # 767676; Igjen ser vi data-uri-teknikken som brukes til ned-pilen på høyre side av velgeren, så vel som utseende regelen, som definerer nettleserstiler på grunnnivå.
Den samme primære menyen brukes under både tablett- og mobilbruddspunkter, men den sekundære menyen brukes bare under mobilt brytepunkt. På skrivebordspauspunktet vises menyene eksplisitt, med sekundærmenyen på sidet nivå øverst på siden. Navbaren selv bruker Hodetelefon, et JavaScript-plugin for å kontrollere visning av en klebrig nav-bar basert på forskjellige handlinger. For eksempel på de interne sidene skjuler den primære navlinjen når brukeren ruller ned, slik at bare sekundærnav synlig, men i det øyeblikket brukeren begynner å rulle opp, vises den primære navlinjen igjen.
Rull ned, borte
Rull opp, der er detNår det gjelder glidende menyer, har Shopify valgt en interessant strategi for å svare på klikk på Call-to-Action-knapper: en glideskuff som kommer fra høyre side av skjermen med en meny. Denne skuffen viser både tablett og mobil; På skrivebordet blir skjemainngangene tømt over toppen av en helskjerm semi-transparent svart bakgrunn, modal stil.
Siden "Selg på nettet" gir noen spesielt interessante hensyn for lydhør overveielse.
Overskriftsbildet er det første åpenbare lydhørige hensynet, da det endrer størrelsen på hvert bruddpunkt. Men en mer subtil endring skjer ved skrivebordet pause. I stedet for å gi bare en Lag din butikk knappen, vises et skjema med tre felt, invitere brukere til å registrere seg og opprette en butikk i en enkelt skjema innsending. Dette følger det samme mønsteret fra hjemmesiden til handling.
En annen innholdsmodul som gjentas flere steder, vises på siden Selg på nettet. Ved mobilt brytepunkt er modulen i hovedsak et trekkspill av innholdsseksjoner, hver med en header og a + knappen som avslører avsnittet. Når det avsløres, kan brukeren klikke eller berøre en - knappen for å skjule den delen.
På tablett- og skrivebordspausene endres modulen til en mer detaljert horisontal knappnavigasjon.
Hver knapp i navigasjonen er knyttet til en innholdsblokk. Knappkopien endres fra lengre, mer beskrivende overskrifter til enkeltord ledsaget av et ikon. Innholdsavsnittene har selv større bilder knyttet til seksjonstittelen.
Det samme mønsteret vises to ganger på siden "Selg på nettet". Trekkspillet gjenbrukes også andre steder, inkludert ved mobilt brytepunkt på siden Egenskaper. En interessant forskjell er imidlertid at trekkspillmodulen ikke alltid ledsages av de samme knappene som beskrevet ovenfor. På siden Egenskaper ser vi en fast innholdsnavigasjon på venstre side, med rullbare, alltid synlige innholdsseksjoner til høyre.
I to seksjoner, «Ta butikken din overalt, uansett hvor du går», og på slutten under "Vi er her for å hjelpe, 24 timer i døgnet, 7 dager i uken", blir bildevalg gjort ved ulike bruddpunkter. I avsnittet "Ta vare på din butikk hvor som helst", vises bildet på en iPhone bare på tablettbruddspunktet og over. I avsnittet "24/7" viser et bilde av kundeservicerepresentanter syv personer på mobil- og tablettbruddspunkter, men vokser til tretten personer ved skrivebordet. Dette oppnås ved hjelp av
Merk IE9-spesifikke element; Dette gjør det mulig for IE9 å bruke
På mobilt brytepunkt, viser vitnemålene som enkelte elementer i en karusell.
På tablettstørrelsen og større vises disse lysbildene parallelt med hverandre.
Det er ikke helt klart hvorfor Shopify valgte å bruke en karusell i stedet for et vertikalt arrangement av elementene, men noen informerte gjetninger kunne bli gjort. For eksempel kan Shopify ikke ha ønsket å ofre det vertikale rommet som er nødvendig for å stable testamentene, slik at brukeren kunne komme til den endelige oppfordringen raskere. Eller det kan ganske enkelt være et estetisk valg.
Prissettingssiden kan sees som en av de viktigste sidene på en hvilken som helst tjenestemarkedsside. Av den grunn er det nesten sikkert at Shopifes beslutninger på denne siden var nøye gjennomtenkt. La oss se på hvordan innholdet endres i løpet av de ulike breakpoints.
Brukeren blir bedt om å velge en plan som passer til budsjettet, og presenteres med tre alternativer: selg online, selg i butikken eller begge deler.
Hvis du velger en av disse alternativene, endres prismodulene for å matche den aktuelle situasjonen du har valgt. Denne endringen er ledsaget av endring i farge også. En subtil designbeslutning laget av Shopify var å bruke gul for "online", blå for "i butikken" og grønn for kombinasjonen for begge deler; Dette er spesielt smart fordi kombinere blå og gul produserer faktisk grønt.
Når brukeren har valgt sitt salgssted, presenteres de da med vertikalt ordnede blokker som viser pris og navn på planen veldig tydelig. Hver blokk gir også en rullegardin "Plandetaljer" for å se planens detaljerte informasjon, som pris og funksjoner.
Vanlige spørsmål vises i bunnen i trekkspillmodulen diskutert tidligere. Trekkspillhodene refererer til typene spørsmål, og hver seksjon inneholder flere spørsmål. Dette adskiller seg fra den felles tilnærmingen til å skape et trekkspill for hvert spørsmål.
Ved tablettbruddpunktet skifter både salgsstedet og prisblokkene til et horisontalt layout.
Detaljer vises nå uten å kreve et klikk på en rullegardin i hver innholdsblokk. Punktet for salg selges også fra tekst-kun til tekst, ledsaget av et ikon. Den "profesjonelle" planen er litt vertikalt motvirket av de to andre planene, og er merket som den "mest populære" planen. På både nettbrett og mobilt brytepunkt er en "Starter" -plan utformet for å gripe mye mindre oppmerksomhet, og inkluderer ikke Prøv Shopify gratis oppfordring til handling. Interessant er det samme fokusfokus som brukes på Shopify Plus-planen, som er for høyvolumplaner på bedriftsnivå.
Vanlige spørsmål lever ikke lenger i et trekkspill, og vises i stedet i et to-kolonne-layout.
Den eneste innholdsoppsettrelaterte endringen på skrivebordsstørrelsen er de mindre fokuserte planene blir brakt inn i en fjerde kolonne ved siden av de tre hovedplanene.
Eksempler på Shopify-temaer er i siste instans den beste måten å kommunisere fleksibiliteten og brukstilstandene til Shopify. Disse sidene har brukt noen gode eksempler på responsiv interaktivitet som vi ønsker å påpeke.
Ofte lider modalvinduer på mobil av mangel på forsettlig designoverveielse for mobilbrukere. Dette er ikke tilfelle for Shopifes "eksempel" -modeller. Fokusert på nesten fullskjermbilder, gir modal navigasjonspiltaster og metadata nedenfor.
Skifter til en tablettoppsett, flytter pilene og metadataene til høyre for bildet. Overgangen mellom hver modal bruker a skala og falme attributt skift. Overgangen antyder en zoomeffekt inn og ut av indeksen for bilder. Til enhver tid, når modal er åpen, både et kall-til-handling og en x knappen er tilstede, og gir passende utgangsstier for brukeren.
Rutenettet gir seg kontekstuelle filtre slik at brukeren kan navigere på ulike typer temaer på siden. Skalaen og opacity shifting-effekten ekko også her.
Shopifes strategi for bunntekstnavigering avslører enda en annen situasjon der innholdsoppløsning er ansatt. Ved mobilt brytepunkt vises to kolonner:
På tabletten og større bruddpunkter blir to helt nye seksjoner introdusert, noe som gir mer direkte tilgang til innvendige detaljer og "autorisasjon" sider (innholdsbaserte sider som etablerer myndighet på et bestemt emne).
Til syvende og sist viser dette at Shopify har bestemt en strategi for innholdsoppløsning: hvilket innhold skal være tilgjengelig på alle brytepunkter, på alle enheter, i motsetning til hvilket innhold som bare skal være tilgjengelig hvis eiendomsmegling på skjermen er for et skrivebord eller en nettbrett? Disse typer spørsmål fører til en bedre overordnet innholdsstrategi, og bør uten tvil være en del av alle responsive designarbeid.
Shopify har klart å trekke av et fantastisk redesign, med høy integritet både i innholdsutviklingen og deres lydhør overveielse.
Videre har de ansatt noen av de beste teknikkene som moderne nettlesere har å tilby. Selv om det fortsatt finnes sider gjennom Shopifys økosystem som ennå ikke har gått over til de nye teknikkene og designsystemene, gir frontfronten og primære markedsføringssidene en solid og unik responsiv designmodell for webdesignere og utviklere for å lære fra.
