it-swarm-vi.tech

Kích thước nút nhỏ nhất và khoảng cách cho màn hình cảm ứng

Đối với màn hình cảm ứng, chẳng hạn như iPhone, kích thước nhỏ nhất cho một nút bạn có thể thoát khỏi là gì?

Và làm thế nào chặt chẽ họ có thể được xô đẩy với nhau?

Tôi đã có một ứng dụng sẽ có rất nhiều nút trên một màn hình và cần thiết kế để ứng dụng có thể sử dụng được.

13
Mongus Pong

(Vì tôi khá lười biếng, tôi sẽ bắt đầu bằng cách in lại câu trả lời của tôi từ một chủ đề trên SO)

Nghiên cứu khoa học gần đây đã phát hiện ra rằng:

[A] kích thước mục tiêu của 9,2 mm cho các tác vụ rời rạc [tức là các tác vụ trỏ đơn mục tiêu ] và các mục tiêu 9,6 mm cho các tác vụ nối tiếp phải đủ lớn để sử dụng ngón tay cái một tay trên thiết bị cầm tay dựa trên màn hình cảm ứng mà không làm giảm hiệu suất và ưu tiên.

Được trích dẫn từ Nghiên cứu kích thước mục tiêu cho sử dụng ngón tay cái một tay trên các thiết bị màn hình cảm ứng nhỏ (Parhi, Karlson, & Bederson 2006). Các nguồn khác đồng ý với "quy tắc gần 0,4 inch" này (ví dụ: Thiết kế giao diện cử chỉ (Saffer 2008, p. 42)).

Với mật độ điểm ảnh của iPhone là 163 PPI (6.417px/mm), tốt nhất bạn nên nhắm không thấp hơn đường chéo 59px cho bất kỳ mục tiêu.

(Xin lưu ý rằng điều này được xác minh cho chỉ sử dụng ngón tay cái một tay.)


Nếu bạn làm theo các hướng dẫn này, khoảng cách có thể sẽ bị loại bỏ.

tl; dr? Tất cả sôi sục xuống mật độ pixel.

10
jensgram

Tham khảo Nguyên tắc giao diện con người của iPhone (liên kết đó đi đến hướng dẫn dành cho ứng dụng web) để biết các đề xuất của Apple. Có một chương gọi là " Cung cấp các mục tiêu có kích thước bằng ngón tay " bạn có thể sử dụng để đưa ra quyết định của mình.

Ngoài ra, đừng đoán, kiểm tra. Nhận một số người có ngón tay có kích thước khác nhau (trong đối tượng mục tiêu của bạn) và yêu cầu họ cố gắng nhấn các nút có kích thước khác nhau trong một nguyên mẫu. Điều đó sẽ dạy cho bạn rất nhiều về những gì mong đợi.

Chỉnh sửa: Hướng dẫn tương tác và thiết kế giao diện người dùng của Microsoft cho Windows Phone 7 chi tiết "kích thước mục tiêu cảm ứng tối thiểu" trên trang 4. Nói chung hướng dẫn là tuyệt vời và phải đọc cho các nhà thiết kế UI làm việc trên giao diện người dùng màn hình cảm ứng.

8
Rahul

Trong khi phát triển một số Android, tôi đã phải kiểm tra vùng cảm ứng nhỏ nhất mà người dùng có thể truy cập dễ dàng và chính xác bằng ngón tay/chạm (thực hiện các hành động nhấp và kéo).

Các thử nghiệm được thực hiện trên 3 Android: HTC Hero, Samsung Galaxy Spica, T-Mobile Pulse. Các điện thoại có màn hình 3,2 inch ngoại trừ Pulse (có màn hình 3,5 inch), tất cả trong số chúng có độ phân giải màn hình 320x480 pixel và bề mặt màn hình điện dung.

Câu chuyện dài, mọi thứ nhỏ hơn 20x20 pixel đều không sử dụng được. Cũng lưu ý rằng nên có không gian xung quanh nút (lề 5 pixel).

2
Bojan Gavrovski

Rất nhiều hướng dẫn UX xoay quanh kích thước đầu ngón tay và những hướng dẫn này khác nhau về kích thước và khoảng cách được đề xuất. Kích thước đầu ngón tay không phải là yếu tố duy nhất trong việc xác định các điều khiển kích thước tối thiểu và khoảng cách nên là gì.

Liên hệ Patch

Xem xét 'miếng vá tiếp xúc' thực tế được tạo bởi ngón tay/ngón tay cái khi tiếp xúc với màn hình cảm ứng. Bạn cũng cần xem xét các lỗi trong phán đoán của người dùng khi nghĩ rằng họ đã tập trung trực quan vào cảm ứng của họ trên mục tiêu nhưng thực tế, liên hệ thực tế với màn hình có thể hơi lệch về một phía.

Loại thiết bị

Do cách thức giữ các thiết bị khác nhau và sự khác biệt về khoảng cách với người dùng (ví dụ so sánh điện thoại di động với máy tính bảng, điện thoại có thể được giữ gần hơn), kích thước và khoảng cách chạm tối thiểu cũng có thể khác nhau. Bạn có thể tranh cãi với mức tối thiểu nhỏ hơn trên điện thoại vì chúng được đặt gần người xem hơn và ít có khả năng mắc lỗi hơn. Đối với một thiết bị lớn hơn như máy tính bảng được đặt ở xa hơn, bạn có thể cần tăng kích thước tối thiểu để phục vụ cho khả năng mắc lỗi cao hơn.


Có một bài viết tuyệt vời nói về điều này và các yếu tố khác trên UXmatters ( http://www.uxmatters.com/mt/archives/ 2013/03/Common-misconception-about-touch.php ).

Đoạn trích từ bài viết :

... chỉ một phần của ngón tay hoặc ngón cái tạo ra sự tiếp xúc với màn hình ... miếng vá tiếp xúc thay đổi theo áp lực và góc

Kích thước vật lý quan trọng , vì vậy tất cả các hướng dẫn tốt đều được tính bằng milimét, inch, máy đánh chữ điểm điểm hoặc quy mô trong thế giới thực khác.

ở đó, không cần phải tăng kích thước của mục tiêu có thể nhìn thấy. Thay vào đó, bạn có thể chỉ cần tăng kích thước của khu vực có thể nhấp xung quanh một liên kết hoặc nút

Thiết kế cho cả khu vực mục tiêu trực quan và cảm ứng. Xem xét kỳ vọng của người dùng.

Kích thước:

enter image description here

1
Dave Haigh

Cũng giống như một bổ sung: Thiết kế tài liệu của Google đề xuất tối thiểu 7-10mm cho kích thước mục tiêu cảm ứng https://www.google.com/design/spec/search.html?q=Touch+target+size

0
Andi