Nota
L'accés a aquesta pàgina requereix autorització. Podeu provar d'iniciar la sessió o de canviar els directoris.
L'accés a aquesta pàgina requereix autorització. Podeu provar de canviar els directoris.
S'aplica a aquesta Power Platform recomanació de la llista de verificació d'optimització de l'experiència Well-Architected:
| XO:06 | Mantingueu dissenys utilitzables i visualment atractius en totes les mides i resolucions de pantalla. Utilitzeu tècniques adaptatives per representar dinàmicament el contingut de diverses maneres. |
|---|
Aquesta guia descriu les recomanacions per dissenyar dissenys de pantalla fàcils de navegar i adaptar-se amb fluïdesa a diversos dispositius. Aquest enfocament garanteix que els usuaris tinguin una experiència de visualització coherent i òptima independentment del dispositiu que utilitzin.
Definicions
| Terme | Definició |
|---|---|
| Finestra gràfica | Part visible d'una interfície digital, com ara un navegador web o una aplicació mòbil, on es mostra el contingut. Els intervals de la finestra gràfica sovint s'associen amb classes de dispositius (mòbils, tauletes i escriptori) en funció de les dimensions i resolucions de la pantalla. |
| Punts d'interrupció | Valors de píxels específics que defineixen els intervals de la finestra gràfica utilitzats per determinar el comportament de disposició adaptativa. |
Estratègies clau de disseny
Els dissenys responsius proporcionen una experiència d'usuari flexible i eficient en diferents mides de finestra. S'adapten escalant contingut, reordenant elements i mostrant text i imatges de manera selectiva. Els dissenys responsables satisfan les necessitats dels usuaris independentment de la mida de la pantalla.
Determinar un marc d'aplicació coherent
El marc de l'aplicació consisteix en un conjunt de controls que estan disponibles constantment a cada pantalla. Consta de tres subcomponents principals: una capçalera, una navegació i una regió de contingut. Les aplicacions senzilles tenen la flexibilitat d'utilitzar el component de capçalera, mentre que les aplicacions més sofisticades sovint utilitzen la navegació lateral per habilitar diverses pàgines. Els subcomponents són personalitzables. Per exemple, podeu incorporar una cerca global a la capçalera o agrupar elements a la navegació lateral per adaptar-los als requisits de l'aplicació.
Els tres subcomponents principals del marc de l'aplicació són:
La capçalera és un component bàsic dissenyat per formar part de totes les aplicacions internes. Consta de subcomponents que donen als usuaris accés a funcions de tot el sistema, els ajuden a orientar-se a la interfície d'usuari i proporcionen coherència entre experiències. Apareix a la part superior del marc de l'aplicació i s'ha de mantenir a totes les pàgines de l'aplicació. Opcionalment, pot allotjar ordres globals, com ara cerca, configuració, notificacions, comentaris, perfil o ajuda. El nom de l'aplicació sempre s'ha de mostrar i, idealment, també hauria de servir com a enllaç clicable a la pàgina d'inici o de destinació. La capçalera ha de respondre, amb ordres que es mouen al control de desbordament en les finestres de visualització de 600 píxels o menys. L'amplada d'entrada de cerca també respon a 1023 píxels o menys.
La navegació és un sistema de controls que treballen conjuntament per ajudar els usuaris a trobar informació i completar tasques. Ajuda els usuaris a saltar de secció en secció d'una aplicació. Jeràrquicament, no s'adjunta a cap pàgina o secció, sinó que existeix per sobre de qualsevol altre contingut. Sempre està present i es pot minimitzar a un estat col·lapsat (també anomenat estat ferroviari) per alliberar espai addicional per al contingut de la pàgina. A mides de finestra més petites, es pot minimitzar en un menú desplegable. Les formes de navegació més habituals inclouen la navegació superior i la navegació lateral. No utilitzeu tots dos simultàniament.
La regió de contingut conté el focus de la pantalla. La mida de la finestra del navegador influeix en el marc de contingut i l'espai disponible a la regió de contingut principal. Aquest marc s'adapta en funció del punt d'interrupció i del comportament responsiu corresponent de cada component. Obteniu més informació a Crear una matriu de punts d'interrupció.
Opcionalment, la regió de contingut pot contenir diverses subregions disponibles per a la col·locació coherent dels elements, com ara una capçalera de pàgina, subfinestres laterals en línia o panells que se superposen al contingut.
Adherir-se a un llenguatge de disseny coherent amb esquemes de colors, tipografia i estructura de disseny ajuda els usuaris a identificar i interactuar ràpidament amb diversos elements sense confusió. Com més coherent s'utilitzi un patró de marc d'aplicació en totes les aplicacions empresarials internes, més fort serà el record o el model mental de l'usuari. Alinear-se amb els estàndards de la indústria o els patrons de plataforma comuns millora encara més aquest efecte.
Un cop determinat el marc de l'aplicació, el disseny de cada pantalla resideix dins de l'àrea de contingut del marc de l'aplicació.
Utilitzeu atentament la regió de contingut
Els usuaris desitgen experiències perfectes on la informació sigui fàcilment accessible, el text sigui fàcil de llegir i l'estètica millori en lloc d'obstaculitzar la usabilitat. Prioritzeu la visibilitat inicial de la informació clau, garantiu la llegibilitat entre columnes i harmonitzeu els elements de disseny per obtenir un atractiu estètic.
Assegureu-vos que la informació essencial sigui immediatament visible en obrir la pantalla sense necessitat de desplaçar-se. Prioritzeu la visualització d'informació essencial, com ara opcions de navegació, contingut crucial i elements accionables a prop de la part superior de la pantalla. Trobar un equilibri entre mostrar prou articles i proporcionar informació detallada per a cada element és un repte constant. Per contra, tot i que pot ser temptador proporcionar tota la informació possible en la vista inicial, massa informació corre el risc d'aclaparar els usuaris i diluir la importància dels elements clau. Penseu en utilitzar resums o previsualitzacions concises que ofereixin una visió més detallada del contingut, incitant els usuaris a aprofundir. Els taulers estan optimitzats per a aquest propòsit per visualitzar grans quantitats de dades.
Incorporeu diverses columnes, seccions o agrupacions per organitzar lògicament el contingut i maximitzar l'espai. Presteu una atenció meticulosa a l'amplada de la columna, assegurant-vos que el text es mantingui llegible sense esforç excessiu. Eviteu columnes massa estretes que obliguen els usuaris a desplaçar-se constantment horitzontalment, interrompent el flux d'interacció. Per contra, les columnes excessivament amples poden impedir la llegibilitat, obligant els usuaris a fer un seguiment de les línies a distàncies llargues. Esforça't per aconseguir un equilibri que s'adapti a la lectura còmoda alhora que fes un ús eficient de l'espai disponible.
Mida i col·locació adequada dels elements visuals per crear una interfície visualment agradable i equilibrada. Alineeu els subtítols amb les imatges o els títols corresponents, mantingueu un espaiat coherent entre els elements i respecteu una jerarquia basada en les necessitats de l'usuari. Retalleu els adorns innecessaris i assigneu els píxels amb criteri als elements que més importen. Prioritzeu i emfatitzeu el contingut i els elements de navegació, especialment a les aplicacions o pàgines d'inici de navegació intensiva, i eviteu l'ornamentació superflua que perjudiqui la usabilitat.
Una quadrícula subjacent pot ser útil per organitzar els elements de manera coherent. El comportament de la quadrícula escollit ha de ser coherent a la regió de contingut de cada pantalla de l'aplicació i també es pot aplicar al nivell de component, com ara targetes o subfinestres laterals. El tipus més comú de disseny de quadrícula utilitzat en aplicacions web és la quadrícula de columnes. Es recomana un comportament de quadrícula fluid (o estirament) per implementar pantalles sensibles.
Utilitzar dissenys establerts i patrons d'agrupació
Utilitzeu estructures i arranjaments comunament reconeguts per organitzar contingut i elements dins d'una interfície d'usuari. Aquests dissenys i patrons s'han perfeccionat i demostrat ser efectius amb el temps, fent-los familiars i intuïtius per als usuaris, alhora que faciliten la implementació de patrons adaptatius. Un cop identificats els escenaris i elements bàsics, assigneu-los a un disseny establert que proporcioni la millor interacció. Prioritzeu el contingut i les funcions importants per a la realització de tasques. Decideix quins elements han d'estar sempre visibles i accessibles a la pantalla i quins es poden amagar o accedir a través d'altres menús o accions.
La llista següent, tot i que no és exhaustiva, descriu els dissenys establerts que s'utilitzen habitualment per a aplicacions empresarials o de productivitat. Tots es poden col·locar dins de la regió de contingut principal.
Aterratge/pantalla d'inici
La pantalla d'aterratge o d'inici serveix com a punt d'entrada a una aplicació, proporcionant als usuaris una visió general de les ofertes o funcions de l'aplicació. Normalment té com a objectiu captar l'atenció dels visitants i anima a realitzar una acció específica, com ara completar una tasca per primera vegada o explorar més contingut. Sovint conté imatges heroiques i opcions de navegació netes.
És ideal per donar la benvinguda als usuaris, oferir accés ràpid a funcionalitats clau, opcions de navegació o crides a l'acció i establir el to de l'experiència de l'aplicació. Prioritzeu la claredat, la simplicitat i la navegació intuïtiva per guiar els usuaris de manera eficaç.
Escriptori digital
Un tauler és un centre centralitzat dins d'una aplicació que presenta als usuaris una visió general completa de les dades o informació rellevants. Sovint consisteix en ginys o mòduls personalitzables, que permeten als usuaris supervisar mètriques específiques o realitzar accions.
Els taulers són adequats per a aplicacions amb conjunts de dades complexos o funcionalitats multifacètiques, cosa que permet als usuaris fer un seguiment del progrés, analitzar tendències i prendre decisions informades d'un cop d'ull. Són especialment útils en plataformes d'anàlisi, eines de gestió de projectes i aplicacions de gestió financera.
Formulari
Un formulari és un disseny estructurat que facilita l'entrada de dades dels usuaris, normalment format per camps per introduir diversos tipus d'informació, com ara text, números, dates i seleccions. Els formularis són essencials per recollir les entrades dels usuaris, processar transaccions i facilitar les interaccions dins de les aplicacions.
S'utilitzen habitualment en fluxos de registre, processos de pagament, tasques d'entrada de dades i qualsevol escenari que requereixi aportacions o comentaris de l'usuari.
Vista d'entitat/perfil
La visualització d'entitat o perfil presenta informació detallada sobre una entitat específica, com ara un perfil d'usuari, una fitxa de producte o un element de contingut. Normalment inclou text descriptiu, elements multimèdia i accions o interaccions rellevants.
Són molt adequats per mostrar informació detallada sobre els elements d'una aplicació. Proporcionen als usuaris informació detallada, faciliten la presa de decisions i donen suport a la interacció amb entitats específiques, com ara perfils d'usuari en aplicacions de xarxes socials o llistats de productes en plataformes de comerç electrònic.
Pàgina de llista
Una llista o taula mostra una col·lecció d'elements o entitats en un format estructurat, sovint presentat en un disseny lineal o de quadrícula. Normalment inclou breus resums o previsualitzacions de cada element, juntament amb controls de navegació per navegar o filtrar.
Les pàgines de llista són efectives per presentar grans conjunts de contingut o dades en un format digerible, permetent als usuaris escanejar, cercar i navegar de manera eficient. Si les accions en files específiques estan habilitades, el procés hauria de ser clar. Les pàgines de llista s'utilitzen habitualment en sistemes de gestió de contingut, llistats de directoris, resultats de cerca i canals de notícies.
Mini revisió (pantalla dividida)
Una mini-revisió o pantalla dividida divideix la interfície en dues seccions diferents, amb una llista que es mostra a la part esquerra i una vista d'elements a la part dreta. La llista normalment conté una col·lecció d'elements, mentre que la visualització d'elements proporciona informació detallada sobre l'element seleccionat a la llista.
Aquest disseny és especialment eficaç en escenaris en què els usuaris han de navegar ràpidament per una llista d'elements i veure informació detallada sobre cada element simultàniament, com ara quan realitzen operacions massives. Els catàlegs de productes, els sistemes d'administració de documents, els clients de correu electrònic o de comunicació i les eines d'administració de tasques (per exemple, el visualitzador de consultes de l'Azure Dev Ops) són escenaris que normalment s'ajusten a aquest patró.
Auxiliar
Un assistent guia els usuaris a través d'una sèrie de passos o tasques seqüencials, normalment de manera lineal, per completar un procés complex o assolir un objectiu específic. Sovint inclou indicadors de progrés, indicacions i comprovacions de validació. Els assistents són beneficiosos per simplificar processos complexos, reduir la sobrecàrrega cognitiva i guiar els usuaris a través de tasques o fluxos de treball desconeguts. S'utilitzen habitualment en fluxos d'incorporació, processos de configuració, formularis de diversos passos i interaccions basades en tasques, com ara configurar configuracions o transaccions complexes.
Personalitzeu i construïu el disseny estàndard per adaptar-lo a requisits específics. Aquest procés pot incloure afegir o eliminar elements, ajustar la mida i el posicionament dels elements i aplicar estils que coincideixin amb la identitat de marca o les directrius de disseny visual. Experimenteu amb diferents configuracions i variacions del disseny estàndard per trobar la disposició més eficaç per al contingut i l'experiència general de l'usuari.
Dissenya dissenys per a tots els dispositius
Els dissenys són la culminació de les regles definides i l'organització intencional del contingut. Portar el vostre contingut a estructures reflexives és clau, però fer que tot flueixi junt amb una jerarquia clara entre plataformes i mides de pantalla requereix una lògica d'escalat. Individualment, el disseny adaptatiu i responsive pot abordar aquest repte. En alguns casos, una combinació de disseny adaptatiu i sensible és l'opció correcta.
El disseny responsiu utilitza només un disseny, on el contingut és fluid i es pot adaptar a la mida del format canviant. Aquesta tècnica de disseny utilitza consultes multimèdia per inspeccionar les característiques d'un dispositiu determinat i renderitzar el contingut en conseqüència. El disseny responsiu us permet crear una funció una vegada i que funcioni eficaçment en totes les mides de pantalla.
Un disseny adaptatiu canvia completament en funció del format en què es presenta. El disseny adaptatiu té diverses mides de disseny fixes i activa el navegador per carregar un disseny determinat en funció de l'espai disponible. Els llocs web creats amb disseny adaptatiu utilitzen consultes multimèdia per detectar punts d'interrupció, de manera similar al disseny responsiu. També utilitzen marques addicionals en funció de les capacitats del dispositiu. Aquest procés es coneix com a "millora progressiva".
Recol·locar
Altera la posició dels elements de la pàgina.
Mantingueu el vostre contingut organitzat, llegible i equilibrat optimitzant la composició a mesura que augmenta la mida de la finestra. Per exemple, els elements apilats verticalment en una finestra de visualització mòbil es poden reposicionar horitzontalment en finestres de visualització més grans. Aquest canvi segueix un ordre de lectura natural d'esquerra a dreta, crea equilibri en el disseny i manté l'enfocament visual en els elements clau de la pàgina.
Redimensiona
Ajusteu la mida i els marges dels elements de la pàgina.
Canvieu la mida dels elements de la pàgina per optimitzar-los per a una experiència d'usuari rica mostrant més contingut a la part superior de la finestra, reduint la necessitat de desplaçament vertical. Ajusteu els marges de la pàgina per afegir espai en blanc i equilibri al disseny, cosa que permet que el contingut respiri i millori l'atractiu visual del disseny. Per exemple, un component heroi pot estendre's a tota l'amplada de la finestra per mostrar més de la imatge de fons. El contingut sota la imatge es pot ampliar, però utilitzar marges diferents per afegir varietat al disseny i ajudar a definir la jerarquia visual.
Redistribució
Optimitzeu el flux d'elements de la pàgina.
Ajusteu els elements de la pàgina per assegurar-vos que es mostrin completament, tenint en compte la mida i l'orientació de la finestra, reordenant el contingut. Per exemple, una sola columna de contingut en una finestra més petita es pot redistribuir en una finestra més gran per mostrar dues columnes de text. Aquesta tècnica permet mostrar més contingut "per sobre del plec".
Mostrar/amagar
Optimitzeu el contingut per a la mida de la finestra i la seva orientació.
Mostra o amaga els elements de la pàgina per optimitzar el contingut per a la mida de la finestra i la seva orientació. Aquesta tècnica responsiva adapta la quantitat d'informació al context de visualització. Per exemple, les categories que apareixen en una pantalla petita poden mostrar metadades limitades, com ara una imatge, un títol i un enllaç, de manera que es faci visible altra informació per ajudar l'usuari a concentrar-se. En una pantalla més gran, les categories poden mostrar metadades addicionals, com ara una persona, una data i una descripció curta, tot i que encara encaixen a la finestra de visualització.
Rearquitecte
Bifurqueu o reduïu els elements i el contingut de la pàgina per mantenir el focus en la informació i les accions importants.
Aquest enfocament és similar a seguir la pràctica de la "divulgació progressiva" en el vostre disseny, però per a diferents mides i orientacions de finestres. Per exemple, expandir la finestra permet mostrar una llista d'elements al costat dels detalls. Aquest enllaç visual entre el contingut permet als usuaris seleccionar fàcilment un altre element. En una pantalla més petita, el focus segueix sent mostrar informació clau.
Crear una matriu de punts d'interrupció
Una matriu de punts d'interrupció serveix com a representació gràfica dels comportaments responsius o adaptatius del disseny d'una aplicació en diferents mides i orientacions de pantalla. Normalment presenta una quadrícula estructurada o un disseny que detalla la resposta del disseny en diversos punts d'interrupció. Cada segment correspon a una amplada de pantalla diferent, oferint informació sobre l'estructura, el disseny i la funcionalitat del disseny. Una matriu de punts d'interrupció inclou consideracions sobre l'amplada de la pantalla, l'orientació de la finestra gràfica, els elements de disseny, l'estructura de disseny, la presentació del contingut, la navegació, els mitjans multimèdia i els components interactius, per il·lustrar com respon el disseny d'un lloc web o d'una aplicació en diferents mides i orientacions de pantalla. Aquest enfocament no només ajuda a finalitzar el disseny de cada pantalla, sinó que també facilita la implementació quan els canvis de propietats dels components clau es fan un seguiment explícit i es comuniquen bé.
Power Platform facilitació
Els dissenys de formulari d'aplicació basats en models es configuren mitjançant Power Apps Studio. El dissenyador de formularis permet als creadors afegir elements a una estructura de quadrícula, cosa que permet que les pàgines de formulari siguin inherentment sensibles. Els components personalitzats incrustats, com ara les pàgines personalitzades, els components de llenç incrustats i Power Apps els components de codi del Component Framework, han d'incorporar un comportament responsiu a les seves implementacions. Per exemple, les pàgines personalitzades han d'implementar un comportament responsiu de la mateixa manera que una aplicació de llenç pura per funcionar correctament.
Les aplicacions de llenç requereixen una configuració explícita per a cada component per implementar un comportament responsiu, permetentmés control sobre l'experiència. Les mides de la pantalla es determinen a la definició de l'aplicació, a la qual es pot fer referència per determinar la posició, el comportament, la visibilitat i altres propietats rellevants.