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

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 phát triển bằng cách giúp các nhà thiết kế và nhóm phát triển bảo trì quy trình làm việc. Gần đây đã có một số thay đổi lớn trong bối cảnh tạo mẫu: các nhà thiết kế tha hồ lựa chọn.

Cũng giống như nhiều ngành học 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 đòi hỏi một bộ công cụ độc đáo. Đã qua rồi cái thời các nhà thiết kế chỉ dựa vào Photoshop và Phác thảo. Mặc dù chúng là các công cụ thiết kế UI tuyệt vời, nhưng chúng không có khả năng tạo luồng người dùng và khung lưới nhanh chóng.

Bây giờ với số 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 động, cử chỉ và điều khiển 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 mà vẫn giữ mọi thứ đơn giản. Mã hóa là một cách để tạo ra các tương tác này nhưng nó tốn thời gian. May mắn thay, Adobe XD đã 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 là ‘ Auto Animate’. Đây là sự bổ sung lớn nhất cho bộ công cụ mạnh mẽ. 

Ý 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 đơn giản sao chép một bản vẽ nghệ thuật hoặc sửa đổi các thuộc tính của một đối tượng. Các thuộc tính 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 ra các hình ảnh động dựa trên chuyển động, điều này sẽ giúp người dùng tạo ra các mô hình lưu lượng thông tin tinh thần khi họ đ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 cấu trúc phân cấp trực quan, CTA hoặc tin nhắn mờ dần trong hoặc ngoài màn hình. 

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

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

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

Hãy bắt đầu bằng cách tạo 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ỳ chuyển đổi Tự động Animate, bạn cần nhiều hơn hai bản vẽ. 

Trên bản vẽ ban đầu, vẽ một hình – trong ví dụ của chúng tôi, đó là hình chữ nhật màu xanh lá cây 500px X 200px. Sao chép bản vẽ này và chọn hình chữ nhật trên bản vẽ 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 lên 500. Bạn cũng có thể thực hiện các sửa đổi khác như thay đổi độ mờ thành 50% hoặc làm cho màu hồng. 

Bây giờ bấm vào tab Prototype ở góc trên bên trái. Chọn bản vẽ đầu tiên và liên kết nó bằng cách sử dụng mũi tên đến bản vẽ 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 ứng dụng có thể được sử dụng để đặt các tham số như Kích hoạt, Hành động, Đích và Dễ dà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 Chạm, Kéo và Hẹn giờ – sẽ khởi tạo hoạt ảnh. 

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

Mở rộng thẻ

Bây giờ hãy tiến tới một ví dụ có nhiều tương tác hơn và một yếu tố bao gồm nhiều yếu tố. Hãy bắt đầu bằng cách tạo ra bản vẽ đầu tiên cho cái này, bao gồm một thẻ. Thẻ sẽ có các yếu tố như tiêu đề, mô tả và liên kết ở phía dưới đọc Lịch sử xem. 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ư một ngăn kéo để hiển thị các mục trước đó. Vì điều này xảy ra trên chức năng nhấp / nhấn, các mục trước đó không nên được tạo trong bản vẽ đầu tiên. 

Tiếp theo, chúng tôi nhân đôi bản vẽ 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 sẽ 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ó một tên mục nhập, ngày nhập cảnh và một nút như trong hình ảnh chính. Bạn có thể tạo một mục nhập và nhân đôi nó hai lần để tạo một nhóm các mục nhập. Sắp xếp chúng như hiển thị trong hình ảnh chính và đặt liên kết văn bản Xem Lịch sử bên dưới các mục này. Vì nó ở trạng thái mở rộng, hãy xoay biểu tượng mũi tên để nó hướng lên trên. Đó là nó. Bạn đã hoàn thành việc thiết lập các bản vẽ.

Để tạo hình động, đi đế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ờ, nhấp vào liên kết Xem Lịch sử trên bản vẽ đầu tiên và kéo liên kết nguyên mẫu đến bản vẽ thứ hai. Điều này làm cho liên kết Lịch sử xem 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 Kích hoạt thành Chạm và Hành động để Tự động tạo hiệu ứng. Kiểm tra nó để xem hoạt hình ngăn kéo trơn tru. Thay đổi tùy chọn Easing trong tab Tương tác nếu bạn thấy hoạt ảnh không đủ mượt.

Tạo hình động kéo

Kéo là một trong những hình ảnh động phổ biến nhất khi nói đến tương tác di động. Hãy thử một ví dụ đơn giản với hai bản vẽ. Đối với bản vẽ đầu tiên, hãy bắt đầu bằng cách tạo một vòng tròn với 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 có 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 cách 20px giữa mỗi lần trùng lặp, để nó tạo ra 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ản vẽ này.

Không còn nhiều gì để làm cho bản vẽ 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 để có cảm giác như nó được nén. Tương tự như bản vẽ đầ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 nguyên mẫu cho nó bằng cách nhấp vào tab Prototype từ góc trên bên trái. Bây giờ bấm vào vòng tròn từ artboard đầu tiên và làm cho nó 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 Trigger thành Tap và Action thành Auto Animate. Khi bạn nhấp vào nút phát để xem trước hình động, bạn sẽ có thể thấy một hành động mượt mà như thể khối đang được nén bởi hình cầu.

Tạo hình động tải vô hạn

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 bản vẽ. Để làm 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 tải trong đó pin được nạp đầy. Chìa khóa để có được sự hoàn hảo này là chế tạo bản vẽ đầu tiên đúng cách. Artboard đầu tiên có một giữ chỗ pin như trong hình. Nó có thể được tạo ra bằng cách sử dụng các hình dạng hình chữ nhật. Đối với pin thực tế bên trong trình giữ chỗ, bảng vẽ đầu tiên phải trống (chiếm 0%). Sao chép bản vẽ 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ản vẽ thứ ba được tăng thêm 50px và cứ thế. Tiếp tục cho đến khi bản vẽ hoàn chỉnh. 

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