Vybrané a aktivní prvky. Buďte tolerantní k chybám uživatelů
Volný překlad článku Jakuba Linowskiho – „Dobré uživatelské rozhraní“.
Dobré uživatelské rozhraní má vysokou míru konverze a snadno se používá. Jinými slovy, je to dobré jak pro obchod, tak pro lidi, kteří jej používají. Níže je uvedena řada praktických nápadů, které můžete vyzkoušet.
Nápad 1: Zkuste použít rozvržení s jedním sloupcem namísto rozvržení s více sloupciUspořádání s jedním sloupcem umožňuje větší kontrolu nad příběhem. Bude schopen vést vaše uživatele tím nejpředvídatelnějším způsobem – shora dolů. Vícesloupcový přístup představuje riziko, že uživatel může být odveden od hlavního účelu stránky. Veďte lidi příběhem a výzvou k akci na konci. 
Přátelské gesto, jako je darování kupujícímu, je přesně to, co je potřeba. Na hlubší úrovni jsou dárky také účinnou přesvědčovací taktikou založenou na principu reciprocity. Jakkoli to může znít jako samozřejmost, malé známky uznání se hodně vyplatí. 
Při práci můžete neúmyslně vytvořit více sekcí a prvků, které plní stejnou funkci. Toto je běžná entropie, kdy se systém časem stane neuspořádaným. Nepoužívejte různé názvy pro stejné funkce, abyste nezvýšili informační zátěž vašich zákazníků. Čím fragmentovanější je uživatelské rozhraní, tím strmější je křivka učení a tím obtížnější je pro klienta pochopit, co se od něj požaduje. Refaktorujte uživatelské rozhraní a spojte podobné funkce dohromady. 
Sociální důkaz je další taktika přesvědčování, která může zvýšit konverze.
Doporučení o vás a vaší nabídce mohou uživatele motivovat k akci. Ujistěte se, že tato doporučení nebo názory jsou přítomny. 
Opakování výzvy k akci se hodí spíše na delší stránky nebo se používá opakování na více stránkách. Samozřejmě nechcete, aby se nabídka objevila 10x na jedné stránce a otravovala lidi. Dlouhé stránky se staly normou a snažit se vměstnat vše na první obrazovku už není dobrý nápad. Není nic špatného na provedení jednoho hovoru v horní části stránky, jemné připomenutí uprostřed a špendlík na konci. Když se lidé dostanou na konec stránky, zastaví se a přemýšlejí o tom, co dál, a pak je čas udělat nabídku nebo uzavřít obchod. 
Výrazná zařízení, jako je barva, hloubka a kontrast, lze použít jako silné značky, které odrážejí základní jazyk navigace rozhraní: kde jsem a kam mohu jít. Chcete-li jasně sdělit tuto myšlenku uživatelům, musíte použít různé vizuální styly pro prvky, které slouží různým účelům (odkazy, tlačítka, výběry a obsah), tyto rozdíly je třeba jasně vyjádřit a je třeba je používat stejným způsobem. v celém rozhraní.
Obrázek ukazuje příklad, kdy modrá je vybrána pro označení čehokoli, na co lze kliknout, a černá pro vše, co bylo vybráno nebo ukazuje, kde se nacházíme. Při správném použití bude pro lidi mnohem snazší se mezi takovými tipy orientovat. Neztěžujte uživatelům život – nenarušujte sémantické kódování. 
V případech, kdy se zobrazuje více nabídek, může být dobré zvýrazněné doporučení produktu, protože někteří lidé potřebují trochu pošťouchnout. Některé psychologické výzkumy naznačují, že čím širší výběr, tím menší je pravděpodobnost, že rozhodnutí bude vůbec učiněno a realizováno. Abyste zabránili takovéto paralýze analýzy, zkuste některé možnosti zdůraznit a zvýraznit nad ostatními. 
Představte si, že jste právě klikli na platné tlačítko nebo odkaz. Zrušení akce respektuje původní záměr uživatele tím, že umožňuje okamžité provedení akce s možností zrušení. Žádosti o povolení k akci na druhé straně znamenají pro uživatele, že neví, co dělá, a zpochybňují tak jejich záměry. Jednání člověka nejčastěji odrážejí jeho skutečné záměry a jen ve vzácných situacích jsou náhodné. Neefektivnost a nízká kvalita popisků je zvláště patrná, když uživatelé musí akce opakovat a popisky se budou objevovat mnohokrát, znovu a znovu: to je špatná zkušenost. Zkuste dát svým uživatelům větší kontrolu: zrušte akci a nežádejte o potvrzení, kde je to možné. 
Jasně identifikujete své publikum, nebo oslovujete všechny najednou? Tato myšlenka zvýšení konverzí je o tom, aby bylo jasné, pro koho je váš produkt nebo služba určena. Když oslovíte své publikum, zdůrazněte určité vlastnosti svých kupujících. To posune komunikaci s nimi na novou úroveň a přidá jistý nádech exkluzivity a elitářství. Možným rizikem této strategie je, že pokud oznámíte nějaká omezení, můžete odříznout část svého potenciálního publika. V tomto případě pomůže transparentnost nabídky: poctivost plodí důvěru. 
Můžete lidi oslovovat s nejistým chvěním v hlase, nebo můžete s jistotou říci totéž. Pokud každou větu končíte otazníky, použijte slova jako „možná“, „to by bylo skvělé“, „máte zájem?“ nebo „chtěli byste to zkusit?“, pak máte každou příležitost ke své zprávě přidat přesvědčování. Kdo ví, možná někdy stojí za to říct lidem další krok k optimalizaci konverzí? 
Čím jasněji a ostřeji se vaše výzvy k akci odlišují od ostatních prvků stránky, tím lepší bude vaše rozhraní a tím silnější bude. Kontrast hlavních cílových akcí lze zvýšit různými způsoby. Pomocí sytosti můžete některé prvky ztmavit proti světlejším a pomocí hloubky můžete věci přiblížit proti jinému obsahu, který se objeví dále (použijte stíny a přechody). Nakonec si můžete vybrat doplňkové barvy z barevného kruhu (jako je žlutá a fialová), abyste vzhled ještě vylepšili. Neměli byste se však nechat příliš unést: kontrast mezi obsahem a hlavní akcí by měl být vyvážený. 
Informace o vás, vašem produktu nebo službě vám umožní dosáhnout osobnější úrovně v komunikaci s vaším klientem. Dobrým způsobem, jak se představit, je uvést svou zemi, stát nebo město původu. Pokud tuto radu dokážete prakticky aplikovat, pak se přístup k vám stane přátelštější. Zmínit, kde byl produkt vyroben, je často dobrý způsob, jak zvýšit kvalitu produktu. 
Lidé od přírody nemají rádi časově náročné úkoly a to plně platí i pro vyplňování formulářových polí. Každé pole, které vyžaduje odpověď od uživatele, jej může vyprovokovat k opuštění stránky. Navíc ne všechna zařízení umožňují rychlé psaní textu na mobilních zařízeních. Pokuste se zachovat pouze povinná pole a odstraňte co nejvíce polí. Pokud je povinných polí opravdu hodně, bude lepší je vyplnit po odeslání hlavního formuláře na samostatné stránce nebo pomocí doplňkového formuláře. Rozšíření formuláře je snadné, ale méně polí může zvýšit konverze. 
Každá rozbalovací nabídka, kterou používáte, skrývá sadu akcí, jejichž nalezení vyžaduje zvláštní úsilí. Pokud jsou tyto skryté možnosti zásadní pro to, aby uživatel provedl akci, může být vhodné zvýšit jejich prioritu na stránce. Zkuste vytvořit rozevírací nabídku pro ty možnosti, které jsou zřejmé a nevyžadují od uživatele nové znalosti: výběr data a času (například kalendáře) nebo zeměpisné polohy. Někdy mohou položky rozevírací nabídky fungovat v těch rozhraních, se kterými musí uživatel čas od času provádět akce. Buďte opatrní při používání rozevíracích seznamů pro položky v hlavní cestě vyprávění. 
Stránky s dvojitým dnem jsou zabijáky konverzí. Ano, každý je již zvyklý listovat dlouhými stránkami, ale je důležité, aby návštěvníci nevzbudili falešný dojem, že stránka skončila dříve, než ve skutečnosti skončí. Pokud stránka vyžaduje posouvání, nastavte vizuální nebo sémantický rytmus, který uživateli jasně naznačí, že má přijít další. Buďte opatrní s velkými mezerami v oblastech „skládání“, kde se může objevit okraj obrazovky (samozřejmě mám na mysli podmíněné zóny, protože je obtížné poskytnout všechny možnosti pro různá zařízení). 
Na umístění více odkazů na různá místa na stránce není nic složitého v naději, že uspokojíte co nejvíce potřeb potenciálních zákazníků. Když však vytvoříte narativní stránku, jejímž účelem je navést uživatele ke konkrétní cílové akci, dobře si to rozmyslete. Nezapomeňte, že jakýkoli odkaz před hlavní cílovou akcí zvyšuje riziko odchodu uživatele ze stránky a odvádí pozornost od toho, co od něj očekáváte. Sledujte počet odkazů a tam, kde je to možné, najděte rovnováhu mezi rozšiřujícími stránkami (s trochu více odkazy) a stránkami „tunelu“ s méně odkazy a vyššími konverzemi. Vyčištění nepotřebných odkazů jistě zvýší vaše šance, že se dostanete k důležitému tlačítku. 
Překlad článku designéra Erica Kennedyho „7 Rules for Creating Gorgeous UI“, který publikoval na svém vlastním blogu se seznamem sedmi pravidel pro vytváření krásných UI.
Řeknu vám o pravidlech pro vytváření krásných a čistých rozhraní.
Zde jsou pravidla:
Existuje jen několik spolehlivých metod, jak krásně překrýt text na obrázku. Řeknu vám pět a ještě jednu jako speciální bonus.
V případě, že chcete být dobrým profesionálním návrhářem uživatelského rozhraní, měli byste se naučit, jak překrýt text na obrázek tak, aby vypadal krásně a byl příjemný na pohled. To dnes umí každý dobrý návrhář rozhraní a bohužel ten špatný ne. Proto již po přečtení tohoto článku budete mít obrovskou výhodu!
Překryjte text přímo na fotografieNechtěl jsem tuto metodu zahrnout. Ale technicky je docela možné dát text přímo na fotku tak, aby vypadala normálně.
Vydra surfovací prkna. Vypadá instagramově a hipstersky. Text se ale čte trochu obtížně
S touto metodou existuje mnoho rizik a problémů:
To je jasné? Pokuta! Od této chvíle nikdy neměňte fotografii a text a vše bude v pořádku.
Nepamatuji si, že bych tuto metodu někdy ve své práci použil. Ale s jeho pomocí je docela možné dosáhnout opravdu skvělého výsledku, ale buďte opatrní.
Web expedice Aquatilis. Určitě byste se na to měli podívat, pokud jste to ještě neudělali.
Ztmavte celý obrázekPravděpodobně nejjednodušší metodou, jak do fotografie přidat text, je její ztmavení. Pokud původní fotografie není příliš tmavá, můžete ji překrýt průsvitnou černou barvou.
Zde je moderní, velmi barevná fotografie se stínováním.
Upstart používá 35% černý filtr
Pokud přejdete do vývojářské konzole a odstraníte filtr, uvidíte, že samotná fotografie je příliš světlá a kontrastní na to, aby byl text zcela čitelný. S tmavým filtrem však nejsou žádné potíže!
Tato metoda také funguje skvěle pro malé obrázky.
Černý filtr je zdaleka nejjednodušší a nejuniverzálnější, ve skutečnosti můžete použít i barevné filtry.
Toto je další spolehlivý a jednoduchý způsob. Nakreslete černý, mírně průhledný obdélník a umístěte na něj bílý text. Pokud je váš obdélník dostatečně tmavý, můžete pod ním mít prakticky jakoukoli fotografii a text bude stále čitelný.
Koncept aplikace pro iPhone od Miguela Olivy Marqueze
Zde můžete použít i barvu, ale v rámci rozumu.
Dobrou metodou, jak učinit text čitelnějším, je rozmazat část obrázku.
Ve Snapguide je většina obrazu rozmazaná. Všimněte si, že je ztmavený
Tato metoda se stala obzvláště populární bezprostředně po vydání iOS 7, ale byla široce používána ve Vista.
Namísto rozmazání můžete použít i část fotografie, která je neostrá. Buďte však opatrní – tato možnost není tak dynamická.
Pokud se obraz náhle změní, ujistěte se, že pozadí zůstává rozmazané.
Stačí si přečíst podnadpis níže.
V této verzi je obrázek směrem dolů mírně ztmavený a nahoře je umístěn bílý text. Toto je velmi chytrá technika a nevím, jestli ji někdo používal před Medium, ale tam jsem to viděl.
Náhodný uživatel si může dobře myslet, že v kolekcích Medium je bílý text aplikován přímo na obrázek. To ale vůbec není pravda! Od středu obrázku dolů je mírně patrný černý přechod (průhlednost - od 0 do přibližně 20 %).
Není snadné si toho všimnout, ale rozhodně to tam je a výrazně to zlepšuje čitelnost celého textu.
Všimněte si také, že Střední aplikuje na text při překrývání miniatur kolekce mírný stín, což zlepšuje čitelnost. Díky tomu může Medium překrýt téměř jakýkoli text na jakýkoli obrázek a dosáhnout velmi dobrých výsledků.
Proč je potřeba obrázek ve spodní části ztmavit? Přečtěte si odpověď na tuto otázku v pravidle č. 1: světlo vždy dopadá shora. Aby pro lidské oči vypadal co nejpřirozeněji, měl by být obrázek ve spodní části o něco tmavší, jako každý jiný objekt, který vidíme.
Další moderní a pokročilá metoda: rozostření a ztmavení.
Proč má blog Elastica velmi čitelné názvy na každém obrázku?
Všechny obrázky v tomto případě:
- není nijak zvlášť tmavý;
- docela kontrastní.
Odpověď je převlek (scrim).
Scrim je difuzér, speciální fotografické zařízení, díky kterému je světlo mnohem měkčí. Jedná se také o speciální techniku v grafickém designu, která pomáhá „zjemnit“ obrázek a učinit text ještě čitelnějším.
Pokud oddálíte webový prohlížeč na stránce blogu Elastica, uvidíte, co se tam děje.
Kolem hlavičky je zvláštní průsvitné pozadí se sotva znatelným ztmavnutím. Je mnohem snazší si toho všimnout na modrém plném pozadí než na kontrastních fotografiích.
Toto je pravděpodobně nejcitlivější metoda překrývání textu. Nikde jinde jsem ho nepotkal (je dost mazaný). Však si to označte sami. Protože najednou to jednou budete potřebovat.
Tajemství, jak vytvořit kopii krásnou a relevantní, je použít kontrast. Můžete ji například udělat větší, ale tenčí.
Textový design je jednou z nejobtížnějších částí vytváření příjemného rozhraní. Ale vůbec ne kvůli nedostatku možných možností. Pokud jste absolvovali základní školu, pravděpodobně znáte různé metody zvýrazňování textu. Tento:
- Velikost (text lze zmenšit nebo zvětšit).
- Barva (můžete snížit nebo zvýšit kontrast, jasné barvy vždy přitahují pozornost).
- Sytost (písmo může být tenčí nebo tlustší).
- Velká písmena (text lze psát velkými nebo malými písmeny).
- Kurzíva.
- Vypouštění (nebo sledování).
- Okraje (netýkají se samotného textu, ale lze je použít k upoutání pozornosti, a proto jsou také zahrnuty v tomto seznamu).
Jsou zde pole, barva a velká písmena.
Existují i jiné metody, i když bych je opravdu nedoporučoval:
- Podtržení. V současné době by se podtržení mělo používat pouze pro odkazy.
- barevné pozadí. Tato metoda není běžná, ale 37signals ji již nějakou dobu používá k označení odkazů na svých webových stránkách.
- Přeškrtnutí. Vítejte v 90. letech!
Z vlastní zkušenosti, pokud nemohu najít "správný" styl pro svůj text, není to proto, že bych nezkoušel velká písmena nebo tmavší barvu, ale proto, že nejlepším řešením je často kompetentní kombinace "opačných" stylů.
Zapuštění a zvýrazněníVšechny metody výběru textu jsou rozděleny do dvou skupin:
- Metody, které snižují viditelnost textu: snížení kontrastu, velikosti, okrajů.
- Metody, které zvyšují viditelnost textu: zvýšení sytosti, velikosti, použití velkých písmen.
Budeme jim říkat metody pro „zapuštění“ a „zvýraznění“ textu. Nebudeme jim říkat „vizuální váha“, protože to je nuda.
Název "Material Design" je zvýrazněn mnoha způsoby. Je velmi kontrastní, velký a odvážný.
Text v zápatí je naopak zapuštěný. Má nízký kontrast, je malý a má pravidelný styl.
A teď to nejdůležitější.
Názvy stránek jsou jediným prvkem na webu, který je třeba zvýraznit. Všechny ostatní prvky musí být zapuštěny a zvýrazněny současně.
Pokud potřebujete zvýraznit konkrétní prvek, použijte metody pro zapuštění a zvýraznění textu současně. To vám pomůže vyhnout se nepřehlednému rozhraní a zároveň dát vašim různým prvkům vizuální váhu, kterou potřebují.
Vyváženost vizuálních stylů
Web Blu Homes je příkladem vynikajícího designu. Je tam velký nadpis, ale slovo, které je zdůrazněno, je napsáno malými písmeny. Velká část výběru by vypadala docela nadbytečně.
Čísla na sebe upozorňují barvou, velikostí a umístěním – všimněte si však, že jsou také zapuštěná s tenčím písmem a méně kontrastní barvou než tmavě šedá.
Podpisy pod čísly, přestože jsou malé a šedé, jsou psány tučnějším písmem a velkými písmeny.
Všechno je to o rovnováze.
Časopis Contents je dobrým příkladem vkládání a zvýrazňování textu.
- Titulky článků jsou jediným prvkem na stránce, který není kurzívou. V tomto případě přitahuje pozornost (zejména spolu s tučným písmem) absence kurzívy.
- Jméno autora je zde uvedeno tučně. Na rozdíl od slova „by“, které je napsáno běžným písmem.
- Malý, nízkokontrastní podpis „JIŽ VEN“ zde nikoho neobtěžuje. Ale díky velkým písmenům, poměrně velkorysým rozestupům a velkým polím okamžitě upoutá pozornost.
Izolace aktivních prvků rozhraní je ještě obtížnější úkol.
Zpravidla platí, že pokud změníte velikost písma, jeho styl nebo malá písmena na velká, změní se celá plocha, kterou text zabírá. Takové změny mohou vést k neočekávaným výsledkům.
Co dělat?Může být použito:
- Barva textu
- Barva pozadí
- Zdůraznit
- Malá animace (zvedání a spouštění)
Zde je jedna osvědčená metoda: udělejte všechny bílé prvky barevné nebo barevné prvky bílé, ale ztmavte pozadí.
Vybraná ikona se stala bílou, ale přesto si zachovala kontrast vzhledem k pozadí
Závěr: naučit se zvýraznit text je poměrně obtížné. Pokaždé, když se mi něco nepovedlo, uvědomil jsem si, že se musím zlepšit. A abyste byli lepší, musíte to zkusit.
Používejte pouze dobré fontyPozor: v této sekci nenajdete žádná tajemství. Uvedu jen řadu dobrých a bezplatných písem, které lze použít.
Stránky s charakteristickým znakem mohou používat odlišná písma. Většina rozhraní však vyžaduje něco jednoduchého a čistého.
Protože tento článek je pro ty, kteří studují. Mezi moderními bezplatnými fonty existuje mnoho hodnotných možností. Proč je tedy nevyužít?
Stáhněte si je tedy nyní pro svůj další produkt.
Ubuntu přichází v mnoha stylech. Pro některé programy je to velmi specifické, pro jiné ideální. Vždy si jej můžete stáhnout z Google Fonts.
Otevřete Sans
Open Sans je oblíbené písmo a je velmi dobře čitelné. Skvělé pro text těla. Vždy si jej můžete stáhnout z Google Fonts.
Bebas Neue
Bebas Neue je skvělá pro titulky. Skládá se pouze z velkých písmen. Lze stáhnout z webu Fontfabric. Můžete tam také vidět příklady aplikací.
Montserrat
Montserrat je k dispozici pouze ve dvou stylech, ale to stačí. Toto písmo je nejlepší bezplatnou alternativou k Proxima Nova a Gotham, ale není tak dobré jako oni. Lze stáhnout z Google Fonts.
Raleway funguje dobře pro titulky. Možná trochu moc na hlavní text (ta „ws“!). Typ písma Ultralight (není na obrázku) vypadá docela pěkně. Vždy si jej můžete stáhnout z Google Fonts.
Kabinu lze vždy stáhnout z Google Fonts.
Lato lze vždy stáhnout ze služby Google Fonts.
PT Sans lze vždy stáhnout z Google Fonts.
Entypo Social
Včetně například Proximy Nova.
Krást jako umělecKdyž jsem se poprvé pokusil vytvořit návrh rozhraní – ať už to byla tabulka, tlačítko, graf nebo něco jiného – byl jsem si dobře vědom toho, jak málo znalostí mám k tomu, aby takové prvky byly krásné.
Naštěstí jsem nemusel vymýšlet žádné prvky rozhraní, které již neexistovaly. V každém okamžiku se tak mohu podívat na to, co dělají ostatní, a vybrat si to nejlepší.
Kde ale tyto příklady hledat? Zde je několik specializovaných stránek, které mi byly užitečné. Tedy v sestupném pořadí.
1. DriblingToto je portál pro moderní designéry, který je přístupný pouze na pozvání. Zde najdete díla nejvyšší kvality. A vlastně jakékoli příklady.
Pár lidí k následování.
- Viktor Ericson. Má dost specifický styl. A to potěší. Čistý, krásný design v plochém stylu. Navrhuje teprve tři roky a už teď je považován za jednoho z nejlepších.
- Zaměřovací laboratoř. Tito lidé jsou hvězdy Dribbble. Jejich práce této pověsti odpovídá. Extrémně rozmanité a vždy nejvyšší třídy.
- Kosmin Capitanu. Další dobrý designér. Všechna jeho díla vypadají nesmírně futuristicky, ale rozhodně ne nevkusně. Skvěle se pracuje s barvou. Ve skutečnosti se však nezaměřuje na UX. Pravda, to je problém s driblinkem obecně.
Práce Focus Lab, Victor Erixon a Cosmin Capitanu
2. Plochá nástěnka uživatelského rozhraníNevím, kdo je „warmarc“, ale jeho nástěnka Pinterest s příklady různých mobilních rozhraní byla neuvěřitelně nápomocná při hledání skvělých příkladů pokaždé.
3.PttrnsToto je galerie různých screenshotů mobilních programů. Na Pttrns je skvělé, že celý web je vytvořen pomocí vzorů UX. To značně usnadňuje vyhledávání v závislosti na tom, na jakém konkrétním prvku rozhraní právě pracujete, ať už jde o registrační stránku, výsledky vyhledávání, osobní účet a tak dále.
Jsem přesvědčen, že každý dnešní umělec musí kopírovat, dokud nedokáže napodobit to nejlepší dílo. A teprve poté může hledat svůj vlastní styl a vytvářet nějaké nové trendy.
Mezitím krást jako umělec)
Název této části je mimochodem převzat ze stejnojmenné knihy, kterou jsem bohužel nečetl, protože mám podezření, že její hlavní myšlenka je plně odhalena již v názvu.
Tento článek jsem přeložil, protože bych si ho opravdu přál přečíst před pár lety. Opravdu doufám, že vám to pomůže.
Pokud jste UX designér, udělejte krásnou maketu ihned po načrtnutí plnohodnotného prototypu.
Pokud jste vývojář, posuňte to na další úroveň a ujistěte se, že váš produkt je krásný. K tomu nemusíte vystudovat nějaký umělecký institut. Musíte jen pozorovat, napodobovat a říkat svým přátelům, co funguje a co ne.
Instrukce
Nejjednodušší způsob, jak vytvořit programové rozhraní, je použít programovací prostředí od Borland. V závislosti na použitém jazyce to může být Borland C++ Builder nebo Borland Delphi. Obě programovací prostředí jsou si velmi podobná a liší se pouze použitým jazykem.
Nainstalujte a spusťte programovací prostředí. Otevře se okno programu a v něm uvidíte šedý obdélník. Toto je okno návrháře formulářů nebo jednoduše šablona pro rozhraní vašeho budoucího programu, je označeno jako Form1. Kliknutím na název formuláře můžete na levé straně programu v okně inspektoru objektů zadat požadovaný název. V tomto případě budete muset zadat název programu do řádku Titulek.
Určete velikost budoucího okna programu, jednoduše roztáhněte tvar pomocí myši. Protože jste již začali vytvářet rozhraní programu, znamená to, že máte promyšlený algoritmus jeho fungování a víte, jaké prvky by rozhraní mělo obsahovat. Potřebujete například tlačítko. V horní části okna programovacího prostředí najděte řádek s vizuálními komponentami a vyberte kartu Standardní. Najděte na něm obrázek tlačítka (říká OK) a jednoduše jej přetáhněte myší do formuláře.
Umístěte tlačítko na požadované místo ve formuláři. V případě potřeby změňte jeho velikost. Nyní pojmenujte tlačítko – například Otevřít. Chcete-li to provést, klikněte na tlačítko a v okně inspektoru objektů zadejte do řádku Titulek název tlačítka – Otevřít.
Stejným způsobem můžete do formuláře přetáhnout další potřebné prvky rozhraní - okna pro zadávání a výstup textu, panely pro obrázky, ozdobné rámečky, přepínače, rozevírací seznamy atd. a tak dále. Každý prvek, který přetáhnete do formuláře, můžete upravit tak, jak chcete. Skupiny prvků, které se na něm nacházejí, můžete po formuláři přesouvat tak, že je vyberete myší. To je výhodné, když potřebujete trochu posunout, například několik tlačítek najednou.
Existuje řada komponent, které budete často používat, tedy přetahování do formuláře, které se však nezobrazí v okně hotového spuštěného programu. Například přetáhněte komponenty Otevřít dialog a Uložit dialog z karty Dialogy. Umístěte je někam do spodní části okna tak, aby nepřekážely. Pomocí těchto komponent můžeme implementovat postup pro otevírání souborů a jejich ukládání. Podobných komponentů je mnoho, budete je často používat.
Po vytvoření rozhraní programu jej stačí jen naplnit životem – tedy zadat potřebné řádky do okna editoru kódu. Poté začne rozhraní vašeho programu reagovat na akce uživatele. Více o práci s programy Borland si můžete přečíst v příslušné literatuře.
Mluvili jsme o pravidlech pro vytváření čistých a krásných rozhraní.
Toto jsou pravidla:
Existuje jen několik spolehlivých způsobů, jak krásně překrýt text na obrázku. Řeknu vám pět a ještě jednu jako bonus.
Pokud chcete být dobrým návrhářem uživatelského rozhraní, musíte se naučit překrývat text na obrázcích tak, aby vypadal dobře. To umí každý dobrý návrhář rozhraní a špatný ne. Takže po přečtení tohoto článku už budete mít výhodu!
Metoda #0: Překrytí textu přímo na fotografiiTuto metodu jsem ani nechtěl zahrnout, ale je technicky možné překrýt text přímo na fotografii a vypadat dobře.
Černý filtr je nejjednodušší a nejuniverzálnější, ale můžete použít i barevné filtry.
Toto je další jednoduchý a spolehlivý způsob. Nakreslete mírně průhledný černý obdélník a umístěte na něj bílý text. Pokud je obdélník dostatečně tmavý, můžete pod ním mít téměř jakoukoli fotografii a text bude stále čitelný.
Koncept aplikace pro iPhone od Miguela Olivy Marqueze
Zde můžete použít i barvu, ale v rámci rozumu.
Růžový koncept od Marka Conlana
Kupodivu dobrý způsob, jak učinit text čitelným, je rozmazat část obrázku.
Ve Snapguide je velká část obrazu rozmazaná. Všimněte si, že je také ztmavený
Tato metoda se stala obzvláště populární po vydání iOS 7, i když byla široce používána ve Vista.
Místo rozmazání můžete použít i tu část fotografie, která je neostrá. Ale pozor – tato možnost není tak dynamická. Pokud se obraz náhle změní, ujistěte se, že pozadí zůstává rozmazané.
Teehan + Lax
Chci říct, zkuste si přečíst podnadpis dole.
V této verzi je obrázek směrem dolů mírně ztmavený a nahoře je umístěn bílý text. Toto je velmi chytrá technika a nevím, jestli ji někdo používal před Medium, ale tam jsem to viděl.
Náhodnému pozorovateli se může zdát, že kolekce Medium mají bílý text aplikovaný přímo na obrázek. Ale to není pravda! Od středu obrázku ke spodní části je jemný přechod černé (s průhledností od 0 do přibližně 20 %).
Není to tak snadné si všimnout, ale rozhodně to tam je a rozhodně to zlepšuje čitelnost textu.
Všimněte si, že Střední používá při překrývání miniatur kolekce mírný stín v textu, což dále zlepšuje čitelnost. V konečném důsledku může Medium překrýt libovolný text na libovolném obrázku a dosáhnout dobrých výsledků.
Možná se ptáte, proč je potřeba obrázek ve spodní části ztmavit? Přečtěte si odpověď na tuto otázku v pravidle č. 1 – světlo vždy dopadá shora. Aby naše oči vypadaly co nejpřirozeněji, měl by být obrázek ve spodní části mírně tmavší, stejně jako jakýkoli jiný objekt, který vidíme.
Další pokročilá metoda: ztmavení a rozmazání.
Název "Material Design" je zvýrazněn různými způsoby. Je velký, velmi kontrastní a zvýrazněný tučným písmem.
Text v zápatí je naopak zapuštěný. Je malý, nekontrastní a má pravidelný styl.
A teď to nejdůležitější.
Názvy stránek jsou jediným prvkem na webu, který je třeba pouze zvýraznit. Zbývající prvky je třeba zvýraznit a zároveň zapustit.
Pokud potřebujete zvýraznit prvek, použijte obě metody pro zvýraznění a zapuštění textu současně. To pomůže zabránit tomu, aby se rozhraní stalo ohromujícím, ale zároveň to poskytne různým prvkům vizuální váhu, kterou potřebují.
Vyváženost vizuálních stylů
Web Blu Homes je příkladem dokonalého designu. Je tam velký nadpis, ale zdůrazňované slovo je napsáno malými písmeny – příliš mnoho zvýraznění by vypadalo nadbytečně.
Čísla na sebe přitahují pozornost velikostí, barvou a umístěním - všimněte si však, že jsou současně zapuštěna s tenčím písmem a méně kontrastní barvou než tmavě šedá.
Podpisy pod čísly, přestože jsou šedé a malé, jsou psány velkými písmeny a tučným písmem.
Všechno je to o rovnováze.
Časopis Contents je dobrým příkladem zvýraznění a zapuštění textu.
- Názvy článků jsou jediným prvkem na stránce, který není psán kurzívou. V tomto případě upoutá pozornost (zejména v kombinaci s tučným písmem) absence kurzívy.
- Jméno autora je zvýrazněno tučně – na rozdíl od slova „by“, psané běžným fontem.
- Malý, nízkokontrastní podpis „JIŽ OUT“ nikoho neobtěžuje. Ale díky velkým písmenům, velkorysým mezerám a velkým okrajům okamžitě upoutá pozornost.
Izolace aktivních prvků je ještě obtížnější úkol.
Obvykle, pokud změníte velikost písma, jeho styl nebo malá písmena na velká, změní se oblast, kterou text zabírá. A to může vést k neočekávaným výsledkům.
co potom dělat?
Může být použito:
- barva textu;
- barva pozadí;
- stíny;
- podtržení;
- malá animace (zvedání, spouštění atd.).
Zde je osvědčená metoda: zkuste udělat bílé prvky barevné nebo barevné prvky bílé, ale ztmavte pozadí.
Vybraná ikona zbělá, ale zachovala si kontrast s pozadím
Závěr je tento: naučit se zvýraznit text je velmi obtížné. Pokaždé, když se mi něco nepovedlo, uvědomil jsem si, že se musím zlepšit. A abyste byli lepší, musíte to zkusit.
Pravidlo č. 6: Používejte pouze dobré fontyPozor: v této sekci nenajdete žádná tajemství. Uvedu jen několik dobrých bezplatných písem, které můžete použít.
Stránky s velmi výrazným charakterem mohou používat odlišná písma. Ale většina rozhraní potřebuje něco čistého a jednoduchého.
Stáhněte si je tedy nyní pro svůj další projekt.
Všechna písma, která jste si stáhli, naleznete v aplikaci Písma na kartě Uživatel.
Ubuntu
Ubuntu přichází v mnoha příchutích. Pro některé aplikace je příliš specifický, pro jiné dokonalý. Lze stáhnout na Písma Google.
Otevřete Sans
Open Sans je oblíbené písmo, které se snadno čte. Dobré pro text těla. Lze stáhnout na Písma Google.
Bebas Neue
Bebas Neue je skvělá pro titulky. Skládá se pouze z velkých písmen. Můžete si jej stáhnout na webu Fontfabric a tam vidět příklady použití.
Montserrat
Montserrat je k dispozici pouze ve dvou stylech, ale to stačí. Toto písmo je nejlepší bezplatnou alternativou ke Gothamu a Proxima Nova, ale není zdaleka tak dobré jako oni. Lze stáhnout na Písma Google.
Raleigh
Raleway je v pořádku pro titulky, možná trochu moc pro text těla (ta „ws“!). Velmi pěkně vypadá písmo Ultralight (není na obrázku). Lze stáhnout na Písma Google.
Chata
Lato
PT Sans
Entypo Social
Když jsem se poprvé pokusil vytvořit design rozhraní - ať už to bylo tlačítko, tabulka, graf nebo cokoli jiného - uvědomil jsem si, jak málo znalostí mám k tomu, aby byly prvky krásné.
Ale naštěstí jsem nikdy nemusel vymýšlet prvky rozhraní, které ještě neexistovaly. To znamená, že se mohu vždy podívat na to, co dělají ostatní, a vybrat si to nejlepší.
Kde ale tyto příklady hledat? Zde je několik stránek, které mi nejvíce pomohly. V sestupném pořadí.
1. DriblingToto je portál portfolia pro návrháře pouze pro pozvánky. Najdete zde díla té nejvyšší kvality. A téměř všechny příklady.
Dlouho mi trvalo, než jsem se chystal začít psát článek, takže když jsem to dělal v posledních dnech, myslím, že to bylo místy pomačkané a křivé. Ale doufám, že mi to odpustíte: Čukchi je spisovatel, ale je velmi zaneprázdněn svými vlastními záležitostmi, myslím, že mě mnoho lidí zná z mých, hromady knih, které jsem publikoval na fóru, a také z toho já" nějaký druh houba z hory“, která vyrábí dveře v průmyslovém měřítku.
Začnu zpovzdálí: BotUI je nové rozhraní pro nastavení projektu, které má nahradit staré a nepříliš použitelné „Nastavení příchozí pošty“ pro šablony/boty. Objevil se ve verzi 5.11.0.0 a nyní je aktivně doplňován a rozvíjen téměř s každou novou verzí. Slibná inovace pro ty, kteří vyrábějí šablony „na objednávku“ nebo na prodej „do několika rukou“. Prostřednictvím tohoto rozhraní můžete provést velmi krásná nastavení, která vám pomohou pracovat se šablonou, aniž byste znali samotný ZennoPoster. Pokud jsem slyšel, do budoucna se plánuje jejich uvedení do takové podoby, aby klient vůbec nemohl spustit ZennoPoster/ZennoBox a pracovat se šablonou pouze z BotUI (opravte mě, jestli se pletu, ale zdá se, že někde na fóru jsem četl přesně toto). Píšu tento článek a uvádím příklady pomocí nejnovější aktuální verze ZennoPoster 5.12.3.0.
SpoilerTarget">Spoiler: Předmluva
Když jsem se hlásil do soutěže, chtěl jsem jen vyhodit pár příkladů, které by se dle mého subjektivního názoru mohly hodit (i když sám BotUI nepoužívám, ale). Ale při psaní tohoto článku jsem si toho všiml nějaké nedostatky ze strany vývojářů a napadlo mě, že pomocí takového nástroje, jako je „soutěžní článek“ - mohu se jim věnovat můj vnitřní perfekcionista prostě nemůže nechat beze stopy nějakou chybu, kterou v tomto úžasném softwaru najde. kterou s velkou radostí používám přes 2 roky.
Začnu proto tím, co mě při psaní článku zaujalo:
- Z nějakého důvodu v kódu BotUI dochází k načítání skriptu Google Analytics, a to tak, že se nikdy nenačte (kvůli nesprávně zadanému protokolu file://). Zde je tento úryvek z kódu:
- Cesta k "_all-skins.min.css" je zapsána nesprávně při načítání bude vždy 404 a tyto styly nejsou zahrnuty. Fragment kódu:
- Styl „pointer-events: none;“, který zůstal a stále zasahuje do testovacího kódu v prohlížeči (v té diskusi byla navržena víceméně pohodlná možnost, ale tato data se zjevně k vývojářům prostě nedostala).
- Cesty ke stylům a JS závisí na verzi ZP, ve které tvůrce šablon vytvořil svůj projekt. Pokud kupující šablony takovou verzi nainstalovanou nemá, pak s největší pravděpodobností (netestoval jsem, ale tuším), že bude nutné zkopírovat obsah složky HtmlEditorContent z verze ZP zapisovače šablon. Jinak se může všechno pokazit Ve skutečnosti je to důležité a stojí za to vzít toto chování v úvahu při vývoji BotUI.
- Při přidávání prvků do rozhraní není kód zarovnán, vše skončí v nepořádku. Žádné odsazení, žádné prázdné řádky, vše na jednom místě. Navíc v některých případech jsou rodičovské tagy div buď „přilepeny“ do jednoho řádku s podřízenými prvky (vstup/textarea/button), nebo jsou na samostatných řádcích. Úprava takového kódu je naprosté peklo, ale ve všech mých testovacích šablonách jsem kód naformátoval tak, aby nezpůsoboval cukání očí při prohlížení těchto příkladů.
- Také na konci bloku jsou přednastavené styly, nejsou naformátované, ale „vyplivnuté“ tak, jak jsou, kvůli velkým odsazením před nimi - kód vypadá velmi neohrabaně.
- Když přidáte tlačítko, atribut se k němu automaticky přidá onclick="userOnClickXX()" a tato funkce není definována v js (ale prázdná ještě přidáno). Ve skutečnosti stačí přidat tento obslužný program pouze tehdy, když je nějaká akce výslovně specifikována v poli „OnClick“ na panelu „Properties“.
- AlignToGrid (zarovnání mřížky pixelů) nefunguje při přesouvání prvků pomocí „šipek“ – posunou se vždy o 1 pixel. Ale při změně velikosti pomocí myši to jde. (Toto nemusí být chyba, ale stojí za to mít na paměti)
- Při změně ElementId pro zaškrtávací políčko je z nějakého důvodu nastaveno na tag label, a ne na tag input (i když například pro vstupní heslo je vše v pořádku). Správnější je použít id pro vstup a předat jej štítku pomocí atributu „for“.
- Proč je na panelu nástrojů prvek „Label“, ale ve skutečnosti je do kódu přidán běžný div? Je to převzato z návrháře prvků pro nějaké desktopové IDE (například VisualStudio)? Pak je prostě logičtější pojmenovat tento prvek „Text“, protože Rozhraní je html kód a v něm je význam pojmu „Label“ zcela jiný.
- Písmo prvku "Label" nelze v nastavení změnit, i když je načteno několik písem najednou a v zásadě je to možné.
- Není možné pracovat se značkami přidanými rukama. To znamená, že pokud někde v kódu přidám svůj vlastní prvek, pak jej nelze podle toho vybrat a přesunout/smazat.
- Pokud přidáte prvek Tab a následně jej změníte (alespoň zarovnáte kód) v editoru, pak když do jeho obsahu přidáte další prvky, nelze je upravovat/vybírat/mazat.
- Pokud přeformátujete kód a změníte id nadřazeného divu na "Translate Service", nebude možné jej vybrat v editoru rozhraní BotUI.
- Zdá se, že číslování ID v přidaných prvcích je globální pro všechny otevřené šablony po dobu trvání relace ProjectMaker. Z nějakého důvodu po vytvoření nového projektu a přidání prvku tam nezačíná 0 nebo 1, ale jde s trojcifernými čísly (a pokud vytvoříte několik šablon za sebou, tato čísla se vždy zvýší, ale nejsou „resetovat“). Proč se tak stalo, zůstává záhadou.
- Poslední šablona používá pro animaci knihovnu CSS třetí strany a z nějakého důvodu nefunguje v ZennoPoster, ačkoli v rozhraní „View“ v ProjectMakeru vše funguje perfektně.
- Také při použití animate.css z nějakého důvodu hlavní hlavička „škube“ při provádění některých efektů, ačkoli s tím není nic spojeno.
Rozhraní BotUI je html+css+javascript, které se spouštějí ve vestavěném prohlížeči. Vzhledem k tomu, že pomocí tlačítka „Otevřít kód“ můžete upravovat vzhled rozhraní, můžete tam dělat téměř vše, co lze nyní provádět na běžných stránkách. Dokonce mám podezření, že můžeme přidat iframe a použijte ji k upozornění klientů na vydání nové verze šablony nebo na něco důležitého.
Ve skutečnosti je jQuery knihovna JavaScript, pomocí které můžete manipulovat s prvky HTML na stránce (v našem případě s tlačítky, selektory, textem a tak dále). Moje verze ZennoPoster používá jquery verze 3.1.1 v rozhraní BotUI (to zjistíte, když se podíváte do zdrojového kódu rozhraní přes výše uvedené tlačítko a najdete „jquery-3.1.1 .min.js“).
jQuery je velmi oblíbená a stará knihovna, která vám umožňuje psát víceméně normální kód v JS a nestará se o to, jak bude vše fungovat v různých prohlížečích (ale to pro nás nyní není důležité, ale stojí za to to vědět).
Veškerá dokumentace o interakci s jQuery se nachází na: http://api.jquery.com/ - ano, je v angličtině, ale můžete najít i popis v ruštině, pouze spíše bude tam hodně zastaralých informací. Ale základní principy a věci by měly a budou fungovat, ale odkazujte se na původní zdroj – vždy byste měli odkazovat na původní dokumentaci.
A jak to „sníst“ (použít)?
Rád bych napsal velmi podrobný návod na používání jQuery a JavaScriptu obecně, ale obávám se, že budu kopat do plevele, takže některé věci uvedu bez dlouhého vysvětlování "Jak? Proč? A proč?" . Myslím, že pokud jste si javascript/jQuery nikdy „neosahali“, bude vše komplikované a nebude to na první pohled patrné (zvláště po desktopových programovacích jazycích, bugger). Proto vám doporučuji přečíst si nějaké staré, ale stále relevantní články a knihy o tom, jak se spřátelit s JavaScriptem/jQuery:
Minimálně byste měli vědět, co jsou html, css, selektory, handlery a metody.
Obecně platí, že vývoj webu vám umožňuje dělat chyby a ve skutečnosti se nestará o to, že se to nestane 100% času. Specifika nejsou stejná, ne odpalování raket
Ale přesto musíte vědět, jak svůj kód otestovat a bude to velmi užitečné. Podle mého názoru je nejjednodušší a nejúčinnější testování a kódování pro BotUI následující:
Od jednoduchého ke složitému a pak zpět k jednoduchému
Schopnost používat jQuery v rozhraní botů dává obrovskou fantazii, aby je bylo možné přizpůsobit a učinit je nejen krásnými, ale také pohodlnými pro klienta. Ale vzhledem k tomu, že existuje obrovské množství variací, jak jej používat, není možné zvážit úplně všechny možnosti. Proto budu psát jen o těch způsobech práce s ní, které jsou u nás podle mého názoru nejoblíbenější.
Při přidávání libovolného prvku (tlačítko, textový vstup, výběr možností) do rozhraní je prvek samotný přidán do html pohledu a jeho nadřazeného obalu, tagu div. U značky div Vždy Existuje atribut id, přes který se dostanete k prvku (nebo samotnému rodičovskému tagu div), a také můžete nastavit jedinečný identifikátor pro samotný prvek pomocí pravého panelu "Vlastnosti" -> karta "Upřesnit" -> Jiné - > ElementId. Toto je důležitý úvod, musíte si jednou provždy zapamatovat tuto metodu přístupu ke konkrétnímu prvku nebo jeho základní/nadřazené značce.
Další velmi důležitou odbočkou je částečné opakování předchozích odstavců. Stojí za to připomenout, že veškerý kód, který napíšete do jQuery, musí být umístěn pod načítáním samotné knihovny jquery, ale ideální možností by bylo umístit kód před uzavírací značku. Kromě toho stojí za zmínku, že kód jQuery musí být zabalen do speciální konstrukce, která zabrání spuštění kódu, dokud se stránka plně nenačte (v našem případě ne kritické, ale je lepší se tohoto standardu držet). Vypadá to takto:
Skrytí/zobrazení prvků
Existují alespoň 3 způsoby, jak skrýt nebo zobrazit prvek pomocí jQuery:
Kód (javascript):
$("#element1" ) .css ( "zobrazit" , "žádný" ) ; // skryje značku s id element1
$("#element1" ) .css ( "zobrazit" , "blok" ) ;
Ve skutečnosti to není příliš správná metoda, protože... Budete muset samostatně dokončit proces získání hodnoty a kontroly aktuálního stavu. Je lepší použít tuto metodu k nastavení některých css ke změně.
Kód (javascript):
$("#element1" ) .hide () ; // skryje značku s id element1
$("#element1" ) .zobrazit () ; // zobrazí značku s id element1
Toto řešení opět není vždy správné, ale je mnohem lepší než první a používá se k zamýšlenému účelu.
Kód (javascript):
$("#element1" ) .přepnout () ;
// získat aktuální stav tagu s id=element1 a skrýt jej, pokud je viditelný, nebo naopak zobrazit, pokud je skrytý
V podstatě se tento přístup používá ke skrytí nebo zobrazení prvku při nějaké události. Když například kliknete na tlačítko, skryjete některá data, se kterými je spojeno, a když kliknete znovu (pokud není zadána jiná logika), skrytá data znovu zobrazíte.
Kód (javascript):
// přidejte obslužnou rutinu (pro akci kliknutí) pro tlačítko "skrýt" pomocí jeho id="btn_css1"
$("#btn_css1" ) .on ("kliknutí" , funkce () (
$("#90" ) .css ( "zobrazit" , "žádné" ) ; // skryje textové pole pomocí nadřazené značky s id="90"
} ) ;
Takto vypadá rozhraní této šablony:
Přidává výše uvedené metody a jejich ovladače s metodami pro různé akce vybranými jednoduše na základě mých preferencí. Ve skutečnosti můžete pro jakoukoli akci použít jakékoli handlery.
Získávání a změna dat prvků
jQuery má několik metod pro práci s daty prvků, ale všechny se od sebe výrazně liší:
Při volání této metody na nejvyšším prvku DOM:
innerHtml). Může také zapisovat data v html reprezentaci uvnitř tagu.
Příklad, který vysvětluje podstatu této události: pokud aplikujeme událost .change() na značku select, pak při změně hodnoty obdržíme tuto hodnotu uvnitř předané anonymní funkce, tzn. Událost bude zpracována a poté, v závislosti na prvku vybraném uživatelem, můžeme sestavit vlastní logiku. Ano, je to trochu komplikované, ale když se podíváte na poslední příklad v šabloně, okamžitě bude jasné, o čem mluvíme
Vizuální efekty
Vizuální efekty jsou nedílnou součástí krásného designu, takže manipulace s nimi v jQuery je co nejjednodušší a nejpohodlnější. Pro práci s animací a efekty se obvykle používají následující metody:
Pozornost! Z nějakého důvodu efekty použité v animate.css odmítly fungovat v ZennoPoster, ačkoli fungovaly v ProjectMakeru, takže obrázek pochází odtud. Počkáme, až se to vyřeší.
Doslov alias závěry
jQuery je mocný a zajímavý nástroj pro ty, kteří rádi tvoří věci, které jsou skutečně krásné a vysoce kvalitní. Měli jsme štěstí, že to vývojáři hned zařadili do BotUI, nyní bude vytvářet příchozí nastavení stejné umění jako napsat dobrou šablonu. Ano, samozřejmě, moc se s tím nebude trápit, ale mezi tvůrci šablon si své publikum rozhodně najde.
V tomto článku jsem popsal naprosté minimum toho, co nyní můžete udělat, takže vaším nejlepším přítelem by měla být oficiální dokumentace – pokrývá všechny metody a události a také přidává mnoho příkladů. Ale pokud je pro vás obtížné začít, například proto, že neumíte anglicky, měli byste věnovat pozornost učebnicím a článkům v ruštině, které jsem citoval na začátku článku. Obecně platí, že pokud umíte HTML/CSS a alespoň trochu javascript, knihovna jQuery není tak složitá, pokud jasně chápete, co je potřeba udělat, tak řešení bude někde na povrchu, no, nikdo Google nezakazoval obrovské množství příkladů a zvážených mnoho situací, které mohou při vaší práci nastat. Pokud hledáte řešení, vždy se najde!
Děkuji, že jste dočetli až do konce, doufám, že vás to zaujalo a dozvěděli jste se něco nového.
Potěší mě, když bude tato publikace přínosná především pro soudruhy a soutěž je desátá věc
