Vzhledem k tomu, že mobilní zařízení nyní předčí plochu na popularitě, je nutné, aby návrháři vytvořili s ohledem na mobilní zařízení. Mobile-první je populární jako technika, protože je jednodušší měřítko mobilní nahoru, než měřítko desktop dolů.

Nicméně, někdy je výběr vyňat z vašich rukou. Často návrháři zjistili, že přizpůsobují existující designérské návrhy mobilním zařízením. A protože některé prvky se netýkají dobře, je důležité, aby návrháři pochopili, jaké konkrétní úpravy mají být při návrhu na malé obrazovce. Zde je návod ...

Přijměte minimalismus

Minimalismus je již mnoho let populární v designu webových stránek, jednoduše proto, že často pomáhá použitelnost a vypadá také hezky. Pokud jde o mobilní, nicméně, minimalismus je méně estetické volby, protože je založen čistě na použitelnosti.

Podle skupiny Nielsen Norman, řezání je nutností v mobilním designu. Co to znamená pro návrháře, kteří se pokoušejí vybudovat mobilní web z již zavedené pracovní plochy?

Znamená to odstranit to, co není pro mobilní uživatelský zážitek zásadní. Pokud například přecházíte z obchodu na mobil na obchod s elektronickým obchodem, uchovávejte stejné množství produktů zobrazovaných na mobilním webu. to má smysl, protože zákazníci chtějí najít vše, co internetový obchod nabízí, stejně jako internetový obchod chce ukázat vše, co musí prodávat návštěvníkům svých stránek. Velký reklamní karusel pro nejnovější obchody by se však mohl rozumně snížit.

Skrýt navigaci

Jednou z nejobvyklejších vlastností na mobilních obrazovkách je nabídka hamburgerů, která téměř všudypřítomná malá ikona se třemi vodorovnými čárami, které se na sebe navzájem nahromadily. Jedná se o další dokonalý případ, kdy menší velikost obrazovky návrhářů mobilních sil změní prvky, u kterých se očekává, že budou na stolních počítačích vypadat určitě.

Navzdory rozdělenému názoru na přítomnost menu hamburgerů je to na mobilních obrazovkách téměř všudypřítomné, jednoduše proto, že je to nejlepší řešení, které návrháři nalezli pro snížení navigační nabídky z desktopů na mobilní zařízení.

Podívejte se na slavného šéfkuchaře Bobbyho Flaye pro jeho řetězovou restauraci s názvem Bobby's Burger Palace. Jak bylo očekáváno, navigační nabídka je horizontálně rozložena přes horní část domovské stránky, přestože se dostanete na mobilní verzi webu, horizontální nabídka je pryč. Na jeho místě je čisté a upřímné hamburgerové menu, přímo na stejném místě obrazovky, kde bude delší horizontální nabídka na stolní verzi.

Bobbys-Burger-Palace-Desktop-Screenshot
Bobbys-Burger-Palace-Mobile-Screenshot

Walmart také využívá nabídky hamburgerů při přechodu z desktopu na mobilní.

Na svém desktopu zobrazí Walmart rozbalovací nabídku "Všechny oddělení", která otevře druhou vrstvu navigačních možností na stejné stránce. Na mobilním webu však tato funkce není možná kvůli malé velikosti obrazovky, takže byla navržena náhrada: druhá vrstva navigačních možností je v nabídce hamburgerů a tato volba umožňuje stále více navigačních voleb s každým výběrem - téměř jako převrácení stránek knihy zleva doprava.

Walmart-Navigation-Layers-Desktop-Screenshot
Walmart-Mobile-Navigation-Screenshot

Přepnout na jeden sloupec

V souladu s tím, že jednodušší je lepší, pokud jde o mobilní design, uděláte pro své klienty dobře, pokud si pamatujete, že rozložení jednotlivých sloupců je čistější a snadnější pro uživatele, kteří pracují na menší obrazovce. Velkou výhodou uspořádání v jednom sloupci je, že odstraňujete horizontální posouvání, jako byste měli na stránce mnoho textu a chtěli, aby čtenáři přejeli obrazovku zleva doprava a četli.

Když představíte uspořádání pro jednotlivé sloupce, zefektivňujete uživatelský zážitek a povzbuzujete uživatele, aby se jednoduše posunuli dolů, aby si mohli přečíst nebo kliknout na odkaz, který chtějí vidět na nové stránce. To je tudíž nutí přemístit zleva doprava, což je těžší udělat, než jednoduše posunout dolů, zvláště když vezmeme v úvahu polohu palce uživatele vzhledem k tomu, jak drží mobilní zařízení.

Internetové stránky novin The New York Times obsahují několik sloupců. To je snadné použití na ploše, když uživatelé vašeho klienta mohou prostě přesunout kurzor zleva doprava bez problémů na trackpadu nebo myši.

nyt

Samozřejmě, že mobilní stránky The New York Times chápou, jak se mají věci měnit na menších obrazovkách, a tak zavádí čistý a efektivní design s jedním sloupcem, který zvyšuje zážitek uživatelů, protože čtenáři mohou jednoduše posunout dolů pro větší obsah s palci .

nyt_mobile

Mobilní úvahy

Vzhledem k vlivu mobilu na uživatele dnes musí návrháři vždy navrhnout pro mobilní zařízení. Není to dost dobré stačí jednoduše navrhnout mobilní stránky společně s desktop desktop a volat, že navrhování pro mobilní, i když!

Navrhování mobilních prostředků je skutečně ohleduplné k konkrétním úpravám, které budete muset učinit pro vaše klientské místo při návrhu pro malou obrazovku. To zahrnuje všechno, o čem jsme hovořili výše, od minimalismu v návrhu až po skrytí navigačního panelu k přesunu do jednokloubkového uspořádání.

Přijetím těchto osvědčených postupů ve své dovednosti vytvoříte stránky, které jsou perfektně vhodné pro mobilní zařízení.