Návrh rozložení analytické sestavy

Dokončeno

Když se uživatelé sestavy na sestavu dívají, dojde k automatickému a nevědomého procesu, když pochopí, co vidí. Proto byste měli dodržovat základní principy návrhu sestav, které tento proces podporují, abyste mohli efektivně sdělit význam datům.

Poznámka

Návrh sestavy je kombinací vědy a umění a k dispozici je mnoho možných návrhů sestav, které pomáhají dosáhnout požadavků na cílovou skupinu a rozhraní. Nejdůležitější je, aby návrh sestavy efektivně předával data tak, aby splňovala požadavky.

Analytická sestava se může skládat z jedné nebo více stránek a stránky tvoří objekty sestavy. Objekty sestavy můžou být datové vizuály, které představují výsledky dotazu, nebo dekorace, jako jsou obrázky, obrazce pozadí nebo text. Rozložení sestavy můžete začít navrhovat tak, že určíte počet, pořadí a účel stránek. Ujistěte se, že se na stejné stránce vyhněte kombinování předmětů nebo protichůdných cílů. Potom každé rozložení stránky navrhujte s konkrétními objekty sestavy, které jsou relevantní pro požadavky.

Dobrá rozložení návrhu sestavy by navíc měla brát v úvahu principy návrhu umístění, rovnováhy, kontrastu, blízkosti a opakování.

Tip

Vždy mějte na paměti, že čím méně je více přísudek platí; jednoduchost a srozumitelnost vedou k dobrému designu.

Umístění

Dobré umístění objektů sestavy přispívá k návrhu seřazené sestavy. Nejdůležitější informace byste obecně měli umístit do levého horního rohu stránky a uspořádat prvky sestavy zleva doprava a shora dolů.

Poznámka

Toto umístění platí pro cílové skupiny, které převážně čtou zleva doprava (LTR). Když cílová skupina čte zprava doleva (RTL), jako je tomu u některých psaných jazyků, jako je arabština a hebrejština, umístěte nejdůležitější informace do pravého horního rohu a uspořádejte prvky sestavy zprava doleva.

Uspořádejte objekty sestavy tak, aby se svislé a vodorovné okraje zarovnaly, protože vypadají uspořádaně a jsou příjemné pro oko. Umístění objektů sestavy v logických skupinách Seřazené rozložení sestavy vytváří spojení mezi vizuálními prvky a zabraňuje nepotřebným prvkům, které mohou být výsledkem zdánlivě náhodného umístění objektů sestavy.

Kromě toho zarovnání objektů sestavy do vizuálně příjemného rozložení může vyjádřit více energie a zájmu než pouhé zarovnání nebo náhodného umístění objektů sestavy. Zvažte použití pravidla thirds, což je vizuální pravidlo, které lze použít na umístění objektů sestavy v analytické sestavě. Toto pravidlo navrhuje, aby rozložení stránky bylo rozděleno do neviditelné mřížky po devíti stejných částech. Mřížka je tvořena dvěma stejně rozmístěnými vodorovnými čarami a dvěma stejně rozmístěnými svislými čárami. Objekty sestavy pak mohou být umístěny v buňkách mřížky.

Návrh sestavy pro analýzu prodeje ve skateboardovém obchodě Contoso představuje tři stejně velké vertikální oblasti. První oblast zobrazuje prodej rozdělený podle produktů, druhá oblast zobrazuje prodej rozdělený podle obchodů zákazníků a třetí oblast zobrazuje položky, které se prodaly.

Zůstatek

Dalším důležitým aspektem při rozložení objektů sestav je vyváženost. Balance se zabývá stabilitou a strukturou v návrhu. V kontextu rozložení sestavy se vyvážením rozumí váha, která se na stránce sestavy distribuuje umístěním objektů stejné nebo různých velikostí.

Zůstatek může být symetrický nebo asymetrický. Symetrické rovnováhy se dosahuje rovnoměrným rozdělením váhy na obě poloviny stránky. Asymetrické rovnováhy se dosahuje pomocí kontrastu.

Zvažte použití zlatého poměru jako vodítka k dosažení asymetrického zůstatku. Poměr je založen na Fibonacciho sekvenci, kde dvě množství jsou ve zlatém poměru, pokud je jejich poměr stejný jako poměr jejich součtu k většímu z obou množství. Po staletí, zlatý poměr ovlivňoval umění a architekturu k produkci díla, která jsou harmonická a vyvážená. Pokud se použije u návrhu sestavy, zlatý poměr zarovná stránku tak, aby měla jeden velký vizuál, který přitáhne počáteční pozornost, což je pak podporováno menšími vizuály, které poskytují kontext.

Na následujícím animovaném obrázku si všimněte, jak rozložení sestavy zpočátku přitáhne pohled na větší grafy. Až pochopíte větší grafy, všimněte si, že vaše oko je pravděpodobně přitahováno k pruhovým grafům a pak k hodnotám na kartách.

Blízkost

V rozložení sestavy se blízkost zabývá blízkostí objektů sestavy. Pokud se stránka sestavy skládá z více skupin souvisejících objektů, měli byste je vizuálně oddělit pomocí mezery.

V následujícím návrhu sestavy si všimněte levé horní části označené klíčové metriky. Související vizuály jsou umístěné blízko sebe. Jsou také účelně a konzistentně zarovnané a tvoří jasný oddíl.

Snímek obrazovky ukazuje příklad rozložení sestavy se zvýrazněnou částí klíčových metrik v červeném poli.

Kontrast

Kontrast lze použít ke kombinování dvou protichůdných objektů. Použití kontrastních barev, písem, vlastností písma nebo čar může zdůraznit důležité objekty návrhu sestavy. Tento princip použijte k nasměrování uživatelů sestavy na místo, kde by se měli podívat nebo se kterým datovým vizuálem by měli pracovat jako první.

SCreenshot ukazuje příklad rozložení sestavy, které má vizuály se dvěma pruhovým grafy. Panel nejprodávanějších produktů je modře zvýrazněný, zatímco zbývající pruhy jsou šedé.

Opakování

Opakování v návrhu sestavy vytváří přidružení a konzistenci. Správné použití opakování může přispět k posílení rozložení sestavy tím, že propojí související objekty sestavy.

V následujícím návrhu sestavy si všimněte levé horní části s názvem Klíčové metriky. Mnoho klíčových metrik se zobrazuje na kartách s jednou hodnotou. Tento opakovaný návrh umožňuje uživatelům sestav rychle porozumět metrikám a interpretovat je.

Snímek obrazovky ukazuje příklad rozložení sestavy s oddílem klíčových metrik. Dvě červená pole zvýrazňují pět vizuálů karet, které zobrazují klíčové hodnoty metrik.