Hiểu các tương tác vi mô trong thiết kế ứng dụng di động

Tính khả dụng là một trong những thành phần chính của thiết kế giao diện người dùng di động. Khả năng sử dụng tuyệt vời thường liên quan đến tương tác vi mô đó là phản ứng và hành vi nhỏ từ một giao diện chỉ ra cách sử dụng UI. Các tương tác vi mô này xác định hành vi, khuyến khích sự tham gia và giúp người dùng hình dung cách giao diện hoạt động.

Giao diện kỹ thuật số là người trung gian giữa người dùng và mục tiêu mong muốn của họ. Nhà thiết kế giao diện tạo ra trải nghiệm giúp người dùng thực hiện một số nhiệm vụ. Ví dụ: ứng dụng danh sách việc cần làm có giao diện giúp người dùng sắp xếp các tác vụ của họ. Giống như ứng dụng Facebook cung cấp cho người dùng giao diện để tương tác với tài khoản Facebook của họ.

Trong hướng dẫn này, tôi sẽ đi sâu vào tương tác vi mô cho ứng dụng di động. Các tương tác nhỏ có vẻ tầm thường nhưng chúng có thể có một tác động to lớn về chất lượng trải nghiệm của người dùng. Khi được thực hiện đúng cách, các tương tác vi mô cảm thấy như một phần chính xác của trải nghiệm người dùng di động bao trùm.

Sức mạnh của các tương tác vi mô

Trong hầu hết các trường hợp, mục tiêu của một tương tác vi mô là cung cấp phản hồi dựa trên hành động của người dùng. Điều này có thể giúp người dùng hình dung cách giao diện di chuyển hoặc hành xử, mặc dù nó hoàn toàn là kỹ thuật số trên màn hình phẳng.

Vi tương tác có sức mạnh bởi vì chúng tạo ra một trải nghiệm huyễn hoặc. Các thanh trượt bật / tắt không thực sự di chuyển như các công tắc vật lý, nhưng chúng có thể di chuyển theo cách này thông qua hình ảnh động.

Tôi đã tìm thấy một trích dẫn đáng kinh ngạc trong bài viết này thảo luận về giá trị to lớn của các tương tác vi mô cho các ứng dụng di động:

“Các sản phẩm tốt nhất làm tốt hai điều: tính năng và chi tiết. Các tính năng là những gì thu hút mọi người đến sản phẩm của bạn. Chi tiết là những gì giữ chúng ở đó. Và chi tiết là những gì thực sự làm cho ứng dụng của chúng tôi nổi bật so với đối thủ cạnh tranh của chúng tôi.”

Các chi tiết nhỏ có thể có vẻ không đáng kể từ quan điểm phát triển, nhưng từ quan điểm trải nghiệm người dùng, họ thực sự tạo sự khác biệt giữa giao diện người dùng ứng dụng OK và giao diện người dùng ứng dụng đặc biệt.

Các tương tác vi mô lớn làm cho người dùng cảm thấy được khen thưởng cho một hành động. Những hành động này có thể là lặp đi lặp lại và ăn sâu vào hành vi của người dùng. Họ có thể học cách sử dụng một ứng dụng dựa trên những tương tác nhỏ hơn này. Khi người dùng thực hiện một hành vi, những tương tác nhỏ này báo hiệu "có, bạn có thể tương tác với tôi!"

Hãy xem các ví dụ được tìm thấy trong thông số thiết kế vật liệu của Google. Các tài liệu thực sự có toàn bộ phần dành riêng cho chuyển động vật chất. Các mối quan hệ không gian là một phần quan trọng của phương trình này, nhưng chuyển động có thể ra lệnh không chỉ là mối quan hệ không gian.

Đây là sử dụng phổ biến nhất của hoạt hình và chuyển động trong thiết kế UI / UX di động:

• Hướng dẫn người dùng giữa các trang khác nhau
• Hướng dẫn người dùng thông qua giao diện để dạy một số hành vi nhất định
• Đề xuất hành động / hành vi có thể được thực hiện trên bất kỳ trang nào

Ứng dụng di động có không gian màn hình ít hơn nhiều hơn các trang web. Điều này có thể dẫn đến một số khó khăn khi dạy người dùng cách sử dụng một ứng dụng. Nhưng nó có thể đơn giản đáng ngạc nhiên nếu bạn biết cách thực hiện các tương tác vi mô đúng cách.

Làm thế nào vi tương tác làm việc

Một vi tương tác duy nhất kích hoạt bất cứ khi nào người dùng tham gia với một phần của giao diện. Hầu hết các tương tác là phản ứng hoạt hình cho cử chỉ của người dùng. Vì vậy, một chuyển động vuốt sẽ phản ứng khác với một cú chạm hoặc một cái búng tay.

Blink UX đã làm một bài viết tuyệt vời thảo luận về các chi tiết nhỏ của các tương tác vi mô. Những hình ảnh động nhỏ nên theo quá trình dự đoán người dùng có thể học cho mọi tương tác trong ứng dụng.

Vi tương tác hướng dẫn người dùng thông qua giao diện đưa ra phản ứng với các hành vi. Khi người dùng biết rằng thanh trượt bật / tắt có thể di chuyển, họ sẽ biết nó tương tác. Dựa trên phản hồi, họ cũng sẽ biết nếu cài đặt được bật hay tắt. Khi một nút trông giống như nó có thể được bấm vào người dùng biết theo bản năng họ có thể tương tác với nó.

Theo UXPin, mọi vi tương tác cơ bản có thể chia thành bốn bước, nhưng tôi đã tóm tắt quá trình thành ba bước.

1. Hoạt động - các người dùng làm gì đó như flick, vuốt, chạm và giữ hoặc một số tương tác khác.
2. Phản ứng - các giao diện đáp ứng dựa trên những gì cần phải xảy ra Vuốt màn hình có thể di chuyển trở lại trong lịch sử trình duyệt hoặc nhấn vào thanh trượt BẬT / TẮT có thể tắt cài đặt.
3. Phản hồi - đây là những gì người dùng thực sự nhìn thấy là kết quả của sự tương tác. Khi người dùng vuốt trở lại trong trình duyệt di động, nó có thể nổi trang trước đó để xuất hiện "trên cùng" của màn hình. Thanh trượt bật / tắt có thể lướt nhẹ hoặc lớn hơn khi áp suất lên màn hình.

Những hành động rất nhỏ này có thể được thực hiện mà không cần hoạt hình, nhưng các tương tác vi mô lớn cung cấp một cảm giác thực tế đến giao diện kỹ thuật số phẳng, phần lớn xuất hiện dưới dạng hiệu ứng hoạt hình thực tế. Chúng thổi hồn vào giao diện và khuyến khích nhiều người dùng tương tác hơn.

Tìm kiếm chi tiết

Bằng cách nhìn vào các phần nhỏ hơn của thiết kế, bạn sẽ hiểu ứng dụng sẽ phản ứng thế nào với một hành vi cụ thể.

Kéo để làm mới là một ví dụ điển hình của một vi tương tác phổ biến hiện nay. Nó không phải là một phần không thể thiếu của iOS khi nó ra mắt lần đầu tiên, nhưng nhiều ứng dụng đã lấy ý tưởng này và bắt đầu di chuyển với nó. Bây giờ kéo để làm mới là một hành vi nổi tiếng mà hầu hết người dùng chỉ biết sử dụng khi duyệt giao diện người dùng nguồn cấp dữ liệu. Điều tương tự cũng có thể nói về các menu hamburger di động đã trở nên phổ biến.

Thực hiện mọi tương tác thực tế và đơn giản. Đừng lạm dụng hoạt hình vì chúng có thể trở nên tẻ nhạt nếu chúng quá chi tiết và được sử dụng thường xuyên. Người dùng không muốn lấp lánh xuất hiện mỗi khi họ nhấn vào biểu tượng menu. Cân bằng với giá trị đích thực truyền đạt giao diện nên hoạt động như thế nào không quá nhiệt tình.

Nhìn vào một số ví dụ

Tôi nghĩ cách tốt nhất để học một cái gì đó là làm nó, và cách tốt thứ hai là nghiên cứu công việc của người khác. Tôi đã thu thập được một số ít Hình ảnh động tương tác UI / UX từ những người dùng Dribbble tài năng để cho bạn thấy những cái này trông như thế nào trong một mockup thực sự.

Mỗi ứng dụng sẽ khác nhau và có những nhu cầu khác nhau dựa trên những gì ứng dụng làm. Cuối cùng, hầu hết người dùng đều muốn điều tương tự: một ứng dụng đó trực quan và mang lại trải nghiệm người dùng chất lượng với các tương tác vi mô liên quan đến hành vi của người dùng.

1. UI ứng dụng sự kiện hoạt hình

Ví dụ đầu tiên là một tính năng hoạt hình thẻ tiện lợi được tạo bởi Ivan Martynenko. Bạn sẽ nhận thấy một số ít các tương tác trong thiết kế này, đáng chú ý là quẹt thẻ và di chuyển qua các chi tiết.

Khi gõ vào thẻ, nó phát triển kích thước. Và khi nhấn vào nút Đăng ký, ảnh hồ sơ của người dùng sẽ trượt vào danh sách những người đăng ký. Mọi thứ đều cảm thấy rất trực quan và khá tự nhiên với giao diện.

2. Màn hình tập thể dục tương tác

Hoạt hình tập thể dục di động sáng tạo này đến từ nhà thiết kế Vitaly Rubtsov. Nó trình diễn một người dùng tiết kiệm tập luyện của họ cho một tập squats.

Lưu ý mỗi hình ảnh động có cùng hiệu ứng nảy đàn hồi khi các menu mở và snap đóng. Điều này cũng đúng khi hoạt động được kiểm tra là "Xong". Tính nhất quán là chìa khóa với các tương tác vi mô bởi vì tất cả họ nên cảm thấy kết nối với cùng một giao diện.

3. Tìm kiếm ứng dụng vi mô

Ngắn, ngọt ngào, và cho điểm. Tôi nghĩ điều này mô tả tốt nhất những tương tác ứng dụng tìm kiếm này được thiết kế bởi Lukas Horak. Mỗi hình ảnh động là nhanh chóng nhưng vẫn đáng chú ý.

Đây là cách bạn nên thiết kế các tương tác vi mô để tránh quá phức tạp. Nếu giao diện sẽ tải nhanh hơn mà không có hình ảnh động thì tại sao phải thêm nó vào? Ảnh động nhanh giữ cho người dùng di chuyển qua mà không làm giảm trải nghiệm.

4. Mục tiêu tập thể dục

Tôi nghĩ Jakub Antalà ??  ?? Ã'Â-k thực sự đánh cái này ra khỏi công viên với mục tiêu tập thể dục siêu nhỏ. Tất cả các màn hình đều có cảm giác như bị đùa giỡn vì hình dạng di chuyển rất trôi chảy.

Tuy nhiên, giao diện cũng cảm thấy vững chắc và có thể sử dụng. Nó cho thấy rằng các tương tác vi mô được tạo ra với mục đích vẫn có thể vui vẻ và giải trí nhưng cũng có chức năng và thực dụng.

5. Kéo để làm mới hình ảnh động

Đây là một trong những hoạt hình kéo để làm mới yêu thích tuyệt đối của tôi được tạo bởi nhóm tại Ramotion. Điều này không chỉ bắt chước một chất lỏng với hành động kéo, nhưng hình ảnh động phản hồi kết nối suôn sẻ từ một giọt chất lỏng vào một vòng tròn tải.

Điều này chú ý nhiều đến chi tiết là những gì mang lại vẻ đẹp thực sự trong các tương tác ứng dụng di động.

6. Tab vi tương tác

Vật dụng theo thẻ khá phổ biến cho các ứng dụng di động vì màn hình nhỏ hơn. Tôi thực sự thích sự tương tác vi mô này được tạo bởi John Noussis, mặc dù tôi nghĩ rằng nó sẽ hiệu quả hơn với tốc độ nhanh hơn, nhưng bản thân hoạt hình rất tuyệt vời và được suy nghĩ kỹ.

Mũi tên neo tab lướt qua bên phải giống như nội dung mới nảy từ bên phải. Nó cho ảo tưởng về toàn bộ màn hình chuyển động rẽ phải. Hoạt hình rất tuyệt, nhưng vì nó quá chậm nên tôi nghĩ hầu hết người dùng sẽ thấy khó chịu sau vài ngày.

7. Tải trước hoạt hình

Tôi chưa nói nhiều về thanh tải trong bài đăng này, nhưng chúng chỉ có giá trị đối với trải nghiệm tổng thể. Hầu hết người dùng không muốn đợi dữ liệu tải, nhưng họ chắc chắn không muốn nhìn chằm chằm vào màn hình trống trong khi tải.

Bret Kurtz đã làm màn hình tải trước tuyệt vời này vừa vui vừa bổ ích. Người dùng thực sự có thể giải trí xem hoạt hình nhỏ này lặp lại. Họ cũng có thể yên tâm ứng dụng đó là vẫn đang tải dữ liệu của họ và đã không bị rơi.

Kết thúc

Tất cả những ví dụ này thể hiện một cách xuất sắc giá trị của các tương tác vi mô. Các ứng dụng di động nhận được nhiều giá trị hơn từ các tương tác vi mô vì người dùng vật lý chạm vào màn hình với ngón tay của họ. Người dùng không chạm vào màn hình máy tính để bàn hoặc màn hình máy tính xách tay của họ, nhưng mọi người đều chạm vào điện thoại thông minh của họ vì đó là trạng thái tương tác mặc định.

nó là một nhiều kinh nghiệm cá nhân, đó là lý do tại sao thiết kế ứng dụng di động có thể là một quá trình sắc thái. Khi được thực hiện đúng cách, việc bổ sung các tương tác di động tuyệt vời có thể tạo ra một trải nghiệm người dùng ảo tưởng mạnh mẽ không có gì ngoài pixel và chuyển động.