All Dag, op Aufgab, muss ech mat verschiddenen Acteuren vun engem Projet austauschen. Ofhängeg vun der Positioun an dem Appetit fir d'Disziplin vum UX-UI Design, huet jiddereen en anert Wëssen iwwer déi benotzte Begrëffer.
Iwwert d'Missioune hunn ech dofir eng grouss Unzuel u Konzepter zesummegestallt an et ass e Vokabulär, deen ech gär hätt wéi ech ugefaang hunn an deen ech dofir konsolidéiert hunn wéi ech matgoen, fir zukünfteg Studenten ze hëllefen oder nei op digital.
Ech hunn dofir eng Serie vun Artikelen fir Iech virbereet, wou all Konzept erklärt gëtt, fir datt Dir dorop bezéie kënnt.
Mir féieren d'Serie weider mat dësem drëtten Deel an den 21 Konzepter, déi et ausmaachen. Wann Dir jeemools déi éischt zwee Deeler virdru wëllt konsultéieren, hei sinn d'Links: Deel 1 et Deel 2.
#1 _ Gitter an Ofstand
Course
D'Gitter ass e Repository fir d'Struktur vun de Säiten ze bauen an d'Informatioun ze prioritéieren. Dëst ass eng vun den Übunge fir als éischt unzegoen wann Dir eis Drotframes a Modeller erstellt; an dëst fir jiddereng vun den Apparater.
Baseline
D'Basislinn bitt e Referenzpunkt wann Dir en Textblock placéiert a bestëmmt wéi eng Zeilabstand ze wielen.
Breakpoint
E Brochpunkt ass e Plateau. Vun enger gewësser Breet vun der Fënster kann de Layout an d'Arrangement vum Inhalt variéieren fir un de verfügbaren Raum unzepassen.
Abstanden
D'Distanz tëscht de verschiddenen Elementer an den Inhalt vun Ären Interfaces ass ganz wichteg. Andeems Dir d'Raim richteg ugepasst hutt, kënnt Dir Lieskomfort kreéieren an de Risiko vu Feeler limitéieren.
- Margin: Kontrolléiert de Raum tëscht dem aktuellen Element an aner Elementer op der Säit
- Padding: Kontrolléiert de Raum tëscht dem Inhalt an der Elementgrenz.
Grenzradius
De "Grenzradius" Eegeschafte ass eng CSS Eegeschafte déi Iech erlaabt de Wénkel vun den Ecker vun engem Element ze definéieren. All Wénkel kann anescht definéiert ginn fir eng ongläich Form ze kreéieren oder all Wénkel kann dee selwechte Wäert hunn. Mir fanne Grenzradiusen op verschidden Elementer vun enger Interface: en Hannergrond, eng Kaart, e Knäppchen, asw. D'Wiel vum Grenzradius wäert e staarken Impakt op d'Gesamtgefill vun der Interface hunn. Et ass also wichteg d'Eegeschafte ze verstoen déi jidderee bitt.
Ech hunn en Artikel geschriwwen fir guidéiert ze ginn an der Wiel vum Grenzradius dee mir am UI Design benotzen: Ech wäert de Link hei mat Iech deelen.
#2 _ Notifikatiounen an Alarmer
Toast / Snackbar
Den Toast an d'Snackbar sinn Komponenten déi de Benotzer informéieren iwwer eng Aktioun déi amgaang ass. Dëst sinn "an App" Notifikatiounen, kontextuell an déi net obstruktiv sinn (si schéngen normalerweis nëmmen e puer Sekonnen ier se verschwannen).
Si erlaben Iech e kuerze Message ze ginn iwwer eppes wat geschitt (zum Beispill e Staat).
- Toast: gëtt Feedback op wat am Moment geschitt
- schéngt a verschwënnt ouni Benotzer Aktioun néideg
- et gëtt nëmmen eng Informatiounsmeldung (keng Aktioun)
- kann kontextuell méi breet um Applikatiounsniveau sinn
- Snackbars: weist Alarmer, zousätzlech Aktiounen
- Dir kënnt et manuell mat engem Geste oder engem Knäppchen verschwannen
- kontextuell Aktiounen op d'Aktioun proposéiert ginn
- muss mam Kontext vum ugewisenen Ecran oder mat der aktueller Aktioun verbonne sinn
Modal / Net-modal Fënster
- Modal Fënster: mécht iwwer d'Applikatioun op an erlaabt de Benotzer net mat der Applikatiounsfenster "ënner" ze interagéieren (d'Fënster déi se opgemaach huet), bis se op bleift.
- Net-modal Fënster: mécht och iwwer d'Applikatioun op, awer erlaabt de Benotzer weider mat der Applikatiounsfenster ze interagéieren déi "ënnert" läit, ouni se onbedéngt zou ze maachen.
Pop-up / Pop-in
- Pop-up: ass eng Fënster déi iwwer dem Inhalt erschéngt. Dëst gëtt vun Ärem Browser opgemaach an net vum Site. Bis de Benotzer et zoumaacht, gi se blockéiert.
De Pop-up gëtt benotzt fir Reklammmeldungen, Warnungen oder Notifikatiounen ze weisen. - Pop-in: ass eng Fënster déi och iwwer den Inhalt ugewise gëtt. Hir Operatioun ass ähnlech wéi Pop-ups. Den Ënnerscheed ass datt et vum Code vun der Websäit ausgeléist gëtt an net vum Browser. De Pop-in gëtt benotzt fir Inhalter am Zesummenhang mat der Websäit ze weisen wéi Biller, Fotoen, Videoen, asw.
Popover
E Popover kann benotzt ginn fir een Inhalt iwwer en aneren ze weisen. Zum Beispill, d'Beschreiwung vun enger Plaz op enger Kaart wann Dir op eng Stad klickt.
Notifikatiounen drécken
Push Notifikatioun ass eng Alarmmeldung, déi vum Server geschéckt gëtt (déi Informatioun "dréckt") un e Benotzer duerch eng mobil Applikatioun.
#3 _ Déi verschidden Zorte vu Menü
Et erlaabt Iech d'Entrée vun engem Site hannert engem eenzege Knäppchen zesummenzebréngen.
Tab Bar
D'Tabbar erschéngt um Enn vun enger mobiler Applikatioun an erlaabt d'Benotzer séier tëscht den Haaptsäiten vun enger Applikatioun ze plënneren.
Konklusioun
Mir treffen eis erëm fir déi nächst Serie, déi véiert a lescht, wou mir zesummen e grousst Thema gesinn: Layoutkomponenten, Formen an Aktiounen.
Wann Dir jeemools Äert Wëssen verdéiwe wëllt an d'Praxis fir e Webinterface ze designen, bitt den UX Republic Trainingszentrum "UI Design, d'Grondlagen" Training. Hei ass de Link fir méi gewuer ze ginn.
Alexa CUELLAR, UX Designer @UX-Republic
