Xây dựng các nguyên mẫu với Adobe XD

Trong thiết kế web và ứng dụng hiện đại, thường có những lúc tương tác không mở một trang hoặc màn hình hoàn toàn mới. Cách tiếp cận hiện đại để tạo nội dung tương tác đòi hỏi sự chuyển đổi giữa các yếu tố giao diện thiết kế để người dùng ngạc nhiên và bị bỏ qua bởi trải nghiệm thay đổi nội dung. Tất cả điều này xảy ra trên cùng một màn hình hoặc trang, không cần làm mới. Thiết kế các loại tương tác này và tinh chỉnh chúng hoạt động đúng cách có thể mất thời gian, nhưng nó đáng để làm trước khi viết mã của bạn.

Đây là những gì Adobe XD đã dành vài tháng cuối cùng của sự phát triển trở nên đúng đắn. Tạo nội dung trong một trạng thái trên một màn hình, di chuyển nội dung đó sang trạng thái mới trên màn hình mới và chỉ cần chọn tùy chọn 'Tự động hoạt hình' để chuyển đổi. Tất cả các nội dung giống nhau trên cả hai màn hình tự động hoạt hình từ vị trí này sang vị trí khác. Nếu bạn không muốn tất cả nội dung hiển thị trên cả hai màn hình, hãy tạo nội dung vô hình trước tiên và nó sẽ chuyển sang vị trí.

Tìm hiểu về các phần mềm Adobe khác như Adobe kích thước. .

• 8 công cụ tạo mẫu thiết yếu và xây dựng

Ở đây chúng tôi sẽ chỉ cho bạn cách tạo một nguyên mẫu ứng dụng mà chỉ điều này (để biết thêm Cách tạo một ứng dụng Hướng dẫn, kiểm tra bản tóm tắt của chúng tôi về những người giỏi nhất). Và vượt ra ngoài điều đó, một tính năng mới của XD cho phép người dùng kiểm soát các tương tác bằng giọng nói của họ. Chúng tôi sẽ khám phá đây là tính năng thiết kế và cách ứng dụng cũng có thể nói lại với người dùng, có thể cung cấp một số cơ hội thiết kế thú vị.

Tải xuống các tệp dự án cho hướng dẫn này.

01. Bắt đầu dự án

Nếu bạn không có Adobe XD, bạn có thể tải xuống và cài đặt nó đây . Khi cài đặt đã hoàn tất, hãy mở phần mềm và màn hình Chào mừng sẽ cho phép bạn chọn kích thước màn hình để tải xuống. Trong trường hợp này, hãy chọn iPhone 6/7/8, vì đó là kích thước phù hợp cho dự án này, nhưng bạn sẽ thấy có nhiều kích cỡ có sẵn.

02. Nhập hình ảnh đầu tiên

Có nhiều cách khác nhau để nhập hình ảnh, nhưng trong trường hợp đầu tiên này, hãy chuyển đến Tệp & GT; Nhập khẩu. Chọn thư mục 'Tài sản' từ các tệp dự án và hình ảnh đầu tiên để nhập sẽ là 'sky.png'. Đặt nó trên đỉnh của màn hình và di chuyển nó một vài pixel xuống.

03. Đặt cabin

Hình ảnh tiếp theo cho thiết kế sẽ là 'cabin.png'. Chỉ cần nhập cái này giống như cách bạn đã làm ở bước trước và sau đó đặt nó để điền vào màn hình. Cuối cùng, nhập hình ảnh 'cây.png' và đặt nó ở dưới cùng của màn hình với cây trên hồ.

04. Mang theo logo

Lý do những hình ảnh đó là các lớp riêng biệt là khi quá trình chuyển đổi được tạo giữa các màn hình chúng có thể di chuyển riêng. Chuyển đến menu Tệp và chọn Nhập. Lần này chọn 'Logo.ai', đó là một hình ảnh vector. Đặt hình ảnh này ở trung tâm trên cùng của màn hình.

05. Thêm một vòng tròn

Chọn công cụ vòng tròn và vẽ một vòng tròn chỉ lớn hơn một chút so với logo. Trong bảng Thuộc tính ở bên phải, loại bỏ nét và tạo nền đen. Chọn Blur nền và giảm độ sáng lên -30 để vòng tròn vẫn còn màu đen.

06. Sắp xếp lại đồ họa

Bây giờ vòng tròn cần di chuyển phía sau logo. Chọn Object & GT; Sắp xếp và gửi về phía sau. Giống như trong các sản phẩm Adobe khác, nó cũng là Cmd / ctrl + [ để di chuyển bất kỳ đồ họa ngược trong thứ tự lớp. Sử dụng khung vuông bên phải, trong khi đó, sẽ mang lại một đối tượng về phía trước theo thứ tự.

07. Thả mic

Bây giờ nhập hình ảnh 'mic.ai' và thay đổi kích thước hình ảnh tương đối nhỏ. Đặt cái này ở dưới cùng của màn hình. Vẽ một vòng tròn xung quanh cái này và bỏ chọn điền để nó bị xóa. Sau đó làm cho đột quỵ trắng và rộng hai pixel. Vị trí xung quanh hình ảnh 'mic'.

08. Tin nhắn văn bản.

Sử dụng công cụ văn bản để thêm các từ 'Nói để tìm kiếm' bên dưới micrô. Làm cho văn bản màu trắng và thay đổi nó thành helvetica neue cô đặc màu đen. Ở phía dưới bên trái màn hình, nhấp vào biểu tượng Bảng điều khiển tài sản để mở nó. Với văn bản được chọn trên màn hình, nhấp vào biểu tượng '+' bên cạnh 'Kiểu ký tự' để lưu định dạng này cho văn bản.

09. Tham gia một nhóm

Chọn biểu tượng bảng lớp ở phía dưới bên trái màn hình. Trên màn hình, chọn văn bản 'Tìm kiếm' và Shift-Click. Để thêm hình tròn và biểu tượng MIC. Đi đến đối tượng và chọn nhóm. Trong bảng điều khiển lớp đổi tên nhóm tìm kiếm 'này. Nó hữu ích để đặt tên nhóm, đặc biệt là khi hoạt hình những thứ này.

10. Nhóm logo

Cũng giống như trong bước cuối cùng, chọn logo và vòng tròn mờ xung quanh nó, sau đó nhóm chúng lại với nhau. Trong bảng lớp, đổi tên toàn bộ logo của nhóm 'để nó dễ nhận biết nếu bạn cần chỉnh sửa lại sau này. Trong thời điểm thiết kế cho màn hình đầu tiên hoàn tất.

11. Các yếu tố bổ sung

Mặc dù màn hình đầu tiên hoàn tất, vẫn còn nhiều yếu tố thiết kế cần thêm. Đây là cách hoạt hình được tạo ra bằng cách thay đổi định vị của các yếu tố giữa các màn hình. Đi đến công cụ hình chữ nhật và giữ Thay đổi. Để thêm một hình vuông trên màn hình, làm cho màu trắng biên giới.

12. Nhập khẩu khác nhau

Bây giờ hãy mở thư mục cho tài sản thông qua hệ điều hành của bạn. Chọn hình ảnh 'cabin1.png' và kéo trực tiếp vào hình vuông mà bạn đã tạo ở bước trước. Nó sẽ tự động được che dấu bên trong cái này. Nhấp đúp để chỉnh sửa vị trí của hình ảnh và đảm bảo rằng cabin có thể nhìn thấy trong hình vuông.

13. Thêm một nhãn

Sử dụng Công cụ Text, thêm nhãn 'Cabin rừng' bên dưới văn bản và sử dụng bảng tài sản để tạo kiểu văn bản trong kiểu đã lưu từ bước 8. Chọn hình ảnh và nhãn và nhóm chúng lại với nhau. Đặt tên cho nhóm 'Cabin trái' trong bảng điều khiển Lớp.

14. Sao chép nhóm

Thông thường lặp lại một yếu tố giao diện là công việc hoàn hảo cho công cụ 'lặp lại lưới'. Tuy nhiên, điều này sẽ cần hoạt hình cụ thể, không hoạt động với lưới lặp lại. Chọn hình ảnh và nhóm văn bản, sau đó sao chép và dán nó để nó nằm bên cạnh bản gốc và thêm hình ảnh 'cabin2.png' thay thế.

15. Đổi tên sau đó sao chép lại

Thay đổi văn bản thành 'cabin tuyết', và trong bảng điều khiển các lớp tên này 'cabin bên phải' này. Chọn cả cabin bên trái và bên phải và sao chép chúng, định vị các bản sao bên dưới và cập nhật văn bản và hình ảnh của chúng với 'cabin3.png' và 'cabin4.png'. Nhóm cả hai điều này cùng nhau và đặt tên cho nhóm 'Cabin thấp hơn'.

16. Tiêu đề văn bản

Thêm văn bản vào trang với văn bản 'Kết quả tìm kiếm cho cabin'. Cho rằng kiểu chữ Rockwell và lưu nó vào các kiểu nhân vật trong bảng tài sản. Bây giờ định vị nhóm 'Cabin Cabin' nằm ngay dưới màn hình và xuất hiện xuống 0 để nó vô hình trên màn hình này.

17. Thay đổi Opacity.

Bây giờ hãy chọn các cabin trái và phải, di chuyển chúng xuống dưới cùng của màn hình và lấy thanh trượt xuất hiện về không. Lặp lại một lần nữa cho văn bản tìm kiếm. Khi chúng ta di chuyển đến một màn hình khác, tất cả đều sẽ hoạt hình với vị trí mới của họ. Trong bảng lớp, di chuyển 'cabin trái' trên tất cả các nhóm cabin khác.

18. Sao chép màn hình

Chọn Artboard bằng cách nhấp vào tên của nó, sau đó nhấp đúp vào Artboard và thay đổi tên thành 'Trang chủ'. Sao chép và dán Artboard và đổi tên nó 'Tìm kiếm'. Bây giờ chọn logo và di chuyển nó lên gần màn hình, sau đó giảm sự xuất hiện của nó về 0.

19. Di chuyển nền

Chọn hình ảnh bầu trời và nâng nó lên một chút trên màn hình. Chọn hình ảnh cabin và di chuyển nó lên cho đến khi cabin ở trên cùng của màn hình. Sau đó nhấp vào hình ảnh cây và di chuyển nó qua cabin. Cuối cùng, chọn nhóm 'Tìm kiếm' và giảm sự xuất hiện xuống 0.

20. Các yếu tố mới xuất hiện

Chọn kết quả tìm kiếm trong bảng lớp và mang đến sự xuất hiện của nó lên tới 100. Di chuyển nó lên màn hình. Lặp lại điều này cho cabin bên trái, cabin bên phải và cabin thấp hơn. Sử dụng công cụ Pen để vẽ nút quay lại đơn giản và thêm một vòng tròn xung quanh nó. Làm mờ nền và lấy độ sáng của nó xuống -30.

21. Hoàn thành nút quay lại

Chọn mũi tên phía sau và khoanh tròn, nhóm chúng lại với nhau và đặt tên cho chúng 'nút quay lại' trong bảng điều khiển lớp. Chuyển sang chế độ 'nguyên mẫu' bằng cách nhấn 'nguyên mẫu' ở phía trên bên trái của giao diện XD. Chọn màn hình chính, kéo mũi tên màu xanh sang màn hình tìm kiếm và bảng bật lên sẽ xuất hiện.

22. Lệnh thoại

Thay đổi kích hoạt thành giọng nói và nhập từ 'tìm kiếm' dưới dạng lệnh thoại để kiểm soát điều này. Thay đổi hành động để tự động hoạt hình và nới lỏng để chụp. Làm cho thời lượng 1,5s. Trong màn hình tìm kiếm, nhấp vào nút Quay lại và kéo mũi tên màu xanh trở lại màn hình 'Trang chủ'. Chỉ cần thay đổi kích hoạt để nhấn.

23. Kiểm tra nguyên mẫu

Ở trên cùng bên phải của giao diện XD là một nút phát. Nhấp vào cái này và một nguyên mẫu hoạt động bây giờ sẽ bật lên trên màn hình. Trên trang chủ, bạn sẽ cần giữ thanh không gian trong khi bạn nói lệnh thoại 'tìm kiếm'. Khi bạn buông thanh không gian, nó sẽ đưa bạn đến màn hình tiếp theo và hoạt hình giao diện đồ họa vào vị trí.

24. Quay lại

Khi quá trình chuyển đổi đã chạy, bạn có thể nhấn nút quay lại để quay lại màn hình chính. Đóng nguyên mẫu và nhấp vào màn hình tìm kiếm, sau đó nhấp vào mũi tên màu xanh sang phải (không kéo). Thay đổi kích hoạt thành thời gian, hãy thực hiện độ trễ 0 và đặt hành động sang phát lại lời nói. Tạo kết quả tìm kiếm của bài phát biểu cho cabin có sẵn '.

25. Xác nhận lời nói

Kiểm tra điều này bây giờ với nút phát để nghe một sự xác nhận bằng giọng nói của tìm kiếm. Đóng nguyên mẫu khi bạn đã thử điều này. Một màn hình khác sẽ được tạo, vì vậy hãy nhấp lại vào chế độ xem 'thiết kế' ở phía trên bên trái của giao diện XD. Bấm vào màn hình tìm kiếm bằng cách nhấp vào tên, sau đó sao chép và dán nó.

26. Thu nhỏ hình ảnh

Đổi tên màn hình mới 'Cabin'. Nhấp đúp vào hình ảnh cho lớp 'Cabin trái'. Thay đổi kích thước tay cầm góc để nó lấp đầy màn hình, sau đó định vị lại hình ảnh bên trong để nó bao gồm màn hình đó. Nhấp vào văn bản kết quả tìm kiếm và xuất hiện xuống 0 để xóa nó khỏi chế độ xem.

27. Các yếu tố màn hình mới

Nhấp đúp vào văn bản 'Cabin rừng' vì nó là một phần của nhóm. Phóng to kích thước văn bản thành 26 pixel và di chuyển lên một chút trên màn hình. Thêm văn bản vào màn hình trong môi trường Helvetica neue ở kích thước 14 pixel và đặt nó thành màu trắng để nổi bật trên nền. Thêm một đường trắng với công cụ dòng dưới tiêu đề.

28. Tạo một nút

Sử dụng công cụ hình chữ nhật để vẽ một hình chữ nhật trên màn hình ở dưới cùng của thiết kế. Kéo vào tay cầm góc để cung cấp các góc tròn hình dạng này. Thêm từ 'Dự trữ' vào đây, sử dụng kiểu ký tự đã lưu trong bảng tài sản cho Helvetica Neue in đậm.

29. Di chuyển đến chế độ Prototype

Tất cả các yếu tố thiết kế được thực hiện ngay bây giờ cho toàn bộ thiết kế của ứng dụng. Di chuyển đến chế độ 'nguyên mẫu' bằng cách nhấp vào từ 'nguyên mẫu' ở góc trên cùng bên trái. Trong màn hình tìm kiếm, nhấp vào nhóm 'Cabin rừng' của hình ảnh và văn bản. Kéo tay cầm màu xanh từ đây sang màn hình 'cabin'.

30. Cài đặt hoạt hình

Trong bảng điều khiển bật lên để chuyển đổi giữa các màn hình, chọn Nhấn làm trình kích hoạt, sau đó thực hiện Auto-Auto-Animate. Tiếp tục nới lỏng như snap nhưng giảm thời lượng này đến 0,6s. Điều này đảm bảo rằng hình ảnh động không kéo - chuyển động của màn hình đầu tiên đến màn hình thứ hai có rất nhiều chuyển động đòi hỏi quá trình chuyển đổi dài hơn.

31. Liên kết nút quay lại

Bây giờ hãy chọn nút Quay lại từ màn hình cuối cùng và kéo mũi tên màu xanh lam từ màn hình này sang màn hình 'Tìm kiếm'. Tất cả các cài đặt từ quá trình chuyển đổi trước đó nên được ghi nhớ. Bây giờ bạn đã sẵn sàng để tiếp tục và kiểm tra điều này bằng cách nhấp vào nút Play.

32. Tự động hoạt hình

Những gì bạn sẽ thấy với Auto-Animate bây giờ là hình ảnh mở rộng để lấp đầy màn hình và các yếu tố không còn cần nữa sẽ biến mất trong khi văn bản mới sẽ mờ dần. Điều ngược lại xảy ra khi quay lại. Điều này cung cấp một cách tốt để xem Auto-Animate hoạt động trên ba màn hình.

33. Lưu dự án

Theo mặc định, dự án của bạn sẽ tự động lưu vào đám mây sáng tạo, nhưng đó là một ý tưởng tốt để lưu một bản sao vào ổ cứng của riêng bạn trong trường hợp có bất kỳ vấn đề nào. Nhấp vào Tệp & GT; Lưu, thay đổi vị trí vào máy tính của riêng bạn và đặt tên cho dự án với một tên phù hợp.

34. Chia sẻ dự án

Toàn bộ điểm tạo mẫu là kiểm tra dự án trên người khác. May mắn thay, có một nút chia sẻ ở trên cùng bên phải của giao diện XD khiến điều này trở nên dễ dàng. Nhấp vào nút Chia sẻ và trong menu thả xuất hiện chọn tùy chọn Chia sẻ để xem xét.

35. Xuất bản nguyên mẫu.

Trong màn hình tiếp theo, bạn được thông báo rằng hỗ trợ Auto-Animate chưa có sẵn cho Web, nhưng nó sẽ sớm đến. Nhấp vào Tạo liên kết công khai và sau đó nhấp vào liên kết ở trên cùng bên phải để truy cập liên kết công khai trong trình duyệt web. Bạn sẽ cần giữ thanh không gian xuống để sử dụng lệnh thoại với nguyên mẫu.

36. Phiên bản video

Một nguyên mẫu khác có thể được chia sẻ bằng cách ghi giao diện trong hành động. Nhấp vào nút Chia sẻ và chọn Ghi video. Điều này sẽ mở một cửa sổ và khi bạn kết thúc việc này, bạn sẽ được nhắc lưu bản ghi màn hình dưới dạng tệp MP4, cũng là một cách hữu ích để chia sẻ nguyên mẫu của bạn.

Bài viết này ban đầu được xuất bản trong số 285 của Tạp chí thiết kế web sáng tạo Nhà thiết kế web . MUA VẤN ĐỀ 285 TẠI ĐÂY hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

• Thiết kế ứng dụng di động: Hướng dẫn dành cho người mới bắt đầu
• Cách tạo ứng dụng với Vue.js
• Gặp gỡ với ứng dụng di động trên bo mạch