ĐÁNH GIÁ ADOBE XD BẢN QUYỀN

Adobe XD là công cụ tạo mẫu Adobe cho các nhà thiết kế UX – UI (thiết kế tương tác và trải nghiệm người dùng). Các tính năng Adobe XD được sử dụng để tạo khung dây, nguyên mẫu và thiết kế màn hình cho các sản phẩm kỹ thuật số như trang web và ứng dụng di động.

THÔNG SỐ KỸ THUẬT

Hướng dẫn cho người bắt đầu

Để tìm hiểu Adobe XD và bắt đầu nhanh chóng, Adobe có rất nhiều hướng dẫn bằng video, bài viết trên blog và gif-tips để trợ giúp. Giao diện rõ ràng và được xây dựng giống như trong các công cụ UX tương tự. Có chế độ Design (Thiết kế) và Prototype (Nguyên mẫu) . Điều này có thể gây khó hiểu, vì chế độ Design chứa các công cụ để tạo nguyên mẫu, trong khi chế độ Prototype là để thiết lập kết nối giữa các nguyên mẫu để tương tác thêm.

Có 2 cách để lưu trữ tài liệu trong Adobe XD đó là lưu trữ trong Adobe Creative Cloud và hoặc cục bộ trên thiết bị của bạn. Đăng ký đám mây cho phép chia sẻ các tệp giữa các thiết bị khác nhau và tất cả các thay đổi được lưu tự động, ngay cả khi kết nối Internet bị gián đoạn tại một số điểm kết nối.

Một quyền lợi quan trọng khác, với điều kiện bạn có đăng ký Creative Cloud All Apps , bạn có thể nhập các dự án từ Photoshop và Illustrator vào Adobe XD. Tương tự, xuất các tệp Adobe XD vào Adobe After Effects. Các phần tử được nhập có thể chỉnh sửa, ví dụ: khi sao chép hình dạng phức tạp từ Illustrator, tất cả các điểm tham chiếu đều được giữ nguyên và bạn có thể tiếp tục chỉnh sửa nó trong Adobe XD.

Quy trình làm việc chung với các sản phẩm Adobe thường như sau: tạo minh họa véc tơ trong Illustrator, xử lý hình ảnh và bố cục trong Photoshop, nguyên mẫu hoạt hình và khung lưới trong Adobe XD, hoạt hình phức tạp trong Adobe After Effects. Adobe XD cũng cho phép nhập các tệp JPG, SVG, PNG, GIF (kéo trực tiếp từ trình duyệt) và Sketch files

Thư viện

Assets library (Thư viện tài sản) là nơi lưu trữ các biểu tượng, màu sắc yêu thích và kiểu ký tự, để sử dụng trong các tài liệu khác nhau, ví dụ. Bạn có thể chuyển đổi chức năng tô sáng cho thành phần Assets library để xem tất cả các đối tượng có màu sắc, kiểu ký tự hoặc tất cả các ký hiệu trong tài liệu

Symbols (Biểu tượng) là các yếu tố được kết nối có thể được chia sẻ trên các bản vẽ hoặc thậm chí các tài liệu. Để tạo biểu tượng, nhấp chuột phải vào đối tượng và chọn tùy chọn Make symbol (Tạo biểu tượng) . Sau đó, sao chép nó số lần cần thiết để tạo ra các trường hợp. Do đó, tất cả các thay đổi đối với từng đối tượng của nó sẽ được phản ánh ở nơi khác (fill, stroke, shape).

Symbols menu hiển thị tất cả các biểu tượng hiện có trong một tài liệu. Để thêm một biểu tượng vào một tài liệu khác, chỉ cần sao chép và dán nó. Thay đổi đối với các biểu tượng sẽ được phản ánh ở thông báo góc bên trái. Bạn có thể di con trỏ trên thông báo này để xem trước các thay đổi hoặc nhấp vào nó để áp dụng các thay đổi này.

Để tiết kiệm thời gian và công sức, Adobe XD cũng mang đến bộ công cụ UI cho Apple iOS, Google Material và Microsoft Windows, khung lưới cho thiết kế di động và website. Có bộ mẫu (keypads, buttons, players v.v.). Nhà thiết kế có thể tự do copy-paste các đối tượng giữa các tài liệu và sửa đổi chúng.

Công cụ kiểm soát

Để bắt đầu, chọn loại thiết bị trên trang khởi chạy, sau đó điều chỉnh các thuộc tính artboard trong bảng điều khiển thuộc tính : tên, kích thước, vị trí trên khung vẽ; tắt / bật đáp ứng thay đổi kích thước, cuộn và lưới. Bây giờ, hãy đi vào các tính năng và công cụ mà chương trình cung cấp cho các nhà thiết kế.

Responsive resize cho phép giữ các mục cố định trên bản vẽ khi thu nhỏ. Nó phân tích cấu trúc đối tượng và xác định hành vi phù hợp khi nhân rộng. Ngoài ra, bạn có thể định cấu hình các ràng buộc của từng mục – bên trái, dưới cùng, dưới cùng bên phải, v.v. Với chức năng này, bạn có thể điều chỉnh thiết kế cho các vị trí màn hình khác nhau (dọc / ngang) và kích thước (di động, máy tính bảng, v.v.).

Fix position để giữ các phần tử cố định khi cuộn – áp dụng cho các tiêu đề cố định, chân trang hoặc các phần tử riêng biệt. Tùy chọn lật để nhanh chóng phản chiếu đối tượng theo chiều ngang và chiều dọc. Với các phép tính toán , có thể thay đổi kích thước hoặc vị trí của các đối tượng bằng cách nhập các phép toán đơn giản (cộng, nhân, v.v.).

Tính năng Scrolling rất tốt cho tạo mẫu, ví dụ, nếu bạn có một trang đích hoặc một vài trang trên bản vẽ. Chọn Vertical Scrolling và nhập chiều cao khung nhìn, tức là kích thước của phần trên bản xem trước trên màn hình. Bố cục lưới giúp căn chỉnh các đối tượng trên bản vẽ, nó được thể hiện dưới dạng cột và hình vuông có kích thước nhất định.

Các tính năng hữu ích

Repeat Grid là một nhóm các đơn vị lặp lại. Để áp dụng nó, người ta phải tạo một số đối tượng, nhấp vào nút Repeat Grid và kéo tay cầm sang phải hoặc xuống. Kết quả là, bạn có được lưới cho nhóm đối tượng này trong một khung.

Bạn có thể thay đổi kích thước khung này, mở thêm các đối tượng hoặc hủy nhóm Lặp lại lưới. Nếu bạn thay đổi kiểu của một mục duy nhất, những mục khác cũng sẽ có cùng thuộc tính. Hơn nữa, các đối tượng, văn bản hoặc bản vẽ có thể được thêm vào Lưới lặp lại hiện có. Một tính năng hay khác của Adobe XD là  Auto-masking tạo mặt nạ khi nhập hình ảnh vào khung của các đối tượng được chọn (hình chữ nhật, hình tròn, v.v.). Ngoài ra, có thể nhập tệp văn bản bằng Chỉnh sửa văn bản của Mac hoặc Windows Notepad. Đối với văn bản,  chức năng SpellCheck bổ sung sẽ  sửa các lỗi ngữ pháp và từ sai chính tả.

Tất cả các tính năng này cho phép thiết kế danh sách, bảng, thư viện một cách nhanh chóng. Chẳng hạn, bạn có thể tạo Repeat Grid với các mục vòng tròn và khối văn bản, chuẩn bị một tệp văn bản có tên (mỗi tên – dòng riêng biệt) và kéo nó vào Repeat Grid. Tên sẽ xuất hiện trong các khối văn bản của Lưới. Nếu bạn kéo ảnh trong LRepeat Grid, chúng sẽ xuất hiện trong hình chữ nhật (dưới mặt nạ).

Với chức năng Auto-animate, bạn có thể tạo các hình ảnh động ngoạn mục – như hiệu ứng thị sai, thanh trượt hoặc chuyển tiếp đẹp mắt với các đối tượng bật lên. Các bản cập nhật Adobe XD bao gồm xem trước trình duyệt tự động hoạt hình.

Adobe XD cũng cung cấp các voice commands (lệnh thoại) để phát lại các nguyên mẫu: các nhà sản xuất Adobe gọi nó là nguyên mẫu giọng nói của Cameron và khả năng thiết lập các lệnh và phản hồi bằng giọng nói cụ thể. Chương trình tự động xác định vị trí người dùng dựa trên cấu hình mặc định của hệ điều hành và chọn ngôn ngữ. Ngoài ra, Search trong layers panel có thể được thực hiện theo cách tương tự theo tên.

Công cụ thiết kế

Có một vài tính năng thiết kế hữu ích cơ bản trong Adobe XD. Color picker menu chứa màu đậm, độ dốc tuyến tính hoặc hướng tâm. Độ dốc được quy định trực tiếp trên các đối tượng. Bạn có thể lưu các màu yêu thích ở đây và chọn một mô hình màu (RGB, Hex hoặc HSB). Eyedropper trong Trình kiểm tra thuộc tính cho phép sao chép nhanh chóng màu mong muốn từ bất kỳ phần nào của tài liệu. Ngoài ra còn có hiệu ứng Blur để tạo nền từ ảnh và hiệu ứng Shadow để làm cho các đối tượng chân thực hơn.

Công cụ vẽ

Pen tool giúp tạo ra các hình đơn giản và dễ thao tác. Đối tượng vector có điểm neo. Kéo chúng hoặc thêm mới để thay đổi hình dạng của các đối tượng. Bạn có thể tạo các loại đường viền khác nhau cho các hình, chọn kích thước, làm tròn và hình dạng góc của nó. Kết hợp công cụ bút với các điểm neo để tiếp tục vẽ từ điểm neo để tạo thành một hình dạng đặc biệt.

Ngoài ra, thật dễ dàng để tạo đường cong bằng pen tool, rất hữu ích để vẽ biểu tượng, đồ họa hoặc bộ cân bằng. Boolean operations kết hợp với các hình đơn giản. Bạn có thể chọn hai hoặc nhiều hình dạng và chọn một trong các thao tác: cộng, trừ, cắt hoặc loại trừ chồng chéo.

Chế độ trình bày

Nhấn nút Desktop Preview để xem và tương tác với nguyên mẫu của bạn. Tại đây bạn cũng có thể thực hiện trình chiếu video bằng cách ghi lại các tương tác. Adobe XD không có bản xem trước mockup cho thiết bị di động. Nhưng bù lại, nó cung cấp bản xem trước trên thiết bị của riêng bạn (bạn sẽ cần ứng dụng Adobe XD Android hoặc ứng dụng iOS và tài khoản Creative Cloud). Ngoài ra, nếu điện thoại thông minh của bạn được kết nối USB, bạn có thể xem trước thiết kế theo thời gian thực (chỉ dành cho iOS).

Hợp tác nhóm

Khi bạn tạo một dự án thiết kế cho một nhóm, thường có rất nhiều tình huống hạn chế sự hợp tác. Chẳng hạn, hệ điều hành khác nhau, các chương trình khác nhau (Sketch, Photoshop) hoặc thậm chí là các máy khách từ nước ngoài. Adobe XD cung cấp một số cách để chia sẻ các nguyên mẫu, cũng như các công cụ cộng tác cho các bên liên quan và nhà phát triển. Adobe XD chưa hỗ trợ hợp tác nhóm trực tiếp nhưng nó có đề xuất một giải pháp thay thế. Để xem các tùy chọn, nhấp vào nút Share ở góc trên bên phải.

Chọn  Share the document  để mời chỉnh sửa qua email, người đó sẽ có thể tham gia tài liệu trực tuyến. Tùy chọn Share for review tạo ra một liên kết công khai hoặc riêng tư, tạo cơ hội để nhận được ý kiến ​​trên tất cả các bản vẽ. Người dùng cũng có thể thiết lập thông báo email cho các bình luận đến. Chức năng Hotspot hinting giúp làm nổi bật các không gian có thể nhấp và tương tác trên các nguyên mẫu.

Share for development là để phản ánh thông số kỹ thuật thiết kế cho nhà phát triển để họ có thể xem dữ liệu về tài sản, kích thước, kiểu ký tự và tương tác. Batch Export là một tùy chọn khác để làm cho công việc dễ dàng hơn cho các nhà thiết kế và nhà phát triển. Nó được thiết kế để trực tiếp xuất khẩu tài sản với số lượng lớn. Nó có thể là bản vẽ, nhóm hoặc tài sản cá nhân. Tất cả đều giúp các nhóm hợp tác thuận tiện trong các dự án thiết kế cũng như gửi tài sản cho các nhà phát triển sau này.

Tích hợp

Khả năng tích hợp các công cụ và dịch vụ khác nhau lại với nhau, ví dụ như trong các khía cạnh như phản hồi của khách hàng, chia sẻ artboard, tạo mã cho các thành phần thiết kế, v.v. Tab tiện ích trên trang khởi chạy Adobe XD chứa kho lưu trữ bổ trợ với rất nhiều plugin tích hợp. Nó hỗ trợ tích hợp với UserTesting, Overflow, Stark, Angle, UI Faces; các công cụ hợp tác nhóm như Trello, CloudApp, Airtable, Google Sheets, v.v … Việc tích hợp như vậy giúp nhận phản hồi hoặc ví dụ, sao chép mã Embed.ly thẳng vào Behance, sao chép liên kết được tạo và mở nó trong Dropbox Paper hoặc trình duyệt web. Tổng cộng, Adobe XD cung cấp hơn 80 plugin.

Adobe XD pricing

Adobe XD được mua dưới hình thức thuê bao Adobe bản quyền với các gói dịch vụ như sau: