Adobe đang mang chuyên môn thiết kế đồ họa huyền thoại của mình đến thế giới trải nghiệm người dùng với Adobe Experience Design mới, hay còn được gọi là Adobe XD. Nhiều người dùng Creative Cloud có thể đã thiết kế UX trong các ứng dụng khác như Illustrator hoặc thậm chí là Photoshop. Bây giờ bạn đã biết thêm Adobe XD cũng là một công cụ dành cho thiết kế UX. Các tính năng tuyệt vời nhưng phần lớn không cần thiết của các ứng dụng đồ họa nổi tiếng vẫn được giữ nguyên. lý do? Adobe XD là một chương trình nhỏ gọn và trực quan giúp bạn nhanh chóng tạo khung dây (khung) và nguyên mẫu cho các ứng dụng và trang web của mình.
1. Bắt đầu với Adobe XD
Khi bạn khởi động một ứng dụng, điều đầu tiên bạn nhìn thấy là màn hình giật gân. Là người dùng Adobe XD mới, bạn thực sự nên nhấp vào nút "Bắt đầu Hướng dẫn". Sau đó, bạn sẽ được đưa đến một màn hình có bảng giải thích quá trình sử dụng XD.
Thông tin nhanh chóng hướng dẫn bạn thông qua những điều cơ bản của ứng dụng. Bạn sẽ học cách hoàn thành các tác vụ quan trọng như tạo bảng vẽ, nhập hình ảnh, làm việc với lưới lặp lại và liên kết các bảng vẽ với nhau để tạo nguyên mẫu. Nếu bạn là người dùng Creative Cloud, nhiều yếu tố có thể hiểu được ngay lập tức.
Sau khi hoàn thành hướng dẫn này, đã đến lúc tạo một dự án mới. Bạn có thể thực hiện việc này bằng cách chọn Tệp > Mới. Thao tác này sẽ đưa bạn trở lại màn hình giống như màn hình chào mừng ban đầu. Tại đây, bạn có thể nhanh chóng chọn độ phân giải màn hình mục tiêu dựa trên thiết bị, kích thước trang web hoặc nhập giá trị cho kích thước tùy chỉnh.
Sau khi chọn kích thước dự án, bạn sẽ vào giao diện chính của Adobe XD. Giao diện chính của ứng dụng được chia thành 2 tab Design và Prototype. Trong tab Thiết kế, bạn sẽ xây dựng tất cả các phần tử của mình trên các bảng vẽ, với mỗi bảng vẽ đại diện cho một màn hình khác nhau. XD cũng cung cấp một số công cụ vẽ để tạo các hình dạng cơ bản hoặc bạn có thể thêm các bảng vẽ hiện có vào ứng dụng.
2. Chức năng mạnh mẽ
Adobe XD cung cấp nhiều tính năng mà bạn mong đợi ở một công cụ UX. Nhiều công cụ trong số này đã quen thuộc, trong khi những công cụ khác đã được điều chỉnh để hỗ trợ tốt nhất cho thiết kế trải nghiệm người dùng. Ví dụ: bạn sẽ thấy rằng các công cụ vẽ hoạt động giống như các ứng dụng Adobe khác. Mặt khác, các lớp hơi khác một chút, cũng để phù hợp với cách hoạt động của thiết kế UX.
Bạn sẽ nhận thấy rằng mỗi phần tử nằm trên lớp riêng của nó. Các lớp chứa các biểu tượng cho biết loại nội dung nằm trên lớp đó, có thể là hình ảnh, hình dạng, thư mục, v.v. Bạn có thể nhanh chóng hiểu những gì tồn tại trong mỗi lớp. Tất nhiên, bạn có thể kéo các lớp để thay đổi thứ tự của chúng và chuyển đổi mức độ hiển thị bằng cách nhấp vào biểu tượng con mắt.
Bộ trải nghiệm người dùng
Adobe XD đi kèm với bộ công cụ UX giúp dễ dàng tạo ứng dụng gốc cho các nền tảng tìm kiếm của Apple iOS, Windows và Google. Để truy cập các bộ công cụ này, chỉ cần chọn Tệp > Bộ giao diện người dùng mở.
Những bộ công cụ này cung cấp cho bạn quyền truy cập vào các yếu tố giao diện người dùng tiêu chuẩn trên mỗi nền tảng. Điều này sẽ cho phép bạn hình dung ứng dụng của bạn sẽ trông như thế nào trong môi trường gốc của nó. Bạn cũng có thể sử dụng một số thành phần giao diện người dùng tiêu chuẩn này để tiết kiệm thời gian tạo mẫu.
Repeat Grid
Một tính năng rất mạnh mẽ trong Adobe XD là lưới lặp lại. Tạo một hoặc nhiều đối tượng cùng một lúc, sau đó chọn các đối tượng và kích hoạt lưới lặp lại. Bây giờ bạn có thể lặp qua các đối tượng trên trục x và y. Bạn thậm chí có thể điều chỉnh khoảng cách giữa các đối tượng và điều chỉnh hình thức của các đối tượng theo nhóm hoặc riêng lẻ.
Hãy nghĩ về tất cả các tình huống khác nhau mà tính năng này sẽ tự động hóa các tác vụ tẻ nhạt! Ví dụ: đối với bảng hoặc danh sách văn bản và hình ảnh, hãy tưởng tượng một lưới hình ảnh tạo nên bộ sưu tập. Các loại tác vụ trước đây yêu cầu rất nhiều công việc thủ công để có được giao diện mong muốn. Tính dễ sử dụng của Repeat Grid cho phép bạn dành nhiều thời gian hơn để khám phá các tùy chọn bố cục và xem bố cục của bạn sẽ xử lý nhiều dữ liệu hơn như thế nào.
Biểu tượng
Các biểu tượng trong Adobe XD hoạt động giống như các ứng dụng khác như Illustrator hoặc Axure. Nếu bạn có một đối tượng mà bạn muốn sử dụng trên nhiều bảng vẽ, điều này không phổ biến, bạn có thể biến đối tượng đó thành một biểu tượng. Bất kỳ thay đổi nào được thực hiện đối với đối tượng này sẽ được phản ánh ở bất kỳ nơi nào khác trong thiết kế của bạn mà nó được sử dụng. Ví dụ, nếu bạn cần thay đổi màu sắc của một đối tượng, bạn chỉ cần thay đổi nó một lần. Tất cả các phiên bản sẽ được cập nhật trong suốt quá trình thiết kế.
Thư viện đám mây sáng tạo
Là người dùng Creative Cloud, bạn có thể đã chia sẻ các nội dung như màu sắc, kiểu ký tự, hình ảnh và các yếu tố khác trên tất cả các ứng dụng Adobe Creative. Vào tháng 8 năm 2017, Adobe đã cho phép Adobe XD truy cập các nội dung này. Điều này có thể tiết kiệm rất nhiều thời gian nếu bạn sử dụng các sản phẩm như Photoshop hoặc Illustrator để tạo nội dung cho các dự án Adobe XD của mình.
Prototype
Sau khi thiết kế tất cả các bản vẽ, bạn có thể muốn xem ứng dụng của mình sẽ hoạt động như thế nào. Nhấp vào tab Nguyên mẫu ở góc trên bên trái và bạn có thể bắt đầu tạo liên kết giữa các bản vẽ nghệ thuật, sẽ đại diện cho các màn hình trong ứng dụng của bạn. Đây là một giải pháp cực kỳ đơn giản nhưng vô giá và rất mạnh mẽ để xem ứng dụng của bạn hoạt động như thế nào trong thực tế.
Để tạo liên kết giữa các màn hình, hãy chọn bất kỳ đối tượng nào và một mũi tên sẽ xuất hiện ở bên phải hộp giới hạn. Bạn có thể kéo và thả mũi tên này vào một bảng vẽ khác để liên kết nó hoặc nhấp vào nó và chọn từ menu xuất hiện.
Xem trước
Khi bạn liên kết các đối tượng với các bản vẽ khác, bạn có thể chọn cuộn vào hoặc cuộn ra rất dễ dàng. Sau đó, khi mọi thứ được liên kết, bạn có thể nhấp vào nút "Phát" ở góc trên bên phải để xem trước ứng dụng. Ngoài ra, bạn có thể tải xuống ứng dụng XD cho iPhone/Android và xem trước thiết kế của mình trực tiếp trên thiết bị thực bằng USB hoặc qua Creative Cloud.
Cuối cùng, bạn có thể dễ dàng chia sẻ nguyên mẫu của mình bằng cách tạo liên kết trực tiếp từ ứng dụng. Sau khi làm điều này, đồng nghiệp của bạn và các bên liên quan khác sẽ có thể thêm nhận xét vào thiết kế của bạn.
Xuất nội dung
Nếu bạn đang thiết kế một ứng dụng gốc, rất có thể bạn sẽ cần xuất nội dung của mình để bàn giao cho nhà phát triển. Miễn là bạn sử dụng các đối tượng vectơ, bạn có thể thiết kế 1:1 và công cụ sẽ tự động cung cấp các phiên bản 2x và 3x cần thiết cho thiết bị iOS và Android, tùy thuộc vào đầu ra ưa thích của bạn.
3. Hướng dẫn Adobe XD nâng cao
Người đọc hiện đã nắm vững kiến thức cơ bản về Adobe XD CC. Tiếp theo, chuyển sang các tính năng nâng cao. Có rất nhiều hướng dẫn XD tuyệt vời ở đây!
Hướng dẫn chính thức của Adobe XD
Liên kết tham khảo: https://helpx.adobe.com/xd/tutorials.html
Cấp độ khó: **
nội dung:
Khóa học XD giới thiệu: Bao gồm học Adobe XD, bố trí và thiết kế ứng dụng hoặc trang web, tạo và xem trước các nguyên mẫu tương tác, chia sẻ nguyên mẫu để định giá đánh giá và bắt đầu thiết kế với bộ giao diện người dùng.
Thiết lập khóa học dự án: Bao gồm các phần về Bắt đầu một dự án xây dựng, Bắt đầu một dự án xây dựng; Thêm và chỉnh sửa các bảng vẽ; Sử dụng lưới để thiết lập các cột và lề; Căn chỉnh nội dung với lưới; Sử dụng bộ giao diện người dùng; Tạo các bảng vẽ có thể cuộn.
Hướng dẫn XD cho người dùng Photoshop sử dụng Adobe XD và Photoshop Mobile.
Dự án dành cho người mới bắt đầu: Bao gồm các phần về tạo lưới cho thiết kế web, tạo lớp phủ tương tác, tạo biểu tượng từ các hình cơ bản, tạo chuyển tiếp giao diện người dùng, tạo trình chiếu, v.v.
Học hỏi từ các chuyên gia: bao gồm thiết kế UX là gì, vai trò của nhà thiết kế UX, tổng quan về quy trình làm việc của UX, các công cụ dành cho nhà thiết kế UX trong Bộ Công nghiệp, cách bắt đầu một dự án UX? ...
Học Adobe XD
Tìm hiểu về giao diện XD
Sử dụng bảng vẽ và lưới
Thêm nội dung vào lớp
Sử dụng chức năng lưới lặp lại
Thêm tương tác vào các dự án
xuất nội dung
chia sẻ công việc
Thiết kế trang web với Adobe XD
Sử dụng Adobe XD .Không gian làm việc
Tạo và nhập đồ họa
Thêm văn bản và hiệu ứng
Tạo nhiều bố cục màn hình
thiết kế nền tảng di động
Sử dụng lưới để lặp lại các yếu tố
Xây dựng một nguyên mẫu tương tác duy nhất
Xây dựng nguyên mẫu thiết kế toàn bộ trang web
Quay video tương tác
nguyên mẫu được chia sẻ
bản vẽ xuất khẩu
Thiết kế ứng dụng di động với Adobe XD
Xây dựng nhiều màn hình có kích thước khác nhau
Tạo đồ họa và văn bản trong Adobe XD
nhập khẩu đồ họa
Dễ dàng tạo mẫu danh sách và lặp lại các yếu tố với lưới lặp lại
Thêm tương tác vào các yếu tố
Tạo hiệu ứng chuyển tiếp giữa các màn hình
chia sẻ và nhận phản hồi
bản vẽ xuất khẩu
Lưới bố cục đáp ứng
Tạo bố cục đáp ứng trong Adobe XD
4. Plugin tốt nhất cho Adobe XD
Adobe XD đã ra mắt API plug-in của mình vào tháng 10 và ngay sau đó, một số plug-in thú vị khác đã được phát triển để làm cho thiết kế tốt hơn và hiệu quả hơn. Đây là một vài gợi ý!
Mockplus iDoc là một công cụ cộng tác thiết kế sản phẩm mạnh mẽ dành cho các nhà thiết kế và kỹ sư. Mockplus iDoc kết nối toàn bộ quy trình thiết kế sản phẩm theo chuỗi. Plugin giúp lấy các thiết kế từ PS, Sketch, Adobe XD và xuất sang các định dạng có thể tạo đoạn trích, thông số kỹ thuật và nội dung.
ProtoPie - Plugin tương tác: Công cụ tạo mẫu tương tác có độ chính xác cao không cần mã hỗ trợ đầu vào bằng một cú nhấp chuột của Adobe XD và Sketch.
Đổi tên - Đổi tên plugin: Tạo các lớp Adobe XD của riêng bạn, đổi tên hàng loạt các bản vẽ theo trình tự.
UI Faces - Avatar plug-in: có thể tự động điền avatar trong Adobe XD. Người dùng có thể thêm màu sắc, độ tuổi, giới tính, kiểu tóc, v.v…. Nhập hình đại diện của bạn.
Biểu tượng Axhub - plugin mở rộng biểu tượng: Thư viện biểu tượng vector Alibaba chỉ bằng một cú nhấp chuột, không cần tải xuống, định dạng vector có thể chỉnh sửa.
Protopie - Plugin tương tác: Đây là công cụ tạo mẫu tương tác có độ chính xác cao. Protopie hỗ trợ nhập bằng một cú nhấp chuột từ Sketch và Adobe XD. PSD cũng có thể được mở bằng Adobe XD và được nhập bằng một cú nhấp chuột.
5. Bộ công cụ miễn phí Adobe XD
Dưới đây là 14 bộ giao diện người dùng Adobe XD miễn phí tốt nhất. Với những bộ công cụ này, bạn có thể nhanh chóng làm quen với các ứng dụng Adobe trong khi tận dụng các tài nguyên thiết kế XD miễn phí của nó.
Bộ giao diện người dùng Adobe XD miễn phí của Explord: Bộ giao diện người dùng Explord này bao gồm mọi thứ bạn cần để thiết kế blog hoặc trang web danh mục đầu tư.
Bộ công cụ giao diện người dùng web giáo dục cho Adobe XD: Bộ công cụ giao diện người dùng này phù hợp để thiết kế trang web giáo dục và trang web trường học. Bộ công cụ này cũng hoạt động với Adobe Photoshop.
Bộ giao diện người dùng bảng điều khiển dành cho Adobe XD: Bộ giao diện người dùng bảng điều khiển dành cho quản trị viên miễn phí này chứa hơn 100 thành phần, 15 biểu mẫu dữ liệu và hơn 10 trang (bao gồm trang chủ, đăng nhập, email, trang trò chuyện, lịch và hóa đơn).
Bộ giao diện người dùng thương mại điện tử Pawtastic cho Adobe XD: Bộ giao diện người dùng này dành cho thiết kế hoặc tiếp thị trang web thương mại điện tử. Ngoài 35 phần tử giao diện người dùng, nó còn đi kèm với 15 mẫu khung dây miễn phí.
Cactus Free Web UI Toolkit: Nó có thể được sử dụng để xây dựng bất kỳ loại trang web nào và thiết kế của nó rất mới mẻ và đẹp mắt.
Free Dark Adobe XD Styleguide: Mẫu hướng dẫn phong cách Adobe XD miễn phí này giúp người dùng bắt đầu thiết kế web dễ dàng.
Adobe XD Free UI Style Guide: Có sẵn phiên bản sáng và tối, mẫu này chứa nhiều yếu tố web và được xây dựng bằng Bootstrap.
Bộ công cụ khung dây không dây cho Adobe XD: Các mẫu khung dây Adobe XD miễn phí này được thiết kế để nhanh chóng tạo nguyên mẫu cho các trang web hoặc ứng dụng dành cho thiết bị di động. Tổng cộng có 170 mẫu di động, 90 mẫu web, 240 phần tử và 178 biểu tượng.
Bộ khung dây ứng dụng dành cho thiết bị di động miễn phí dành cho Adobe XD: Một bộ công cụ đơn giản để nhanh chóng đưa các ý tưởng ứng dụng di động vào cuộc sống.
Mẫu chủ đề Adobe XD Desktop: Trang web thương mại điện tử và Bảng điều khiển quản trị.
WebKit Wareframes dành cho Adobe XD: Bộ công cụ này giúp dễ dàng nhanh chóng tạo nguyên mẫu bố cục trang web.
Adobe XD Mini Wireframe: Một mẫu thu nhỏ miễn phí tuyệt vời dành cho Adobe XD và Sketch.
Adobe XD Material Design UI Kit: Bộ giao diện người dùng di động Material Design miễn phí có sẵn cho Adobe XD, Sketch hoặc Photoshop.
Bộ công cụ giao diện người dùng miễn phí tiền điện tử: Thiết kế trang web hoặc ứng dụng dành cho thiết bị di động theo chủ đề tiền điện tử, bao gồm tất cả các yếu tố biểu mẫu, đồ thị, biểu đồ phổ biến, v.v.
Nội dung bài viết:
Bình luận