Rugalmas tervezési technikák

A rugalmas kialakítás egyetlen elrendezést használ, ahol a tartalom folyékony, és alkalmazkodik az ablakméretek módosításához. A rugalmas kialakítás lehetővé teszi egy funkció egyszeri összeállítását, és elvárható, hogy minden képernyőméretben működjön. Az adaptív kialakítás hasonló, de az egyik elrendezést lecseréli egy másik elrendezésre.

Az XAML-alkalmazások hatékony képpontokkal garantálják, hogy a felhasználói felület olvasható és használható legyen minden Windows-alapú eszközön. Miért szeretné testre szabni az alkalmazás felhasználói felületét egy adott eszköz vagy képernyőméret alapján?

• A hely leghatékonyabb kihasználása és a navigálás szükségességének csökkentése

  Ha úgy tervez egy alkalmazást, hogy jól nézzen ki egy kis képernyővel (például táblagéppel) rendelkező eszközön, az alkalmazás használható lesz egy sokkal nagyobb kijelzővel rendelkező PC-n, de valószínűleg lesz némi felesleges hely. Testre szabhatja az alkalmazást, hogy több tartalmat jelenítsen meg, ha a képernyő egy bizonyos méret felett van. Egy bevásárlóalkalmazás például egyszerre egy árukategóriát jeleníthet meg egy táblagépen, de egyszerre több kategóriát és terméket jeleníthet meg PC-n vagy laptopon.

  Ha több tartalmat helyez el a képernyőn, csökkentheti a felhasználó által végrehajtandó navigáció mennyiségét.

• Az eszközök képességeinek kihasználása

  Bizonyos eszközök nagyobb valószínűséggel rendelkeznek bizonyos eszközképességekkel. A laptopok például valószínűleg rendelkeznek helyérzékelővel és kamerával, míg egy TV-vel sem. Az alkalmazás képes észlelni az elérhető képességeket, és engedélyezni az őket használó funkciókat.

• A bemenetre való optimalizálás

  Az univerzális vezérlőtár minden beviteli típussal (érintés, toll, billentyűzet, egér) működik, de a felhasználói felület elemeinek újrarendezésével optimalizálhat bizonyos bemeneti típusokat.

Amikor az alkalmazás felhasználói felületét adott képernyőszélességre optimalizálja, azt mondjuk, hogy rugalmas kialakítást hoz létre. Íme néhány rugalmas tervezési technika, amelyekkel testre szabhatja az alkalmazás felhasználói felületét.

Áthelyezni

Módosíthatja a felhasználói felület elemeinek helyét és pozícióját, hogy a lehető legtöbbet hozhassa ki az ablakméretből. Ebben a példában a kisebb ablak függőlegesen rendezi az elemeket. Ha az alkalmazás egy nagyobb ablakra fordít, az elemek kihasználhatják a szélesebb ablakszélesség előnyeit.

Ebben a példában egy fényképalkalmazás tervezésekor a fényképalkalmazás áthelyezi a tartalmát a nagyobb képernyőkre.

Átméretezés

A felhasználói felület elemeinek margóinak és méretének módosításával optimalizálhatja az ablak méretét. Ez például kibővítheti az olvasási élményt egy nagyobb képernyőn a tartalomkeret növelésével.

Visszaáramlás

A felhasználói felület elemeinek eszköz és tájolás alapján történő módosításával az alkalmazás optimális tartalmat jeleníthet meg. Ha például egy nagyobb képernyőre megyünk, érdemes lehet oszlopokat hozzáadni, nagyobb tárolókat használni, vagy más módon listaelemeket létrehozni.

Ez a példa bemutatja, hogyan jeleníthető meg egy függőlegesen görgethető tartalom egyetlen oszlopa egy kisebb képernyőn, amely egy nagyobb képernyőn újrafolyik két szövegoszlop megjelenítéséhez.

Megjelenítés/elrejtés

Megjelenítheti vagy elrejtheti a felhasználói felület elemeit a képernyőtulajdonságok alapján, vagy ha az eszköz további funkciókat, adott helyzeteket vagy előnyben részesített képernyő tájolásokat támogat.

A médialejátszó vezérlői például csökkentik a kisebb képernyőkön lévő gombkészletet, és növelik a nagyobb képernyőkön. A nagyobb ablak médialejátszója sokkal több képernyős funkciót képes kezelni, mint egy kisebb ablakban.

A feltáró vagy elrejtő technika része a további metaadatok megjelenítésének kiválasztása. Kisebb ablakok esetén a legjobb, ha minimális mennyiségű metaadatot jelenít meg. Nagyobb ablakok esetén jelentős mennyiségű metaadat jeleníthető meg. Néhány példa a metaadatok megjelenítésének vagy elrejtésének időpontjára:

• Egy e-mail-alkalmazásban megjelenítheti a felhasználó avatarját.
• A zenealkalmazásokban további információkat jeleníthet meg egy albumról vagy előadóról.
• Egy videóalkalmazásban további információkat jeleníthet meg egy filmről vagy egy bemutatóról, például a szereplők és a személyzet adatainak megjelenítését.
• Bármely alkalmazásban szétválaszthatja az oszlopokat, és további részleteket jeleníthet meg.
• Bármely alkalmazásban felvehet egy függőlegesen halmozott elemet, és vízszintesen helyezheti el. Ha egy kis ablakból egy nagyobb ablakba lép, a halmozott listaelemek megváltozhatnak a listaelemek és metaadatoszlopok sorainak megjelenítéséhez.

Újratervezés

Összecsukhatja vagy elágazhatja az alkalmazás architektúráját, hogy jobban megcélozza az adott eszközöket. Ebben a példában az ablak kibontása a teljes lista/részletmintát mutatja.

Adaptív elrendezés

Az adaptív elrendezés hasonló a rugalmas elrendezéshez, de teljes mértékben lecseréli a felhasználói felületet a megjelenített formátum alapján. Az adaptív kialakítás több rögzített elrendezési mérettel rendelkezik, és aktiválja a lapot egy adott elrendezés betöltéséhez a rendelkezésre álló hely alapján.

Ez a technika lehetővé teszi a felhasználói felület váltását egy adott törésponthoz. Ebben a példában a navigációs panel és a kompakt, átmeneti felhasználói felület jól működik egy kisebb képernyő esetében, de nagyobb képernyőn a lapok jobb választásnak bizonyulhatnak.

A NavigationView vezérlő támogatja ezt a technikát azáltal, hogy lehetővé teszi a felhasználók számára, hogy az ablaktábla pozícióját felülre vagy balra állítsa.

Kapcsolódó témakörök

• Fluent Design – Elrendezés
• Képernyőméretek és töréspontok
• Rugalmas elrendezések XAML-lel
• XAML-vezérlők