„Micro Appactions“ supratimas „Mobile App Design“

Naudojimas yra vienas iš pagrindinių komponentų mobiliojo vartotojo sąsajos dizainas. Labai dažnai naudojamasi mikrointeraktyvumas kurie yra mažas atsakas ir sąsajos elgesys diktuoja, kaip turėtų būti naudojama UI. Šios mikro sąveikos apibrėžia elgesį, skatina įsitraukimą ir padeda naudotojams suprasti, kaip sąsaja turėtų veikti.

Skaitmeninės sąsajos yra tarpininkai tarp naudotojų ir jų norimi tikslai. Sąsajų dizaineriai sukuria patirtį, kuri padeda vartotojams atlikti tam tikras užduotis. Pvz., Sąrašo programoje yra sąsaja, kuri padeda vartotojams organizuoti savo užduotis. Kaip ir „Facebook“ programa suteikia vartotojams sąsają su „Facebook“ paskyra.

Šiame vadove aš įsiskverbsiu toliau mobiliųjų programų mikrointeraktyvumas. Mažos sąveikos gali atrodyti nereikšmingos, tačiau jos gali turėti didžiulį poveikį vartotojo patirties kokybę. Tinkamai atlikus „microinteractions“ jaučiasi tikra visuotinės mobiliojo naudotojo patirties dalis.

Mikroaktyvumo galia

Daugeliu atvejų „mikrointeraktyvumo“ tikslas yra pateikti atsiliepimą remiantis vartotojo veiksmais. Tai gali padėti vartotojams vizualizuokite, kaip sąsaja juda ar elgiasi, nors jis yra tik skaitmeninis plokščiame ekrane.

Mikrointeraktyvumas turi galią, nes jie sukurti iliuzinę patirtį. Įjungimo / išjungimo slankikliai iš tiesų neperkelia fizinių jungiklių, tačiau jie gali judėti tokiu būdu per animacijas.

Šiame pranešime radau neįtikėtiną citatą, kuriame aptarė milžinišką mobiliųjų programų mikrointerakcijų vertę:

“Geriausi produktai yra du dalykai: savybės ir detalės. Įranga yra tai, kas atkreipia žmones į jūsų produktą. Išsami informacija yra tai, kas juos saugo. Ir tai, kas iš tikrųjų daro mūsų programą, išsiskiria iš mūsų konkurencijos.”

The smulkios detalės gali pasirodyti nereikšmingi iš vystymosi perspektyvos, bet iš vartotojų patirties jie tikrai iš tikrųjų skirtumą tarp „OK“ programos UI ir ypatingos programos vartotojo sąsajos.

Didžiosios mikrointeraktyvumas daro vartotoją jaučiate atlygį imtis veiksmų. Šie veiksmai gali būti pakartoti ir įsijungė į vartotojo elgesį. Jie gali sužinoti, kaip naudoti programą, paremtą šiomis mažesnėmis mikrointerakcijomis. Kai vartotojas elgiasi, šie nedidelės sąveikos signalai „taip, galite bendrauti su manimi!“.

Pažvelkite į „Google“ medžiagų dizaino specifikacijų pavyzdžius. Dokumentai iš tikrųjų turi visą skyrių, skirtą materialiniam judėjimui. Erdviniai santykiai yra didelė šios lygties dalis, tačiau judėjimas gali diktuoti daugiau nei erdvinius santykius.

Čia yra dažniausiai naudojami animacija ir judesiai mobiliajame UI / UX dizaine:

• Naudotojai tarp skirtingų puslapių
• Naudodami vartotojus per sąsają mokykite tam tikrą elgesį
• Siūlomi veiksmai / elgesys, kurių galima imtis bet kuriame puslapyje

Mobiliosios programos turi daug mažiau ekrano vietos nei svetainių. Tai gali sukelti tam tikrų sunkumų, išmokančių naudotojus, kaip naudoti programą. Bet tai gali būti stebėtinai paprasta, jei žinote, kaip tinkamai įdiegti mikrointerakcijas.

Kaip veikia „Microinteractions“

Vienas mikrointeraktyvus gaisras, kai vartotojas užima vieną sąsajos dalį. Dauguma mikrointerakcijų yra animuotus atsakymus į vartotojo gestą. Taigi judantis judesys reaguos kitaip nei čiaupas ar blyksnis.

„Blink UX“ atliko puikų pranešimą, kuriame aptarė smulkias mikrosakcijų detales. Šios mažos animacijos turėtų sekti a nuspėjamas procesas kad vartotojas gali išmokti kiekvienai programos sąveikai.

„Microinteractions“ padeda vartotojams per sąsają pasiūlyti atsakymus į elgesį. Kai vartotojas žino, kad įjungimo / išjungimo slankiklis gali judėti, jie žino, kad tai interaktyvus. Remdamiesi atsakymu, jie taip pat žinos, ar nustatymas buvo įjungtas ar išjungtas. Kai atrodo, kad mygtukas paspaudžiamas naudotojui instinktyviai žino jie gali bendrauti su juo.

Pagal UXPin, kiekviena pagrindinė mikrointerakcija gali suskirstyti į keturis etapus, tačiau apibendrinau procesą trys pakopos.

1. Veiksmas - vartotojas daro kažką kaip pleiskanojimas, braukimas, bakstelėjimas ir palaikymas, arba kita sąveika.
2. Reakcija - sąsaja reaguoja remiantis tuo, kas turi įvykti. Ekrano nuvilkimas gali grįžti atgal į naršyklės istoriją, arba bakstelėjus įjungimo / išjungimo slankiklį, nustatymas gali būti išjungtas.
3. Atsiliepimas - būtent tai yra naudotojas faktiškai mato kaip sąveikos rezultatas. Kai vartotojas nusišypso atgal į mobilųjį naršyklę, jis gali plisti ankstesnį puslapį, kad jis būtų rodomas ekrano viršuje. Įjungimo / išjungimo slankiklis gali sklandžiai sklisti arba didėti, kai ekrane pasireiškia slėgis.

Šie labai nedideli veiksmai gali būti atlikti be animacijos, bet labai didelės sąveikos siūlomos a realistinis jausmas į plokščią skaitmeninę sąsają, kuri dažniausiai yra realus animacinis efektas. Tai įkvepia gyvenimą į sąsają ir skatina daugiau naudotojų sąveikos.

Ieškokite informacijos

Žiūrėdami į mažesnius dizaino elementus suprasite, kaip programa turėtų reaguoti į tam tikrą elgesį.

Patraukite, kad atnaujintumėte yra geras dabar populiarios mikrointerakcijos pavyzdys. Tai nebuvo sudėtinė iOS dalis, kai ji pirmą kartą buvo paleista, tačiau daugelis programų ėmėsi šios idėjos ir pradėjo ją judėti. Dabar traukite atnaujinti yra gerai žinomas elgesys, kurį dauguma vartotojų tiesiog naudojasi naršydami kanalo UI. Tą patį galima pasakyti apie mobiliuosius mėsainius, kurie populiariai augo.

Padarykite kiekvieną mikrointerakciją realus ir paprastas. Negalima per daug animuoti, nes jie gali tapti varginantis jei jie yra pernelyg išsamūs ir dažnai naudojami. Vartotojas nenori, kad kiekvieną kartą, kai palieskite meniu piktogramą, atsiranda sparkles. Suraskite pusiausvyrą su tikrąja verte, kuri bendrauja kaip sąsaja turėtų veikti be bėgimo.

Žvelgiant į kai kuriuos pavyzdžius

Manau, kad geriausias būdas išmokti kažką yra tai padaryti, o antras geriausias būdas yra ištirti kitų darbą. Surinkiau nedidelį sauja UI / UX mikrointeraktyvios animacijos iš talentingų „Dribbble“ naudotojų parodyti jums, kaip jie atrodo realiame makete.

Kiekviena paraiška bus skirtinga ir turės skirtingus poreikius pagal tai, ką programa daro. Galų gale dauguma vartotojų nori to paties: app intuityvus ir suteikia kokybišką vartotojo patirtį su mikrointeraktyvumu, palyginti su naudotojo elgesiu.

1. Animuoti įvykio programos vartotojo sąsaja

Pirmasis pavyzdys - Ivan Martynenko sukurta gera kortelių animacijos funkcija. Jūs pastebėsite keletas mikrointerakcijų į šį projektą, ypač kortelės nuvilkimas ir judėjimas per detales.

Paliesdami kortelę, ji auga. Ir kai abonentų sąraše bakstelėjote mygtuką „Prenumeruoti“, naudotojo profilio nuotraukų skaidres. Viskas jaučiasi labai intuityvi ir gana natūrali sąsajai.

2. Interaktyvus pratybų ekranas

Ši kūrybinė mobiliojo pratimo animacija yra iš dizainerio Vitalio Rubcovo. Jis demonstruoja vartotojui, kad taupo savo treniruotes vienai pritūpimų grupei.

Atkreipkite dėmesį, kad kiekviena animacija yra tokia pati elastingas atšokimo efektas kai meniu atidaryti ir uždaryti. Taip yra ir tada, kai veikla yra pažymėta kaip „Atlikta“. Nuoseklumas yra labai svarbi, nes jie visi jaučiasi prijungtas prie tos pačios sąsajos.

3. Ieškoti „App Microinteractions“

Trumpas, saldus ir taškas. Manau, kad tai geriausiai apibūdina šias „Lukas Horak“ sukurtas paieškos programų mikrointerakcijas. Kiekviena animacija yra greitai, bet vis dar pastebimas.

Štai kaip jums reikia sukurti „microinteractions“ išvengti pernelyg sudėtingo. Jei sąsaja būtų įkelta greičiau be animacijos, tai kodėl jausitės pridėti jį? Greita animacija saugokite vartotoją, nesukeliant patirties.

4. Sporto tikslo „mikrointeraktyvumas“

Manau, kad Jakubas Antalas? Ekranai visi turi šį jiggly jell-o jausmą, nes figūros juda taip sklandžiai.

Tačiau sąsaja taip pat jaučiasi kietas ir tinkamas naudoti. Tai parodo, kad mikroobjektai, sukurti su tikslu, vis dar gali būti linksmi ir linksmi, bet ir funkcionalūs bei pragmatiški.

5. Patraukite, kad atnaujintumėte animaciją

Čia yra vienas iš mano absoliutų mėgstamų animacinių animacijų, kurias sukūrė komanda „Ramotion“. Tai ne tik imituoja skystį su traukos veiksmu, bet atsakymo animacija sklandžiai jungia nuo skysčio purslų į pakrovimo ratą.

Tai daug dėmesio skiriama detalėms tai, kas atneša tikrą grožį mobiliųjų programų mikrointerakcijose.

6. Skirtukas „Microinteraction“

Valdomi valdikliai dėl mažesnių ekranų mobiliųjų programų atveju yra gana dažni. Man labai patinka šis „John Noussis“ sukurtas „microinteraction“, nors manau, kad greičiau būtų veiksmingiau, bet pati animacija yra šlovinga ir gerai apgalvota.

Skirtukas su ankerine juosta slenka į dešinę, kaip naujas turinys atsiduria iš dešinės. Tai suteikia iliuziją visą ekraną fiziškai juda į dešinę. Animacija yra išskirtinė, bet, kadangi tai taip lėtai, manau, kad dauguma vartotojų nustebins po kelių dienų.

7. Animacijos įkėlimas

Aš daug nesakiau pakrovimo strypai šiame pranešime, tačiau jie yra lygiai tokie pat vertingi kaip bendra patirtis. Dauguma vartotojų nenori laukti, kol duomenys bus įkelti, tačiau jie tikrai nenori žiūrėti tuščio ekrano, kai jis įkeliamas.

Bret Kurtz padarė šį nuostabų išankstinio krovimo ekraną, kuris buvo įdomus ir informatyvus. Vartotojas gali būti pramogauti žiūri šią mažą animaciją. Jie taip pat gali būti pasitikėjo kad programa yra vis dar įkelia savo duomenis ir neužstrigo.

Apvyniojimas

Visi šie pavyzdžiai puikiai demonstruoja mikrointerakcijų vertę. Mobiliosios programos gauna daug daugiau naudos iš mikrointerakcijų, nes naudotojai fiziškai palieskite ekranus su pirštais. Vartotojai nenaudoja savo darbalaukio monitorių ar jų nešiojamųjų kompiuterių ekranų, tačiau kiekvienas palies savo smartfon, nes tai yra numatytoji interaktyvumo būsena.

Tai yra daug daugiau asmeninės patirties, todėl mobiliosios programos dizainas gali būti toks niuansuotas procesas. Tinkamai atlikus puikių mobiliųjų mikrointeraktyvų pridėjimą galima sukurti galinga iliuzinė vartotojo patirtis iš nieko, išskyrus pikselius ir judesius.