Sử dụng Adobe XD để tạo tương tác vi mô

Sep 12, 2025

Cách

(Tín dụng hình ảnh: Adobe)

Adobe XD có thể giúp tạo mẫu - một trong những quy trình quan trọng nhất trong vòng đời thiết kế, đóng vai trò quan trọng trong việc phát triển bằng cách giúp các nhà thiết kế và đội ngũ bảo trì công việc. Đã có một số thay đổi lớn trong cảnh quan tạo mẫu gần đây: các nhà thiết kế bị hư hỏng cho sự lựa chọn.

Cũng giống như nhiều ngành khác, không có công cụ thiết kế và tạo mẫu duy nhất có thể đạt được mọi thứ. Các giai đoạn khác nhau yêu cầu một bộ công cụ duy nhất. Đã qua rồi cái thời mà các nhà thiết kế chỉ dựa vào Photoshop và Phác thảo. Mặc dù chúng là những công cụ thiết kế UI tuyệt vời, nhưng chúng không có khả năng cho các luồng người dùng nhanh và khung dây (xem đầu của chúng tôi Dụng cụ khung dây Để biết thêm tùy chọn Wireframing).

Bây giờ với lượng tương tác ngày càng tăng trong các thiết kế - chẳng hạn như hình ảnh động, cử chỉ và kiểm soát giọng nói - thật khó để tìm một công cụ có thể đạt được tất cả các khả năng tạo mẫu này và vẫn giữ mọi thứ đơn giản. Mã hóa là một cách để tạo các tương tác này nhưng nó tốn thời gian. May mắn thay, Adobe XD đã đến giải cứu bằng cách phát hành bản cập nhật cho công cụ tạo mẫu của nó bao gồm một tính năng tiện dụng có tên 'Auto Animate'. Đó là sự bổ sung lớn nhất cho bộ công cụ mạnh mẽ.

Nhận Adobe Creative Cloud

Ý tưởng ở đây rất đơn giản: Auto Animate cho phép các nhà thiết kế xây dựng các nguyên mẫu tương tác với hình ảnh động nhập vai bằng cách sao chép một bảng hiệu hoặc sửa đổi các thuộc tính của một đối tượng. Những tính chất này có thể là bất cứ thứ gì, chẳng hạn như kích thước, vị trí của X và Y, độ mờ, xoay. Adobe XD trước đây cung cấp các tương tác cơ bản như trượt, đẩy và hòa tan.

Với việc bổ sung các tính năng mới, các nhà thiết kế có thể dễ dàng tạo hoạt hình dựa trên chuyển động, từ đó sẽ giúp người dùng tạo các mô hình tinh thần về luồng thông tin khi chúng đang điều hướng giữa nhiều màn hình. Điều này cũng có thể được sử dụng để tạo phân cấp trực quan, CTA hoặc tin nhắn mờ dần trong hoặc ra khỏi màn hình tạm thời.

Trong bài viết này, tôi sẽ giải thích cách tạo hoạt hình vi đơn giản bằng tính năng Auto Animate mới này của Adobe XD. Trước khi chúng ta bắt đầu, có một vài điều cần xem xét về cách các đối tượng phải được xử lý để tự động hoạt hình:

Khi một đối tượng hoặc phần tử không nằm trên bảng hiệu đích, nó thường mờ dần khi được xem trước
Khi một yếu tố không có trong bảng hiệu ban đầu, nó có xu hướng phai mờ trong
Luôn luôn chuyển các tác phẩm nghệ thuật khi bạn ở chế độ nguyên mẫu, sẽ tạo các tương tác
Để tạo hình động, hãy luôn đảm bảo các đối tượng và các yếu tố có tên phù hợp trong các lớp và tên là tên của nhóm chúng có thể ở

Thực hiện thay đổi trạng thái bằng Auto Animate

Adobe XD tutorial — Nghe có vẻ đơn giản, nhưng bạn sẽ cần phải bắt đầu với hai hình dạng (Tín dụng hình ảnh: Vamsi Batchu)

Hãy bắt đầu bằng cách thực hiện một ví dụ đơn giản về thay đổi trạng thái bằng Auto Animate. Trong ví dụ này, các thuộc tính sẽ thay đổi là chiều rộng, chiều cao và màu sắc. Đối với bất kỳ sự chuyển đổi động vật tự động, bạn cần nhiều hơn hai bảng nghệ thuật.

Trên bảng vẽ ban đầu, vẽ một hình dạng - Trong ví dụ của chúng tôi, đó là một hình chữ nhật màu xanh lá cây x 500px x 200px. Sao chép nghệ thuật này và chọn hình chữ nhật trên bảng hiệu thứ hai. Chúng ta cần sửa đổi các thuộc tính của hình chữ nhật bằng cách tăng chiều rộng lên 1000 và chiều cao đến 500. Bạn cũng có thể thực hiện các sửa đổi thêm như thay đổi độ mờ thành 50% hoặc làm cho màu hồng.

Bây giờ bấm vào tab Nguyên mẫu ở góc trên bên trái. Chọn trang trí đầu tiên và liên kết nó bằng cách sử dụng mũi tên đến bảng nghệ thuật thứ hai. Khi bạn thực hiện việc này, có một tab tương tác ở bên phải của ứng dụng có thể được sử dụng để đặt các tham số như kích hoạt, hành động, đích đến và nới lỏng. Mỗi tham số có thể được tùy chỉnh theo nhu cầu của bạn. Có năm loại kích hoạt - bao gồm nhấn, kéo và hẹn giờ - điều đó sẽ bắt đầu hoạt hình.

Đặt tab Hành động Mặc định thành Tự động Animate và vì chỉ có hai trang trí trong ví dụ của chúng tôi, đặt tab đích đến Artboard 2. Ngoài ra còn có nhiều quá trình chuyển tiếp mượt mà có thể được chọn và theo thời gian. Nhấp vào biểu tượng Play ở trên cùng bên phải để xem Auto Animate làm phép thuật và hoạt hình hình chữ nhật. Khi có nhiều hơn hai phần tử cần thay đổi đồng thời, hãy đảm bảo tên của các phần tử này giống nhau trong cả hai bảng tính. Điều này sẽ thông báo cho ứng dụng mà hai yếu tố này cần phải hoạt hình.

Mở rộng thẻ

Bây giờ hãy tiến hành một ví dụ với tính tương tác nhiều hơn và một ví dụ bao gồm nhiều yếu tố. Hãy bắt đầu bằng cách tạo bản vẽ đầu tiên cho việc này, bao gồm một thẻ. Thẻ sẽ có các yếu tố như tiêu đề, mô tả và một liên kết ở lịch sử đọc dưới cùng. Bên cạnh liên kết, sẽ có một biểu tượng mũi tên hướng xuống dưới. Khi người dùng nhấp vào liên kết, thẻ sẽ mở ra như ngăn kéo để hiển thị các mục trước. Vì điều này xảy ra trên hàm nhấp / chạm, các mục trước sẽ không được tạo trong bảng hiệu đầu tiên.

Tiếp theo, chúng tôi nhân đôi nghệ thuật này và thay đổi một vài thuộc tính của thẻ. Điều đầu tiên cần làm là tăng chiều cao của thẻ hình chữ nhật để làm cho nó trông giống như một trạng thái mở rộng. Tiêu đề và mô tả dưới đây nên không thay đổi. Bây giờ là lúc để thêm những mục đó chúng tôi đã đề cập trước đó.

Hãy tưởng tượng có ba mục cho thẻ. Mỗi mục có tên nhập, ngày nhập và một nút như trong hình chính. Bạn có thể tạo một mục nhập và sao chép nó hai lần để tạo một nhóm các mục. Sắp xếp chúng như trong hình ảnh chính và đặt liên kết văn bản lịch sử xem bên dưới các mục này. Bởi vì nó nằm trong trạng thái mở rộng, xoay biểu tượng mũi tên để nó hướng lên trên. Đó là nó. Bạn đã hoàn thành thiết lập các bảng nghệ thuật.

Để tạo hình ảnh động, hãy chuyển đến bảng vẽ đầu tiên và nhấp vào tab Nguyên mẫu từ góc trên cùng bên trái. Bây giờ hãy nhấp vào liên kết Lịch sử Xem trên bảng vẽ đầu tiên và kéo liên kết nguyên mẫu vào bảng hiệu thứ hai. Điều này làm cho lịch sử xem liên kết kích hoạt. Thay đổi các thuộc tính trong tab Tương tác ở bên phải bằng cách đặt trình kích hoạt để nhấn và hành động để tự động hoạt hình. Kiểm tra nó để xem hoạt hình ngăn kéo trơn tru. Thay đổi tùy chọn nới lỏng trong tab Tương tác nếu bạn thấy hoạt hình không đủ mượt mà.

Làm cho hoạt hình kéo.

Kéo là một trong những hình ảnh động phổ biến nhất khi nói đến các tương tác di động. Hãy thử một ví dụ đơn giản với hai bảng nghệ thuật. Đối với bảng vẽ đầu tiên, bắt đầu bằng cách tạo một vòng tròn có bất kỳ màu sắc và kích thước nào. Bây giờ tạo một hình chữ nhật với chiều rộng 250px và chiều cao 25px. Sao chép hình chữ nhật này tám lần, duy trì khoảng trống 20px giữa mỗi bản sao, để nó tạo một ngăn xếp. Đặt vòng tròn lên trên hình chữ nhật đầu tiên trước khi sao chép bảng vẽ này.

Không còn nhiều thứ để làm cho nghệ thuật thứ hai. Đơn giản chỉ cần giảm khoảng cách giữa mỗi hình chữ nhật trùng lặp để nó cảm thấy như nó được nén. Tương tự như nghệ thuật đầu tiên, đặt vòng tròn lên trên hình chữ nhật đầu tiên. Bước cuối cùng là tạo ra nó bằng cách nhấp vào tab Nguyên mẫu từ góc trên cùng bên trái. Bây giờ bấm vào vòng tròn từ trang trí đầu tiên và biến nó thành một kích hoạt. Giống như các ví dụ trước, thay đổi các thuộc tính trong tab Tương tác ở bên phải bằng cách đặt trình kích hoạt để kéo và hành động để tự động hoạt hình. Khi bạn nhấp vào nút phát để xem trước hình ảnh động, bạn sẽ có thể thấy một hành động trơn tru như thể khối đang được nén bởi hình cầu.

Tạo hình ảnh động Infinite Loader

Một trong những tính năng tốt nhất của Adobe XD là Auto Animate có thể được áp dụng giữa nhiều loại hình ảnh. Để thực hiện một hình ảnh động như vậy, bạn chỉ cần thực hiện các thay đổi đơn giản cho một trong các thuộc tính.

Hãy tạo một hình ảnh động đang tải trong đó pin được lấp đầy. Chìa khóa để có được sự hoàn hảo này là tạo ra nghệ thuật đầu tiên đúng cách. Artboard đầu tiên có bộ giữ chỗ pin như trong hình. Nó có thể được tạo ra bằng hình chữ nhật. Đối với pin thực tế bên trong trình giữ chỗ, voong đầu tiên phải trống (đại diện cho 0%). Sao chép nghệ thuật này và tạo một hình chữ nhật màu xanh lá cây với chiều cao 50px phù hợp hoàn hảo bên trong trình giữ chỗ. Tạo các bản sao tương tự để chiều cao của pin trong bảng hiệu thứ ba được tăng thêm 50px, v.v. Tiếp tục cho đến khi Artboard được lấp đầy.

Bây giờ chúng ta phải tạo một vòng lặp vô hạn giữa các bảng tính này để nó tạo ra một hình ảnh động tải đồng bộ. Đối với điều này, hãy chuyển đến chế độ Nguyên mẫu, nhấp vào bảng vẽ đầu tiên và kéo mũi tên nguyên mẫu sang bảng nghệ thuật thứ hai. Thay đổi các thuộc tính trong bảng tương tác, bằng cách đặt trình kích hoạt theo thời gian và sau đó đặt độ trễ thành 0 giây, sẽ hoạt hình thành artbo thứ hai khi được xem trước. Thực hiện các thay đổi tương tự đối với tất cả các bảng nghệ thuật, bằng cách liên kết lần thứ hai với thứ ba và lâu hơn trước khi kết nối Artboard cuối cùng với cái đầu tiên. Chúng tôi đã liên kết thành công tất cả các bảng tính để tạo thành một vòng lặp vô hạn. Thay đổi cài đặt giảm bớt và thời lượng theo yêu cầu của bạn để thực hiện tải mượt mà hơn.

Mặc dù có rất nhiều biến thể có thể được thử sử dụng Adobe XD, các khả năng hiện tại của công cụ bị giới hạn và vẫn đang được nhóm phát triển cập nhật thường xuyên. Vì vậy, khi so sánh với các công cụ như nguyên tắc, bạn có thể cảm thấy như XD có một bộ công cụ bị hạn chế. Tuy nhiên, Adobe đã thực hiện một công việc tuyệt vời để làm cho công cụ đơn giản để tìm hiểu và sử dụng. Tạo các tương tác phức tạp có thể mất một chút thời gian và công sức nhưng chúng hoàn toàn có thể đạt được khi sử dụng tính năng Auto Animate của XD. Điều quan trọng là để hiểu những điều cơ bản của các đối tượng chuyển động, thay đổi kích thước chúng, thêm các lớp và sử dụng các kích hoạt.

Bài viết này ban đầu xuất hiện vấn đề 326 của mạng lưới , Tạp chí hàng đầu thế giới cho các nhà thiết kế và nhà phát triển web. Mua Vấn đề 326. hoặc là Đăng ký tại đây .

Đọc thêm:

40 hướng dẫn WordPress Brilliant
11 Khung JavaScript tuyệt vời
Có phải xu hướng nóng nhất của Neumoroph thực sự là 2020?

Sử dụng Adobe XD để tạo tương tác vi mô

Thực hiện thay đổi trạng thái bằng Auto Animate

Mở rộng thẻ

Làm cho hoạt hình kéo.

Tạo hình ảnh động Infinite Loader

Cách - Các bài báo phổ biến nhất

Cách tinh chỉnh danh mục đầu tư thiết kế của bạn

21 cách để tối ưu hóa CSS của bạn và tăng tốc trang web của bạn

Hướng dẫn về Công cụ web của Google

Ba bước để một bầu trời đêm lấp lánh trong màu nước

Giữ kiểm soát phiên bản hoàn hảo với Tóm tắt

Tuổi một bức ảnh trong Photoshop CC

Xây dựng trình phát nhạc đơn giản với React

Vẽ cảnh Epic New York

Thể loại