Share
Dacă nu ați auzit vreodată de Shopify înainte, probabil că v-ați stabilit sub o stâncă. Shopify este unul dintre cele mai populare servicii de creare a soluțiilor de comerț electronic online și recent le-a reproiectat site-ul orientat spre față.
Astăzi, vom examina câteva dintre detaliile mai fine ale reproiectării și vom vorbi puțin despre modul în care a fost realizat reproiectarea. Hai să ne aruncăm!
Trecerea la receptiv este schimbarea primară a Shopify făcută în acest redesign, iar nivelul de detaliere la fiecare punct de întrerupere nu lasă niciun utilizator în urmă.
Shopify este un exemplu excelent de proiectare a deciziilor bazate pe dimensiunea ecranului. Să aruncăm o privire la unele dintre aceste exemple, începând cu pagina de pornire.
Pe durata acestui articol, vom folosi termenul "mobil" cu referire la cel mai mic punct de întrerupere, "tabletă" pentru a se referi la următoarea dimensiune a punctului de întrerupere, iar "desktop" pentru a se referi la punctele de întrerupere superioare. Există mai mult de 3 puncte de bază în acest design, însă acești termeni ne oferă un cadru pentru a gândi despre dispozitive.
La dimensiunea mobilă, vedem o chemare clară la acțiune, Incepe, care este reluat de două ori. De asemenea, vedem o versiune minimă a siglei shopify, un slogan centrat și un bloc de culoare verde stivuit vertical, cu o caracteristică suprapusă a unui client Shopify. Un buton de meniu stil hamburger este plasat în partea stângă sus a antetului.
De îndată ce trecem la punctul de întrerupere a tabletei, vedem că preferința se îndepărtează de stivuirea verticală, iar conținutul este plasat orizontal. Nivelul de detaliu, sau "rezoluția conținutului", crește; vedem un logo mai detaliat (încă centrat), un text mai mare și imaginea clientului Shopify prezintă mai multe detalii.
Poate că cel mai interesant este că blocul verde trece de la stivă verticală la o aliniere orizontală și plutește în partea dreaptă a antetului. De asemenea, vedem a Logare butonul de lângă apelul principal de acțiune din partea de sus a antetului. La dimensiunea tabletei, vedem și meniul de tip hamburger.
Cel mai înalt nivel de detaliu din antet poate fi găsit în versiunea desktop a antetului. Logo-ul se aliniază spre stânga, iar meniul de hamburger este înlocuit cu un meniu explicit. Reținem alinierea orizontală prezentată în punctul de întrerupere a tabletei. În partea stângă, Incepe apelul la acțiune este transformat într-un buton de trimitere a formularului, cu un câmp de text pentru ca utilizatorul să introducă adresa de e-mail. Mai jos, vedem un nou conținut de conținut, "încredințat de peste 100.000 de proprietari de magazine".
Antetul este un studiu de caz în luarea deciziilor pentru mobil. Care sunt cele mai importante elemente care nu ar trebui eliminate niciodată? Ce elemente sunt potrivite pentru fiecare punct de întrerupere și dispozitive care se potrivesc de obicei în punctul de întrerupere? Shopify a ales, de exemplu, să utilizeze imaginea unui singur client Shopify la toate punctele de întrerupere, dar să afișeze doar mesajul cantitativ "Stăpânit de peste 100.000 de proprietari de magazine" pe desktop-uri. Aceste tipuri de decizii sunt mai înalte și sunt mai mult decât estetice.
*Notă: de când am început să scriem acest articol, Shopify a actualizat acest număr la 120.000.
Accentsconagua
Trebuie remarcat faptul că Shopify utilizează numeroase tehnici responsabile față de standardele web, cum ar fi utilizarea
imagine de fundal, și încărcarea JavaScript non-semantică. Acest lucru permite dispozitivelor cu ecrane de rezoluție ridicată să solicite imagini cu rezoluție mai mare; rețineți că nu veți găsi imagini pixelate în nici una dintre paginile reproiectate de pe Shopify.
Shopify utilizează, de asemenea, date bazate pe 64 de date pentru a defini anumite imagini în cadrul designului, inclusiv textura ușoară pe blocul verde din antet. Acest lucru evită o cerere HTTP suplimentară inutilă și este deosebit de eficientă pentru imagini UI detaliate mai mici care nu pot fi convertite în SVG și repetarea modelelor.
Referindu-se la SVG, sigla Shopify folosește de asemenea și o bază de date codată 64 pentru a defini o imagine SVG. Aceasta funcționează în același mod ca și imaginile anterioare cu coduri uri.
Navigarea principală mobilă se bazează pe o bara laterală ascunsă aflată în afara ecranului care apare atunci când meniul hamburger este apăsat sau atins.
Animația este realizată folosind transforma și translateX, în combinație cu următoarea regulă de tranziție:
tranziție: transformă 0,6 s-bezier cubic (0,66, 0, 0,41, 1);
Sertarul în sine este setat la pozitie: fixa, cu un overflow-y regulă setată la sul. Când sertarul este deschis, elementul corpului primește a js-sertar-deschis clasa, care stabilește înălțimea la 100% și preaplinul ascuns. Acest lucru împiedică utilizatorul să deruleze pagina de conținut în timp ce navigatorul este deschis.
O navigare secundară este prezentă pe unele pagini interne, care este pur și simplu o formă stilizată element. Aici este folosit CSS pentru a stiliza element:
.nav__mobile__select lățime: 100%; fundal: adresa URL transparentă ("date: image / svg + xml; base64, PCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3 ... wIDUuMTkyLDMuNzM1IDguODY1LDAuMDEgMTAuMjg5LDEuNDE0IAkiLz4KPC9nPgo8L3N2Zz4K"); frontieră: nici una; -webkit-aspect: nici unul; -moz-aspect: nici unul; -ms-aspect: nici unul; -o-aspect: nici unul; aspect: nici unul; culoare: # 767676; Din nou, vedem tehnica de date folosită pentru săgeata în jos din partea dreaptă a selectorului, precum și aspect , care definește stilurile browser-ului la nivel de bază.
Același meniu principal este utilizat sub punctele de întrerupere a tabletelor și mobile, dar meniul secundar este utilizat numai sub punctul de transfer mobil. La punctul de întrerupere a calculatorului, meniurile sunt afișate explicit, iar meniul secundar la nivel de pagină apare în partea de sus a paginii. Bara de navigație în sine utilizează Headroom, un plugin JavaScript pentru controlul afișării unui nav-bar lipicios, bazat pe acțiuni diferite. De exemplu, pe paginile interne, bara primară se ascunde, pe măsură ce utilizatorul se derulează în jos, lăsând vizibil numai vizibilitatea secundară, dar în momentul în care utilizatorul începe să deruleze înapoi, bara primară se reapare.
Derulați în jos, plecat
Derulați în sus, acolo esteVorbind de meniurile glisante, Shopify a ales o strategie interesantă pentru a răspunde la clicurile pe butoanele Call-to-Action: un sertar culisant care vine din partea dreaptă a ecranului cu un meniu. Acest sertar se afișează atât pe tabletă, cât și pe mobil; pe desktop, intrările formularelor sunt scoase peste partea de sus a unui fundal negru semi-transparent complet, modal.
Pagina "Vindem online" oferă câteva considerații deosebit de interesante pentru considerente receptive.
Imaginea antetului este prima considerație evidentă, deoarece modifică dimensiunea la fiecare punct de întrerupere. Dar se produce o schimbare mai subtilă la punctul de întrerupere al calculatorului. În loc să furnizeze numai a Creați magazinul dvs. , apare un formular cu trei câmpuri, care invită utilizatorii să se înscrie și să creeze un magazin într-o singură trimitere de formular. Aceasta urmează același model din apelul la acțiune de la pagina de pornire.
Un alt modul de conținut care se repetă în mai multe locuri se afișează pe pagina Sell Online. La punctul de oprire mobil, modulul este în esență un acordeon de secțiuni de conținut, fiecare cu un antet și a + butonul care dezvăluie secțiunea. Când este dezvăluit, utilizatorul poate face clic sau atinge a - pentru a ascunde acea secțiune.
Cu toate acestea, la punctele de întrerupere a tabletei și desktopului, modulul se schimbă într-o navigație cu buton orizontal mai detaliat.
Fiecare buton din navigație este asociat cu un bloc de conținut. Copia de buton se modifică de la titluri mai lungi, mai descriptive la cuvinte singulare, însoțite de o pictogramă. Secțiunile de conținut conțin ele însele imagini mai mari asociate cu titlul secțiunii.
Același model apare de două ori pe pagina "Vindeți online". Acordeonul este, de asemenea, refolosit în altă parte, inclusiv la punct de oprire mobil pe pagina Funcții. O diferență interesantă este totuși că modulul acordeon nu este întotdeauna însoțit de aceleași secțiuni ale butoanelor descrise mai sus. În cazul paginii Funcții, vedem o navigare cu conținut fix în partea stângă, cu secțiuni de conținut scrollabile, întotdeauna vizibile în partea dreaptă.
În două secțiuni: "Ia-ți magazinul oriunde te duci", iar la sfârșitul de mai jos "Suntem aici pentru ajutor, 24 de ore pe zi, 7 zile pe săptămână", alegerile de imagini se fac la puncte de întrerupere diferite. În secțiunea "Ia-ți magazinul oriunde te duci", imaginea unui iPhone apare numai la punctul de întrerupere a tabletei și mai sus. În secțiunea "24 de ore din 24", o imagine a reprezentanților serviciului de relații cu clienții arată șapte indivizi la punctele de întrerupere a dispozitivelor mobile și tablete, dar crește până la treisprezece persoane la punctul de întrerupere al calculatorului. Acest lucru este realizat folosind
Rețineți specificul IE9 element; acest lucru permite IE9 să utilizeze
La punctul de trecere mobil, mărturiile arată ca elemente unice într-un carusel.
La mărimea tabletei și la dimensiuni mai mari, aceste diapozitive arată în paralel unele cu altele.
Nu este complet clar de ce Shopify a ales să folosească o caruselă în locul unui aranjament vertical al elementelor, dar ar putea fi făcute unele presupuneri informate. De exemplu, Shopify s-ar putea să nu fi vrut să sacrifice spațiul vertical necesar pentru stivuirea mărturiilor, astfel încât utilizatorul să poată ajunge la apelul final de acțiune mai rapid. Sau ar putea fi pur și simplu o alegere estetică.
Pagina de prețuri poate fi văzută ca fiind una dintre cele mai importante pagini de pe orice pagină de marketing pentru servicii. Din acest motiv, este aproape sigur că deciziile lui Shopify de pe această pagină au fost gândite minuțios. Să ne uităm la modul în care conținutul se schimbă în cursul diferitelor puncte de întrerupere.
Utilizatorul este rugat să aleagă un plan care să se potrivească bugetului său și este prezentat cu trei opțiuni: vânzarea online, vânzarea în magazin sau ambele.
Alegerea uneia dintre aceste opțiuni modifică modulele de tarifare pentru a se potrivi situației speciale pe care ați ales-o. Această schimbare este însoțită și de o schimbare a culorii. O decizie subtilă de design făcută de Shopify a fost aceea de a folosi galben pentru "online", albastru pentru "magazin" și verde pentru combinația pentru ambele; acest lucru este deosebit de inteligent deoarece combinarea albastru cu galben produce de fapt verde.
Odată ce utilizatorul a ales punctul lor de vânzare, acestea sunt apoi prezentate cu blocuri aranjate vertical, care arată foarte clar prețul și numele planului. Fiecare bloc oferă, de asemenea, un meniu detaliat "Plan detalii" pentru a vizualiza informațiile detaliate ale planului, cum ar fi rata și caracteristicile.
Întrebările frecvente apar în partea de jos a modulului de acordeon discutat mai devreme. Antetele acordeonului se referă la tipurile de întrebări și fiecare secțiune deține mai multe întrebări. Aceasta diferă de abordarea comună de a crea un acordeon pentru fiecare întrebare.
La punctul de întrerupere a tabletei, atât selectorul de puncte de vânzare, cât și blocurile de prețuri trec la un aspect orizontal.
Detaliile sunt afișate acum fără a fi nevoie de un clic pe o meniuri în interiorul fiecărui bloc de conținut. Selectorul de la punctul de vânzare trece și de la text la text însoțit de o pictogramă. Planul "Profesional" este ușor delimitat față de celelalte două planuri și este marcat ca fiind cel mai "popular" plan. La ambele puncte de transfer ale tabletei și mobile, un plan "Starter" este conceput pentru a atrage mult mai puțină atenție și nu include Încearcă Shopify gratuit apel la acțiune. Interesant, aceeași lipsă de concentrare se aplică planului Shopify Plus, care este pentru planurile la nivel de întreprindere cu volum mare.
Întrebările frecvente nu mai trăiesc într-un acordeon și, în schimb, arată într-un aspect cu două coloane.
Singura modificare referitoare la aspectul conținutului la dimensiunea desktop-ului este faptul că planurile mai puțin concentrate sunt aduse într-o a patra coloană alături de cele trei planuri principale.
Exemple de tematici Shopify reprezintă, în cele din urmă, cea mai bună modalitate de a comunica flexibilitatea și cazurile de utilizare pentru Shopify. Aceste pagini au folosit câteva exemple minunate de interactivitate receptivă pe care am dori să le subliniem.
Adesea, ferestrele modale pe telefonul mobil suferă de o lipsă de intenție în privința designului pentru utilizatorii mobili. Acest lucru nu este valabil pentru modurile "exemplar" ale Shopify. Concentrată pe imagini cu ecran complet, modulul oferă butoanele săgeți navigative și metadatele de mai jos.
Trecând la un aspect de tabletă, săgețile și metadatele plutesc în partea dreaptă a imaginii. Tranziția dintre fiecare mod utilizează a scară și decolorare transferul atributului. Tranziția sugerează un efect de zoom în și din indexul imaginilor. În orice moment, atunci când modalul este deschis, atât un apel de acțiune, cât și un × sunt prezente, furnizând căi de ieșire adecvate pentru utilizator.
Grila însăși oferă filtre contextuale pentru a permite utilizatorului să navigheze pe diferite tipuri de teme pe pagina. Efectul de schimbare a scării și a opacității este reluat și aici.
Strategia lui Shopify pentru navigarea în subsol relevă încă o altă situație în care se utilizează rezoluția conținutului. La intersecția mobilă, sunt afișate două coloane:
la tabletă și punctele de întrerupere mai mari, sunt introduse două secțiuni complet noi, oferind un acces mai direct la detaliile interioare și paginile "autoritate" (pagini bazate pe conținut care stabilesc autoritate pe un anumit subiect).
În cele din urmă, acest lucru arată că Shopify a stabilit o strategie pentru rezolvarea conținutului: ce conținut ar trebui să fie disponibil la toate breakpoints, pe toate dispozitive, în comparație cu ce conținut ar trebui să fie disponibil numai dacă imobiliarul de pe ecran este acela al unui desktop sau al unei tablete? Aceste tipuri de întrebări conduc la o strategie de conținut generală mai bună și ar trebui să fie o parte a tuturor eforturilor de proiectare receptive.
Shopify a reușit să obțină un redesign uimitor, cu o mare integritate atât în ceea ce privește dezvoltarea conținutului, cât și considerentele sale receptive.
Mai mult, au folosit unele dintre cele mai bune tehnici pe care browserele moderne au de oferit. Chiar dacă există încă pagini din ecosistemul Shopify care nu s-au schimbat încă până la noile tehnici și sisteme de design, site-ul orientat spre față și paginile de marketing primare oferă un model solid și unic de design receptiv pentru designerii web și dezvoltatorii de la front-end pentru a învăța din.
