Cada dia, per encàrrec, he d'intercanviar amb diferents actors d'un projecte. Segons la posició i l'apetit per la disciplina del disseny d'UX-UI, cadascú té un coneixement diferent dels termes utilitzats.
Al llarg de les missions, doncs, he recopilat un gran nombre de conceptes i és un vocabulari que m'hauria agradat tenir quan vaig començar i que, per tant, he anat consolidant a mesura que vaig avançant per ajudar els futurs estudiants o principiants en el digital.
Per això us he preparat una sèrie d'articles on s'explicarà cada concepte perquè us hi feu referència.
Continuem la sèrie amb aquesta tercera part i els 21 conceptes que la conformen. Si mai voleu consultar prèviament les dues primeres parts, aquí teniu els enllaços: part 1 et part 2.
#1 _ Quadrícula i espai
Reixa
La graella és un dipòsit per construir l'estructura de pàgines i prioritzar la informació. Aquest és un dels exercicis que cal abordar primer a l'hora de crear els nostres wireframes i models; i això per a cadascun dels dispositius.
Línia de base
La línia base proporciona un punt de referència a l'hora de col·locar un bloc de text i determinar quin interlineat triar.
Punt d'interrupció
Un punt de ruptura és un altiplà. A partir d'una certa amplada de la finestra, la disposició i la disposició dels continguts poden variar per adaptar-se a l'espai disponible.
Espaciats
L'espaiat entre els diferents elements i contingut de les vostres interfícies és molt important. Adaptant correctament els espais, podreu crear comoditat lectora i limitar el risc d'error.
- Marge: controla l'espai entre l'element actual i altres elements de la pàgina
- Farciment: controla l'espai entre el contingut i la vora de l'element.
Frontera-radi
La propietat "border-radius" és una propietat CSS que us permet definir l'angle de les cantonades d'un element. Cada angle es pot definir de manera diferent per crear una forma desigual o cada angle pot tenir el mateix valor. Trobem vores-radios en diferents elements d'una interfície: un fons, un mapa, un botó, etc. L'elecció del radi de la vora tindrà un fort impacte en la sensació general de la interfície. Per tant, és important entendre les propietats que ofereix cadascun.
Vaig escriure un article per ser guiat en l'elecció del radi de la vora que utilitzem en el disseny de la interfície d'usuari: Us compartiré l'enllaç aquí.
#2 _ Notificacions i alertes
Torrades / Snackbar
El brindis i el snackbar són components que informen l'usuari d'una acció en curs. Es tracta de notificacions "a l'aplicació", contextuals i no obstructives (generalment només apareixen uns segons abans de desaparèixer).
Et permeten donar un missatge breu sobre alguna cosa que està passant (per exemple, un estat).
- Brindis: dóna comentaris sobre el que està passant actualment
- apareix i desapareix sense necessitat d'acció de l'usuari
- només hi ha un missatge d'informació (cap acció)
- pot ser contextual més àmpliament a nivell d'aplicació
- Snackbars: mostra alertes, accions addicionals
- podeu fer-lo desaparèixer manualment mitjançant un gest o un botó
- es proposen accions contextuals a l'acció
- s'ha d'enllaçar amb el context de la pantalla que es mostra o amb l'acció actual
Finestra modal/no modal
- Finestra modal: s'obre a sobre de l'aplicació i no permet a l'usuari interactuar amb la finestra de l'aplicació "a sota" (la finestra que l'ha obert), fins que roman oberta.
- Finestra no modal: també s'obre a sobre de l'aplicació però permet a l'usuari continuar interactuant amb la finestra de l'aplicació situada "a sota", sense necessitat de tancar-la.
Pop-up / Pop-in
- Pop-up: és una finestra que apareix a sobre del contingut. Això l'obre el vostre navegador i no el lloc. Fins que l'usuari el tanca, es bloqueja.
La finestra emergent s'utilitza per mostrar missatges publicitaris, advertiments o notificacions. - Pop-in: és una finestra que també es mostra a sobre del contingut. El seu funcionament és similar a les finestres emergents. La diferència és que s'activa pel codi del lloc web i no pel navegador. La finestra emergent s'utilitza per mostrar contingut relacionat amb el lloc web com ara imatges, fotos, vídeos, etc.
Popover
Es pot utilitzar una finestra emergent per mostrar un contingut sobre un altre. Per exemple, la descripció d'una ubicació en un mapa quan feu clic a una ciutat.
Notificacions push
La notificació push és un missatge d'alerta enviat pel servidor (que "envia" informació) a un usuari mitjançant una aplicació mòbil.
#3 _ Els diferents tipus de menú
Us permet reunir les entrades d'un lloc darrere d'un sol botó.
Barra de pestanyes
La barra de pestanyes apareix a la part inferior d'una aplicació mòbil i permet als usuaris moure's ràpidament entre les pàgines principals d'una aplicació.
Conclusió
Ens tornem a trobar per a la propera sèrie, la quarta i última, on veurem junts un gran tema: components de maquetació, formes i accions.
Si alguna vegada voleu aprofundir en els vostres coneixements i practicar el disseny d'una interfície web, el centre de formació UX Republic ofereix formació "Disseny d'UI, els fonaments". Aquí teniu l'enllaç per saber-ne més.
Alexa CUELLAR, UX Designer @UX-Republic
