Jank-Free-sovellusten suunnittelu

Kuinka suunnittelijat voivat estää visuaalisia häiriöitä iOS-sovelluksissa

IOS 11: n julkaisun myötä oli laaja huolenaihe Applen ohjelmistojen laadun heikentymisestä. Monet käyttäjät kokivat suorituskykyongelmia, ohjelmistovirheitä ja visuaalisia häiriöitä.

Tässä on esimerkki Viestit-sovelluksen visuaalisesta häiriöstä, jonka aiheuttaa sanoman "koskettaminen" väkivallalla, jota seuraa heti napauttamalla Takaisin-painiketta.

Huomaa kaksoisnavigointianimaatio ja näppäimistön animaation puute.

Tällaiset visuaaliset virheet eivät ole uusia iOS 11: lle, mobiilisovelluksille tai käyttöliittymille. Sovellusten monimutkaistuessa ja käyttäjien odotusten noustessa näennäisesti pienillä virheillä voi olla suuri vaikutus lopputuotteeseen. He tekevät sovelluksista tuntemaan janky.

Mikä on Jank?

Jank viittaa visuaalisiin häiriöihin, jotka ovat odottamattomia ja häiritseviä. Yleensä ne johtuvat ylimääräisistä animaatioista tai puuttuvista animaatioista.

Medium-sovelluksessa työkalurivikuvakkeilla on ylimääräinen animaatio (kasvava ja liikkuva oikealle), kun näppäimistö tulee uudelleen näkyviin valokuvan lähettämisen peruuttamisen jälkeen.

Sovellus voi olla ”janky” tai ilmentää ”roskaa”, jos se näyttää käyttäytyvän väärin. Visuaalisten häiriöiden lisäksi häiritsevyys voi viitata reagoimattomiin painikkeisiin, epäjohdonmukaiseen lastauskäyttäytymiseen tai hankaliin eleisiin.

Tässä viestissä aion keskittyä yksinomaan visuaalisiin häiriöihin.

Motivaatio

Jos olet suunnittelija, et ehkä tunne valtaa korjata sovellusten tukkia - se on koodiongelma, eikö niin?

Suunnittelijoilla on edelleen kriittinen rooli. Tietyt käyttöliittymäelementit ovat erityisen janky, varsinkin kun ne rajataan rajoihin. Jos suunnittelijat tietävät, mitkä elementit aiheuttavat roskia, ja mikä tärkeintä, näiden elementtien rajoitukset, he voivat luoda malleja, jotka johtavat vähemmän todennäköisesti janky-sovelluksiin.

Aiomme keskustella joistakin yleisistä jank-lähteistä iOS-sovelluksissa ja tutkia tapoja suunnitella sovelluksia, jotka voivat estää näitä ongelmia ilmenemästä kokonaan.

Siirtymäsiirtymät

Aloitetaan tavallisella käyttöliittymäelementillä: navigointipalkilla.

Tässä on normaali, onnellinen navigointipalkki:

Sujuva siirtyminen, kun napautetaan takaisin-painiketta ja kun ajaa vuorovaikutteisesti.

Tässä on janky, surullinen navigointipalkki:

Ylimääräinen animaatio mustasta alueesta oikealla puolella; animaation puute, kun Takaisin-painiketta painetaan.

Mikä hätänä? Miksi tämä navigointipalkki on niin janky?

Tässä tapauksessa ”Koti” -näytön navigointipalkki on läpikuultava, kun taas ”Uuden näytön” navigointipalkki on läpinäkymätön.

Applen tarjoama navigointipalkki on rajoitettu ja haihtuva - tuetaan vain tiettyjä käyttäytymismalleja. Jos kehittäjä haluaa muokata navigointipalkkia tukemattomalla tavalla, ei ole mitään takeita siitä, että se toimii oikein kaikissa tapauksissa.

Navigoinnin siirtymäsuunnitteluun liittyvät näkökohdat

Monia yleisiä navigointipalkkihoitoja ei tueta täysin: piilota oletusarvoinen harmaa alleviivaus alle, piilota takaisin-painikkeen teksti, lisää ylimääräisiä näkymiä navigointipalkin alle ja sallii selän eleen mistä tahansa näytön kohdasta.

Kuinka suunnittelijat, jotka eivät ehkä tunne UINavigationController API: n vivahteita, voivat suunnitella näiden kysymysten ympärille?

Tärkein vinkki on säilyttää suunnittelun johdonmukaisuus näytöiden välillä. Jos jokaisella näytöllä on uusi navigointipalkkityyli, pyydät ongelmia.

näppäimistöt

Kokemukseni mukaan näppäimistöt ovat yleisin jank-lähde. Molemmat tämän viestin yläosassa olevat esimerkit liittyvät näppäimistöön.

Tässä on toinen esimerkki. Huomaa, kuinka ympyrän animaatio toimii hienosti kuvia poimittaessa, mutta se on väärä normaalia näppäimistöä käytettäessä.

Näppäimistöön liittyvä jank Snapchatissa.

Näppäimistön suunnitteluun liittyvät näkökohdat

Aina kun näppäimistö on mukana, sinun tulisi pitää näyttö mahdollisimman yksinkertaisena. Puolet näytön kiinteistöistä on kuitenkin poissa, joten älä pakata jäljellä olevaa tilaa täynnä painikkeita.

Ole varovainen näppäimistön animaation rinnalla tapahtuvissa animaatioissa. Älä oleta, että sinulla on täysi hallinta näppäimistön kanssa. Näppäimistön piilottaminen ilman animaatiota on mahdollista, mutta se voi aiheuttaa komplikaatioita myöhemmin tiellä.

Harkitse myös kolmansien osapuolien ja kansainvälisiä näppäimistöjä. Vain siksi, että suunnittelusi toimii hyvin tavallisen englanninkielisen iOS-näppäimistön kanssa, ei tarkoita, että se toimii kaikille. Oletetaan, että näppäimistön korkeutta ei tunneta, ja se voi muuttua milloin tahansa.

Monitila-animaatiot

Rakastan monivaltioiden animaatioita. Ne ovat uskomattoman hauskoja suunnitella ja rakentaa. Animaatioilla, joissa on monia tiloja, on kuitenkin taipumus aiheuttaa roskia.

Tässä on esimerkki monitila-animaatiosta, joka on mennyt pieleen:

App Store -painike tahattoman animaation kanssa.

Tällä painikkeella on useita tiloja - se muuttuu normaalisti kehräksi ja animoi edustamaan käynnissä olevaa latausta.

Jopa “normaali” käyttäytyminen voi olla janky. (tallennettu TestFlight-sovellukseen)

Tästä voimme tehdä koulutetun arvauksen siitä, mistä kehruuvirhe on peräisin. Huomaa, kun kehruu ilmestyy ensimmäisen kerran, mutta ennen kuin sininen edistyminen alkaa, melkein täysi harmaa ympyrä pyörii paikoillaan. Koodin virheen takia yllä oleva “avaa” -painike luulee olevan tässä välitöntä kehruustilassa.

Todellinen kysymys on tässä liikaa valtiota. Kun animaatiot joutuvat tahattomiin tiloihin, ne näyttävät jank.

Monitila-animaatiosuunnittelu

Monitila-animaatiot lisäävät monimutkaisuutta. Jos suunnittelet elementtiä, joka animoi useiden tilojen välillä, muista ottaa huomioon kaikki tilamuutokset ja reunatapaukset. Joku, joka näyttää pinnalta yksinkertaiselta, saattaa olla paljon monimutkaisempi kuin alun perin ajateltiin.

De-Janking -suunnittelu

Nyt kun tiedämme joitain yleisiä jank-lähteitä iOS-sovelluksissa, käytämme uutta näkökulmaamme suunnittelun arviointiin.

Tässä on karkea ja epätäydellinen muotoilu, jonka tein jonkin aikaa sitten. Se tutki yksinkertaisen esityssovelluksen ajatusta. Käyttäjä voi syöttää "tiedot" jokaiselle dialle, ja esitys tehdään automaattisesti ja aihekohtaiseksi.

Pääpaino on keskimmäisessä näytössä, jossa käyttäjä voi lisätä uusia kohteita, kirjoittaa tekstiä, järjestää dioja uudelleen, pyyhkäistä vaakatasossa diojen välillä ja laajentaa esikatselua sulatetusta diasta.

Näyttää melko hyvältä, eikö niin? Ei. Tämä malli on yksisuuntainen lippu Jankvilleen.

Lasketaan mahdolliset jank-lähteet:

  1. Erilaiset navigointipalkit ja niiden väliset siirtymät.
  2. Diaesitys, joka pysyy aina näppäimistön yläpuolella.
  3. Diaesityksen esikatselun interaktiivinen ja tilapohjainen animaatio.
  4. Vieritysaseman ja näppäimistön animaatiot, kun käyttäjä lisää useita tekstirivejä.
  5. Tilatyyppinen animaatio, joka valitsee tekstityypin ("Otsikko", "Tekstitys", "Luoti" jne.)

Tärkeintä on, että nämä eivät ole kaikki itsenäisiä - meidän olisi hoidettava kaikkien mahdollisten yhdistelmien sivuvaikutukset.

Tämän rakentaminen on ehdottomasti mahdollista, mutta kehittäjä viettää huomattavasti aikaa animaatioon liittyvien häiriöiden ja valtion konfliktien korjaamiseen. Tämä sovellus vaatii todennäköisesti tarkan huomion yksityiskohtiin, huolellisuuden ja kyvyn korjata esiin nousevat ongelmat.

Tässä on uusi malli, jonka minä pilkkasin nopeasti:

Keskimmäinen ”Oma esittely” -näyttö on laajennettu kolmeen ruutuun: ensimmäinen diojen järjestämiseen, toinen kohteiden järjestämiseen ja kolmas yksittäisen kohteen muokkaamiseen.

Tämä vähentää mahdollisia jank-lähteitä hyödyntämällä iOS-oletuselementtejä ja kapseloimalla mahdollisesti ongelmallisia elementtejä. Yksilöivän laajennettavan painikkeen animaation sijaan kohdetyypin valitsemiseksi käyttäjä voi valita oletusvalitsimesta. Näppäimistöä käytetään vain viimeisessä näytössä, eikä sitä tarvitse koskaan piilottaa, koska tekstikenttä on vain yksi.

Tämä toinen muotoilu ei ehkä tunnu niin ainutlaatuiselta, mutta se on todennäköisemmin tuntea tutun ja toimimaan odotetusti.

Huomautus mukautetuista malleista

En tarkoita luopuvansa räätälöityjen käyttöliittymien rakentamisesta tai mahdollisuuksien rajojen ajamisesta. Rakastan kokemusten tekemistä, jotka tuntuvat tuoreilta - se tekee iOS: n suunnittelusta ja kehittämisestä hauskaa.

Mutta liian usein olen nähnyt räätälöityjä malleja, jotka tekevät siitä vain 90% matkalla valmistumiseen. Eri syistä johtuen viimeiset 10% jää alle ja jankkuus pysyy muuten hyvin suunnitelluissa sovelluksissa.

Jos suunnittelijat ovat tietoisia yleisimmistä ongelmista, he voivat auttaa kehittäjiä välttämään niitä, mikä johtaa parempiin kokemuksiin kaikille.

takeaways

Suunnittelijat voivat auttaa estämään roskia tuntemalla sen syyt ja muuttamalla malleja vastaavasti.

Tässä on muutamia käytännöllisiä vaiheita torjunnan vähentämiseksi:

  1. Hanki kehittäjän panos aikaisin. Kokenut iOS-kehittäjä voi nopeasti arvioida suunnittelun rakentamisen monimutkaisuuden ja tiedottaa sinulle mahdollisista ongelmista.
  2. Yksinkertaista malleja! On helppo piilottaa monimutkaisuus olettamalla, että muutokset ja animaatiot toimivat itse. Kun harkitset kaikkia mahdollisia tapauksia ja siirtymiä, siirryt luonnollisesti yksinkertaisempiin ratkaisuihin.

Toivottavasti olet oppinut joitain syitä, miksi jotkut sovellukset tuntevat olonsa hankeiksi, ja mikä vielä tärkeämpää, tunnet valtuudet ratkaista jank suunnittelun avulla!

Nautitko tarina? Jätä joitain tappeja täällä Mediumille ja jaa ne iOS-suunnittelijallesi / dev-ystävillesi. Haluatko olla ajan tasalla viimeisimmästä mobiilisovellusten suunnittelusta / kehittäjästä? Seuraa minua Twitterissä täällä: https://twitter.com/nathangitter

Kiitos David Okunille tämän viestin luonnoksen tarkistamisesta.