Nata
Norint pasiekti šį puslapį, reikalingas leidimas. Galite pabandyti prisijungti arba pakeisti katalogus.
Norint pasiekti šį puslapį, reikalingas leidimas. Galite pabandyti pakeisti katalogus.
Taikoma šiai Power Platform gerai suplanuotos patirties optimizavimo kontrolinio sąrašo rekomendacijai:
| XO:06 | Išlaikykite naudingus ir vizualiai patrauklius išdėstymus, atsižvelgdami į ekrano dydžius ir skiriamąją gebą. Naudokite adaptyvius metodus, kad dinamiškai pateiktumėte turinį įvairiais būdais. |
|---|
Šiame vadove aprašomos rekomendacijos, kaip kurti ekrano išdėstymus, kuriuos būtų lengva naršyti ir sklandžiai pritaikyti įvairiuose įrenginiuose. Šis metodas užtikrina nuoseklią ir optimalią naudotojų žiūrėjimo patirtį, neatsižvelgiant į tai, kokį įrenginį jie naudoja.
Apibrėžimai
| Terminas | Apibrėžtis |
|---|---|
| Viewport | Matoma skaitmeninės sąsajos dalis, pvz., žiniatinklio naršyklė arba programa mobiliesiems, kurioje rodomas turinys. Peržiūros srities diapazonai dažnai siejami su įrenginių klasėmis (mobiliojo, planšetinio ir stalinio kompiuterio) pagal ekrano matmenis ir skiriamąją gebą. |
| Lūžio taškai | Konkrečios pikselių reikšmės, apibrėžiančios peržiūros srities diapazonus, naudojamus adaptyvaus išdėstymo elgsenai nustatyti. |
Pagrindinės projektavimo strategijos
Interaktyvūs išdėstymai suteikia lanksčią ir efektyvią vartotojo patirtį skirtingų dydžių languose. Jie prisitaiko keisdami turinio mastelį, pertvarkydami elementus ir pasirinktinai rodydami tekstą bei vaizdus. Atsakingas išdėstymas atitinka vartotojų poreikius, nepriklausomai nuo jų ekrano dydžio.
Nustatykite nuoseklų programos rėmelį
Programos rėmelį sudaro valdiklių rinkinys, kuris yra nuolat pasiekiamas kiekviename ekrane. Jį sudaro trys pagrindiniai subkomponentai: antraštė, naršymas ir turinio regionas. Paprastos programos gali lanksčiai naudoti antraštės komponentą, o sudėtingesnės programos dažnai naudoja šoninį naršymą, kad įgalintų kelis puslapius. Subkomponentai yra pritaikomi. Pavyzdžiui, galite įtraukti visuotinę paiešką į antraštę arba sugrupuoti elementus šoninėje naršymo juostoje, kad jie atitiktų jūsų programos reikalavimus.
Trys pagrindiniai programos rėmelio subkomponentai yra šie:
Antraštė yra pagrindinis komponentas, sukurtas būti kiekvienos vidinės programos dalimi. Jį sudaro subkomponentai, kurie suteikia vartotojams prieigą prie visos sistemos funkcijų, padeda nukreipti juos į vartotojo sąsają ir užtikrina nuoseklumą visose patirtyse. Jis rodomas programos rėmelio viršuje ir turėtų išlikti visuose programos puslapiuose. Jis gali pasirinktinai priglobti visuotines komandas, pvz., paiešką, nustatymus, pranešimus, atsiliepimus, profilį ar pagalbą. Programos pavadinimas turėtų būti visada rodomas ir idealiu atveju taip pat turėtų būti naudojamas kaip spustelėjama nuoroda į pagrindinį arba nukreipimo puslapį. Antraštė turėtų reaguoti, o komandos būtų perkeltos į perpildymo valdiklį 600 pikselių ir mažesnėse peržiūros srityse. Paieškos įvesties plotis taip pat reaguoja 1023 pikselių ir žemiau.
Naršymas yra valdiklių sistema, kuri veikia kartu, kad padėtų vartotojams rasti informaciją ir atlikti užduotis. Tai padeda vartotojams pereiti iš vienos programos skilties į kitą. Hierarchiškai jis nėra pridėtas prie jokio puslapio ar skyriaus, bet yra virš viso kito turinio. Jis visada yra ir gali būti sumažintas iki sutrauktos būsenos (dar vadinamos geležinkelio būsena), kad būtų atlaisvinta papildomos vietos puslapio turiniui. Esant mažesniems langų dydžiams, jį galima sumažinti iki iškeliamojo meniu. Dažniausios navigacijos formos yra viršutinė ir šoninė navigacija. Nenaudokite abiejų vienu metu.
Turinio srityje yra ekrano fokusas. Naršyklės lango dydis turi įtakos turinio rėmeliui ir pagrindiniame turinio regione esančiai vietai. Šis kadras prisitaiko pagal lūžio tašką ir atitinkamą kiekvieno komponento reaguojantį elgesį. Sužinokite daugiau lūžio taško matricos kūrimas.
Turinio srityje pasirinktinai gali būti kelios antrinės sritys, kurias galima nuosekliai išdėstyti, pvz., puslapio antraštė, įdėtosios šoninės sritys arba plokštės, kurios perdengia turinį.
Laikydamiesi nuoseklios dizaino kalbos su spalvų schemomis, tipografija ir išdėstymo struktūra, vartotojai gali greitai atpažinti ir sąveikauti su įvairiais elementais be painiavos. Kuo nuosekliau programos rėmelio modelis naudojamas visose vidinėse verslo programose, tuo stipresnis tampa vartotojo atšaukimas ar mentalinis modelis. Suderinimas su pramonės standartais ar bendrais platformų modeliais dar labiau sustiprina šį poveikį.
Nustačius programos rėmelį, kiekvieno ekrano išdėstymas yra programos rėmelio turinio srityje.
Apgalvotai naudokite turinio regioną
Vartotojai trokšta sklandžios patirties, kai informacija yra lengvai prieinama, tekstas yra lengvai skaitomas, o estetika sustiprina, o ne trukdo naudoti. Pirmenybę teikite pradiniam pagrindinės informacijos matomumui, užtikrinkite skaitomumą stulpeliuose ir suderinkite dizaino elementus, kad jie būtų estetiškai patrauklūs.
Įsitikinkite, kad esminė informacija yra iš karto matoma atidarius ekraną, nereikia slinkti. Pirmenybę teikite esminės informacijos, pvz., naršymo parinkčių, svarbaus turinio ir elementų, kuriuos galima naudoti, rodymui ekrano viršuje. Rasti pusiausvyrą tarp pakankamų elementų rodymo ir išsamios informacijos apie kiekvieną elementą pateikimo yra nuolatinis iššūkis. Ir atvirkščiai, nors gali kilti pagunda pateikti visą įmanomą informaciją pradiniame vaizde, per didelis informacijos kiekis gali priblokšti vartotojus ir susilpninti pagrindinių elementų svarbą. Apsvarstykite galimybę naudoti glaustas santraukas ar peržiūras, kurios suteikia galimybę pažvelgti į išsamesnį turinį ir suvilioja vartotojus pasigilinti. Ataskaitų sritys yra optimizuotos taip, kad tarnautų šiam tikslui vizualizuojant didelius duomenų kiekius.
Įtraukite kelis stulpelius, sekcijas arba grupes, kad logiškai tvarkytumėte turinį ir maksimaliai padidintumėte erdvę. Atidžiai atkreipkite dėmesį į stulpelio plotį, užtikrindami, kad tekstas išliktų įskaitomas be pernelyg didelės įtampos. Venkite pernelyg siaurų stulpelių, kurie verčia vartotojus nuolat slinkti horizontaliai, sutrikdydami sąveikos srautą. Ir atvirkščiai, pernelyg platūs stulpeliai gali trukdyti skaityti, todėl naudotojams reikia sekti linijas dideliais atstumais. Siekite pusiausvyros, kuri atitiktų patogų skaitymą ir efektyviai išnaudotų turimą erdvę.
Dydžio ir padėties vaizdiniai elementai yra tinkami, kad būtų sukurta vizualiai maloni ir subalansuota sąsaja. Sulygiuokite antraštes su atitinkamais vaizdiniais elementais arba pavadinimais, išlaikykite nuoseklius tarpus tarp elementų ir laikykitės hierarchijos, pagrįstos vartotojo poreikiais. Apkarpykite nereikalingas puošmenas ir protingai paskirstykite pikselius svarbiausiems elementams. Suteikite pirmenybę ir pabrėžkite turinį bei naršymo elementus, ypač daug naršymo reikalaujančiose programose ar pagrindiniuose puslapiuose, ir venkite nereikalingo ornamento, kuris mažina tinkamumą naudoti.
Pagrindinis tinklelis gali būti naudingas nuosekliai išdėstant elementus. Pasirinktas tinklelio veikimas turėtų būti nuoseklus kiekviename programos ekrano turinio regione ir taip pat gali būti taikomas komponentų lygiu, pvz., kortelių ar šoninių sričių. Dažniausias tinklelio išdėstymo tipas, naudojamas žiniatinklio programose, yra stulpelių tinklelis. Sklandus (arba ištempiamas) tinklelio veikimas rekomenduojamas diegiant reaguojančius ekranus.
Naudokite nustatytus maketus ir grupavimo modelius
Naudokite bendrai pripažintas struktūras ir susitarimus turiniui ir elementams tvarkyti vartotojo sąsajoje. Šie maketai ir modeliai laikui bėgant buvo patobulinti ir pasirodė veiksmingi, todėl jie tapo pažįstami ir intuityvūs vartotojams, kartu palengvinant adaptyvių modelių įgyvendinimą. Identifikavę pagrindinius scenarijus ir elementus, susiekite kiekvieną iš jų su nustatytu išdėstymu, kuris užtikrina geriausią sąveiką. Pirmenybę teikite turiniui ir funkcijoms, svarbioms atliekant užduotį. Nuspręskite, kurie elementai visada turėtų būti matomi ir pasiekiami ekrane, o kuriuos galima paslėpti arba pasiekti atliekant kitus meniu ar veiksmus.
Toliau pateiktas sąrašas, nors ir neišsamus, aprašo nustatytus maketus, dažniausiai naudojamus verslo ar produktyvumo programoms. Visi gali būti dedami į pagrindinį turinio regioną.
Nusileidimas / pagrindinis ekranas
Nukreipimo arba pagrindinis ekranas yra programos įėjimo taškas, suteikiantis naudotojams programos pasiūlymų ar funkcijų apžvalgą. Paprastai juo siekiama patraukti lankytojų dėmesį ir skatinama imtis konkrečių veiksmų, pavyzdžiui, atlikti pirmą kartą atliekamą užduotį arba tyrinėti tolesnį turinį. Jame dažnai yra herojų vaizdų ir švarių naršymo parinkčių.
Tai idealiai tinka pasveikinti vartotojus, pasiūlyti greitą prieigą prie pagrindinių funkcijų, naršymo parinkčių ar raginimų veikti ir nustatyti programos patirties toną. Pirmenybę teikite aiškumui, paprastumui ir intuityviam naršymui, kad galėtumėte efektyviai nukreipti vartotojus.
Ataskaitų sritis
Ataskaitų sritis yra centralizuotas programos telkinys, kuriame vartotojams pateikiama išsami atitinkamų duomenų ar informacijos apžvalga. Jį dažnai sudaro tinkinami valdikliai ar moduliai, leidžiantys vartotojams stebėti konkrečią metriką arba atlikti veiksmus.
Prietaisų skydeliai tinka programoms su sudėtingais duomenų rinkiniais arba daugialypėmis funkcijomis, leidžiančiomis vartotojams stebėti pažangą, analizuoti tendencijas ir iš karto priimti pagrįstus sprendimus. Jie ypač naudingi analizės platformose, projektų valdymo įrankiuose ir finansų valdymo programose.
Forma
Forma yra struktūrinis maketas, palengvinantis vartotojų duomenų įvedimą, paprastai sudarytas iš laukų, skirtų įvairių tipų informacijai, pvz., tekstui, skaičiams, datoms ir pasirinkimams, įvesti. Formos yra būtinos norint rinkti vartotojo įvestį, apdoroti operacijas ir palengvinti sąveiką programose.
Jie dažniausiai naudojami registracijos srautuose, atsiskaitymo procesuose, duomenų įvedimo užduotyse ir bet kokiame scenarijuje, kuriame reikalinga vartotojo įvestis arba atsiliepimai.
Objekto / profilio rodinys
Objekto arba profilio rodinyje pateikiama išsami informacija apie konkretų objektą, pvz., vartotojo profilį, produkto sąrašą arba turinio elementą. Paprastai tai apima aprašomąjį tekstą, multimedijos elementus ir susijusius veiksmus ar sąveikas.
Jie puikiai tinka norint pateikti išsamią informaciją apie programos elementus. Jie suteikia vartotojams išsamių įžvalgų, palengvina sprendimų priėmimą ir palaiko sąveiką su konkrečiais subjektais, tokiais kaip vartotojų profiliai socialinių tinklų programose arba produktų sąrašai el. prekybos platformose.
Sąrašo puslapis
Sąraše arba lentelėje pateikiamas elementų arba objektų rinkinys struktūrizuotu formatu, dažnai pateikiamas linijiniu arba tinklelio išdėstymu. Paprastai jame pateikiamos trumpos kiekvieno elemento santraukos arba peržiūros, taip pat naršymo arba filtravimo valdikliai.
Sąrašų puslapiai yra veiksmingi norint pateikti didelius turinio ar duomenų rinkinius suprantamu formatu, leidžiant vartotojams efektyviai peržiūrėti, ieškoti ir naršyti. Jei veiksmai konkrečiose eilutėse yra įjungti, procesas turėtų būti aiškus. Sąrašų puslapiai dažniausiai naudojami turinio valdymo sistemose, katalogų sąrašuose, paieškos rezultatuose ir naujienų srautuose.
Mini apžvalga (padalintas ekranas)
Mini apžvalga arba padalintas ekranas padalija sąsają į dvi atskiras dalis: kairėje pusėje rodomas sąrašas, o dešinėje – elementų rodinys. Sąraše paprastai pateikiamas elementų rinkinys, o elementų rodinyje pateikiama išsami informacija apie pasirinktą sąrašo elementą.
Šis išdėstymas ypač efektyvus tais atvejais, kai vartotojams reikia greitai peržiūrėti elementų sąrašą ir vienu metu peržiūrėti išsamią informaciją apie kiekvieną elementą, pavyzdžiui, atliekant masines operacijas. Produktų katalogai, dokumentų valdymo sistemos, el. pašto ar ryšių klientai ir užduočių valdymo įrankiai (pvz., „Azure Dev Ops“ užklausų peržiūros programa) yra scenarijai, kurie paprastai atitinka šį modelį.
Vediklis
Vedlys veda vartotojus per nuoseklių veiksmų arba užduočių seriją, paprastai linijiniu būdu, kad užbaigtų sudėtingą procesą arba pasiektų konkretų tikslą. Jame dažnai yra pažangos indikatoriai, raginimai ir patvirtinimo patikrinimai. Vedliai yra naudingi norint supaprastinti sudėtingus procesus, sumažinti kognityvinę perkrovą ir padėti vartotojams atlikti nepažįstamas užduotis ar darbo eigas. Jie dažniausiai naudojami įvadiniuose srautuose, sąrankos procesuose, kelių žingsnių formose ir užduotimis pagrįstoje sąveikoje, pvz., sudėtingų nustatymų ar operacijų konfigūravime.
Tinkinkite ir kurkite standartinį išdėstymą pagal konkrečius reikalavimus. Šis procesas gali apimti elementų pridėjimą arba pašalinimą, elementų dydžio ir padėties koregavimą bei stiliaus taikymą, kad jis atitiktų prekės ženklo tapatybę arba vizualinio dizaino gaires. Eksperimentuokite su skirtingomis standartinio išdėstymo konfigūracijomis ir variantais, kad rastumėte efektyviausią turinio ir bendros naudotojo patirties išdėstymą.
Visų įrenginių dizaino maketai
Maketai yra apibrėžtų taisyklių ir sąmoningo turinio organizavimo kulminacija. Svarbu turinį suskirstyti į apgalvotas struktūras, tačiau norint, kad jis vyktų sklandžiai ir būtų aiškiai hierarchiškai pritaikytas skirtingose platformose ir ekranų dydžiuose, reikia mastelio keitimo logikos. Individualiai adaptyvus ir reaguojantis dizainas gali išspręsti šį iššūkį. Kai kuriais atvejais tinkamas pasirinkimas yra adaptyvaus ir reaguojančio dizaino derinys.
Adaptyvus dizainas naudoja tik vieną išdėstymą, kuriame turinys yra lankstus ir gali prisitaikyti prie kintančio formato dydžio. Ši projektavimo technika naudoja medijos užklausas, kad patikrintų konkretaus įrenginio charakteristikas ir atitinkamai pateiktų turinį. Adaptyvus dizainas leidžia sukurti funkciją vieną kartą ir užtikrinti, kad ji efektyviai veiktų visų dydžių ekranuose.
Adaptyvus išdėstymas visiškai keičiasi priklausomai nuo pateikimo formato. Adaptyvus dizainas turi kelis fiksuotus išdėstymo dydžius ir suaktyvina naršyklę, kad ji įkeltų nurodytą išdėstymą pagal turimą vietą. Svetainės, sukurtos naudojant adaptyvų dizainą, naudoja medijos užklausas, kad aptiktų lūžio taškus, panašiai kaip ir reaguojančio dizaino atveju. Jie taip pat naudoja papildomą žymėjimą, pagrįstą įrenginio galimybėmis. Šis procesas vadinamas „progresyviu tobulinimu“.
Perkelti
Pakeiskite puslapio elementų padėtį.
Optimizuokite kompoziciją didėjant lango dydžiui, kad turinys būtų tvarkingas, skaitomas ir subalansuotas. Pavyzdžiui, vertikaliai išdėstyti elementai mobiliojoje peržiūros srityje gali būti perkelti horizontaliai didesnėse peržiūros srityse. Šis pakeitimas atitinka natūralią skaitymo tvarką iš kairės į dešinę, sukuria dizaino pusiausvyrą ir išlaiko vizualinį dėmesį pagrindiniams puslapio elementams.
Keisti dydį
Koreguokite puslapio elementų dydį ir paraštes.
Keiskite puslapio elementų dydį, kad optimizuotumėte naudotojo patirtį, rodydami daugiau turinio lango viršuje ir sumažindami vertikalios slinkties poreikį. Koreguokite puslapio paraštes, kad pridėtumėte baltos erdvės ir subalansuotumėte maketą, kuris leistų turiniui „kvėpuoti“ ir pagerintų dizaino vizualinį patrauklumą. Pavyzdžiui, herojaus komponentas gali būti ištemptas iki viso lango pločio, kad būtų rodoma daugiau fono paveikslėlio. Turinys po paveikslėliu gali būti išplėstas, tačiau naudokite skirtingas paraštes, kad išdėstymas būtų įvairesnis ir būtų lengviau apibrėžti vaizdinę hierarchiją.
Dinamiškas pateikimas
Optimizuokite puslapio elementų srautą.
Puslapio elementus pakoreguokite taip, kad jie būtų rodomi visiškai, atsižvelgiant į lango dydį ir orientaciją, pertvarkydami turinį. Pavyzdžiui, vieno turinio stulpelio išdėstymas mažesniame lange gali būti pertvarkytas didesniame lange, kad būtų rodomi du teksto stulpeliai. Ši technika leidžia rodyti daugiau turinio „virš matomos ribos“.
Rodyti / slėpti
Optimizuokite turinį pagal lango dydį ir orientaciją.
Rodyti arba slėpti puslapio elementus, kad turinys būtų optimizuotas pagal lango dydį ir orientaciją. Ši reaguojanti technika pritaiko informacijos kiekį prie žiūrėjimo konteksto. Pavyzdžiui, mažame ekrane rodomose kategorijose gali būti rodomi riboti metaduomenys, pvz., vaizdas, pavadinimas ir nuoroda, kad būtų matoma kita informacija, padedanti vartotojui susikaupti. Didesniame ekrane kategorijos gali rodyti papildomus metaduomenis, pvz., asmenį, datą ir trumpą aprašymą, tačiau vis tiek tilpti rodinio srityje.
Pertvarkytas architektas
Puslapio elementus ir turinį galima suskirstyti į atskiras dalis arba sutraukti, kad dėmesys būtų sutelktas į svarbią informaciją ir veiksmus.
Šis metodas panašus į „laipsniško atskleidimo“ praktiką jūsų projekte, tačiau taikant skirtingus langų dydžius ir orientacijas. Pavyzdžiui, išskleidus langą, šalia išsamios informacijos galima rodyti elementų sąrašą. Šis vizualinis turinio ryšys leidžia vartotojams lengvai pasirinkti kitą elementą. Mažesniame ekrane dėmesys sutelkiamas į pagrindinės informacijos rodymą.
Sukurkite lūžio taškų matricą
Lūžio taškų matrica yra grafinis programos dizaino reaguojančio arba adaptyvaus elgesio vaizdavimas skirtinguose ekrano dydžiuose ir orientacijose. Paprastai pateikiamas struktūrizuotas tinklelis arba išdėstymas, kuriame išsamiai aprašomas projekto atsakas įvairiuose lūžio taškuose. Kiekvienas segmentas atitinka atskirą ekrano plotį, suteikdamas įžvalgų apie dizaino struktūrą, išdėstymą ir funkcionalumą. Lūžio taškų matrica apima ekrano pločio, peržiūros srities orientacijos, dizaino elementų, išdėstymo struktūros, turinio pateikimo, navigacijos, medijos ir interaktyvių komponentų aspektus, siekiant iliustruoti, kaip svetainės ar programos dizainas reaguoja į skirtingus ekranų dydžius ir orientacijas. Toks metodas ne tik padeda užbaigti kiekvieno ekrano dizainą, bet ir palengvina įgyvendinimą, kai pagrindinių komponentų ypatybių pakeitimai yra aiškiai sekami ir gerai informuojami.
Power Platform palengvinimas
Modeliu pagrįstų programų formų maketai konfigūruojami naudojant Power Apps Studio. Formų kūrimo įrankis leidžia kūrėjams pridėti elementų prie tinklelio struktūros, todėl formų puslapiai tampa iš esmės pritaikomi individualiems poreikiams. ... Įterptieji pasirinktiniai komponentai, tokie kaip pasirinktiniai puslapiai, įterptieji drobės komponentai ir Power Apps komponentų platformos kodo komponentai , savo įgyvendinimo metu turi būti pritaikytas reaguojantis veikimas. Pavyzdžiui, norint tinkamai veikti, pasirinktiniai puslapiai turi įdiegti reaguojantį veikimą taip pat, kaip ir gryna drobės programa.
Drobės programoms reikalinga aiški kiekvieno komponento konfigūracija, kad būtų galima įgyvendinti reaguojantį veikimą, o tai suteikia daugiau galimybių valdyti patirtį. Ekrano dydžiai nustatomi programos apibrėžime, į kurį galima remtis nustatant poziciją, elgseną, matomumą ir kitas svarbias savybes.