it-swarm-eu.dev

Kleinste Tastengröße und Abstand für einen Touchscreen

Was ist für einen Touchscreen wie das iPhone die kleinste Größe für eine Taste, mit der Sie durchkommen könnten?

Und wie eng könnten sie zusammengeschoben werden?

Ich habe eine App, die viele Schaltflächen auf einem Bildschirm hat und sie so gestalten muss, dass sie verwendet werden kann.

13
Mongus Pong

(Da ich etwas faul bin, beginne ich mit einem Nachdruck meine Antwort aus einem Thread auf SO)

Neuere wissenschaftliche Forschungen haben ergeben, dass:

[A] Zielgröße von 9,2 mm für diskrete Aufgaben [dh Einzelziel-Zeigeaufgaben ] und Ziele von 9,6 mm für serielle Aufgaben sollten für die Verwendung mit einem Daumen auf Touchscreen-basierten Handhelds ausreichend groß sein, ohne die Leistung und Präferenz zu beeinträchtigen.

Zitiert aus Zielgrößenstudie für die Verwendung von Einhand-Daumen auf kleinen Touchscreen-Geräten (Parhi, Karlson & Bederson 2006). Andere Quellen stimmen dieser "Regel nahe 0,4 Zoll" zu (z. B. Entwerfen gestischer Schnittstellen (Saffer 2008, S. 42)).

Angesichts der Pixeldichte des iPhones von 163 PPI (6,417px/mm) sollten Sie vorzugsweise nicht weniger als 59px Diagonale anstreben jedes Ziel.

(Bitte beachten Sie, dass dies nur für Einhand-Daumengebrauch überprüft wird.)


Wenn Sie diese Richtlinien befolgen, wird der Abstand kann beseitigt.

tl; dr? Alles läuft auf die Pixeldichte hinaus.

10
jensgram

Empfehlungen von Apple finden Sie unter iPhone Human Interface Guidelines (dieser Link führt zu den Richtlinien für Web-Apps). Es gibt ein Kapitel mit dem Titel " Ziele mit Fingerspitzengröße bereitstellen ", auf das Sie Ihre Entscheidungen wahrscheinlich stützen können.

Raten Sie auch nicht, testen Sie. Holen Sie sich einige Leute mit unterschiedlich großen Fingern (innerhalb Ihrer Zielgruppe) und lassen Sie sie versuchen, unterschiedlich große Tasten in einem Prototyp zu drücken. Das wird Ihnen viel darüber beibringen, was Sie erwartet.

Bearbeiten: Microsoft UI-Handbuch für Design und Interaktion für Windows Phone 7 Details zu "Minimale Touch-Zielgrößen" auf Seite 4. Insgesamt Die Anleitung ist ausgezeichnet und ein Muss für UI-Designer, die an der Touchscreen-Benutzeroberfläche arbeiten.

8
Rahul

Während der Entwicklung einiger Android-basierter mobiler Anwendungen musste ich den kleinsten Berührungsbereich testen, auf den der Benutzer einfach und präzise mit einem Finger/einer Berührung zugreifen kann (Klick- und Ziehaktionen ausführen).

Die Tests wurden auf 3 Android-basierten Handys: HTC Hero, Samsung Galaxy Spica, T-Mobile Pulse) durchgeführt. Die Handys hatten 3,2-Zoll-Bildschirme mit Ausnahme des Pulse (mit 3,5-Zoll-Bildschirm) davon mit einer Bildschirmauflösung von 320x480 Pixel und einer kapazitiven Bildschirmoberfläche.

Kurz gesagt, alles, was kleiner als 20x20 Pixel war, war unbrauchbar. Denken Sie auch daran, dass um die Schaltfläche herum Platz sein sollte (5-Pixel-Rand).

2
Bojan Gavrovski

Viele UX-Richtlinien drehen sich um die Größe der Fingerspitzen, und diese Richtlinien variieren in der empfohlenen Größe und im empfohlenen Abstand. Fingerspitzengrößen sollten nicht der einzige Faktor sein, um zu bestimmen, welche Mindestgrößensteuerungen und -abstände sein sollten.

Kontakt Patch

Berücksichtigen Sie beim Kontakt mit einem Touchscreen das tatsächliche Kontaktfeld, das Finger/Daumen bilden. Sie müssen auch Fehler in der Beurteilung berücksichtigen, die der Benutzer gemacht hat, wenn er denkt, dass er seine Berührung visuell auf das Ziel zentriert hat, aber tatsächlich kann der tatsächliche Kontakt mit dem Bildschirm leicht von einer Seite abweichen.

Gerätetyp

Aufgrund der Art und Weise, wie verschiedene Geräte gehalten werden, und des Unterschieds in der Entfernung zum Benutzer (vergleichen Sie das Mobiltelefon beispielsweise mit einem Tablet, wenn ein Telefon näher gehalten wird) können auch die minimalen Berührungsgrößen und -abstände variieren. Sie könnten wahrscheinlich mit kleineren Mindestwerten auf einem Telefon davonkommen, da diese näher am Betrachter gehalten werden und Fehler weniger wahrscheinlich gemacht werden. Bei einem größeren Gerät wie einem Tablet, das weiter entfernt gehalten wird, müssen Sie möglicherweise die Mindestgröße erhöhen, um eine höhere Fehlerwahrscheinlichkeit zu erzielen.


Es gibt einen großartigen Artikel über diesen und andere Faktoren auf UXmatters ( http://www.uxmatters.com/mt/archives/). 2013/03/häufige Missverständnisse über touch.php ).

Ausschnitte aus dem Artikel :

... nur ein Teil des Fingers oder Daumens berührt den Bildschirm ... das Kontaktfeld variiert je nach Druck und Winkel

Physikalische Größen sind wichtig , daher sind alle guten Richtlinien in Millimetern, Zoll, Typographenpunkten oder anderen realen Maßstäben angegeben.

das sichtbare Ziel muss nicht vergrößert werden. Stattdessen können Sie einfach die Abmessungen des anklickbaren Bereichs um einen Link oder eine Schaltfläche erhöhen

Design für visuelle und Touch-Zielbereiche. Berücksichtigen Sie die Erwartungen der Benutzer.

Größen:

(enter image description here

1
Dave Haigh

Nur als Ergänzung: Das Google-Materialdesign schlägt ein Minimum von 7 bis 10 mm für die Touch-Zielgröße vor https://www.google.com/design/spec/search.html?q=Touch+target+size

0
Andi