Cách Tạo Mẫu Một ứng Dụng Di động Với Adobe XD - TheFastCode

Hướng dẫn này, chỉ cho bạn cách tạo một nguyên mẫu ứng dụng di động trong Adobe XD, đã được kết hợp với nhau bằng cách sử dụng Adobe XD CC (Beta 2017) Năm 2016. Adobe XD mới ra mắt CC đã có một vài điều chỉnh, làm cho nó dễ sử dụng hơn.

• Nhận giảm giá 15% cho Adobe Creative Cloud ở đây

Nếu bạn là một nhà thiết kế tạo trải nghiệm người dùng cho các ứng dụng hoặc trang web di động, bạn có thể được sử dụng để sử dụng nhiều công cụ cho các tác vụ khác nhau khi Tạo mẫu .

Bạn bắt đầu với nghiên cứu. Sau đó, bạn phác họa ý tưởng trên bút và giấy, và sau đó chuyển suy nghĩ của bạn đến một công cụ thiết kế. Để đưa ra dòng chảy tốt nhất, bạn xuất tất cả tài sản của mình và đưa chúng vào một công cụ khác để xây dựng một nguyên mẫu. Từ đó, bạn chia sẻ hoặc kiểm tra nguyên mẫu của mình, thu thập phản hồi và quay lại giữa chu kỳ để lặp lại, chuyển từ công cụ sang công cụ khi bạn tinh chỉnh thiết kế của bạn.

Một số công cụ thiết kế mỗi giải quyết một phần khác nhau của vấn đề. Nhưng thay vì làm cho cuộc sống của bạn trở thành một nhà thiết kế dễ dàng hơn, hãy chuyển đổi giữa tất cả các công cụ này chỉ làm giảm tốc độ của bạn.

Điều gì xảy ra nếu có một công cụ nào có nghĩa là bạn có thể thưởng thức một quy trình làm việc được kết nối đầy đủ? Nơi bạn có thể thiết kế và tạo nguyên mẫu kinh nghiệm của mình trong vài phút, chia sẻ chúng trên web để chụp phản hồi, sau đó thực hiện chỉnh sửa một cách dễ dàng mà không phá vỡ sải chân của bạn? Mục tiêu với Adobe Experience Design CC - hoặc, như chúng ta gọi nó, Adobe XD - đã làm điều đó.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn các khu vực chính của Adobe XD bằng cách thiết kế, tạo mẫu và chia sẻ một ứng dụng di động 'Gặp gỡ nhóm' đơn giản.

Chúng tôi sẽ tạo một trang nội dung liệt kê các thành viên nhóm sản phẩm, sau đó người dùng sẽ có thể nhấp vào các mục riêng lẻ để được đưa đến một trang Biog chuyên sâu hơn. Bạn sẽ tìm hiểu cách tạo các thiết kế có độ trung thực cao, nguyên mẫu và chia sẻ chúng để thu thập phản hồi.

Xem video trên và làm theo các bước được viết dưới đây để tìm hiểu cách tạo mẫu với Adobe XD. Chúng tôi sẽ chỉ cho bạn cách thực hiện như thế nào, chúng tôi cũng sẽ chỉ cho bạn cách kiểm tra nó, ghi lại video xem trước của nó trong hành động và cách chia sẻ và xuất nó.

Lưu ý rằng một số quy trình có thể đã thay đổi một chút trong phiên bản Adobe XD mới hơn.

01. Cài đặt Adobe XD và bắt đầu một thiết kế mới

Đầu tiên, đảm bảo Adobe XD là cài đặt trên máy tính của bạn . Khởi động nó, hãy xem màn hình Chào mừng và bắt đầu một thiết kế mới với mẫu Iphone Artboard.

02. Tạo một nghệ thuật thứ hai

Sử dụng công cụ Artboard ( A. ) Để tạo một bản vẽ thứ hai, sau đó thay đổi tiêu đề của chúng (bằng cách nhấp đúp vào chúng) vào 'Trang Team - Team Page' và 'iPhone - chi tiết'. Thay đổi cả hai màu nền của Artboards sang màu đen bằng cách sử dụng thanh tra tài sản bên phải của bạn. Với công cụ CHỌN ( Ở v ) Đã chọn, bạn có thể nhấn phím cách bất cứ lúc nào để xoay trên thiết kế của mình.

03. Tải tài sản hướng dẫn

Tôi đã kết hợp một thư mục tài sản mà tôi sẽ sử dụng trong suốt hướng dẫn này. Bạn có thể tải về chúng đây . Từ Finder, kéo '' Trạng thái iPhone-Bar.svg 'lên đỉnh của Artboard 1 ( x: 8, Y: 5 ). Sau đó sao chép và dán nó vào Artboard 2, vì vậy cả hai nghệ thuật đều có thanh trạng thái ở trên cùng. Đánh CMD + L. Để khóa các thanh trạng thái này trong cả hai hình ảnh, để các thuộc tính của chúng không thể được sửa đổi. Để mở khóa chúng, bạn có thể sử dụng phím tắt một lần nữa hoặc nhấp vào biểu tượng 'Khóa'.

04. Vẽ một hình chữ nhật và đặt kích thước

Hãy tập trung vào Artboard 1 (trang nhóm). Sử dụng công cụ hình chữ nhật ( Ở r ), Vẽ hình chữ nhật màu hồng (# ff2bc2 không có đường viền) trong Artboard 1 và đặt kích thước của nó thành 375 x 230 bằng bảng kiểm tra thuộc tính ở bên phải.

05. Sắp xếp lại các đối tượng

Để xoay viền hoặc đổ vào và tắt, nhấp vào biểu tượng 'Mắt' ở bên phải. Đánh SHIFT + CMD + [ để gửi tất cả các cách để trở lại, hoặc đi đến Đối tượng & gt; Sắp xếp & gt; Gửi đến back. . Nếu bạn muốn thay đổi màu sắc bằng các giá trị thập lục phân, nhấp vào biểu tượng màu và khi bộ chọn màu gốc bật lên, hãy chọn tab thứ hai ở trên cùng và thay đổi trình đơn thả xuống của 'RGB Sliders'.

06. Tạo một tiêu đề

Sử dụng công cụ văn bản ( T. ), nhấp để tạo tiêu đề cho trang nhóm của bạn. Của tôi là Helvetica Bold, 20, #FFFFFF, X: 18, Y: 123. Hãy bắt đầu đặt danh sách các thành viên trong nhóm của chúng tôi. Vẽ một hình vuông màu xám nơi ảnh của thành viên trong nhóm sẽ ngồi (100 x 100, x: 8, y: 238, # d0d0d0 không có đường viền).

07. Thêm một hình chữ nhật khác

Ở bên phải của điều này, chúng ta cần một hình chữ nhật màu trắng (260 x 100, x: 108, y: 238, #ffffff không có đường viền) mà chúng ta sẽ bao gồm tên của thành viên trong nhóm dưới dạng tiêu đề và chức danh công việc như một sản phẩm phụ. Hiện tại, sử dụng văn bản giữ chỗ và phong cách nó lên như bạn muốn.

08. Thêm biểu tượng mũi tên

Để hiển thị hộp này sẽ là một khu vực có thể tháo rời, chúng tôi sẽ bao gồm một biểu tượng mũi tên. Kéo 'Path.svg' từ Finder vào Canvas XD đến một điểm tắt Artboard. Sau đó định vị lại nó thành X: 330, Y: 279.

09. Đặt headshot của bạn

Từ Finder, kéo một headshot vào vị trí trên hình vuông màu xám.

10. Tạo danh sách

Bây giờ chúng ta có thể tạo danh sách của chúng tôi. Tại thời điểm này, thông thường bạn sẽ sao chép và dán mục hàng đầu, di chuyển phiên bản sao chép xuống và điều chỉnh lề. Bạn sẽ làm tương tự cho các mặt hàng mới, và nếu bạn muốn thay đổi lề, bạn sẽ phải thực hiện theo cách thủ công, từng cái một.

Chà, không phải với Adobe XD - bạn có thể sử dụng tính năng Lưới lặp lại. Chọn các mục bạn muốn lặp lại, nhấp vào nút 'Lưới lặp lại' trên thanh tra thuộc tính bên phải của bạn ( CMD + R. ) và sử dụng các tay cầm màu xanh lá cây để lặp lại các mục theo chiều dọc. Bạn cũng có thể lặp lại chúng theo chiều ngang cho một phiên bản máy tính bảng.

11. Điều chỉnh lề

Điều chỉnh lề lưới lặp lại của bạn bằng cách lơ lửng trên cạnh của các mặt hàng của bạn, nhấp và kéo. Chúng ta hãy đặt lề thành 7. Kéo lưới lặp lại xuống dưới cùng của bảng hiệu của bạn. Bây giờ chúng ta có bốn hàng để chơi với.

12. Chỉnh sửa các trường văn bản

Trong khi các thuộc tính (màu, x và y, v.v.) là toàn cầu, nội dung của mỗi mục có thể là duy nhất. Chỉnh sửa các trường văn bản cho tên của mỗi cá nhân và chức danh công việc. Bạn có thể nhấp đúp để vào lưới và nhóm hoặc cmd + nhấp Để trực tiếp chọn bất kỳ yếu tố nào trong một nhóm hoặc lưới lặp lại. Bây giờ chúng ta chỉ cần lấy tất cả các headshot cùng một lúc và kéo chúng lên lưới và chúng tôi đã hoàn thành với màn hình này.

13. Tạo hiệu ứng tối

Hãy nhảy đến Artboard 2 (trang chi tiết). Một lần nữa, chúng ta sẽ bắt đầu với một hình chữ nhật giữ chỗ (375 x 444, x: 0, y: 0, #ffffff không có đường viền) và kéo một headshot để điền vào nó. Chúng ta sẽ tạo hiệu ứng tối bằng cách thay đổi độ mờ của hình ảnh thành 60% và gửi nó đến mặt sau ( SHIFT + CMD + [ ).

14. Thêm một mũi tên khác

Sau đó khóa mục headshot ( CMD + L. ) và thêm một mũi tên khác ('Back-Arrow.svg') để cho biết người dùng có thể quay lại danh sách nhóm. Điều này cần ngồi ở x: 20, y: 40. Điều quan trọng là phải khóa hình ảnh trước, bởi vì nếu không thì SVG sẽ thay thế Headshot.

15. Thêm thanh thông tin liên lạc

Chúng tôi muốn bao gồm một thanh màu hồng trên mỗi trang, sẽ liệt kê các chi tiết liên hệ của thành viên trong nhóm (375 x 45, x: 0, y: 400). Sử dụng công cụ văn bản ( T. ) Để tạo một phần tử văn bản đọc 'liên kết giữ chỗ', hãy đặt nó cho nó, phong cách nó và đặt nó tại x: 169, y: 416.

16. Tạo nhiều phiên bản của phần tử văn bản

Chúng ta hãy sử dụng công cụ Lưới lặp lại để tạo thêm hai phiên bản của phần tử văn bản này. Đầu tiên, chuyển đổi văn bản thành một lưới lặp lại ( CMD + R. ), sau đó giữ phím tùy chọn trong khi mở rộng lưới của bạn theo chiều ngang. Đẹp, phải không? Chọn trực tiếp văn bản ( cmd + nhấp. ) và thay đổi nội dung để đọc 'email', 'twitter' và 'LinkedIn'.

17. Tạo tên và hộp sinh học

Để hoàn tất thiết kế, hãy tạo một hộp trắng (360 x 214, x: 8, y: 445) sẽ bao gồm tên và sinh tử của thành viên trong nhóm. Đầu tiên thêm một phần tử văn bản bằng cách sử dụng tên người giữ chỗ '. Đối với phần tử văn bản chứa BIOG, chúng tôi muốn sử dụng văn bản khu vực. Để làm điều này, chọn Công cụ văn bản ( T. ) Và nhấp và kéo để xác định khu vực cho bản sao của bạn. Một lần nữa, nhập một số văn bản giữ chỗ ngay bây giờ và điều chỉnh các thuộc tính tạo kiểu của nó.

18. Tạo Artboards cho các thành viên trong nhóm khác

Bây giờ hãy tạo một số nghệ thuật mới cho các thành viên trong nhóm khác. Mở khóa đầu tiên hình ảnh chính ( CMD + L. ), sau đó nhấp vào tiêu đề của Artboard 2 để chọn nó và nhấn CMD + C. để sao chép nó. Thu nhỏ ( cmd + - hoặc sử dụng trackpad để chụm-to-zoom), sau đó nhấn CMD + V. để dán ba nghệ thuật mới. Thêm một số thông tin BIOG vào mỗi trang. Cập nhật tên và hình ảnh Headshot, và sắp xếp các trang trí trên vải. Mát mẻ! Thiết kế của chúng tôi đã hoàn thành ngay bây giờ.

19. Thiết lập dòng chảy

Đã đến lúc bắt đầu xác định dòng chảy của ứng dụng. Một nguyên mẫu có thể có giá trị một ngàn cuộc họp, vì vậy chúng tôi sẽ tạo ra một cuộc họp để truyền đạt ý định thiết kế của chúng tôi. Chỉ cần chuyển sang chế độ nguyên mẫu (trên cùng bên trái), chọn mục sẽ được sử dụng (giữ cmd. để chọn trực tiếp) và kéo một dây vào bảng hiệu bên phải. Khi chuột được phát hành, chúng ta có thể đặt SEGUE, nới lỏng và thời lượng. Đơn giản.

20. Kết nối lên

Chúng ta hãy đi mặc dù mỗi mục trong danh sách của chúng tôi trên Artboard 1 và chuyển chúng vào trang chi tiết tương ứng của họ. Đối với mỗi trong số này, chúng tôi muốn thiết lập Segue để trượt sang trái và nới lỏng để giảm bớt. Tiếp theo, chúng ta có thể nối các mũi tên phía sau trên mỗi trang chi tiết trở lại Artboard 1 - hãy nhớ đặt Segue thành slide ngay lần này. Boom - nguyên mẫu của chúng tôi đã sẵn sàng.

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

Để kiểm tra nguyên mẫu, nhấp vào nút Phát ở trên cùng bên phải (Xem trước). Bạn không cần phải đóng cửa sổ xem trước để cập nhật thiết kế hoặc dây của bạn. Chỉ cần bắt đầu thực hiện các thay đổi và chúng sẽ tự động được phản ánh trên cửa sổ xem trước.

22. Làm video

Thật dễ dàng để ghi video tương tác của bạn khi kiểm tra nguyên mẫu. Với cửa sổ xem trước mở, nhấp vào nút Bản ghi để bắt đầu và dừng ghi. Lưu tệp '.mov' và chia sẻ với các bên liên quan của bạn.

23. Chia sẻ công việc của bạn

Để chia sẻ các nguyên mẫu trên web, nhấp vào nút cuối cùng ở trên cùng bên phải (Chia sẻ trực tuyến). Nhấp vào nút Tạo liên kết. Tất cả các tài sản sẽ được tải lên đám mây sáng tạo và một liên kết sẽ được tạo. Nếu những thay đổi là cần thiết, bạn có thể quay lại chế độ thiết kế, thực hiện các thay đổi và chia sẻ lại. Toàn bộ dòng chảy chỉ hoạt động.

24. Xuất hồ sơ

Từ XD, bạn có thể xuất PNG cho Web, iOS và Android ở các kích cỡ khác nhau, cũng như các tệp SVG được tối ưu hóa cao.

25. Tận hưởng kết quả

Xin chúc mừng! Bạn đã thành thạo những điều cơ bản của Adobe Experience Design CC (xem trước). Vui lòng chia sẻ nguyên mẫu của bạn trên web và phương tiện truyền thông xã hội - Thêm #adobexd. Vì vậy, chúng tôi có thể thấy công việc của bạn.

Bài viết này ban đầu xuất hiện trong Tạp chí Net. vấn đề 280. Theo dõi mạng tại đây .

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

• Làm thế nào để tránh các cạm bẫy tạo mẫu
• Cách sử dụng hoạt hình trong ứng dụng di động
• 10 lời khuyên cho thiết kế UX di động tốt hơn