Reaktyvus dizainas: kaip tai padaryti pirmą kartą

Atskleidimas: Jūsų palaikymas padeda išlaikyti svetainę! Mes uždirbame siuntimo mokestį už kai kurias paslaugas, kurias rekomenduojame šiame puslapyje.


Savo 1939 m. Memuaruose, Vėjas, smėlis ir žvaigždės, Prancūzų autorius ir aristokratas Antoine’as de Saint-Exupery’as ištarė: „Dizaineris žino, kad tobulumą jis pasiekė ne tada, kai nėra ką pridurti, bet tada, kai nėra ką palikti atimti“. Žinomas aviatorius ir mažojo princo autorius gyvai nematė informacijos amžiaus, tačiau vis dėlto jo žodžiai vis dar skamba pasaulyje, kuriame kibernetinė erdvė pakeitė dangų kaip inovacijų ribą..

Tiesą sakant, kai dėmesys sutrinka, net jei turinio turinys plečiasi eksponentiškai, Saint-Exupery metodas „mažiau yra daugiau“ yra aktualesnis nei bet kada. Verslo įmonėms nebėra prabangos muštis už patarlių krūmo, kai vidutinis langas, norint pritraukti mobilųjį lankytoją į savo svetainę, yra trumpesnis nei penkios sekundės. Atsižvelgiant į tai, kad daugiau nei penki centai kiekvieno dolerio dabar išleidžiami internete, reikia priversti skaičiuoti kiekvieną sekundę.

Tai daug daugiau nei tik tai, kad surandate patikimą prieglobos paslaugų teikėją ir įkeliate pagrindinę svetainę. Turite sukurti svetainę, tenkinančią visų lankytojų poreikius. (Jei jums reikia pagalbos norint suprasti, kaip veikia internetinės svetainės ir žiniatinklio priegloba, skaitykite iliustruotą prieglobos vadovą).

Svarbiausias dalykas yra patraukti lankytojo dėmesį ir laikyti langą plačiai atvertą (ir nukreiptą į jūsų puslapį) reaguojantis dizainas. Rinka greitai tampa labai reikšminga pasaulio, kurioje yra asmeniniai kompiuteriai, dalimi, ir vis daugiau vartotojų gauna naujienas, mėgaujasi pramogomis ir perka planšetinius kompiuterius bei išmaniuosius telefonus, įsitikindami, kad jūsų svetainė yra sukurta patenkinti jų nuolat besikeičiančius poreikius. kritinis. Viskas priklauso nuo lankytojų pageidaujamų funkcijų išlaikymo ir nė vieno dalyko, kurio jie neturi.

Nėra vietos gremėzdiškai grafikai, painiavai naršymui ar puslapiams, užrakinamiems tik darbastalio skyriuose. Mobiliųjų įrenginių vartotojai nori, kad interneto ekranas būtų liesas, švarus ir tinkamas jų ekranui, todėl būtinai rinkitės pagrindinį kompiuterį (ir platformą), palaikantį tikrai reaguojantį dizainą..

Galimas pranašumas už tai, kad daugiau galite gauti iš mažiau, yra didelis. Turint daugiau nei 2,1 milijardo judriojo plačiajuosčio ryšio abonentų kaip potencialių klientų, svarbiausia yra raiškos ekonomija ir maksimalus interaktyvumas; geriausias dizainas gali būti tas, kuris gali pasigirti didžiausiu interaktyvumu ir mažiausiai „dizainerio prisilietimų“.

Laimėjęs dizainas

Reaguojantis dizainas: kaip tai padaryti teisingai

Šiandienos novatoriškoje aplinkoje naršymui internete naudojamų prietaisų skaičius ir toliau auga, tačiau nėra sulėtėjimo požymių. Reaguojantis dizainas sukuria optimalią naudotojo patirtį naudojant įrenginius nuo darbastalio iki išmaniojo telefono, todėl vartotojams lengviau priimti greitus ir išsilavinusius pirkimo sprendimus..

Kodėl atsakingas dizainas yra toks svarbus??

Yra 2,1 milijardo judriojo plačiajuosčio ryšio abonentų.

87% Amerikos suaugusiųjų turi mobilųjį telefoną.

55% savo mobiliųjų telefonų naudojasi prisijungdami prie interneto, 31% jų naudojasi internetu dažniausiai naudodamiesi savo telefonu, o ne kompiuteriu ar kitu prietaisu.

45% suaugusiųjų Amerikos gyventojų turi išmanųjį telefoną, 90% naudojasi savo telefonu prisijungdami.

Amerikos vartotojai per dieną vidutiniškai 1,4 valandos praleidžia naršydami internete mobiliajame įrenginyje.

37% mobiliųjų telefonų savininkų ir 64% išmaniųjų telefonų savininkų naudojasi savo telefonu norėdami gauti naujienas internete.

60% planšetinių kompiuterių vartotojų renkasi naujienų skaitymą mobiliajame internete, o ne per programą.

79% išmaniųjų telefonų vartotojų naudojasi savo telefonais norėdami apsipirkti.

71% vartotojų tikisi, kad mobiliosios svetainės bus įkeltos taip pat greitai, jei ne greičiau nei stalinių kompiuterių svetainės.

74% mobiliųjų lankytojų apleis svetainę, jei atsisiuntimas užtruks daugiau nei 5 sekundes.

Reaguojančios svetainės anatomija

Kūrimo etape yra 3 realaus interneto svetainių kūrimo techniniai komponentai:

  1. Skysčių tinkleliai – Procentais pagrįstas dizainas, kuris atitinkamai prisitaiko prie ekrano dydžio.
  2. Lankstūs vaizdai – Vaizdai, išreikšti santykiniais vienetais, kad būtų galima nerodyti juos turinčio elemento.
  3. Žiniasklaidos užklausos – būdas pritaikyti CSS taisykles puslapyje atsižvelgiant į rodomos naršyklės dydį.

5 pagrindiniai dizaino elementai reaguojančios el. prekybos užtikrinant geriausią įmanomą vartotojo patirtį.

Stiebo galva

Antraštė

Turėtų būti mažas ir paprastas, kad būtų galima sutelkti dėmesį į pagrindinį turinį, tačiau lengvai pastebimas.

Pabandykite naudoti linijinį CSS gradientą, o ne fono paveikslėlį, kad suteiktumėte didesnį dizaino lankstumą ir sumažintumėte HTTP užklausas.

Logotipas

Turėtų būti didesnis ir sumažintas iki galutinių matmenų.

Pirminė navigacija

Arba pagrindinis meniu gali būti sudėtingas dirbant reaguojančiu dizainu, nes mažose telefono ekranuose yra mažai vietos.

Yra daug variantų, kaip tai išspręsti, atsižvelgiant į pasirinktų meniu variantų skaičių, įskaitant:

  • Paprastas meniu inkaras antraštėje, perjungiantis pagrindinį naršymą mažuose ekranuose.
  • Antraštės inkaras, nukreipiantis vartotojus į navigaciją, įdėtą į poraštę.
  • Kairėje skaidrės naršymo juostoje (kaip „Facebook“), prie kurios rodoma meniu piktograma, atidaromas dėklas, kuris slenka iš kairės ir pagrindinį turinį perkelia į dešinę.
  • Naršymas, apimantis pagrindinį puslapio turinį.

Paieškos laukelis

Paieškos laukelis leidžia lankytojams pereiti tiesiai prie to, ko jie ieško.

Vaizdo galerija

Vaizdo naršymas

Užuot naudodamiesi tekstiniu vaizdų naršymu, rodykite skirtingų produktų rodinių peržiūrą.

Vaizdai turėtų būti susieti su didesniais kolegomis.

Produkto vaizdas

Padarykite savo produkto atvaizdą židinio tašku.

Išbandykite lengvą scenarijų, vadinamą „Swipe.js“, kad sukurtumėte lietimui pritaikytą vaizdų karuselę, leidžiančią vartotojams perbraukti tarp produktų nuotraukų lietimui palankiu būdu.

Produkto aprašymas

Produkto peržiūra

Turėtų būti rodomas virš atvaizdo (žymėjime prieš vaizdo talpyklą), lankytojui nurodant produkto pavadinimą, kainą, populiarumą ar įvertinimą.

Tokiu būdu jie gali nustatyti, ar tai yra produktas, kurio jie ieško, nelaukdami, kol bus įkeltas likęs puslapis.

Apžvalgos skaičius

Apžvalgų skaičius pereina prie apžvalgų, esančių žemiau produkto informacijos.

Ši maža detalė gali būti labai vertinga 79% išmaniųjų telefonų vartotojų, kurie naudojasi savo telefonu norėdami apsipirkti ir galbūt net sudaryti ar sugadinti pardavimą..

Kiekio laukas, išskleidžiamasis dydis ir mygtukas Įtraukti į krepšelį

„Share Button“

Dalijimasis turiniu ir produkcija socialiniuose tinkluose gali būti puikus būdas padidinti parodymą. Tiesiog palikite tai paprasta vienu mygtuku.

Poraštė

Poraštės naršymas

Prieigos prie pagrindinės svetainės navigacijos suteikimas yra geras būdas vartotojui pereiti į kitą skyrių ir išvengti jo palikimo aklavietėje..

Klientų aptarnavimo numeris ir el. Paštas

Atminkite, kad telefonai skambina! Lankytojui gali kilti klausimų apie gaminį ir galimybė greitai susisiekti su klientų aptarnavimo atstovu gali būti tik tai, ko jiems reikia norint nuspręsti dėl pirkimo..

Atgal į viršų

Vėlgi, viskas susiję su vartotojo patirtimi ir patogumu!

Šaltiniai

  • Mobiliųjų technologijų informacinis lapas – pewinternet.org
  • Mobiliojo interneto naudojimo ir vartotojų elgsenos tendencijos – madmobilenews.com
  • „MobiForge“ – mobithinking.com
  • Kodėl 2013-ieji yra reaktyvaus interneto dizaino metai – mashable.com
  • „Mobile-First Responsive Web Design“ anatomija – bradfrostweb.com
  • Kaip skystieji tinkleliai veikia reaguojant į žiniatinklio dizainą – 1stwebdesigner.com
  • Be žiniasklaidos užklausų: adaptyvaus interneto dizaino anatomija – slideshare.net
  • Kas gi yra interaktyvus interneto dizainas? – johnpolacek.github.io
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me