Dizajniranje besplatnih aplikacija

Kako dizajneri mogu pomoći u sprečavanju vizualnih problema u iOS aplikacijama

S izdavanjem iOS-a 11, rasprostranjena je zabrinutost da Appleova kvaliteta softvera opada. Mnogi su korisnici imali problema s performansama, softverske greške i vizualne propuste.

Evo primjera vizualne propuste u aplikaciji Messages, uzrokovane prisilnim dodirom da bi se "ispraznila" poruka nakon čega je odmah pritisnuo gumb za povratak.

Uočite dvostruku navigacijsku animaciju i nedostatak animacije na tipkovnici.

Ove vrste vizualnih pogrešaka nisu nove za iOS 11, mobilne aplikacije ili korisnička sučelja. Kako aplikacije postaju sve složenije i očekivanja korisnika rastu, ti naizgled mali bugovi mogu imati veliki utjecaj na krajnji proizvod. Oni čine da se aplikacije osjećaju sumorno.

Što je Jank?

Jank se odnosi na vizualne propuste koji su neočekivani i zbunjujući. Obično nastaju zbog dodatnih animacija ili nedostajućih animacija.

U aplikaciji Medium ikone na alatnoj traci imaju dodatnu animaciju (raste i pomiče se desno) kada se tipkovnica ponovno pojavi nakon otkazivanja prijenosa fotografije.

Aplikacija može biti „škakljiva“ ili pokazati „nesnosnost“ ako se čini da se ponaša pogrešno. Uz vizualne propuste, nesigurnost se može odnositi na neodgovarajuće tipke, nedosljedno ponašanje pri učitavanju ili nespretne geste.

U ovom postu ću se usredotočiti isključivo na vizualne propuste.

Motivacija

Ako ste dizajner, možda se nećete osjećati ovlaštenim popraviti jaknu aplikacija - to je problem s kodom, zar ne?

Dizajneri i dalje igraju kritičnu ulogu. Određeni elementi korisničkog sučelja posebno su škakljivi, pogotovo kada su gurnuti do svojih granica. Ako dizajneri znaju koji elementi uzrokuju smeće, i što je još važnije, ograničenja tih elemenata, mogu stvoriti nacrte za koje je manje vjerojatno da će rezultirati neugodnim aplikacijama.

Raspravljat ćemo o nekim uobičajenim izvorima smeta u iOS aplikacijama i istražiti načine dizajniranja aplikacija koje mogu spriječiti da se ovi problemi uopće pojave.

Navigacijski prijelazi

Započnimo s uobičajenim elementom korisničkog sučelja: navigacijskom trakom.

Evo normalne, sretne navigacijske trake:

Glatki prijelaz pri dodiru gumba za povratak i kad se interaktivno vozi.

Ovdje je lukava, tužna navigacijska traka:

Dodatna animacija crne regije s desne strane; nedostatak animacije kada se pritisne tipka za povratak.

Što nije u redu? Zašto je ovaj navigacijski trak toliko bezobrazan?

U ovom je slučaju navigacijska traka "Početnog" zaslona prozirna, dok je navigacijska traka "Novog zaslona" neprozirna.

Navigacijska traka koju pruža Apple ograničena je i promjenjiva - podržana su samo određena ponašanja. Ako programer želi izmijeniti navigacijsku traku na nepodržani način, nema garancije da će ispravno raditi u svim slučajevima.

Razmatranja dizajna navigacijske tranzicije

Mnogi uobičajeni tretmani navigacijske trake nisu u potpunosti podržani: sakrivanje zadane sive boje 1 px, skrivanje teksta gumba natrag, dodavanje dodatnih prikaza ispod navigacijske trake i omogućavanje geste za leđa s bilo kojeg mjesta na zaslonu.

Kako dizajneri koji možda nisu upoznati s nijansama UINavigationController API-ja mogu dizajnirati oko ovih problema?

Glavni savjet je očuvanje dosljednosti dizajna na svim zaslonima. Ako svaki zaslon ima novi stil trake za navigaciju, tražite problem.

klavijature

Po mom iskustvu, tipkovnice su najčešći izvor smeća. Oba primjera na vrhu ovog posta su povezana s tipkovnicom.

Evo još jednog primjera. Primijetite kako animacija krugova funkcionira u redu pri odabiru slika, ali nije ispravna kada koristite standardnu ​​tipkovnicu.

Razdjelnik za tipkovnicu u Snapchatu.

Razmatranja dizajna tipkovnice

Kad god je uključena tipkovnica, zaslon bi vam trebao biti što jednostavniji. Polovica nekretnina na zaslonu ionako je nestala, pa nemojte spakirati preostali prostor prepun gumba.

Pazite na animacije koje se pojavljuju uz animaciju na tipkovnici i ne pretpostavljajte da imate potpunu kontrolu nad tipkovnicom. Skrivanje tipkovnice bez animacije moguće je, ali može uzrokovati komplikacije kasnije na putu.

Također uzmite u obzir treće i međunarodne tipkovnice. To što vaš dizajn dobro funkcionira sa standardnom engleskom tipkovnicom za iOS ne znači da će raditi za sve. Pretpostavite da je visina tipkovnice nepoznata i da se može promijeniti u bilo kojem trenutku.

Multidržavne animacije

Obožavam multidržavne animacije. Nevjerojatno su zabavni za projektiranje i izgradnju. Međutim, animacije koje imaju mnogo stanja imaju tendenciju da uzrokuju smeće.

Evo primjera višenamjenske animacije pođe po zlu:

Gumb App Store s nenamjernom animacijom.

Ovaj gumb ima više stanja - obično se pretvara u centrifugu i animira se u svrhu preuzimanja koji je u tijeku.

Čak i „normalno“ ponašanje može biti škakljivo. (snimljeno u aplikaciji TestFlight)

Iz toga možemo izvući poučen pogodak o tome odakle je ronilačka buba. Primijetite kada se spinner prvi put pojavi, ali prije nego što započne plavi napredak, gotovo puni sivi krug okreće se na mjestu. Zbog neke pogreške u kodu, gumb "otvori" iznad misli da se nalazi u ovom srednjem stupnju predenja.

Pravo je pitanje previše stanja. Kad animacije dođu u nenamjerena stanja, pokazat će džak.

Razmatranja višenamjenskog dizajna za animaciju

Višedržavne animacije povećavaju složenost. Ako dizajnirate element koji animira između više stanja, svakako uzmite u obzir sve prijelaze stanja i rubne slučajeve. Nešto što na površini izgleda jednostavno, moglo bi biti puno složenije nego što se prvotno mislilo.

Isključivanje dizajna

Sada kada znamo neke uobičajene izvore smeća u iOS aplikacijama, iskoristite našu novu perspektivu za ocjenu dizajna.

Evo grubog i nepotpunog dizajna koji sam napravio prije nekog vremena. Istražio je ideju jednostavne prezentacijske aplikacije. Korisnik može unijeti "podatke" za svaki dijapozitiv, a prezentacija će se automatski prikazati i tematizirati.

Glavni fokus je srednji ekran, gdje korisnik može dodati nove stavke, unijeti tekst, preurediti dijapozitive, horizontalno prelaziti između slajdova i proširiti pregled rendiranog dijapozitiva.

Izgleda prilično dobro, zar ne? Ne. Ovaj dizajn je jednosmjerna karta za Jankville.

Računajmo potencijalne izvore smeća:

  1. Različite navigacijske trake i prijelazi između njih.
  2. Pregledaj dijapozitiva koji uvijek ostaje iznad tipkovnice.
  3. Interaktivna i na temelju stanja animacija proširenja pregleda dijapozitiva.
  4. Animacija za pomicanje i tipkovnica kad korisnik doda brojne retke teksta.
  5. Animacija utemeljena na državi odabirom vrste teksta ("Naslov", "Podnaslov", "Bullet", itd.)

Ono što je najvažnije, nisu svi neovisni - trebamo se baviti nuspojavama svih mogućih kombinacija.

Apsolutno je moguće to izraditi, ali programer bi potrošio znatnu količinu vremena popravljajući propuste u animaciji i državne sukobe. Ovoj će aplikaciji vjerojatno biti potrebna intenzivna pažnja prema detaljima, njezi i sposobnosti da ispravi nastale probleme.

Evo novog dizajna koji sam brzo ismijavao:

Srednji zaslon "Moja prezentacija" proširen je na tri zaslona: prvi za organiziranje dijapozitiva, drugi za organiziranje predmeta i treći za uređivanje pojedinačne stavke.

To smanjuje moguće izvore smeta korištenjem zadanih iOS elemenata i enkapsuliranjem potencijalno problematičnih elemenata. Umjesto prilagođene animacije gumba za proširenje za odabir vrste stavke, korisnik može odabrati iz zadanog odabirača. Tipkovnica se koristi samo na završnom zaslonu i nikad je ne treba skrivati ​​jer postoji samo jedno tekstno polje.

Ovaj se drugi dizajn možda neće činiti jedinstvenim, ali vjerojatnije je da će se osjećati poznato i raditi onako kako se očekuje.

Napomena o prilagođenim dizajnima

Ne želim obeshrabriti izgradnju prilagođenih korisničkih sučelja ili guranje granica onoga što je moguće. Volim stvarati svježa iskustva - to je ono što dizajn i razvoj iOS-a čini zabavnim.

Ali prečesto sam vidio prilagođene dizajne koji samo 90% čine put do završetka. Zbog raznih razloga, zadnjih 10% propada, a nesigurnost ostaje u inače dobro dizajniranim aplikacijama.

Ako su dizajneri svjesni najčešćih zamki, programerima mogu pomoći da ih izbjegnu što rezultira boljim iskustvom za sve.

takeaways

Dizajneri mogu pomoći u sprečavanju smeća poznavanjem uzroka i izmjenom dizajna u skladu s tim.

Evo nekoliko praktičnih koraka za smanjenje otpada:

  1. Rano unesite programere. Iskusni programer za iOS može brzo procijeniti složenost izrade dizajna i informirati vas o potencijalnim problemima.
  2. Pojednostavite dizajne! Složenost je lako sakriti pod pretpostavkom da će se prijelazi i animacije sami riješiti. Razmatrajući sve moguće slučajeve i prijelaze, prirodno ćete krenuti prema jednostavnijim rješenjima.

Nadamo se da ste saznali neke od razloga zbog kojih se neke aplikacije osjećaju neugodno, i što je još važnije, osjećate se osnaženima za rješavanje šljaka kroz dizajn!

Uživao u priči? Ostavite nekoliko clapova ovdje na Medium i podijelite ih sa svojim iOS dizajnerskim / dev prijateljima. Želite biti u tijeku najnovije informacije o dizajnu / razvoju mobilnih aplikacija? Pratite me na Twitteru ovdje: https://twitter.com/nathangitter

Hvala Davidu Okunu na reviziji nacrta ovog posta.