Vytvorenie najlepších čokoládových koláčikov si bude vyžadovať UX aj používateľské rozhranie. Myslím to vážne. Na začiatok budete potrebovať recept, prísady, kuchynské náčinie a rúru. Potom: premiešame, upečieme, nakrájame, poukladáme na taniere, podávame a jeme.

Ale čo je UX a čo je UI? Výrobný proces je UX a proces pokovovania a podávania je UI.

A čo jesť? Toto je UX; okrem prípadov, keď to nie je UX. Získa spotrebiteľ iný zážitok, ak sa koláče podávajú priamo z formy alebo krásne naaranžované na tanieri? Povedal by som, že áno, to druhé by bolo vhodnejšie.

V tomto článku sa s vami podelím o päť rozdielov medzi dizajnom UX a UI. Dúfajme, že na jej konci už o nich budete mať lepšiu predstavu. Hneď musím povedať, že aj keď si všimnete rozdiely, niektoré z nich si budú navzájom veľmi podobné.

S týmto upozornením sa pozrime na niektoré rozdiely medzi nimi.

UX nie je používateľské rozhranie

Dizajn UX alebo dizajn používateľskej skúsenosti je proces, ktorým sa identifikuje potreba. Potom sa nakreslí hrubý prototyp, ktorý sa neskôr (alebo nie) potvrdí testovaním. Keď sa potvrdí obchodný model aj hodnotová ponuka, produkt je pripravený.

Používateľské rozhranie alebo dizajn používateľského rozhrania si môžete predstaviť takto:

Dizajn používateľského rozhrania = vizuálny dizajn + dizajn interakcie.

Vizuálny dizajn je to, ako stránka vyzerá, jej osobnosť, ak chcete; značka. Interakčný dizajn je spôsob, akým ľudia interagujú s vašou stránkou. Keď niekto stlačí tlačidlo, zmení sa tak, aby naznačovalo, že bolo stlačené?

A zatiaľ čo dizajnéri UX aj UI vytvárajú interakcie, dizajnérov UX možno považovať za architektov makro interakcií a dizajnéri UI sú tvorcovia mikrointerakcií, ktorí sa zaoberajú detailmi.

Podľa dizajnéra Nicka Babicha:

„Najlepšie produkty robia dobre dve veci: funkcie a detaily. Funkcie sú to, čo ľudí priťahuje k vášmu produktu. Podrobnosti sú to, čo ich drží."

Dizajnér UX s väčšou pravdepodobnosťou navrhne používateľské toky, kroky, ktoré používateľ vykoná, napríklad pri prihlásení na odber bulletinu. Aké kroky budú nasledovať a ako budú vedieť, že uspeli?

Projekt potom postúpi dizajnérovi používateľského rozhrania. Návrhár používateľského rozhrania vylepšuje tieto interakcie pridaním farieb a zvýraznením originálny dizajn, dávate im rady a ukazujete im cestu k bulletinu.

UI robí rozhrania krásnymi

Užitočný produkt uspokojuje potrebu, s ktorou sa trh ešte nestretol. Výskumný proces dizajnéra UX zahŕňa konkurenčnú analýzu, vývoj osobností a následné vytvorenie minimálneho životaschopného produktu; produkt, ktorý bude hodnotný pre vaše cieľové publikum. To je potvrdené testovaním v celom rozsahu životný cyklus produktu.

Po prototypovaní a testovaní používateľských tokov a drôtových modelov je na dizajnérovi používateľského rozhrania, aby všetko vyzeralo pekne. To zahŕňa výber farebnej schémy a dizajnu, ktorý je krásny a ľahko sa používa. Výber farieb, typografia a interakcie však nie sú založené na osobných preferenciách dizajnéra, ale na dobre formulovaných dôvodoch špecifických pre osobu, ktoré navrhli dizajnéri UX. Dizajnéri používateľského rozhrania s ich pomocou implementujú vizuálnu hierarchiu, ktorá bude používateľom slúžiť ako návod, ktorý im vysvetlí, čo a kedy majú robiť, aby dosiahli svoj cieľ.

Dobre navrhnutá hierarchia zvýrazní jeden hlavný cieľ na stránke, vďaka čomu budú používatelia vedieť, kde sa na webe nachádzajú a čo môžu v danom čase robiť. tento momentčas. Hierarchia to zvládne pomocou konvencií a vzorov, ktoré už používatelia poznajú. Tieto šablóny nasmerujú používateľov smerom.

UX pomáha používateľom dosahovať ciele

UI vytvára emocionálne spojenia

Ľudia prichádzajú na vašu stránku, aby niečo urobili. Možno niekto hľadá psíka do malého bytu.

UX stránka vecí sa môže pozerať na ľudí, ako sú milovníci psov, a snažiť sa prísť na to, čo je pre nich dôležité. Čo si cenia alebo čo potrebujú, keď hľadajú pomoc pri výbere svojho chlpatého kamaráta? Aby to pochopili, začnú pracovať. Kladú otázky, pozorujú ľudí, vedú rozhovory s ľuďmi, možno vyrábajú prototypy a robia nejaké partizánske testy, aby zistili, či im môžu pomôcť.

Po nastavení základnej použiteľnosti bude podľa Aarona Waltera, autora knihy Design for Emotion, vaša lojalita používateľov závisieť od charakteru vášho rozhrania. Svetlý dizajn môže prilákať ľudí na vašu stránku, dokonca môžu zostať, ak sa tam dá niečo urobiť. A keď sa vytvorí osobné spojenie, majú na háku. Rozosmieva ich vaše rozhranie? Chytí ich? Aký je drzý? Aaron hovorí: „Ľudia vám odpustia vaše nedostatky, budú vás nasledovať a budú vás chváliť, ak ich odmeníte pozitívnymi emóciami.“ Tu prichádza na scénu návrhár používateľského rozhrania.

Najprv sa vytvorí UX dizajn

Potom sa (niekedy) vytvorí návrh používateľského rozhrania

Ako spolupracujú dizajnéri UX a používateľského rozhrania počas procesu návrhu?

UX dizajn a prieskum sú spravidla prvými krokmi pri rozhodovaní o vytvorení produktu alebo aplikácie. Dizajnéri UX robia väčšinu prieskumu, aby potvrdili alebo vyvrátili počiatočné nápady na produkty a usmernili vývoj produktov.

Potom, čo bol prototyp niekoľkokrát otestovaný a je takmer hotový, nastúpi dizajnér používateľského rozhrania a začne pracovať na vizuálnom dizajne a mikrointerakciách.

Táto cesta však nie je vždy lineárna a závisí od mnohých faktorov. Napríklad:

• Kto je zodpovedný za UX a UI?
• Tá istá osoba, alebo niekto iný a iný tím?

UX sa používa vo všetkých produktoch, rozhraniach a službách

UI sa vzťahuje len na rozhrania

Dizajn používateľskej skúsenosti je rozsiahla oblasť a každým dňom sa stáva čoraz populárnejšou. V súčasnosti nielen spoločnosti používajúce web, ale aj mnohé ďalšie, ktoré vyvíjajú produkty alebo poskytujú služby, začínajú chápať hodnotu porozumenia svojim používateľom a overovania hypotéz ešte pred začatím procesu tvorby.

Dizajn používateľského rozhrania je určený pre používateľské rozhrania. To neznamená, že sa obmedzuje len na grafiku užívateľské rozhranie počítače, tablety a mobilné zariadenia. V súčasnosti možno rozhrania nájsť v mnohých iných produktoch, ako sú hodinky, práčky, prístrojové dosky automobilov, predajné automaty a ďalšie.

Nedávno som čítal o aplikácii pre iPhone, ktorá odomkne dvere vášho auta. Ukazuje sa, že tento súbor interakcií vyžaduje oveľa viac krokov ako len použitie kľúča na otvorenie dverí. Či už navrhujeme rozhranie alebo zážitok, musíme zabezpečiť, aby naši používatelia zostali v centre tohto procesu.

závery

Je takmer nemožné oddeliť UX od UI alebo UI od UX.

Ale ak sa pokúsite, môžete dospieť k záveru, že:

• Dizajn UX pomáha používateľom vykonávať úlohy v prostredí rôzne platformy a služieb.
• Dizajn používateľského rozhrania vytvára atraktívne a estetické rozhrania, ktoré sa spájajú s ľuďmi.

Preklad článku od Dona Sklechtu

• Preklad

Včera som počúval podcast a všimol som si, že sa niekto na niečo spýtal a po ceste povedal: "Starý fanúšik, volám prvýkrát." Z nejakého dôvodu ma to prinútilo premýšľať o médiu. Čítal som tu články už dlho, ale nikdy som nevložil svoje dva centy. Dnes je deň, ktorý sa zmení.

Na začiatok som sa rozhodol napísať o niečom, čo je mi blízke, o vizuálnom dizajne (alias grafickom dizajne), presnejšie o základných princípoch, ktoré so sebou priniesla skúsenosť a čo považujem za najdôležitejšie pre dobrý výkon môjho práca.

Nechcem článok nafukovať, preto budem stručný ku každej zásade. Pre tých, ktorí si zaslúžia podrobnejší výklad, možno v budúcnosti venujem celý článok.

Tak čo, ste pripravení? Všetko začína s…

#1 Bod, čiara a tvar

Toto sú základné stavebné kamene akéhokoľvek dizajnu, bez ohľadu na to, aký. Pomocou nich môžete vytvoriť čokoľvek od jednoduchých ikon až po veľmi zložité ilustrácie, a to všetko kombináciou týchto jednoduchých prvkov.

V geometrii je bod kombináciou súradníc x a y, pridajte os z a ste v 3D priestore, no v tomto článku sa obmedzíme na dva rozmery.

Bod > čiara > tvar

Ak spojíte dva body, dostanete priamku. Rad obrovských bodiek je trochu ako zhluk atómov, ktoré tvoria molekuly a tie zase tvoria všetky objekty okolo vás. Potom, ak pridáte tretí bod a spojíte ich, získate tvar, v tomto prípade trojuholník, ale ako už bolo spomenuté, s týmito základnými prvkami môžete získať takmer všetko, čo chcete.

Ale podľa vašich očí tieto tvary v skutočnosti neexistujú, kým k nim niečo nepridáte...

#2 Farba

Viditeľné farebné spektrum

Ľudské oko môže vidieť viac ako 10 miliónov rôznych farieb od červenej po fialovú a od detstva sa všetci učíme priraďovať určitým farbám určité hodnoty alebo významy.

Predstavte si napríklad semafory. Sú to len farby, ale dozvedáme sa, že červená znamená zastaviť, zelená znamená ísť, žltá znamená vykročiť na koľaje, pretože to môžete urobiť skôr, ako sa rozsvieti červená. To ukazuje, že to robíme veľmi dobre rôzne akcie len v závislosti od farby, niekedy si to ani neuvedomujeme.

Podľa môjho názoru sa to deje jednoducho preto, že sme sa tieto veci naučili, a nie preto, že farba má prirodzený význam od prírody. Podporuje to aj fakt, že tieto hodnoty sa menia v závislosti od kultúry, kde a kedy ste vyrastali.

To všetko znamená, že môžete pridať význam, účel a tón len výberom správnej farby, musíte sa uistiť, že veľmi dobre rozumiete tomu, pre koho navrhujete.

Teraz, keď vidíte svoj trojuholník, čo tak ho urobiť zaujímavejším...

#3 Typografia

Od trojuholníka k písmenu A

To je veľká vec a jedna z najdôležitejších a najťažších vecí pre dizajnéra, aby sa správne vyjadril. Nejde len o to, čo píšeš, ale ako to prezentuješ. Typografia je to, ako budú vyzerať vaše slová.

So správnym písmom môžete použiť obyčajný text a urobiť ho výkonným. Ale nie je to jednoduché. Čo je jednoduché, je úplne sfúknuť silné vyhlásenie jednoduchým výberom nesprávneho písma. Typografia, podobne ako farba, určuje tón.

Väčšina fontov je navrhnutá na špecifické použitie, stačí sa ich naučiť a používať pre svoje vlastné účely. Niektoré fonty sú vhodné pre veľké bloky textu, iné pre nadpisy. Niektoré sú mimoriadne funkčné a super čisté, zatiaľ čo iné sú vyrobené len pre zábavu alebo ironické použitie (viete, čo myslím).

Na výber sú tisíce rôznych fontov, ale pokiaľ nepotrebujete niečo vymyslené alebo nevytvárate niečo veľmi špecifické, odporúčam vždy sa držať klasiky. Ak sa však cítite odvážne, môžete si dokonca navrhnúť svoj vlastný typ písma, hoci je to dobre, považujem to za jednu z najťažších vecí pre dizajnéra. Ale ak si myslíte, že ste pripravení na jednu úlohu, na ktorú nemôžete zabudnúť, je to...

#4 Priestor

Spôsob, akým priestor vyvážite, dizajnu buď pomôže, alebo uškodí, čo platí najmä v typografii.

Zvážte, ako každý prvok/písmeno súvisí s ostatnými a poskytnite im presne toľko priestoru na dýchanie, koľko potrebujú. Bežne sa označuje ako negatívny priestor (pozitívny priestor sú samotné písmená).

Úprava zápornej medzery medzi znakmi (aka kerning)

Musíte prijať negatívny priestor ako súčasť svojho dizajnu a použiť ho rovnakým spôsobom. Priestor môže byť silný a pomôže divákovi orientovať sa v dizajne. Môže to byť aj miesto na odpočinok očí.

Ale používajte to rozumne, príliš veľa miesta a váš dizajn bude vyzerať nedokončený, príliš málo miesta a váš dizajn bude vyzerať príliš neprehľadne.

Ak sa naučíte nájsť správnu rovnováhu medzi pozitívnym a negatívnym priestorom, môžete vytvoriť ...

#5 Rovnováha, rytmus a kontrast

To je, keď začnete premieňať množstvo jednoduchých prvkov na niečo zaujímavé a atraktívne. Správne vyvážte všetky prvky vášho dizajnu vzhľadom na ich vizuálnu výšku. Veľký čierny štvorec vpravo horný roh utopiť dizajn v tomto smere. Vyrovnajte túto váhu alebo presuňte štvorec na iné miesto.

Úprava vizuálnej váhy slov na vytvorenie rytmu a kontrastu

Spôsob, akým rozložíte prvky na stránke, je rozhodujúci, pretože ťažšie prvky pomôžu vytvoriť kontrast a rytmus a oko vášho diváka bude prechádzať dizajnom elegantne a bez námahy.

Existuje niekoľko vecí, ktoré môžu pomôcť vášmu rytmu a rovnováhe, s ktorými sa môžete tiež hrať...

#6 Mierka

Urobte ďalší krok úpravou stupnice slov

Mierka pomôže vytvoriť nielen rytmus, kontrast a rovnováhu, ale aj hierarchiu. Zvyčajne nie všetky prvky vášho dizajnu musia mať rovnakú dôležitosť a jedným z najlepších spôsobov, ako to oznámiť, je veľkosť.

Teraz to musí slúžiť svojmu účelu. Nepodliehajte prístupu „urob moje logo väčšie“ a zabudnite na priestor, ktorý som už spomínal.

Vezmite si napríklad novinovú stránku. Čo je najväčšie na stránke?

Nadpisy sú zvyčajne krátke. prečo? Týmto spôsobom môžete rýchlo prelistovať stránku a zistiť, či je tam niečo zaujímavé na čítanie. Potom tu máme podnadpisy, ktoré sú menším písmom, ale poskytujú viac informácií o článku, a nakoniec tu máme samotný článok s najmenšou veľkosťou písma, ale najčitateľnejším veľkým textom.

Hovoríme teda o tom, že veľkosť má svoju funkciu a nikdy nezabudnite na osobu, ktorá bude konzumovať váš návrh. V prípade novín je čas urobiť poriadok...

# 7 Mriežka a zarovnanie

Je to ako to zvláštne zadosťučinenie, keď hráte Tetris a zrátate posledný riadok, ktorý zmizne z obrazovky.

Vytvorenie určitého spojenia medzi prvkami tak, aby pôsobili vyváženejšie a príjemnejšie

Predpokladá sa, že sú neviditeľné, ale uvidíte ich, ak otvoríte knihu alebo noviny. Tak či onak, ale (bez ohľadu na to, čo navrhujete) prichytenie na mriežku bude štruktúrovať váš dizajn a urobí ho príjemnejším a ľahšie stráviteľným.

Aj keď zámerne urobíte chaotický dizajn, v tomto chaose musí byť poriadok.

Zarovnanie je dôležité najmä pri texte, existuje viacero spôsobov, ako ho zarovnať, no môj zvyk je zarovnať ho doľava. Samozrejme, vždy je dôležité, čo a pre koho tvoríte, ale väčšinou ľudia čítajú zľava doprava a zhora nadol, takže text v strede alebo napravo sa číta oveľa ťažšie.

#8 Rámovanie

Toto je kľúčový pojem vo fotografii, ale vzťahuje sa aj na vizuálny dizajn.

Kdekoľvek použijete obrázok, ilustráciu alebo niečo iné, vytvorte správne orámovanie a uvidíte rozdiel.

Prerámovanie kompozície na pridanie zaujímavosti a ďalšieho prvku

Skúste nasmerovať svoje oko na to, čo je dôležité, zmenšiť/orezať obrázky, aby váš predmet vynikol alebo posilnil vaše posolstvo. Najdôležitejší je tu príbeh a ako ho správne vyrozprávať.

Po tom všetkom, ak máte pocit, že vám niečo zaujímavé chýba, môžete sa pohrať s…

# 9 Textúry a vzory

Testovanie textúry so šumom

Osobne vnímam textúry a vzory ako doplnky, nemusíte ich používať a môžete sa bez nich zaobísť, no niekedy dokážu váš dizajn pekne nalíčiť už len tým, že to tak je, alebo pridať ten prsteň zaujímavosti, ktorý mu chýbal. .

Textúry dnes už nie sú také trendy ako kedysi, no vďaka nim môžete svojmu dizajnu dodať nový rozmer, urobiť ho trojrozmernejším a hmatateľnejším.

Textúry nemusia byť v samotnom zložení, ak potrebujete niečo vytlačiť, vyberte správny papier, pridajte veci ako skosenie, embosovanie alebo UV lakovanie a váš dizajn môže prejsť od všednosti k niečomu krásnemu. Vyberte si však jednu, nezbláznite sa so špeciálnou úpravou.

Vzory sa vždy zaoberajú opakovaním a možno ich takmer považovať za textúry v závislosti od toho, ako ich používate. Verím, že sa dajú využiť hlavne na vnesenie rytmu a dynamiky plochý dizajn a tiež ako spôsob kompenzácie prebytočného negatívneho priestoru.

V neposlednom rade a v skutočnosti to, čo považujem za svätý grál vo vizuálnom dizajne, je…

#10 Vizuálny koncept

Toto je myšlienka vášho dizajnu. Čo tým myslíš a aký je skrytý význam za týmto povrchným obrázkom.

Ideová lampa... klišé, ja viem :)

To je to, čo odlišuje skvelý dizajn od niečoho, čo si môžete stiahnuť zo skladu.

Navrhujte s myšlienkou, s cieľom a vždy dodržujte myšlienku, ktorá všetko zjednocuje. Na tento účel starostlivo vyberajte písma, premýšľajte o tom, ako každá malá časť vášho dizajnu dodržiava tento základný koncept. Najdôležitejšia je konzistentnosť.

Ak je váš koncept silný, potom ho budete vedieť obhájiť a predať nápad klientovi/šéfovi alebo komu ho ukážete.

Tiež dobre premyslený dizajn bude žiť roky. Módne hipsterské veci sú cool a cool, ako fúzy a kockované košele, ale majú dátum spotreby. Naozaj si myslím, že dobrý dizajn NEsleduje trendy, ale ich vytvára.

Teraz ich máte, „mojich“ 10 zásad pre tvorbu dobrého dizajnu. Aj keď považujem číslo 10 za najdôležitejšie, mali by ste venovať pozornosť všetkým ostatným zásadám a uistiť sa, že vo svojom umení dosiahnete dokonalosť. Možno máte dobrý nápad, ale myslím si, že ho musíte vedieť aj zrealizovať (alebo poznať niekoho, kto to dokáže za vás).

Hovorí sa, že nemôžete súdiť knihu podľa obalu, ale väčšina ľudí to skutočne robí. Ak obsah knihy nie je dobre zobrazený na obale, určite to ovplyvní úspech.

Dobre! To je všetko.

Na záver sú samozrejme aj iné veci, ktoré beriem do úvahy pri projekte/dizajne, ako je pochopenie publika a toho, čo ním chceme dosiahnuť, avšak nezahrnul som ich do zoznamu princípov, pretože sa domnievam, tieto „obmedzenia“ sú dôležitou súčasťou definovania vizuálneho konceptu. Nápad môže byť skvelý, ale ak nespĺňa požiadavky projektu, tak skôr či neskôr zlyhá.

Dúfam, že vám tento zoznam pomôže, aj keď ste už všetko vedeli. Tento súbor princípov používam v rovnakej miere ako perá Stadler a bolo pre mňa zaujímavým cvičením dekonštruovať svoje návrhy na akýsi „stavebný kameň“.

Neváhajte a zanechajte svoj názor, vždy som otvorený zdravej diskusii.

Vďaka za prečítanie!

„Dizajn vizuálneho rozhrania Bez ohľadu na to, koľko úsilia vynaložíte na prieskum používateľov a vytvorenie modelu správania produktu, ktorý prispieva k dosiahnutiu ich cieľov, tieto sily budú...“

-- [ Strana 1 ] --

Vizuálny dizajn rozhrania

Bez ohľadu na to, koľko úsilia vložíte do používateľského prieskumu a tvorby

vývoj modelu správania produktu, ktorý prispieva k dosiahnutiu ich cieľov

lei, tieto sily budú zbytočné, ak sa vám nepodarí správne

informovať používateľov o princípoch tohto správania. V službe

V interaktívnych produktoch sa to často robí pomocou vizuálnych pomôcok.

vy - zobrazením objektov na displeji (aj keď v niektorých prípadoch

čajov, správanie produktu musí byť oznámené prostredníctvom fyzického

fyzikálne vlastnosti, ako je tvar hardvérového tlačidla alebo jeho hmatový pocit).

Vizuálny dizajn rozhrania je disciplína, ktorá je často nepochopená kvôli jej podobnosti s grafickým dizajnom a vizuálnym umením. Často sa nesprávne definuje ako „sťahovanie“ rozhrania; dokonca sme počuli aj také formulácie ako „dekorácia produktu“.

Naše skúsenosti nás viedli k záveru, že dizajn vizuálneho rozhrania je veľmi potrebná a jedinečná disciplína, ktorá by sa mala uplatňovať v spojení s dizajnom interakcií a priemyselným dizajnom. Môže to vážne ovplyvniť účinnosť a atraktívnosť produktu, ale na plné využitie tohto potenciálu je potrebné neodkladať vizuálny dizajn na neskôr (inak sa budete snažiť „nalíčiť prasa“), ale je to jeden z hlavných nástrojov na uspokojovanie potrieb používateľov a podnikov.

Vývoj dizajnu vizuálneho rozhrania si vyžaduje množstvo súvisiacich zručností. Špecifický súbor zručností je určený vytváraným produktom. Ak chcete vytvoriť pôsobivé a použiteľné používateľské rozhrania, dizajnér rozhrania musí mať základné vizuálne zručnosti – pochopenie farieb, typografie, formy a kompozície – a vedieť, ako ich možno efektívne použiť na sprostredkovanie správania a informácií, na vytvorenie nálady alebo podnetu. Vizuálny návrh rozhraní na meranie fyziologických odoziev. Dizajnér rozhrania tiež vyžaduje hlboké pochopenie princípov interakcie a idiómov rozhrania, ktoré definujú správanie produktu.

V tejto kapitole sa budeme zaoberať efektívnymi stratégiami pre návrh vizuálneho rozhrania. Tretia časť knihy obsahuje viac informácií o špecifických interaktívnych a interfejsových idiómoch a princípoch.

Vizuálne umenie, dizajn vizuálnych rozhraní a ďalšie dizajnérske disciplíny Umelci a vizuálni dizajnéri pracujú s rovnakými vizuálnymi médiami. Obaja musia byť zruční a skúsení vo všetkom, čo sa týka týchto prostriedkov, no ich aktivity slúžia rôznym účelom. Cieľom umelca je vytvoriť objekt, ktorý pri pohľade vyvoláva estetickú odozvu. Výtvarné umenie je teda spôsob, akým sa umelec vyjadruje k téme, o ktorú má on (a niekedy aj spoločnosť ako celok) citový alebo intelektuálny záujem. Umelec nie je viazaný takmer žiadnymi obmedzeniami. Čím nezvyčajnejší a originálnejší je produkt jeho úsilia, tým viac je cenený.

Dizajnéri na druhej strane vytvárajú predmety pre iných ľudí. Zatiaľ čo súčasní umelci sa primárne zaoberajú sebavyjadrením, dizajnéri, ako poznamenávajú Kevin Mullet a Darrel Sano vo svojej vynikajúcej knihe Designing Visual Interfaces, sú „zaneprázdnení hľadaním najvhodnejšej reprezentácie na sprostredkovanie určitých špecifických informácií“. .

V prípade dizajnérov vizuálnych rozhraní hľadajú najlepšiu reprezentáciu, ktorá sprostredkuje informácie o správaní programu, na ktorého navrhovaní sa podieľajú. Pri prístupe orientovanom na cieľ by sa mali snažiť prezentovať správanie a informácie spôsobom, ktorý je zrozumiteľný a užitočný, ktorý podporuje marketingové ciele organizácie a emocionálne ciele postáv.

Priznajme si, že vizuálny dizajn používateľských rozhraní nevylučuje estetické hľadiská, no takéto hľadiská by nemali presahovať funkčný rámec. A hoci vo vizuálnej komunikácii vždy existuje subjektivita, snažíme sa minimalizovať vplyv vkusu. Zistili sme, že jasné vyjadrenie emocionálnych a obchodných cieľov používateľa je neoceniteľné, dokonca aj pokiaľ ide o navrhovanie aspektov vizuálneho rozhrania, ktoré fungujú v prospech značky, používateľskej skúsenosti a viscerálnych reakcií. Viac o spracovaní intuície sme písali v 5. kapitole.

Vizuálne umenie, dizajn vizuálnych rozhraní a ďalšie disciplíny Grafický dizajn a používateľské rozhrania Grafický dizajn je disciplína, ktorej dlhé roky (až do druhej polovice 80. rokov minulého storočia) dominovala tlač, keďže dizajn sa redukoval najmä na tvorbu balenie, reklama, formátovanie dokumentov a životné prostredie.

Grafikom starej školy sú digitálne médiá nepríjemné, pretože nie sú zvyknutí vytvárať grafiku na úrovni pixelov. Na druhej strane, mladšia generácia grafických dizajnérov sa naučila zaobchádzať s „novým“ formátom a celkom úspešne aplikovala koncepty tradičného grafického dizajnu do digitálnej grafiky.

Grafickí dizajnéri majú tendenciu byť veľmi vizuálne zdatní a menej rozumejú konceptom správania. softvérový produkt a interakciu s ním. Talentovaným grafickým dizajnérom, ktorí sú tiež digitálne zdatní, sa darí vytvárať bohaté, esteticky príjemné a pôsobivé rozhrania, ktoré vidíme na Windows XP a Mac OS X, ako aj vizuálne bohaté rozhrania pre PC hry a spotrebiteľsky orientované aplikácie. Dokážu vytvárať krásny a adekvátny vzhľad rozhraní a navyše dokážu do vzhľadu a správania softvérového produktu vniesť korporátnu identitu. Pre takýchto profesionálov je dizajn alebo dizajn rozhrania v prvom rade tón, štýl, kompozícia, čo sú atribúty značky, po druhé - transparentnosť a zrozumiteľnosť informácií a až potom (ak na to vôbec príde) - sprostredkovanie informácií o správaní. cez očakávaný cieľ (pozri kapitolu 13).

Návrhári vizuálnych rozhraní potrebujú určité zručnosti, ktoré majú digitálni dizajnéri, ale tiež musia mať hlboké pochopenie a pochopenie úlohy správania. Ich úsilie sa výrazne zameriava na organizačné aspekty dizajnu a na to, ako komunikovať správanie produktu používateľovi pomocou vizuálnych ukotvení a očakávaných účelov.

Zameriavajú sa na súlad medzi vizuálnou štruktúrou rozhrania na jednej strane a logickou štruktúrou mentálneho modelu používateľa a správaním programu na strane druhej. Zaoberajú sa tiež tým, ako komunikovať stavy programu používateľovi (povedzme, ako urobiť stav „modifikovateľný“ odlíšiteľným od stavu „len na čítanie“) a čo robiť s kognitívnymi aspektmi používateľskej skúsenosti s funkciami (prvok kompozícia), vizuálna hierarchia, pomer postavy a terénu atď.).

334 Kapitola 14 Návrh vizuálneho rozhrania Návrh vizuálnych informácií Návrhári informácií nepracujú na interaktívnych prvkoch, ale na vizualizácii údajov, informácií a navigačných pomôcok. V dizajne vizuálneho rozhrania sú ich schopnosti obzvlášť dôležité, najmä pokiaľ ide o dátovo náročné aplikácie a niektoré webové stránky, kde obsah prevažuje nad funkčnosťou. Snahou informačného dizajnéra je prezentovať dáta vo forme, ktorá napomáha ich správnej interpretácii. Výsledok sa tu dosahuje prostredníctvom riadenia vizuálnej hierarchie pomocou takých prostriedkov, ako je farba, tvar, poloha a mierka.

Bežnými objektmi informačného dizajnu sú všetky druhy grafov, tabuliek a iných spôsobov zobrazovania kvantitatívnych informácií. Edward Tufte napísal niekoľko prelomových kníh, ktoré sa tejto téme venujú, vrátane The Visual Display of Quantitative Information.

Priemyselný dizajn Akákoľvek diskusia o priemyselnom dizajne presahuje rámec tejto knihy, ale rozširovanie interaktívnych nástrojov a ručných zariadení zaznamenalo, že priemyselný dizajn zohráva čoraz dôležitejšiu úlohu pri vytváraní interaktívnych produktov. Ako je to v prípade rozdielov v zručnostiach medzi grafickými dizajnérmi, dizajnérmi rozhraní a informačnými dizajnérmi, existujú dve kategórie priemyselných dizajnérov: niektorí sa špecializujú na vytváranie krásnych a užitočných foriem, zatiaľ čo iní sú talentovaní v logickej a ergonomickej oblasti. prezentujú fyzické ovládacie prvky v spôsob, ktorý zodpovedá správaniu používateľov a odráža správanie zariadenia.

Keďže stále viac zariadení používa plnohodnotné displeje, je pre dizajnérov interakcií, dizajnérov rozhraní a priemyselných dizajnérov čoraz dôležitejšie spolupracovať na vytváraní kompletných a efektívnych riešení.

Stavebné bloky dizajnu vizuálneho rozhrania Návrh rozhrania sa vo svojom jadre obmedzuje na otázku, ako štýlovať a usporiadať vizuálne prvky tak, aby jasne odrážali správanie a prezentovali informácie. Každý prvok vizuálnej kompozície má množstvo vlastností, ako je tvar a farba a kombinácia týchto vlastností dáva prvku význam. Každá jednotlivá vlastnosť má len zriedka prirodzený význam sama osebe. Skôr sa dá povedať, že používateľ dostane príležitosť pochopiť

Stavebné bloky dizajnu vizuálneho rozhrania

v rozhraní kvôli rôznym spôsobom aplikácie týchto vlastností na každý z prvkov rozhrania. V prípadoch, keď dva objekty zdieľajú vlastnosti, používateľ bude predpokladať, že tieto objekty spolu súvisia alebo sú podobné. Keď používatelia vidia, že vlastnosti sú odlišné, predpokladajú, že objekty spolu nesúvisia. Najviac upútajú našu pozornosť tie najkontrastnejšie predmety.

Dlho predtým, ako dieťa začne rozumieť reči a hovoriť, prejavuje schopnosť rozlišovať vizuálne kontrastné predmety. Detská šou Sezamová ulica sa spolieha na túto ľudskú schopnosť a žiada deti, aby si vybrali predmet, ktorý nie je ako ostatné alebo nie je súčasťou skupiny. Vizuálny dizajn rozhraní vytvára význam podobným spôsobom, čo v praxi dáva oveľa lepší výsledok ako len slová.

Pri navrhovaní používateľského rozhrania zvážte nasledujúce vizuálne vlastnosti každého prvku alebo skupiny prvkov. Ak chcete vytvoriť užitočné a atraktívne používateľské rozhranie, musíte starostlivo pracovať s každou z týchto vlastností.

Tvar Aký tvar má predmet? Je okrúhly, štvorcový alebo ako améba? Forma je pre človeka hlavným znakom podstaty objektu. Predmety rozoznávame podľa obrysov; silueta ananásu s modrou kožušinou nám stále umožňuje pochopiť, že ide o ananás. Rozlišovanie tvarov si zároveň vyžaduje väčšiu koncentráciu pozornosti ako rozbor farby či veľkosti. Preto tvar nie je najlepšou vlastnosťou na vytvorenie kontrastu, ak chcete upútať pozornosť používateľa.

Slabosť formy ako faktora pri rozpoznávaní objektov sa ukáže, keď sa pozriete na dokovaciu stanicu Mac OS X1, kde ste mohli omylom zavolať iTunes namiesto iDVD alebo iWeb namiesto iPhoto. Piktogramy majú rôzne tvary, ale majú podobné veľkosti, farby a textúry.

Veľkosť Aký veľký alebo malý je objekt vzhľadom na ostatné objekty na obrazovke? Väčšie prvky priťahujú viac pozornosti, najmä ak sú výrazne väčšie ako okolité prvky. Veľkosť je usporiadaná a kvantifikovateľná premenná, to znamená, že ľudia automaticky zoraďujú predmety podľa veľkosti a majú tendenciu hodnotiť ich podľa veľkosti; ak máme text v štyroch veľkostiach, predpokladá sa, že relatívny je špeciálny prvok rozhrania operačného systému Mac OS X, ktorý

–  –  –

dôležitosť textu rastie s veľkosťou a tento tučný text je dôležitejší ako normálny text.

Veľkosť je teda užitočná vlastnosť na označenie informačných hierarchií. Dostatočný rozdiel vo veľkosti zvyčajne rýchlo upúta pozornosť človeka. Jacques Bertin vo svojej klasike The Semiology of Graphics opisuje veľkosť ako disociačnú vlastnosť. To znamená, že ak je objekt veľmi malý alebo veľmi veľký, je ťažké interpretovať iné premenné, napríklad tvar.

Jas Ako tmavý alebo svetlý je objekt? Samozrejme, pojmy tma a svetlo dávajú zmysel hlavne v kontexte jasu pozadia. Na tmavom pozadí je tmavý text takmer neviditeľný, na svetlom zase ostro vynikne. Rovnako ako pri veľkosti môže byť hodnota jasu disociačná; povedzme, ak je fotografia príliš tmavá alebo príliš svetlá, nebude možné rozoznať, čo je na nej. Ľudia vnímajú kontrast ľahko a rýchlo, takže hodnota jasu sa môže zmeniť dobrý nástroj upriamenie pozornosti na tie prvky, ktoré je potrebné zdôrazniť. Hodnota jasu je tiež usporiadanou premennou – povedzme, že tmavšie (nižší jas) farby na mape sa dajú ľahko interpretovať: predstavujú väčšie hĺbky alebo väčšiu hustotu obyvateľstva.

Farba Žltá, červená alebo oranžová? Farebné rozdiely rýchlo upútajú pozornosť. V niektorých profesionálnych oblastiach majú farby špecifický význam, ktorý sa dá použiť. Takže, pre účtovníka, červená je negatívny výsledok a čierna je pozitívny; pre obchodníka s cennými papiermi je modrá signál nákupu a červená signál predaja (aspoň v USA je to tak). Farby nadobúdajú význam aj prostredníctvom sociálnych kontextov, v ktorých vyrastáme. Pre človeka zo Západu, ktorý vyrastal okolo semaforov, červená znamená „stop“ a niekedy dokonca „nebezpečenstvo“, zatiaľ čo v Číne je červená farbou šťastia. Biela sa na Západe spája s čistotou a pokojom a v Ázii s pohrebmi a smrťou. Zároveň, na rozdiel od veľkosti alebo jasu, farba spočiatku nemá vlastnosť poriadku a nie je kvantitatívne vyjadrená, preto nie je ani zďaleka ideálna na prenos informácií tohto druhu. Okrem toho by farba nemala byť jediným spôsobom prenosu informácií, pretože farbosleposť je celkom bežná.

Používajte farby rozumne. Na vytvorenie efektívneho vizuálny systémčo umožňuje užívateľovi identifikovať podobnosti a rozdiely

predmety, používajte obmedzenú množinu farieb – dúhový efekt preťažuje vnímanie používateľa a obmedzuje schopnosť sprostredkovať mu informácie. Okrem toho, pokiaľ ide o problémy s farbami, môžu nastať konflikty medzi marketingovými potrebami a úlohou odrážať nápady týkajúce sa rozhrania, aby ste v takejto situácii našli kompromis, možno budete potrebovať talentovaného vizuálneho dizajnéra (a diplomata na čiastočný úväzok) .

Smer Kam smeruje objekt – hore, dole alebo nabok? Smer je užitočný, keď chcete komunikovať informácie o orientácii (hore alebo dole, dopredu alebo dozadu). Majte na pamäti, že pri niektorých tvaroch a malých objektoch môže byť ťažké vnímať smer, takže je najlepšie ho použiť ako sekundárnu funkciu. Ak teda chcete ukázať, že akciový trh klesol, môžete použiť červenú šípku smerujúcu nadol.

Textúra Drsná alebo hladká, monotónna alebo nerovnomerná? Prvky zobrazené na obrazovke samozrejme nemajú skutočnú textúru, ale dokážu vytvoriť jej vzhľad. Textúra je zriedka užitočná na vyjadrenie rozdielov alebo upútanie pozornosti, pretože si vyžaduje veľa pozornosti k detailom. Okrem toho je na prenos textúry potrebné značné množstvo pixelov. Napriek tomu môže byť textúra dôležitým vodítkom: keď vidíme oblasť s textúrou gumy, predpokladáme, že by sme mali zariadenie chytiť za túto oblasť. Pätky a vypukliny na prvkoch používateľského rozhrania zvyčajne naznačujú, že prvok možno potiahnuť a skosenie alebo tiene okolo tlačidla zvyšujú pocit, že naň možno kliknúť.

Umiestnenie Ako je prvok umiestnený vzhľadom na ostatné prvky? Rovnako ako veľkosť, umiestnenie je usporiadaná a kvantifikovateľná premenná, a preto je užitočná na sprostredkovanie hierarchie. Umiestnením najdôležitejších alebo najžiadanejších prvkov vľavo hore využijeme poradie vnímania prvkov na obrazovke v prospech produktu. Poloha môže slúžiť aj ako prostriedok na vytváranie priestorových vzťahov medzi objektmi na obrazovke a objektmi v reálnom svete.

Princípy návrhu vizuálneho rozhrania Ľudský mozog je vynikajúci stroj na rozpoznávanie vzorov. Extrahuje význam z hustých prúdov vizuálnych informácií, ktoré nás bombardujú doslova odvšadiaľ. Naše mozgy sa vysporiadajú s týmto prívalom vstupov identifikáciou vizuálnych vzorcov a vytvorením systému priorít pre objekty, ktoré pozorujeme. V konečnom dôsledku nám to umožňuje vedome vnímať viditeľný svet. Je to schopnosť zrakového systému ľudského mozgu zostaviť časti zorného poľa do obrazov na základe vizuálnych kotiev (vodcov), čo nám umožňuje tak rýchlo a efektívne spracovávať vizuálne informácie. Predstavte si, že by ste zrazu museli manuálne vypočítať dráhu letu bejzbalovej lopty, aby ste predpovedali, kde pristane. Naše oči a mozog to spoločne urobia v zlomku sekundy, bez akéhokoľvek vedomého úsilia z našej strany. Proces vytvárania dizajnu vizuálneho rozhrania by sa mal spoliehať na našu prirodzenú schopnosť spracovať vizuálne informácie, aby sme zabezpečili, že informácie budú prenášané používateľom a budú odrážať schopnosti a funkcie programu.

Jedna kapitola nestačí na úplné pokrytie témy dizajnu vizuálneho rozhrania. Existuje však množstvo dôležitých zásad, ktoré vám pomôžu vytvárať rozhrania, ktoré sú čo najjednoduchšie čitateľné a príjemné pre oči. Ako už bolo spomenuté, Ke vin Mallet a Darrell Sano poskytujú vynikajúce a podrobná analýza tieto základné princípy; len stručne rozoberieme niektoré z najdôležitejších princípov dizajnu vizuálneho rozhrania.

Pri vytváraní grafických rozhraní by ste mali:

Použite vizuálne vlastnosti na zoskupenie prvkov a vytvorenie jasnej hierarchie;

Vytvorte vizuálnu štruktúru a položte logickú cestu na každej úrovni organizácie;

Používajte holistické, konzistentné a kontextu vhodné obrázky;

Integrujte vizuálny štýl s funkčnosťou zmysluplne a dôsledne;

Vyhnite sa vizuálnemu „hluku“ a neporiadku.

Tieto princípy a niektoré ďalšie všeobecné pravidlá pre prácu s textom a farbami v grafických používateľských rozhraniach sú podrobne popísané v nasledujúcich častiach.

Použitie vizuálnych vlastností na zoskupenie prvkov a vytvorenie prehľadnej hierarchie Vo všeobecnosti má zmysel zoskupovať logické sady funkčných alebo informačných prvkov prostredníctvom vizuálnych vlastností, ako sú farby alebo priestorové charakteristiky. Dôsledným aplikovaním týchto vizuálnych vlastností na rozhranie môžete vytvárať vzory, ktoré sa vaši používatelia rýchlo naučia rozpoznávať. Napríklad v systéme Windows XP sú všetky tlačidlá konvexné, so zaoblenými rohmi a textové polia obdĺžnikový, mierne prehĺbený, s bielym pozadím a modrým okrajom. Vďaka systematickému používaniu tohto obrázka nie je možné zameniť tlačidlo a vstupné pole, napriek niektorým podobnostiam.

–  –  –

Pri pohľade na akúkoľvek sadu vizuálnych prvkov sa používateľ nevedome pýta: „Čo je tu zaujímavé?“ - a takmer okamžite: "Aký je vzťah medzi týmito objektmi?" Mali by sme sa snažiť zabezpečiť, aby rozhranie obsahovalo odpoveď na obe otázky.

Vytvorte hierarchiu Na základe scenárov určte, ktoré funkčné a informačné prvky by mali používatelia vnímať okamžite, ktoré sú sekundárne a ktoré sú potrebné len vo výnimočných situáciách. Toto hodnotenie je základom pre vizuálnu hierarchiu.

Použite farbu, sýtosť, kontrast, veľkosť a polohu na vytvorenie viditeľných rozdielov medzi úrovňami hierarchie. Najdôležitejšími prvkami by mali byť väčšie, jasnejšie farby, sýtejšie a kontrastnejšie. Mali by byť umiestnené nad inými prvkami alebo vyčnievajúce. Zvýraznené prvky sú najlepšie namaľované v nasýtených farbách. Menej dôležité prvky by mali byť menej nasýtené, menej kontrastné, menšie alebo plochejšie. Neutrálne svetlé farby ich posúvajú do pozadia.

Samozrejme, nastavenie týchto vlastností by sa malo robiť opatrne. Nerobte najdôležitejší prvok obrovský, červený a vypuklý. Často stačí zmeniť len jednu z vlastností. Ak sa zistí, že o pozornosť používateľa súperia dva prvky rôznej dôležitosti, zapnutie poistky toho menej dôležitého je lepším riešením, ako sa snažiť „zapáliť“ ten dôležitejší. Získate tak viac priestoru sústrediť sa na najdôležitejšie prvky. (Tu je dobrá analógia: ak sú všetky slová na stránke vyznačené tučným červeným písmom, vyniká niektoré zo slov?) Vytvorenie jasnej vizuálnej hierarchie je jedným z najťažšie úlohy v dizajne vizuálneho rozhrania si jeho riešenie vyžaduje zručnosť a talent. Používatelia si takmer nevšimnú kvalitatívnu vizuálnu hierarchiu, no jej absencia a z toho vyplývajúci zmätok sú okamžite evidentné.

340 Kapitola 14 Vizuálny návrh rozhraní Vizualizácia vzťahov Ak chcete komunikovať vzťah medzi prvkami, vráťte sa späť k skriptovaniu. Je potrebné identifikovať nielen prvky s podobnými funkciami, ale aj prvky, ktoré sa najčastejšie používajú spolu. Zdieľané prvky by mali byť zvyčajne zoskupené priestorovo, aby sa minimalizoval pohyb myši, zatiaľ čo prvky, ktoré sa nemusia používať spolu, ale majú podobnú funkčnosť, môžu byť zoskupené vizuálne, aj keď nie sú priestorovo zoskupené.

Priestorové zoskupovanie vysvetľuje používateľom, ako určité úlohy, údaje a nástroje súvisia s ostatnými, a môže naznačovať správnu postupnosť akcií. Dobré zoskupenie podľa rozloženia zohľadňuje poradie úloh a podúloh a pohyb oka po obrazovke: zľava doprava pre západné jazyky a všeobecne zhora nadol. (Tento bod rozoberieme podrobnejšie o niečo neskôr.) Prvky nachádzajúce sa vedľa seba zvyčajne spolu súvisia. V mnohých rozhraniach je toto zoskupenie implementované príliš intenzívne: kamkoľvek sa pozriete - rámy a niekedy rám obsahuje iba jeden alebo dva prvky. Rovnaký efekt možno často inteligentnejšie dosiahnuť pomocou vzdialeností. Napríklad na paneli nástrojov môžu byť tlačidlá od seba oddelené štyrmi pixelmi. Na oddelenie príkazov súboru ("otvoriť", "nový súbor", "uložiť") do samostatnej skupiny stačí zväčšiť vzdialenosť medzi tlačidlami príkazov súboru a susednou skupinou tlačidiel až na osem pixelov.

Prvky, ktoré sú oddelené veľkými vzdialenosťami, môžu byť zoskupené pomocou spoločných vizuálnych vlastností, čím sa vytvorí vzor, ​​ktorý nakoniec pre používateľov nadobudne svoj vlastný význam. Využitie objemu na vytvorenie pocitu fyzického očakávaného cieľa je teda asi najviac efektívna metóda oddelené ovládacie prvky od údajov a prvkov pozadia (Viac informácií o očakávaných priradeniach nájdete v kapitole 13.) Táto stratégia sa často používa pri kreslení ikon. Mac OS X používa jasné farby pre ikony aplikácií a tmavé farby pre zriedka používané nástroje.

Zelené tlačidlo spustenia zariadenia sa môže prekrývať s podobnou animovanou zelenou ikonou, čo znamená, že zariadenie funguje správne.

Keď sa rozhodnete pre skupiny a vizuálne vlastnosti týchto skupín, začnite upravovať kontrast medzi skupinami buď zvýraznením alebo tieňovaním skupín podľa ich dôležitosti v aktuálnom kontexte. Zdôraznite rozdiely medzi skupinami, ale minimalizujte rozdiely medzi členmi tej istej skupiny.

Princípy návrhu vizuálneho rozhrania

Test škúlenia Existuje dobrý spôsob, ako zabezpečiť, aby vizuálny dizajn efektívne využíval hierarchiu a vzťahy – dizajnéri to nazývajú test škúlenia. Zatvorte jedno oko a pozerajte sa na obrazovku prižmúreným druhým okom. Venujte pozornosť tomu, ktoré prvky príliš vyčnievajú, ktoré sú nejasné a ktoré sa spojili do skupín. Tento postup často odhalí predtým nepovšimnuté problémy v dizajne rozhrania.

Vytvorte vizuálnu štruktúru a navigujte sa po logickej trase na každej úrovni organizácie Rozhrania si možno pohodlne predstaviť tak, že sa skladajú z vizuálnych a interaktívnych prvkov, ktoré sú zoskupené pomocou panelov, ktoré možno zase zoskupiť do obrazoviek, zobrazení alebo stránok. . Takéto zoskupenie, ako je uvedené vyššie, sa môže uskutočniť distribúciou v priestore alebo spoločnými vizuálnymi vlastnosťami. Monopolná aplikácia môže mať viacero úrovní týchto štruktúr, preto je dôležité zachovať transparentnú vizuálnu štruktúru, aby používateľ mohol ľahko prechádzať z jednej časti rozhrania do druhej podľa svojho pracovného postupu.

Vo zvyšnej časti tejto časti popíšeme množstvo dôležitých vlastností, ktoré pomáhajú definovať jasnú vizuálnu štruktúru.

Zarovnanie a mriežka Zarovnanie vizuálnych prvkov je jednou z hlavných techník, ktorá umožňuje dizajnérovi prezentovať produkt používateľom štruktúrovaným a organizovaným spôsobom. Zoskupené prvky by mali byť zarovnané horizontálne aj vertikálne (obr. 14.1.) Vo všeobecnosti by mal byť každý prvok na obrazovke zarovnaný s čo najväčším počtom ďalších prvkov. Odmietnutie zosúladiť dva prvky alebo dve skupiny prvkov musí byť vedomé: je to prípustné len na dosiahnutie špecifického separačného účinku. Okrem iného by dizajnéri mali venovať pozornosť:

Zarovnanie podpisov. Štítky pre ovládacie prvky, ktoré sú naskladané na sebe, musia byť zarovnané so spoločným okrajom. Ak sú všetky titulky približne rovnako dlhé, zarovnáte ich na ľavú stranu, aby sa používateľom ľahšie čítali, ako keby sa zarovnávali doprava.

Zarovnanie v rámci skupiny funkčných prvkov. Skupina súvisiacich začiarkavacích políčok, možností alebo textových políčok musí spĺňať štandardné zarovnanie mriežky.

342 Kapitola 14. Vizuálny návrh rozhraní Obr. 14.1. Adobe Lightroom veľmi efektívne využíva zarovnanie do mriežky kompozície. Text, funkčné prvky a ovládacie skupiny sú veľmi dobre zarovnané na mriežke s pevným rozstupom. Je potrebné poznamenať, že výplň ovládacích prvkov a štítkov prvkov skupiny napravo môže brániť ich rýchlemu čítaniu.

Zarovnanie prvkov oddelených skupinami a panelmi.

Skupiny ovládacích prvkov a iných objektov na obrazovke, pokiaľ je to možné, by mali byť všetky ukotvené do rovnakej mriežky.

Mriežka je jedným z najsilnejších nástrojov vizuálneho dizajnéra, ktorý si rýchlo získal popularitu v rokoch po druhej svetovej vojne vďaka švajčiarskym tlačiarňam. Mriežka poskytuje jednotnosť a konzistenciu v štruktúre kompozície, čo je obzvlášť dôležité pri navrhovaní rozhrania s niekoľkými úrovňami vizuálnej alebo funkčnej zložitosti. Po tom, čo dizajnéri interakcií určili celkovú infraštruktúru aplikácie a jej prvky používateľského rozhrania (pozri kapitolu 7), musia dizajnéri rozhraní usporiadať kompozíciu do mriežkovej štruktúry, ktorá správne zdôrazní dôležité prvky a štruktúry a ponechá priestor pre menej dôležité prvky a prvky nižšej úrovne. .

Mriežka spravidla rozdeľuje obrazovku na niekoľko veľkých horizontálnych a vertikálnych plôch (obr. 14.2).

Princípy návrhu vizuálneho rozhrania

Ryža. 14.2. V tomto príklade mriežka kompozície určuje veľkosť a polohu rôznych oblastí obrazovky webovej lokality. Zaisťuje konzistenciu naprieč obrazovkami, čím znižuje dizajnérovu kompozičnú prácu a snahu používateľa čítať a porozumieť obsahu obrazovky Mriežka využíva koncept rozstupu, čiže minimálnej vzdialenosti medzi prvkami. Ak je napríklad vzdialenosť mriežky štyri pixely, všetky vzdialenosti medzi prvkami a skupinami musia byť násobkom štyroch.

V ideálnom prípade by mriežka mala nastaviť aj proporcie rôznych oblastí obrazovky. Takéto pomery sa zvyčajne vyjadrujú ako zlomky. Medzi bežné zlomky patrí známy „zlatý pomer“ (označovaný gréckym písmenom „phi“ a rovná sa približne 1,62), ktorý sa často vyskytuje v prírode a považuje sa za mimoriadne príjemný pre ľudské oko; prevrátená odmocnina z dvoch (približne 1:1,41), ktorá je základom medzinárodnej normy pre veľkosť papiera (napríklad hárok A4); a 4:3, čo je pomer strán väčšiny počítačových obrazoviek.

Samozrejme, treba hľadať rovnováhu medzi idealizovanými geometrickými vzťahmi a špecifickými priestorovými potrebami funkcií a informácií prezentovaných na obrazovke.

Dokonalá implementácia zlatého rezu nijako nezlepšuje čitateľnosť obrazovky, kde sa hromadia predmety.

Dobrá kompozičná mriežka je modulárna, to znamená, že je dostatočne flexibilná na to, aby umožňovala všetky potrebné variácie, pričom všade, kde je to možné, zachováva konzistenciu štruktúry. Ako pri mnohých iných problémoch s dizajnom, aj tu je dôležitá jednoduchosť a konzistencia. Ak dve oblasti na obrazovke vyžadujú približne rovnaký priestor, dajte im presne rovnaké rozmery. Ak dve oblasti vyžadujú rozdielny priestor, výrazne ich odlište veľkosťou. Ak je rozstup mriežky príliš malý, mriežka bude ťažko čitateľná kvôli jej zložitosti. Malé rozdiely môžu spôsobiť, že sa používateľ bude cítiť nestabilne (aj keď je nepravdepodobné, že bude schopný rozpoznať príčinu tohto pocitu) a v konečnom dôsledku zničí obrovský potenciál siete.

Rozhodnutia o kompozícii musia byť v istom zmysle nekompromisné: „takmer štvorec“ je na nič; "takmer jeden až dva" - tiež. Ak sa kompozícia na obrazovke blíži jej jednoduchej zlomkovej časti – jednej polovici, jednej tretine alebo jednej pätine – upravte kompozíciu tak, aby zaberala presne jednu polovicu, jednu tretinu alebo jednu pätinu. obrazovky. Použite presné, jasné, výrazné proporcie.

Použitie mriežky v dizajne vizuálneho rozhrania poskytuje množstvo výhod:

Jednoduchosť použitia. Keďže mriežka robí usporiadanie prvkov jednotným, používatelia sa rýchlo naučia, ako nájsť správne prvky v rozhraní. Ak je názov obrazovky vždy na rovnakom mieste, používateľ pri hľadaní tohto názvu nemusí premýšľať ani pozerať na obrazovku. Postupnosť v usporiadaní prvkov a výber vzdialeností medzi nimi uľahčuje prácu mechanizmov vizuálneho spracovania v ľudskom mozgu. Dobre navrhnutá mriežka uľahčuje čítanie obrazovky.

estetická príťažlivosť. Starostlivým použitím mriežky a výberom vhodných pomerov medzi nimi rôznych oblastiach Na obrazovke môže dizajnér vytvoriť zmysel pre poriadok, ktorý je pre používateľov pohodlný a povzbudzuje ich k interakcii s produktom.

Efektívnosť. Štandardizácia kompozície znižuje námahu spojenú s vytváraním vysokokvalitných vizuálnych rozhraní. Veríme, že vytvorenie siete a jej začlenenie do procesu v počiatočných fázach detailovania dizajnové rozhodnutia znižuje počet iterácií a akcií na „ladenie“ rozhrania. Dobre definovaná a jasne označená mriežka vytvára základ pre ľahko modifikovateľný a rozšíriteľný dizajn, ktorý umožňuje vývojárom nájsť dobré kompozičné riešenia, keď je potrebné vykonať zmeny.

Vytvorenie logickej cesty Kompozícia by mala nielen presne sledovať mriežku, ale mala by tiež štruktúrovať efektívnu logickú cestu cez rozhranie pre používateľov, berúc do úvahy skutočnosť, že (v súlade s princípmi dizajnu vizuálneho rozhrania v západných jazykoch) sa oko pohybuje od zhora nadol a zľava doprava (obr. 14.3).

Dobrá logická trasa Nepohodlná logická trasa Pohyb očí a trasa Všetko je rozhádzané na obrazovke v rozhraní je rovnaké Obr. 14.3. Pohyb oka cez rozhranie by mal poskytovať logickú cestu, ktorá umožňuje používateľom efektívne a úspešne riešiť problémy a dosahovať ciele Symetria a rovnováha Symetria je užitočným prostriedkom na organizáciu rozhrania z hľadiska dosiahnutia vizuálnej rovnováhy. Asymetrické rozhrania zvyčajne vyzerajú, akoby sa na jednej strane mali zrútiť. Skúsení dizajnéri sú schopní dosiahnuť asymetrickú rovnováhu ovládaním vizuálnej hmotnosti jednotlivých prvkov, podobne ako hojdačka môže byť vyvážená umiestnením detí s rôznou hmotnosťou na opačné konce. V kontexte používateľského rozhrania je ťažké dosiahnuť asymetrický dizajn kvôli vysokým nákladom na priestor na obrazovke. Test škúlenia vám umožní skontrolovať rovnováhu rozhrania.

V rozhraniach sa najčastejšie používajú dva typy symetrie: vertikálna osová symetria (symetria vzhľadom na vertikálna čiara, ťahané stredom skupiny prvkov) a diagonálna osová súmernosť (symetria okolo uhlopriečky). Väčšina dialógových okien má jeden z týchto typov symetrie, najčastejšie diagonálnu (obrázok 14.4).

Exkluzívne aplikácie zvyčajne nemajú symetriu najvyššej úrovne (dosahujú rovnováhu prostredníctvom jemnej siete), ale dobre navrhnuté prvky rozhrania v takýchto aplikáciách sú takmer určite do určitej miery symetrické (obrázok 14.5).

346 Kapitola 14 Vizuálny návrh rozhraní 14.4. Diagonálna symetria v dialógovom okne Odrážky a číslovanie aplikácie Microsoft Word. Os symetrie prebieha zľava dole vpravo hore. 14.5. Vertikálna symetria v palete nástrojov Macromedia Fireworks Princípy návrhu vizuálneho rozhrania Používajte holistické, konzistentné a kontextovo vhodné obrázky Používanie ikon a iných vizuálnych prvkov môže pomôcť používateľovi pochopiť rozhranie alebo naopak obťažovať, zmiasť alebo dokonca uraziť, ak ikony sú zle zvolené. Je veľmi dôležité, aby dizajnéri pochopili, akú správu má program používateľovi sprostredkovať a akú správu používateľ očakáva. Dobré porozumenie postáv a ich mentálnych modelov zvyčajne poskytuje pevný základ pre jazyky textového a vizuálneho rozhrania. Úlohu zohrávajú aj kultúrne aspekty. Dizajnéri by si mali uvedomiť, že farba má v rôznych kultúrach rôzny význam (v Číne sa červená nepovažuje za varovnú farbu), ako aj gestá (v Turecku sa palec hore považuje za veľmi urážlivé gesto) a symboly (osemhran predpisuje zastaviť v USA, ale v niekoľkých ďalších krajinách). Okrem toho by ste mali vedieť farebné kódy akceptované v rôznych oblastiach ľudskej činnosti. Napríklad v nemocniciach žltá označuje žiarenie, zatiaľ čo červená sa zvyčajne používa v život ohrozujúcich situáciách. Na burzovom termináli je červená signálom na predaj. Skôr ako začnete, uistite sa, že rozumiete vizuálnemu jazyku odvetvia a kultúry vašich používateľov.

Vizuálne prvky by mali byť súčasťou globálneho vizuálneho jazyka, ktorý spája komponenty rozhrania. To znamená, že prvky, ktoré sú logicky podobné, by mali mať spoločné vizuálne vlastnosti – ako je poloha, veľkosť, hrúbka čiary a všeobecný štýl – líšiace sa iba tým, čo zdôrazňuje ich význam. Cieľom je vytvoriť prepojený systém prvkov. Rozhranie, ktoré dosahuje tento cieľ, sa zdá byť bezchybné: ani jeden prvok nevyzerá, akoby bol pridaný na poslednú chvíľu.

Okrem funkčnej hodnoty môžu piktogramy zohrávať významnú úlohu pri sprostredkovaní atribútov značky. Jasné „kreslené“ piktogramy môžu byť na mieste, ak navrhujete webovú stránku pre deti, zatiaľ čo vyvážené, decentné piktogramy sú vhodnejšie pre obchodné aplikácie. Bez ohľadu na zvolený štýl zachovajte kontinuitu – ak sú na niektorých ikonách čiary tučné a čierne so zaoblenými rohmi a na iných tenké prerušované čiary, vizuálny štýl sa „rozpadne“.

Dizajn a kreslenie piktogramov je úplne samostatná oblasť. Vytváranie zrozumiteľných obrázkov v nízkom rozlíšení si vyžaduje veľa času a praxe – najlepšie je delegovať túto úlohu na skúsených dizajnérov. Piktogramy sú zložitá téma na pochopenie, preto tu zdôrazníme len niekoľko dôležitých kľúčových bodov. Pre tých čitateľov, ktorí sa chcú dozvedieť viac o používaní ikon, dôrazne odkazujeme na knihu Williama Hortona The Icon Book. Príklady v tejto knihe sa môžu zdať zastaralé, ale základné princípy sú stále relevantné.

Ikony funkcií Navrhovanie ikon, ktoré predstavujú funkcie alebo operácie vykonávané na objektoch, je náročné, ale zábavné.

Hlavný problém spočíva v znázornení abstraktných pojmov v piktografickom, vizuálnom jazyku. V takýchto prípadoch je lepšie spoliehať sa na idiómy, ako hľadať obrázky, ktorým nikto nerozumie, a poskytnúť im popisky (pozri kapitolu 23) alebo popisky.

V prípade zjavných a špecifických funkcií dodržujte nasledujúce pravidlá:

Umiestnite na ikonu funkciu aj objekt, aby používateľ ľahšie porozumel ikone. Sloveso v kombinácii s podstatným menom je ľahšie pochopiteľné ako sloveso samotné. Napríklad, ak je príkaz Vystrihnúť prezentovaný ako dokument s preškrtnutým krížikom, bude to zrozumiteľnejšie ako metaforický obrázok nožníc.

Dajte si pozor na metafory a reprezentácie, ktoré nemusia mať v očiach cieľového publika požadovaný význam. Napríklad palec hore v západnej kultúre znamená „v poriadku“ a môže sa zdať ako vhodný piktogram na označenie pozitívnej reakcie, no na Blízkom východe a v iných kultúrach je toto gesto urážlivé – v akejkoľvek aplikácii určenej pre globálny trh je treba sa vyhnúť.

Vizuálne zoskupujte prvky súvisiace buď priestorovo, alebo ak to nie je možné, pomocou farieb alebo iných vizuálnych prostriedkov.

Vytvorte jednoduché piktogramy; vyhnúť sa zbytočným detailom.

Opätovne používajte prvky vždy, keď je to možné, aby sa ich používateľ raz a navždy naučil.

Symboly ako odraz predmetov Stvorenie pre rôzne druhy objekty v rozhraní, jedinečné znaky tiež pomáhajú používateľovi lepšie pochopiť rozhranie. Takéto symboly nemusia byť vždy obrazné alebo metaforické – preto sú často idiomatické (sila idiómov je podrobne popísaná v kapitole 13). Takéto vizuálne značky umožňujú používateľovi navigovať medzi objektmi rýchlejšie ako len štítky. Ak chcete vytvoriť spojenie medzi symbolom a objektom, použite symbol vždy, keď sa objekt objaví na obrazovke.

Princípy návrhu vizuálneho rozhrania

–  –  –

Návrhár rozhrania musí tiež dbať na to, aby symboly predstavujúce objekty rôznych typov boli vizuálne odlišné. Vybrať konkrétnu ikonu na obrazovke plnej takmer identických ikon je rovnako ťažké ako nájsť konkrétne slovo na obrazovke plnej textu. Je veľmi dôležité vizuálne odlíšiť (kontrastovať) objekty s rôznym správaním, vrátane rôznych variácií ovládacích prvkov, ako sú tlačidlá, posuvníky a začiarkavacie políčka.

Vykresľovanie piktogramov a symbolov S rozširujúcimi sa grafickými možnosťami farebných zobrazení rastie aj pokušenie vykresľovať piktogramy a symboly v čoraz väčšom detaile, takmer fotorealisticky. Tento trend však v konečnom dôsledku nenapĺňa ciele používateľa, najmä v biznis aplikáciách. Piktogramy by mali zostať jednoduché a schematické, s minimom farieb a tieňovania a mali by si zachovať svoju skromnú veľkosť. AT Windows Vista a Mac OS X boli podniknuté kroky smerom k podrobnejšiemu znázorneniu ikon. Hoci takéto ikony vyzerajú efektne, nezaslúžene na seba upozorňujú a pri malej veľkosti sa zobrazujú zle – to znamená, že buď zaberajú príliš veľa miesta na obrazovke, alebo sú nečitateľné. Okrem toho nútia vývojára zanedbávať vizuálnu koherenciu prvkov v rozhraní, pretože len veľmi málo funkcií (hlavne tých, ktoré súvisia s hardvérom) môže byť adekvátne reprezentovaných špecifickými fotorealistickými obrázkami. Fotografické piktogramy sú ako text písaný iba na stroji veľké písmená; rozdiely medzi nimi nie sú jasné a je ľahké sa zmiasť. Ikony používatelia najľahšie rozpoznajú podľa tvaru, no v prípade Mac OS X sú obrysy všetkých ikon rovnako rozmazané. Rozhranie Mac OS X je naplnené fotorealizmom, ktorý odvádza pozornosť používateľov a nepracuje v ich prospech (obr. 14.6).

Vizualizácia správania Namiesto toho, aby ste výsledky funkcií v rozhraní popisovali iba slovami (alebo v horšom prípade neuvádzali žiadne popisy), ukážte používateľovi, aké budú výsledky. Na tento účel použite vizuálne prvky. Táto technika by sa nemala zamieňať s použitím ikon na ovládacích prvkoch reprezentujúcich očakávané priradenia. Okrem textu popisujúceho nastavenie alebo stav zahrňte obrázok alebo diagram, ktorý popisuje správanie. Vizualizácia je síce zvyčajne 350 Kapitola 14. Návrh vizuálneho rozhrania Obr. 14.6. Fotorealistické ikony v systéme Mac OS X. Táto úroveň detailov iba uberá na funkčných a informačných prvkoch. Ak je tiež v niektorých prípadoch odôvodnené uvádzanie podrobností o známych predmetoch, aký zmysel majú podrobné obrázky neznámych predmetov alebo abstraktných pojmov (napríklad počítačová sieť)? Koľko používateľov videlo „nahé“ HDD(úplne vpravo)? V konečnom dôsledku sa používateľ musí orientovať podľa štítkov, aby pochopili, aké piktogramy potrebujú, a často nezaberá plochu obrazovky navyše; jeho schopnosť jasne vyjadriť význam stojí za pixely. Microsoft urobil tento objav pred niekoľkými rokmi a odvtedy dialógové okná(najmä v programe Microsoft Word) sú plné vizuálnych prvkov, ktoré dopĺňajú textové popisy ovládacích prvkov. Fotoshop a iné grafické aplikácie už dlho ukazujú používateľovi výsledky operácií vo forme miniatúr.

Vizuálne komunikujte používateľom funkciu a správanie.

Dialógové okno Náhľad v programe Microsoft Word (obr. 14.7) zobrazuje, ako bude vytlačený dokument vyzerať s prihliadnutím na nastavenú veľkosť papiera a okraje. Mnoho používateľov má malú predstavu o tom, ako vyzerá 1,2-palcový ľavý okraj, a ukážka im to jasne ukazuje. Microsoft by mohol ísť ešte ďalej a organizovať priame zadávanie v tomto dialógovom okne. Používatelia by potom mohli potiahnuť okraj ľavého okraja a sledovať, ako sa číselná hodnota v príslušnom počítadle mení. Numerické vstupné pole spojené s takýmto ovládacím prvkom nestráca na dôležitosti, nedá sa úplne nahradiť vizuálnym prvkom. Vstupné pole zobrazuje presné hodnoty parametrov a vizuál zobrazuje konečný vzhľad stránky.

Integrujte vizuálny štýl s funkčnosťou zmysluplným a konzistentným spôsobom Ak sa dizajnéri rozhrania rozhodnú držať sa určitého štýlu v rozhraní, malo by to byť urobené globálne. Každý aspekt rozhrania musí byť analyzovaný z hľadiska štýlu; by sa nemalo obmedzovať len na nejaký vizuál

Princípy návrhu vizuálneho rozhrania

Ryža. 14.7. Funkcia Náhľad v programe Microsoft Word demonštruje vizuálne vyjadrenie funkcií aplikácie. Táto funkcia nevyžaduje, aby sa používateľ snažil predstaviť si, ako bude vyzerať 1,2-palcový box, ale umožňuje ľahko zistiť, aké výsledky bude mať konkrétna hodnota prvkov. Nechcete, aby rozhranie vyzeralo, ako keby ho niekto narýchlo pomazal farbou, však? Musíte sa uistiť, že funkčné aspekty GUI programu sú v dokonalom súlade s celkovým vizuálnym štýlom značky vášho produktu. Správanie programu je súčasťou značky a používateľská skúsenosť s produktom by mala odrážať rovnováhu formy, obsahu a správania.

Forma a funkcia Pre mnoho zainteresovaných strán (vlastníkov projektu) je vizuálny štýl veľmi atraktívnou oblasťou, ale štylizované prvky rozhrania by mali byť pod ostražitou kontrolou – najmä pri navrhovaní exkluzívnych aplikácií. Základné formy, správanie a zamýšľaný účel (pozri kapitolu 13) by mali byť hnacou silou rozvoja vizuálneho štýlu, pričom estetické hľadiská by nemali zasahovať do prenosu významu v rozhraní a interakcie používateľa s produktom.

352 Kapitola 14 Návrh vizuálneho rozhrania Vzdelávacie a zábavné aplikácie (najmä zamerané na deti) zároveň ponechávajú väčší priestor na experimentovanie so štýlom. V takýchto prípadoch má vizuálny dojem vytvorený rozhraním aj obsah aplikácie vplyv na potešenie, ktoré používateľ získa z interakcie s aplikáciou; to slúži ako silný argument v prospech užšieho prepojenia medzi dizajnom ovládacích prvkov a obsahom. Aj tu však nezabúdajte na očakávaný účel umožniť používateľom rýchly prístup k informáciám.

Značka, spotrebiteľská skúsenosť a užívateľská skúsenosť Najúspešnejšie spoločnosti veľa investujú do budovania a udržiavania svojich značiek. Spoločnosť, ktorá si pestuje vlastnú značku, môže diktovať cenu svojich produktov a zároveň morálne podporovať lojalitu spotrebiteľov. Značka je indikátorom vysokej kvality produktu a predpokladá, že užívateľ ju bude preferovať na základe vlastného vkusu.

V najjednoduchšom zmysle slova je značka súhrnom všetkých interakcií ľudí s konkrétnou spoločnosťou. Keďže interakcie sa čoraz častejšie uskutočňujú prostredníctvom kanálov založených na technológiách, nie je prekvapením, že snahy firiem o vytvorenie „značkových“ rozhraní sú väčšie ako kedykoľvek predtým. Ak je cieľom neustála a pozitívna interakcia so spotrebiteľom, potom verbálne, vizuálne a behaviorálne (behaviorálne) posolstvá značky musia byť konzistentné a konzistentné. Napríklad, ak sa spotrebiteľ snaží zistiť ceny DSL služieb vo svojom okolí a zistí, že na webovej stránke telefónnej spoločnosti nie sú žiadne užitočné informácie (aj po značnom úsilí ich nájsť), odchádza s plnou dôverou, že spoločnosť samo o sebe - zriadenie je neslušné a nepríjemné. Žiadny dizajn na svete vás pred tým nezachráni. To isté platí pre ostatné kanály: ak človek nedostane odpovede, ktoré potrebuje, potom nezáleží na tom, že počítačový hlas znie priateľsky, systém akceptuje hlasový vstup a zástupca podpory ukončí rozhovor s prianím všetkého najlepšieho.

Hoci firmy vedia, ako pracovať so značkou vo vzťahu k tradičným marketingovým a komunikačným kanálom, už nejaký čas, mnohé z nich ešte len začínajú uvažovať o značkách z hľadiska používateľskej skúsenosti. Na pochopenie brandingu v kontexte používateľskej skúsenosti je užitočné pozrieť sa naň z dvoch perspektív: prvý dojem a dlhodobé vzťahy.

Rovnako ako pri medziľudských vzťahoch je prvý dojem z používateľského rozhrania mimoriadne dôležitý. Prvých päť minút komunikácie položilo základ pre dlhodobý vzťah. Aby bola táto prvá päťminútová komunikácia úspešná, používateľ

Princípy návrhu vizuálneho rozhrania

Používateľské rozhranie by malo prezentovať značku jasne a rýchlo. Pri vytváraní prvého dojmu spravidla zohráva hlavnú úlohu vizuálny dizajn – hlavne prostredníctvom obrázkov a farieb. Výberom správnej farebnej palety a štýlu obrázkov pre rozhranie podporujúce značku sa dostanete veľmi blízko k použitiu značky na vytvorenie pozitívneho prvého dojmu.

Podobné diela:

Mágia, ktorá prežila dodnes! Mágia je veda a umenie, v ktorom pokrok nestojí. Kniha je ukážkou toho, ako vyzerajú staroveké obrady, aby sa dali aplikovať aj dnes. Existuje vývoj, ale podstata vždy zostáva! Toto je kniha na čítanie znova a znova a je to vynikajúca referenčná kniha, ktorá sa vám bude hodiť počas celej vašej praxe. Druhy ... "

„Vladimir Petrovič Morozov Umenie a veda o komunikácii: Neverbálna komunikácia od editora Kniha ponúkaná čitateľom je druhým, opraveným a doplneným vydaním autorovej doteraz vydanej monografie „Neverbálna komunikácia v systéme verbálnej komunikácie. Psychofyziologické a psychoakustické základy. “-M .: Ed. IPRAN, 1998. Autorom monografie je profesor V.P. Morozov je dobre známy v kruhoch výskumníkov reči ako najuznávanejší odborník na neverbálne a najmä na ... “

«Roman Ingarden ŠTÚDIE ESTTETIKY Z poľštiny preložili A. Ermilov a B. Fedorov Vydavateľstvo zahraničnej literatúry, Moskva 1962 OBSAH: Predhovor. 5 [pri digitalizácii vynechané] Dvojrozmerná štruktúra literárneho diela. 2 Schematickosť literárneho diela. 40 Literárne dielo a jeho konkretizácia. 72 O rozdielnom chápaní pravdivosti („pravdy“) v umeleckom diele. 92 O odlišnom poznaní literárneho diela. 114 Estetický zážitok...»

«Alexander Fedorov «Pre» a «proti»: Kino a škola Populárno-vedecká publikácia analyzuje praktické skúsenosti dlhoročnej práce školskej filmovej fakulty. Ide o rozšírenú verziu (s dodatkami z roku 2002) knihy „Pre“ a „proti“, ktorú vydalo moskovské vydavateľstvo VBPK v roku 1987. Autorom je Alexander Fedorov, Ph.D. 1. Pred...“

«ASTRACHÁNSKÝ BULLETIN ENVIRONMENTÁLNEJ VÝCHOVY № 2 (32) 2015. s. 74-89 MDT 639.212.053.7:639.271.2 (262.81) VÝZNAM PRÍRODNÉHO SPORNINGU A UMELÉHO ŠTÚDIOVÉHO POĽNOHOSPODÁRSTVA PRI VZNIKU ZÁSOB JESETERA V KASPICKOM MORE Rozpočet Štátny výskumný ústav Raisa Pavlovna Chodorevskaja Štátny výskumný ústav Raisa Pavlovna Chodorevskaya [e-mail chránený] Liahne jeseterov, neresiská, migrácie na neres, beluga, jeseter ruský, jeseter hviezdicovitý, pomer prirodzených a...“

“Federálna štátna rozpočtová vzdelávacia inštitúcia vyššieho odborného vzdelávania “Čeljabinská štátna akadémia kultúry a umenia” BULLETIN MÚZEA Číslo 18 Čeľabinsk MDT 069 LBC 79.1 M89 Redakčná rada: Aleshko E. N., Grevtseva G. Ya., Lushnikova A. V., V. V., Ovchinnikova L. S., Bulletin múzea Terekhov A. N. / Čeľabinská štátna akadémia kultúry a umenia; komp. N. V. Ovčinnikovová. - Čeľabinsk, 2015. - Vydanie. 18. - 184 s., farebný. vrátane...“

«OBSAH ÚVOD .......... 5 VÝFUKOVÝ VENTIL AKO FUNKČNÝ PRVOK 1. VENTILÁTOR UMELÝCH PĽÚC. 11 Klasifikácia ventilátorov 1.1 ....... 11 Všeobecná schéma konštrukcie ventilátorov 1.2 ...... 14 Analýza typov konštrukcie výdychového ventilu 1.3 .. 15 Všeobecné požiadavky k výdychovému ventilu na základe jeho analýzy 1.4. funkčný účel ...... 19 Funkcia ukladania spontánnej respiračnej aktivity 1.4.1. pacient ......... 19..."

"S. Garanina Sergej Michajlovič Prokudin-Gorskij SERGEJ MICHAJLOVIČ PROKUDIN-GORSKY PROKUDIN-GORSKY Svetlana Garanina Svetlana Garanina profesorka Katedry knižnej vedy Profesorka Katedry knižných vied Moskovskej štátnej univerzity kultúry a umenia1 S. M. Prokudin-Gorskij. S. M. Prokudin-Gorskij. Štúdiový portrét. Londýn. štúdiový portrét. Londýn. 1910 alebo 1920. Z rodinného archívu. 1910 alebo 1920. Od...»

„Obsah 1. Bezhraničná sloboda Božskej duše (úvod).2 2. Spevácka koruna, tŕňová koruna (stránky života a tvorivej cesty)...5 2.1. Očami súčasníkov..9 2.2. Básnik-bojovník..10 2.3. Príde krvavá hodina a ja padnem.(Tragický súboj).11 3. Súlad slov živých..12 3.1. Texty..14 3.1.1. "Borodino" ..17 3.2. Básne..17 3.3. Próza..18 3.3.1. Román "Hrdina našej doby"

„Zoznam bezplatného obsahu č. Bezplatné zbierky Prístup k zbierke geografie Lan Publishing EBS Lan Publishing. Prístup do zbierky dejín umenia Vydavateľstvo Lan Publishing EBS Lan. Prístup do zbierky Právo. Právna veda Vydavateľstvo Lan Vydavateľstvo EBS Lan. Prístup do zbierky Psychológia. Pedagogické vydavateľstvo Lan Vydavateľstvo EBS Lan. Prístup do zbierky spoločenských a humanitných vied Lan Publishing EBS Lan Publishing. Prístup k zborníku Lingvistika a...»

"D. J. Schwartz The Art of Thinking Big The Magic of Thinking Big Vydavateľ: Popurri, 2007 Brožovaná, 304 strán ISBN 978-985-15-0037-2, 0-671-64678 Náklad: 6000 výtlačkov. LdGray Formát: 84x108/ Publisher The Art of Thinking Big pomohlo miliónom ľudí zlepšiť ich životy. Jeho autor, doktor David Schwartz, jeden z najznámejších odborníkov v oblasti motivácie, vám pomôže lepšie pracovať, lepšie riadiť, zarábať viac peňazí A čo je najdôležitejšie, cítiť...

"Mestská inštitúcia doplnkového vzdelávania" Detská umelecká škola č.3 "Lyubertsy okres Moskovskej oblasti SAMOSKÚMANIE v smere činnosti na rok 2014 V súlade s federálnym zákonom" O vzdelávaní v r. Ruská federácia"(v znení z 23.07.2013). 1. časť čl. 29. Časť 2 čl. 30, postup pri vykonávaní samovyšetrenia vzdelávacou organizáciou, schválený nariadením Ministerstva školstva a vedy Ruskej federácie zo dňa 14.06.2013 č. 462, nariadením Ministerstva školstva a vedy Ruskej federácie č. 10.12.2014. č. 1324, MU DO "Detská umelecká škola..."

VEREJNÁ SPRÁVA MBDOU č. 79 Oddiel I. Všeobecná charakteristika zariadenia 1. Typ, typ, postavenie: Mestská rozpočtová predškolská vzdelávacia inštitúcia všeobecného rozvojového typu s prioritnou činnosťou v niektorej z oblastí rozvoja detí č. 79 2. Licencia na vzdelávacie aktivity Séria RO č. 042931 Registračné číslo č. 2339 zo dňa 26.03.2012 Platnosť: neurčito 3. Lokalita, výhodná dopravná poloha Adresa sídla: 426063 UR...»

«Anotácia Táto diplomová práca je venovaná optimalizácii oblasti pokrytia digitálneho televízneho a rozhlasového vysielania v Aktau. V záverečnej práci sa berú do úvahy nasledovné témy: popis noriem digitálna televízia(DVB, ATSC a ISDB), popis jednofrekvenčnej siete a výber zariadenia na vybudovanie televíznej siete Boli vykonané nasledovné výpočty: výpočet intenzity poľa analytickou metódou; výpočet intenzity poľa z kriviek šírenia; výpočet Fresnelovej zóny; štúdia polomeru oblasti pokrytia;... "

"Ministerstvo kultúry Ruskej federácie Federálna štátna rozpočtová vzdelávacia inštitúcia vyššieho odborného vzdelávania "Čeljabinská štátna akadémia kultúry a umenia" SPRÁVA o samovyšetrení Federálnej štátnej rozpočtovej vzdelávacej inštitúcie vyššieho odborného vzdelávania "Čeljabinská štátna akadémia kultúry a umenia" " (k 1. aprílu 2015) Čeľabinsk 2015 Obsah 1. Všeobecné informácie o vzdelávacom ... "

„Charles William Morris Základy teórie znakov Nemo autem vereri debet ne characterum contemplatio nos a rebus abducat, imo contra ad intima rerum ducet. Gottfried Leibniz (Nikto by sa nemal báť, že nás pozorovanie znakov odvedie od vecí: naopak, vedie nás k podstate vecí. - Gottfried Leibniz (lat.)) I. ÚVOD. SEMIOTIKA A VEDA Ľudské bytosti sú najvyššie živé bytosti, ktoré používajú znaky. Samozrejme, nielen ľudia, ale aj zvieratá reagujú na niektoré veci ako na znaky niečoho ... “

«ISSN 1997-4558 PEDAGOGIKA UMENIA http://www.art-education.ru/AE-magazine № 4, 2014 VNÍMANIE VÝTVARNÉHO UMENIA A HUDBY V DUCHOVNOM VÝVOJI DETÍ V PODMIENKACH MÚZEA A HUDOBNÝCH SVOJOV MÚZEUM STOLYAROV BORIS ANDREEVICH STOLYAROV BORIS ANDREEVICH Doktor pedagogiky, profesor, vedúci katedry "Ruské centrum múzejnej pedagogiky a detskej tvorivosti" FGBUK "Štát ..."

“MINISTERSTVO ŠKOLSTVA A VEDY RUSKA Federálna štátna autonómna vzdelávacia inštitúcia vyššieho vzdelávania “Južná federálna univerzita” Akadémia architektúry a umenia Katedra dejín architektúry, umenia a reštaurovania architektúry Nino Samvelovna Esoyan ARCHITEKTÚRA GORGIPPIE MAGISTERSKÁ PRÁCA07.04 smer 0,01 (270100) Architektúra vedecký poradca- doc. Buchka Alexander Michajlovič Recenzent - doc. k.arch. Karpova Maria Alexandrovna Rostov na Done - 2015 Práca bola vykonaná na...»

„Budúcnosť nám otvára tie najveľkolepejšie vyhliadky. Lebo už odbila hodina začiatku veľkého cyklického návratu k mystickému mysleniu. Zo všetkých strán nás obklopujú vody oceánu univerzálnej vedy – vedy večného života, plného zabudnutých potopených pokladov minulých generácií. E.P. Blavatská H.P. BLAVATSKAYA WORKSHOP OKULTNÉHO VÝCVIKU _ Zostavila E. A. Logaeva Preklad z angličtiny: V. S. Zueva, V. I. Myznikov, T. I. Perebailova, T. O. Sukhorukova, Yu...“

C O L L O Q U I A | | ISSN 1822-3737 EVGENY DOBRENKO Socialistický realizmus a reálny socializmus (Sovietska estetika a kritika a tvorba reality) Abstrakt: Sovietske umenie nie je umením „pravdy“ (ako sa umiestnilo) alebo „klamstva“ (ako bolo opísané v sovietológia, emigrantské a disidentské diskurzy). Je mimo overenia a plní funkcie nie „odrazu reality“, ale derealizácie života pre jeho následnú premenu a nahradenie. To..."

2016 www.site - "Bezplatná elektronická knižnica - Knihy, edície, publikácie"

Materiály tejto stránky sú zverejnené na kontrolu, všetky práva patria ich autorom.
Ak nesúhlasíte s tým, aby bol váš materiál zverejnený na tejto stránke, napíšte nám, my ho odstránime do 1-2 pracovných dní.

Pri webdizajne je veľmi dôležité, aby sa používateľ necítil nepríjemne – je to ako pozerať sa na drez plný špinavého riadu. Ak je váš dizajn vizuálne nevyvážený, stránka bude vyzerať neusporiadane, čo môže spôsobiť, že sa používatelia budú cítiť nepríjemne. Naopak, váš dizajn by mal byť atraktívny a umožniť návštevníkom relaxovať, rozhliadnuť sa okolo seba a ešte viac Najlepšia cesta dosiahnuť tento efekt - vizuálnu rovnováhu. Vizuálna rovnováha je v podstate rovnováha dizajnových prvkov, ich umiestnenie je ako žonglovanie s vašimi dizajnovými prvkami.

Keď si predstavíme rovnováhu, najjednoduchšie je porovnať ju s pojmom váha. Fyzická hmotnosť a hmotnosť dizajnového prvku sú v skutočnosti veľmi podobné - fyzický objekt môže byť malý, ale veľmi ťažký bez ohľadu na hmotnosť, rovnako ako prvok vizuálneho dizajnu môže byť veľmi malý, ale veľmi pútavý. Ťažkosť fyzického objektu sa dá porovnať s vizuálnou brilantnosťou dizajnových prvkov a každý prvok interaguje s inými dizajnovými prvkami rovnakým spôsobom ako fyzické objekty.

Prečo vyvážené webové stránky vyzerajú dobre

Podvedome milujeme rovnováhu. Láska k udržateľným štruktúram je nám vlastná na podvedomej úrovni, nerovnováha naopak vyvoláva pocit odmietnutia.
Kľúčom k úspešnému dizajnu je teda vizuálna rovnováha. Je to tá iskra navyše, ktorú niektoré stránky majú a iné nie. Ďalšou výhodou je vyvážený dizajn, ktorý sa dobre spája s funkčnosťou.

Existuje niekoľko rôznych faktorov, ktoré vstupujú do práce s dizajnovými prvkami. Ako vyvažujete dva alebo viac prvkov vo vzájomnom vzťahu a ako prezentujete vizuálne vlastnosti prvkov, sú typ rovnováhy a vlastnosti rovnováhy.

Typy bilancie

Existuje niekoľko rôznych metód na vytvorenie rovnováhy. Môžete použiť tieto rôzne metódy organizovať a usporiadať prvky tak, aby pôsobili vyváženým dojmom, vďaka ktorému sa používatelia budú cítiť pohodlne. Zvážte päť hlavných spôsobov, ako dosiahnuť rovnováhu

Horizontálne vyváženie

Vertikálne vyváženie

Radiálne vyváženie

Symetrické vyváženie

Asymetrické vyváženie

Skvelý spôsob, ako vizuálne usporiadať prvky, je ich vyváženie pozdĺž osí - horizontálne alebo vertikálne. Horizontálne vyváženie – prvky umiestnite naľavo a napravo od kamaráta – ako na detskej hojdačke. Vertikálne vyváženie – predmety zavesíte zhora nadol pozdĺž stredovej osi.

Namiesto vyvažovania kompozičných prvkov pozdĺž centrálnych osí môžete vyvažovať aj prvky okolo stredu – radiálna rovnováha. V zásade môžete prvky umiestniť okolo stredovej osi alebo ako slnečný lúč.

Ďalším typom vyváženia, ktoré sa zvyčajne kombinuje s horizontálnym, vertikálnym a radiálnym vyvážením, je symetrické a asymetrické vyváženie. Symetrická rovnováha - keď sú obe strany kompozície navzájom zrkadlovými obrazmi - ako keby sa list papiera preložil na polovicu. Symetria je veľmi formálna, prísna rovnováha, ktorá je nenáročná na oči a je široko používaná pri navrhovaní budov alebo dispozičných riešeniach. Je tiež čoraz obľúbenejšia, pretože je ľahšie reprodukovateľná v akejkoľvek veľkosti.

Asymetria je pravdepodobne najbežnejšou formou rovnováhy. V podstate ide o opak symetrickej rovnováhy, v ktorej sú prvky vo vzájomnom pomere vyvážené. Asymetria je oveľa viac zaujímavým spôsobom ako symetria, pretože symetrii zvyčajne chýba vizuálna hierarchia, zatiaľ čo asymetrické rozloženia majú tendenciu mať vysokú vizuálnu hierarchiu. Asymetria však neznamená, že neexistuje žiadna rovnováha, znamená to jednoducho, že prvky nie sú umiestnené vo vzájomnom vzťahu.

Ako viete, ktorý typ zostatku by bolo vhodné teraz použiť? Vo všeobecnosti je symetria zvyčajne ľahšie vnímateľná. Preto je v dizajne bežnejší.

Ak je teda vaším cieľom sprostredkovať spoločnosti stabilitu a silnú organizačnú štruktúru. Na druhej strane, ak chcete sprostredkovať krehkosť toho, čo sa považuje za bezpečné, skúste efekt umocniť asymetriou. Asymetrie dodávajú iskru vizuálne bezpečnému dizajnu.

Pre symetriu je najlepšie použiť obsah približne rovnakých častí, rozptýlených po celom rozložení

Pri asymetrii je najlepšie upriamiť pozornosť na jeden konkrétny bod, vyrušujúci pohľad diváka.

rovnovážne vlastnosti

Každý objekt v akomkoľvek zložení má svoje vlastné charakteristiky, ako aj vlastnosti interakcie s inými objektmi. Hlavné vlastnosti v rovnováhe: veľkosť, farba, tvar, veľkosť a poloha. Každá z týchto vlastností môže byť použitá jednotlivo na vytvorenie symetrickej rovnováhy a kombinácia týchto vlastností je nevyhnutná na vytvorenie rovnováhy v asymetrickej kompozícii - zmena jedného prvku ovplyvní ostatné atď.

Veľký prázdny objekt má ľahkú vizuálnu váhu, a preto ho možno vyvážiť menším, ale sýtejším objektom. Napríklad blog s oblasťou obsahu a bočným panelom – oblasť obsahu je zvyčajne väčšia ako bočný panel. Môžete ich vyvážiť pridaním viac bieleho priestoru do oblasti obsahu a vyplnením bočného panela niečím vizuálne ťažším. Ak chcete dosiahnuť symetrickú rovnováhu vo svojom dizajne, musíte sa uistiť, že prvky majú rovnakú veľkosť bez ohľadu na vizuálnu váhu.

Farba objektu v kompozícii môže zmeniť vizuálnu závažnosť prvkov. Viac tmavé farby vizuálne ťažšie ako jemné svetlé farby – červená je vizuálne ťažšia ako žltá, pretože priťahuje viac pozornosti. Ak sa snažíte vyvážiť tmavý prvok iným alebo viacerými svetlými prvkami, môžete sa skúsiť pohrať s inými vlastnosťami vyváženia, prípadne zmeniť farbu pozadia okolitých prvkov.

Tvar prvkov môže drasticky zmeniť rovnováhu kompozície. Vlnité alebo zubaté tvary sú vizuálne zaujímavejšie, a preto aj ťažšie ako tvary s veľmi jednoduchými, rovnými líniami. Nesnažte sa vyvážiť viacero prvkov zložitým tvarom, radšej vyvážte zložitý a jednoduchý predmet.

Kontrast môže byť mimoriadne dôležitým faktorom kompozičnej vyváženosti. Čím vyšší je kontrast objektu, tým je ťažší a naopak. Existuje niekoľko spôsobov, ako vyvážiť prvky rôzne úrovne kontrast, jedným z nich je kompenzovať nízky kontrast prvku ostrým kontrastom pozadia alebo textúry. Môžete tiež pridať jednoduché okraje, prechody a tiene na zníženie kontrastu prvkov.

Poloha

Toto je dôležitý faktor a túto vlastnosť možno použiť na vyváženie iných prvkov, ktoré sa líšia tvarom, farbou, hmotnosťou a veľkosťou. Ako sme už povedali, veľký predmet je ťažší ako malý, no ich hmotnosť závisí aj od toho, ako blízko je k stredu obce. Objekty bližšie k stredu vážia viac ako objekty vzdialenejšie od neho, takže ak máte blízko stredu napríklad veľký červený objekt, môžete ho od stredu posunúť, prípadne do stredu presunúť iné objekty.

Ako pridať rovnováhu na stránku

Ako teda urobíte stránku vyváženú? Vezmime si ako príklad najjednoduchšie symetrické vyváženie. Prázdny obsah vyzerá dosť fádne, tak pridajme menu. Ak sa pozriete na takmer každý dobrý dizajn, môžete vidieť, že menu je navrhnuté „ťažšie“ ako text. Tu prichádza najprimitívnejšia rovnováha – malý ťažký prvok vyvažuje objemný, no ľahký text. Začnite navrhovať rozloženie načrtnutím potrebných prvkov. Tieto pravidlá vám pomôžu vyhnúť sa chybám:

Moderné tendencie a prístupy k vývoju webu

Naučte sa algoritmus pre rýchly rast od nuly pri vytváraní webových stránok

Veľké predmety sú ťažšie ako malé

Tmavé predmety sú ťažšie ako svetlé.

Nasýtené farby sú ťažšie ako vyblednuté

Čím je okraj hrubší, tým je ťažší

Čím je textúra väčšia, tým je predmet s ním ťažší

Okrem horizontálneho typu vyváženia nezabudnite na vertikálne a radiálne

Teplé svetlé farby ako oranžová a červená sú ťažšie ako studené farby (modrá, zelená)

Pravidlo tretín

Vo výtvarnom umení existuje niečo ako pravidlo tretín - vtedy je pracovný priestor mentálne rozdelený na 9 rovnakých častí 2 zvislými a 2 vodorovnými čiarami. Takže podľa tohto pravidla by sa hlavné kompozičné centrá mali nachádzať na priesečníku týchto čiar.

Ako teda rozdeliť rozloženie na 9 rovnakých častí?

1. Predstavte si, že celý pracovný priestor je obyčajný obdĺžnik

2. Mentálne rozdeľte jeho vertikálnu časť na 3 rovnaké časti a nakreslite 2 rovnobežné čiary.

3. To isté pre horizontálnu zložku

Dodržiavanie pravidla tretín nastavuje väčší záujem o obsah ako pri bežnom centrovaní.

Príklady s vysvetlením

Na stránke MacAllan Ridge vidíte asymetrické rozloženie blokov. Objemný blok s obrázkom je však vyrovnaný hrubými okrajmi bloku menu. Pomerne bežný akt rovnováhy.

9 odpovedí

tu je môj trik, dúfam, že pomôže. /

v prvom rade na objasnenie dizajn a rozvoj

dizajn je koncepčná práca, tvorba konceptu riešenia, proces eliminácie vecí, o ktorých si myslíte, že, cítite a veríte, že nie sú vhodné ako riešenie vášho zamýšľaného cieľa.

rozvoj je vypracovanie konečnej špecifikácie/nápadu (aspoň teoreticky) alebo niečoho, čo dáva zmysel a je blízko tomu, čo hľadáte (hoci v mnohých prípadoch to tak nie je) v podstate transformácia vášho návrhu/nápadu do fungujúceho finále produktu

Poznámkaže obe veci môžu a vo väčšine prípadov koexistujú vedľa seba pri výrobe produktu

teraz, keď je to nespravované, visual, web, ux, ui sú len podkategórie konceptuálneho konceptu, pričom každá, hoci založená na princípe dizajnu, má tiež svoje vlastné vesmíry a svoje vlastné čiastkové pravidlá a čiastkové postupy, ktoré sa priamo vzťahujú na ich príslušné čiastkové a v mnohých prípadoch sa môže zdať, že sa šíria z jednej podkategórie do druhej.

z môjho chápania a toho, čo som sa za tie roky naučil,

dizajn interakcie(neplatí pre oblasť) - pojem / chápanie toho, ako jeden / jednotlivec interaguje s entitou a ako rozvíjať proces interakcie tejto osoby s entitou. týmto objektom môže byť čokoľvek, čo si vyberiete, napríklad vaše auto alebo hriankovač, webový prehliadač a webová stránka, ktorú si prezeráte v prehliadači.

vizuálny dizajn(neplatí pre oblasť) - pojem / chápanie estetickej príťažlivosti a vplyvu predmetu, s ktorým sa človek stretáva / pozerá

vzhľad stránky(pre konkrétnu oblasť) – koncepcia/pochopenie myšlienky, ktorá je špecifická pre technológiu (technológie) a zahŕňa aspekty niekoľkých koncepcií dizajnu, ako napríklad: interakčný dizajn, vizuálny dizajn, dizajn používateľského rozhrania, používateľ dizajn rozhrania atď. .d.

(neplatí pre oblasť) - koncept dizajnu používateľského rozhrania, ktorý zase zahŕňa vizuálny a interakčný dizajn, ako aj obmedzenia v oblasti, v ktorej sa takáto dizajnérska práca vyskytuje.

užívateľské rozhranie(niektoré špecifické pre danú oblasť) – koncept navrhovania rozhrania, prostredníctvom ktorého môže používateľ interagovať s produktom, gui v softvéri/webovej aplikácii alebo volantom v aute

vývoj používateľského rozhrania(neplatí pre oblasť) je proces transformácie konceptu dizajnu používateľského rozhrania na pracovné rozhranie, ktoré vytvára fyzické spojenie medzi jednotlivcami a produktom.

Dúfam, že to pomôže

Dizajn používateľského rozhrania – ako používateľ myslí a cíti
Informačná architektúra – ako je systém organizovaný
Dizajn používateľského rozhrania – ako je organizovaný obsah
Návrh interakcie – ako používateľ a zariadenie konajú a reagujú
Vizuálny dizajn - ako to vyzerá

Niektoré alebo všetky vyššie uvedené disciplíny sú súčasťou nasledujúcich oblastí:
Architektúra, keď súvisí s budovami
Interiérový dizajn v súvislosti s vnútornými priestormi
Priemyselný dizajn spojený s hmotnými predmetmi
Grafický dizajn súvisiaci s textom a obrázkami
Návrh aplikácie týkajúci sa digitálnych I/O
Webový dizajn súvisiaci s prehliadačom

Interakčný konštrukt - Výskumná entita, definuje INTERAKCIU/SPRÁVU systému/aplikácie. Vizuálny dizajn – Umelec, ktorý ilustruje grafiku, môže byť webovým médiom/tlačovým médiom/.atď. Webový dizajn – umelec, ALE len pre WEBOVÉ APLIKÁCIE Dizajn UX – Výskumný personál, ktorý rozumie všetkému a všetkému zo STRANY POUŽÍVATEĽA a riadi sa skúsenosťami POUŽÍVATEĽSKÉ UŽÍVATEĽSKÉ UŽÍVATEĽSTVO HAPPY/SMILEY Dizajn – Rovnako ako Web Design Vývoj používateľského rozhrania – Frontend Developer – HTML, CSS, JS, JQuery, Ajax, YUI, Php, Silverlight.net.etc.atď. Akákoľvek technológia rozhrania knd.

Dovoľte mi to zorganizovať jednoduchým/jednoduchým spôsobom UX DIZAJN INTERAKTÍVNY DIZAJN POUŽÍVATEĽSKÉ ROZHRANIE /WEB/VIZUÁLNY DIZAJN VÝVOJ POUŽÍVATEĽSKÉHO ROZHRANIA

Moja odpoveď na túto otázku:

Interakčný dizajn- je konštruktívny aspekt spojený s pojmom užitočnosť. Výber vizuálnych prvkov nie je určený estetickými princípmi, ale tým, nakoľko je dizajn pre návštevníka stránky užitočný a ako mu zjednoduší a zoptimalizuje zážitok.

Príklad prístupu: Je okrúhle tlačidlo vhodné pre naše cieľové publikum alebo štvorcové?

Dizajn > a dizajn používateľského rozhrania znamená estetické vnímanie. Jediný rozdiel medzi vizuálnym dizajnom a dizajnom používateľského rozhrania je v tom, že prvý je komplexnejší a zahŕňa všetko od tlačidiel, ikon a rozložení až po plagáty, zatiaľ čo druhý neobsahuje bannery so zameraním najmä na ikony/tlačidlá/tematickú stránku aplikácie.

UX dizajn podobný konceptu „Interaction Design“, ale je v tomto ohľade viac „hardcore“ a popisuje logický prístup k použiteľnosti, ako je napríklad logická architektúra webovej stránky, určená potrebami používateľa. Ide o proces plánovania, projektovania a rámcovania, vytvárania prvkov a poskytovania systému a ďalším krokom je návrh interakcie.

nakoniec UX spojené s konceptom náčrtov a drôtového modelu, UI podľa toho dokončí dizajn (pridá tému, webové bezpečné písma a farebnú paletu) a vývoj používateľského rozhrania je proces opätovného vytvárania dizajnu počas kódovania.

Viac si o tom môžete prečítať v Interaction Foundation: https://www.interaction-design.org/literature?ep=mb

Skutočný problém, ktorý musíme vyriešiť, je rozdiel medzi UI, interakciou a UX.

Tu je ďalšia SVETOVÁ PRVÁ HĺBKOVÁ DISKUSIA o takýchto rozdieloch.

(1) UI znamená, ako sa používateľ „díva“ na systém/aplikáciu a ako sa systém/aplikácia „rozpráva“ s používateľom. Vzhľad aplikácie, veľkosť, rozloženie, farby, fonty, displej, rovnako ako osvetlenie obchodu, výška a šírka police, šírka a dĺžka ostrova atď.

(2) Interakcia znamená, ako používateľ „pôsobí“ na systém/aplikáciu a ako systém/aplikácia „pôsobí“ na používateľa. Tu si veľa požičiavam z knihy Chrisa Crawforda The Art of Interaction Design: A Selfish and Illuminating Guide to Building Successful Software.

Postuluje, že dobrá interakcia je ako dobrá konverzácia a že dobrá konverzácia má tri základné atribúty, ktoré vysvetlím v príklade nižšie. Hovorí, že dobrý interaktívny účastník „počúva“, „premýšľa“ a reaguje v primeranom čase.

Osoba/aplikácia iba počúva. Potom to nie je interaktívne, napr. záznamník, kniha, stena

Osoba/aplikácia len hovorí. Potom to nie je interaktívne, napr. rádio, starý televízor, starý CD prehrávač

Osoba/aplikácia len rozpráva a počúva, ale nepremýšľa. napríklad niektoré automatické odpovede, niektoré sociálne diery

(3) UX Vzhľadom na rovnaké rozhranie a rovnakú interakciu dostaneme rovnaké UX? Môžu sa vôbec zmeniť?

napríklad. Povedzme, že existuje vyhľadávací nástroj, ktorý funguje rovnako ako Google. Ale „máte pocit“ alebo „tušíte“, že tento nový vyhľadávač zhromažďuje príliš veľa vašich osobných údajov.

Interakčný dizajn je pre mňa o používateľskej skúsenosti, ale zameriava sa aj na správanie a pochopenie potrieb publika. Pre mňa to nie je nevyhnutne o samotnom dizajne, ale o tom, ako je dizajn použitý. Čo ma najviac priťahuje k interakčnému dizajnu, je myšlienka, že interakčný dizajn nie je len o navrhovaní väčšieho množstva toho, čo už existuje, ale aj o vytváraní dizajnov, ktoré v súčasnosti neexistujú.

zdieľam