Reaģējošās vietnes ir vietnes, kas pielāgojas visiem ekrāna izmēriem un izšķirtspējām ne tikai darbvirsmā, bet arī mobilajā, planšetdatorā un dažreiz pat televizorā.

Pēc valstsvīra domām , mobilā trafika bija atbildīga par 52,64% no visas pasaules trafika 2017. gadā, tas nozīmē, ka vietne nē labi optimizēta mobilajām ierīcēm ir zaudējot aptuveni pusi no satiksmes . Sagaidāms, ka līdz 2018. gada beigām mobilo ierīču kopējā trafika daļa pieaugs līdz 79% , kas ir ārkārtējs pieaugums.

Uzņēmumi bez vietnes mobilajām ierīcēm satraucoši strauji atpaliek, jo 8 no 10 apmeklētājiem pārtrauks iesaistīties ar vietni, kas viņu ierīcē netiek labi rādīta. Lietotājiem ir pārāk viegli nospiest pogu Atpakaļ un tā vietā izmēģināt konkurentu biznesu Google pat ierindo vietnes, kuru meklēšanā nav atsaucīgas .

Jūs varat nokārtot Google mobilajām ierīcēm piemērotu testu šeit .

Vai tas nozīmē, ka mobilais ir svarīgāks par galddatoru? Nē. 83% mobilo sakaru lietotāju saka ka viņiem vajadzētu būt iespējai turpināt pieredzi darbvirsmā, ja viņi to vēlas.

Apskatiet šo mobilajām ierīcēm optimizēto eBay versiju salīdzinājumā ar to, kā tas izskatītos, ja tā atvairīt optimizēts mobilajām ierīcēm. Vai jūs pat apsvērtu neoptimizēto versiju?

Lai izveidotu vietnes, kas varētu konkurēt mūsdienu internetā, tīmekļa dizaineri jābūt būt ekspertiem atsaucīgs tīmekļa dizains (RWD). Ar ko viņiem vajadzētu sākt?

Pirmā pieeja mobilajām ierīcēm atsaucīgam tīmekļa dizainam

Tīmekļa dizains, kas paredzēts mobilajām ierīcēm, vispirms nozīmē mobilās vietnes dizainu un darbu līdz darbvirsmas versijai. Ir vairāki iemesli, kāpēc šī pieeja darbojas labi.

1. Mobilajām vietnēm ir vairāk problēmu par lietojamību (tas galvenokārt saistīts ar ekrāna nekustamā īpašuma trūkumu), tāpēc ir praktiski un efektīvāk, ja galvenā uzmanība tiek pievērsta mobilo ierīču dizainam.
2. Tas ir vieglāk paplašinātu mobilo versiju, nekā tas ir samazināt uz leju darbvirsmas versija (atkal, jo mobilajās vietnēs trūkst vietas).
3. Tīmekļa dizains mobilajām ierīcēm vispirms palīdz pārvērtēt vizuāli un funkcionāli nepieciešamo.

Veidojot vietni kā vispirms mobilajām ierīcēm piemērotu vietni, dizaineri liek dizaineriem uzdot vairākus svarīgus jautājumus, jo ir mazāk ekrāna nekustamo īpašumu, ar kuru strādāt. Šeit ir jautājumi, kas jāuzdod:

• Vai šī funkcija / funkcija patiešām ir nepieciešama?
• Kā vispirms mēs varam izstrādāt kaut ko minimālismu mobilajām ierīcēm, kas vēlāk labi palielināsies galddatoriem?
• Vai šis vizuālais efekts ir vērts to laiku, kas nepieciešams, lai ielādētu mobilajā ierīcē?
• Kāds ir galvenais mērķis un kādi vizuālie elementi palīdz lietotājiem to sasniegt?

Pēc brīža mēs apskatīsim dažus atsaucīgus tīmekļa dizaina piemērus. Pagaidām parunāsim par to, kuras ierīces, ekrāna izmēri un tīmekļa pārlūkprogrammas ir aktuālas šodien.

Kādas ekrāna izšķirtspējas ir piemērotas adaptīvam tīmekļa dizainam?

Šeit ir visbiežāk izmantotās ekrāna izšķirtspējas mobilo ierīču, planšetdatoru un galddatoru lietotājiem visā pasaulē. Kā redzat, ir plašs izšķirtspēju klāsts, tāpēc šobrīd ne mobilais, ne planšetdators, ne galddators dominē tirgus daļā - tas mums saka, ka dizaineriem, domājot par atsaucīgu tīmekļa dizainu, būtu jāņem vērā tie visi.

• 360x640 (mazs mobilais): 22,64%
• 1366x768 (vidējais klēpjdators): 11,98%
• 1920x1080 (liels darbvirsma): 7,35%
• 375x667 (vidēji mobilais): 5%
• 1440x900 (vidēji darbvirsmā): 3.17%
• 720x1280 (liels mobilais): 2,74%

Tāpat kā ierīču sadalījumā, mums vajadzētu segmentēt datus pēc atrašanās vietas, lai tie atbilstu mūsu mērķauditorijas lietotāju demogrāfiskajiem datiem (vai paredzamajiem lietotāju demogrāfiskajiem datiem). Ir vērts pievērsties arī arvien populārākām izšķirtspējām, jo, lai gan daži ekrāna izmēri pašlaik nav tik izplatīti, tie var būt arī nākotnē. Tas palīdzēs atsaucīgi dizaineri amatniecības futureproof UX, kas darbosies pat tad, ja mainīsies tirgus daļa.

Piemēram, 360x640 izšķirtspējas (kas galvenokārt atbilst Samsung ierīcēm, kurās tiek izmantots Android), pēdējā gada laikā ir palielinājušās par 5,43%. Dizaineri var izmantot vērtīgu ieskatu, piemēram, šo, lai izlemtu par galvenajiem reaģējošajiem pārtraukuma punktiem pirms vietnes dizaina sākšanas.

Kādas tīmekļa pārlūkprogrammas šodien ir populāras?

Adaptīvs tīmekļa dizains ir saistīts ar nevainojamas pieredzes piedāvāšanu jebkurā ierīcē, un, tā kā dažādas tīmekļa pārlūkprogrammas tīmekļa lapas atveido dažādos veidos, vietnes ir jāpārbauda, ​​lai pārliecinātos, ka tās ir saderīgas ar dažādām mobilajām un galddatoriem paredzētajām tīmekļa pārlūkprogrammām.

geštalta tuvuma definīcijas princips

Kaut arī vietnes mēroga izveidošana atbilstoši pareizajiem reaģēšanas robežpunktiem galvenokārt ir tīmekļa izstrādātāja pienākums, tieši tīmekļa dizaineris izlemj, kā adaptīva vietne pielāgosies dažādiem ekrāna izmēriem, lai radītu optimālu lietotāja pieredzi.

Šeit ir sadalījums visā pasaulē interneta pārlūka tirgus daļa mobilajām ierīcēm un galddatoriem.

• Hroms: 55,04%
• Safari: 14,86%
• UC pārlūks: 8,69%
• Firefox: 5,72%
• Opera: 4,03%
• Internet Explorer: 3,35%

Atsaucīgais dizains nenozīmē tikai visu pielāgošanu - tas ir arī pielāgošanās ierīces aparatūras un tīmekļa pārlūka iespējām kā arī ierīces izšķirtspēja. Viens piemērs tam varētu būt tāds, ka, kamēr Google Chrome atbalsta CSS īpašumu overscroll-behavior: (kas nosaka, kas notiek, kad lietotājs pārāk stipri ritina uz skata malas pusi), tas ir netiek atbalstīts nevienā citā tīmekļa pārlūkprogrammā .

Atsaucīga dizaina paraugprakse

Novērst berzi

Kā jau minēts iepriekš, pieeja mobilajām ierīcēm vispirms adaptīvam tīmekļa dizainam palīdzēs dizaineriem novērtēt to, kas patiešām ir nepieciešams, lai lietotājs varētu sasniegt savu galveno mērķi.

Kad mēs veidojam planšetdatora versiju (un vēlāk darbvirsmas versiju), tad mēs varam sākt domāt par sekundārajiem mērķiem un mikrointerakcijas , lietotāju plūsmas un CTA (aicinājumi uz darbību), kas ļauj sasniegt šos lietotāja mērķus. Svarīgāk ir tas, ka mēs vispirms koncentrējieties uz lietotāja galvenajiem mērķiem un novērstu jebkādu nevajadzīgu berzi tas neatbalsta ne primāros, ne sekundāros mērķus.

Galvenais mērķis varētu būt produkta iegāde, bet sekundārais mērķis ir pieteikšanās uz biļetenu (kas vēlāk var novest pie pirkuma).

Šis ir drausmīgs berzes novēršanas piemērs: tā kā mobilo lietotāju saskarnēs parasti ir grūtāk orientēties, vislabāk būtu pāriet uz vienas lapas norēķinu mobilā e-komercija veikalos un iespējojiet daudzpakāpju norēķinus tikai darbvirsmas e-komercijas veikalos.

Dizains īkšķiem

Reaģējošais tīmekļa dizains ir grūts tādā ziņā, ka lietotāji mijiedarbosies ar darbvirsmas vietni, izmantojot klikšķus, bet mobilā versija - ar pieskārieniem un vilkšanu. Ir arī fiziskas atšķirības. Galddatoru lietotājiem parasti ir datori, bet mobilo ierīču lietotāji tur savas ierīces rokās. Šīs atšķirības būtiski maina veidu mobilo lietotāja interfeisu dizaineri noformējiet pieskaršanās mērķus un citus svarīgus lietotāja saskarnes elementus, ar kuriem lietotāji mijiedarbojas.

Apskatīsim dažus piemērus:

• Cilvēki parasti sagaida, ka galvenā darbvirsmas navigācija būs augšpusē; tomēr mobilajā ierīcē tam jābūt apakšā. Īkšķi ērti nesasniedz augšdaļu.
• Arī citiem interaktīvajiem elementiem jābūt viegli sasniedzamiem. Tas nozīmē, ka tie tiek turēti ekrāna centrā, jo īkšķiem ir grūtāk piekļūt ierīces ekrānu sāniem un stūriem.
• Lai tos varētu viegli pieskarties, svarīgu saišu un CTA augstumam jābūt vismaz 44 pikseļiem (mazāki pieskaršanās mērķi ir slikti lietojamībai).

Ieteicamā literatūra: Mobilo ierīču izmantošanas pamatnostādnes .

Izmantojiet mobilo ierīču vietējās aparatūras priekšrocības

Mobilā aparatūra (piemēram, ierīces kamera vai GPS pakalpojumi) nav īpaši rezervēta vietējām lietotnēm, un, kā jau minēts iepriekš, atsaucīgs tīmekļa dizains nenozīmē tikai visu padarīt piemērotu. Tas ir arī par pielāgošanos ierīces iespējām. Mobilā tīmekļa dizaina gadījumā, tā kā mobilajām ierīcēm ir viegli lietojamas kameras, dažas mikro mijiedarbības - piemēram, datu ievade - faktiski ir vieglākas mazākos ekrānos, kamēr vietnes izmanto pieejamo vietējo aparatūru.

Apskatīsim dažus piemērus:

• Kredītkartes / papildkartes skenēšana (jo veidlapas mobilajā ierīcē bieži ir sarežģītas)
• Fotoattēlu kopīgošana sociālajos tīklos, jo multivide jau atrodas jūsu ierīcē
• Divu faktoru autentifikācija (jo jūs jau izmantojat savu mobilo ierīci)
• Ātra krājumu / analīzes pārbaude (jo mobilās lietotnes vienkāršo informāciju)
• Veicot a meklēšana tīmeklī ar balsi (jo brīvroku ir vieglāk nekā rakstīt)

Pēc noklusējuma izkārtojumus padarīt plūstošus / adaptīvus

Ne katram lietotājam tiks maksimizēta darbvirsmas pārlūkprogramma. Tas nozīmē, ka, lai arī dizaineriem jāņem vērā to ierīču atsaucīgie pārtraukumpunkti, kuras lietotāji šodien izmanto, viņiem ir jāņem vērā arī tas, kas notiek starp šiem pārtraukuma punktiem.

Reaģējošie pārtraukuma punkti jāizmanto, lai izkārtojumu un saturu “pārveidotu” jaunā ierīcē, taču, lai ņemtu vērā visus starplaikos esošos izmērus (katram gadījumam), izkārtojumiem jābūt citādiem. šķidrums (tas ir, viņi, protams, pielāgojas / izstiepjas, pārlūkprogrammai mainot izmērus).

kā veikt veiktspējas regulēšanu sql

Izstrādājot plūstošus / adaptīvus izkārtojumus, ņemiet vērā šos padomus:

• Procentuālās vienības ļaus elementiem būt šķidriem.
• Nosakot minimālo un maksimālo platumu, varat iespējot scenāriju “bet neiet mazāks / lielāks par šo”.
• SVG attēlu formātus var palielināt un samazināt, nezaudējot kvalitāti, un tie nav atkarīgi no izšķirtspējas (atšķirībā no JPG un PNG, kas nav).

Neaizmirstiet par ainavas orientāciju

Mēs jau iepriekš runājām par konkrētiem reaģējošiem pārtraukuma punktiem, taču mums jāņem vērā arī tas, ka šos mobilos skatu logus var parādīt arī ainavas orientācijā. Īstenojot plūstošu izkārtojumu, tas tehniski padarīs saturu adaptīvu, zaudējot diezgan lielu daļu portrets skats var būt šķērslis izmantojamībai un pieejamībai.

Navigācijas parasti ir drošas (dažreiz tās ir labākas, jo lietotāji parasti orientējas ainavas orientācijā divi īkšķi), bet ritināšana kļūst ievērojami grūtāka, kas ir mazāk nekā optimāli, jo lietotājam ir jāritina vairāk ainavā.

Dizaineri varētu vēlēties apsvērt arī ainavas pārtraukuma punktu projektēšanu; piemēram, elementus, kas vertikāli sakrauti mobilajā ierīcē, varētu parādīt kā slīdni ar kreiso un labo navigācijas pogu, kas nozīmē, ka lietotājam nav jāritina.

Atcerieties, ka tipogrāfija var būt arī atsaucīga

Pat ja UX dizaineri parasti izmanto pikseļu vienības, lai izveidotu vietnes, faktiskajā tīmeklī viens punkts vairs nav vienāds ar pikseļu, jo dažādām ierīcēm ir atšķirīga izšķirtspēja. Piemēram, iPhone X ir 458 PPI (pikseļi uz collu), tāpēc, ja pikseļu izmēri kļūst mazāki, mēs tajā pašā fiziskajā telpā varam sasniegt precīzāku grafiku (Apple sauc šo tehnoloģiju “Retina”, bet Android to sauc “HDPI”).

Tas nozīmē, ka, piemēram, 16 pikseļu fonta lielums dažās ierīcēs izskatīsies lielāks vai mazāks atkarībā no tā izšķirtspējas. Tīmekļa izstrādātāji parasti to darīs izmantojiet em vienības, lai definētu fonta lielumus , kas ir reaģējošas vienības veids, kur 1em ir vienāds ar 1 punktu.

Dizaina nodošanas rīki, piemēram, Zeplin , Sympli , Brīnīties , un InVision var palīdzēt dizaineriem sadarboties ar izstrādātājiem jautājumos, kas ir kopīga atbildība. Kamēr dizaineri izpilda dizainu, un izstrādātāji izpilda kodu, kopumā produkta dizaina darbplūsma ir komandas darbs, kas prasa stabilu saziņu.

Atsaucīgi dizaina veiktspējas optimizācijas padomi un paraugprakse

Atsaucīgs tīmekļa dizains attiecas ne tikai uz tā izskatu, bet arī uz to, kā tas darbojas un jūtas. Tikpat svarīgi ir pielāgot vietnes, lai tās ātrāk ielādētos paredzētajā ierīcē.

Slinki ielādējiet nebūtiskus attēlus un videoklipus

Attēli un videoklipi veido lielu daļu no kopējās vietnes lejupielādes lieluma, taču tie nav jāielādē visi vienlaikus. Ir divi scenāriji, kad multivides renderēšanu var aizkavēt: saturu, kas atrodas zem reizes, var ielādēt, kad lietotājs ritina zem reizes, un renderēšanu bloķējošo datu nesēju vajadzētu lejupielādēt, lai lejupielādētu tikai pēc izkārtojuma un satura lejupielādes. Šo praksi sauc par slinku ielādi, kur, lai uzlabotu lapas veiktspēju, tiek aizkavēta smagu, nesvarīgu elementu ielāde.

Nosacīta iekraušana

Daži vietnes elementi nav paredzēti mobilo ierīču lietotājiem, vai vismaz tie nav vērts par papildu kognitīvo slodzi. Mēs vēlamies, lai mūsu vietnes mobilajām ierīcēm būtu vienkāršas, tāpēc ir lietderīgi atsevišķos gadījumos paslēpt elementus. Tas nozīmē, ka mums jāpārliecinās, ka mēs netērējam pārlūka resursus un joslas platumu, ielādējot šos elementus pat tad, ja tie ir paslēpti; līdz ar to ir ieteicams šos elementus iekļaut tikai noteiktos apstākļos.

Atkal izstrādātājs to var panākt ar kodu; tomēr dizaineri var uzlabot lapas veiktspēju, paziņojot nosacījumus, kad un kur noteikti elementi ir un kādam nevajadzētu pastāvēt.

Atsaucīgi attēli

Kā minēts iepriekš, dažās ierīcēs tiek parādīts vairāk pikseļu collā, kā rezultātā attēli var būt neskaidri, ja tie netiek eksportēti pareizā izšķirtspējā. Atkarībā no ierīces izšķirtspējas dažiem būs nepieciešami attēli ar divkāršu (@ 2x), trīskāršu (@ 3x) un pat četrkāršu (@ 4x) izmēru. Tagad tīmekļa pārlūkprogrammas atbalsta elementu, kas atkarībā no ierīces izvēlas pareizu attēla izšķirtspēju.

Dizaineri, kas izstrādā atsaucīgas vietnes, var pielāgot attēlus pareizajai ierīcei, pārliecinoties eksportēt visas izšķirtspējas, kas tiek izmantotas mūsdienu ierīcēs (ja neesat pārliecināts, jautājiet savam izstrādātājam - saziņa ir ļoti svarīga, lai atbildētu uz tīmekļa dizainu).

Secinājums

Karkasa veidošana var palīdzēt izlīdzināt krokas jau projektēšanas procesa sākumā, un tas labi darbojas, ja mobilajam telefonam vispirms ir pieeja reaģējošam tīmekļa dizainam. Varbūt ir kāds reaģējošs pārtraukuma punkts, kam jāpievērš īpaša uzmanība, vai varbūt ir koncepcija, kas mobilās reaģēšanas ziņā vienkārši nav efektīva. Ceļa izciļņus labāk atrast ātrāk, nevis vēlāk (t.i., pirms vizuālās estētikas pievienošanas).

Mūsdienu dizaina rīki, piemēram, Adobe XD , Brīnīties , un InVision ļauj komandām pārbaudīt prototipus reālās ierīcēs, apspriest atgriezenisko saiti kontekstā un parasti sadarboties komandā, līdz izkārtojums darbojas visos scenārijos.

Izmantojot vienkāršu UX darbplūsmu, kur atsaucīgu dizainu vada iekšējā testēšana un atgriezeniskā saite, tiks nodrošināts, ka lietotāja pieredze vienmērīgi darbojas visās platformās un ekrāna izšķirtspējā, pirms tiek pirmo reizi parādīta reālam lietotājam.

grieķu finanšu krīzes saknes ir

• • •

Papildu lasījums ApeeScape dizaina emuārā:

• e-komercijas lietotne - labākās prakses pārskats (ar infografiku)
• Uz cilvēku vērsta dizaina nozīme produktu dizainā
• Labākie UX dizaineru portfeļi - iedvesmojoši gadījumu pētījumi un piemēri
• Heiristiskie principi mobilajām saskarnēm
• Iepriekšējs dizains: kā izveidot maģisku lietotāja pieredzi

Izpratne par pamatiem

Kas ir reaģējošā dizaina lūzuma punkti?

Lūzuma punkti ir galvenie momenti, kad dizains tiek pielāgots jaunam ekrāna izmēram; piemēram, pārtraukuma punktu varētu definēt ar 320 pikseļiem, kas ir lielākās daļas mobilo ierīču skatu punktu horizontālais izmērs.

Kas ir atsaucīgs tīmekļa dizains?

Reaģējošs tīmekļa dizains ietver tādu vietņu projektēšanas procesu, kas gan formas, gan funkciju ziņā pielāgojas visām ierīcēm, platformām un ekrāna izmēriem.

Ko nozīmē būt draudzīgam mobilajām ierīcēm?

Mobilajām ierīcēm draudzīgu vietņu izstrāde nozīmē vietņu pielāgošanu mobilajām ierīcēm. Google definē draudzīgumu mobilajām ierīcēm, nosakot, vai pieskaršanās mērķi atbilst minimālajām prasībām - vismaz 44x44 pikseļi, vai fonti ir pietiekami lieli, lai tos varētu lasīt, un vai, starp citu, skata portā tiek pārtraukts saturs.