Vytvoření nejlepších čokoládových sušenek bude vyžadovat UX i uživatelské rozhraní. Myslím to vážně. Pro začátek budete potřebovat recept, ingredience, kuchyňské náčiní a troubu. Potom: promícháme, upečeme, nakrájíme, dáme na talíře, podáváme a jezme.

Ale co z toho je UX a co UI? Proces výroby je UX a proces pokovování a podávání je UI.

A co jíst? Toto je UX; kromě případů, kdy to není UX. Měl by spotřebitel jinou zkušenost, kdyby byly koláče podávány přímo z formy nebo krásně prezentovány na talíři? Řekl bych, že ano, to druhé by bylo vhodnější.

V tomto článku se s vámi podělím o pět rozdílů mezi designem UX a UI. Doufejme, že na jeho konci jim budete lépe rozumět. Hned říkám, že i když si všimnete rozdílů, některé z nich si budou velmi podobné.

S tímto prohlášením o vyloučení odpovědnosti se podívejme na některé rozdíly mezi těmito dvěma.

UX není uživatelské rozhraní

UX design neboli design uživatelské zkušenosti je proces, kterým se identifikuje potřeba. Poté je nakreslen hrubý prototyp, který je později ověřen (nebo ne) testováním. Po potvrzení obchodního modelu i hodnotové nabídky je produkt připraven.

Uživatelské rozhraní neboli design uživatelského rozhraní lze chápat takto:

Návrh uživatelského rozhraní = Visual Design + Interaction Design.

Vizuální design je to, jak web vypadá, jeho osobnost, chcete-li; značka. Interakční design je způsob interakce lidí s vaším webem. Když někdo stiskne tlačítko, změní se tak, aby bylo jasné, že bylo stisknuto?

Zatímco designéři UX i UI vytvářejí interakce, designéry UX lze považovat za architekty makrointerakcí a designéry UI lze považovat za tvůrce mikrointerakcí, kteří se zabývají detaily.

Podle návrháře Nicka Babicha:

„Nejlepší produkty dělají dobře dvě věci: funkci a detail. Funkce jsou to, co přitahuje lidi k vašemu produktu. Detaily jsou to, co je drží pohromadě."

Designér UX by raději navrhoval uživatelské toky, kroky, které by uživatel podnikl, například k přihlášení k odběru newsletteru. Jaké kroky budou následovat a jak poznají, že uspěli?

Projekt poté přejde k návrháři uživatelského rozhraní. Návrhář uživatelského rozhraní tyto interakce vylepší přidáním barvy a zvýraznění. originální design, dáváte jim tipy a ukazujete jim cestu k newsletteru.

UI dělá rozhraní krásná

Užitečný produkt uspokojuje potřebu, se kterou se trh dosud nesetkal. Výzkumný proces návrháře UX zahrnuje konkurenční analýzu, vývoj person a následné vytvoření minimálního životaschopného produktu; produkt, který bude hodnotný pro vaši cílovou skupinu. To je potvrzeno celým testováním životní cyklus produkt.

Jakmile jsou uživatelské toky a drátové modely prototypovány a testovány, proces se přesune k návrháři uživatelského rozhraní – jeho úkolem je, aby vše vypadalo dobře. To zahrnuje výběr barevného schématu a designu, které jsou krásné a snadno použitelné. Výběr barev, design a interakce však nejsou založeny na osobních preferencích designéra, ale na jasně formulovaných osobních důvodech, které vyvinuli designéři UX. S jejich pomocí návrháři uživatelského rozhraní implementují vizuální hierarchii, která bude uživatelům sloužit jako vodítko, vysvětlí jim, co a kdy mají dělat, aby dosáhli svého cíle.

Dobře navržená hierarchie jednu zvýrazní hlavní cíl na stránce, aby uživatelé věděli, kde se na webu nacházejí a co mohou dělat tento momentčas. Hierarchie to řeší pomocí konvencí a vzorů, které jsou již uživatelům známé. Tyto vzory poskytnou uživatelům směr.

UX pomáhá uživatelům dosáhnout jejich cílů

UI vytváří emocionální spojení

Lidé přicházejí na váš web, aby něco udělali. Snad někdo hledá pejska do malého bytu.

UX stránka věci se může dívat na lidi jako na milovníky psů a snažit se pochopit, co je pro ně důležité. Čeho si cení nebo co potřebují, když hledají pomoc při výběru svého chlupatého kamaráda? Aby to pochopili, začnou pracovat. Kladou otázky, pozorují lidi, dělají s nimi rozhovory, možná dělají prototypy a nějaké partyzánské testování, aby zjistili, jestli jim mohou pomoci.

Jakmile si nastavíte základní použitelnost, podle Aarona Waltera, autora Design for Emotion, bude loajalita vašich uživatelů záviset na osobnosti vašeho rozhraní. Živý design může na váš web přilákat lidi a mohou se dokonce zdržet, pokud tam mají co dělat. A jakmile se vytvoří osobní spojení, jsou zaháknutí. Rozesmívá je vaše rozhraní? Chytá je? Jak moc je namyšlený? Aaron říká: „Lidé vám odpustí vaše nedostatky, budou vás následovat a budou vás chválit, pokud je odměníte pozitivními emocemi.“ Zde přichází na řadu návrhář uživatelského rozhraní.

Nejprve je vytvořen UX design

Poté se (někdy) vytvoří návrh uživatelského rozhraní

Jak spolupracují návrháři UX a UI během procesu návrhu?

Návrh a průzkum UX jsou obvykle prvními kroky při rozhodování o vytvoření produktu nebo aplikace. Designéři UX provádějí velkou část výzkumu, který potvrzuje nebo vyvrací původní myšlenky produktu a řídí jeho vývoj.

Jakmile byl prototyp několikrát testován a je téměř připraven, přichází návrhář uživatelského rozhraní a začíná pracovat na vizuálním designu a mikrointerakcích.

Tato cesta však není vždy lineární a závisí na mnoha faktorech. Například:

• Kdo dělá UX a UI?
• Stejný člověk, nebo někdo jiný a jiný tým?

UX se používá ve všech produktech, rozhraních a službách

UI odkazuje pouze na rozhraní

Design uživatelských zkušeností je rozsáhlá oblast a stává se každým dnem populárnější. V dnešní době nejen společnosti používající web, ale i mnoho dalších vyvíjejících produkty nebo poskytující služby začínají chápat hodnotu porozumění svým uživatelům a ověřování hypotéz ještě před zahájením procesu tvorby.

Návrh uživatelského rozhraní je o uživatelských rozhraních. To neznamená, že je graficky omezený. uživatelské rozhraní počítače, tablety a mobilní zařízení. V dnešní době lze rozhraní nalézt v mnoha dalších produktech, jako jsou hodinky, pračky, palubní desky automobilů, prodejní automaty a mnoho dalších.

Nedávno jsem četl o aplikaci pro iPhone, která odemkne dveře vašeho auta. Ukazuje se, že tato sada interakcí zahrnuje mnohem více kroků než pouhé použití klíče k otevření dveří. Ať už navrhujeme rozhraní nebo prostředí, musíme zajistit, aby naši uživatelé zůstali jádrem procesu.

závěry

Je téměř nemožné oddělit UX od UI nebo UI od UX.

Ale pokud to zkusíte, můžete dojít k závěru, že:

• UX design pomáhá uživatelům dokončit úkoly napříč různými platformami a službami.
• Design uživatelského rozhraní vytváří atraktivní a estetická rozhraní, která se spojují s lidmi.

Překlad článku Dona Sklechta

• Překlad

Včera jsem poslouchal podcast a všiml jsem si, že někdo položil otázku a přitom řekl: „Starý fanoušek, volající poprvé.“ Z nějakého důvodu mě to přimělo přemýšlet o Medium. Čtu zde články už dlouho, ale nikdy jsem nevložil své dva centy. Dnes je den, který se změní.

Pro začátek jsem se rozhodl napsat o něčem, co je mi blízké, o vizuálním designu (aka grafickém designu), přesněji o základních principech, s jejichž používáním jsem přišel se zkušenostmi a které považuji za nejdůležitější pro práci. moje práce dobře.

Nechci článek nafouknout, proto budu stručný ke každému principu. Tématům, která si zaslouží více podrobností, možná v budoucnu věnuji celý článek.

Tak co, jste připraveni? Všechno to začíná...

#1 Bod, linie a tvar

To jsou základní stavební kameny jakéhokoli designu, bez ohledu na to, jaký. S nimi můžete vytvořit cokoli od jednoduchých ikon až po velmi složité ilustrace, to vše pomocí kombinace těchto jednoduchých prvků.

V geometrii je bod kombinací souřadnic x a y, přidejte osu z a jste ve třech rozměrech, my se však v tomto článku omezíme na dva rozměry.

Bod > čára > tvar

Pokud spojíte dva body, dostanete čáru. Čára složená z nesmírných bodů je trochu jako shluk atomů, které tvoří molekuly, které zase tvoří všechny předměty kolem vás. Pokud pak přidáte třetí bod a spojíte je, získáte tvar, v tomto případě trojúhelník, ale jak již bylo zmíněno dříve, s těmito základními prvky můžete získat téměř vše, co chcete.

Ale pro vaše oči tyto tvary ve skutečnosti neexistují, dokud k nim něco nepřidáte...

#2 Barva

Viditelné barevné spektrum

Lidské oko může vidět přes 10 milionů různých barev od červené po fialovou a od dětství se všichni učíme přiřazovat určitým barvám určité hodnoty nebo významy.

Představte si například semafory. Jsou to jen barvy, ale učíme se, že červená znamená zastavit, zelená znamená jít, žlutá znamená vykročit na koleje, protože to můžete udělat, než se rozsvítí červená. To ukazuje, že bereme velmi různé akce jen v závislosti na barvě, někdy aniž bychom si to uvědomovali.

Podle mého názoru je to jednoduše proto, že jsme se tyto věci naučili, ne proto, že barvy mají od přírody svůj vlastní význam. To potvrzuje i fakt, že tyto významy se mění v závislosti na kultuře, kde a kdy jste vyrůstali.

To vše znamená, že můžete přidat význam, účel a tón pouhým výběrem správné barvy, jen se musíte ujistit, že máte velmi jasno v tom, pro koho navrhujete.

Nyní, když vidíte svůj trojúhelník, co takhle ho udělat zajímavějším...

#3 Typografie

Od trojúhelníku k písmenu A

To je velký problém a myslím si, že jeden z nejdůležitějších a nejobtížnějších pro designéra, aby to udělal správně. Nejde jen o to, co píšeš, ale jak to prezentuješ. Typografie je to, jak budou vaše slova vypadat.

Se správným fontem můžete vzít nudný text a učinit jej výkonným. Ale není to jednoduché. Co je snadné, je zcela podkopat silné prohlášení pouhým výběrem špatného písma. Typografie, stejně jako barva, pomáhá definovat tón.

Většina písem je navržena pro konkrétní účely, stačí se je naučit a využít ve svůj prospěch. Některá písma jsou vhodná pro velké bloky textu, jiná pro nadpisy. Některé jsou extrémně funkční a super čisté, zatímco jiné jsou jednoduše navrženy tak, aby byly vtipné nebo aby je bylo možné použít ironicky (víte, co tím myslím).

Na výběr jsou tisíce různých písem, ale pokud nepotřebujete něco vymyšleného nebo nevytváříte něco velmi specifického, doporučoval bych vždy zůstat u klasiky. Pokud se však cítíte statečně, můžete si dokonce navrhnout vlastní písmo, i když pokud se to udělá dobře, považuji to za jednu z nejobtížnějších věcí pro návrháře. Ale pokud si myslíte, že jste připraveni na jeden úkol, na který nezapomenete, je to...

#4 Prostor

Způsob, jakým vyvážíte prostor, vytvoří nebo rozbije design, což platí zejména pro typografii.

Musíte zvážit, jak každý prvek/písmeno souvisí s ostatními, a dát jim přesně tolik prostoru k dýchání, kolik potřebují. Obvykle se nazývá negativní mezera (pozitivní mezera jsou samotná písmena).

Úprava záporné mezery mezi znaky (aka kerning)

Měli byste přijmout negativní prostor jako součást svého návrhu a používat jej stejným způsobem. Prostor může být mocným nástrojem a může pomoci vést diváka návrhem. Může to být také místo pro odpočinek vašich očí.

Ale používejte to moudře, příliš mnoho místa a váš návrh bude vypadat nedokončený, příliš málo místa a váš návrh bude působit příliš přeplněně.

Pokud se naučíte najít správnou rovnováhu mezi pozitivním a negativním prostorem, můžete vytvořit...

#5 Rovnováha, rytmus a kontrast

To je, když začnete měnit spoustu jednoduchých prvků v něco zajímavého a atraktivního. Pečlivě vyvažte všechny prvky vašeho návrhu s ohledem na jejich vizuální výšku. Velký černý čtverec vpravo horní roh utopí design v tomto směru. Vykompenzujte tuto váhu nebo přesuňte čtverec na jiné místo.

Úprava vizuální váhy slov pro vytvoření rytmu a kontrastu

Způsob, jakým rozmístíte prvky na stránce, je rozhodující, protože těžší prvky pomohou vytvořit kontrast a rytmus, což umožní oku vašeho diváka procházet návrhem elegantně a bez námahy.

Existuje několik věcí, které mohou pomoci vašemu rytmu a rovnováze, a můžete si s nimi také pohrát...

#6 Měřítko

Další krok uděláme úpravou měřítka slov

Scale pomůže vytvořit nejen rytmus, kontrast a rovnováhu, ale také hierarchii. Obvykle ne všechny prvky vašeho návrhu musí mít stejnou důležitost a jedním z nejlepších způsobů, jak to sdělit, je velikost.

Teď to musí splnit svůj účel. Nepropadněte přístupu „udělej mé logo větší“ a zapomeňte na prostor, který jsem zmínil dříve.

Vezměte si například novinovou stránku. Co je na stránce největší?

Nadpisy jsou obvykle krátké. Proč? Tímto způsobem můžete rychle prolistovat stránku a zjistit, zda je tam něco zajímavého ke čtení. Pak tu máme podnadpisy, které jsou menším písmem, ale poskytují více informací o článku, a nakonec je tu samotný článek, který má nejmenší velikost písma, ale nejčitelnější velký kus textu.

Takže to, co říkáme, je, že velikost by měla sloužit funkci a nikdy nezapomínejte na osobu, která bude konzumovat váš návrh. V případě novin je na čase obnovit nějaký pořádek s...

# 7 Mřížka a zarovnání

Je to jako to zvláštní zadostiučinění, když hrajete Tetris a seřadíte poslední řádek, který zmizí z obrazovky.

Vytvoření určitého spojení mezi prvky tak, aby působily vyváženěji a líbivější

Mají být neviditelné, ale uvidíte je, když otevřete knihu nebo noviny. V každém případě (bez ohledu na to, co navrhujete) přichycení k mřížce vytvoří strukturu vašeho návrhu a učiní jej zábavnějším a snadněji stravitelným.

I když záměrně uděláte chaotický design, v chaosu musí být pořádek.

Zarovnání je důležité zejména pro text, existuje několik způsobů, jak jej zarovnat, ale mým zvykem je zarovnat jej doleva. Samozřejmě je vždy důležité, co a pro koho vytváříte, ale lidé obvykle čtou zleva doprava a shora dolů, takže text uprostřed nebo vpravo se čte mnohem hůře.

#8 Rámování

To je klíčový pojem ve fotografii, ale platí to i pro vizuální design.

Kdekoli použijete obrázek, ilustraci nebo cokoli jiného, ​​vytvořte správné orámování a uvidíte rozdíl.

Přerámování kompozice pro přidání zajímavosti a dalšího prvku

Zkuste nasměrovat své oko na to, co je důležité, upravte velikost/oříznutí obrázků, aby váš předmět vynikl, nebo aby vaše sdělení posílilo. Nejdůležitější je zde příběh a jak ho správně vyprávět.

Po tom všem, pokud máte pocit, že vám něco zajímavého chybí, můžete si pohrát s...

# 9 Textury a vzory

Testování textury se šumem

Osobně vnímám textury a vzory jako doplňky, nemusíte je používat a můžete se bez nich obejít, ale někdy dokážou téměř tím, že je používají, vytvořit váš design nebo přidat ten kroužek zajímavosti, který chyběl.

Textury dnes nejsou tak módní jako kdysi, ale s nimi můžete svému designu přidat nový rozměr, udělat jej trojrozměrnějším a hmatatelnějším.

Textury nemusí být v samotném návrhu, pokud potřebujete něco vytisknout, vyberte správný papír, přidejte věci jako zkosení, ražbu nebo UV lakování a váš návrh může přejít od nevýrazného v něco krásného. Ale vyberte si jednu, nezblázněte se se speciálním lemováním.

Vzory se vždy zabývají opakováním a lze je téměř považovat za textury, v závislosti na tom, jak je používáte. Věřím, že se dají použít hlavně k vnesení rytmu a dynamiky design bytu a také jako způsob, jak kompenzovat přebytek negativního prostoru.

V neposlední řadě a skutečně to, co považuji za svatý grál vizuálního designu, je...

#10 Vizuální koncept

Je to myšlenka za vaším designem. Co tím myslíte a jaký je skrytý význam za tímto povrchním obrazem.

Ideální lampa... klišé, já vím :)

To je to, co odlišuje skvělý design od něčeho, co si můžete stáhnout ze skladu.

Navrhujte s myšlenkou, s cílem a vždy mějte nápad, který spojuje vše dohromady. Pečlivě vybírejte fonty pro tento účel, přemýšlejte o tom, jak každá malá část vašeho návrhu sleduje tento základní koncept. Konzistence je nejdůležitější.

Pokud je váš koncept silný, budete jej schopni obhájit a prodat nápad klientovi/šéfovi nebo komukoli, komu ho budete ukazovat.

Také promyšlený design vydrží roky. Módní hipsterské věci jsou cool a cool, jako kníry a kostkované košile, ale mají datum spotřeby. Opravdu si myslím, že dobrý design NEsleduje trendy, ale vytváří je.

Nyní je máte, „mých“ 10 zásad pro tvoření dobrý design. I když si myslím, že #10 je nejdůležitější, měli byste věnovat pozornost všem ostatním zásadám a ujistit se, že jste své umění dotáhli k dokonalosti. Možná máte dobrý nápad, ale myslím, že je také potřeba vědět, jak ho realizovat (nebo znát někoho, kdo to za vás udělá).

Říká se, že nemůžete soudit knihu podle obalu, ale to je to, co většina lidí ve skutečnosti dělá. Pokud není obsah knihy dostatečně dobře zobrazen na obálce, určitě to ovlivní úspěch.

OK! To je vše.

Jako poslední poznámku bych měl zmínit: Jsou samozřejmě i další věci, které v projektu/designu beru v úvahu, jako porozumění publiku a toho, čeho s ním chceme dosáhnout, ale nezařadil jsem je do seznamu principy, protože tato „omezení“ považuji za důležitou součást definování vizuálního konceptu. Nápad může být skvělý, ale pokud nesplňuje požadavky projektu, dříve nebo později selže.

Doufám, že tento seznam shledáte užitečným, i když jste jej již znali. Používám tento soubor principů stejně intenzivně jako Staedlerova pera a bylo pro mě zajímavým cvičením dekonstruovat své návrhy na jakési „stavební bloky“.

Neváhejte a zanechte svůj názor, jsem vždy otevřený zdravé diskusi.

Děkuji za přečtení!

„Návrh vizuálního rozhraní Bez ohledu na to, kolik úsilí vynaložíte na průzkum uživatelů a vytvoření modelu chování produktu, který jim pomůže dosáhnout jejich cílů, toto úsilí bude...“

-- [ Strana 1 ] --

Návrh vizuálního rozhraní

Bez ohledu na to, kolik úsilí vložíte do uživatelského průzkumu a tvorby

vývoj modelu chování produktu, který přispívá k dosažení jejich cílů

lei, tyto síly budou promarněny, pokud selžete správně

způsobem, který uživatelům sdělí principy tohoto chování. Ve službě

V interaktivních produktech se to často děje prostřednictvím vizuálních prostředků.

vámi - zobrazením objektů na displeji (i když v některých případech

V některých případech musí být chování produktu přenášeno prostřednictvím fyzického

vlastnosti, jako je tvar hardwarového tlačítka nebo jeho hmatový dojem).

Vizuální design rozhraní je disciplína, která je často nepochopena kvůli své podobnosti s grafickým designem a výtvarným uměním. Často je nesprávně definován jako „stažení“ rozhraní; dokonce jsme slyšeli takové formulace jako „zdobit produkt“.

Naše zkušenosti nás vedly k závěru, že design vizuálního rozhraní je velmi potřebná a jedinečná disciplína, která by měla být používána v kombinaci s interakčním designem a průmyslovým designem. Může to mít zásadní vliv na efektivitu a přitažlivost produktu, ale pro plné využití tohoto potenciálu nesmí být vizuální design odložen na později (jinak se nakonec pokusíte „namalovat prase“), ale raději jej vyrobit jeden z hlavních nástrojů pro uspokojování potřeb uživatelů a obchodu.

Vývoj návrhu vizuálního rozhraní vyžaduje řadu souvisejících dovedností. Konkrétní sada dovedností je určena vytvářeným produktem. K vytvoření atraktivních a použitelných uživatelských rozhraní musí návrhář rozhraní ovládat základní vizuální dovednosti – porozumění barvám, typografii, tvaru a kompozici – a vědět, jak je lze efektivně využít k předávání chování a informací a k vytváření nálady nebo pobídek. Vizuální návrh rozhraní pro záznam fyziologických reakcí. Návrhář rozhraní také vyžaduje hluboké porozumění principům interakce a idiomům rozhraní, které definují chování produktu.

V této kapitole probereme efektivní strategie pro návrh vizuálního rozhraní. Třetí část knihy poskytuje další informace o specifických interaktivních a rozhraních idiomech a principech.

Výtvarné umění, design vizuálního rozhraní a další designové disciplíny Umělci a vizuální designéři pracují se stejnými vizuálními médii. Oba musí být zruční a zkušení ve všem, co se těchto prostředků týká, ale jejich činnost slouží různým účelům. Cílem umělce je vytvořit objekt, jehož vzhled vzbuzuje estetickou odezvu. Výtvarné umění je tedy způsob sebevyjádření umělce k tématu, které ho (a někdy i společnost jako celek) emocionálně nebo intelektuálně zajímá. Umělec není vázán téměř žádnými omezeními. Čím neobvyklejší a originálnější je produkt jeho snažení, tím vyšší je jeho cena.

Designéři zase vytvářejí předměty pro jiné lidi. Zatímco moderní umělci se zabývají především sebevyjádřením, designéři, jak zdůrazňují Kevin Mullet a Darrel Sano ve své vynikající knize Designing Visual Interfaces, „se zabývají hledáním nejvhodnější reprezentace, která by předala nějaké konkrétní informace“. je komunikace.

Pokud jde o návrháře vizuálního rozhraní, hledají nejlepší reprezentaci, která komunikuje chování programu, který navrhují. Při přístupu orientovaném na cíl by se měli snažit prezentovat chování a informace jasným a užitečným způsobem, který podporuje marketingové cíle organizace a emocionální cíle postav.

Ujasněme si, že vizuální design uživatelských rozhraní nevylučuje estetické ohledy, ale takové ohledy by neměly překračovat funkční rámec. A přestože ve vizuální komunikaci vždy existuje subjektivita, snažíme se minimalizovat vliv vkusu. Zjistili jsme, že jasné vyjádření emocionálních a obchodních cílů uživatele je neocenitelné, i když jde o navrhování aspektů vizuálního rozhraní, které jsou přínosem pro značku, uživatelskou zkušenost a střevní reakce. Více o intuitivním zpracování jsme psali v kapitole 5.

Výtvarné umění, design vizuálního rozhraní a další disciplíny Grafický design a uživatelská rozhraní Grafický design je disciplína, které po mnoho let (asi do druhé poloviny 80. let minulého století) dominoval tisk, neboť design spočíval především v tvorbě obalů, reklamy, formátování dokumentů a zařizování bydlení. životní prostředí.

Grafici ze staré školy jsou s digitálními médii nepohodlní, protože nejsou zvyklí vytvářet grafiku na úrovni pixelů. Mladší generace grafických designérů byla vyškolena v „novém“ formátu a je poměrně úspěšná v aplikaci konceptů tradičního grafického designu do digitální grafiky.

Grafičtí designéři jsou obvykle velmi dobří ve vizuálních aspektech a méně naladěni na koncepty chování. softwarový produkt a interakci s ním. Talentovaní, digitálně důvtipní grafici vynikají ve vytváření informačně bohatých, esteticky příjemných a působivých rozhraní, která vidíme ve Windows XP a Mac OS X, stejně jako vizuálně bohatých rozhraní pro počítačové hry a aplikace pro spotřebitele. Jsou schopni vytvořit krásný a adekvátní vzhled rozhraní a navíc vnést do vzhledu a chování softwarového produktu firemní styl. Pro takové specialisty je design nebo design rozhraní za prvé tón, styl, kompozice, což jsou atributy značky, za druhé transparentnost a srozumitelnost informací a teprve potom (pokud na to vůbec dojde) přenos informace o chování prostřednictvím očekávaných schůzek (viz kapitola 13).

Návrháři vizuálních rozhraní potřebují stejné dovednosti jako digitální návrháři, ale musí mít také hluboké pochopení role chování. Jejich úsilí se silně zaměřuje na organizační aspekty designu a na to, jak sdělit chování produktu uživateli pomocí vizuálních kotev a očekávaných účelů.

Zaměřují se na soulad mezi vizuální strukturou rozhraní na jedné straně a logickou strukturou mentálního modelu uživatele a chování programu na straně druhé. Zabývají se také tím, jak sdělit stavy programu uživateli (řekněme, jak učinit „upravitelný“ stav odlišitelný od stavu „pouze pro čtení“) a co dělat s kognitivními aspekty uživatelského vnímání funkcí (např. kompozice prvků)., vizuální hierarchie, vztah figura-zem atd.).

334 Kapitola 14 Návrh vizuálního rozhraní Návrh vizuálních informací Návrháři informací nepracují na interaktivních prvcích, ale na vizualizaci dat, informací a navigačních pomůcek. V designu vizuálního rozhraní jsou jejich dovednosti obzvláště důležité, zejména pokud jde o datově náročné aplikace a některé webové stránky, kde obsah převažuje nad funkčností. Úsilí informačního designéra je zaměřeno na prezentaci dat ve formě, která usnadňuje správnou interpretaci. Výsledek je zde dosažen prostřednictvím kontroly vizuální hierarchie pomocí takových prostředků, jako je barva, tvar, umístění a měřítko.

Běžnými objekty informačního designu jsou všechny druhy grafů, tabulek a dalších způsobů zobrazování kvantitativních informací. Edward Tufte napsal několik převratných knih zabývajících se tímto tématem podrobně, včetně The Visual Display of Quantitative Information.

Průmyslový design Jakákoli diskuse o průmyslovém designu přesahuje rámec této knihy, ale rozšířené používání interaktivních zařízení a přenosných zařízení znamená, že role průmyslového designu při vytváření interaktivních produktů roste přímo před našima očima. Stejně jako v případě rozdílů v odborných dovednostech mezi grafickými designéry, designéry rozhraní a informačními designéry existuje rozdělení průmyslových designérů do dvou kategorií: někteří se specializují na vytváření krásných a užitečných forem, zatímco jiní mají talent v oblasti logické a ergonomický Prezentace fyzických ovládacích prvků způsobem, který odpovídá chování uživatele a odráží chování zařízení.

Vzhledem k tomu, že stále více zařízení je vybaveno plně funkčními displeji, je pro designéry interakcí, designéry rozhraní a produktové designéry stále důležitější spolupracovat na vytváření kompletních a efektivních řešení.

Stavební kameny návrhu vizuálního rozhraní Návrh rozhraní v podstatě spočívá v otázce, jak navrhnout a uspořádat vizuální prvky, aby jasně vyjadřovaly chování a prezentovaly informace. Každý prvek ve vizuální kompozici má řadu vlastností, jako je tvar a barva, a kombinace těchto vlastností dává prvku význam. Každá jednotlivá vlastnost sama o sobě má jen zřídka přirozený význam. Spíše se dá říct, že uživatel dostane možnost na to přijít

Stavební bloky návrhu vizuálního rozhraní

v rozhraní díky různými způsoby použití těchto vlastností na každý z prvků rozhraní. V případech, kdy dva objekty sdílejí vlastnosti, bude uživatel předpokládat, že objekty jsou příbuzné nebo podobné. Když uživatelé vidí, že vlastnosti se liší, předpokládají, že objekty spolu nesouvisí. Nejkontrastnější předměty přitahují naši pozornost silněji.

Dlouho předtím, než dítě začne rozumět řeči a mluvit, projevuje schopnost rozlišovat vizuálně kontrastní předměty. Dětský pořad Sesame Street spoléhá na tuto lidskou schopnost a žádá děti, aby si vybraly předmět, který je jiný nebo mimo skupinu. Vizuální design rozhraní vytváří význam podobným způsobem, což v praxi dává mnohem lepší výsledek než jen slova.

Při vytváření uživatelského rozhraní zvažte následující vizuální vlastnosti pro každý prvek nebo skupinu prvků. Chcete-li vytvořit užitečné a atraktivní uživatelské rozhraní, měli byste pečlivě pracovat s každou z těchto vlastností.

Tvar Jaký tvar má předmět? Je kulatý, čtvercový nebo podobný amébě? Forma je pro člověka hlavním znakem podstaty předmětu. Předměty poznáváme podle jejich obrysů; silueta ananasu s modrou srstí nám stále dává vědět, že se jedná o ananas. Rozlišení tvarů zároveň vyžaduje větší koncentraci pozornosti než analýza barvy nebo velikosti. Tvar proto není nejlepší vlastností pro vytvoření kontrastu, pokud chcete upoutat pozornost uživatele.

Slabost tvaru jako faktoru při rozpoznávání objektů se projeví při pohledu na provoz doku1 Systémy Mac OS X - Zde můžete omylem volat iTunes místo iDVD nebo iWeb místo iPhoto. Piktogramy mají různé tvary, ale mají podobné velikosti, barvy a textury.

Velikost Jak velký nebo malý je objekt vzhledem k ostatním objektům na obrazovce? Větší prvky přitahují více pozornosti, zvláště pokud jsou výrazně větší než okolní prvky. Velikost je uspořádaná a kvantifikovatelná proměnná, to znamená, že lidé automaticky řadí předměty podle velikosti a mají tendenci je posuzovat podle velikosti; pokud máme text ve čtyřech velikostech, předpokládá se, že relativní prvek speciálního rozhraní operačního systému Mac OS X, který

–  –  –

Důležitost textu roste s velikostí a že tučný text je důležitější než normální text.

Velikost je tedy užitečná vlastnost pro indikaci informačních hierarchií. Dostatečný rozdíl ve velikosti obvykle rychle upoutá pozornost člověka. Jacques Bertin ve svém klasickém díle The Semiology of Graphics popisuje velikost jako disociativní vlastnost. To znamená, že pokud je objekt velmi malý nebo velmi velký, je obtížné interpretovat další proměnné, jako je tvar.

Jas Jak tmavý nebo světlý je objekt? Pojmy tma a světlo mají samozřejmě smysl především v kontextu jasu pozadí. Na tmavém pozadí je tmavý text téměř neviditelný, na světlém naopak ostře vynikne. Stejně jako u velikosti může být hodnota jasu disociativní; Řekněme, že pokud je fotografie příliš tmavá nebo příliš světlá, není možné rozeznat, co na ní je. Lidé vnímají kontrast snadno a rychle, takže hodnota jasu se může stát dobrý nástroj upozornit na ty prvky, které je třeba zdůraznit. Hodnota jasu je také uspořádaná proměnná – řekněme, že tmavší (nižší jas) barvy na mapě lze snadno interpretovat jako reprezentující větší hloubky nebo větší hustotu obyvatelstva.

Barva Žlutá, červená nebo oranžová? Barevné rozdíly rychle přitahují pozornost. V některých profesních oborech mají barvy specifický význam a toho lze využít. Takže pro účetního znamená červená negativní výsledky a černá znamená pozitivní; Pro obchodníka s cennými papíry je modrá signálem nákupu a červená signálem prodeje (alespoň v USA to platí). Barvy získávají význam také díky sociálním kontextům, ve kterých vyrůstáme. Pro obyvatele Západu, který vyrostl kolem semaforů, červená znamená „stop“ a někdy dokonce „nebezpečí“, zatímco v Číně je červená barvou štěstí. Bílá barva na Západě je spojena s čistotou a mírem a v Asii - s pohřby a smrtí. Navíc, na rozdíl od velikosti nebo jasu, barva zpočátku nemá vlastnost řádu a není vyjádřena kvantitativně, proto není zdaleka ideální pro přenos informací tohoto druhu. Kromě toho byste neměli dělat z barvy jediný způsob přenosu informací, protože barvoslepost je poměrně běžná.

Používejte barvy s rozumem. Chcete-li vytvořit efektivní vizuální systém, což uživateli umožňuje identifikovat podobnosti a rozdíly

objektů, používejte omezenou sadu barev - duhový efekt přetěžuje vnímání uživatele a omezuje schopnost předávat mu informace. Navíc, pokud jde o barvu, mohou nastat konflikty mezi marketingovými potřebami a nápady na rozhraní, takže možná budete potřebovat talentovaného vizuálního designéra (a diplomata), aby se v této situaci zorientoval.

Směr Směřuje objekt nahoru, dolů nebo do stran? Směr je užitečný, když potřebujete předat informace o orientaci (nahoru nebo dolů, dopředu nebo dozadu). Pamatujte, že vnímání směru může být u některých tvarů a malých předmětů obtížné, proto je lepší jej použít jako sekundární vodítko. Pokud tedy chcete ukázat, že akciový trh klesl, můžete použít červenou šipku dolů.

Textura Drsná nebo hladká, jednotná nebo nerovnoměrná? Prvky zobrazené na obrazovce samozřejmě nemají skutečnou texturu, ale mohou vytvořit její vzhled. Textura je zřídka užitečná pro vyjádření rozdílu nebo upoutání pozornosti, protože vyžaduje hodně pozornosti k detailům. Kromě toho jsou pro přenos textury vyžadovány značné náklady na pixely. Přesto může být textura důležitým vodítkem: když vidíme oblast s texturou gumy, předpokládáme, že bychom měli zařízení uchopit za tuto oblast. Patky a hrboly na prvcích uživatelského rozhraní obvykle naznačují, že prvek lze přetáhnout, zatímco zkosení nebo stíny na tlačítku posilují pocit, že na něj lze kliknout.

Umístění Jak je prvek umístěn vzhledem k ostatním prvkům? Stejně jako velikost je umístění uspořádanou a kvantifikovatelnou proměnnou, a proto je užitečné pro zprostředkování hierarchie. Umístěním nejdůležitějších nebo nejžádanějších prvků vlevo nahoře využíváme pořadí vnímání prvků na obrazovce ve prospěch produktu. Layout může také sloužit jako prostředek k vytváření prostorových vztahů mezi objekty na obrazovce a objekty v reálném světě.

Principy návrhu vizuálního rozhraní Lidský mozek je skvělé zařízení pro rozpoznávání vzorů. Extrahuje význam z hustých proudů vizuálních informací, které nás bombardují doslova odevšad. Náš mozek se s tímto přívalem vstupů vyrovnává identifikací vizuálních vzorců a vytvářením systému priorit pro objekty, které pozorujeme. V konečném důsledku nám to umožňuje vědomě vnímat viditelný svět. Právě schopnost zrakového systému lidského mozku skládat části zorného pole do obrazů na základě vizuálních kotev (vodítek), která nám umožňuje zpracovávat vizuální informace tak rychle a efektivně. Představte si, že byste najednou museli ručně vypočítat trajektorii baseballu, abyste předpověděli, kam dopadne. Naše oči a mozek to společně dokážou ve zlomku sekundy, aniž bychom vyžadovali jakékoli vědomé úsilí z naší strany. Proces vytváření návrhu vizuálního rozhraní by se měl spoléhat na naše přirozené schopnosti vizuálního zpracování, aby bylo zajištěno, že informace budou sdělovány uživatelům a že budou zohledněny možnosti a funkce programu.

Jedna kapitola je zcela nedostatečná, aby plně pokryla téma návrhu vizuálního rozhraní. Existuje však řada důležitých zásad, které vám pomohou vytvořit rozhraní, která jsou co nejsrozumitelnější a lahodící oku. Jak již bylo zmíněno, Kevin Mallett a Darrell Sano poskytují vynikající a podrobná analýza tyto základní principy; Jen krátce probereme některé z nejdůležitějších principů návrhu vizuálního rozhraní.

Při vytváření grafických rozhraní byste měli:

Použijte vizuální vlastnosti k seskupení prvků a vytvoření jasné hierarchie;

Vytvořte vizuální strukturu a vytyčte logickou cestu na každé úrovni organizace;

Používejte obrázky, které jsou holistické, konzistentní a odpovídající kontextu;

Integrujte vizuální styl s funkčností smysluplným a konzistentním způsobem;

Vyhněte se vizuálnímu šumu a nepořádku.

Tyto principy a některé další obecné principy související s prací s textem a barvami v grafických uživatelských rozhraních jsou podrobně popsány v následujících částech.

Použití vizuálních vlastností k seskupení prvků a vytvoření jasné hierarchie Obvykle má smysl seskupovat logické sady funkčních nebo informačních prvků pomocí vizuálních vlastností, jako jsou barvy nebo prostorové charakteristiky. Následným aplikováním těchto vizuálních vlastností na vaše rozhraní můžete vytvářet vzory, které se vaši uživatelé rychle naučí rozpoznávat. Například ve Windows XP jsou všechna tlačítka konvexní, se zaoblenými rohy a textová pole obdélníkový, mírně promáčklý, s bílým podkladem a modrým lemováním. Díky systematickému použití tohoto obrázku není možné zaměnit tlačítko a vstupní pole, a to i přes některé podobnosti.

–  –  –

Při pohledu na jakoukoli sadu vizuálních prvků si uživatel nevědomě položí otázku: „Co je zde zajímavé?“ - a téměř okamžitě: "Jaké je spojení mezi těmito objekty?" Měli bychom se snažit zajistit, aby rozhraní obsahovalo odpověď na obě otázky.

Vytvoření hierarchie Na základě scénářů určete, které funkční a informační prvky mají uživatelé bezprostředně vnímat, které jsou sekundární a které jsou potřeba jen ve výjimečných situacích. Toto hodnocení slouží jako základ pro vizuální hierarchii.

Použijte barvu, sytost, kontrast, velikost a polohu k vytvoření viditelných rozdílů mezi úrovněmi hierarchie. Nejdůležitějšími prvky by měly být větší, jasnější barvy, sytější a kontrastnější. Měly by být umístěny nad jinými prvky nebo vyčnívat. Nejlepší je malovat zvýrazněné prvky v bohatých barvách. Méně důležité prvky by měly být méně syté, méně kontrastní, menší nebo plošší. Neutrální světlé barvy je přenesou do pozadí.

Nastavení těchto vlastností by samozřejmě mělo být provedeno opatrně. Neměli byste dělat nejdůležitější prvek obrovský, červený a vypouklý. Často stačí změnit pouze jednu z vlastností. Pokud zjistíte, že o pozornost uživatele soutěží dva prvky různé důležitosti, ten méně důležitý bude „natažený knot“ nejlepší řešení než se snažit "zapálit" je důležitější. Získáte tak více prostoru soustředit se na nejdůležitější prvky. (Zde je dobrá analogie: pokud jsou všechna slova na stránce napsána tučným červeným písmem, vynikne některé ze slov?) Vytvoření jasné vizuální hierarchie je jedním z nejsložitější úkoly v designu vizuálního rozhraní vyžaduje jeho řešení dovednost a talent. Kvalitní vizuální hierarchii uživatelé prakticky nepostřehnou, její absence a z toho plynoucí zmatek jsou ale okamžitě patrné.

340 Kapitola 14. Návrh vizuálního rozhraní Vizualizace vztahů Chcete-li vyjádřit vztahy prvků, znovu se obraťte na skripty. Je nutné identifikovat nejen prvky s podobnými funkcemi, ale také prvky, které se nejčastěji používají společně. Prvky, které jsou sdíleny, by měly být obecně seskupeny prostorově, aby se minimalizoval pohyb myši, zatímco prvky, které nelze použít společně, ale mají podobnou funkci, lze vizuálně seskupit, i když nejsou seskupeny prostorově.

Prostorové seskupování vysvětluje uživatelům, jak určité úkoly, data a nástroje souvisejí s ostatními, a může poskytnout rady ohledně správného sledu akcí. Dobré seskupování podle uspořádání bere v úvahu pořadí úkolů a dílčích úkolů a pohyb oka po obrazovce: zleva doprava pro západní jazyky a obecně shora dolů. (Tento bod probereme podrobněji o něco později.) Prvky umístěné vedle sebe bývají vzájemně propojeny. V mnoha rozhraních je takové seskupování implementováno příliš těžkopádně: všude, kam se podíváte, jsou rámce a někdy rám obsahuje pouze jeden nebo dva prvky. Často lze stejného efektu dosáhnout efektivněji prostřednictvím vzdáleností. Například na panelu nástrojů mohou být tlačítka od sebe oddělena čtyřmi pixely. Chcete-li izolovat příkazy souboru („otevřít“, „nový soubor“, „uložit“) do samostatné skupiny, stačí zvětšit vzdálenost mezi tlačítky příkazů souboru a sousední skupinou tlačítek na osm pixelů.

Prvky oddělené velkými vzdálenostmi lze seskupit pomocí společných vizuálních vlastností a vytvořit tak vzor, ​​který se nakonec stane pro uživatele smysluplným. Použití hlasitosti k vytvoření pocitu fyzického očekávaného cíle je tedy pravděpodobně nejvíce účinná metoda Oddělte ovládací prvky od dat a prvků pozadí (Více o očekávaných přiřazeních viz kapitola 13.) Tato strategie se často používá při kreslení ikon. Mac OS X používá jasné barvy pro ikony aplikací a matné barvy pro zřídka používané obslužné programy.

Zelené tlačítko pro spuštění zařízení může být doprovázeno podobnou animovanou zelenou ikonou indikující, že zařízení funguje normálně.

Jakmile se rozhodnete pro skupiny a vizuální charakteristiky těchto skupin, začněte upravovat kontrast mezi skupinami – zvýraznění nebo naopak stínování skupin podle jejich důležitosti v aktuálním kontextu. Zdůrazněte rozdíly mezi skupinami, ale minimalizujte rozdíly mezi členy stejné skupiny.

Principy návrhu vizuálního rozhraní

Test šilhání Ano dobrá cesta Zajistit, aby váš vizuální návrh efektivně využíval hierarchii a vztahy, je technika, kterou návrháři nazývají test šilhání. Zavřete jedno oko a druhým přimhouřeným okem se podívejte na obrazovku. Věnujte pozornost tomu, které prvky příliš vyčnívají, které jsou nejasné a které se spojily ve skupinách. Tento postup často odhalí dříve nepovšimnuté problémy ve složení rozhraní.

Vytvořte vizuální strukturu a vytvořte logickou cestu na každé úrovni organizace Rozhraní lze pohodlně chápat tak, že se skládají z vizuálních a interaktivních prvků, které jsou seskupeny pomocí panelů, které lze zase seskupit do obrazovek, pohledů nebo stránek. Takové seskupení, jak je uvedeno výše, může být provedeno prostřednictvím prostorové distribuce nebo prostřednictvím společných vizuálních vlastností. Proprietární aplikace může mít více vrstev těchto struktur, takže je důležité udržovat transparentní vizuální strukturu, aby uživatel mohl snadno přecházet z jedné části rozhraní do druhé, aby vyhovovaly jeho pracovnímu postupu.

Ve zbývající části této části popíšeme řadu důležitých vlastností, které vám pomohou definovat jasnou vizuální strukturu.

Zarovnání a mřížka Zarovnání vizuálních prvků je jednou z hlavních technik, která umožňuje designérovi prezentovat produkt uživatelům systematickým a uspořádaným způsobem. Seskupené prvky by měly být zarovnány vodorovně i svisle (obrázek 14.1.) Obecně by každý prvek na obrazovce měl být zarovnán s co největším počtem dalších prvků. Odmítnutí sladit dva prvky nebo dvě skupiny prvků musí být vědomé: to je přípustné pouze k dosažení specifického oddělovacího účinku. Kromě jiného by měli návrháři věnovat pozornost:

Zarovnání podpisů. Štítky pro kontroly umístěné na sobě musí být zarovnány se společným okrajem. Pokud jsou všechny vaše podpisy zhruba stejně dlouhé, zarovnáte je doleva, aby se uživatelům snadněji četly, než kdyby byly zarovnány doprava.

Zarovnání v rámci skupiny funkčních prvků. Skupina souvisejících zaškrtávacích políček, výběrů nebo textových polí musí sledovat zarovnání standardní mřížky.

342 Kapitola 14. Návrh vizuálního rozhraní Obr. 14.1. Adobe Lightroom velmi efektivně využívá zarovnání kompoziční mřížky. Text, funkční prvky a skupiny ovládacích prvků jsou velmi jasně zarovnány na mřížce s pevnými kroky. Je třeba poznamenat, že převrácení ovládacích prvků a popisků prvků skupiny doprava může zabránit jejich rychlému čtení

Zarovnání prvků umístěných do skupin a panelů.

Skupiny ovládacích prvků a dalších objektů na obrazovce, pokud je to možné, by měly být přichyceny ke stejné mřížce.

Mřížka je jedním z nejmocnějších nástrojů vizuálního designéra, který si rychle získal oblibu v letech po druhé světové válce díky švýcarským tiskárnám. Mřížka poskytuje jednotnost a konzistenci ve struktuře kompozice, což je zvláště důležité při návrhu rozhraní s několika úrovněmi vizuální nebo funkční složitosti. Jakmile návrháři interakcí určí celkovou infrastrukturu aplikace a její prvky uživatelského rozhraní (viz kapitola 7), musí návrháři rozhraní uspořádat kompozici do struktury podobné mřížce, která vhodně zvýrazní důležité prvky a struktury a ponechá životní prostor méně důležitým prvkům. a prvky nižší úrovně.

Mřížka obvykle rozděluje obrazovku na několik velkých horizontálních a vertikálních oblastí (obr. 14.2.) Dobře navržený

Principy návrhu vizuálního rozhraní

Rýže. 14.2. V tomto příkladu kompoziční mřížka řídí velikost a polohu různých oblastí obrazovky webu. Zajišťuje konzistenci mezi různými obrazovkami, snižuje jak práci designéra při vytváření kompozice, tak úsilí, které musí uživatel vynaložit, aby přečetl a pochopil obsah obrazovky. Koupelnová mřížka využívá koncept rozteče, tedy minimální vzdálenosti mezi prvky . Pokud je například vzdálenost mřížky čtyři pixely, všechny vzdálenosti mezi prvky a skupinami musí být násobkem čtyř.

V ideálním případě by mřížka měla také definovat proporce různých oblastí obrazovky. Takové poměry se obvykle vyjadřují jako zlomky. Mezi běžné zlomky patří slavný „zlatý poměr“ (označovaný řeckým písmenem „phi“ a rovný přibližně 1,62), který se často vyskytuje v přírodě a je považován za obzvláště příjemný pro lidské oko; převrácená hodnota druhé odmocniny ze dvou (přibližně 1:1,41), která je základem mezinárodního standardu pro velikost papíru (například list A4); a poměr 4:3 je poměr stran většiny počítačových displejů.

Samozřejmě je třeba hledat rovnováhu mezi idealizovanými geometrickými vztahy a specifickými prostorovými potřebami funkcí a informací prezentovaných na obrazovce.

Dokonalá implementace zlatého řezu nijak nezlepší čitelnost obrazovky, na které jsou předměty přeplněné dohromady.

Dobrá kompoziční mřížka je modulární, to znamená, že je dostatečně flexibilní, aby pojala všechny potřebné variace a zároveň zachovala konzistenci struktury, kdekoli je to možné. Stejně jako u mnoha jiných problémů s designem je i zde důležitá jednoduchost a konzistence. Pokud dvě oblasti na obrazovce vyžadují přibližně stejné množství místa, přiřaďte jim přesně stejnou velikost. Pokud dvě oblasti vyžadují různý prostor, výrazně je odlište velikostí. Pokud je rozteč mřížky příliš malá, bude mřížka obtížně vnímatelná kvůli její složitosti. Malé rozdíly mohou způsobit, že se uživatel bude cítit nestabilně (ačkoli je nepravděpodobné, že bude schopen rozpoznat důvod tohoto pocitu) a nakonec zničit obrovský potenciál mesh aplikace.

Rozhodnutí o kompozici musí být v jistém smyslu nekompromisní: „téměř čtverec“ se k ničemu nehodí; „téměř jeden ze dvou“ – také. Pokud se kompozice na obrazovce blíží její prosté zlomkové části – polovině, třetině nebo jedné pětině – upravte kompozici tak, aby zabírala přesně polovinu, jednu třetinu nebo jednu pětinu obrazovky. Použijte přesné, jasné, jasně definované proporce.

Použití mřížky v návrhu vizuálního rozhraní poskytuje řadu výhod:

Snadnost použití. Vzhledem k tomu, že mřížka vytváří konzistentní rozvržení prvků, uživatelé se rychle stanou zručnými v hledání toho, co v rozhraní potřebují. Pokud je název obrazovky vždy na stejném místě, uživatel nemusí přemýšlet ani se rozhlížet po obrazovce, aby jej našel. Důslednost v uspořádání prvků a volba vzdáleností mezi nimi usnadňuje fungování mechanismů vizuálního zpracování v lidském mozku. Dobře navržená mřížka výrazně zjednodušuje zážitek ze sledování obrazovky.

Estetická přitažlivost. Pečlivým použitím mřížky a výběrem vhodných vztahů mezi nimi různé oblasti Na obrazovce může designér vytvořit pocit pořádku, který je pro uživatele pohodlný a povzbuzuje je k interakci s produktem.

Účinnost. Standardizace kompozice snižuje úsilí spojené s vytvářením vysoce kvalitních vizuálních rozhraní. Věříme, že vytvoření sítě a její začlenění do procesu na začátku procesu detailování konstrukční řešení snižuje počet iterací a akcí pro jemné doladění rozhraní. Dobrá, jasně definovaná mřížka pokládá základ pro snadno upravitelný a rozšiřitelný design, který umožňuje návrhářům najít dobrá kompoziční řešení, když je třeba provést změny.

Vytvoření logické cesty Kompozice by měla nejen přesně sledovat mřížku, ale také strukturovat účinnou logickou cestu rozhraním pro uživatele s přihlédnutím ke skutečnosti, že (v západních jazycích) se oko pohybuje shora dolů a zleva doprava. (obr. 14.3).

Dobrá logická trasa Nevhodná logická trasa Pohyb očí a trasa Vše roztroušeno po obrazovce v rozhraní se shoduje Obr. 14.3. Pohyb pohledu přes rozhraní by měl vytvářet logickou cestu, která uživatelům umožňuje efektivně a úspěšně řešit problémy a dosahovat cílů Symetrie a rovnováha Symetrie je užitečným prostředkem organizace rozhraní z hlediska dosažení vizuální rovnováhy. Asymetrická rozhraní obvykle vypadají, jako by se na jedné straně měla převrhnout. Zkušení designéři mohou dosáhnout asymetrické rovnováhy manipulací s vizuální váhou jednotlivých prvků, podobně jako lze balancování dosáhnout umístěním dětí různé hmotnosti na opačné konce. V kontextu uživatelského rozhraní je obtížné dosáhnout asymetrického designu kvůli vysokým nákladům na prostor na obrazovce. Test šilhání umožňuje zkontrolovat rovnováhu rozhraní.

V rozhraních se nejčastěji používají dva typy symetrie: vertikální osová symetrie (symetrie vzhledem k svislá čára, vedená středem skupiny prvků) a diagonální osová symetrie (symetrie kolem úhlopříčky). Většina dialogových oken obsahuje jeden z těchto typů symetrie, nejčastěji diagonální (obrázek 14.4).

Monopolní aplikace obvykle postrádají symetrii na nejvyšší úrovni (dosahují rovnováhy prostřednictvím dobré sítě), ale dobře navržené prvky rozhraní v takových aplikacích jsou téměř jistě do určité míry symetrické (obrázek 14.5).

346 Kapitola 14. Návrh vizuálního rozhraní Obr. 14.4. Diagonální symetrie uvnitř dialogového okna Odrážky a číslování aplikace Microsoft Word. Osa symetrie probíhá od levého dolního rohu k pravému hornímu Obr. 14.5. Vertikální symetrie v paletě nástrojů Macromedia Fireworks Principy návrhu vizuálního rozhraní Používejte obrázky, které jsou soudržné, konzistentní a relevantní ke kontextu Použití ikon a dalších vizuálních prvků může uživateli pomoci pochopit rozhraní nebo naopak způsobit podráždění, zmatek, nebo dokonce urážku, pokud jsou ikony vybrány špatně. Je velmi důležité, aby návrháři pochopili, jakou zprávu by měl program uživateli sdělit a jakou zprávu očekává, že obdrží. Dobré porozumění postavám a jejich mentálním modelům obvykle poskytuje pevný základ pro jazyky textového a vizuálního rozhraní. Svou roli hrají i kulturní aspekty. Návrháři by si měli uvědomit, že barva má v různých kulturách různý význam (červená se v Číně nepovažuje za varovnou barvu), stejně jako gesta (v Turecku je palec nahoru považován za vysoce urážlivé gesto) a symboly (osmiúhelník předepisuje zastávku v ve Spojených státech, ale v několika dalších zemích). Kromě toho byste měli vědět barevné kódy, přijaté v různých oblastech lidské činnosti. Například v nemocnicích žlutá představuje záření, zatímco červená se obvykle používá v situacích ohrožujících život. Na burzovním terminálu je červená signálem k prodeji. Než začnete, ujistěte se, že rozumíte vizuálnímu jazyku odvětví a kultury vašich uživatelů.

Vizuální prvky by měly být součástí globálního vizuálního jazyka, který spojuje komponenty rozhraní. To znamená, že logicky podobné prvky by měly sdílet společné vizuální vlastnosti – jako je poloha, velikost, tloušťka čáry a celkový styl – s rozdíly pouze v tom, co zdůrazňuje jejich význam. Cílem je vytvořit koherentní systém prvků. Rozhraní, které tohoto cíle dosahuje, se zdá bezchybné: ani jeden prvek nevypadá, jako by byl přidán na poslední chvíli.

Ikony mohou kromě své funkční hodnoty hrát významnou roli při sdělování atributů značky. Jasné, kreslené ikony mohou zasáhnout místo, pokud navrhujete webové stránky pro děti, zatímco jemné, tlumené ikony budou vhodnější pro obchodní aplikace. Bez ohledu na to, jaký styl zvolíte, zachovejte kontinuitu – pokud jsou na některých ikonách čáry tlusté a černé se zaoblenými rohy a na jiných tenké přerušované čáry, vizuální styl se „rozpadne“.

Design a kreslení piktogramů je zcela samostatný obor. Vytváření jasných obrázků s nízkým rozlišením vyžaduje značný čas a praxi – tento úkol je nejlépe delegovat na zkušené designéry. Piktogramy jsou složité téma, kterému je třeba porozumět, proto zde jen zdůrazníme několik důležitých klíčových bodů. Pro ty čtenáře, kteří se chtějí dozvědět více o užitečných ikonách, důrazně odkazujeme na knihu Williama Hortona The Icon Book. Příklady v této knize se mohou zdát zastaralé, ale základní principy jsou stále aktuální.

Funkční ikony Navrhování ikon, které představují funkce nebo operace prováděné s objekty, je náročné, ale zábavné.

Hlavní problém spočívá v reprezentaci abstraktních pojmů v piktografickém, vizuálním jazyce. V takových případech je lepší spoléhat se na idiomy, než hledat obrázky, kterým nikdo nebude rozumět, a poskytnout jim nápovědu (viz kapitola 23) nebo popisky.

Pro zřejmé a specifické funkce dodržujte následující pravidla:

Umístěte na ikonu funkci i objekt, aby uživatel ikonu snáze pochopil. Sloveso v kombinaci s podstatným jménem je srozumitelnější než sloveso samotné. Pokud si například představíte příkaz Vystřihnout jako dokument s křížkem, bude to jasnější než metaforický obrázek nůžek.

Pozor na metafory a myšlenky, které nemusí mít v očích cílového publika zamýšlený význam. Například palec nahoru v západní kultuře znamená „ok“ a může se zdát jako vhodný piktogram k označení pozitivní reakce, ale na Blízkém východě a v jiných kulturách je toto gesto urážlivé – v jakékoli aplikaci určené pro globální komunikaci. je třeba se vyhnout.

Vizuálně seskupujte související funkce, buď prostorově, nebo, pokud to není možné, pomocí barev a dalších vizuálních pomůcek.

Vytvářejte jednoduché ikony; vyhnout se zbytečným detailům.

Znovu používejte prvky, kdykoli je to možné, aby se je uživatel jednou provždy naučil.

Symboly jako odraz předmětů Tvorba pro různé typy objektů v rozhraní, jedinečné symboly také pomáhají uživateli lépe porozumět rozhraní. Takové symboly nemusí být vždy obrazné nebo metaforické – což znamená, že jsou často idiomatické (síla idiomů je podrobně popsána v kapitole 13). Takové vizuální značky umožňují uživateli procházet mezi objekty rychleji než jen štítky. Chcete-li vytvořit spojení mezi symbolem a objektem, použijte symbol vždy, když se objekt objeví na obrazovce.

Principy návrhu vizuálního rozhraní

–  –  –

Návrhář rozhraní musí také zajistit, aby symboly představující různé typy objektů byly vizuálně odlišné. Identifikovat konkrétní ikonu na obrazovce plné téměř identických ikon je stejně obtížné jako najít konkrétní slovo na obrazovce plné textu. Je velmi důležité vizuálně odlišit (kontrastovat) objekty s různým chováním, včetně různých možností ovládacích prvků, jako jsou tlačítka, posuvníky a zaškrtávací políčka.

Vizualizace ikon a symbolů S tím, jak se rozšiřují grafické možnosti barevných displejů, roste i pokušení vykreslovat ikony a symboly ve stále větších detailech a dosáhnout téměř fotorealismu. Tento trend však v konečném důsledku nenaplňuje cíle uživatele, zejména v podnikových aplikacích. Piktogramy by měly zůstat jednoduché a schematické, s minimem barev a stínování a měly by si zachovat svou skromnou velikost. V Windows Vista a Mac OS X byly podniknuty kroky k podrobnější prezentaci ikon. I když takové ikony vypadají efektně, nezaslouženě na sebe přitahují pozornost, a když jsou malé, špatně se zobrazují – tedy buď zabírají příliš drahé místo na obrazovce, nebo jsou nečitelné. Navíc nutí designéra, aby zanedbával vizuální soudržnost prvků v rozhraní, protože jen velmi málo funkcí (většinou těch, které se týkají hardwaru) může být adekvátně reprezentováno specifickými fotorealistickými obrázky. Fotografické piktogramy jsou jako text, pouze na stroji velkými písmeny; rozdíly mezi nimi nejsou jasné a je snadné se splést. Uživatelé nejsnáze rozeznají ikony podle jejich tvaru, ale v případě Mac OS X jsou obrysy všech ikon stejně rozmazané. Rozhraní Mac OS X je plné fotorealismu, který rozptyluje uživatele a nepracuje v jejich prospěch (obrázek 14.6).

Vizualizace chování Místo toho, abyste výsledky funkcí v rozhraní popisovali pouze slovy (nebo v horším případě neuváděli žádné popisy), ukažte uživateli, jaké výsledky budou. K tomuto účelu použijte vizuální prvky. Tato technika by neměla být zaměňována s použitím ikon na ovládacích prvcích, které představují očekávaná přiřazení. Kromě textu popisujícího parametr nebo stav zahrňte obrázek nebo diagram popisující chování. Přestože vizualizace zpravidla 350 Kapitola 14. Návrh vizuálního rozhraní Obr. 14.6. Fotorealistické ikony v Mac OS X. Tato úroveň detailů pouze odvádí pozornost od funkčních a informačních prvků. Navíc, pokud je v některých případech oprávněné detailovat objekty známé uživateli, jaký smysl mají detailní obrázky neznámých objektů nebo abstraktních pojmů (jako je počítačová síť)? Kolik uživatelů vidělo „nahé“ HDD(zcela vpravo)? V konečném důsledku musí uživatel procházet štítky, aby pochopil, jaké ikony potřebují. Nevyžaduje často další místo na obrazovce, ale jeho schopnost jasně vyjádřit význam stojí za pixely, které na něj utratí. Microsoft učinil tento objev před několika lety a od té doby dialogová okna(zejména v aplikaci Microsoft Word) jsou plné vizuálních prvků, které doplňují textové popisy ovládacích prvků. Fotoshop a další grafické aplikace již dlouho ukazují výsledky operací uživateli ve formě náhledů.

Vizuálně sdělujte uživatelům funkci a chování.

Dialogové okno Náhled aplikace Microsoft Word (obrázek 14.7) ukazuje, jak bude vytištěný dokument vypadat na základě nastavení velikosti papíru a okrajů. Mnoho uživatelů má problém pochopit, jak vypadá 1,2palcový levý okraj, ale Náhled jim to jasně ukazuje. Microsoft mohl jít ještě dále a poskytnout přímý vstup v tomto dialogovém okně. Uživatelé pak mohli přetáhnout okraj levého okraje a vidět, jak se změní číselná hodnota v odpovídajícím čítači. Pole pro zadání slova spojené s takovým ovládacím prvkem zůstává důležité a nelze jej zcela nahradit vizuálním prvkem. Vstupní pole zobrazuje přesné hodnoty parametrů a vizuální prvek zobrazuje konečný vzhled stránky.

Integrujte vizuální styl s funkčností smysluplným a konzistentním způsobem Když se návrháři rozhraní rozhodnou přijmout konkrétní styl rozhraní, mělo by to být provedeno globálně. Každý aspekt rozhraní by měl být analyzován z hlediska konzistence stylu; nelze omezit jen na nějaký vizuální

Principy návrhu vizuálního rozhraní

Rýže. 14.7. Funkce náhled v aplikaci Microsoft Word jasně demonstruje vizuální vyjádření funkcí aplikace. Tato funkce nevyžaduje, aby se uživatel pokoušel představit si, jak by vypadal 1,2palcový okraj, ale stále usnadňuje pochopení toho, jaké výsledky přináší hodnota každého prvku. Nechcete, aby rozhraní vypadalo, jako by ho někdo narychlo překryl vrstvou barvy? Je nutné zajistit, aby funkční aspekty GUI programy jsou v naprostém souladu s celkovým vizuálním stylem vaší produktové značky. Chování programu je součástí značky a uživatelská zkušenost s produktem by měla odrážet rovnováhu formy, obsahu a chování.

Forma a funkce Pro mnoho zúčastněných stran (vlastníků projektu) je vizuální styl velmi atraktivní oblastí, ale stylizované prvky rozhraní by měly být neustále pod kontrolou – zejména při navrhování exkluzivních aplikací. Hnací silou při vývoji vizuálního stylu by měl být základní tvar, chování a zamýšlený účel (viz kapitola 13), zatímco estetická hlediska by neměla narušovat komunikaci významu v rozhraní a interakci uživatele s produktem.

352 Kapitola 14. Návrh vizuálního rozhraní Vzdělávací a zábavní aplikace (zejména zaměřené na děti) však ponechávají více příležitostí pro experimentování se stylem. V takových případech jak vizuální dojem vytvořený rozhraním, tak obsah aplikace ovlivňují požitek uživatele z interakce s aplikací; to slouží jako silný argument ve prospěch užšího propojení mezi designem ovládacích prvků a obsahem. Ale i zde je třeba mít na paměti zamýšlený účel, který uživatelům umožní rychlý přístup k informacím.

Značka, zákaznická zkušenost a uživatelská zkušenost Nejúspěšnější společnosti investují značné prostředky do budování a udržování svých značek. Společnost, která pěstuje vlastní značku, může diktovat ceny svých produktů a zároveň morálně odměňovat věrnost spotřebitelů. Značka je ukazatelem vysoké kvality produktu a předpokládá, že ji uživatel bude preferovat na základě svého vkusu.

V nejjednodušším slova smyslu je značka součtem všech interakcí lidí s konkrétní společností. Vzhledem k tomu, že k interakcím stále více dochází prostřednictvím technologických kanálů, není překvapivé, že snahy firem o vytvoření „značkových“ rozhraní jsou větší než kdy jindy. Pokud je cílem konzistentní a pozitivní interakce se spotřebitelem, pak verbální, vizuální a behaviorální sdělení značky musí být konzistentní a konzistentní. Pokud se například spotřebitel pokusí zjistit ceny za službu DSL ve své oblasti a zjistí, že webové stránky telefonní společnosti neobsahují užitečné informace (i po značné snaze je najít), odchází s jistotou, že samotná společnost – Provozovna je hrubý a nepříjemný. Žádný design na světě vás před tím nezachrání. Totéž platí pro ostatní kanály: pokud člověk nedostane odpovědi, které potřebuje, pak nezáleží na tom, že počítačový hlas zní přátelsky, systém přijímá hlasový vstup a zástupce zákaznického servisu ukončí rozhovor přáním všeho nejlepšího.

Zatímco společnosti vědí o zkušenostech se značkou napříč tradičními marketingovými a komunikačními kanály již nějakou dobu, mnohé z nich teprve začínají uvažovat o značkách z hlediska uživatelské zkušenosti. Abychom porozuměli zkušenosti se značkou v kontextu uživatelské zkušenosti, je užitečné podívat se na ni ze dvou hledisek: první dojmy a dlouhodobé vztahy.

Stejně jako v mezilidských vztazích je první dojem z uživatelského rozhraní nesmírně důležitý. Prvních pět minut komunikace položí základ pro dlouhodobý vztah. Aby byla tato první pětiminutová komunikace úspěšná, použijte

Principy návrhu vizuálního rozhraní

Rozhraní těla musí jasně a rychle prezentovat značku. Vizuální design obvykle hraje kritickou roli při vytváření prvního dojmu – především prostřednictvím snímků a barev. Výběrem správné palety barev a stylu obrázků pro rozhraní zaměřené na značku budete o krok blíže k použití své značky k vytvoření pozitivního prvního dojmu.

Podobné práce:

„magie, která přežila dodnes! Magie je věda a umění, ve kterém pokrok nestojí. Kniha je příkladem toho, jak vypadají starověké rituály, aby se daly aplikovat i dnes. Existuje vývoj, ale podstata vždy zůstává! Toto je kniha s mnoha přečtením a vynikající reference, která se vám bude hodit po celou dobu vaší praxe. Druhý..."

„Vladimir Petrovič Morozov Umění a věda komunikace: neverbální komunikace Od editora Kniha nabízená čtenářům je druhým, přepracovaným a rozšířeným vydáním autorovy dříve vydané monografie „Neverbální komunikace v systému řečové komunikace. Psychofyziologické a psychoakustické základy.“ - M.: Nakladatelství. IPRAN, 1998. Autor monografie profesor V.P. Morozov je v kruzích výzkumníků řeči dobře známý jako autoritativní specialista na neverbální a zejména...“

„Roman Ingarden VÝZKUM ESTETIKA Překlad z polštiny A. Ermilova a B. Fedorova Nakladatelství zahraniční literatury, Moskva 1962 OBSAH: Předmluva. 5 [nedošlo při digitalizaci] Dvourozměrnost struktury literárního díla. 2 Náčrtovost literárního díla. 40 Literární dílo a jeho specifikace. 72 O různém chápání pravdivosti („pravdy“) v uměleckém díle. 92 O odlišném poznání literárního díla. 114 Estetický zážitek...“

„Alexander Fedorov „Pro a proti“: Kino a škola Tato populárně-vědecká publikace analyzuje praktické zkušenosti mnohaleté práce na katedře školního filmu. Toto je rozšířená verze (s dodatky v roce 2002) knihy „Pro“ a „proti“, vydané Moskevským nakladatelstvím VBPK v roce 1987. Autor je doktor filozofie, profesor, prezident Asociace filmové výchovy a mediální pedagogiky Ruska, řádný člen Ruské akademie kinematografických umění a věd Alexandr Viktorovič Fedorov. 1. Před...“

“ASTRACHÁNSKÝ ZPRAVODAJ EKOLOGICKÉHO VZDĚLÁVÁNÍ č. 2 (32) 2015. s. 74-89 MDT 639.212.053.7:639.271.2 (262.81) VÝZNAM PŘIROZENÉHO TŘENÍ A UMĚLÉHO ŠTURCHETRIE PŘI TVORBĚ REZERVACÍ JESETERŮ KASPICKÉHO MOŘE Rozpočet "Federální výzkumný ústav Rybí státní ústav Raisa Pavlovna Khodorevskaya" No. [e-mail chráněný] Líhně jeseterů, trdliště, migrace na tření, beluga, ruský jeseter, hvězdicový jeseter, vztah mezi přirozeným a...“

„Federální státní rozpočtová vzdělávací instituce vyššího odborného vzdělávání „Čeljabinská státní akademie kultury a umění“ ZPRAVODAJ MUZEA Číslo 18 Čeljabinsk MDT 069 BBK 79.1 M89 Redakční rada: Aleshko E. N., Grevtseva G. Ya., Lushnikova A. N. V. V. V. Perchik L. S., Bulletin muzea A. N. Terekhova / Čeljabinská státní akademie kultury a umění; komp. N. V. Ovchinnikovová. – Čeljabinsk, 2015. – Vydání. 18. – 184 s., barev. na..."

“OBSAH ÚVOD......... 5 VÝFUKOVÝ VENTIL JAKO FUNKČNÍ PRVEK 1. ZAŘÍZENÍ NA UMĚLÉ VĚTRÁNÍ. 11 Klasifikace ventilátorů 1.1....... 11 Obecné schéma konstrukce ventilátorů 1.2...... 14 Analýza typů provedení výdechového ventilu 1.3.. 15 Obecné požadavky k výdechovému ventilu na základě jeho analýzy 1.4. funkční účel...... 19 Funkce udržování spontánní dechové aktivity 1.4.1. pacient ......... 19..."

"S. Garanina Sergej Michajlovič Prokudin-Gorskij SERGEJ MICHAJLOVIČ SERGEJ MICHAILOVIČ PROKUDIN-GORSKY PROKUDIN-GORSKY Svetlana Garanina Svetlana Garanina Profesorka katedry knižních věd Profesorka katedry knižních věd Moskevské státní univerzity kultury a umění1 kultury a umění Prokudina Gorského S.M. . S. M. Prokudin-Gorskij. Studiový portrét. Londýn. Studiový portrét. Londýn. 1910 nebo 1920. Z rodinného archivu. 1910 nebo 1920. Z..."

„Obsah 1. Božská duše má bezmeznou svobodu (úvod)...2 2. Koruna zpěváka, trnová koruna (stránky života a tvůrčí cesty)...5 2.1. Očima současníků..9 2.2. Básník válečník..10 2.3. Přijde krvavá hodina a já padnu.(tragický souboj).11 3. Souzvuk slov živých..12 3.1. Texty písní..14 3.1.1. "Borodino"..17 3.2. Básně..17 3.3. Próza..18 3.3.1. Román „Hrdina naší doby“.19 4. Lermontovovy motivy v dílech spisovatelů.22 5. Lermontovův večer (scénáře, vývoj).23 6. Hudební...“

„Seznam volného obsahu č. Volné sbírky Přístup do fondu Geografie Nakladatelství Lan EBS Nakladatelství Lan. Přístup do sbírky Uměleckohistorického nakladatelství Lan EBS Publishing House Lan. Přístup ke správné kolekci. Právní vědy Nakladatelství Lan Nakladatelství EBS Lan. Přístup do sbírky Psychologie. Pedagogické nakladatelství Lan Nakladatelství EBS Lan. Přístup do fondu Společenskovědního a humanitního nakladatelství Lan Nakladatelství EBS Lan. Přístup ke sbírce lingvistiky a...”

"D. J. Schwartz The Art of Thinking Big The Magic of Thinking Big Vydavatel: Potpourri, 2007 Paperback, 304 s. ISBN 978-985-15-0037-2, 0-671-64678 Náklad: 6000 výtisků. LdGray Formát: 84x108/ Od nakladatelství Kniha The Art of Thinking Big pomohla milionům lidí zlepšit jejich život. Jeho autor, Dr. David Schwartz, jeden z nejznámějších odborníků v oblasti motivace, vám pomůže lépe pracovat, lépe hospodařit a vydělávat peníze. více peněz a co je nejdůležitější, je cítit..."

„Městská instituce dalšího vzdělávání „Dětská umělecká škola č. 3“ okresu Lyubertsy Moskevské oblasti SEBEZKOUŠENÍ v oblasti činnosti pro rok 2014 V souladu s federálním zákonem „O vzdělávání v Ruská Federace"(ve znění ze dne 23. července 2013). Část 1 Čl. 29. Část 2 Čl. 30, postup pro provádění samovyšetření vzdělávací organizací, schválený nařízením Ministerstva školství a vědy Ruské federace ze dne 14. června 2013 č. 462, nařízením ministerstva školství a vědy Ruské federace ze dne 10. prosince 2014. č. 1324, MU DO "Dětská umělecká škola..."

„VEŘEJNÁ ZPRÁVA MBDOU č. 79 Oddíl I. Obecná charakteristika zařízení 1. Typ, typ, status: Městské rozpočtové předškolní vzdělávací zařízení, mateřská škola obecně rozvojového typu s přednostním prováděním činností v jedné z oblastí rozvoje dítěte č. 79 2. Licence na vzdělávací aktivity Series RO č. 042931 Registrační číslo 2339 ze dne 26. března 2012 Doba platnosti: neomezeně 3. Místo, výhodnost dopravního místa Adresa sídla: 426063 UR...”

„Abstrakt Tato diplomová práce je věnována optimalizaci oblasti pokrytí digitálním televizním a rozhlasovým vysíláním v Aktau. Závěrečná práce pokrývá následující témata: popis norem digitální televize(DVB, ATSC a ISDB), popis jednofrekvenční sítě a výběr zařízení pro vybudování televizní sítě Byly provedeny následující výpočty: výpočet intenzity pole analytickou metodou; výpočet intenzity pole z křivek šíření; výpočet Fresnelovy zóny; studie poloměru oblasti pokrytí;..."

"Ministerstvo kultury Ruské federace Federální státní rozpočtová vzdělávací instituce vyššího odborného vzdělávání "Čeljabinská státní akademie kultury a umění" ZPRÁVA o sebezkoumání Federální státní rozpočtové vzdělávací instituce vyššího odborného vzdělávání "Čeljabinská státní akademie kultury a umění" " (k 1. dubnu 2015) Čeljabinsk 2015 Obsah 1. Obecné informace o vzdělávání..."

“Charles William Morris Základy teorie znaků Nemo autem vereri debet ne characterum contemplatio nos a rebus abducat, imo contra ad intima rerum ducet. Gottfried Leibniz (Nikdo by se neměl bát, že nás pozorování znaků odvede od věcí: naopak nás vede k podstatě věcí. - Gottfried Leibniz (lat.)) I. ÚVOD. SEMIOTIKA A VĚDA Lidé jsou nejvyšší ze živých bytostí, které používají znamení. Samozřejmě nejen lidé, ale i zvířata reagují na určité věci jako na znamení něčeho...“

“ISSN 1997-4558 PEDAGOGIKA UMĚNÍ http://www.art-education.ru/AE-magazine č. 4, 2014 VNÍMÁNÍ DĚL VÝTVARNÉHO UMĚNÍ A HUDBY V DUCHOVNÍM VÝVOJI DĚTÍ V PODMÍNKÁCH MUZEA KULTURY ROZVOJ DĚTÍ PROSTŘEDNICTVÍM VNÍMÁNÍ DÍL VÝTVARNÉHO UMĚNÍ A HUDBY V PODMÍNKÁCH MUZEA STOLYAROV BORIS ANDREEVICH STOLYAROV BORIS ANDREEVICH Doktor pedagogických věd, profesor, vedoucí katedry "Ruské centrum muzejní pedagogiky a státní rozpočtové instituce". .."

"Ministerstvo školství a vědy Ruské federace Federální státní autonomní vzdělávací instituce vysokého školství "Jižní federální univerzita" Akademie architektury a umění Katedra dějin architektury, umění a architektonického restaurování Nino Samvelovna Yesoyan ARCHITEKTURA MĚSTA MAGISTERSKÁ PRÁCE ve směru ze dne 04.07.01 (270100) Architektura Vědecký ředitel– doc. Buchka Alexander Michajlovič Recenzent – ​​doc. k.arch. Karpova Maria Aleksandrovna Rostov na Donu – 2015 Práce byly provedeny dne...“

„Budoucnost nám otevírá ty nejúžasnější vyhlídky. Neboť již odbila hodina začátku velkého cyklického návratu k mystickému myšlení. Ze všech stran nás obklopují vody oceánu univerzální vědy – vědy o věčném životě, která v sobě skrývá zapomenuté potopené poklady minulých generací.“ E.P. Blavatská E.P. BLAVATSKÝ PRAKTIK OKULTNÍHO VÝCVIKU _ Sestavil E. A. Logaeva Překlad z angličtiny: V. S. Zueva, V. I. Myznikov, T. I. Perebailova, T. O. Suchorukova, Yu. A. Khatuntsev, Poznámky: B... .."

“C O L L O Q U I A | | ISSN 1822-3737 EVGENY DOBRENKO Socialistický realismus a reálný socialismus (Sovětská estetika a kritika a produkce reality) Abstrakt: Sovětské umění není uměním „pravdy“ (jak se umístilo) nebo „lži“ (jak bylo popsáno v sovětologie, emigrantské a disidentské diskurzy). Je mimo ověření a nefunguje jako „odraz reality“, ale jako derealizace života pro jeho následnou transformaci a nahrazení. To..."

2016 www.site - „Bezplatné elektronické knihovny – knihy, edice, publikace“

Materiály na těchto stránkách jsou umístěny pouze pro informační účely, veškerá práva náleží jejich autorům.
Pokud nesouhlasíte s tím, aby byl váš materiál zveřejněn na této stránce, napište nám, my jej během 1-2 pracovních dnů odstraníme.

Ve webdesignu je velmi důležité, aby se uživatel necítil nepříjemně – je to jako dívat se na dřez plný špinavého nádobí. Pokud je váš návrh vizuálně nevyvážený, bude váš web vypadat neuspořádaně, což může v uživatelích způsobit nepříjemnosti. Naopak, váš design by měl být atraktivní a umožnit návštěvníkům relaxovat, dívat se kolem sebe a Nejlepší způsob k dosažení tohoto efektu je vizuální rovnováha. Vizuální rovnováha je v podstatě rovnováha designových prvků, jejich umístění je jako žonglování s prvky vašeho designu.

Když přemýšlíme o rovnováze, nejjednodušší způsob, jak ji porovnat, je s pojmem váha. Fyzická hmotnost a hmotnost designových prvků jsou ve skutečnosti velmi podobné - fyzický objekt může být malý, ale velmi těžký, bez ohledu na hmotnost, stejně jako prvek vizuálního designu může být velmi malý, ale velmi poutavý. Těžkost fyzického objektu lze přirovnat k vizuálnímu jasu designových prvků a každý prvek interaguje s ostatními designovými prvky stejným způsobem jako fyzické objekty.

Proč vyvážené webové stránky vypadají dobře

Podvědomě milujeme rovnováhu. Láska k udržitelným strukturám je v nás zakotvena na podvědomé úrovni, nerovnováha naopak vyvolává pocit odmítnutí.
Klíčem k úspěšnému designu je tedy vizuální rovnováha. Je to ta další jiskra, kterou některé weby mají a jiné ne. Další výhodou je vyvážený design, který se dobře hodí k funkčnosti.

Existuje několik různých faktorů, které ovlivňují práci s designovými prvky. Způsob, jakým vyvažujete dva nebo více prvků ve vztahu k sobě navzájem, a jak znázorňujete vizuální vlastnosti prvků, je typ rovnováhy a vlastností rovnováhy.

Typy bilancí

Existuje několik různých metod pro vytvoření rovnováhy. Můžete použít tyto různé metody, organizovat a uspořádat prvky tak, aby vytvořily dobře vyvážený zážitek, díky kterému se uživatelé budou cítit pohodlně. Podívejme se na pět hlavních způsobů, jak dosáhnout rovnováhy

Horizontální vyvážení

Vertikální vyvážení

Radiální vyvážení

Symetrické vyvážení

Asymetrické vyvážení

Skvělý způsob, jak vizuálně uspořádat prvky, je vyvážit je podél osy - horizontální nebo vertikální. Horizontální vyvážení - prvky umisťujete vlevo a vpravo od sebe - jako na dětské houpačce. Vertikální vyvážení – předměty zavěšujete shora dolů podél středové osy.

Místo vyvažování kompozičních prvků podél centrálních os můžete také vyvažovat prvky kolem středu - radiální rovnováhu. V zásadě můžete umístit prvky kolem centrální osy nebo jako sluneční paprsky.

Dalším typem vyvážení, které se obvykle kombinuje s horizontálním, vertikálním a radiálním vyvážením, je vyvážení symetrické a asymetrické. Symetrická rovnováha – kdy jsou obě strany kompozice navzájem zrcadlovými obrazy – je jako přeložení kusu papíru napůl. Symetrie je velmi formální, přísná rovnováha, která je nenáročná na pohled a je široce používána při navrhování budov nebo rozvržení. Stává se také stále oblíbenější, protože se snáze reprodukuje v jakékoli velikosti.

Asymetrie je pravděpodobně nejběžnější formou rovnováhy. V podstatě jde o opak symetrické rovnováhy, ve které jsou prvky ve vzájemném vztahu vyváženy. Asymetrie je mnohem víc zajímavým způsobem než symetrie, protože symetrie má tendenci postrádat vizuální hierarchii, zatímco asymetrická rozložení mají tendenci mít vysokou vizuální hierarchii. Asymetrie však neznamená, že neexistuje žádná rovnováha, znamená to jednoduše, že prvky nejsou umístěny ve vzájemném vztahu.

Jak víte, který typ rovnováhy by bylo vhodné nyní použít? Obecně je symetrie obvykle snáze vnímatelná. Proto je častější v designu.

Pokud je tedy vaším cílem zprostředkovat společnosti stabilitu a silnou organizační strukturu. Na druhou stranu, pokud chcete zprostředkovat křehkost toho, co je považováno za bezpečné, zkuste efekt posílit asymetrií. Asymetrie dodává jiskru vizuálně bezpečnému designu.

Pro symetrii je nejlepší použít obsah z přibližně stejných částí, rozptýlených po celém rozvržení

V asymetrii je nejlepší upozornit na jeden konkrétní bod, vyvádějící z rovnováhy pohled diváka

Vlastnosti rovnováhy

Každý objekt v jakékoli kompozici má své vlastní charakteristiky, stejně jako charakteristiky interakce s jinými objekty. Hlavní rysy v rovnováze jsou: velikost, barva, tvar, velikost a poloha. Každá z těchto vlastností může být použita jednotlivě k vytvoření symetrické rovnováhy a k vytvoření rovnováhy v asymetrické kompozici je zapotřebí kombinace těchto vlastností - změna jednoho prvku ovlivní ostatní atd.

Velký prázdný objekt má lehkou vizuální váhu, a proto může být vyvážen menším, sytějším objektem. Například blog s oblastí obsahu a postranním panelem – oblast obsahu je obvykle větší než postranní panel. Mohli byste je vyvážit přidáním více bílého prostoru do oblasti obsahu a vyplněním postranního panelu něčím vizuálně závažnějším. Pokud chcete ve svém návrhu dosáhnout symetrické rovnováhy, musíte se ujistit, že prvky mají stejnou velikost bez ohledu na vizuální váhu.

Barva objektu v kompozici může změnit vizuální váhu prvků. Více tmavé barvy vizuálně těžší než jemné světlé barvy – červená je vizuálně těžší než žlutá, protože přitahuje více pozornosti. Pokud se snažíte vyvážit tmavý prvek jiným nebo více světlými prvky, můžete si zkusit pohrát s jinými vlastnostmi vyvážení nebo změnit barvu pozadí okolních prvků.

Tvar prvků může dramaticky změnit rovnováhu kompozice. Vlnité nebo zubaté tvary jsou vizuálně zajímavější, a proto i těžší než tvary s velmi jednoduchými, rovnými liniemi. Nesnažte se vyvážit několik prvků složitým tvarem, spíše vyvažte složitý a jednoduchý objekt.

Kontrast může být extrémně důležitým faktorem kompoziční rovnováhy. Čím vyšší je kontrast objektu, tím je těžší a naopak. Existuje několik způsobů, jak vyvážit prvky různé úrovně kontrast, jedním z nich je kompenzace nízkého kontrastu prvku ostrým kontrastem pozadí nebo textury. Můžete také přidat jednoduché okraje, přechody a stíny, abyste snížili kontrast prvků.

Umístění

To je důležitý faktor a tuto vlastnost lze využít k vyvážení dalších prvků, které se liší tvarem, barvou, hmotností a velikostí. Jak jsme si řekli dříve, velký předmět je těžší než malý, ale jejich hmotnost závisí také na tom, jak blízko je ke středu stránky. Předměty blíže středu váží více než předměty dále od něj, takže pokud máte blízko středu například velký červený předmět, můžete jej od středu oddálit, případně přesunout jiné předměty směrem ke středu.

Jak přidat rovnováhu na web

Jak tedy udělat, aby stránka vypadala vyváženě? Jako příklad si vezměme nejjednodušší symetrické vyvážení. Prázdný obsah vypadá dost fádně, tak přidáme menu. Pokud se podíváte na téměř jakýkoli dobrý design, uvidíte, že menu je navrženo „těžší“ než text. Zde je dosaženo nejprimitivnější rovnováhy – malý těžký prvek vyvažuje objemný, ale lehký text. Začněte vyvíjet rozvržení načrtnutím potřebných prvků. Tato pravidla vám pomohou vyhnout se chybám:

Moderní tendence a přístupy ve vývoji webu

Naučte se algoritmus pro rychlý růst od nuly při vytváření webových stránek

Velké předměty jsou těžší než malé

Tmavé předměty jsou těžší než světlé

Syté barvy jsou těžší než vybledlé

Čím silnější je hranice, tím je těžší

Čím více textury, tím těžší předmět s ním

Kromě horizontálního typu vyvážení nezapomeňte na vertikální a radiální

Teplé jasné barvy, jako je oranžová a červená, jsou těžší než studené barvy (modrá, zelená)

Pravidlo třetin

Ve výtvarném umění existuje takový koncept, zpravidla pravidlo třetin - to je, když je pracovní prostor mentálně rozdělen na 9 stejných částí, 2 vertikální a 2 vodorovné čáry. Takže podle tohoto pravidla by hlavní kompoziční centra měla být umístěna na křižovatce těchto čar.

Jak tedy rozdělíte rozložení na 9 stejných částí?

1. Představte si, že celý pracovní prostor je obyčejný obdélník

2. V duchu rozdělte jeho vertikální část na 3 stejné části a nakreslete k tomu 2 rovnoběžné čáry.

3. Totéž pro horizontální složku

Dodržování pravidla třetin vytváří větší zájem o obsah než u klasického centrování.

Příklady s vysvětlením

Na webu MacAllan Ridge vidíte asymetrické uspořádání bloků. Objemný blok s obrázkem je však vyvážen těžkými okraji bloku menu. Poměrně běžná balanční technika.

9 odpovědí

tady je můj trik, doufám, že to pomůže. /

V první řadě je to jasné design A rozvoj

design je koncepční práce, vytváření konceptu řešení, proces eliminace věcí, o kterých si myslíte, cítíte a věříte, že nejsou vhodné jako řešení pro váš zamýšlený cíl.

rozvoj vyvíjí konečnou specifikaci/myšlenku (alespoň teoreticky) nebo něco, co dává smysl a co se blíží tomu, co hledáte (ačkoli v mnoha případech tomu tak není), v podstatě převádí váš design/nápad do funkčního konečného produktu

Poznámkaže obě věci mohou a ve většině případů koexistují při výrobě produktu vedle sebe

nyní, kdy jsou unmanaged, visual, web, ux, ui pouze podkategoriemi konceptu, z nichž každá, i když je založena na principu designu, má také své vlastní vesmíry a vlastní podpůrná pravidla a podpůrné postupy, které se přímo vztahují na jejich příslušné podkategorie a v mnoha případech se může zdát, že se šíří z jedné podkategorie do druhé.

z mého porozumění a toho, co jsem se za ta léta naučil,

interakční design(není specifická pro doménu) – koncept/pochopení toho, jak jeden/jednotlivec interaguje s entitou a jak navrhnout proces, aby tato osoba mohla interagovat s entitou. tímto objektem může být cokoliv, co si vyberete, například vaše auto nebo toustovač, váš webový prohlížeč a webová stránka, kterou si v prohlížeči prohlížíte.

vizuální design(netýká se oboru) - pojetí/chápání estetické přitažlivosti a dopadu předmětu, se kterým se člověk stýká/nahlíží

webový design(specifická pro doménu) – koncept/pochopení myšlenky, která je specifická pro technologii (technologie) a zahrnuje aspekty několika konceptů designu, jako jsou, ale nejen: interakční design, vizuální design, design uživatelské zkušenosti, design uživatelské zkušenosti atd. d.

(není specifická pro doménu) – koncept návrhu uživatelského rozhraní, který dále zahrnuje vizuální a interakční design, stejně jako omezení domény, ve které se taková návrhová práce vyskytuje.

uživatelské rozhraní(nějaký druh oborově specifického) – koncept návrhu rozhraní, jehož prostřednictvím může uživatel komunikovat s produktem, gui v softwaru/webové aplikaci nebo volantem v autě

vývoj uživatelského rozhraní(nikoli pole) je proces transformace konceptu návrhu uživatelského rozhraní na pracovní rozhraní, které vytváří fyzické spojení mezi jednotlivci a produktem.

snad to pomůže

Design uživatelského rozhraní – Jak uživatel myslí a cítí
Informační architektura – jak je systém organizován
Design uživatelského rozhraní – Jak je obsah organizován
Interakční design – jak uživatel a zařízení jednají a reagují
Vizuální design - jak to vypadá

Některé nebo všechny výše uvedené disciplíny jsou součástí následujících oborů:
Architektura, pokud se týká budov
Návrh interiéru ve vztahu k vnitřním prostorům
Průmyslový vzor týkající se hmotných předmětů
Grafický design zahrnující text a obrázky
Návrh aplikací souvisejících s digitálními I/O
Webový design související s prohlížečem

Interaction Design - Researcher, definuje INTERAKCI/ZPRÁVU systému/aplikace. Vizuální design – Umělec, který ilustruje grafiku, může být web/tištěná média/.atd. Webdesign – umělec, ALE pouze pro WEBOVÉ APLIKACE UX Design – Výzkumný tým, který rozumí všemu a všemu ze STRANY UŽIVATELŮ a dohlíží na zážitek HAPPY/SMILEY ZAŽIJTE Návrh uživatelského rozhraní – Stejné jako Web Design Vývoj frontendu – Frontend Developer – HTML, CSS, JS, JQuery, Ajax, YUI, Php, Silverlight.net.etc.atd. Jakékoli technologie rozhraní knd.

Dovolte mi to uspořádat jednoduchým/jednoduchým způsobem UX DESIGN INTERAKTIVNÍ DESIGN UŽIVATELSKÉ ROZHRANÍ /WEB/VIZUÁLNÍ DESIGN VÝVOJ UŽIVATELE

Moje odpověď na tuto otázku:

Interakční design- představuje konstruktivní aspekt spojený s pojmem užitek. Výběr vizuálních prvků není dán estetickými principy, ale tím, jak užitečný je návrh pro návštěvníka webu a jak moc mu zjednoduší a zoptimalizuje zážitek.

Příklad přístupu: Je pro naši cílovou skupinu vhodné kulaté tlačítko nebo čtvercové?

Design > A design uživatelského rozhraní střední estetické vnímání. Jediný rozdíl mezi Visual Design a UI Design je v tom, že první je komplexnější, zahrnuje vše od tlačítek, ikon a rozvržení až po plakáty, zatímco druhý neobsahuje bannery a zaměřuje se hlavně na ikony/tlačítka/tematickou stránku aplikace.

UX design je podobný konceptu Interaction Design, ale je v tomto ohledu více „hardcore“ a popisuje logický přístup k použitelnosti, jako je logická architektura webu, jak je určena potřebami uživatele. Jedná se o proces plánování, projektování a vytváření drátěných modelů, vytváření funkcí a poskytování systému, přičemž dalším krokem je návrh interakce.

Konečně, UX související s konceptem skicování a wireframingu, UI odpovídajícím způsobem dokončí návrh (přidání tématu, bezpečných webových písem a palety barev) a návrh uživatelského rozhraní je procesem opětovného vytvoření návrhu během kódování.

Více se o tom můžete dozvědět na Interaction Foundation: https://www.interaction-design.org/literature?ep=mb

Skutečný problém, který musíme vyřešit, je rozdíl mezi UI, interakcí a UX.

Zde je další SVĚTOVÁ PRVNÍ HLOUBKOVÁ DISKUZE o takových rozdílech.

(1) UI znamená, jak se uživatel na systém/aplikaci „dívá“ a jak systém/aplikace „mluví“ s uživatelem. Vzhled aplikace, velikost, rozvržení, barvy, písma, zobrazení, stejně jako osvětlení obchodu, výška a šířka police, šířka a délka ostrůvku atd.

(2) Interakce se týká toho, jak uživatel „působí“ na systém/aplikaci a jak systém/aplikace „působí“ na uživatele. Zde si hodně vypůjčuji z knihy Chrise Crawforda The Art of Interaction Design: A Selfish and Illuminating Guide to Creating Successful Software.

Postuluje, že dobrá interakce se podobá dobré konverzaci a že dobrá konverzace má tři základní atributy, které vysvětlím na příkladu níže. Říká, že dobrý interaktivní účastník „poslouchá“, „přemýšlí“ a odpovídá v rozumném čase.

Osoba/aplikace jednoduše poslouchá. Pak to není například interaktivní. záznamník, kniha, stěna

Osoba/aplikace prostě mluví. Pak to není například interaktivní. rádio, stará televize, starý CD přehrávač

Osoba/aplikace prostě mluví a poslouchá, ale nepřemýšlí. např. některé automatické odpovědi, některé sociální díry

(3) UX Vzhledem ke stejnému rozhraní a stejné interakci získáme stejné UX? Mohou se vůbec změnit?

Například. Řekněme, že existuje vyhledávač, který funguje stejně jako Google. Ale „máte pocit“ nebo „tušíte“, že tento nový vyhledávač shromažďuje příliš mnoho vašich osobních údajů.

Pro mě je interakční design o uživatelské zkušenosti, ale zaměřuje se také na chování a pochopení potřeb publika. Mně nejde nutně o samotný design, ale o to, jak je design použit. Na interakčním designu mě nejvíce přitahuje myšlenka, že interakční design není jen o navrhování více toho, co již existuje, ale také o vytváření návrhů, které v současnosti neexistují.

podíl