od roku 2020 je na světě 3, 5 miliardy uživatelů smartphonů. To je 45% světové populace. Od roku 2019 lidé přistupovali k internetu s 9000+ odlišnými zařízeními. Každý uživatel očekává, že každý web, ke kterému přistupují, se na svém mobilním zařízení dokonale vykreslí. To znamená, že vývojáři webových stránek musí navrhovat webové stránky, které jsou zobrazeny na mnoha velikostech obrazovky po celém světě.
jinými slovy, potřebují citlivý design.,
ale jak každý návrhář ví, provedení responzivního designu musí začít s vědomím, pro které velikosti obrazovky je třeba navrhnout. Tento článek zkoumá tuto otázku a diskutuje o nejlepších velikostech výkřiku pro citlivý design.
co je responzivní Design?
responzivní web design odkazuje na návrhovou strategii, která vytváří webové stránky, které dobře fungují pro mobilní, tabletová a stolní zařízení. Webové stránky bez responzivního designu riskují odcizení značného počtu uživatelů – 80% uživatelů tvrdilo, že odmítnou webové stránky, které na svém zařízení nefungují dobře.,
Google se navíc dívá na“ mobilní přívětivost “ jako parametr pro hodnocení. Chcete-li citovat centrální Blog Google Webmaster,
„od 21.Dubna (2015) budeme rozšiřovat naše používání mobilní přívětivosti jako hodnotícího signálu. Tato změna ovlivní mobilní vyhledávání ve všech jazycích po celém světě a bude mít významný dopad na naše výsledky vyhledávání. V důsledku toho bude pro uživatele snazší získat relevantní, vysoce kvalitní výsledky vyhledávání, které jsou optimalizovány pro jejich zařízení.“
jak tedy člověk najde ideální citlivé velikosti obrazovky?,
Poznámka: abychom pochopili, proč je citlivý design nedílnou součástí úspěchu webových stránek, musíme pochopit obrovskou a stále rostoucí povahu fragmentace zařízení. Stáhněte si naši e-knihu o fragmentaci zařízení a získejte nejnovější informace o tomto jevu.,
Zdroj Obrazu
Podle Celosvětové Rozlišení Obrazovky Statistiky (Listopad 2018 – Listopad 2019), nejčastěji používané rozlišení jsou:
Toaletní Citlivý Test na Běžně Používané Usnesení
Zkuste si otestovat schopnosti vašeho webu na skutečných zařízeních.
důraz na mobilní přívětivost samozřejmě neznamená, že člověk opustí stolní zařízení. Jak ukazuje níže uvedený graf, stolní zařízení stále tvoří značnou část používání internetu.,
Zdroj Obrázku
- Mobilní – 52.03%
- Desktop – 45.17%
- Tablet – 2.,8%
Podle společnosti Microsoft dokumentaci,
S velkým počtem zařízení cílů a velikostí obrazovky přes Windows 10 ekosystému, spíše než optimalizace UI pro každé zařízení, doporučujeme navrhování pro několik klíčových šířka kategorií (také volal „zarážky“):
- Malé (menší než 640px)
- Střední (641px na 1007px)
- Velké (1008px a větší),
i Přes tyto informace, nezapomeňte, že neexistuje žádná standardní velikost obrazovky pro web design., V závislosti na povaze webu mohou uživatelé používat některá zařízení, která nenabízejí výše uvedené velikosti a rozlišení obrazovky. Chcete-li identifikovat správné velikosti obrazovky pro web design, investujte do analytiky. Zjistěte, co vaše cílové publikum s největší pravděpodobností použije. Pokud tato zařízení nedodržují výše uvedené rozlišení, zahrňte je do mixu.,
1-Click Přístup k Citlivé Checker Nástroj,
doporučené Postupy pro Implementaci Responzivní Design
To se stává mnohem jednodušší navrhnout webové stránky pro více velikostí obrazovky, s následujícími pokyny:
- Znát své zarážky: V responzivní design, zarážku je „bod“, na němž obsah a design se přizpůsobí určitým způsobem s cílem poskytnout nejlepší možný uživatelský zážitek. Aby web reagoval, musí návrháři přidat bod zlomu,když obsah vypadá špatně., V závislosti na počtu zařízení, na která je web zarovnán, musí být nastaveno více bodů přerušení, aby byla zajištěna jeho citlivost. Viz tento článek na reagující zarážky dozvědět se o nich a jejich účinnost v detailu.
- vytvořit návrhy tekutin: návrh tekutin se týká rozvržení návrhu, které může posunout (rozšířit a uzavřít smlouvu) tak, aby odpovídalo výřezu zařízení, na kterém běží. Pevné rozvržení návrhu bude nežádoucím způsobem zkreslovat na každém výřezu, ke kterému nejsou zarovnány., Práce na rozvržení návrhu pomocí % jednotek, stejně jako Max-šířky, aby se zajistilo, že rozložení se hodí mobilní zařízení viewports, aniž by se příliš široký na stolních zařízení viewports.
- snížení tření: to v podstatě znamená, že konstrukce musí být snadno použitelná na více zařízeních. Citlivý design nezahrnuje pouze to, jak vypadá web, ale také to, jak funguje z hlediska dostupnosti a použitelnosti. Zaměřit se zejména na malé obrazovce tření, protože velikosti obrazovky snížit, webové prvky mají méně prostoru k vykreslení a stát se více pravděpodobné, že tahanice a narušit.,
- Design Mobile-První: vzhledem k tomu, tření je větší pravděpodobnost, že dojde na menších obrazovkách, design s mobilním prvním přístupem. Je těžší zúžit rozvržení plochy pro mobilní výřez, zatímco je to jednodušší. Při navrhování mobile-first návrhář zahrnuje to, co je naprosto nezbytné pro zajištění optimálního uživatelského zážitku.,
Zde je několik způsobů, jak jít o s mobilní první design:
- Priority důležité volby menu
- Odstranit všechny vizuální rozptýlení
- Optimalizovat design pro tapability – vše snadné klepnout
- Odstranit zbytečné formuláře a informační pole
- Zvýraznění hlavní CTA
- Prominentně nabízejí funkce vyhledávání a filtrování
- Další funkce, méně psaní: Je zřejmé, že psaní je těžší na mobilních zařízeních, než je na pracovní ploše zařízení. Má tedy smysl minimalizovat potřebu psaní na mobilních verzích webových stránek., Nahraďte psaní vědomě využívajícími funkcemi zařízení, jako je GPS, čtení QR kódu, biometrické ID a podobně. Usnadněte uživatelům sdílet, e-mailem nebo volat příslušná čísla umístěním odkazů, které spouštějí potřebné funkce. Mějte na paměti, že nejlépe reagující design zahrnuje zjednodušení a odstranění nepohodlných mobilních interakcí.
- Test, test, test: jakmile vývojář nebo designér zná nejlepší velikosti obrazovky pro citlivý design, dělají práci a vytvářejí citlivý web., Aby se však zajistilo, že web skutečně vykreslí způsob, jakým je určen na zařízeních, pro která byl vytvořen, musí být přesně testován. Snadný způsob, jak to udělat, je použít citlivý design checker. Namísto spuštění webové stránky, prostřednictvím jednotlivých zařízení s různými výřezy, zadejte adresu URL do checker a uvidíme, jak se zdá, na řadu nejnovější zařízení v různých, často používané rozlišení zařízení. Kontrola souvisí především nabízí citlivý kontrola na nejnovější mobilní zařízení, jako jsou iPhone X, Galaxy Note 10, iPhone, 8 Plus, a další.,
zatímco citlivý design se může zdát obtížné provést, informace v tomto článku se snaží tento proces zjednodušit pro vývojáře a designéry. Tím, co je uvedeno výše, je mnohem snazší vytvářet webové stránky, které potěší své publikum, bez ohledu na zařízení, které používají pro přístup na tento web.
Vyzkoušejte responzivní Checker zdarma