Android VS. iOS: Sammenlign 20 UI-komponenter og -mønstre (Del 2)

20 forskelle mellem Android og iOS skal du vide, når du designer til apps på tværs af platforme

中文 版 Original kinesisk version udgivet den 10. december 2016

Android VS. iOS: Sammenlign 20 UI-komponenter og -mønstre (Del 1)

14. Netlister VS. Samlingsvisning

Gitterlister bruges hovedsageligt på bestilt sæt indhold, især til billeder. I Android kan en header eller sidefod føjes til et gitter til at give ekstra information eller handlinger. iOS-samlingsvisning er til visning af billedbaseret indhold dybest set.

Ved at afskære gitterfliser i visningens oprindelige rulleposition, kan du indikere indholdsoverløb. Både ristelister og samlingvisninger kan tappes for at åbne detaljeskærmen for yderligere information.

Billedkilde: Googles retningslinjer for materialedesign og retningslinjer for menneskelig interface til iOS

15. Kort

Kort har været brugt i UI-design i lang tid. Efter at Google frigav Material Design i 2015, bliver kort en fælles repræsentant for Android-design. Kort UI har sin fordel på tværs af flere enhedsstørrelser. Kort kan nemt ændres og ændres på forskellige skærmstørrelser. Desuden kan kort indeholde forskellige informationer, som tekster, billeder og diagrammer.

Selvom iOS ikke definerer UI-kort i sine retningslinjer, men det lignende design kan findes i Apple iOS-app.

I visuel stil lægger Android vægt på kortskygger, men kortene er flade i iOS 10. (Efter iOS 11 frigivet vises lange skygger!)

Billedkilde: Googles retningslinjer for design af materialeBilledkilde: Facebook Design

15. Menuer VS. Pickers & nye skærme

Android's menuer ligner bare dens enkle dialoger. Forskellen mellem dem er, at der vises dialoger i midten af ​​skærmen med et gennemsigtigt sort overlay, men menuernes position er i forhold til de tappede elementers position. Menuer har mindre afbrydelse end dialogbokse.

Menuer vises i følgende 3 situationer: 1) Efter at have tappet overløbssymbolet i en handlingslinje eller en række af listen; 2) efter at trykke på dropdown-menuen og 3) efter at have tappet en 2-linjes stilrække, der består af etiket og værdi.

iOS har ikke denne slags menustil. Efter at have tappet på en celle bestående af etiket og værdi, skifter skærmen til den nye skærm, der viser indstillinger i en tabel med et afkrydsningsfelt for en af ​​indstillingerne til at markere valgt status på telefoner. På tabletter kan en popover bruges til menutabellen.

Et andet alternativ er "pickers", rullbare lister med forskellige værdier, der giver dig mulighed for at vælge en værdi. Når der er tappet en celle med en værdi, vises en plukker under cellen eller glider ind fra bunden af ​​skærmen.

Pickers anbefales at bruges til kun få muligheder. Hvis du har en lang liste, ville en ny skærm til optionstabellen være det bedre valg.

16. Valg af dato / tid

Både Android og iOS har deres egne standard dato / klokkeslæt. Android har datavælger til at vælge en bestemt dato (dato, måned og år) og tidsvælger. iOS har 4 slags vælger: 1) Dato, der viser måneder, dage i måneden og år. 2) Tid, der viser timer, minutter og (valgfrit) en AM / PM-betegnelse. 3) Dato og tid, der viser datoer, timer, minutter og (valgfrit) en AM / PM-betegnelse. 4) Nedtællingsur, der viser timer og minutter.

17. Delere

For at adskille indhold bruges normalt skillelinjer.

Android har 2 typer skillelinjer: 1) Delere med fuld blødning, der bruges til at adskille forskellige indholdssektioner. 2) Inddelingsdelere, der bruges til at adskille relateret indhold.

iOS definerer ikke dividere i sine retningslinjer. iOS bruger grupperede tabeller, og der er et gråt område mellem 2 grupperede tabeller til adskillelse. iOS har indsat skillelinjer i sin tabel for at danne en celle.

Android har en tendens til at bruge "plads" til at adskille rækker, så Android har sjældent dividere mellem rækker, hvis data er relateret.

Hvis der er et ikon eller et billede i venstre side af en række i Android, starter inddelingsdeleren fra en venstre tekstkant og slutter til højre kant af skærmen. I iOS er en celle med et ikon det samme som Android, men for en celle med et billede starter skillelinjen fra billedets venstre kant.

18. Tekstfelter

Android-tekstfelter vises normalt i formularer, du skal udfylde. Der er 3 typer: 1) Enkelt linje 2) Flere linjer og 3) Fuld bredde. I 2017 tilføjede Android en anden type: tekstområde i dens retningslinjer.

Afhængigt af forskellige inputformater skal der gives en passende tastaturtype. Både Android og iOS leverer flere forskellige tastaturtyper. Grundlæggende kan de klassificeres i 3 typer: 1) Nummertastatur (iOS har nummertastatur og telefonpude), der bruges til at indtaste telefonnumre, kreditkortnumre eller PIN-koder. 2) Teksttastatur, der bruges til folks navne. 3) Blandet tastatur, der bruges til e-mail-adresser eller URL-adresser.

Både Android og iOS kan placere pladsholdere og ikoner eller billeder i tekstfelter som indikatorer til at hjælpe kommunikationen. I Android flyder pladsholdere opad, når tekstfeltet er i fokus eller udfyldt. Det er et ret smart design til at hjælpe brugere med at kende etiketterne, selv når alle tekstfelter er udfyldt. I iOS foreslår det, at du ikke bruger en separat etiket til at beskrive et tekstfelt, når pladsholderteksten er tilstrækkelig.

iOS har et smartere design, som er, når tekstfelter udfyldes og fokuseres, vises en tydelig knap i højre side af tekstfeltet, så folk let kan rydde alle tekster med et enkelt tryk. Android har ikke det design i standardtekstfeltet, men du kan finde det i søgefeltet. I Android kan du tilpasse tekstfeltet og tilføje en rydd alle knapper til højre side.

Android-retningslinjer definerer også hjælpetekster, tegnetællinger og fejlmeddelelser til tekstfelter.

19. skyderne

Gliderne er komponenterne til justering af indstillinger, der afspejler intensitetsniveauer, såsom lydstyrke, lysstyrke eller farvemætning. Normalt er den mindste værdi placeret til venstre for skyderne og den største værdi til højre. Sliders kan have ikoner i begge ender af linjen for at afspejle værdien intensitet i både Android og iOS.

Android-skyderen har 2 typer: 1) Kontinuerlige skyder, der lader brugerne vælge en værdi langs en række. 2) Diskrete skyder, så brugerne kan vælge en bestemt værdi, f.eks. 10 eller 20, fra et interval.

Android leverer også redigerbar tekstboks til nummerinput for brugere, der har brug for at indstille den nøjagtige værdi.

20. Andre mønstre

20-1. Søg

Android-søgning har to typer: vedvarende søgning og udvidelig søgning, som kan sammenlignes med iOS-fremtrædende søgning og minimal søgning.

Android's vedvarende søgning og iOS's fremtrædende søgning bruges hovedsageligt til appernes hovedfunktion er søgning, ligesom butiksrelateret app, hvor brugere muligvis vil finde et produkt, de kan købe ved at søge.

Android's udvidelige søgning og iOS's minimale søgning efter den app, hvis søgning er sekundær. Android reducerer søgefeltet til et ikon. Når der er tappet på søgeikonet på appbjælken, ændres appbjælken til en søgebjælke. iOS bruger visuel designmåde, der gør, at søgestænger bliver halvgennemsigtige for ikke at være iøjnefaldende.

iOS bruger også søgeikon for at reducere vigtigheden af ​​søgning. Desuden skjuler iOS undertiden søgebjælker bag navigationsbjælker. Brugere er nødt til at stryge ned for at fremkalde den skjulte søgefelt.

20-2. Slet og andre handlinger

Android-brugere kan vælge et element ved at trykke langt på og derefter gå ind i valgtilstand, hvor handlingsknapper, som sletning, vises i appbjælker. Android-brugere kan også trykke på overflow-ikonet for at fremkalde menuen med en "vælg" -indstilling og trykke på den for at gå ind i valgtilstand.

iOS-brugere kan stryge til venstre for at fremkalde skjulte handlinger, som sletning. De kan også trykke på “Rediger” i navigationsbjælker for at gå ind i redigeringsfunktion for at slette eller ombestille emner. Hvis der er flere handlinger, som flytte og opnå, i redigeringstilstand, vil skærmen have en tabel med flere valgkontroller og en værktøjslinje med disse handlinger.

20-3. Vælg tekst

I både Android og iOS kan brugerne længe trykke på tekster for at vælge dem. Efter lang tryk i Android viser handlingsikonerne i handlingslinjen, der blev en anden stil for at indikere den aktuelle status, valgtilstand. I iOS vises handlingerne bare i en menu over de valgte tekster. Android har nu også den flydende værktøjslinje som iOS vist ovenfor i markeringsområdet med handlinger med udskæring, kopiering, indsætning og mere.

Efter at tekster er kopieret eller klippet ud, kan brugerne længe trykke ind tekstfelter for at vise en pop-up og indsætte den for at indsætte.

Kilde: Google

20–4.Regress og aktivitet

Generelt er fremdriftsbjælker bedre end spinnere, fordi fremdriftsbjælker giver brugerne mulighed for at kende status, hvor mange procentdel der er tilbage, så de ville have tålmodig til at vente.

Fremdriftsbjælker bruges til fremgangen er forudsigelig. Hvis fremskridtene er utallige, bruges spinnere. Men hvis fremskridtene er forudsigelige, og ventetiden kun er mindre end 3-4 sekunder, kan du også overveje at bruge spinnere.

Fremskridtsbjælker vises ud over indholdstekster og dialoger den nederste kant af appbjælker / navigationsbjælker. Du kan finde eksemplet i browser-apps.

Fremdriftsbjælker har ikke kun lineære, men også cirkulære indikatorer. De cirkulære fremgangsindikatorer bruges ofte med download-knapper. Når der er trykket på downloadknapper, bliver knapperne cirkulære fremgangsindikatorer.

Android-statusindikatorer har 4 typer: 1) Bestem 2) Ubestem 3) Buffer 4) Forespørgsel ubestemmes og bestemmes for forskellige situationer.

Android-lineære fremskridt og aktivitetsindikatorerAndroid Circular fastlægger og fastlægger statusindikatorer

Om opdatering lærte Android fra iOS ved hjælp af stryge ned for at opdatere indhold. en cirkulær spinner dukker op, når den er skubbet ned og forsvinder, når indholdet er indlæst.

Opdater lister ved at stryge ned. Indlæsningsindikatorerne vises.

20-5. Ikoner: Del VS. Handling

Når du vil dele indholdet fra denne app til en anden, har Android og iOS deres eget delingsikon. Det er værd at bemærke, at iOS-handling (del) -knap fremkalder en modal visning, der ikke kun indeholder appliste, men også handlinger som kopi, favorit eller gem, som er nyttige i den aktuelle kontekst.

Android-delikon VS. iOS-handlingsikon

20-6. Statuslinjer

Både Android- og iOS-statuslinjer har information som tid, batteristatus, Wi-Fi-status og signalstyrke. Stryge ned fra statuslinjer for at fremkalde underretningscentre.

20-7. Navigationsbarer VS. Hjemknappen

Android-navigationsbjælker og iOS-navigationsbjælker er forskellige. Venligst ikke forveksle dem.

Android-navigationsbjælker har 3 knapper til Back, Home og Recent Apps. Navigationsbjælker kan være virtuelle eller fysiske.

iOS har en fysisk knap, Hjem. Et tryk for at vende hjem; dobbelttryk for at gå til nyligt lancerede applister. Det er værd at bemærke, at iOS ikke har nogen tilbage-nøgle som Android, så UI-skærmen skal have en tilbage-knap i navigationsbjælker.

Efter at iPhoneX er frigivet, er der ingen Home-nøgle på enheden. Stryg op på en bjælkeindikator for at vende hjem.

Sæt hætten

Navigation

Android plejede at bruge navigationsskuffe som hovednavigation, men i øjeblikket er faner og bundnavigation mere populære på grund af bedre brugervenlighed. iOS bruger som normalt fanebjælker til navigation.

App Bar / Navigation Bar

Android-appbjælker, skærmtitler justerer venstre og handlingsknapper sættes i højre side. I iOS sættes titler i midten af ​​navigationsbjælker, og handlingsknapper sættes til højre og venstre side af navigationsbjælker.

Værktøjslinjer

Android og iOS har bundværktøjslinjer til handlingstekster, handlingikoner eller status.

Faner VS. Segmenterede kontroller

Til navigation på det andet eller lavere niveau bruger Android faner, der indeholder 2 typer: fast og rullbar og understøtter skubbebevægelse for at skifte visninger. iOS bruger segmenterede kontroller, hvis varer er begrænset til 2–5.

Knapper

Selvom Android og iOS har deres egne standardknapstilarter, kan visuelle designere stadig designe knapper efter deres tanke, så længe knappestilarterne ikke forvirrer brugerne. Den eneste ting, der skal bemærkes, er, at Android bruger UPPERCASE til alle tekster, der kan tappes, inklusive deres knapper.

Flydende handlingsknapper VS. Knapper til opfordring

Android har en egen karakteristisk flydeaktionsknap til hovedhandling på skærmen. FAB'erne sættes i nederste højre hjørne for let at nå og tappe. iOS-opfordring til handlingsknapper, sættes i midten af ​​fanebjælkerne, har normalt anden stil med andre rigtige faner.

Nederste ark VS. Handlingsark og aktivitetsvisninger

iOS har haft action ark i lang tid, og derefter har Android også bundark med handlinger til brug i én hånd.

Dialoger VS.Alter

Dialog bruges til advarsel, giver muligheder og bekræftelse. Android og iOS sætter hovedhandlingsknappen på højre side og sekundær handling, som annullering, på venstre side. Teksterne på knappen skal være enkle og klare. Verber kan bruges til i stedet for Ja og Nej.

Fuldskærmsdialog VS. Modale udsigter & popovers

Android-fuldskærmsdialog og iOS-modalvisninger eller popovers på telefonenheder er fuldskærm, men på tablettene er ikke fuld skærm.

Snackbars & Toasts VS. Luk automatisk underretninger

Snackbars, toasts og alarmer bruges som feedback, når der er truffet en handling.

Lister VS. Borde og celler (rækker)

Android har en tendens til at bruge plads snarere opdele til at adskille relaterede indholdstekster på lister. Android bruger skillelinjer, når indholdsteksterne er helt forskellige. iOS har opdelere til at danne celler i sine tabeller. Celler, der kan tappes til iOS, har næste skærmindikatorer, der giver bedre brugervenlighed end Android. iOS-tabletter har 2 typer: almindelige og grupperede tabeller.

Underoverskrifter VS. Gruppede tabeloverskrifter og sektionshoved

Android har kun underoverskrifter, men iOS har tabeloverskrifter til grupperede tabeller og sektionsoverskrifter til almindelige tabletter.

Liste kontrol

Android og iOS har deres egne listekontroller til enkeltvalg, multivalg og ombestilling. Vælg passende, afhængigt af hver platform.

Menuer VS. Pickers & nye skærme

Android har menuer, men iOS bruger vælgere til korte lister og nye skærme til længere lister.

Tavlister VS. Samling visninger

Grundlæggende har Android og iOS lignende gitter / samling visninger.

Kort

UI med kortstil er en nøglefunktion i Android Material Design, men iOS har også lignende design.

Dato / klokkeslæt

Android og iOS har deres egne standarddato / klokkeslæt.

delere

Android har skillelinjer, men iOS bruger gruppetabeller til at adskille adskilt indhold.

Tekstfelter

Android og iOS har deres egne tekstfelter. Vis passende tastaturer afhængigt af inputformater for tekstfelter.

sliders

Android og iOS har deres egne komponenter. Begge er ens.

Søg

Android har vedvarende søgning og udvidelig søgning, ligesom iOS har fremtrædende søgning og minimal søgning. Nogle gange skjuler iOS søgebjælker bag navigationslinjen, brugere er nødt til at stryge ned for at fremkalde dem.

Slet og andre handlinger

Android-brugere skal først vælge emner og derefter udføre andre handlinger som slet. iOS understøtter swipning for at slette. iOS-brugere kan også gå ind i redigeringsfunktion for at slette elementer eller vælge emner for at udføre andre handlinger.

Vælg tekster

Traditionelt set, når tekster er valgt, viser Android-appbjælker handlinger, som kopi, klip, vælg alle. Android har nu også en værktøjslinje med handlinger vist ovenfor de valgte tekster, som iOS normalt gør.

Fremskridt & aktivitet

Hvis fremdriften for en handling er forudsigelig og målbar, skal du bruge statuslinjen; hvis ikke, brug i stedet spinners.

Ikoner: Del VS. Handling

Android og iOS har deres eget share-ikon. Brug ikke Android-delingsikonet på iOS, og vice versa.

Statuslinjer

Android- og iOS-statuslinjen har dybest set tid, batteristatus, Wi-Fi-signal og mobilforbindelsessignal. Fremkald meddelelsescentre ved at stryge ned fra statuslinjer.

Navigationsbarer VS. Hjem-knapper

Android-navigationsbjælker har 3 taster, tilbage, hjem og nylige apps. iOS har kun en nøgle, kun hjemme. Dobbelttryk for at fremkalde den nyeste appliste. Tilbageknapper på navigationsbjælker i iOS-apps er nødvendige.

Resumé

Fra observation inden for de seneste år er Android's adfærd og UI-komponenter mere og mere ligner iOS, selvom Android stadig holder nogle af deres egne unikke opførsler. Jeg tror, ​​Google har forsøgt at domæne UI-designsprog på tværs af forskellige platforme. I fremtiden kan det forventes, at Android og iOS vil være tættere og tættere, og det er godt for brugere og udviklere.

Selvom nogle UI-komponenter ikke er defineret i Android-materiale-designretningslinjer eller iOS-menneskelige interface-retningslinjer, betyder det ikke, at du ikke kan bruge disse komponenter. I nogle situationer på grund af standardgrænsefladen til UI-komponenter kan vi stadig låne erfaringer fra andre platforme og tilpasse komponenter til at erobre vanskeligheder. Det egentlige punkt er, at opførsel eller komponenter vil forvirre vores brugere eller ej.

Disse mønstre introduceret her kan ikke anvendes direkte til alle apps. De skal muligvis justeres afhængigt af forskellige scenarier og krav. Jeg håber, at alle ved bedre om komponenter og adfærd på 2 platforme. Hvis der er fejl, eller hvis du har spørgsmål, er du velkommen til at rette eller diskutere med mig. Tak skal du have!

Giv 10 klapper, hvis du har læst denne artikel.
Giv 20 klapper, hvis du synes, det er nyttigt.
Giv 50 klapper, hvis du synes det er fantastisk!
Tak skal du have :)
-------------------------------------------------- ------------------
Jeg taler ikke om grundene til, at Retningslinjer for materialedesign og iOS-retningslinjer for menneskelig grænsefladedesign har denne form for adfærd eller regler snarere end andre. Denne artikel er mere som til praktisk brug. Jeg vil gerne drøfte konteksterne og årsagerne i andre artikler i fremtiden.
Jeg har heller ikke opdateret til Android O og iOS 11.

Reference