Změny návrhu Apple.Com
Apple.com prošla v minulém týdnu nějaké úpravy svého designu, změny, které byste si možná nevšimli, kdybyste nevěnovali dostatek pozornosti.
Ačkoli mnoho zpráv o tom odkazuje jako na "redesign", myslím, že je těžké ji klasifikovat jako takovou. Určitě existují nějaké významné změny, ale změny nejsou úplnou opravou jak tomu bylo u společnosti CNN.com koncem roku 2009.
Nicméně změny jsou pro webové designéry významné, takže se na ně krátce podívám. Pokud je něco o změnách, které jsem zanedbala zmínit, neváhejte komentovat.
Přepracovaná navigační lišta
Nejvýznamnější změna (i když je stále poněkud jemná) je vzhled navigační lišty. Apple má jednu z těch navigačních pruhů, které podle designu, každý miluje a závidí. Zdá se nemožné, že by se to mohlo zlepšit. Byli tak nějak schopni najít způsoby, jak to ještě lépe vypadat a intuitivněji.
Zde je starý navigační panel:
Zde je nový:
Změny zahrnují:
- Je to tmavší
- Gradient byl nahrazen odvážnějším lesklým vzhledem
- Vzhled loga je zjednodušený
- Vyhledávací pole je menší (více o tom níže)
Myslím, že opravdu je potřeba skvělý tým návrhářů, aby provedli opravdu významné změny vzhledu velmi důležitého prvku uživatelského rozhraní, a přitom stále dávají dojem, že se nic nezměnilo. Jednoduše jde ukázat, že vizuální detaily často nejsou tak důležité jako celkový pocit designu.
Flexibilní vyhledávací pole (pouze pro WebKit)
Jelikož je zřejmě WebKit-zaujatý, návrhářský tým Apple obsahoval některé vylepšení pouze pro WebKit, z nichž jedna je spojena s vyhledávacím polem.
Ve většině prohlížečů kliknutím do vyhledávacího pole získáte jasnější pozadí. V prohlížeči Chrome nebo Safari se vyhledávací pole animuje pomocí přechodů CSS3, čímž se stává širší a pravděpodobně trochu použitelnější. Klepnutím na obrazovku níže se zobrazí vyhledávací pole v prohlížeči Chrome poté, co se animace stane širší:
Aby bylo možné přizpůsobit velikost vyhledávacího pole, ostatní navigační položky a logo se změní.
Líbí se mi tato funkce; přidává pocit intuitivnosti. Ale podle mého názoru má malou vadu: Po odstranění zaměření se nevrátí zpět do původního stavu. Samozřejmě, pokud by do vyhledávacího pole bylo napsáno něco, pak byste nechtěli, aby se velikost změnila, ale myslím, že by se měla vrátit do normálního stavu, pokud ztratí pozornost a zůstane prázdná.
Samozřejmě, protože je velmi nepravděpodobné, že někdo klikne do vyhledávacího pole a neřekne nic, předpokládám, že to je zanedbatelné opomenutí.
Animovaný vstup navigační lišty (jen pro WebKit)
Další malou funkcí WebKit je pouze animovaný záznam navigačního panelu. Nepamatuji si, že jsem viděl tento efekt na svých stránkách dříve, takže předpokládám, že to je další nový prvek. Animovaný záznam se děje pouze na domovské stránce a pouze jednou v relaci prohlížeče. To je dobrá praxe a dobrá lekce pro vývojáře, kteří přidávají do svých rozhraní animované efekty.
Jak je zobrazeno na obrazovce, vydejte navigační lištu z obrazovky, pravděpodobně pomocí animace klíčového snímku CSS3 spolu s jazykem JavaScript, abyste mohli ovládat, kdy by animace měla nebo neměla nastat.
Prohlížeče animovaných produktů (Pouze WebKit)
Dalším nedávným přidáním je použití animace na některých stránkách produktu. Animace založené na CSS3 se používají na Mac a iPod produktové prohlížeče, z nichž jedna je zobrazena níže:
Výrobky se animují při prvním příchodu na stránku, a pokud přepnete mezi podkategorií, viditelné produkty se vyběhnou a nové se dostanou na své místo. To se provádí pomocí kódu klíčového snímku CSS3, někteří z kterých je zobrazeno níže:
Na prohlížečích jiných než WebKit přepíná animace prohlížeče produktu na jednoduché vyblednutí založené na jazyce JavaScript. Ačkoli tento druh věci není v žádném případě ideální (protože to v podstatě znamená "kódování bičování"), je to realistická možnost pro vývojáře a návrháře, kteří dnes chtějí kódovat nejlepší možné prohlížeče a poskytnout méně rozšířené funkce pro zbytek .
Vyhledávací pole Auto-návrh
[UPDATE] Jak zdůraznil řada lidí v komentářích, auto-navrhování není nová funkce. Začlenění této skutečnosti jako "nové funkce" bylo založeno na dalším článku, který hlásil, že auto-navrhování bylo nové. Nicméně tuto sekci ponecháme, protože je to dobrá funkce, která má potenciál učinit webové stránky trochu použitelnější a poskytuje dobrý příklad pro další vývojáře a návrháře, kteří se budou řídit, pokud se hodí k jejich projektu.
Při zadávání vyhledávacího dotazu se objeví rozevírací nabídka Automatické navrhování, které se řídí Ajaxem:
Jak je vidět na snímání obrazovky výše, rozbalovací nabídka zobrazuje výsledky vyhledávání, které odpovídají zadaným znakům, ale výsledky jsou doprovázeny fotografiemi a popisy produktů. Myslím, že fotografie jsou na tomto místě mnohem cennější než popisy, ale celkově to má potenciál zjednodušit vyhledávání a konverzi produktů.
Něco dalšího?
Zdá se, že pokrývá hlavní změny v nedávném přepracování návrhu Apple.com. Existují nějaké další významné změny návrhu nebo kódu, které jsem zde neuvedl?
Tento příspěvek byl napsán výhradně pro Webdesigner Depot Louis Lazaris, nezávislý spisovatel a webový vývojář. Louis běží Působivé weby kde on posílá články a cvičení na web designu. Můžeš následovat Louis na Twitteru nebo se s ním spojte prostřednictvím svých webových stránek.
Co si myslíte o změnách návrhu Apple.com? Existují nějaké změny, které jsme zde neuvedli?