Megosztás a következőn keresztül:


Fanézetek

Jegyzet

Ez a tervezési útmutató a Windows 7-hez készült, és nem frissült a Windows újabb verzióihoz. Az útmutató nagy része továbbra is elvben érvényes, de a bemutató és a példák nem tükrözik jelenlegi tervezési útmutatónkat.

Fanézetben a felhasználók egyetlen vagy több kijelöléssel tekinthetik meg és kezelhetik az objektumok hierarchikusan elrendezett gyűjteményét.

A fában az adatokat tartalmazó objektumokat levélcsomópontoknak, más objektumokat tartalmazó objektumoknak pedig tárolócsomópontoknak nevezzük. Egyetlen, legfelső szintű tárolócsomópontot nevezünk gyökércsomópontnak. A felhasználók a plusz és mínusz kibontás gombokra kattintva kibonthatják és összecsukhatják a tárolócsomópontokat.

Windows Explorer fanézet

Tipikus fanézet.

Jegyzet

A elrendezési és menükkel kapcsolatos irányelveket külön cikkekben találhatja meg.

Ez a megfelelő vezérlő?

A hierarchikus adatok nem jelentik azt, hogy fanézetet kell használnia. Nagyon gyakran egy listanézet egyszerűbb, mégis hatékonyabb választás. Listanézetek:

  • Több különböző nézet támogatása.
  • A Részletek nézetben bármelyik oszlopban támogathatja az adatok rendezését.
  • Támogatja az adatok csoportokba rendezését, kétszintű hierarchiát alkotva.

Listanézet használatához a hierarchikus információkat a következő technikákkal lehet egyesíteni:

  • Távolítsa el a gyökércsomópontot, ha van ilyen, mert gyakran nincs rá szükség.

  • Listanézet-csoportok, lapok, legördülő listákvagy kibontható címsorok a legfelső szintű tárolók helyére.

    listákat tartalmazó listanézeti csoportok képernyőképe

    Ebben a példában listanézet-csoportokat használunk a legfelső szintű tárolókhoz.

    felső szintű tárolókhoz használt lapok képernyőképe

    Ebben a példában a lapok a legfelső szintű tárolókhoz használatosak

    tárolóként használt legördülő lista képernyőképe

    Ebben a példában egy legördülő listát használunk a legfelső szintű tárolókhoz.

  • Ha egy társított vezérlő megjeleníti a kijelölt tároló tartalmát, akkor ez a vezérlő a hierarchia alacsonyabb szintjeire is képes.

    tartalomjegyzék panel képernyőképe

    Ebben a példában az alacsony szintű tárolók megjelennek a dokumentumablakban.

Fanézetet kell használnia, ha két szintnél nagyobb hierarchiát kell megjelenítenie (a gyökércsomópontot nem beleértve).

Annak eldöntéséhez, hogy a fanézet a megfelelő vezérlő-e, fontolja meg az alábbi kérdéseket:

  • Hierarchikus az adathierarchia? Ha nem, használjon másik vezérlőt.
  • A hierarchia legalább három szinttel rendelkezik (a gyökért nem beleértve)? Ha nem, fontolja meg az olyan alternatív megoldásokat, mint a listanézeti csoportok, a lapok, a legördülő listák vagy a kibontható címsorok.
  • Az elemek rendelkeznek kiegészítő adatokkal? Ha igen, érdemes lehet listanézetet használni a Részletek nézetben a kiegészítő adatok teljes kihasználása érdekében.
  • Az alacsonyabb szintű adatok független altevékenységekhez kapcsolódnak? Ha igen, fontolja meg az információk megjelenítését egy társított vezérlőben vagy egy külön ablakban (parancsgombokkal vagy hivatkozások).
  • A célfelhasználók fejlettek? A haladó felhasználók jártasabbak a fák használatában. Ha az alkalmazás kezdő felhasználóknak szól, kerülje a fanézetek használatát.
  • Az elemek egyetlen, természetes, hierarchikus kategorizálással rendelkeznek, amely a legtöbb felhasználó számára ismerős? Ha igen, az adatok ideálisak fanézetben. Ha több nézetre vagy rendezésre van szükség, használjon inkább listanézetet.
  • A felhasználóknak látniuk kell az alacsonyabb szintű adatokat néhány, de nem minden forgatókönyvben, vagy néhány esetben, de nem mindig? Ha igen, az adatok ideálisak fanézetben.

Jegyzet

Néha egy fanézetnek tűnő vezérlőt listanézet használatával implementálnak. Ilyen esetekben az irányelveket a használat alapján kell alkalmazni, nem pedig a megvalósításra.

Tervezési fogalmak

A fák célja az adatok rendszerezése és könnyű megtalálása, de nehéz könnyen felderíthetővé tenni az adatokat egy fán belül. A fanézetekről és azok szervezetéről való döntéskor tartsa szem előtt az alábbi alapelveket.

Kiszámíthatóság és felderíthetőség

A fanézetek az objektumok közötti kapcsolatokon alapulnak. A fák akkor működnek a legjobban, ha az objektumok egyértelmű, jól ismert, kölcsönösen kizáró kapcsolatot alkotnak, amelyben minden objektum egyetlen, könnyen meghatározható tárolóra van leképezve.

Jelentős probléma, hogy egy objektum különböző csomópontokon jelenhet meg. Például hol várják a felhasználók, hogy olyan hardvereszközt keressenek, amely zenét játszik le, nagy merevlemezzel rendelkezik, és USB-portot használ? Lehet, hogy a különböző tárolócsomópontok bármelyikében, például multimédiás, tárolási, USB- és esetleg hardvererőforrásokban. Az egyik megoldás az, hogy az egyes objektumokat a körülményektől függetlenül az egyetlen legmegfelelőbb tároló alá helyezi; Egy másik megközelítés az, hogy minden objektumot az összes alkalmazott tároló alá kell helyezni. Az előbbi egy egyszerű, letisztult hierarchiát támogat, az utóbbi pedig elősegíti a felderíthetőséget.

Előfordulhat, hogy a felhasználók nem teljesen értik a fa elrendezését, de egy ideig a fával való interakció után a kapcsolatok mentális modelljét fogják alkotni. Ha ez a mentális modell helytelen, az zavart okoz. Tegyük fel például, hogy egy zenelejátszó megtalálható a Multimédia, a Storage és az USB tárolókban. Ez a megoldás javítja a felderíthetőséget. Ha egy felhasználó először a Multimédiában találja meg az eszközt, a felhasználó arra a következtetésre jut, hogy az összes eszköz, például a zene lejátszók megjelennek a Multimédiás tárolóban. A felhasználó ezután hasonló eszközöket, például digitális kamerákat vár, hogy megjelenjenek a Multimédia tárolóban, és összezavarodnak, ha ez nem így van.

A fa tervezésekor az a kihívás, hogy kiegyensúlyozza a felderíthetőséget egy kiszámítható felhasználói modellel, amely minimalizálja a keveredést.

Szélesség és mélység

A használhatósági tanulmányok azt mutatták, hogy felhasználók sikeresebben találnak objektumokat egy olyan fában, amely széles, mint egy mélyfa, ezért a fa tervezésekor a mélységet kell előnyben részesíteni. Ideális esetben egy fa legfeljebb négy szinttel rendelkezhet (a gyökércsomópontot nem számítva), és a leggyakrabban használt objektumoknak az első két szinten kell megjelenniük.

Egyéb alapelvek

  • Amikor a felhasználók megtalálják, amit keresnek, nem keresnek. Nem nézik meg, hogy hol találhatók még objektumok, mert nincs rá szükség. Ezek a felhasználók feltételezhetik, hogy az első elérési út, amelyet megtalálnak, az egyetlen elérési út.
  • A felhasználók nehezen találnak objektumokat nagy, összetett fákon. A felhasználók nem végeznek teljes körű, manuális keresést az ilyen fák objektumainak megkereséséhez; Megállnak, ha azt hiszik, hogy ésszerű erőfeszítést tettek. Ezért a nagyméretű, összetett fákat ki kell egészíteni más hozzáférési módszerekkel, például szókereséssel, indexeléssel vagy szűréssel.
  • Egyes programok lehetővé teszik a felhasználók számára, hogy saját fákat hozzanak létre. Bár az ilyen saját tervezésű fák igazodhatnak a felhasználó mentális modelljéhez, gyakran rosszul és rosszul karbantartva jönnek létre. Míg például egy fájlrendszer, e-mail program és Kedvencek lista általában hasonló típusú információkat tárol, a felhasználók ritkán foglalkoznak azzal, hogy ugyanúgy rendszerezik őket.

Ha csak egy dolgot tesz...

Gondosan mérlegelje a fanézetek használatának előnyeit és hátrányait. A hierarchikusan elrendezett adatok nem jelentik azt, hogy fanézetet kell használnia.

Használati minták

A fanézetek több használati mintával rendelkeznek:

Használat Példa
Csak tárolócsomópontokkal rendelkező fanézetek
a felhasználók egyszerre egyetlen tárolót tekinthetnek meg és használhatnak.
Ezek a fanézetek általában egy társított vezérlővel rendelkeznek, amely megjeleníti a kijelölt tároló tartalmát, így a felhasználók egyszerre csak egy tárolóval kommunikálhatnak.
tárolópanel és tartalompanel képernyőképe
Ebben a példában a fanézet csak tárolócsomópontokkal rendelkezik. A kijelölt csomópont tartalma megjelenik a társított listanézet-vezérlőben.
Fanézetek tároló- és levélcsomópontokkal
a felhasználók megtekinthetik és kezelhetik a tárolókat és a leveleket.
Ezek a fanézetek általában egy társított vezérlővel rendelkeznek, amely megjeleníti a kijelölt tároló vagy levél tartalmát. A levelek használatát lehetővé tevő felhasználók gyakran több kijelölést is támogatnak.
fanézet panel és a tartalom panel képernyőképe
ebben a példában a fanézet tároló- és levélcsomópontokkal is rendelkezik. Mivel több kijelölés is támogatott, a megnyitott elemek tartalma lapokkal jelenik meg, a társított vezérlőben.
Másik lehetőségként a fanézet rendelkezhet rendezett listával, ahol a tárolók címsorok, a levelek pedig lehetőségek.
fanézet képernyőképe címsorokkal és beállításokkal
Ebben a példában a falevelek beállítások, a tárolók pedig beállításkategóriák.
Jelölőnégyzetfa nézet
a felhasználók tetszőleges számú elemet választhatnak, köztük egyiket sem.
A jelölőnégyzetek egyértelműen jelzik, hogy több kijelölés is lehetséges. ezt a famintát akkor használja, ha több kijelölés elengedhetetlen vagy gyakran használatos.
fanézet képernyőképe jelölőnégyzetekkel
Ebben a példában a jelölőnégyzetfa nézet lehetővé teszi a funkciók be- és kikapcsolását.
Fanézet-készítők
a felhasználók létrehozhatnak egy fát úgy, hogy egyszerre egy tárolót vagy egy levelet ad hozzá, és opcionálisan beállítják a sorrendet.
A felhasználók számos fát hozhatnak létre vagy módosíthatnak. egyes fák helyi menükkel és húzással (például a Windows Intéző mappái) vannak felépítve, míg más fák speciális párbeszédpanel használatával vannak létrehozva (például a Windows Internet Explorer kedvencek listájával).
kedvencek párbeszédpanel képernyőképe
Ebben az Internet Explorer-példában a felhasználók saját kedvencek listáját hozhatják létre egy párbeszédpanel használatával.
fanézetek alternatív hozzáférési módszerekkel
a felhasználók nem hierarchikus fa használatával találnak objektumokat.
Ahogy korábban említettük, a felhasználók nehezen találják meg a nagyméretű, összetett fák objektumait, ezért az ilyen fákat ki kell egészíteni más hozzáférési módszerekkel, például szókereséssel, indexeléssel vagy szűréssel.
képernyőfelvétel a tartalomról, az indexről és a kedvencek lapról
ebben a példában a felhasználók tartalomjegyzék, index és kedvencek használatával is hozzáférhetnek az információkhoz. egyes felhasználók esetében az index és a keresés lapja hasznosabb lehet, mint a tartalom lap.
windowsos startmenü és keresőmező
Ebben a példában a Windows Start menü lehetővé teszi a felhasználók számára a programok, fájlok és weblapok elérését úgy, hogy a név egy részét beírja a Keresőmezőbe.

Iránymutatások

Bemutató

  • Egy tárolón belül rendezze az elemeket logikai sorrendbe. A neveket betűrendbe, számokat numerikus sorrendbe, a dátumokat pedig időrendi sorrendbe rendezheti.

  • Használja az Always Show Selection attribútumot, hogy a felhasználók könnyen megállapíthassák a kijelölt elemet, még akkor is, ha a vezérlő nem rendelkezik bemeneti fókuszsal.

  • Ha a fa tartalomjegyzékként működik, az Egyetlen kibontás attribútum használatával egyszerűsítheti a fa kezelését. Így a fa csak a megfelelő részét bontja ki.

  • Kerülje az üres fák megjelenítését. Ha egy felhasználó létrehoz egy fát, inicializálja a fát olyan utasításokkal vagy példaelemekkel, amelyekre a felhasználóknak szükségük lehet.

    Képernyőfelvétel az Internet Explorer kedvencek listájáról

    Ebben a példában a lista kezdetben példákkal jelenik meg.

  • Ne tegye összecsukhatóvá a tárolócsomópontokat, ha a felhasználóknak nincs okuk összecsukni őket. Ez szükségtelen összetettséghez ad hozzá.

  • Ha a terhelési teljesítmény probléma, alapértelmezés szerint csak a fa első és második szintű tárolói jelenjenek meg. Ezután további adatokat is betölthet igény szerint, ha egy felhasználó kibontja az ágakat a fán.

  • Ha a felhasználók kibontanak vagy összecsuknak egy tárolót, az állapot megmarad, hogy a fanézet következő megjelenítésekor érvénybe lépjen, kivéve, ha a felhasználók valószínűleg az alapértelmezett állapotból indulnak ki. Az adatmegőrzésnek felhasználónkénti nézetben kell lennie.

  • Ha a magas szintű tárolók tartalma hasonló, érdemes vizuális nyomokkal megkülönböztetni őket.

    helytelen:

    különböző ikonokkal rendelkező Outlook-elemek képernyőképe

    Ebben a példában a postaláda- és archív mappák tartalma hasonló. Ha a fákat tovább bővítik, a felhasználók nagyon nehezen tudják, hogy hol vannak a fán, ami zavart okoz. Ha a különböző szakaszokban kissé eltérő ikonokat használ, az megoldaná ezt a problémát.

  • Gondolja át a csatlakozó vonalakat. Bár ezek a sorok egyértelműen mutatják a tároló- és levélcsomópontok közötti kapcsolatokat, vizuális zsúfoltságot adnak hozzá anélkül, hogy jelentősen elősegítenék a megértést. Pontosabban nem segítenek, ha a csomópontok közel vannak egymáshoz, és nem segítenek abban sem, ha a csomópontok annyira távol vannak egymástól, hogy görgetéshez van szükség.

    Helyes:

    fanézet képernyőképe összekötő vonalakkal

    jobb:

    fanézet képernyőképe vonalak csatlakoztatása nélkül

    A csatlakozó vonalak nem sokat segítik a megértést.

Kölcsönhatás

  • Fontolja meg a dupla kattintásos működést. A dupla kattintásnak ugyanolyan hatással kell lennie, mint egy elem kiválasztására és az alapértelmezett parancs végrehajtására.

  • Dupla kattintásos viselkedés redundánssá tétele. Mindig legyen egy parancsgomb vagy egy helyi menüparancs, amelynek ugyanaz a hatása.

  • Ha egy elem további magyarázatot igényel, adja meg a magyarázatot egy infotip.

    kedvencek képernyőképe egy elemhez

    Ebben a példában egy információs tipp további információkat tartalmaz.

  • Adja meg a megfelelő parancsok helyi menüjét. Ilyen parancsok például a Kivágás, a Másolás, a Beillesztés, az Eltávolítás vagy a Törlés, az Átnevezés és a Tulajdonságok.

  • Fanézet letiltásakor tiltsa le a társított címkéket és parancsgombokat is.

Faszervezet

  • A felhasználók többsége számára ismerős, természetes hierarchikus struktúrát használjon.
  • Ha nem tud ilyen struktúrát használni, próbálja meg kiegyensúlyozni a felderíthetőséget egy kiszámítható felhasználói modellel, amely minimalizálja a keveredést.
  • A felderíthetőség biztonságos javítása érdekében helyezzen el egy elemet több tárolóban, ha:
    • Az elem nem kapcsolódik más hasonló elemekhez (így a felhasználókat nem zavarják a helytelen társítások).
    • Csak néhány ilyen redundánsan található elem van (így a fa nem lesz felfúvódva).
  • Használja a legegyszerűbb hierarchikus struktúrát, amely jól működik. Ehhez tegye a következőt:
    • Helyezze a leggyakrabban használt objektumokat a fa első két szintjére (nem számítva a gyökércsomópontot), és helyezze a ritkábban használt objektumokat a hierarchiához távolabb.
    • Szükségtelen vagy redundáns köztes szintű tárolók megszüntetése.
  • Előnyben részesítse a szélességet a mélység felett. Ideális esetben egy fának legfeljebb négy szinttel kell rendelkeznie, és a leggyakrabban használt objektumoknak az első két szinten kell megjelenniük.
  • Állapítsa meg, hogy valóban szükség van-e gyökércsomópontra. Adjon meg egy gyökércsomópontot, ha a felhasználóknak parancsokat kell végrehajtaniuk a teljes fán (esetleg a gyökércsomópont helyi menüjével). Ellenkező esetben a fa egyszerűbb és könnyebben használható nélküle.
  • Ha a fa olyan alternatív hozzáférési módszerekkel rendelkezik, mint a szókeresés vagy az index, optimalizálja a fát a böngészéshez a leghasznosabb tartalomra összpontosítva. Alternatív hozzáférési módszerekkel a fa tartalmának nem kell átfogónak lennie. A fa egyszerűsítése megkönnyíti a felhasználók számára a leg-hasznosabb tartalmak megtalálását.

Jelölőnégyzetfanézetek

  • A kijelölt elemek számának megjelenítése a lista alatt, különösen akkor, ha a felhasználók valószínűleg több elemet választanak ki. Ez a visszajelzés segít a felhasználóknak ellenőrizni, hogy helyes-e a kiválasztásuk.

    kijelölt elemek számának képernyőképe

    Ebben a példában a kijelölt elemek száma a fa alatt jelenik meg. Nyilvánvaló, hogy két elem nincs kijelölve.

  • Ha valószínűleg sok elem van, és az összes kijelölése vagy törlése valószínű, adja hozzá az Összes kijelölése és Az összes törlése parancsgombot.

  • Vegyes állapotú jelölőnégyzetek használata a tároló elemeinek részleges kijelölésére.

    Helyes:

    ablak képe vegyes állapotú jelölőnégyzetekkel

    Ebben a példában a vegyes állapotú jelölőnégyzetek a részleges kijelölés jelzésére szolgálnak.

fanézet méretének és térközének

A fanézet vezérlőinek javasolt méretezése és térköze.

  • Válasszon egy fanézet szélességét, amely nem igényli a vízszintes görgetést, a legtöbb elemnél, amikor a fa teljesen ki van bontva.

  • A honosításhoz további 30 százalékot kell megadni.

  • Válassza ki a fanézet magasságát, amely kiküszöböli a szükségtelen függőleges görgetést. Fontolja meg, hogy egy fanézet kissé hosszabb legyen (vagy még több, ha van szabad terület), ha így csökkenti a függőleges görgetősáv szükségességét.

    helytelen:

    rövid, keskeny fanézet vezérlő

    Ebben a példában a fanézet kissé szélesebb és hosszabbá tétele a legtöbb esetben megszünteti a görgetősávokat. Ebben az adott fában egyszerre csak egy tároló nyitható meg.

  • Ha a felhasználók számára előnyös a fanézet növelése, a fanézet és a szülőablak méretezhetővé tétele. Így a felhasználók igény szerint módosíthatják a fanézet méretét.

Címkék

Vezérlőfeliratok

  • Minden fanézethez címkékre van szükség. Írja a címkét szóként vagy kifejezésként, nem mondatként, kettősponttal végződve, és statikus szöveghasználatával.

  • Egyedi hozzáférési kulcs hozzárendelése. A hozzárendelési irányelvekért lásd: Billentyűzet.

  • Használjon mondatstílusú nagybetűs megjelenítést.

  • Helyezze a címkét a vezérlő fölé, és igazítsa a címkét a vezérlőelem bal széléhez.

  • Több kijelölési fanézet esetén írja be a címkét, hogy egyértelmű legyen, hogy több kijelölés is lehetséges. A jelölőnégyzetfa nézetfeliratai kevésbé lehetnek explicitek.

    helytelen:

    képernyőfelvétel a fanézetről az összetevők címkéjével

    Ebben a példában a címke nem tartalmaz információt több kijelölésről.

    jobb:

    Ebben a példában a címke egyértelműen azt jelzi, hogy több kijelölés is lehetséges.

    legjobb:

    fanézet képernyőképe jelölőnégyzetekkel

    Ebben a példában a jelölőnégyzetek egyértelműen jelzik, hogy több kijelölés is lehetséges, így a címkének nem kell explicitnek lennie.

Adatszöveg

  • Használjon mondatstílusú nagybetűs megjelenítést.

Utasítás szövege

  • Ha oktatószöveget szeretne hozzáadni egy fanézethez, adja hozzá a címke fölé. Használjon teljes mondatokat írásjelekkel.

  • Használjon mondatstílusú nagybetűs megjelenítést.

  • A hasznos, de nem szükséges kiegészítő magyarázatokat rövidre kell tartani. Ezeket az információkat zárójelben helyezze el a címke és a kettőspont között, a fő utasítás után, ha címke helyett használja, vagy a vezérlőelem alá.

    fanézet alatti magyarázat képernyőképe

    Ebben a példában a kiegészítő magyarázat a vezérlő alatt található.

Dokumentáció

Fanézetekre való hivatkozáskor:

  • Használja a pontos feliratszöveget, beleértve a nagybetűket is, de ne tartalmazza a hozzáférési kulcs aláhúzásjelét vagy kettőspontját. Adja meg a szólistát vagy a hierarchikus listát, ha a környezet különbséget tesz a normál listáktól.
  • Faelemek esetén használja a pontos elemszöveget, beleértve annak nagybetűsítését is.
  • A fanézetek csak a programozásban és más műszaki dokumentációban tekinthetők meg fanézetként. Mindenhol használjon listát vagy hierarchikus listát, mert a fa kifejezés zavaró a legtöbb felhasználó számára.
  • A felhasználói interakció leírásához használja az adatok kiválasztását, majd a plusz- és mínuszgombok kibontása és összecsukása lehetőséget.
  • Ha lehetséges, formázza a címkét és a faelemeket félkövér szöveg használatával. Ellenkező esetben a címkét és az elemeket csak akkor tegye idézőjelek közé, ha az a félreértések elkerülése érdekében szükséges.

Példa: A Tartalom listában válassza Felhasználói felület tervezéselehetőséget.

Ha fanézetben a jelölőnégyzetekre hivatkozik:

  • Használja a pontos feliratszöveget a nagybetűvel együtt, és jelölje be a szavakat. Ne tartalmazza a hozzáférési kulcs aláhúzását.
  • A felhasználói interakció leírásához használja a kijelölést és a törlést.
  • Ha lehetséges, formázza a címkét félkövér szöveg használatával. Ellenkező esetben a címkét csak akkor tegye idézőjelek közé, ha az a félreértések elkerülése érdekében szükséges.

Példa: A lista biztonsági mentéséhez Elemek területen jelölje be a Dokumentumok jelölőnégyzetet.