Ukoliko se razvija za sve tri tada treba, kako je već navedeno, osigurati u najvećoj mogućoj mjeri konzistentnost i usklađenog korisničkog iskustva, kako prelazak s jedne platforme na drugu za korisnika ne bi bio prekompleksan.
- Lista materijalnih komponenti za Android OS
Materijalne komponente su interaktivni gradivni blokovi za stvaranje korisničkog sučelja. Mnoge od njih su dostupne kao dio otvorenog koda i za iOS, web i Flutter.
- Gornje trake aplikacije - https://material.io/components/app-bars-top
- Donje trake aplikacije - https://material.io/components/app-bars-bottom
- Pozadinski sadržaj (Backdrop) - https://material.io/components/backdrop
- Baneri - https://material.io/components/banners
- Donja navigacija - https://material.io/components/bottom-navigation
- Gumbi - https://material.io/components/buttons
- Lebdeći gumbi - https://material.io/components/buttons-floating-action-button
- Kartice - https://material.io/components/cards
- “Chips” - https://material.io/components/chips
- Podatkovne tablice - https://material.io/components/data-tables
- Birači datuma - https://material.io/components/date-pickers
- Dijalozi - https://material.io/components/dialogs
- Meniji - https://material.io/components/menus
- Navigacijski izbornici - https://material.io/components/navigation-drawer
- Potvrdni okviri (checkbox) - https://material.io/components/selection-controls#checkboxes
- Radio gumbi (radio buttons) - https://material.io/components/selection-controls#radio-buttons
- Prekidači - https://material.io/components/selection-controls#switches
- Listovi (sheets) - https://material.io/components/sheets-bottom
- Slideri - https://material.io/components/sliders
- Kratke obavjesne poruke - https://material.io/components/snackbars
- Tabovi - https://material.io/components/tabs
- Tekstualna polja - https://material.io/components/text-fields
- Birači vremena - https://material.io/components/time-pickers
- Komponente za Apple iOS
Većina iOS aplikacija izgrađena je pomoću komponenti iz UIKit-a35, programskog okvira koji definira uobičajene elemente sučelja. UIKit elementi su fleksibilni i poznati.
Elementi sučelja koje pruža UIKit uklapaju se u tri glavne kategorije:
- Trake - predstavljaju navigaciju koja može sadržavati gumbe ili druge elemente za pokretanje radnji i prenošenje informacija.
- Pogledi/Prikazi - sadrže primarni sadržaj koji korisnici vide u aplikaciji, kao što su tekst, grafika, animacije i interaktivni elementi. “Pogledi” mogu omogućiti ponašanja poput pomicanja, umetanja i brisanja.
- Kontrole - iniciranje akcija i prenošenje informacija. Gumbi, prekidači, tekstualna polja i indikatori napretka primjeri su kontrola.
Trake
- Navigacijske trake- https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/
- Trake za pretraživanje - https://developer.apple.com/design/human-interface-guidelines/ios/bars/search-bars/
- Bočne trake - https://developer.apple.com/design/human-interface-guidelines/ios/bars/sidebars/
- Statusne trake - https://developer.apple.com/design/human-interface-guidelines/ios/bars/status-bars/
- Trake s karticama - https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/
- Alatne trake - https://developer.apple.com/design/human-interface-guidelines/ios/bars/toolbars/
Pogledi/Prikazi
• List s radnjama (Action sheet) - https://developer.apple.com/design/human-interface-guidelines/ios/views/action-sheets
• Prikaz aktivnosti - https://developer.apple.com/design/human-interface-guidelines/ios/views/activity-views/
• Upozorenja - https://developer.apple.com/design/human-interface-guidelines/ios/views/alerts/
• Kolekcije - https://developer.apple.com/design/human-interface-guidelines/ios/views/collections/
• Prikazi slika - https://developer.apple.com/design/human-interface-guidelines/ios/views/image-views/
• Stranice - https://developer.apple.com/design/human-interface-guidelines/ios/views/pages/
• Iskočni prozori (Popovers) - https://developer.apple.com/design/human-interface-guidelines/ios/views/popovers/
• Skrolabilni pregledi (Scroll Views) - https://developer.apple.com/design/human-interface-guidelines/ios/views/scroll-views/
• Razdijeli pregledi - https://developer.apple.com/design/human-interface-guidelines/ios/views/split-views/
• Tabele - https://developer.apple.com/design/human-interface-guidelines/ios/views/tables/
• Tekstualni pregledi - https://developer.apple.com/design/human-interface-guidelines/ios/views/text-views/
• Web pregledi (Web Views) - https://developer.apple.com/design/human-interface-guidelines/ios/views/web-views/
Kontrole
• Gumbi - https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/
• Izabirači boja - https://developer.apple.com/design/human-interface-guidelines/ios/controls/color-wells/
• Kontekstualni izbornici - https://developer.apple.com/design/human-interface-guidelines/ios/controls/context-menus/
• Izbornici za uređivanje - https://developer.apple.com/design/human-interface-guidelines/ios/controls/edit-menus/
• Labele - https://developer.apple.com/design/human-interface-guidelines/ios/controls/labels/
• Kontrole pregleda - https://developer.apple.com/design/human-interface-guidelines/ios/controls/page-controls/
• Birači opcija - https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/
• Pokazatelji napretka - https://developer.apple.com/design/human-interface-guidelines/ios/controls/progress-indicators/
• Padajući izbornici - https://developer.apple.com/design/human-interface-guidelines/ios/controls/pull-down-menus/
• Kontrole osvježavanja sadržaja - https://developer.apple.com/design/human-interface-guidelines/ios/controls/refresh-content-controls/
• Segmentirane kontrole - https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/
• Klizači (Sliders) - https://developer.apple.com/design/human-interface-guidelines/ios/controls/sliders/
• Koraci (Steppers) - https://developer.apple.com/design/human-interface-guidelines/ios/controls/steppers/
• Prekidači - https://developer.apple.com/design/human-interface-guidelines/ios/controls/switches/
• Tekstualna polja - https://developer.apple.com/design/human-interface-guidelines/ios/controls/text-fields/
- Komponente za HarmonyOS
Galerija komponenti HUAWEI sadrži uobičajene komponente predloška i osnovne parametre, koji se moraju koristiti zajedno s UX specifikacijama36. Biblioteka komponenti je dostupna kao SKETCH datoteka koja se downloada.
