Historie firemního designu v nové knize od Apple. Co je to "Apple styl"? A to je všechno

Úvod

Pokud jde o design, existuje jedna společnost, kterou nelze nevzpomenout. To je společnost Apple – každý produkt, který mají, je výsledkem práce týmu designérů. Web této společnosti také vždy přitahoval pozornost.

V této lekci vytvoříme galerii - slideshow „a la“ Apple. Přibližně to samé je použito na webu Applu k prezentaci produktů společnosti. K jeho vytvoření nepotřebujeme PHP ani databázi.

KROK 1 – XHTML

Podívejme se blíže na označení XHTML:

Myšlenka je velmi jednoduchá - existují dva hlavní kontejnery DIV - jeden s id=”menu” obsahuje náhledy, druhý “slides” obsahuje samotné snímky.

Chcete-li přidat nový snímek, stačí přidat nové prvky do obou kontejnerů. Snímky - obrázky ve formátu JPG, náhledy - průhledný PNG. Ale můžete použít i jiné formáty.

Můžete také vložit libovolný HTML kód. Z konkrétního snímku můžete například vytvořit odkaz ve formě obrázku.

Je velmi důležité, aby snímky měly stanovenou výšku a šířku – používá je jQuery k určení oblasti posouvání.

Věnujte pozornost také prvkům miniatur LI. Prvnímu je přiřazena třída fbar pro zobrazení vertikálního dělícího pruhu. Ostatním prvkům je přiřazena třída menuItem a používají se jako ovládací tlačítka prezentace.

Přejděme k dalšímu kroku.

Krok 2 – CSS

Pojďme se podívat na náš stylový list.

Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label( /* Reset stránky */ margin:0px; padding:0px; ) body( /* Nastavení výchozí barvy textu, pozadí a zásobník písem */ color:#444444; font-size:13px; pozadí: #f2f2f2; -webkit-box-shadow:0 0 3px #AAAAAA box-shadow:0 0 3px #AAAAAA radius-bottomleft:4px -webkit-border-bottom-left-radius: 4px; 4px; -moz-border-radius-dolniprava:4px; 4px; overflow:hidden ) #slides( /* Toto je oblast snímku */ výška:400px; /* jQuery později změní šířku na součet šířek všech snímků. */ width:920px; overflow:hidden; ) .slide( float:left; ) #menu( /* Toto je kontejner pro miniatury */ height:45px; ) ul( margin:0px; padding:0px; ) li( /* Každá miniatura je prvek li */ width:60px; display:inline -block-style:none; overflow:hidden; ,li.act:hover( /* Aktivní stav palce */ background:url(img/active_bg.png) bez opakování; ) li.act a(kurzor:výchozí; ) .fbar( /* Levý- nejvíce svislý pruh, vedle první miniatury */ šířka:2px background:url(img/divider.png) no-repeat right ) li a( display:block; background:url(img/divider.png) no-; opakovat vpravo výška:35px;

V této šabloně stylů jsme použili několik vlastností CSS3:

* box-shadow, v rozích galerie je malý stín. Pomocí této vlastnosti - musíte zadat souřadnice X a Y (zde 0 0), rozostření (v našem příkladu 3px) a barvu stínu;
* border-radius, kulaté okraje ve spodní části galerie.

Bohužel tyto vlastnosti momentálně fungují pouze v Safari, Chrome a Firefox.

Nyní je čas na kouzlo jQuery.

KROK 3 – jQuery

Budeme potřebovat následující kód:

$(document).ready(function())(
/* Tento kód se spustí po úplném načtení DOM */

var totWidth=0;
var position = new Array();

$("#slides .slide").each(function(i)(
/* Projděte všechny snímky a uložte jejich akumulované šířky do totWidth */
position[i]= totWidth;
totWidth += $(this).width();

/* Pole pozic obsahuje komutativní posun každého snímku od levé části kontejneru */

if(!$(this).width())
{
alert("Prosím, vyplňte šířku a výšku všech svých obrázků!");
vrátit false;
}
});

$("#snímky").width(totWidth);

/* Změňte šířku cotnainer div's na přesnou šířku všech snímků dohromady */

$("#menu ul li a").click(funkce(e)(

/* Klikněte na miniaturu */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("akt");

var pos = $(this).parent().prevAll(".menuItem").length;

$("#slides").stop().animate((marginLeft:-positions+"px"),450);
/* Spusťte posuvnou animaci */

e.preventDefault();
/* Zabránit výchozí akci odkazu */
});

$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* Při načtení stránky označte první miniaturu jako aktivní */
});

Hlavní myšlenkou je, že snímky se cyklicky opakují, šířka snímků se sečte a tato šířka se přiřadí kontejneru. Vzhledem k tomu, že snímky jsou zarovnány doleva, mají dostatek místa k sezení vedle sebe.

Když kliknete na miniaturu, skript vypočítá, který snímek se má zobrazit, a posouvá je přiřazením záporné hodnoty odsazení pomocí metody animace.

Stačí 40 řádků kódu a naše galerie prezentací je připravena!

Závěr

Stačily nám jen tři kroky k vytvoření super krásné galerie ve stylu Apple. Může ozdobit jakýkoli web.

Kdysi byl Apple známý svou schopností vyvíjet jednoduché a srozumitelné produkty. Byla zastáncem grafických rozhraní, v nichž uživatelé mohli intuitivně chápat, jaké akce mají k dispozici a jak je lze vybrat. Po dokončení té či oné operace dostali lidé vždy jasnou zpětnou vazbu a měli možnost vše zrušit, pokud výsledek nesplnil jejich očekávání.

To vše ale skončilo. I když produkty Apple nyní vypadají ještě atraktivněji, toto vnější krása měl svou cenu. Pryč jsou základní principy dobrého designu: srozumitelnost, zpětná vazba, obnova a další.

Ve snaze o vizuální dokonalost vytvořil tým Apple písma tak malá a tenká (v kombinaci s nízkým kontrastem), že se stala nečitelná i pro lidi s normálním zrakem. Vytvořili hromadu vágních gest, která si nepamatují ani samotní vývojáři, a spoustu skvělých funkcí, o kterých většina z nás ani neví, že existují.

Produkty, zejména ty postavené na iOS, operačním systému Apple pro mobilní zařízení, se již neřídí známými a zavedenými principy designu vyvinutými před desítkami let. Tyto principy, založené jak na experimentální vědě, tak na zdravém rozumu, představily sílu počítačových technologií několika generacím a zajistily produktům Apple vynikající pověst pro jejich srozumitelnost a snadné použití.

Bohužel Apple nyní tyto myšlenky postupně opouští. Jejich návrhové pokyny pro iOS a Mac OS X stále obsahují podobné koncepty, ale mnoho z nich není interně vůbec praktikováno. Apple ztratil směr a nyní důrazem na styl a vzhled jedná na úkor hodnot, které byly kdysi jejich hlavním trumfem v boji s konkurencí.

Apple ničí design. Navíc svými činy opět přesvědčují lidi, že dobrý design se opírá pouze o krásný obal. Ale není tomu tak! Design je způsob myšlení: nejprve identifikujte základní potřeby vašeho publika a poté je uspokojte produkty a službami. Tato disciplína vyžaduje, aby vývojáři rozuměli lidem, technologii, společnosti a podnikání.

Vytváření krásných předmětů je jen malá část moderní design: Specialisté z této branže dnes pracují na problémech, jako je projektování měst, dopravních systémů nebo zdravotnických zařízení. A přesto Apple nadále posiluje starou, unavenou myšlenku, že jediným úkolem designéra je dělat věci krásné, i když je to na úkor funkčnosti, přehlednosti a snadného používání rozhraní.

Apple, vždy jsi byl vůdce. Proč se teď chováš tak sebestředně? Ale co je důležitější, proč Google následuje všechny vaše nejhorší příklady?

Ano, Apple byl kdysi známý pro snadné použití, s počítači a aplikacemi, které byly snadno pochopitelné, měly působivé funkce a bylo možné je používat bez jakýchkoli pokynů. Všechny operace byly snadno detekovány, jakékoli akce bylo možné zrušit a opravit a systém vám poskytl podrobnou zpětnou vazbu, abyste vždy rozuměli tomu, co jste dělali. Uživatelé šíleli o možnostech svých zařízení Apple a pokyny a principy společnosti Apple pro design byly mocné, oblíbené a vlivné.

Když však společnost s příchodem prvního iPhonu a tabletů přešla na gestická rozhraní, hodlalo její vedení upustit od mnoha klíčových zásad, které byly dříve dodržovány. Už není žádná samozřejmost akce - zbyly nám jen ubohé útržky zpětné vazby. Proč? Apple udělal radikální krok směrem k vizuální jednoduchosti a eleganci, a tím zasadil vážnou ránu učenlivosti, použitelnosti a produktivitě svých řešení.

Začali zavádět doručovací systémy, které měli zákazníci problém používat a učit se, ale prošlo jim to, protože je lidé nepoznali podobné problémy dokud není příliš pozdě a peníze již byly převedeny. Ale i tehdy pro nedostatky jejich zařízení: „Kdybych jen nebyl tak hloupý...“.

Dnešní iPhony a iPady jsou pojednáním o vizuální jednoduchosti. Skvělé fonty. Čisté rozvržení, bez nadbytečných slov, symbolů nebo nabídek. Nevadí, že mnoho lidí neumí číst text. Ale je hezký.

V jednom průzkumu jedna žena tvrdila, že musela použít asistenční nástroje Applu, aby jejich drobná písma byla dostatečně velká a dostatečně kontrastní, aby byla čitelná. Stěžovala si však také na to, že v mnoha částech aplikace tato možnost udělala písma tak velká, že se text na obrazovku prostě nevešel. Vzhledem k tomu, že neměla žádné problémy se zrakem, byla by pravděpodobně schopna číst stejný text snadno, než Apple přešel na typy písma s jemnějšími tahy a menším vizuálním kontrastem.

Jaká filozofie designu způsobuje, že se miliony jeho uživatelů cítí při používání produktu omezeni? Apple mohl svůj smartphone navrhnout tak, aby jej většina lidí mohla používat a číst z něj text, aniž by byli označeni za méněcenné.

Ještě horší je ale to, že pomocné nástroje ničí právě tu krásu, na které si jablečná společnost tolik zakládá, protože se kvůli nim někdy text nevejde na obrazovku. Kdyby bylo písmo trochu širší, kontrastnější a trochu méně vyhlazené, Apple by zachoval nejen jeho krásu, ale i čitelnost.

Zrušení bylo odmítnuto. A víte, co se stalo? Bylo mnoho stížností, takže se vrátili tuto funkci v trochu jiném formátu: vše, co jste museli udělat, abyste akci zrušili, bylo silně zatřepat telefonem nebo tabletem. Zrušení však nebylo nikdy implementováno univerzálně a mohli jste se o něm dozvědět pouze zatřesením přístroje. Kromě toho, pokud funkce nefungovala, uživatelé nevěděli, zda problém byl v tom, že gadget nebyl otřesen dostatečně silně, nebo že zrušení nebylo pro tuto konkrétní situaci poskytnuto.

Na dotykových obrazovkách především relativně malá zařízení, mnoho se může pokazit, když se náhodně dotknete aktivního odkazu nebo tlačítka. Tyto náhodné dotyky nasměrují uživatele k novému cíli. Standardním a jednoduchým způsobem, jak tyto chyby odstranit, je mít tlačítko „zpět“: v chytrých telefonech s operačním systémem Android je tato funkce integrována jako univerzální ovladač, který je vždy k dispozici, ale Apple jej nepoužívá. Proč? Neznámý. Možná se snaží vyhnout používání tlačítek nebo nabídek? Výsledkem je čistý a elegantní vzhled, ale tato vizuální jednoduchost je klamná, protože zvyšuje složitost rozhraní.

Apple umístí na některá místa šipku zpět, ale na rozdíl od Androidu, kde je dostupná všude, jsou jejich tlačítka zpět a zpět implementována podle uvážení vývojáře. Ne každý, včetně Applu, tyto schopnosti implementuje.

Jak může člověk vědět, jakým způsobem má přejíždět, kolik prstů použít a jak často nebo jak dlouho se dotýkat obrazovky, když na displeji nejsou žádné ukazatele? Lidé si tato gesta musí zapamatovat tím, že o nich uslyší od přítele, „přečtou si pokyny“ (které žádné nejsou) nebo je objeví úplnou náhodou.

Produkty Apple jsou krásné a atraktivní! Proto, když se potýkají s obtížemi, mají jeho uživatelé tendenci obviňovat sami sebe. To je dobré pro Apple, ale naprosto nefér vůči zákazníkům.

Dobrý design by měl být vizuálně patrný a příjemný na používání. Příjemnost však vyžaduje, aby zařízení bylo srozumitelné a pohodlné. Musí dodržovat základní psychologické principy, které vedou k pocitům porozumění, kontroly a potěšení. Patří mezi ně srozumitelnost, zpětná vazba, správné zobrazení, vhodné použití omezení a samozřejmě možnost vrátit své akce zpět. Tyto základní koncepty designu se učí především budoucí UX profesionálové, a pokud by se Apple účastnil podobného školení, neuspěli by.

Atraktivnější, ale obtížněji použitelný

Jaké jsou důsledky vyhýbání se správné metodice návrhu? Vyšší náklady na údržbu a podporu. A v konečném důsledku „zběhnutí“ nešťastných zákazníků, kteří možná otevřeně chválí jednoduché rozhraní Applu, ale zároveň ušetří peníze za telefon jiné značky v naději, že budou dostatečně chytří, aby zvládli všechny jeho schopnosti.

V tomto případě budou příběhy o prarodičích, kteří neuměli ovládat počítač, ale nyní bez problémů používají technologická zařízení, jako jsou tablety, nevhodné. Jen se zamyslete, do jaké míry ovládají nové technologie? Ano, gesta, tablety a telefony mají nižší bariéru vstupu pro první použití, ale zvládnutí jejich pokročilých funkcí (například odeslání tří fotografií v jednom e-mailu, formátování konkrétního textu nebo kombinování výsledků několika různých operací) je mnohem náročnější. obtížný. Tyto a mnoho dalších akcí můžete provádět na tradičních počítačích mnohem snadněji a efektivněji.

Nová generace software udělal obrovský skok v atraktivitě a výkonu zpracování a zároveň se stal složitějším pro použití.

Tento problém není omezen na Apple. Google mapy se také vyvíjejí podle stejného principu a stávají se s každou iterací stále více matoucí. Totéž platí pro Android. operační sál systém Windows Microsoft 8 má docela chytrý design pro zařízení založená na gestech, která řeší spoustu výše popsaných problémů, ale nedokáže integrovat jiný styl provozu potřebný pro stolní počítače, které jsou určeny pro produktivní práci.

Tak co je za problém? Jde o to, že design přichází v mnoha verzích, stejně jako každá disciplína má několik variant. Při vytváření softwaru hlavní programátor nemusí nutně rozumět interaktivnímu programování a vývojář jádra nemusí vědět nic o kódování telekomunikací. Na druhou stranu interakční designéři s psychologickým zázemím znají principy konceptuálních modelů, jasnosti a srozumitelnosti, zatímco pro odborníky na informatiku je to „temný les“. Profesionálové v oblasti designu však mají tendenci si myslet, že interakční design znamená webové stránky, a často nerozumí složitosti programování a interakce člověka s počítačem.

To je důležité, protože lidé o sobě nakonec pochybují, protože nemohou používat rozhraní, které je navrženo tak, aby vypadalo dokonale jasně, i když tomu tak není. To je důležité, protože špičkové technologické produkty ustupují jak z hlediska použitelnosti, tak užitečnosti.

Něco se pokazilo?

Jeden z partnerů Nielsen Norman Group, Bruce Tognazzini, spolupracoval se Stevem Jobsem v počátcích společnosti Apple. Expert na použitelnost (Donald Norman) nastoupil do společnosti krátce poté, co Jobs odešel, a poté odešel poté, co se Steve v roce 1996 vrátil. Nedočkali se přechodu od snadno použitelných a srozumitelných produktů (kdy se Apple vlastně chlubil, že návody nejsou potřeba) k dnešním zařízením, ke kterým sice nejsou manuály, ale přesto je často potřebují.

Podle nich, než se Jobs vrátil, Apple přistupoval k vývoji produktu s ohledem na tři faktory – uživatelská zkušenost, inženýrství a marketing – každý z nich byl zapojen do cyklu návrhu od prvního dne až do odeslání zboží.

Apple se dnes již nesnaží, aby jeho produkty byly srozumitelné a užitečné. Místo toho je navrhuje eticky. Bohužel, jak ukazuje výzkum z akademických časopisů o interakci člověk-počítač a lidských faktorech, vizuálně jednoduchý vzhled se nepromítá do snadného použití.

Apple záměrně skrývá složitost svých produktů tím, že skrývá nebo dokonce odstraňuje důležité ovládací prvky. Zdá se, že co by mohlo být jednodušší než ovladač s jedním tlačítkem? Ano, toto je velmi jednoduché řešení, ale s jedním tlačítkem jsou vaše možnosti používání systému extrémně omezené, pokud nemá určité režimy. Umožňují nastavit ovládání na různé hodnoty v různých časech, ale to mate uživatele a vede k chybám.

Alternativně může mít jeden ovladač více skrytých funkcí, takže tlačítko (nebo Dotyková obrazovka) je schopen provádět různé operace jediným, dvojitým nebo trojitým stisknutím při dotyku jedním, dvěma nebo třemi prsty. Nebo možná pomocí daného počtu prstů, daného počtukrát, v daném směru: stačí otevřít „panel“ Nastavení systému» na počítači Macintosh a prozkoumejte možnosti (a rozdíly) ve významu dotyků a gest na myši nebo trackpadu Apple.

Jednoduchý vzhled může učinit ovládací prvky složitější, libovolnější, obtížněji zapamatovatelné a náchylnější k chybám. Ve skutečnosti v počátcích počítačů Lisa a Macintosh bylo sloganem společnosti Apple „No Modes“. Jediná možnost opustit mody znamená používat speciální ovladače, z nichž každý musí vždy plnit stejný úkol.

Princip režimů a kompromis mezi zdáním jednoduchosti a skutečnou jednoduchostí v akci se vyučují v základních kurzech interaktivní design. Proč ale Apple tyto znalosti nechce aplikovat?

Všechny moderní počítačové společnosti vydávají pro své vývojáře manuály k uživatelskému rozhraní. Apple jako první vytvořil takového průvodce a posloužil jako výborný popis principů dobrého a přehledného designu. První vydání pokynů Apple Human Interface Guidelines napsal v roce 1978 Bruce Tognazini. V době, kdy byla vydána v roce 1987 a byla vytvořena během dvou let (1985-1986), byly začleněny všechny klíčové principy moderních rozhraní. Když se Steve Jobs v roce 1996 vrátil do společnosti, byli stále sledováni.

Tato kompletní sada konceptů Apple byla výsledkem projektu Tognasini, který studoval základní principy rozhraní jejich Macintosh. Předtím je znal jen úzký okruh lidí zabývajících se vývojem UI. Díky, že jsi napsal tento manuálŠkolení nových zaměstnanců bylo mnohem jednodušší a počet vývojářů pro produkty Macintosh začal výrazně růst.

Při vytváření principů se tým silně opíral o výzkum prováděný nově vytvořenou komunitou Human-Computer Interaction (HCI). Zaměřeno na práci Donalda Normana a jeho studentů na Kalifornské univerzitě v San Diegu, která byla publikována v referátech na konferencích PCI na počátku 80. let a v knize s názvem User Centered System Design, kterou editovali Norman a Stephen Draper v roce 1986.

Je důležité poznamenat, že tyto základy odrážejí potřeby, touhy a schopnosti lidí, nikoli stroje, které používají. Platí pro dnešní rozhraní stejně jako pro rané verze z 80. let a zůstanou tak, dokud se uživatelé nevyvinou.

Moderní průvodce uživatelským rozhraním pro iOS od Apple pro vývojáře sice nastiňuje mnoho relevantních principů, ale důraz je stále kladen na jednoduchost (konkrétně na zdání jednoduchosti) a obecně na spokojenost a požitek uživatelů. Tyto atributy hrají důležitou roli, ale zdaleka nejsou rozhodující.

Přesněji řečeno, pokyny připomínají vývojářům nejméně 14krát, aby zajistili, že jejich vizuální komunikace je dostatečně sofistikovaná. Je jasné, že design by měl být co nejčistší a nejjednodušší, ale nemělo by to být dosaženo na úkor odstraňování nezbytných náznaků. Jak může designér vědět, zda jsou ti praví? Jediný známý způsob je provést uživatelské testování. Co vám ale může o testování použitelnosti prozradit příručka uživatelského rozhraní?

To je opravdu dobrý nápad. Testy byste měli provádět s lidmi, kteří reprezentují vaše očekávané nákupní publikum, nikoli pouze s několika kolegy, jak navrhuje Apple.

Původní principy Apple design zdůraznit důležitost vytváření systémů, které jsou srozumitelné, snadno se učí a jsou funkční. Ale někde na cestě společnost ztratila klíčové základy, kterými se vždy řídila. Obrázek níže ukazuje, jak se základní principy pokynů společnosti Apple v průběhu času měnily.

Tato tabulka popisuje vývoj pokynů pro uživatelské rozhraní společnosti Apple od roku 1995 do roku 2015. Protože zařízení používající gesta operační systém Pokyny pro iOS jsou umístěny vlevo od pokynů z roku 2015 pro tradičnější OS X.

Jak vidíte, vnímaná stabilita a bezrežimovost zmizela někdy po roce 2008. Odpuštění a mentální modely se při přechodu na iOS ztratily spolu s vyhodnocením explicitních a očekávaných akcí. See-and-Point byl odstraněn z průvodců iOS na konci roku 2010 s vydáním iOS 4. Ještě v roce 1995 byla estetická integrita jedním z nejméně důležitých faktorů, ale v roce 2015 je zásadní. Spolu s tím ztratily metafory a uživatelská kontrola několik pozic a sklouzly dolů.

Chybějící principy

Nejdůležitější principy, které jsou v iOS zcela nebo částečně ignorovány, jsou srozumitelnost, zpětná vazba, obnova, konzistence a podpora růstu:

Jasnost

Jasnost neboli schopnost podívat se na systém a okamžitě objevit všechny navrhované akce byla vždy klíčovým prvkem designového úspěchu Applu. V raných fázích se tento princip nazýval „vidět a ukazovat“, protože všechny dostupné operace byly prezentovány ve formě tlačítek, ikon nebo položek nabídky viditelných pro uživatele: vidíte akci, kterou chcete provést, přesuňte kurzor na odpovídající objekt a jednou na něj klikněte.

Jednoduše řečeno, přehlednost zahrnuje naplnění rozhraní viditelnějšími a srozumitelnějšími prvky, aby si je lidé nemuseli pamatovat. Nabídky na tradičních počítačích tuto myšlenku pěkně sledují. Také označené ikony. Nejčastěji selhávají neoznačené ikony, ale na vině je nedostatek jakéhokoli náznaku interaktivity. Upozorňujeme, že v příručkách společnosti Apple již není zmíněna srozumitelnost.

Zpětná vazba

Zpětná vazba a její „přátelská“ zpětná vazba umožňují osobě zjistit, co se stalo po provedení akce, nebo porozumět tomu, co se stane, pokud je akce vybrána.

Lidé se spoléhají na neustálý proud zpětné vazby, aby vyhodnotili efektivitu svých akcí. V reálném světě dostáváme zpětnou vazbu automaticky, ale ve virtuálním světě k ní dochází pouze v případě, že na ni návrhář myslel. Bez zpětné vazby si uživatelé nemusí být jisti aktuální stav v systému a nebude cítit žádnou odpovědnost.

Zotavení

Chyby se stávají. Princip obnovy říká, že by mělo být stejně snadné operaci vrátit zpět, jako ji provést. Označovaná jako shovívavost také zmizela ze současných pokynů a výše uvedené tabulky. Obnova byla implementována pomocí tlačítka „zpět“, které bylo vynalezeno v roce 1974 ve výzkumném středisku Xerox Corporation's Palo Alto Research Center (PARC), pravděpodobně Warrenem Teitelmanem Jak víte, počítače Lisa a Macintosh si vypůjčily své základní struktury z raného vývoje PARC (. Apple koupil práva od Xeroxu).

Příkaz Storno lze vrátit zpět pomocí tlačítka Znovu. Vrácení zpět a opakování pomáhá lidem nejen opravit jejich vlastní chyby, ale také volněji experimentovat s novými věcmi.

Zpět umožnil uživatelům obnovit obsah a tlačítko Zpět byl příkaz nástroje, který jim umožnil vrátit se na předchozí místo v navigačním systému. Originál grafická rozhraní osvobodil lidi od potřeby záloha, kromě navigace. Místo toho byly uživatelům zpřístupněny všechny dokumenty a nástroje. Prohlížeče a iOS jsou pozůstatky raných navigačních rozhraní, kde lidé procházeli bludištěm přechodů vedoucích k modálním obrazovkám.

Prohlížeče, které podporují navigační systém Internet poskytuje tlačítko zpět, aby se uživatelé mohli vrátit do předchozích fází své cesty. iOS neposkytuje takto zobecněný nástroj, takže pokud například omylem kliknete na odkaz uvnitř aplikace, přesměruje vás na Safari nebo Youtube nebo cokoli jiného, ​​aniž by vám poskytl jakoukoli únikovou cestu. Tlačítka zpět a vpřed by měla být v iOS standardní, aby rozhraní lidem odpouštělo nechtěnou navigaci, místo aby je za to trestalo.

Konzistence

Většina moderních uživatelů má více zařízení, ale operace těchto různých gadgetů se často překrývají. Dokonce v rámci jednoho Zařízení Apple podařilo narušit konzistenci: otočte iPhone a rozložení klávesnice, otočte iPad a ikony na domovské obrazovce se přeskupily nepředvídatelným způsobem.

Konzistence je stále uvedena v pokynech, ale tato zásada se téměř nedodržuje. Magic Mouse funguje jinak než trackpad a její ovládání se liší od gest používaných na iPhonu nebo tabletu. Proč? K takovým rozporům obvykle dochází, když designéři pracují izolovaně, aniž by si vyměňovali nápady se svými kolegy.

Povzbuzení růstu

Dobrý design povzbuzuje lidi, aby se učili a rostli tím, že přebírají nové a složitější úkoly, jakmile zvládnou základy. Nadšenci pro momentky se vyvíjejí, aby se stali fotografy, autory osobní deníky se promění v blogery a děti si zkoušejí programování a nakonec se pokusí vybudovat kariéru v oboru počítačová věda. Po celá desetiletí byla podpora růstu pro Apple základním principem, který jeho uživatelé vždy přijímali.

Dobrý den, milí čtenáři! Webdesign a web development se velmi rychle vyvíjejí. Každý den vidíme stále více nových produktů, ať už jde o aplikace nebo nové služby, díky kterým je náš online život produktivnější a pohodlnější. A webdesign je prostě neomezený prostor, omezený pouze talentem a dovednostmi „umělce“ (designéra). Dnes si tedy povíme o LESS – dynamickém značkovacím jazyce stylů, který zjednoduší psaní stylů CSS.

LESS je nadmnožinou CSS. To znamená, že jakýkoli kód CSS je platný LESS, ale další prvky LESS nebudou fungovat v prostém kódu CSS. To je skvělé, protože stávající CSS je již platný kód LESS, což snižuje bariéru vstupu do nové technologie.

LESS přidává mnoho užitečných dynamických vlastností do . Představuje proměnné, operace, prvky a mixiny. Možnost modulárního psaní stylů vám ušetří spoustu starostí.

LESS výrazně usnadňuje psaní stylů. Například pomocí mixinů vytváříme něco jako funkce, které mohou přijímat argumenty. Mixiny - umožňují zahrnout všechny vlastnosti třídy do jiné třídy pomocí jednoduché zapínání název třídy jako hodnotu jedné z vlastností.

A zkompilovaný CSS bude vypadat takto:

Načtěte knihovnu prefix-free.js a propojte ji s index.html:

Zde dokončíme přípravy a přejdeme přímo k vytvoření menu ve stylu Apple.com

Uspořádání menu je poměrně jednoduché. Nabídka je založena na neuspořádaném seznamu. Otevřete editor HTML a vložte tento kód:

V této části začneme psát kód nabídky v jazyce LESS. Pro ty, kteří začínají s programováním, jak v psaní, tak v syntaxi LESS, se nebojte, pokusím se vše rozebrat, aby to bylo jasné. Snad se i někomu bude tento způsob psaní stylů pro web líbit, protože je opravdu produktivnější.

Podívejme se, z jakých komponent se bude menu skládat:

Jak můžeme vidět na obrázku výše, navigace Apple.com má následujících 6 hlavních částí:

• Používá se stín;
• Okraj;
• Oddělovač mezi položkami nabídky;
• Gradient pro pozadí;
• Efekt stmívání při najetí myší;
• Text menu.

Psané styly můžete použít dvěma způsoby:

• Crunch

Důležité: Při použití první metody musí být zahrnuto styles.less před zahrnutím knihovny less.js! Nezapomeňte se také připojit bez prefixů .
Propojení stylů tedy vypadá takto:

Použijeme 2 soubory: config.less v něm nadefinujeme všechny proměnné, mixiny atd., načež to naimportujeme do druhého (styles.less), ve kterém již vytvoříme styly pro prvky menu.

Nyní se podíváme na kód v config.less. Definujme základní barvu menu pomocí proměnných. Proměnná v LESS je deklarována pomocí symbolu @.

Ve výše uvedeném kódu jsem nezahrnul předponu pro box-shadow , knihovna bez předpon jej automaticky přidá. Barva stínu je navíc zděděna z barvy proměnné @theme.

Pro naše menu budeme potřebovat borduru se zaoblenými rohy. Mixiny s parametrem – má vlastně stejnou funkcionalitu jako jednoduchý mixin, rozdíl je pouze v tom, že má také variabilní parametr.

Ve výše uvedeném příkladu jsme nastavili výchozí @radius na 3 pixely a jak jsme řekli, tuto hodnotu lze změnit.

V LESS můžete pomocí operací zvyšovat, snižovat, dělit a násobit hodnoty vlastností i barvy, což vám umožní určit složité vztahy mezi vlastnostmi, abyste dosáhli požadovaného výsledku. Podívejme se na následující kód, který nastavuje vlastnosti pro oddělovač nabídky:

Ve výše uvedeném příkladu odečteme barvu #111 od proměnné @theme, takže levá strana oddělovače bude o něco tmavší než základní barva a pravá strana bude světlejší. Toto jsou druhy manipulací, které můžeme dělat s HEX barvou.

Aby byla manipulace s barvami jasnější, podívejme se na barevné schéma:

Maximální tmavá barva je #000 (černá), maximální barva světla je #FFF (bílá) a základní barva je #555. Pokud tedy chceme barvu o tři úrovně tmavší, odečteme #333 .

Nyní styly přechodu:

Plánujeme použít 2 barvy textu a barvy stínů textu. Jedna možnost se používá, pokud je pozadí nabídky světlé, pak je barva textu tmavá a naopak.

Za prvé, pokud barva textu nemá jas rovný nebo větší než 50 %, pak by měl stín ztmavnout, v tomto případě barva #000000.

V této fázi dokončíme vytváření souboru config.less a přejdeme k vytvoření souboru styles.less

Vytvořme soubor s názvem styles.less a nejprve k němu připojte již vytvořený soubor config.less, a to následujícím způsobem:

V tuto chvíli výsledek naší práce vypadá takto.

Zatím nepříliš atraktivní. Ale je toho ještě víc.

V LESS můžeme vnořit styly libovolného prvku přímo do stylu nadřazeného. Značka navigace je specifikace nav HTML5, která obsahuje všechny potřebné prvky pro navigaci. Zde jsou jeho styly:

Všimněte si, že místo psaní hromady pravidel CSS jsme pouze definovali výšku, šířku a odsazení. Zatímco si vezmeme border a jeho styl a také stín pomocí mixinů, zadáme název třídy .border a .shadow a do nav se přidají pravidla těchto tříd, která jsme napsali v souboru config.less. třída.

V MÉNĚ dědičnosti se však vyskytuje jinak, je snazší a logičtější pochopit:

Jak můžete vidět na obrázku, prvky seznamu li jsou umístěny svisle, ale potřebujeme, aby byly umístěny vodorovně. Chcete-li to provést, nastavte vlastnost display:inline;

Ve výše uvedeném příkladu používáme hexadecimální barvu #f2f2f2 , tato barva má jas více než 50 %, takže stín bude automaticky nastaven na černou. Jsem si jistý, že zbytek kódu je zcela zřejmý.

li (
zobrazení: inline;
a (
text-dekorace: žádná;
displej: inline-block;
plavat vlevo;
šířka: 156px;
výška: 45px;
text-align: center;
výška řádku: 300 %;

.rozdělovač;
.spád;
}
}
li: první dítě a (
border-left : none ;
}
li: 50px auto 0 ;
šířka: 788px;
výška: 45px;
.okraj;
.stín;
ul (
výplň: 0;
okraj: 0;
li (
zobrazení: inline;
a (
text-dekorace: žádná;
displej: inline-block;
plavat vlevo;
šířka: 156px;
výška: 45px;
text-align: center;
výška řádku: 300 %;
.textcolor(#f2f2f2 ) ; // Tento řádek můžete změnit
.rozdělovač;
.spád;
&:hover (
.hovereffect;
}
}
}
li: první dítě a (
border-left : none ;
}
li: poslední dítě a (
pravá hranice : žádná ;
}
}
}

To je vše, psaní apple.com lze dokončit zde. Zbývá rozhodnout, jak napsané styly na webovou stránku připojíme. Jak jsem uvedl výše, psané styly můžete použít dvěma způsoby:

• propojte styles.less a knihovnu less.js;
• nebo zkompilujte styles.less v programu Crunch a ke stránce již připojte běžný styles.css

Druhá možnost je samozřejmě lepší, proč připojovat 2 soubory a dělat dvojitou práci na straně klienta, takže zkompilujme napsané styly LESS do běžného statického CSS.

Chcete-li to provést, klikněte na velké tlačítko Crunch It! A zachovat normální styly.css

Tím lekce končí.

P.S.: Takové jednoduché menu zvládne každý, ale pokud potřebujete opravdu super web s krásnými efekty, pak vám mohu doporučit jedno z nejlepších webových studií na Ukrajině. Kluci vám dokážou udělat opravdu jedinečný design, předvést optimalizace pro vyhledávače a propagujte svůj web!

Jste šťastným majitelem malé, ale skvělé společnosti. Triumf je ještě daleko, ale nepochybujete, že časem se vaše podnikání stane zdrojem hrdosti a příkladem hodný následování. Mimochodem, na tento okamžik nemusíte čekat: můžete se stát prvotřídním profesionálem hned teď tím, že uděláte přesvědčivého, jako velká a seriózní společnost.

Nevíte, jak by takový web měl být? Nebojte se, nyní vám vše vysvětlíme a řekneme vám, jak postupovat. Pokud využijete naše tipy, už nebudete muset smutně vzdychat při pohledu na stránky Applu, Nike nebo L’Oreal, protože ten váš nebude o nic horší. Zde je několik pokynů pro vytvoření solidního, profesionálního webu.

Velké značky neustále aktualizují a vylepšují své webové stránky. Týmy zkušených designérů a vývojářů pracují na vytvoření neobvyklých a moderní zdroj, což způsobuje, že lidé jsou zvědaví a chtějí se na všechno podívat blíže.

Ano, je to velmi drahé, ale existují také bezplatné možnosti, jako je Wix. Náš editor byl vytvořen speciálně proto, abyste si mohli udělat pěknou webovou stránku pro jakýkoli typ aktivity a přidat k ní nějaký módní efekt, například paralaxní rolování nebo video jako pozadí. Můžete vytvořit aktuální „dlouhou“ stránku a doplnit ji „plochými“ designovými prvky*.

Myslíme si, že v této fázi vám neuškodí navštívit weby pro designéry a získat nějakou inspiraci. Naše doporučení: časopis Webová inspirace, blog Lopart a časopis o designu Služební místnost; Li anglický jazyk pro vás žádný problém, čtěte Design Vandelay , Smashing Magazine A Webdesign Depot .

*Nechápete, co všechna tato slova znamenají? Musíte si tedy přečíst náš.

Velké společnosti mají rozpoznatelnou firemní identitu a velmi jasnou pozici. Používají přísně definovaná písma, barvy a slogany. Červené logo Coca-Coly neomylně poznáte, ať už na webu, lahvích nebo billboardech podél ulice.

Co když tedy vaše společnost není tak velká jako Coca-Cola? To neznamená, že nemusíte dělat branding. Důležitá je dobře promyšlená firemní identita. Díky němu budou lidé schopni rychle identifikovat váš produkt a pak je to jen co by kamenem dohodil před nákupem. Nakreslete proto hezké logo, vymyslete slogan, vybírejte značková písma, barvy a podle toho navrhněte své stránky na sociálních sítích. Další tipy najdete v našem článku o.

Chápeme, že chcete mluvit podrobně o svém produktu a podnikání, ale nedoporučujeme přetěžovat stránky a nudit návštěvníky. Stránka se velmi špatně načítá, je špatně čitelná a odpuzuje návštěvníky. Nejlepší je nepřítel dobra, takže se musíte naučit zastavit včas.

Pojďme se zamyslet nad tím, co lze z vašeho webu odstranit. Pokud jsou texty plné odborných a odborných termínů, zbavte se jich. Myslíte si, že návštěvníci skutečně potřebují znát podrobné životopisy všech vašich zaměstnanců? Nepravděpodobné. Některé věci samozřejmě nelze zkrátit, např. Detailní popis zboží nebo služby, ale to je normální, tyto informace jsou užitečné. Dokonce se vyplatí přesunout ji někam, kde rozhodně nezůstane bez povšimnutí. A vše, co zpomaluje nákupní proces, lze bez sebemenší lítosti odstranit.

Nyní se podíváme na design. Snižte počet barev na tři nebo čtyři, odstraňte všechny obrázky navíc a věnujte pozornost typografii. Nezapomeňte ponechat dostatek prostoru nad hlavou, známého také jako „vzduch“. Když je na webu hodně „vzduchu“, lidé si všimnou všech kritických prvků, jako jsou ty, které jsou nezbytné k tomu, aby návštěvníky přiměly k nákupu, předplatnému, registraci atd.

Chcete zvýšit počet objednávek? Zajistěte tedy, aby lidé váš produkt okamžitě viděli. Podívejte se na stránky známých značek. Víte, umisťují produkty nejen na nákupní stránku, ale i na hlavní stránku, aby si jich lidé určitě všimli. Pokud máte a přemýšlíte, jak zvýšit prodeje, klidně tuto techniku ​​zkopírujte.

Fotografie produktů musí být samozřejmě velké a velmi kvalitní. Nezapomeňte, že se to děje v internetovém obchodě, kde si nemůžete nic osahat ani vyzkoušet, takže se lidé při nákupu rozhodují podle obrázku. Pokud nemáte peníze na profesionálního fotografa, přečtěte si náš článek o. Trochu praxe - a všechno bude fungovat! A nezapomeňte na možnosti našeho editoru, můžete na web přidat aplikaci, aby si klient mohl zvětšit obrázek předmětu zájmu a dobře si ho prohlédnout.

Myslíme si, že jste se někdy ocitli na špatně navrženém webu a zmateně jste bloumali tam a zpět při hledání správné stránky. Z takových míst zpravidla odcházíme s prázdnou a s touhou se už nikdy nevrátit. A to vše kvůli špatně koncipované navigaci. Neopakujte tuto chybu a ujistěte se, že je návštěvníkovi vše jasné od prvních sekund.

Pokud se vás znovu a znovu ptají na to samé, vytvořte stránku s odpověďmi na často kladené otázky. Můžete použít aplikaci Wix FAQ. Jeho výhodou je, že lidé dostanou informace, které potřebují, a vy nejste rozptylováni jinými záležitostmi.

Chcete ukázat, že vaše společnost je vstřícná a přátelská? Přidat aplikaci " Živý chat Tidio“, abyste mohli odpovídat na otázky v reálném čase. Můžete si jej nainstalovat do smartphonu a nesedět celý den u počítače, ale věnovat se své práci a zůstat ve spojení.

Je dobré, že se snažíte být v kontaktu a odpovídat na otázky včas, ale k vybudování důvěry u klientů to nestačí. Chcete-li to provést, musíte na webu znovu pracovat. Udělejte si samostatnou sekci s historií firmy, popovídejte si o tom, kdo jste, v co věříte a co považujete za důležité. Není potřeba příliš mnoho informací: text by měl být krátký, upřímný a srozumitelný. Je docela těžké na internetu ukázat, jaký jste člověk, ale myslíme si, že taková stránka tuto práci zvládne dokonale.

Doporučujeme také přidat recenze zákazníků na stránky - na domovská stránka nebo v samostatné sekci. Když si je přečtou, lidé pochopí, že váš produkt je důvěryhodný. Mimochodem, Yandex a Google také věnují pozornost recenzím, což znamená, že ovlivňují.

Více než polovina uživatelů internetu přistupuje k síti z tabletů a chytrých telefonů. Znamená to, že mobilní verze web není rozmar, ale nutnost. Naštěstí si nemusíte lámat hlavu s tím, jak na to. V editoru Wix mobilní verze se generuje automaticky, stačí jej otestovat a doladit pár věcí. Nezapomeňte, že mobilní verze není přesnou kopií desktopové verze, takže odstraňte všechny nepotřebné prvky a zviditelněte tlačítka a kontakty.

Věnujte pozornost tomu, jak starší a zkušenější kolegové spravují své stránky na sociálních sítích. Ano, chcete-li plněji oslovit své publikum, potřebujete web i stránky na Facebooku, VKontakte, Instagramu atd. Sociální sítě jsou ideální pro zveřejňování novinek, psaní o produktu a odpovídání na dotazy. Je důležité nejen o práci mluvit, ale vytvořit si image a budovat normální vztahy založené na důvěře. Pokud opravdu nevíte, co dělat, přečtěte si článek o a dodržujte všechna naše doporučení.

Po vytvoření stránky na konkrétním webu o tom řekněte návštěvníkům svého webu. Přidejte tlačítka sociálních médií do záhlaví, zápatí nebo sekce kontaktů. Doporučujeme také přidat aplikaci - je zdarma a velké společnosti ji ochotně využívají. S jeho pomocí můžete ze svého webu spravovat až deset účtů: zveřejňovat novinky, reagovat včas na komentáře a překvapovat klienty rychlostí, bezvadností a profesionalitou.

Jste připraveni stát na stejné úrovni s velkými značkami? udělejte to sami na Wix – je to snadné a zdarma!

Kult Applu nenechává nikoho lhostejným a přiznejme si to: jedním z klíčových faktorů popularity Applu je jejich jedinečný design. Designed by Apple v Kalifornii ilustruje, jak designéři zacházejí se svými produkty jako s uměním.

Cupertino, Kalifornie – 16. listopadu Apple oznámil vydání nové vázané knihy s názvem „Designed by Apple in California“. Dvě dekády designových inovací jsou zachyceny na 450 fotografiích minulých i současných produktů společnosti, od iMacu (1998) po Apple Pencil (2015). Kniha vznikala 8 let a byla věnována památce Steva Jobse.

„Myšlenka vytvořit něco důležitého pro lidstvo motivovala Steva od samého začátku, tato myšlenka je naším étosem a účelem, se kterým Apple kráčí do budoucnosti,“ říká Jony Ive.

„Designed by Apple in California“ je výsledkem úzké spolupráce mezi mnoha týmy designérů a specialistů ze zcela odlišných oborů. Všichni sdílejí naději, že kniha lidem umožní pochopit, jak a proč produkty Apple vznikají a existují. Všechny fotografie pořídil Andrew Zuckerman technikou, kterou popisuje jako „záměrně skromný styl“. Fotografie ilustrují detaily procesu návrhu i samotné hotové výrobky.

Toto je kniha o designu, ale není o designérech samotných, tvůrčím procesu nebo vývoji produktu. Objektivně odráží styl, image a designovou ideologii Applu. Mnoho produktů vypadá tak jasně, jednoduše a logicky, že se zdá, že nemají žádnou rozumnou alternativu. U každého zařízení je promyšlený i design nástroje, kterým je vyroben.

"Jako designéři žijeme v budoucnosti, milujeme to, co jsme již vytvořili, a jsme posedlí tím, co jsme ještě neudělali."

"Jednou z nejdůležitějších věcí, které jsme se za 20 let naší spolupráce naučili, je potřeba naslouchat si navzájem, protože nejchytřejšími nápady jsou často ti, kteří mluví velmi, velmi potichu."

Designed by Apple in California je limitovaná edice knihy dostupná ve dvou formátech: malá (25,9 x 32,4 cm) za 199 $ a velká (33 x 40,6 cm) za 299 $. Tiskne se na speciálně vyrobený papír se speciálním zbarvením a matně postříbřenými okraji. Prodává se výhradně na Apple.com v USA, Austrálii, Velké Británii, Německu, Hong Kongu, Koreji, Francii, Japonsku a Tchaj-wanu a ve vybraných Apple Storech.