Android VS. iOS: Vertaa 20 käyttöliittymän komponenttia ja kuviota (osa 1)

20 eroa Androidin ja iOS: n välillä, sinun tulisi tietää, kun suunnittelet alustojenvälisiä sovelluksia

中文 Alkuperäinen kiinalainen versio julkaistu 10. joulukuuta 2016

Android VS. iOS: Vertaa 20 käyttöliittymän komponenttia ja kuviota (osa 2)

Sekä Androidille että iOS: lle on käynnissä yhä enemmän sovelluksia. Mutta voimme havaita, että sovellusten suunnittelu ei ehkä poista tai huomaa eroja Androidin ja iOS: n välillä käyttöliittymäkomponenteissa tai käyttäytymismalleissa. Joskus voimme löytää, että iOS-komponentteja käytetään Android-sovelluksissa tai Android-malleja käytetään iOS-sovelluksissa. Väärinkäytetyt komponentit / mallit voivat aiheuttaa käyttäjien hämmennystä.

Jotta kehittäjät tai suunnittelijat voisivat ymmärtää Androidin ja iOS: n välisen peruseron helpommin. Haluaisin esitellä ja vertailla käyttöliittymämalleja / komponentteja, joilla on joskus molemmilla alustoilla erilaisia ​​nimiä, esimerkiksi joidenkin ruutukuvien kanssa:

1. Navigointilaatikko, välilehdet ja pohjanavigointi VS. Välilehtipalkit

Haluaisimme puhua ensin navigoinnin suunnittelusta, koska se on olennainen tietorakenteen kysymys, johon suunnittelijoiden on puututtava suunnitellessaan sovelluksia alussa.

Navigointilaatikko oli edustavin Android-suunnittelusta vuonna 2013. Tietorakenteen ylimmän tason kategoriatiedot laitetaan laatikkoon, joka voidaan piilottaa, jotta käyttöliittymät näyttävät yksinkertaiselta ja puhtaalta. Mutta myöhemmin, kun ilmestyi paljon tutkimuksia, jotka paljastivat navigointilaatikoiden käytettävyysongelmia, Google alkoi siirtää tärkeitä ominaisuuksia / luokkakohteita navigointilaatikoista sovellusten välilehdille; Youtube oli esimerkki siitä. Vuonna 2016 pohjanavigointi ilmestyi Materiaalisuunnitteluohjeisiin ja osoittaa, että jotkut Android-käyttöliittymän komponentit ovat lähemmäs iOS-komponentteja.

Youtuben rakenteen kehitys: Tärkeät ominaisuudet, tilaukseni, historia ja soittolista laitetaan laatikkoon -> Sovellusten rakenne järjestetään uudelleen, laatikot poistetaan ja pääominaisuudet siirretään välilehdille -> Suuntaukset lisätään välilehdille.Google Kuvien rakenteen kehitys: Pääominaisuudet laitetaan laatikkoon -> Pääominaisuudet siirretään painikkeiden selailuun -> Etsi kelluva toimintopainike, joka voi keskeyttää valokuvien selaamisen, muunnetaan hakupalkiksi.

Huomaa, että Android-välilehdissä ja pohjanavigoinnissa on edelleen eroja :

  1. Välilehtiä voidaan käyttää ylemmällä tai alemmalla tasolla tietohierarkiassa, mutta Pohjanavigointia käytetään vain ylimmällä tasolla.
  2. Välilehdet eivät tue vain napauttamista, vaan pyyhkäistä elettä näkymien vaihtamiseen, mutta Pohjanavigointi tukee vain napauttamista.
  3. Välilehdessä olevan tuotteen määrä on joustava. Voit laittaa 2–5 tuotetta kiinteisiin välilehtiin tai useampia kohteita vieritettäviin välilehtiin. Mutta vain 3-5 tuotetta voidaan laittaa pohjanavigointiin. Vähintään 2 tuotetta on kielletty。

Joissakin sovelluksissa, joissa navigointirakenteet ovat syviä ja monimutkaisia, saatamme löytää navigointilaatikon, pohjassa tapahtuvan navigoinnin ja välilehdet näkyvän samanaikaisesti. En suosittele navigointilaatikon ja pohjanavigoinnin käyttämistä samanaikaisesti sovelluksissa, koska niiden välisten hierarkkisten rakenteiden tunnistaminen on vaikeaa. Navigointitason taso on korkeampi vai alempi kuin pohjanavigointi? Vai ovatko ne rinnakkaisella tasolla? Moniselitteiset rakenteet hämmentäisivät käyttäjiä. Google Plus on negatiivinen esimerkki minulle. Olen todella hämmentynyt päivitettyäni Google Plus -sivun ja nähdessään navigointilaatikon ja pohjanavigoinnin samanaikaisesti alussa.

Analysoimalla nykyisiä Google-sovelluksia voimme löytää navigointilaatikon ja pohjanavigoinnin olevan rinnakkaisella tasolla. Ota esimerkkeinä Google Photos ja Google Plus, kun navigointilaatikko on paljastunut päänäytössä, mikään luokkakohde ei sisällä korosta. Android näyttää sijoittavan luokat, kuten tili, asetukset ja muut toissijaiset ominaisuudet, laatikkoon ja etsimään usein käytetyt / pääominaisuudet alanavigointiin.

Google plus

iOS on jo pitkään käyttänyt alareunan välilehtipalkkeja oletusnavigointina eikä koskaan muuttunut. Välilehtipalkit, kuten Android-pohjanavigoinnissa, sisältävät 3 - 5 luokan kohdetta, ja voit vaihtaa luokanäkymiä napauttamalla kohteita.

On syytä huomata, että välilehtipalkit ovat yleensä olemassa, vaikka syötätkin seuraavalle tai syvemmälle tasolle ylhäältä. Napauttamalla korostettua kohdetta välilehtipalkissa, pääset takaisin ylimmälle tasolle. Välilehden palkit katoavat, kun olet modaalinäkymässä tai kirjoitat yksityiskohtaisia ​​näkymiä alatyökalurivillä. Android-sovelluksissa sekä välilehdet että pohjanavigointi kuitenkin katoavat, kun siirryt seuraavalle sivulle syvemmälle tasolle.

2. Sovelluspalkit (toimintapalkit) VS. Navigointipalkit

Palkkeja Android-sovellusnäyttöjen yläosassa kutsutaan sovelluspalkkiksi, mm. Toimintapalikoiksi ja työkaluriviksi, joita käytetään pääasiassa nykyisen näyttönimen tai sovelluksen nimien ja toimintopainikkeiden asettamiseen. Nimet on sijoitettu toimintorivien vasempaan reunaan ja oikealle puolelle toimintonäppäimet, joita on yleensä enintään 3. Jos toiminnot ovat enemmän kuin 3, käytämme ylivuotokuvaketta ja laitamme vähemmän tärkeät toiminnot ylivuotovalikkoon.

Sekä Androidilla että iOS: llä on omat takakuvaketyylit. Mutta iOS asettaa yleensä merkkijonon, selän tai edellisen sivun nimen takaisin-kuvakkeen viereen, mikä ilmoittaa käyttäjille, mihin he palaavat tarkemmin.

Useita yleisiä sovelluspalkkeja ja navigointipalkkeja

3. Työkalurivit

Toimintapainikkeet voidaan asettaa paitsi toimintapalkkeihin / navigointipalkkeihin myös pohjalle ”työkalurivit” sekä Androidille että iOS: lle.

Vaikka alaosassa olevia työkalurivejä ei mainita materiaalisuunnitteluohjeissa (ne puhuvat työkalurivejä vain sovelluspalkkeina), voimme silti löytää pohjaisia ​​työkalurivejä, joita käytetään Google Keepissä ja Google Photosissa.

Pohjatyökalurivit ovat yksi yleisimmistä iOS-käyttöliittymän komponenteista, ja niitä voi löytää monista sovelluksista. Sekä kuvakkeet että teksti toimintopainikkeina ja tilan kuvaukset voidaan laittaa työkaluriville.

4. Välilehdet VS. Segmentoidut hallintalaitteet

Toissijaisen tai alemman hierarkiatason sivuilla voidaan hyödyntää Android-välilehtiä ja iOS-sovellusten segmentoituja säätimiä.

Sekä Android-välilehdet että iOS-segmenttiohjaimet voidaan sijoittaa toimintapalkin / navigointipalkin asemaan.

Android-välilehdet voivat olla vain tekstiä, vain kuvakkeita tai sekä kuvakkeita että tekstiä, joita nykyisissä sovelluksissa on harvoin. Sekä kuvakkeet että teksti voidaan laittaa iOS-segmentteihin. Tekstin ja kuvakkeiden sekoittamista segmentoidussa ohjaimessa tulisi välttää.

Kaikki Androidin kosketettavissa oleva teksti on YLITTÄINEN, ja siksi välilehtien teksti on iso. iOS-segmentoidut ohjaimet käyttävät otsikkokoteloa.

Tietoja Android-välilehdien kohteiden määrästä on 2–5 kiinteällä välilehdellä. Vieritettävää välilehtipalkkia voidaan käyttää, kun siellä on pitkiä merkkijonoja tai enemmän kuin 5 kohdetta. Segmentoidussa ohjaimessa tulisi olla viisi tai vähemmän segmenttejä iPhonessa, jotta varmistetaan tarpeeksi tilaa helppoon napauttamiseen.

5. Painikkeet

Periaatteessa ainoa ero Android- ja iOS-painikkeiden välillä on merkkijonon iso kirjain ja ulkonäkö.

Android-painikkeilla on pääasiassa 2 tyyliä, ”litteät” ja “kohotetut” painikkeet, joita käytetään eri tilanteissa. Esimerkiksi, ei ole hyvä käyttää korotettuja painikkeita korttityyppisissä käyttöliittymissä, koska kohotetut painikkeet näkyvät liian näkyvästi korteissa ja redundantit varjot tekevät myös käyttöliittymistä, jotka eivät ole yksinkertaisia ​​ja puhtaita. Litteitä painikkeita suositellaan käytettäväksi korttien lisäksi myös valintaikkunoissa ja alatunnisteissa. Androidilla on myös kelluvat toimintapainikkeet, jotka esitellään seuraavassa osassa.

Vaikka materiaalisuunnitteluohjeet määrittelevät vain tasaisten ja kohotettujen painikkeiden visuaaliset tyylit, Google Playsta löytyy myös haamanäppäimiä, jotka ovat tasaisia ​​muotoja, joissa ei ole täyttöä ja yksinkertaista ääriviivaa, sekä korotettujen painikkeiden kaltaisia ​​ilman varjoja. Haamupainikkeita voidaan verrata iOS-normaalipainikkeisiin; kohotetut napin kaltaiset painikkeet painettuun painikkeeseen.

Android-painikkeiden teksti on YLIMÄÄRÄINEN; iOS-painikkeet käyttävät pääasiassa otsikkokoteloa. Toisinaan haamupainikkeet käyttävät YLÖSKIRJOA, kuten AVA ja Päivitä -painiketta App Storessa, mutta joskus ne käyttävät Otsikko-tapausta, kuten ”Varaa pöytä” ja ”Ohjeet” Map iOS 10: ssä. IOS: n isojen kirjainten kirjaussääntö näyttää olevan epäjohdonmukainen.

6. Kelluvat toimintapainikkeet VS. Toimintakehotus-painikkeet

FAB-kelluvat toimintapainikkeet ilmestyivät ensimmäisen kerran Android 5.0: n Materiaalisuunnittelussa. Näyttöjen oikeassa alakulmassa olevia FAB: ita käytetään korjaamaan yhden käden käytön ongelma. Toimintalinjojen painikkeiden saavuttaminen on vaikeaa, kun puhelimia käytetään yhdellä kädellä. FAB: t sijaitsevat joskus myös kahden alueen risteyksessä ja tämä tekee FAB: sta entistä kiinnostavamman.

Kelluva toimintopainike edustaa sovelluksen ensisijaista toimintoa. Esimerkiksi sähköpostisovelluksen kirjoituspainike ja sosiaalisen verkoston sovelluksen uusi viestipainike ovat sopivia FAB: ien käyttämiseen.

Samanlainen malli ensisijaiselle toiminnalle iOS-sovelluksissa on kutsu toimintapainike, joka sijaitsee välilehtipalkkien keskellä. CTA-painikkeet käyttivät aikaisemmin eri värejä tai muotoilua erottaakseen ne muista välilehdistä. Mutta nyt, kun käyttäjät ovat entistä paremmin perehtyneet malliin, CTA-painikkeen tyyli on sama kuin välilehtien ”monissa sovelluksissa. Painikkeet uudelle viestille Mediumissa ja uuden kuvan julkaiseminen Instagramissa ovat esimerkkejä.

7. Pohjalevyt VS. Toimintosivut ja toimintanäkymät

Android-pohjalevyt ilmestyvät vuodesta 2015, mutta iOS: lla on samanlainen malli jo pitkään. Androidilla on tällainen suunnittelu, koska se haluaa ratkaista yhden käden käytön ongelman.

Android-pohjakerroksessa on 2 muotoa: modaaliset pohja-arkit ja pysyvät pohja-arkit.

Android-modaalien pohja-arkeilla on kaksi sisältöä: 1) modaaliset pohja-arkit, joissa on erilaisia ​​toimintoja, ja 2) sovellusluettelo, joka tulee näkyviin, kun käyttäjät ovat napauttaneet ”Jaa” -kuvaketta. Entinen on aivan kuten iOS: n Action Sheets; jälkimmäinen on kuin iOS-aktiviteettinäkymät, kun olet napauttanut ”Toiminnot” -kuvaketta. Android-modaalien pohja-arkkien sisältöasettelu voi olla luettelo tai ruudukko.

Pysyviä pohja-arkkeja käytetään, kun pohja-arkeilla on sama merkitys kuin yllä olevalla pääsisällöllä ja käyttäjien on ehkä tarkasteltava molempia tietoja samanaikaisesti. Kun esimerkki on Map Map -sovellus, ylempi alue näyttää kartan ja alareuna näyttää paikan yksityiskohdat. Musiikkisovelluksen yläosassa näkyy albumin kansi ja alaosassa voi olla säätimiä musiikin toistamiseen.

Vaikka en löydä komponentteja, kuten iOS-käyttöliittymän ohjeissa määriteltyjä Android-pysyviä pohjataulukoita, voit silti nähdä samanlaisen suunnittelun iOS: n alkuperäisissä sisäisissä sovelluksissa, Kartta ja Musiikki.

Kuvahyvitys: Googlen materiaalisuunnittelun ohje ja Facebook-suunnittelu

8. Dialogs VS. hälytykset

Android-valintaikkunoissa on pääasiassa 3 toimintoa: 1) Muuttaa: keskeyttää käyttäjän yrittämät tiedot ja ilmoittaa käyttäjälle tilanteesta. 2) Valikot: antaa käyttäjille valita vaihtoehdon tai muuttaa yksinkertaisia ​​asetuksia. 3) Vahvistus: Poka-ikeinä vahvista käyttäjien valinta ennen kuin se sitoutuu estämään virheitä.

Android-valintaikkunat koostuvat nimikkeistä, sisällöstä ja painikkeista. Osastot voidaan joskus jättää pois. Sisällössä ei voi olla vain puhdasta tekstiä, mutta myös muita komponentteja, kuten lisäluettelo tai tekstikentät. iOS-hälytyksessä on myös otsikoita, sisältöä ja painikkeita, kuten Android-valintaikkunassa. Ainoa ero on, että sisältö voidaan jättää pois, mutta otsikko on pidettävä.

Android-valintaikkunoissa on 3 muotoa: 1) Yksinkertaiset valintaikkunat, kuten valikko: Valintaikkunassa ei ole OK- ja Peruuta-painikkeita. Napauta valintaikkunaa valitaksesi valintaikkunan ja sitten valintaikkuna katoaa. Voit sulkea valintaikkunat napauttamalla valintaikkunan tai Takaisin-näppäintä. 2) Vahvistusikkunat, yleisimmät: On painikkeita, joissa käyttäjät voivat napauttaa vahvistaakseen toimintansa. 3) Koko näytön valintaikkunat, vain puhelimissa: Koko näytön valintaikkunat eivät ole tablettien koko näytön kokoisia. Androidin koko näytön valintaikkunat ovat aivan kuten iOS-modaalinäkymä, joka otetaan käyttöön myöhemmin.

tekstit

Android-valintaikkunoiden otsikko ja sisällön teksti kohdistuvat vasemmalle; IOS-hälytysten otsikon ja kuvauksen teksti kohdistuu keskukseen. Android käyttää nimikkeisiin ”Sentence case”; iOS käyttää ”otsikkotapausta”. Sekä Android että iOS käyttävät sisällön tekstissä ”lauseen tapausta”.

Android-valintaikkunan ja iOS-hälytyksen otsikon tulee olla lyhyt ja selkeä. Vältä kysymyksiä, joissa on joitain merkintöjä, kuten ”Haluatko varmasti poistaa tiedoston?” Lauseen tulisi olla yksinkertainen, neutraali ja suora, kuten ”Poista tiedosto?”.

painikkeet

Noin painikkeiden lukumäärässä Android- ja iOS-laitteissa voi olla 1–2 painiketta. iOS-ohjeissa ehdotetaan yleensä kolmen tai useamman painikkeen välttämistä, koska useampi painike luo monimutkaisuutta ja voi vaatia vieritystä. Jos tarvitset useampia kuin kaksi vaihtoehtoa, harkitse toimintasivun käyttöä. Mutta kun iOS kysyy käyttäjiltä, ​​haluavatko he päivittää iOS-versionsa, hälytyksessä näkyy kolme painiketta: Asenna nyt, Myöhemmin ja Tiedot.

Kun painikkeita on kaksi, peruutus- ja päätoimintopainikkeet, Android ja iOS asettavat peruutuspainikkeen vasemmalle puolelle ja päätoimintopainikkeen oikealle puolelle (Voit tarkistaa tämän artikkelin saadaksesi selville syyn, miksi heillä on tämä sääntö). Kun painikkeiden kopio on pidempi, kaksi painiketta voidaan asettaa pystysuunnassa. Päätoimintopainike on peruutuspainikkeen yläosassa.

Painikkeiden kopiossa tulisi välttää kyllä ​​ja ei käyttöä. Painikkeiden kirjoitustoimet olisivat selkeämpiä ja suorempia, kuten Peruuta ja Tallenna, Peruuta ja Poista.

iOS varoittaa painikkeesta punaisella painikkeella, jos toimenpidettä ei voida palauttaa, kuten poistaa. Android ei käytä tiettyä väriä painikkeiden tekstissä. Tietoja painiketekstistä Android käyttää YLÖSKIRJOA, mutta iOS käyttää Otsikkokoteloa. Painoteksti kohdistuu oikein Androidissa, mutta se kohdistaa keskiosan iOS: ssä.

Kun tilanne on paljon, Android-valintaikkunat voivat korjata valintaikkunan otsikon ja alatunnisteen, mutta sisältö on vieritettävä. Selattavat sisältöikkunat ilmestyvät usein, kun valintaikkunoihin on asetettu paljon vaihtoehtoja. iOS-ohjeiden mukaan sisällön tulisi olla lyhyt varoitusten vierittämisen välttämiseksi.

9. Koko näytön valintaikkunat VS. Modaaliset näkymät ja popoversit

Androidin koko näytön valintaikkunat löytyvät vain pienistä mobiililaitteista, kuten älypuhelimista, joita voidaan verrata iOS-modaalinäkymiin. iOS-modaalinäkymissä on 4 tyyliä, koko näyttö, sivulomake, lomakearkki ja muut, kuten jaettu näkymä ja ponnahdusikkuna. Tietoja matkapuhelinten modaalinäkymien siirtymisestä, modaalinäkymä liukuu sisäänpäin, kun syötät, ja se liukuu alas, kun lähdet.

Ponnahdusikkunoita käytetään vain tableteissa

10. Välipalat ja paahtoleipää VS. hälytykset

Dialogien lisäksi Android käyttää välipalapalkkeja tai paahtoleipää vihjeviesteinä, joissa on alhainen häiriö. välipalabaareja tai paahtoleipää, koska palaute näkyy yleensä noin 3 sekunnin kuluttua siitä, kun käyttäjät ovat ryhtyneet toimiin ja liu'uttavat tai häviävät sitten automaattisesti.

Snackbaareissa voi olla toimintapainike, jonka avulla käyttäjä voi tehdä uudelleen tai suorittaa muita toimia. Paahtoleipää käytetään pääasiassa järjestelmäviestien näyttämiseen. Et voi laittaa kuvakkeita välipalabaareihin tai paahtoleipää.

iOS-ohjeissa ei ole sellaisia ​​komponentteja. Joskus voimme löytää, että jotkut sovellukset käyttävät hälytyksiä palautteena, mutta hälytykset häiritsisivät käyttäjiä ja saattaisivat aiheuttaa enemmän häiriöitä. Samanlaiset komponentit iOS: ssä olisi pieni ponnahdusikkuna, joka tulee näkyviin, kun säädät äänenvoimakkuutta ja katoavat muutaman sekunnin kuluttua. Jotkut sovellukset mukauttavat ponnahdusikkunaa, joka näkyy vain sekunnin ajan, kuten palautteena Android-paahtoleipää.

Jotkin sovellukset saattavat mukauttaa hälytyksiään näkymään sekunnin ajan kuten Android-paahtoleipää.

11. Luettelot VS. taulukot

Listat, yleisin ja peruskomponentti, löytyvät jokaisesta sovelluksesta (löydät sen ainakin sovellusten asetuksista). Androidissa luettelot koostuvat jatkuvasta rivisarakkeesta. IOS-järjestelmässä kutsumme luetteloita tableteiksi, jotka koostuvat monista soluista, eli riveistä.

Android-luettelotyylissä on yksirivinen luettelo, kaksirivinen luettelo (koostuvat ensisijaisesta tekstistä ja toissijaisesta tekstistä) ja monirivinen luettelo (koostuvat ensisijaisesta tekstistä ja kahdesta tai useammasta toissijaisesta tekstistä). Kuvakkeet, pikkukuvat ja luettelon säätimet, kuten valintaruudut, valintanapit ja kytkinpainikkeet, voidaan lisätä luetteloihin. Pääasialliset toiminnot sijoitetaan yleensä luettelon vasemmalle puolelle ja toissijaiset toiminnot luettelon oikealle puolelle.

iOS-taulukot ovat samankaltaisia ​​Android-luetteloiden kanssa, mutta huomioitavia asioita on vielä:

1) Kun puhelimen Android-rivillä on ensisijainen otsikko ja toissijainen teksti, ne sijoitetaan pystysuunnassa. Toissijainen teksti voi olla kuvaus tai arvo. IOS: ssä, kaksirivisen tyylin lisäksi, siinä on myös yksirivinen tyyli. Ensisijainen teksti, etiketti, asetetaan solun vasemmalle puolelle ja arvo asetetaan solun oikealle puolelle. Laajemman tilan takia Android-rivi on joskus iOS: n tapaan tabletilla, koska ensisijainen otsikko ja toissijainen teksti sijoitetaan vaakasuoraan yhdeksi riviksi.

2) iOS-rivillä on parempi käytettävyys kuin Androidilla. Jos siellä on lastenäyttö, iOS näyttää nuolimerkinnän vanhemman näytön solussa, jotta käyttäjät tietävät, että solua voidaan taputtaa ja johtaa toiseen ruutuun. Mutta Androidissa emme voi tietää, onko luettelot tarkoitettu vain tietojen näyttämiseen tai myös toisen näytön sisäänkäynnille. Heillä kaikilla on sama ilme.

3) iOS-taulukoissa on 2 muotoa: tavallinen ja ryhmitelty. Tavallisessa pöydässä on koko valkoinen näyttö jakoväreillä. Vaikka vain harvoilla soluilla on sisältöä, lepoalueella on silti jakajat. Ryhmitetyillä taulukoilla on harmaa tausta. Ensimmäisessä ryhmitetyssä taulukossa on jonkin verran tilaa navigointipalkilla ja toisessa ryhmitetyssä taulukossa alla. Androidilla on vain yksi tyyli ja käytä vain jakajaa kahden erillisen luettelon erottamiseen.

12. Alialähteet VS. Ryhmitetyt pöydän ylätunnisteet

Android-alaotsikoita ja iOS-otsikoita käytetään erottamaan ja ryhmittelemään luettelot tai ruudulistalistat, joilla on eri sisältö. iOS: lla on 2 eri tyyliä erottaaksesi luettelot: 1) ryhmitetyt taulukot, joita käytetään täysin erilaisten tietojen ryhmittelyyn; 2) Jaksootsikot, näkyvät tavallisissa taulukoissa, käytetään lajittelemaan samanlaista datamuotoa, kuten valokuvia, joissa on otettu eri päivämääriä tai yhteystietoja, joilla on eri nimet.

Android-alaotsikot käyttävät lauseita. iOS-ryhmitetyt taulukon otsikot käyttävät ”YLIMÄÄRÄINEN” ja tavalliset taulukkon otsikot käyttävät ”Otsikkolaatikko”.

Vieritettäessä Android-alaotsikot pysyvät kiinni näytön yläreunassa, kunnes seuraavat alaotsikot työntävät näytön pois, joiden käyttäytyminen on aivan kuin iOS-osioiden otsikot. Ryhmitetyissä taulukon otsikoissa ei ole tällaista käyttäytymistä.

13. Listaohjaimet

Luettelosäätimet ovat myös sovellusten tärkeitä komponentteja. Tässä luvussa esitellään luettelosäätimet, kuten moniosainen, yhden valinnan vaihto, kytkimet, uudelleenjärjestelyt, tarttujat ja laajennus- / kutistamisvaihtoehdot.

13–1. Monivalinta: Valintaruudut VS. Valintamerkki ympyrällä

Android käyttää valintaruutuja monivalintaan. Valintaruutu osoittaa valitun kohteen tilan; ruutu ilman rastiä tarkoittaa, että tuotetta ei ole valittu. Valintaruudut, jotka löytyvät verkkosivustolta tai työpöydän käyttöjärjestelmästä, ovat yleensä komponentteja monivalintaan, mutta iOS: ssä ei ole tätä komponenttia. IOS-järjestelmässä ympyrää, jossa on rasti, käytetään monivalintaan, mutta sen muoto voi saada käyttäjät sekoittamaan sen valintanappiin.

Android-valintaruudut voidaan laittaa vasemmalle tai oikealle puolelle, mutta iOS yleensä asettaa useita valintaohjaimia oikealle puolelle.

On syytä huomata, että Android käyttää toisinaan valintaruutuja kytkiminä toimintojen käyttöönottamiseksi / poistamiseksi käytöstä, mutta iOS käyttää kytkinpainikkeita ympyräohjaimien sijasta

13–2.Yksi valinta: radionäppäimet / valintamerkit VS. valintamerkit

Androidilla on valintanappi, jotka löytyvät myös verkkosivuilta tai työpöydän käyttöjärjestelmästä yhtenä valintanäppäimenä. Valintapainikkeessa on ympyrä, jonka sisällä on piste, jos kohde on valittu. Valintanappia käytetään kahden tai useamman toisiaan poissulkevan tuotteen luetteloihin.

iOS: llä ei ole valintanappeja, mutta siinä on valintamerkit sen sijaan valintavalintana.

Android on tottunut sijoittamaan radionäppäimiä luetteloiden oikealle puolelle, mutta nyt löydät radiopainikkeet, jotka asetetaan vasemmalle puolelle vähitellen. iOS asettaa valintamerkit oikealle puolelle, mutta valintamerkit voidaan laittaa vasemmalle puolelle, jos oikealla puolella on muita kohteita, kuten esimerkiksi seuraavan sivun ilmaisin.

Vaikka materiaalisuunnitteluohjeissa ei oteta käyttöön tarkistusmerkkejä, jotka ilmestyvät vuodesta 2016 vähitellen, mutta esimerkki löytyy Google-kalenterin valikosta.

Yksi Android-valinta: radiopainikkeet ja valintamerkit. Mutta vasen on huono esimerkki yksinkertaisena valintaikkunana, siinä EI pitäisi olla CENCEL-painiketta Googlen ohjeiden mukaisesti. Tai se voi olla vahvistusikkuna lisäämällä OK-painike, mutta se johtaa lisävaiheisiin.

13-3. kytkimet

Kytkin on vaihto kahden toisiaan poissulkevan tilan välillä, päälle ja pois. Aikaisemmin Androidilla ei ollut kytkimiä ja se käytti valintaruutuja joidenkin toimintojen käyttöön ottamiseksi / poistamiseksi käytöstä, mutta nyt Android käyttää kytkimiä yhä enemmän. iOS käyttää aina kytkimiä toimintojen käyttöön ottamiseksi / poistamiseksi käytöstä. Kytkimet on asetettu luetteloiden oikealle puolelle sekä Androidissa että iOS: issa.

Android-asetukset päälle ja pois: Gmail käyttää valintaruutuja, mutta Valokuvat käyttävät kytkinpainikkeita

13-4. Reorder / Gripper

Android käyttää uudelleenjärjestysohjaimena kuvaketta, joka koostuu neljästä yhdensuuntaisesta vaakasuorasta viivalta, jotta sekaantuu ihmisiin sekoittamalla 3 rivistä koostuva hampurilakuvake, jota käytetään navigointilaatikon laajentamiseksi ja romahtamiseen. Tallentimen kuvake näkyy yleensä muokkaustilassa.

iOS-tarttujakuvake ilmestyi aikaisemmin kuin Android. Voit myös nähdä sen muokkaustilassa. Mutta iOS-tarrain koostuu vain 3 rivistä, koska iOS ei käytä laatikkoa oletusnavigointina, kuten Android.

13-5. Jättäjät (pyyhkäisemällä tehtävät)

Kun olet pyyhkäissyt vasemmalle tai oikealle, löydät luettelon taakse piilotettuja toimintoja. Se on hyvin yleistä löytää iOS. Normaalisti aiemmin löysit poistotoimenpiteen pyyhkäisemällä, nyt poiston lisäksi on muita toimintoja. Sähköpostiohjelmasta voit löytää arkiston, lipun ja paljon muuta pyyhkäisemällä vasemmalle; merkitse luetuksi tai lukemattomaksi pyyhkäisemällä oikealle.

Android 5.0: n jälkeen pyyhkäisytoiminnot, ns. Leave-Behinds, esitetään ohjeissa. On syytä huomata, että Leave-Behinds -sovellusta ei tule käyttää näytössä, ja siinä on välilehtiä eleiden ristiriidan vuoksi, ja siksi Androidilla ei ollut tätä komponenttia aikaisemmin.

Kun olet pyyhkäissyt luetteloa tietyn matkan ja sitten pysähtynyt, näet takana 1–3 toimintoa ja napautat sitten yhtä niistä toimiaksesi. Mutta jos pyyhkäiset pidempää matkaa, oletustoimenpide suoritetaan. Androidilla on vain yksi toiminta takana ja tee se pyyhkäisemällä suoraan.

Kuvalähde: Googlen materiaalisuunnittelun ohje ja Facebook-suunnittelu

13-6. Laajenna tiivistä

Laajenna / pienennä -säätimet voivat auttaa hierarkiaa tasaisempaa, koska käyttäjien ei tarvitse tulla seuraavaan näyttöön nähdäksesi tiedot, tiedot näytetään samassa näytössä. Tämä ohjaus löytyy usein UKK-luetteloista. Kun kysymys on napsautettu, vastaus tulee näkyviin. Vähemmän vaiheita vaaditaan, jos yrität selata kyseisiä laadunvarmistustasoja.

Laajennuksen / kutistumisen luetteloihin lisäämisen lisäksi voit myös asettaa tämän ohjauksen otsikoihin, jotta käyttäjät voivat romahtaa ryhmän, jota he eivät käytä usein.

Kuvalähde: Google Material Design Guideline

Laajenna / kutista -sovellusta ei löydy iOS: n ihmisen käyttöliittymän ohjeista, ja se löytyy harvoin iOS-sovelluksista. Samankaltaiset ohjaimet saattavat olla jotain, jotka ilmestyivät App Store -palvelun Explore-näytössä, iOS 8: ssa. Mutta se on pikemminkin polku kuin laajennus- / kutistamisohjaus, koska et näe muita kohteita, jotka on ryhmitelty eri otsikoihin samassa näytössä.

iOS 8 App Store
Antakaa 10 claps Jos olet lukenut tämän artikkelin.
Antakaa 20 kpl, jos luulet sen olevan hyödyllistä.
Antakaa 50 clapsia, jos pidät uskomattomasta!
Kiitos :)

Jatka Android VS. iOS: Vertaa 20 käyttöliittymän komponenttia ja kuviota (osa 2)

Viite