Adobe XD: Cách sử dụng tính năng Auto-Animate

Oct 1, 2023

Cách

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

Mặc dù đã nhập muộn vào trò chơi nguyên mẫu, Adobe XD là một trong những công cụ tạo dây và tạo dạng dây tốt nhất và nhanh nhất. Tạo mẫu là một quá trình chính trong vòng đời thiết kế nhưng cũng đóng một 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à các đội phát triển với bảo trì quy trình làm việc.

Là nhà thiết kế, chúng tôi thường cần rất nhiều công cụ để thiết kế các giai đoạn khác nhau của quy trình làm việc trải nghiệm người dùng. Adobe đang tích cực đổi mới một công cụ đa nền tảng có thể được sử dụng để thử nghiệm các thiết kế, tạo khung dây, bàn giao thông số kỹ thuật cho đội ngũ Dev và cũng là thiết kế hợp tác (xem danh sách của chúng tôi về Dụng cụ khung dây để có nhiều lựa chọn hơn).

Tính năng Tự động hoạt hình có nghĩa là Adobe XD cũng có thể được sử dụng để tạo các tương tác siêu nhỏ và hình ảnh động như các công cụ như nguyên tắc. Điều này giúp các nhà thiết kế tạo ra những trải nghiệm nguyên mẫu phong phú, từ dòng chảy trên tàu, hình ảnh động cho băng chuyền di động, các chỉ số tiến độ và nhiều hơn nữa. Phần tốt nhất về tính năng này là dễ học và thực thi.

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 Tự động hoạt hình. Chúng tôi sẽ xem xét cả các tương tác dựa trên cử chỉ và dựa trên cử chỉ.

Nếu bạn chưa có Adobe XD, hãy xem cách Tải xuống Adobe XD. đăng, và sau đó kiểm tra yêu thích của chúng tôi Plugin Adobe XD. .

01. Cử chỉ vuốt để thêm vào FAV hoặc xóa

Tương tác Swipe là một trong những tương tác vi mô được sử dụng phổ biến nhất trên ứng dụng di động. Đối với ví dụ này, hãy xem danh sách nhạc. Đối với Artboard đầu tiên, chúng ta sẽ tạo một màn hình danh sách phát với năm bài hát trong đó. Mỗi bài hát là một thẻ cá nhân và về cơ bản khi mỗi thẻ được vuốt sang trái, nó sẽ xóa bài hát khỏi danh sách phát. Khi một thẻ được quét ngay, nó sẽ thêm bài hát vào hàng đợi.

Hãy bắt đầu và tạo thẻ đầu tiên. Bạn có thể thêm các chi tiết cơ bản như tên của bài hát, tên của nghệ sĩ, độ dài của bài hát và xếp hạng. Bây giờ nhóm tất cả các yếu tố này thành một lớp duy nhất. Nhân đôi nó cho đến khi năm trong số các thẻ tương tự được thực hiện. Bạn có thể chỉnh sửa chúng dựa trên sở thích của bạn.

Đối với thẻ đầu tiên - C1 - chúng ta sẽ thêm một cú vuốt trái để xóa hành động. Vì vậy, hãy tạo một hình vuông nhỏ với nền đỏ, thêm một số văn bản Xóa và biểu tượng như trong ảnh chụp màn hình bên dưới. Nhóm tất cả các mục này vào một lớp gọi là A1. Bây giờ kết hợp C1 và A1 vào một lớp L - để A1 nằm ở phía bên phải của C1.

02. Tạo thẻ thứ hai

Đối với thẻ thứ hai - C2 - chúng tôi sẽ thêm một Thêm vào hành động vuốt phải xếp hàng theo cách tương tự. Tạo một nhóm A2 với biểu tượng, văn bản và nền màu xanh lá cây. Thêm nó vào bên trái của nhóm C2 và tạo một lớp kết hợp có tên L2. Bây giờ, Artboard đầu tiên (S1) đã hoàn tất. Hãy nhân đôi toàn bộ Artboard hai lần, thành hai trạng thái - S2 và S3. Chúng tôi sẽ sử dụng S2 để xóa Swipe và S3 để thêm vào xếp hàng Vuốt. Để làm điều đó, chúng ta cần thực hiện một số thay đổi cho từng bảng nghệ thuật này. Dưới đây là các cài đặt cho cả hai Swipes:

● S1 - Thay đổi độ mờ của A1 và A2 thành 0% và sắp xếp L1, L2 để chúng được căn giữa.

● S2 - Sắp xếp thẻ L1 để cạnh phải của L1 được liên kết với các thẻ khác. Thay đổi độ mờ của A2 đến 0%.

● S3 - Sắp xếp thẻ L2 để cạnh trái của L2 được căn chỉnh với các thẻ khác. Thay đổi độ mờ của A1 đến 0%.

03. Hoạt hình các vo mạch

Bây giờ rằng các bảng nghệ thuật được thiết lập hoàn toàn, bước tiếp theo là làm động chúng. Bạn có thể làm điều này bằng cách đi vào chế độ nguyên mẫu ở phía trên bên trái của công cụ. Bây giờ trên bảng nghệ thuật S1, nhấp vào lớp L1 và thêm một tương tác ở bên phải của công cụ bằng cách cài đặt trình kích hoạt để kéo, hành động để tự động hoạt hình và đích đến artboard s2. Bạn cũng có thể thêm nới lỏng dựa trên sở thích của bạn. Kiểm tra sự tương tác này bằng cách nhấp vào nút phát ở phía trên bên phải của công cụ. Trên bảng in S1, nhấp vào lớp L2 và thêm một tương tác tương tự bằng cách sử dụng các cài đặt tương tự nhưng trong trường hợp này, hãy đặt đích đến S3. Tương tác này sẽ tạo ra vuốt trái.

04. Mở rộng thẻ của bạn

Sự tương tác thứ hai chúng ta sẽ xem xét thường thấy trên hầu hết các ứng dụng và trang web mà bạn đang trải qua danh sách hoặc danh mục các sản phẩm và khi bạn nhấp vào một trong số đó, bạn sẽ được đưa vào một trang mới với nhiều chi tiết hơn về sản phẩm . Tự động hoạt hình làm cho nó siêu đơn giản để làm động loại tương tác này. Trong ví dụ này, chúng ta hãy bắt đầu bằng cách tạo một trang danh mục sản phẩm. Bạn có thể chọn bất kỳ sản phẩm nào như, ví dụ như điện thoại di động (sẽ là ví dụ của chúng tôi), trang phục, v.v. Đối với Artboard (S1) đầu tiên, hãy tạo một thanh tiêu đề với menu Hamburger và biểu tượng hồ sơ.

05. Làm việc trên hình ảnh và chi tiết

Bây giờ, tạo một phần tử văn bản tiêu đề với số lượng mục danh mục. Đối với mỗi thẻ sản phẩm, chúng ta sẽ có một hình ảnh, tên của điện thoại, giá cả và xếp hạng. Chúng ta có thể gọi những thẻ này C1 đến C6. Cách tốt nhất để thực hiện việc này là tạo thẻ đầu tiên (C1) và sau đó sử dụng một tính năng tuyệt vời của XD được gọi là Lưới lặp lại, được tìm thấy ở góc trên bên phải của bảng công cụ. Điều này cho phép bạn nhân đôi các mục dễ dàng, giữ nguyên tắc và khoảng cách nguyên vẹn. Việc thiết lập của bảng vẽ này đã hoàn tất. Chúng tôi sẽ làm động thẻ thứ hai, vì vậy điều quan trọng là phải hủy nhóm các yếu tố của thẻ đó để XD có thể thực hiện Auto-Animate.

06. Thiết kế nghệ thuật thứ hai

Bây giờ để có được để làm việc trên bảng nghệ thuật thứ hai. Sao chép các thẻ hình đầu tiên và xóa thẻ C1, C3-C6. Chúng tôi sẽ sử dụng thẻ C2 hiện có để xây dựng trang này, để tên của các lớp giống nhau. Đầu tiên, mở rộng nền của thẻ để nó bao gồm toàn bộ trang bên dưới thanh tiêu đề. Bây giờ chúng ta có thể sắp xếp các mục khác theo bất kỳ cách nào chúng ta muốn - ý tưởng cơ bản là nó sẽ khác với cách thẻ trong bảng hiệu S1, bởi vì đó là khi bạn có thể thấy quá trình chuyển đổi. Vì lý do đó, hãy giơ tên của điện thoại di động đến 25px và biến nó thành đậm. Tương tự, tăng kích thước của giá cả và đặt nó dưới tên di động. Tiếp theo là phần quan trọng - hình ảnh của điện thoại di động. Bạn phải tăng kích thước của nó đáng kể và cũng căn chỉnh nó ở trung tâm.

07. Áp dụng các điểm hoàn thiện

Để gọn gàng mọi thứ lên và hoàn thiện thiết kế, sắp xếp xếp hạng và các ngôi sao bên dưới mọi thứ và bên trái. Vì bảng vẽ này đại diện cho phiên bản chi tiết của sản phẩm, giờ đây bạn có thể bao gồm thông tin bổ sung về điện thoại như bộ nhớ, màu có sẵn của điện thoại, các phụ kiện được cung cấp với điện thoại, v.v., dựa trên sở thích của bạn. Mọi thứ khác sẽ theo sau khi bạn cuộn Artboard. Bạn cũng có thể thay đổi biểu tượng tiêu đề của bánh hamburger, để cho phép người dùng quay lại với artboard S1 trước đó. Hãy nhớ thay đổi tên của biểu tượng để khớp với tên biểu tượng trong bảng vẽ đầu tiên.

08. Tạo tương tác vi mô

Bây giờ hãy chuyển đến chế độ nguyên mẫu để tạo tương tác vi mô. Để thực hiện việc này, hãy chọn thẻ C2 trong Artboard S1 và kéo mũi tên màu xanh sang ArtBoard S2. Trong bảng tương tác ở phía bên phải, hãy đặt trình kích hoạt dưới dạng Tap, Action dưới dạng Tự động hoạt hình và Đích dưới dạng S2. Đối với các tương tác mượt mà hơn, thật tốt khi đi dễ dàng để nới lỏng và thời gian 0,4 hoặc 0,6 giây. Nhấp vào biểu tượng mũi tên phía sau trên Artboard S2 và kéo mũi tên thành S1. Bạn có thể sử dụng các cài đặt tương tự cho việc này để làm cho nó nhất quán. Bây giờ bấm vào S1 và phát nguyên mẫu để xem ma thuật. Bạn sẽ quan sát một hình ảnh động mượt mà khi thẻ C2 được gõ. Điều chỉnh các cài đặt nới lỏng để làm cho hoạt hình mượt mà hơn.

09. Đi xa hơn những điều cơ bản

Bây giờ bạn có một ý tưởng cơ bản về cách tạo các tương tác đơn giản. Bạn cũng có thể thử tự động hoạt hình bằng cách thay đổi màu sắc của các yếu tố, kích thước và hình dạng để xem các chuyển tiếp mượt mà giữa nhiều trang trí. Ngoài việc nhấn và kéo các kích hoạt, có các kích hoạt khác mà các nhà thiết kế có thể thử nghiệm, chẳng hạn như sử dụng các phím bàn phím và phím gamepad để kích hoạt các nguyên mẫu trên một khóa phím cụ thể. Ngoài ra còn có một chế độ mà bạn có thể tạo và thiết kế các nguyên mẫu giọng nói cho Alexa, Siri, v.v., nơi bạn có thể gán câu và nói chúng để có được phản hồi cụ thể.

Đọc thêm:

Các Nhà xây dựng trang web tốt nhất
Các phím tắt Adobe XD bạn nên biết (nhưng có lẽ không)
Xây dựng các nguyên mẫu với Adobe XD

Adobe XD: Cách sử dụng tính năng Auto-Animate

01. Cử chỉ vuốt để thêm vào FAV hoặc xóa

02. Tạo thẻ thứ hai

03. Hoạt hình các vo mạch

04. Mở rộng thẻ của bạn

05. Làm việc trên hình ảnh và chi tiết

06. Thiết kế nghệ thuật thứ hai

07. Áp dụng các điểm hoàn thiện

08. Tạo tương tác vi mô

09. Đi xa hơn những điều cơ bản

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

Cách phân tầng trong Photoshop

Làm thế nào để vẽ một con ngựa

4 bước để sử dụng phông chữ biến

Thay đổi màu Photoshop: 2 công cụ bạn cần biết

Bắt đầu với Monotype In

Làm thế nào để tạo Kinh thánh nhân vật của riêng bạn

Cách vẽ thu nhỏ thú vị

Cách tạo môi trường mùa đông

Thể loại