it-swarm-eu.dev

Nejmenší velikost tlačítka a mezery pro dotykovou obrazovku

Jaká je pro dotykovou obrazovku, jako je iPhone, nejmenší velikost tlačítka, kterou byste mohli dostat pryč?

A jak těsně je lze strčit dohromady?

Mám aplikaci, která bude mít na jedné obrazovce spoustu tlačítek a je třeba ji navrhnout tak, aby byla použitelná.

13
Mongus Pong

(Protože jsem trochu líný, začnu znovu dotiskem moje odpověď z vlákna na SO)

Nedávný vědecký výzkum zjistil, že:

[A] cílová velikost 9,2 mm pro diskrétní úkoly [tj. , úkoly zaměřující se na jeden cíl] a cíle 9,6 mm pro sériové úlohy by měly být dostatečně velké pro použití jednou rukou na handheldech založených na dotykové obrazovce, aniž by došlo ke snížení výkonu a preference.

Citováno z Studie cílové velikosti pro použití jednou rukou na palcích na malých dotykových zařízeních (Parhi, Karlson, & Bederson 2006). Jiné zdroje se shodují na tomto „pravidlu téměř 0,4 palce“ (např. Navrhování gestických rozhraní (Saffer 2008, s. 42)).

Vzhledem k hustotě pixelů v iPhonu 163 PPI (6,417px/mm) byste měli zaměřit ne méně než 59px úhlopříčku pro jakýkoli cíl.

(Vezměte prosím na vědomí, že je to ověřeno pouze pro jednoruční palec .)


Při dodržení těchto pokynů může být mezera odstraněna .

tl; dr? Vše se scvrkává na hustotu pixelů.

10
jensgram

Doporučení společnosti Apple naleznete v Pokyny pro lidské rozhraní pro iPhone (odkaz odkazuje na pokyny pro webové aplikace). Existuje kapitola nazvaná „ Poskytněte cíle velikosti prstů “, na které můžete pravděpodobně založit svá rozhodnutí.

Hádejte také, testujte. Získejte některé lidi s prsty různých velikostí (v cílové skupině) a nechte je, aby se pokusili stisknout tlačítka prototypu o různých velikostech. To vás naučí hodně o tom, co můžete očekávat.

Úpravy: Příručka společnosti Microsoft pro návrh a interakci uživatelského rozhraní pro Windows Phone 7 podrobnosti „minimální cílové velikosti dotyku“ na stránce 4. Celkově to průvodce je vynikající a musí si přečíst návrháři uživatelského rozhraní pracující na uživatelském rozhraní dotykové obrazovky.

8
Rahul

Při vývoji některých mobilních aplikací založených na platformě Android) jsem musel vyzkoušet nejmenší dotykovou oblast, ke které může uživatel snadno a přesně přistupovat prstem/dotykem (provádět akce klepnutí a přetažení).

Testy byly provedeny na telefonech založených na 3 Android: HTC Hero, Samsung Galaxy Spica, T-Mobile Pulse. Telefony měly 3,2 palcové obrazovky s výjimkou Pulse (který má 3,5 palcové obrazovky), všechny z nich s rozlišením obrazovky 320 x 480 pixelů a kapacitním povrchem obrazovky.

Dlouhá povídka, všechno, co bylo menší než 20x20 pixelů, bylo nepoužitelné. Nezapomeňte také, že kolem tlačítka by měl být mezera (okraj 5 pixelů).

2
Bojan Gavrovski

Mnoho pokynů UX se točí kolem velikosti hrotu prstu a tyto pokyny se liší doporučenou velikostí a rozestupy. Velikost špiček prstu by neměla být jediným faktorem při určování toho, jaké minimální kontroly velikosti a mezery by měly být.

Kontaktujte opravu

Při kontaktu s dotykovou obrazovkou zvažte skutečnou „kontaktní plochu“ vytvořenou prstem/palcem. Musíte také zvážit chyby v úsudku uživatele v tom, že si mysleli, že vizuálně soustředili svůj dotyk na cíl, ale ve skutečnosti může být skutečný kontakt s obrazovkou mírně mimo jednu stranu.

Typ zařízení

Vzhledem k tomu, že jsou držena různá zařízení a rozdíl ve vzdálenosti od uživatele (např. Mobilní telefon může být např. Tablet, může být telefon držen blíže), minimální velikost dotyku a mezery se mohou také lišit. Dalo by se pravděpodobně dostat pryč s menším minimem na telefonu, protože jsou drženi blíže k divákovi a méně pravděpodobné chyby. U větších zařízení, jako je tablet držený dále od sebe, budete možná muset zvýšit své minimální velikosti, aby bylo zajištěno vyšší riziko chyb.


Existuje skvělý článek o tomto a dalších faktorech na UXmatters ( http://www.uxmatters.com/mt/archives/) 2013/03/common-misconceptions-about-touch.php ).

Úryvky z článku:

... pouze část prstu nebo palce navazuje kontakt s obrazovkou ... kontaktní záplata se mění podle tlaku a úhlu

Na fyzických velikostech záleží , takže všechny dobré pokyny jsou v milimetrech, palcích, bodech typografů nebo v jiných měřítcích skutečného světa.

není třeba zvětšovat velikost viditelného cíle. Místo toho můžete jednoduše zvětšit rozměry oblasti, na kterou lze kliknout kolem odkazu nebo tlačítka

Design pro vizuální i dotykové cílové oblasti. Zvažte očekávání uživatelů.

Velikosti:

enter image description here

1
Dave Haigh

Stejně jako doplněk: Materiálový design Google navrhuje pro cílovou velikost dotyku minimálně 7-10 mm https://www.google.com/design/spec/search.html?q=Touch+target+size

0
Andi