Tương tác vi mô: 15 ví dụ và cách thiết kế chúng
Giải thích về các tương tác vi mô: một định nghĩa, bốn phần của Dan Saffer, 15 ví dụ thực tế được nhóm theo loại, quy tắc thiết kế và cách xây dựng chúng trong CSS, Framer Motion, GSAP hoặc ExodeUI.
Điểm chính
Tương tác vi mô là một khoảnh khắc nhỏ trong giao diện thực hiện một việc: thích một bài đăng, chuyển đổi cài đặt, xác nhận biểu mẫu hoặc hoàn thành một cử chỉ. Thuật ngữ và giải phẫu của nó đến từ Dan Saffer, người định nghĩa bốn phần. Trình kích hoạt khởi động nó, các quy tắc quyết định điều gì sẽ xảy ra, phản hồi hiển thị kết quả và các vòng lặp hoặc chế độ sẽ chi phối những gì nó thực hiện theo thời gian. Các tương tác vi mô tốt thường ngắn gọn, phản hồi thông tin đầu vào của chính người dùng và không bị gián đoạn.
Tương tác vi mô là gì?
Tương tác vi mô là tương tác hoàn chỉnh nhỏ nhất trong một sản phẩm: một nhiệm vụ duy nhất có phần mở đầu, thay đổi và kết thúc. Nó không phải là toàn bộ dòng chảy. Thích một bài đăng là một tương tác vi mô; viết và xuất bản một bình luận là một dòng chảy. Ý tưởng và cấu trúc của nó đến từ cuốn sách Tương tác vi mô của Dan Saffer, chia mỗi phần thành bốn phần.
Bốn phần của tương tác vi mô
Khung của Dan Saffer chia tương tác vi mô thành bốn thành phần. Việc đặt tên cho chúng rất hữu ích vì hầu hết các lỗi và hầu hết các chuyển động xấu đều nằm ở một trong bốn lỗi chứ không phải toàn bộ.
Cò súng
Sự kiện bắt đầu nó. Do người dùng bắt đầu (chạm, di chuột, nhấn và kéo) hoặc do hệ thống bắt đầu (hoàn tất tải xuống, xảy ra lỗi mạng). Tín dụng: Dan Saffer.
Quy tắc
Điều gì sẽ xảy ra khi nó bắt đầu: trạng thái hợp lệ, các ràng buộc như ranh giới kéo hoặc giá trị tối thiểu và tối đa cũng như chuỗi sự kiện. Tín dụng: Dan Saffer.
Nhận xét
Cách sản phẩm cho người dùng biết điều gì đã xảy ra: lò xo lắng xuống, thay đổi màu sắc, hình thái biểu tượng, cập nhật văn bản. Đây là nơi hầu hết các thiết kế chuyển động tồn tại. Tín dụng: Dan Saffer.
Vòng lặp & Chế độ
Tương tác diễn ra như thế nào theo thời gian và các chế độ thay đổi nó như thế nào. Chuyển đổi tương tự có thể hoạt động khác nhau trong chế độ tối hoặc trong bố cục nhỏ gọn mà không thay đổi logic của nó. Tín dụng: Dan Saffer.
Tại sao tương tác vi mô lại quan trọng
Tương tác vi mô là cách giao diện trả lời người dùng mà không cần một đoạn văn bản. Nó xác nhận một hành động đã được nhận, cho thấy một cái gì đó vẫn đang hoạt động hoặc giải thích những gì vừa thay đổi. Khi thiếu chúng, cùng một sản phẩm sẽ có cảm giác nặng nề hơn: người dùng chạm hai lần vì không có gì cho họ biết lần chạm đầu tiên đã hạ cánh hoặc họ đợi trên một màn hình không có dấu hiệu tiến triển. Những điều tốt đẹp được cảm nhận nhiều hơn là được chú ý, đó chính là vấn đề.
15 ví dụ về tương tác vi mô
Chúng được nhóm theo những gì chúng giao tiếp. Trong trường hợp ExodeUI gửi một ví dụ phù hợp, tên sẽ được cung cấp để bạn có thể mở và chỉnh sửa nó.
Các nút và nút chuyển đổi (nhấn và trạng thái)
1. Nhấn nút: chia tỷ lệ thành khoảng 0,92 khi con trỏ xuống và bật trở lại khi nhả (ví dụ ExodeUI: Nút Jelly). 2. Công tắc chuyển đổi: dịch thuật dựa trên lò xo với sự thay đổi màu sắc trên cam kết (Gooey Toggle). 3. Công tắc chế độ: một điều khiển được phân đoạn trượt chỉ báo của nó và biến đổi nhãn hoạt động (Công tắc chuyển động).
Phản hồi về biểu mẫu (xác nhận và gửi)
4. Rung đầu vào không hợp lệ: một cú huých ngang ngắn có nội dung "kiểm tra trường này" mà không có hộp thoại (Nhập văn bản lắc lư). 5. Đang gửi: nút này trở thành chỉ báo tiến trình, do đó người dùng không bao giờ mất vị trí của mình (Nút Gửi Hoạt hình). 6. Xác nhận thành công: một màn ăn mừng nhỏ bùng nổ trên nút khi hành động hạ cánh (Nút phóng tên lửa).
Đang tải và tiến trình
7. Tiến độ tròn: một vòng lấp đầy giá trị thực và ổn định bằng lò xo (Máy đo hướng tâm). 8. Máy đo mức độ hoặc hoạt động: một thanh phản ứng trực tiếp với dữ liệu đến như mức âm thanh (Sóng âm thanh).
Điều hướng
9. Chuyển đổi menu: một biểu tượng biến đổi giữa hai trạng thái và hiển thị menu tại chỗ (Morph Nav). 10. Phóng to Dock: các mục gần con trỏ nâng lên và lớn lên, sau đó lắng xuống (Magnetic Dock). 11. Lựa chọn tab: chỉ báo trượt giữa các tab thay vì nhấp nháy (Liquid Tab Bar).
Trạng thái trống và thành công
12. Trạng thái trống: một hình minh họa nhỏ hoạt hình một lần để làm mềm màn hình trống. 13. Tiết lộ phần thưởng: một món quà hoặc huy hiệu mở ra với sự mong đợi khi đạt được một cột mốc (Hộp quà bất ngờ).
Kéo để làm mới
14. Kéo để làm mới: cuộn quá mức đàn hồi theo dõi quá trình kéo, sau đó bật trở lại và ổn định khi thả ra. Phản hồi là sự kéo dài, không phải là một vòng quay.
Phản hồi kiểu haptics
15. Xung xác nhận: thang đo ngắn và ánh sáng trên phần tử phản chiếu thao tác chạm xúc giác trên thiết bị di động, do đó, hành động tương tự sẽ có cảm giác giống nhau trên thiết bị không có động cơ rung.
Thiết kế các quy tắc giúp chúng hoạt động tốt
Một số quy tắc tách biệt tương tác vi mô giúp ích với tương tác gây khó chịu.
- Viết ngắn gọn: hoàn thiện nhất trong khoảng 200-400 mili giây; chuyển động dài hơn trên một phần tử nhỏ có cảm giác chậm
- Bắt đầu trong cùng khung với đầu vào; sự khởi đầu chậm trễ sẽ phá vỡ ý thức về nhân quả
- Giữ cho nó không bị gián đoạn: nếu người dùng đảo ngược hành động đang chuyển động, hãy chuyển hướng với vận tốc thay vì khởi động lại từ số 0
- Tôn trọng ưu tiên-giảm-chuyển động: cung cấp dự phòng tĩnh hoặc mờ dần mà vẫn truyền đạt sự thay đổi
- Giao cho nó một công việc: nếu sự tương tác cần nhiều hơn một quyết định thì đó là một luồng
Cách xây dựng các tương tác vi mô
Công cụ phù hợp phụ thuộc vào số lượng nền tảng mà cùng một hoạt động tương tác phải chạy trên đó.
chỉ CSS
Tốt cho các trường hợp đơn giản, khép kín: thang máy di chuột, vòng tiêu điểm và nút chuyển đổi được điều khiển bởi :checked hoặc thay đổi lớp. Chuyển tiếp và @keyframe là đủ và không có gì để gửi ngoài biểu định kiểu.
Framer Motion hoặc GSAP (web)
Tốt khi chuyển động cần lò xo, cử chỉ hoặc sự phối hợp và chỉ phải chạy trên web. Cả hai đều cung cấp cho bạn lò xo có thể gián đoạn và có thể được điều khiển bởi trạng thái React.
ExodeUI (web, iOS và Android từ một tệp)
Sử dụng tùy chọn này khi tương tác tương tự phải hoạt động giống hệt nhau trong ứng dụng React, ứng dụng SwiftUI và Flutter. Bạn tác giả nó một lần trong tệp .exode và thời gian chạy sẽ phát nó trên mỗi nền tảng, do đó không cần viết lại trên mỗi nền tảng.
Đoạn mã triển khai thực tế
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Nguyên tắc chính cần nhớ
- Tương tác vi mô là một nhiệm vụ nhỏ có yếu tố kích hoạt, quy tắc, phản hồi và các vòng lặp hoặc chế độ, bốn phần được đặt tên bởi Dan Saffer
- Hầu hết những cái tốt hoàn thành trong khoảng 200-400 mili giây, bắt đầu trong cùng khung với đầu vào và không bị gián đoạn
- Phản hồi là những gì thực hiện được: nó xác nhận hành động và giải thích những gì đã thay đổi, thường không có bất kỳ văn bản nào
- Luôn cung cấp dự phòng ưu tiên giảm chuyển động mang cùng thông tin mà không cần chuyển động