Oharra
Baimena behar duzu orria atzitzeko. Direktorioetan saioa has dezakezu edo haiek alda ditzakezu.
Baimena behar duzu orria atzitzeko. Direktorioak alda ditzakezu.
Ongi Arkitekturatutako Esperientzia Optimizatzeko kontrol-zerrendako gomendio honi aplikatzen zaio: Power Platform
| XO:06 | Mantendu diseinu erabilgarriak eta bisualki erakargarriak pantaila-tamaina eta bereizmen guztietan. Erabili teknika egokitzaileak edukia modu dinamikoan errendatzeko hainbat modutan. |
|---|
Gida honek nabigatzeko errazak diren eta hainbat gailutan jariakortasunez egokitzen diren pantaila-diseinuak diseinatzeko gomendioak deskribatzen ditu. Ikuspegi honek erabiltzaileek ikusteko esperientzia koherente eta optimoa izatea bermatzen du, erabiltzen duten gailua edozein dela ere.
Azalpenak
| Terminoa | Definizioa |
|---|---|
| Ikuspegi-leihoa | Edukia bistaratzen den interfaze digital baten ikusgai dagoen zatia, hala nola web arakatzaile edo mugikorretarako aplikazio bat. Ikuspegi-eremuen barrutiak sarritan gailu-klaseekin (mugikorra, tableta eta mahaigaina) lotzen dira, pantailaren neurrien eta bereizmenen arabera. |
| Eten-puntuak | Diseinu moldagarriaren portaera zehazteko erabiltzen diren ikuspegi-eremuen barrutiak definitzen dituzten pixel balio espezifikoak. |
Diseinu estrategia nagusiak
Diseinu erantzunkorrek erabiltzaile-esperientzia malgua eta eraginkorra eskaintzen dute leiho-tamaina desberdinetan. Edukia eskalatuz, elementuak berrantolatuz eta testua eta irudiak selektiboki bistaratuz egokitzen dira. Diseinu arduratsuek erabiltzaileen beharrak asetzen dituzte, haien pantailaren tamaina edozein dela ere.
Aplikazio-esparru koherente bat zehaztu
Aplikazio-markoa pantaila guztietan etengabe eskuragarri dauden kontrol multzo batez osatuta dago. Hiru azpiosagai nagusi ditu: goiburua, nabigazioa eta edukiaren eskualdea. Aplikazio sinpleek goiburuko osagaia erabiltzeko malgutasuna dute, aplikazio sofistikatuagoek alboko nabigazioa erabiltzen duten bitartean hainbat orrialde gaitzeko. Azpiosagaiak pertsonalizagarriak dira. Adibidez, goiburuan bilaketa global bat txerta dezakezu edo alboko nabigazioko elementuak taldekatu, zure aplikazioaren beharretara egokitzeko.
Aplikazio-markoaren hiru azpiosagai nagusiak hauek dira:
*Goiburua* barne aplikazio guztien parte izateko diseinatutako oinarrizko osagaia da. Erabiltzaileei sistema osoko funtzioetarako sarbidea ematen dieten azpiosagaiez osatuta dago, erabiltzaileei interfazearen orientazioa ematen diete eta esperientzien arteko koherentzia bermatzen dute. Aplikazioaren markoaren goialdean agertzen da eta aplikazioaren orrialde guztietan iraun beharko luke. Aukeran, komando orokorrak ostatatu ditzake, hala nola bilaketa, ezarpenak, jakinarazpenak, iritzia, profila edo laguntza. Aplikazioaren izena beti bistaratu beharko litzateke, eta, ahal dela, hasierako orrialdera edo hasierako orrialdera joateko esteka klikagarri gisa ere balio beharko luke. Goiburua erantzunkorra izan behar da, komandoak gainezkatze-kontrolera mugituz 600 pixel edo gutxiagoko ikuspegi-leihoetan. Bilaketa-sarreraren zabalera ere sentikorra da 1023 pixel edo gutxiagotan.
Nabigazioa erabiltzaileei informazioa aurkitzen eta zereginak burutzen laguntzeko elkarrekin lan egiten duten kontrol sistema bat da. Aplikazio bateko atal batetik bestera salto egiten laguntzen die erabiltzaileei. Hierarkikoki, ez dago orrialde edo atal bati lotuta, baizik eta beste eduki guztien gainetik dago. Beti dago presente, eta egoera tolestu batera minimizatu daiteke (errail egoera ere deitzen zaio) orrialdeko edukiarentzako leku gehigarria askatzeko. Leiho txikiagoetan, menu hedagarri batean minimizatu daiteke. Nabigazio mota ohikoenak goiko nabigazioa eta alboko nabigazioa dira. Ez erabili biak aldi berean.
Eduki-eskualdeak pantailaren fokua dauka. Nabigatzailearen leihoaren tamainak eragina du eduki-markoan eta eduki-eskualde nagusian eskuragarri dagoen espazioan. Marko hau eten-puntuaren eta osagai bakoitzaren dagokion erantzun-portaeraren arabera egokitzen da. Informazio gehiago Eten-puntuko matrizea sortu atalean.
Eduki-eskualdeak aukeran hainbat azpieskualde izan ditzake, elementuak modu koherentean kokatzeko erabilgarri daudenak, hala nola orrialde-goiburua, alboko panelak edo edukia gainjartzen duten panelak.
Kolore-eskemekin, tipografiarekin eta diseinu-egiturarekin diseinu-lengoaia koherente bati eusteak erabiltzaileei hainbat elementu azkar identifikatzen eta nahasketarik gabe elkarreragiten laguntzen die. Zenbat eta modu koherenteagoan erabili aplikazio-marko eredua barne negozio-aplikazio guztietan, orduan eta indartsuagoa izango da erabiltzailearen oroimena edo eredu mentala. Industriako estandarrekin edo plataforma-eredu komunekin bat etortzeak are gehiago hobetzen du efektu hori.
Aplikazio-markoa zehaztu ondoren, pantaila bakoitzaren diseinua aplikazio-markoaren eduki-eremuan kokatzen da.
Erabili edukiaren eskualdea kontu handiz
Erabiltzaileek esperientzia ezin hobeak nahi dituzte, non informazioa erraz eskuragarria den, testua erraz irakurtzen den eta estetikak erabilgarritasuna hobetzen duen oztopatu beharrean. Lehentasuna eman informazio gakoaren hasierako ikusgarritasunari, ziurtatu irakurgarritasuna zutabeen artean eta harmonizatu diseinu elementuak erakargarritasun estetikoa lortzeko.
Ziurtatu pantaila irekitzean funtsezko informazioa berehala ikusten dela korritu beharrik gabe. Lehentasuna eman informazio garrantzitsuari, hala nola nabigazio aukerak, eduki garrantzitsua eta pantailaren goialdean egin daitezkeen elementuei. Elementu nahikoa erakustearen eta elementu bakoitzerako informazio zehatza ematearen arteko oreka lortzea etengabeko erronka da. Alderantziz, hasierako ikuspegian informazio guztia ematea tentagarria izan daitekeen arren, informazio gehiegi izateak erabiltzaileak gainezka egitea eta elementu gakoen garrantzia ahultzea arriskuan jartzen du. Kontuan hartu laburpen edo aurrebista zehatzak erabiltzea, eduki zehatzago baten ikuspegia eskaintzen dutenak, erabiltzaileak sakonago aztertzera animatuz. Aginte-panelak datu kopuru handiak bistaratzeko helburu horretarako optimizatuta daude.
Sartu hainbat zutabe, atal edo taldekatze edukia logikoki antolatzeko eta espazioa maximizatzeko. Jarri arreta handia zutabeen zabalerari, testua irakurgarria izan dadin gehiegizko tentsiorik gabe. Saihestu zutabe estuak, erabiltzaileak etengabe horizontalki mugitzera behartzen baitituzte, elkarrekintzaren fluxua etenez. Alderantziz, zutabe zabalegiek irakurgarritasuna oztopatu dezakete, erabiltzaileek distantzia luzeetan lerroak jarraitu behar izan ditzaten. Saiatu irakurketa erosoa ahalbidetzen duen eta eskuragarri dagoen espazioa eraginkortasunez erabiltzen duen oreka lortzen.
Elementu bisualak behar bezala tamainaz kokatu eta egokitu interfazea bisualki atsegina eta orekatua sortzeko. Lerrokatu azpitituluak dagokien irudi edo izenburuekin, mantendu tarte koherentea elementuen artean eta eutsi erabiltzaileen beharren araberako hierarkia bati. Moztu beharrezkoak ez diren apaingarriak eta esleitu pixelak zuhurki garrantzitsuenak diren elementuetara. Lehentasuna eman eta azpimarratu edukia eta nabigazio elementuak, batez ere nabigazio intentsiboa behar duten aplikazioetan edo hasierako orrialdeetan, eta saihestu erabilgarritasuna kaltetzen duten apaingarri soberakinak.
Oinarrizko sareta bat erabilgarria izan daiteke elementuak modu koherentean antolatzeko. Hautatutako saretaren portaera koherentea izan behar da aplikazioko pantaila guztietako eduki-eskualdeetan, eta osagaien mailan ere aplika daiteke, hala nola txarteletan edo alboko paneletan. Web aplikazioetan erabiltzen den sareta mota ohikoena zutabe-sareta da. Pantaila sentikorrak ezartzeko, sare fluidoaren (edo luzatuaren) portaera gomendatzen da.
Erabili ezarritako diseinuak eta taldekatze-ereduak
Erabili erabiltzaile-interfaze baten barruko edukia eta elementuak antolatzeko ohiko egiturak eta antolamenduak. Diseinu eta eredu hauek findu eta eraginkorrak direla frogatu da denborarekin, erabiltzaileentzat ezagunak eta intuitiboak bihurtuz, eta, aldi berean, eredu moldagarriak ezartzea erraztuz. Behin oinarrizko eszenatokiak eta elementuak identifikatu ondoren, bakoitza elkarreragin onena eskaintzen duen diseinu finko batera mapatu. Lehentasuna eman zeregina burutzeko garrantzitsuak diren edukiei eta ezaugarriei. Erabaki zein elementu egon behar diren beti ikusgai eta eskuragarri pantailan eta zein ezkutatuta edo beste menu edo ekintza batzuen bidez atzitu daitezkeen.
Hurrengo zerrendak, ez da osoa, baina negozio edo produktibitate aplikazioetarako erabili ohi diren diseinu finkatuak deskribatzen ditu. Guztiak eduki nagusiaren eskualdean jar daitezke.
Hasierako/Lurreratze pantaila
Hasierako pantaila edo laster-pantaila aplikazio baterako sarrera-puntu gisa balio du, erabiltzaileei aplikazioaren eskaintzen edo funtzioen ikuspegi orokorra emanez. Normalean bisitarien arreta erakartzea eta ekintza zehatz bat egitera bultzatzea du helburu, hala nola lehen aldiz zeregin bat burutzea edo eduki gehiago arakatzea. Askotan irudi nagusiak eta nabigazio aukera garbiak izaten ditu.
Erabiltzaileei ongietorria emateko, funtzionalitate nagusietarako, nabigazio aukeretarako edo ekintzarako deietarako sarbide azkarra eskaintzeko eta aplikazioaren esperientziaren tonua ezartzeko aproposa da. Lehentasuna eman argitasunari, sinpletasunari eta nabigazio intuitiboari erabiltzaileak eraginkortasunez gidatzeko.
Aginte-panela
Aginte-panel bat aplikazio baten barruko gune zentralizatua da, erabiltzaileei datu edo informazio garrantzitsuen ikuspegi orokorra eskaintzen diena. Askotan widget edo modulu pertsonalizagarriz osatuta dago, erabiltzaileei metrika espezifikoak kontrolatu edo ekintzak egin ahal izateko.
Aginte-panelak datu-multzo konplexuak edo funtzionalitate anitzekoak dituzten aplikazioetarako egokiak dira, erabiltzaileei aurrerapena jarraitzeko, joerak aztertzeko eta erabaki informatuak begirada batean hartzeko aukera emanez. Bereziki erabilgarriak dira analisi plataformetan, proiektuen kudeaketa tresnetan eta finantza kudeaketa aplikazioetan.
Inprimakia
Inprimakia erabiltzaileek datuak sartzeko aukera ematen duen egitura egituratua da, normalean testua, zenbakiak, datak eta hautaketak bezalako informazio mota desberdinak sartzeko eremuz osatua. Inprimakiak ezinbestekoak dira erabiltzaileen sarrera biltzeko, transakzioak prozesatzeko eta aplikazioen barruko elkarrekintzak errazteko.
Normalean erregistro-fluxuetan, ordainketa-prozesuetan, datuak sartzeko zereginetan eta erabiltzaileen sarrera edo feedbacka behar duen edozein egoeratan erabiltzen dira.
Entitate/Profil ikuspegia
Entitateak edo profilaren ikuspegiak entitate espezifiko bati buruzko informazio zehatza aurkezten du, hala nola erabiltzaile-profila, produktuen zerrenda edo eduki-elementua. Normalean testu deskribatzailea, multimedia elementuak eta ekintza edo interakzio garrantzitsuak izaten ditu.
Aplikazio bateko elementuei buruzko informazio zehatza erakusteko egokiak dira. Erabiltzaileei ikuspegi sakonak eskaintzen dizkiete, erabakiak hartzea errazten dute eta entitate espezifikoekin harremanetan jartzen laguntzen dute, hala nola sare sozialetako aplikazioetako erabiltzaile-profilekin edo merkataritza elektronikoko plataformetako produktuen zerrendekin.
Zerrenda orria
Zerrenda edo taula batek elementu edo entitate bilduma bat erakusten du formatu egituratuan, askotan diseinu lineal edo sareta batean aurkeztuta. Normalean elementu bakoitzaren laburpen edo aurrebista laburrak izaten ditu, arakatzeko edo iragazteko nabigazio-kontrolekin batera.
Zerrenda-orriak eraginkorrak dira eduki edo datu multzo handiak formatu erraz batean aurkezteko, erabiltzaileei modu eraginkorrean eskaneatu, bilatu eta nabigatu ahal izateko. Errenkada espezifikoetan ekintzak gaituta badaude, prozesua argi izan beharko litzateke. Zerrenda-orriak normalean edukien kudeaketa sistemetan, direktorioen zerrendetan, bilaketa-emaitzetan eta albiste-jarioetan erabiltzen dira.
Mini berrikuspena (pantaila zatitua)
Mini-berrikuspen edo pantaila zatitu batek interfazea bi atal bereizitan banatzen du, ezkerreko aldean zerrenda bat eta eskuineko aldean elementuen ikuspegia bistaratzen direlarik. Zerrendak normalean elementu bilduma bat izaten du, eta elementuen ikuspegiak, berriz, zerrendan hautatutako elementuari buruzko informazio zehatza ematen du.
Diseinu hau bereziki eraginkorra da erabiltzaileek elementuen zerrenda bat azkar arakatu eta elementu bakoitzari buruzko informazio zehatza aldi berean ikusi behar duten egoeretan, adibidez, eragiketa masiboak egiten direnean. Produktuen katalogoak, dokumentuen kudeaketa sistemak, posta elektronikoko edo komunikazio bezeroak eta zereginen kudeaketa tresnak (adibidez, Azure Dev Ops kontsulta ikustailea) eredu honekin bat datozen egoerak dira normalean.
Morroia
Morroi batek erabiltzaileak sekuentziako urrats edo zeregin sorta batean zehar gidatzen ditu, normalean modu linealean, prozesu konplexu bat osatzeko edo helburu zehatz bat lortzeko. Askotan aurrerapen-adierazleak, galderak eta balidazio-egiaztapenak izaten ditu. Morroiak onuragarriak dira prozesu konplexuak sinplifikatzeko, gainkarga kognitiboa murrizteko eta erabiltzaileak zeregin edo lan-fluxu ezezagunetan gidatzeko. Normalean erabiltzen dira hasierako fluxuetan, konfigurazio prozesuetan, urrats anitzeko formularioetan eta zereginetan oinarritutako interakzioetan, hala nola ezarpen edo transakzio konplexuak konfiguratzean.
Pertsonalizatu eta eraiki diseinu estandarrean oinarrituta eskakizun espezifikoetara egokitzeko. Prozesu honek elementuak gehitzea edo kentzea, elementuen tamaina eta kokapena doitzea eta estiloa aplikatzea markaren identitatearekin edo diseinu bisualaren jarraibideekin bat etortzeko barne har ditzake. Esperimentatu diseinu estandarraren konfigurazio eta aldaera desberdinekin edukiaren eta erabiltzailearen esperientzia orokorraren antolamendurik eraginkorrena aurkitzeko.
Diseinu diseinuak gailu guztietarako
Diseinuak arau definituen eta edukiaren antolaketa nahitazkoaren gailurra dira. Edukia egitura pentsakorretan ekartzea funtsezkoa da, baina plataforma eta pantaila-tamainen arteko hierarkia argi batekin dena batera isurtzeko, eskalatze-logika behar da. Banakako diseinuak, moldagarriak eta erantzunkorrak erronka honi aurre egin diezaiokete. Kasu batzuetan, diseinu moldagarriaren eta erantzunkorren nahasketa da aukera egokia.
Diseinu erantzunkorrak diseinu bakarra erabiltzen du, non edukia fluidoa den eta formatuaren tamaina aldakorretara egokitu daitekeen. Diseinu teknika honek multimedia kontsultak erabiltzen ditu gailu jakin baten ezaugarriak aztertzeko eta edukia horren arabera errendatzeko. Diseinu erantzunkorrak funtzio bat behin bakarrik eraikitzeko eta pantaila-tamaina guztietan eraginkortasunez funtzionatzeko aukera ematen dizu.
Diseinu moldagarri bat a guztiz aldatzen da aurkezten den formatuaren arabera. Diseinu moldagarriak hainbat diseinu-tamaina finko ditu eta arakatzaileari diseinu jakin bat kargatzen uzten dio eskuragarri dagoen espazioaren arabera. Diseinu moldagarriarekin eraikitako webguneek multimedia kontsultak erabiltzen dituzte eten-puntuak detektatzeko, diseinu erantzunkorraren antzera. Gailuaren gaitasunetan oinarritutako markaketa gehigarria ere erabiltzen dute. Prozesu horri "hobekuntza progresiboa" deitzen zaio.
Birposizionatu
Aldatu orrialdeko elementuen posizioa.
Mantendu zure edukia antolatuta, irakurterraz eta orekatuta konposizioa optimizatuz leihoaren tamaina handitzen den heinean. Adibidez, ikus-leiho mugikor bateko bertikalki pilatutako elementuak horizontalki berriro kokatu daitezke ikus-leiho handiagoetan. Aldaketa honek ezkerretik eskuinera irakurketa-ordena natural bat jarraitzen du, diseinuan oreka sortzen du eta orrialdeko elementu nagusietan arreta bisuala mantentzen du.
Aldatu tamaina
Doitu orrialdeko elementuen tamaina eta marjinak.
Aldatu orrialdeko elementuen tamaina erabiltzaile-esperientzia aberatsagoa lortzeko, leihoaren goialdean eduki gehiago bistaratuz, bertikalki mugitzeko beharra murriztuz. Doitu orrialde-marjinak espazio zuria eta diseinuari oreka gehitzeko, edukia arnasa har dezan eta diseinuaren erakargarritasun bisuala hobetuz. Adibidez, heroi osagai bat leihoaren zabalera osora luzatu daiteke atzeko planoko irudiaren zati gehiago erakusteko. Irudiaren azpiko edukia zabaldu daiteke, baina marjina desberdinak erabili diseinuan barietatea gehitzeko eta hierarkia bisuala definitzen laguntzeko.
Doitu
Orrialdeko elementuen fluxua optimizatu.
Egokitu orrialdeko elementuak guztiz bistaratzen direla ziurtatzeko, leihoaren tamaina eta orientazioa kontuan hartuta, edukia berrantolatuz. Adibidez, leiho txikiago bateko eduki-zutabe bakarra leiho handiago batean birplanteatu daiteke bi testu-zutabe bistaratzeko. Teknika honek eduki gehiago "tolesturaren gainean" bistaratzea ahalbidetzen du.
Erakutsi/ezkutatu
Optimizatu edukia leihoaren tamainarako eta orientaziorako.
Erakutsi edo ezkutatu orrialdeko elementuak edukia leihoaren tamainarako eta orientaziorako optimizatzeko. Teknika erantzunkor honek informazio kopurua ikuste-testuingurura egokitzen du. Adibidez, pantaila txiki batean agertzen diren kategoriek metadatu mugatuak erakuts ditzakete, hala nola irudi bat, izenburu bat eta esteka bat, erabiltzaileari arreta jartzen laguntzeko beste informazio batzuk ikusgai egon daitezen. Pantaila handiago batean, kategoriek metadatu gehigarriak erakuts ditzakete, hala nola persona, data eta deskribapen laburra, ikuspegi-leihoan sartuta egon arren.
Berarkitektoa
Informazio eta ekintza garrantzitsuetan arreta mantentzeko, orrialdeko elementuak eta edukia adarkatu edo tolestu.
Ikuspegi hau zure diseinuan "dibulgazio progresiboa" praktikatzearekin antzekoa da, baina leiho tamaina eta orientazio desberdinetarako. Adibidez, leihoa zabaltzeak elementuen zerrenda bat xehetasunen ondoan bistaratzea ahalbidetzen du. Edukiaren arteko lotura bisual honek erabiltzaileei beste elementu bat erraz hautatzeko aukera ematen die. Pantaila txikiago batean, arreta informazio garrantzitsua erakustean mantentzen da.
Sortu eten-puntu matrizea
Eten-puntuen matrizea aplikazio baten diseinuaren portaera moldagarri edo erantzunkorren irudikapen grafiko gisa balio du pantaila-tamaina eta orientazio desberdinetan. Normalean egituratutako sareta edo diseinu bat aurkezten du, diseinuaren erantzuna hainbat eten-puntutan zehazten duena. Segmentu bakoitza pantaila-zabalera bereizi bati dagokio, diseinuaren egitura, antolamendua eta funtzionaltasunari buruzko informazioa eskainiz. Eten-puntuko matrizeak pantailaren zabalera, ikuspegi-leihoaren orientazioa, diseinu-elementuak, egitura, edukiaren aurkezpena, nabigazioa, multimedia eta osagai interaktiboak hartzen ditu barne, webgune edo aplikazio baten diseinuak pantaila-tamaina eta orientazio desberdinetan nola erantzuten duen ilustratzeko. Ikuspegi honek ez du pantaila bakoitzaren diseinua amaitzen laguntzen bakarrik, baita inplementazioa errazten ere osagai nagusien propietateen aldaketak esplizituki jarraitzen eta ondo komunikatzen direnean.
Power Platform erraztapena
Ereduetan oinarritutako aplikazioen formularioen diseinuak erabiliz konfiguratzen dira Power Apps Studio. *Inprimaki-diseinatzaileak* egileei sare-egitura bati elementuak gehitzeko aukera ematen die, eta horrek inprimaki-orriak berez sentikorrak izatea ahalbidetzen du. ... Txertatutako osagai pertsonalizatuek, hala nola orrialde pertsonalizatuak, txertatutako mihise osagaiak eta Power Apps Component Framework kode osagaiak , portaera erantzunkorra txertatu behar dute beren inplementazioetan. Adibidez, orrialde pertsonalizatuek mihise-aplikazio huts batek bezala portaera erantzunkorra inplementatu behar dute behar bezala funtzionatzeko.
Mihise aplikazioek osagai bakoitzaren konfigurazio esplizitua behar dute jokabide erantzunkorra ezartzeko, esperientziaren gaineko kontrol handiagoa ahalbidetuz. Pantailaren tamaina aplikazioaren definizioan zehazten da, eta horri erreferentzia egin dakioke posizioa, portaera, ikusgarritasuna eta beste propietate garrantzitsu batzuk zehazteko.