Jak používat vzory návrhu UI
Návrhové vzory jsou optimální řešení běžných problémů při návrhu. Jelikož společné problémy jsou hodnoceny kolem komunity a jsou vyřešeny, často se objevují společná řešení. Nakonec se ty nejlepší z nich zvedají nad sebou, samy se identifikují a stávají se rafinovanějšími, dokud nedosáhnou statusu designového vzoru.
Nechtěla bych nazvat návrhový patern trend v designu webových stránek, návrhové vzory se zdají být spíše o tom, jak se společné návrhy klasifikují v retrospektivě, spíše než vytvářet nové území nebo hledat, kam se věci vedou.
Jak byste měli přistupovat k návrhovým vzorům uživatelského rozhraní?
Vždy používáme designové vzory, pokud jste s nimi neznali, pravděpodobně jste si neuvědomili, že jsou všude kolem vás.
A co klasický příklad toho, že se má na jedné stránce zobrazit příliš mnoho obsahu? Zaměřujeme se na "Tabs", designový vzor, který nám umožňuje sloužit veškerému obsahu, který chceme, aniž by uživatel zmizel v moři propojení.
Typické přínosy pro použití návrhového vzoru zahrnují:
- ukázat začátečníkům, jak používat nejlepší postupy v návrhu webových stránek;
- učit se přizpůsobit se kolektivnímu porozumění návrhářům;
- což umožňuje lepší komunikaci, snižuje riziko spojené s neznámými volbami;
- snížení potřebného času a nákladů na pracovní postupy při provádění konkrétních úkolů;
- vyhýbat se ztrátě času na budování něčeho, co bylo dříve postaveno;
- dává uživateli zkušenost, kterou je znám a zkušený (povaha návrhových vzorů).
Ve výše uvedeném příkladu vidíme Clicky Media pomocí dvou velmi populárních návrhových vzorů dnes:
- Navicon - univerzální symbol pro menu, jinak známý jako navigace na webu, se stává stále oblíbenějším moderním webovým designem, ale již byl plně přizpůsoben mobilním zařízením.
- Parallax Scrolling - jedinečný designový vzor, který umožňuje jednostránkové webové stránky s snadno použitelným mechanismem rolování, ale také obsahuje seznam spriahů na pozadí, které dávají stránce živý pocit.
I když obě nabídky Navicon a obecné menu v horní části stránky sdílejí podobné volby - bylo by velmi rušivé zahrnout všechny odkazy na stejném panelu záhlaví - je zřejmé, že malé možnosti mohou mít velký rozdíl.
Zde je třeba uvažovat při hodnocení návrhu a přizpůsobení jeho vlastním potřebám:
- Souhrn problémů: Jaký uživatelský problém řešíte? Zůstaňte soustředěni a vyjadřujte jej jako příběh uživatele - pouze v jedné větě.
- Řešení: Jak jiní vyřešili tento problém? Několik detailů zahrnuje navigaci uživatelů (včetně zkratek), získávání uživatelských vstupů, zpracování dat a integrace s jinými službami nebo aplikacemi a zobrazování informací a obsahu (včetně výchozích hodnot).
- Příklad: skvělý, můžete mi ukázat? Někdy je dostačující screenshot nebo mockup; jindy je potřeba uživatelských toků a / nebo dalších poznámek jasně oznamovat vzor.
- Použití: kdy by tento vzor (ne) měl být použit? Několik detailů zahrnuje architekturu produktu, rozložení rozhraní, zařízení (y), programovací jazyk, nepřítomnost nebo existenci jiných návrhových vzorů, typu uživatele a případů primárního použití.
Trvalé cvičení a disciplína si myslíte na vzory tímto způsobem, pokud jste je ještě neudělali. Udělejte si čas na zodpovězení těchto otázek při navrhování produktu, protože by vám pomohlo ušetřit spoustu času při refaktorování po silnici, když uživatelé a tým požadují podobné detaily.
Vzestup nástrojových sad UI
Vzory návrhu UI byly vždy o tom, že uživatelům usnadňuje navigaci vašeho webu, aplikace nebo systému. Pokud se uživatel dozví, jak poprvé podat komentář, je pravděpodobné, že okamžitě bude vědět, jak vám poslat e-mail pomocí kontaktního formuláře, je to stejný opakující se koncept zadávání informací.
V uplynulých letech jsme zaznamenali obrovský nárůst trhu nástrojů UI. Soubor nástrojů UI lze jednoduše chápat jako soubor widgetů, které vám umožňují vytvořit zcela grafickou aplikaci od začátku. Twitter Bootstrap je dokonalým příkladem úspěšné sady nástrojů UI. V dnešní době se značná část webových designérů spoléhá na funkce Bootstrap, aby usnadnila vlastní pracovní postup. V jistém smyslu není třeba znovu objevovat kolo!
3 vzory vzory UI si pamatujte
Stručně řečeno, návrhové modely jsou řešením opakujících se problémů. Použitím vzorků můžeme překonat jednoduché problémy s uživatelským rozhraním. Pokud věnujeme velkou pozornost, všimneme si, že vzory jsou všude kolem nás. Neexistuje nic zvláštního, pokud jde o tento konkrétní design, je to způsob, jakým byl použit, že jste nadšeni!
Křišťálově čisté výzvy k akci
Nejjednodušší z webových formulářů (a také nejběžnějších) bude mít obvykle jediné akční tlačítko: v tomto případě 'Vytvořit web'. Je to docela samo vysvětlující, což je důvod.
Jak snadnější by to mohlo být, že? Vždy jděte na možnost snadné, nenahládejte kolo jen proto, aby vyniklo z davu.
Drobečky na záchranu
Drobné struktury ukazují cestu z přední stránky webu na aktuální umístění uživatele v hierarchii stránek webových stránek. Jedná se o formu sekundární navigace, která uživatelům pomáhá porozumět hierarchii a struktuře webové stránky. Drobky začínají na domovské stránce a končí se právě prohlíženou stránkou.
V tomto příkladu: Fares Farhan, vidíme, jak využívá současně dva vzory návrhu UI. Za prvé, má nahoře vzorek tabulátorů a na druhém straně má navigační vzorec na strunu. Tím, že je kombinuje, vytváří velmi příjemné procházení.
Registrace by měla být snadná
Pokud žijete pod skále, poznáte sociální registraci. Registrace na webové stránky je běžná věc, kterou je třeba udělat, a měla by být co nejjednodušší a nejpříjemnější.
Toto je momentálně jedna z mých oblíbených stránek registrace. To je GitHub a jak vidíte na screenshotu, všechno, co společnost představuje, je uvedeno za méně než sto slov. Máte také možnost zaregistrovat se na cestách a proces trvá méně než minutu. Získáte e-mail, který ověří váš účet, ale to je něco, na co jsme zvyklí!
Konečná slova
Webové stránky jsem stavěl již přes osm let a během těch osmi let jsem si uvědomil, že jednoduchost je klíčem k mnoha problémům při návrhu.
Dosáhl jsem závěru, že nepořádek v designu, nafouklý zbytečnými prvky a podobami, je nejvíce frustrující zkušeností, kterou můžete najít na webu. Ano, design je přesně tak, jak funguje něco, tak proč to nefunguje správně? Uživatelské rozhraní (UI) je neuvěřitelně důležité pro úspěch vašeho podnikání nebo podnikání.
Nejlepší způsob, jak zajistit, že navrhujete úspěšné weby, je naučit se a využít existující návrhy.