Tương tác

Các thiết bị màn hình nhỏ như điện thoại di động thường có màn hình cảm ứng. Các thiết bị màn hình lớn như máy tính xách tay và máy tính để bàn thường đi kèm với phần cứng như chuột hoặc bàn di chuột. Bạn có thể dễ dàng đánh đồng màn hình nhỏ với thao tác chạm và màn hình lớn với con trỏ.

Nhưng thực tế lại phức tạp hơn. Một số máy tính xách tay có màn hình cảm ứng. Người dùng có thể tương tác bằng màn hình cảm ứng, bàn di chuột hoặc cả hai. Tương tự, bạn có thể sử dụng bàn phím hoặc chuột bên ngoài với thiết bị màn hình cảm ứng như máy tính bảng.

Thay vì cố gắng suy luận cơ chế nhập từ kích thước màn hình, hãy sử dụng các tính năng đa phương tiện trong CSS.

Con trỏ

Bạn có thể kiểm thử 3 giá trị có thể có bằng tính năng nội dung nghe nhìn pointer: none, coarse và fine.

Nếu trình duyệt báo cáo giá trị pointer là none, thì có thể người dùng đang sử dụng bàn phím để tương tác với trang web của bạn.

Nếu trình duyệt báo cáo giá trị pointer là coarse, thì có nghĩa là cơ chế nhập chính không chính xác lắm. Ngón tay trên màn hình cảm ứng là con trỏ thô.

Nếu trình duyệt báo cáo giá trị pointer là fine, thì điều đó có nghĩa là cơ chế nhập chính có thể kiểm soát chi tiết. Chuột hoặc bút cảm ứng là con trỏ tốt.

Bạn có thể điều chỉnh kích thước của các thành phần giao diện cho phù hợp với giá trị pointer. Hãy thử truy cập trang web này trên nhiều loại thiết bị để xem giao diện thích ứng như thế nào.

Trong ví dụ này, các nút được làm lớn hơn cho con trỏ thô:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Bạn cũng có thể làm nhỏ các phần tử cho con trỏ tinh tế, nhưng hãy cẩn thận khi làm việc này:

Không nên

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

Ngay cả khi người dùng có cơ chế nhập chính có thể kiểm soát chi tiết, hãy suy nghĩ kỹ trước khi giảm kích thước của các thành phần tương tác. Định luật Fitts vẫn được áp dụng. Mục tiêu nhỏ hơn đòi hỏi sự tập trung nhiều hơn ngay cả khi có con trỏ tốt. Khu vực mục tiêu lớn hơn sẽ mang lại lợi ích cho mọi người, bất kể thiết bị trỏ.

Con trỏ bất kỳ

Tính năng nội dung nghe nhìn pointer báo cáo độ tinh tế của cơ chế nhập chính. Tuy nhiên, nhiều thiết bị có nhiều cơ chế nhập. Có thể có người đang tương tác với trang web của bạn bằng cả màn hình cảm ứng và chuột cùng một lúc.

any-pointer khác với tính năng đa phương tiện pointer ở chỗ tính năng này báo cáo nếu có thiết bị trỏ nào vượt qua bài kiểm thử.

Giá trị any-pointer là none có nghĩa là không có thiết bị trỏ nào.

Giá trị any-pointer là coarse có nghĩa là ít nhất một thiết bị trỏ không chính xác lắm. Nhưng đó có thể không phải là cơ chế đầu vào chính.

Giá trị any-pointer là fine có nghĩa là ít nhất một thiết bị trỏ có thể điều khiển chi tiết. Nhưng xin nhắc lại, đây có thể không phải là cơ chế nhập chính.

Vì truy vấn nội dung đa phương tiện any-pointer sẽ báo cáo kết quả dương tính nếu bất kỳ cơ chế nhập nào vượt qua kiểm thử, nên trình duyệt có thể báo cáo kết quả cho any-pointer: fine và cũng báo cáo kết quả cho any-pointer: coarse. Trong trường hợp đó, thứ tự của các truy vấn nội dung nghe nhìn sẽ rất quan trọng. Lệnh cuối cùng sẽ được ưu tiên.

Trong ví dụ này, nếu thiết bị có cả cơ chế nhập chính xác và cơ chế nhập thô, thì các kiểu thô sẽ được áp dụng.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Khoảng cách di

Tính năng nội dung nghe nhìn hover báo cáo về việc liệu cơ chế nhập chính có thể di chuột qua các phần tử hay không. Điều này thường có nghĩa là có một loại con trỏ trên màn hình được điều khiển bằng chuột hoặc bàn di chuột.

Không giống như tính năng nội dung đa phương tiện pointer phân biệt giữa con trỏ tinh và con trỏ thô, tính năng nội dung đa phương tiện hover là nhị phân. Nếu thiết bị đầu vào chính có thể di chuột qua các phần tử, thì thiết bị đó sẽ báo cáo giá trị là hover. Nếu không, giá trị sẽ là none.

Trong ví dụ này, một số biểu tượng bổ sung sẽ xuất hiện khi di chuột, nhưng chỉ khi thiết bị đầu vào chính có thể di chuột qua một phần tử.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

Nếu bạn di chuột qua nút đó, biểu tượng sẽ xuất hiện. Tuy nhiên, nếu bạn sử dụng bàn phím để chuyển đến nút này, biểu tượng vẫn sẽ không hiển thị. Khi sử dụng bàn phím, bạn đang đặt tiêu điểm thay vì di chuột. Một thiết bị máy tính để bàn có chuột đính kèm sẽ báo cáo rằng cơ chế nhập chính có thể di chuột. Tuy nhiên, bất kỳ ai sử dụng bàn phím khi chuột được gắn sẽ không nhận được lợi ích của các kiểu :hover. Vì vậy, bạn nên kết hợp các kiểu :hover và :focus để bao gồm cả hai hoạt động tương tác.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

Ngay cả khi thiết bị đầu vào chính có thể di chuột qua các phần tử, hãy cẩn thận khi ẩn thông tin sau một lượt tương tác di chuột. Người dùng khó tìm thấy thông tin hơn. Đừng sử dụng thao tác di chuột để ẩn thông tin quan trọng hoặc một thành phần giao diện quan trọng.

Bất kỳ hoạt động di chuột nào

Truy vấn nội dung nghe nhìn hover chỉ báo cáo về cơ chế nhập chính. Một số thiết bị có nhiều cơ chế nhập: màn hình cảm ứng, chuột, bàn phím, bàn di chuột.

Giống như any-pointer báo cáo về bất kỳ cơ chế nhập nào, any-hover sẽ là đúng nếu bất kỳ cơ chế nhập nào có sẵn đều có thể di chuột qua các phần tử.

Nếu quyết định đảo ngược logic trong ví dụ trước, bạn có thể đặt kiểu di chuột thành mặc định rồi xoá các kiểu đó nếu any-hover có giá trị là none.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

Trên một thiết bị không có cơ chế nhập có thể di chuột, biểu tượng bổ sung sẽ luôn hiển thị.

Bàn phím ảo

Mọi người sử dụng con trỏ và ngón tay để khám phá giao diện, nhưng khi đến lúc nhập thông tin, họ cần có bàn phím. Điều này không sao nếu thiết bị của họ có bàn phím thực, nhưng sẽ phức tạp hơn một chút nếu họ đang sử dụng thiết bị màn hình cảm ứng. Các thiết bị này cung cấp bàn phím ảo trên màn hình.

Loại dữ liệu đầu vào

Không giống như bàn phím thực, bàn phím ảo có thể được điều chỉnh cho phù hợp với dữ liệu đầu vào dự kiến. Nếu bạn cung cấp thông tin về dữ liệu đầu vào dự kiến, thiết bị có thể hiển thị bàn phím ảo phù hợp nhất.

Các loại dữ liệu đầu vào HTML5 là một cách tuyệt vời để mô tả các phần tử input. Thuộc tính type chấp nhận các giá trị như email, number, tel, url, v.v.

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

Chế độ nhập

Browser Support

• 66
• 79
• 95
• 12.1

Source

Thuộc tính inputmode giúp bạn kiểm soát chi tiết bàn phím ảo. Ví dụ: trong khi có một input type có giá trị là number, bạn có thể sử dụng thuộc tính inputmode để phân biệt giữa số nguyên và số thập phân.

Nếu bạn đang yêu cầu một số nguyên, chẳng hạn như tuổi của một người, hãy sử dụng inputmode="numeric".

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

Nếu bạn yêu cầu một số có chứa chữ số thập phân, chẳng hạn như giá, hãy sử dụng inputmode="decimal".

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

Tự động hoàn thành

Không ai thích điền vào biểu mẫu. Là nhà thiết kế, bạn có thể cải thiện trải nghiệm cho người dùng bằng cách cho phép họ tự động điền vào các trường trong biểu mẫu. Thuộc tính autocomplete cung cấp cho bạn một loạt các tuỳ chọn để cải thiện biểu mẫu liên hệ, biểu mẫu đăng nhập và biểu mẫu thanh toán.

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

Những thuộc tính HTML này (type, inputmode và autocomplete) là những thuộc tính bổ sung nhỏ cho các trường biểu mẫu, nhưng có thể tạo ra sự khác biệt lớn đối với trải nghiệm người dùng. Bằng cách dự đoán và phản hồi các chức năng của thiết bị của người dùng, bạn đang trao quyền cho người dùng. Để biết thêm thông tin chuyên sâu, chúng tôi có một khoá học dành riêng để giúp bạn tìm hiểu về biểu mẫu.

Tiếp theo trong khoá học này, chúng ta sẽ tìm hiểu một số mẫu giao diện phổ biến.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về lượt tương tác

Bạn nên sử dụng tính năng nào thay vì cố gắng suy luận loại dữ liệu đầu vào của người dùng từ kích thước màn hình?

Tính năng đa phương tiện của CSS

Giống như @media (pointer: coarse) hoặc @media (-any-pointer: coarse)

Hỏi người dùng bằng prompt() của JavaScript

Không nên hỏi trực tiếp.

Loại nội dung đa phương tiện CSS handheld

Chúng tôi đã ngừng sử dụng tính năng này trong Truy vấn nội dung nghe nhìn 4.

Sự khác biệt giữa @media (pointer) và @media (any-pointer) là gì?

Bất kỳ con trỏ nào cũng bao gồm những thứ như ngón tay của bạn dưới dạng con trỏ.

Con trỏ đã bao gồm thao tác chạm làm một loại dữ liệu đầu vào.

Con trỏ không bao gồm các thiết bị như chuột.

Con trỏ bao gồm cả chuột làm thiết bị đầu vào.

Bất kỳ con trỏ nào cũng sẽ báo cáo đúng khi các phương thức nhập bổ sung, không phải chính (chẳng hạn như bút cảm ứng) vượt qua kiểm thử.

any-pointer truy vấn tất cả các loại phương thức nhập của thiết bị cho mọi kết quả khớp.

Những loại dữ liệu đầu vào nào hiển thị bàn phím ảo phù hợp hơn cho người dùng?

type="url"

Bàn phím sẽ cung cấp các nút để hỗ trợ nhập URL.

type="tel"

Bàn phím sẽ cung cấp các nút để hỗ trợ nhập số điện thoại.

type="number"

Bàn phím sẽ cung cấp các nút chỉ hỗ trợ nhập số.

type="email"

Bàn phím sẽ cung cấp các nút hỗ trợ nhập địa chỉ email.