Hướng dẫn thiết kế web và UX với Adobe XD từ A đến Z – Tin 24h

Adobe đã đưa phương pháp thiết kế đồ họa huyền thoại của mình vào ko gian UX, với thiết kế Adobe Experience Design hoàn toàn mới – được biết tới nhiều hơn với tên gọi Adobe XD.

Nhiều người tiêu dùng Creative Cloud với thể đã thiết kế UX trong những ứng dụng khác, như Illustrator hoặc thậm chí là Photoshop. Và thời gian này bạn biết thêm Adobe XD cũng là một công cụ để thiết kế UX. Hãy bỏ lại những tính năng tuyệt vời nhưng phần lớn là ko cần thiết của những ứng dụng đồ họa nổi tiếng. 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 wireframe (xương sống) và nguyên mẫu cho ứng dụng, website.

Bắt đầu với Adobe XD

Điều lần đầu bạn sẽ thđấy lúc khởi chạy ứng dụng là màn hình khởi động. Là một người tiêu dùng mới của Adobe XD, bạn thực sự nên nhấp vào nút Begin Tutorial. Tại thời điểm đó, bạn sẽ được đưa tới một màn hình với những bảng giải thích quá trình làm việc với XD.

Thông tin nhanh chóng hướng dẫn bạn những nguyên tắc cơ bản của ứng dụng. Bạn sẽ tìm hiểu nhữngh hoàn thành những tác vụ rất cần thiết như tạo artboard, nhập hình ảnh, sử dụng lưới lặp lại và nhữngh liên kết những artboard với nhau để tạo nguyên mẫu. Nếu bạn là người tiêu dùng Creative Cloud, nhiều yếu tố sẽ dễ hiểu ngay lập tức.

Khi bạn đã xem xong phần hướng dẫn, đã tới lúc tạo một dự án mới. Bạn với thể làm điều này bằng nhữngh tậu File > New. Thao tác này sẽ đưa bạn trở lại màn hình tương tự như Welcome Screen ban đầu. Tại đây, bạn với thể nhanh chóng tậu độ 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 lúc tậu kích thước cho dự án, bạn sẽ được đưa tới 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 là Design và Prototype. Trong tab Design, bạn sẽ xây dựng tất cả những yếu tố trên artboard, với mỗi bản 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 khối hình cơ bản hoặc bạn với thể thêm artboard với sẵn vào ứng dụng.

Các tính năng mạnh mẽ

Adobe XD cung cấp nhiều tính năng mà bạn mong đợi trong một công cụ UX. Nhiều công cụ trong số này sẽ khá quen thuộc, còn một số khác đã được điều chỉnh lại để tư vấn thiết kế UX tốt nhất. Ví dụ, bạn sẽ tìm thđấy những công cụ vẽ hoạt động tương tự với những ứng dụng khác của Adobe. Mặt khác, những layer với một chút khác lạ, cũng để phù hợp với nhữngh thiết kế UX hoạt động.

Bạn sẽ nhận thđấy rằng mỗi phần tử nằm trên một layer riêng của nó. Các layer chứa những biểu tượng cho biết loại nội dung nào nằm trên layer đó, cho dù đó là hình ảnh, hình dạng, thư mục, v.v… Bạn nhanh chóng hiểu được những gì tồn tại trong mỗi layer. Tất nhiên, bạn với thể kéo những layer để thay đổi thứ tự của chúng, và chuyển đổi chế độ hiển thị bằng nhữngh nhấp vào biểu tượng con mắt.

Bộ dụng cụ UX

Adobe XD đi kèm với với bộ dụng cụ UX, giúp bạn dễ dàng tạo ra những ứng dụng gốc cho những nền tảng Apple iOS, Windows và Google. Để truy cập vào những bộ công cụ này, chỉ cần tậu File > Open UI Kits.

Các bộ công cụ này cung cấp cho bạn quyền truy cập vào những phần tử giao diện người tiêu dùng chuẩn, được tìm thđấy với từng nền tảng. Điều này sẽ cho phép bạn mường tượng ứng dụng của bạn trông như thế nào trong môi trường gốc của nó. Bạn cũng với thể sử dụng một số yếu tố giao diện người tiêu dùng chuẩn này để tiết kiệm thời gian lúc tạo mẫu thiết kế của mình.

Repeat Grid

Một tính năng thực sự mạnh mẽ được tìm thđấy trong Adobe XD là Repeat Grid. Hãy tạo một hoặc nhiều mục tiêu một lần, sau đó tậu những mục tiêu và kích hoạt Repeat Grid. Bây giờ bạn sẽ với thể lặp lại những mục tiêu trên cả trục x và trục y. Bạn thậm chí với thể điều chỉnh khoảng nhữngh giữa những mục tiêu và điều chỉnh giao diện của những mục tiêu dưới dạng nhóm hoặc riêng lẻ.

Chỉ cần suy nghĩ về tất cả những kịch bản khác nhau, nơi mà tính năng này sẽ tự động hóa những nhiệm vụ tẻ nhạt! Ví dụ, với một bảng hoặc một danh sách những văn bản và hình ảnh, hãy tưởng tượng một mạng lưới những hình ảnh tạo nên một bộ sưu tập. Các loại tác vụ trước đây yêu cầu rất nhiều nỗ lực thủ công để với được giao diện mong muốn. Sự dễ dàng của Repeat Grid lại cho phép bạn dành nhiều thời gian hơn để khám phá những tùy tậu bố cục và để xem bố cục của bạn sẽ hoạt động như thế nào lúc với nhiều dữ liệu hơn.

Các biểu tượng

Các biểu tượng trong Adobe XD hoạt động theo nhữngh rất giống với những ứng dụng khác, như Illustrator hoặc Axure. Nếu bạn với một mục tiêu mà bạn muốn sử dụng trên nhiều artboard, dù điều này ko phổ biến, bạn với thể biến mục tiêu đó trở thành một biểu tượng. Mọi thay đổi áp dụng cho mục tiêu sẽ được phản ánh ở bất kỳ nơi nào khác mà nó được sử dụng trong thiết kế của bạn. Ví dụ, nếu bạn cần thay đổi màu của mục tiêu, chỉ cần thực hiện thay đổi một lần. Tất cả những phiên bản sẽ được cập nhật trong suốt thiết kế.

Thư viện Creative Cloud

Là người tiêu dùng Creative Cloud, bạn với thể đã chia sẻ những nội dung như màu sắc, kiểu ký tự, hình ảnh và những yếu tố khác trên tất cả những ứng dụng Adobe Creative của mình. Vào tháng 8 năm 2017 Adobe đã cho phép Adobe XD truy cập vào những asset đó. Điều này với thể tiết kiệm rất nhiều thời gian, nếu bạn đang sử dụng những sản phẩm như Photoshop hoặc Illustrator để tạo nội dung cho những dự án Adobe XD của mình.

Prototype

Khi bạn đã thiết kế xong tất cả những bản vẽ của mình, với thể bạn sẽ muốn xem ứng dụng của mình sẽ hoạt động như thế nào. Nhấp vào tab Prototype ở góc trên cùng bên trái, và bạn với thể bắt đầu tạo liên kết giữa những artboard, những thứ sẽ đại diện cho màn hình trong ứng dụng. Đó là một giải pháp siêu đơn thuần nhưng vô giá và rất mạnh mẽ, để xem những ứng dụng của bạn sẽ hoạt động như thế nào trong thực tế.

Để tạo liên kết giữa những màn hình, hãy tậu bất kỳ mục tiêu nào và một mũi tên sẽ xuất hiện ở bên phải của hộp giới hạn. Bạn với thể kéo và thả mũi tên này vào một artboard khác để liên kết nó, hoặc nhấp vào nó và tậu từ menu xuất hiện.

Preview (Xem trước)

Khi bạn liên kết những mục tiêu với những bản vẽ khác, bạn với thể tậu chuyển đổi vào hoặc ra rất dễ dàng. Sau đó, lúc bạn đã liên kết mọi thứ, bạn với thể nhấp vào nút Play ở trên cùng bên phải để xem trước ứng dụng. Ngoài ra, bạn với thể tải xuống ứng dụng XD dành cho iPhone/Android và xem trước thiết kế của bạn trên thiết bị thực tế trong thời gian thực, bằng USB hoặc qua Creative Cloud.

Cuối cùng, bạn với thể dễ dàng chia sẻ những nguyên mẫu của mình bằng nhữngh tạo liên kết trực tiếp từ ứng dụng. Một lúc bạn thực hiện điều này, những đồng nghiệp và những bên liên quan khác sẽ với thể thêm ý kiến cho 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 với thể bạn sẽ cần phải 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 những mục tiêu vector, bạn với thể thiết kế theo tỷ lệ 1:1 và công cụ sẽ tự động cung cấp những phiên bản 2x và 3x mà những thiết bị iOS và Android yêu cầu, tùy thuộc vào tùy tậu xuất của bạn.

Hướng dẫn Adobe XD tăng

Bây giờ, bạn đọc đã nắm được những điều cơ bản về Adobe XD CC. Tiếp theo, hãy chuyển sang tìm hiểu những tính năng tăng. Sau đây là một loạt những hướng dẫn XD tuyệt vời!

1. Adobe XD official tutorial

Link tham khảo: https://helpx.adobe.com/xd/tutorials.html

Mức độ khó: **

Nội dung:

• XD Get Started course (Khóa học bắt đầu với XD): Bao gồm những phần Tìm hiểu về Adobe XD, Bố trí và thiết kế ứng dụng hoặc trang web, Tạo và xem trước những nguyên mẫu tương tác, Chia sẻ nguyên mẫu để mô tả, Bắt đầu thiết kế với bộ dụng cụ UI.
• Set up projects course (Khóa học thiết lập dự án): Bao gồm những phần Bắt đầu một dự án XD, Khởi động những dự án XD; Thêm và chỉnh sửa artboard; Sử dụng lưới để thiết lập cột và lề; Căn chỉnh nội dung với những lưới; Sử dụng bộ công cụ UI; Tạo artboard với thể cuộn.
• XD Tutorials for Photoshop users (Hướng dẫn XD cho người tiêu dùng Photoshop): Bao gồm những phần Khởi động nhanh với Adobe XD cho người tiêu dùng Photoshop, Thiết kế một trải nghiệm landing page với Adobe XD và Photoshop, Thiết kế một trải nghiệm ứng dụng mobile với Adobe XD và Photoshop.
• Beginner projects (Dự án cho người mới bắt đầu): Bao gồm những phần 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ừ những hình dạng cơ bản, Tạo công cụ chuyển đổi giao diện người tiêu dùng, Tạo slide, v.v…
• Learn from the experts (Học hỏi từ những chuyên gia): Bao gồm những phần Thiết kế User Experience (Trải nghiệm người tiêu dùng) 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, Bộ công cụ của nhà thiết kế UX, Bạn bắt đầu một dự án UX như thế nào?…

2. “Learning Adobe XD”

Link tham khảo: https://www.lynda.com/Adobe-Experience-Design-tutorials/Learning-Adobe-XD/578095-2.html

Mức độ khó: **

Nội dung:

• Tìm hiểu giao diện XD
• Sử dụng artboard và lưới
• Thêm nội dung vào layer
• Sử dụng tính năng Repeat Grid
• Thêm tính tương tác cho dự án
• Xuất nội dung
• Chia sẻ tác phẩm

3. “Designing Websites with Adobe XD”

Link tham khảo: https://www.lynda.com/Experience-Design-tutorials/Designing-Prototyping-Website-Adobe-XD/586674-2.html

Mức độ khó: ***

Nội dung:

• Sử dụng ko gian làm việc Adobe XD
• 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ế cho nền tảng mobile
• Sử dụng lưới lặp lại những yếu tố
• Xây dựng nguyên mẫu tương tác đơn
• 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 tiêu dùng chung
• Xuất artboard

4. “Designing Mobile Applications with Adobe XD”

Link tham khảo: https://www.lynda.com/Experience-Design-tutorials/Designing-Prototyping-Mobile-App-Adobe-XD/586673-2.html

Mức độ khó: ***

Nội dung:

• Xây dựng nhiều màn hình với kích thước khác nhau
• Tạo đồ họa và văn bản trong Adobe XD
• Nhập đồ họa
• Tạo nguyên mẫu danh sách và lặp lại những yếu tố dễ dàng với Repeat Grid
• Thêm tính tương tác vào một yếu tố
• Tạo hiệu ứng chuyển tiếp giữa những màn hình
• Chia sẻ và nhận phản hồi
• Xuất artboard

5. “Responsive Layout Grid”

Mức độ khó: ****

Nội dung: Tạo bố cục hoàn thành trong Adobe XD

Các plugin tốt nhất cho Adobe XD

Adobe XD đã ra mắt API plugin vào tháng 10 và ko lâu sau đó, một số plugin tuyệt vời khác cũng được phát triển, với thể giúp thiết kế tốt và hiệu quả hơn. Dưới đây là một vài gợi ý!

1. 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 những nhà thiết kế và kỹ sư. Mockplus iDoc giúp kết nối toàn bộ quy trình thiết kế sản phẩm. Plugin này tạo điều kiện thuận lợi để lđấy những thiết kế từ PS, Sketch, Adobe XD và xuất thành định dạng với thể tạo những snippet, thông số kỹ thuật và asset.

2. ProtoPie – Plugin tương tác: Công cụ tạo nguyên mẫu tương tác với độ chính xác cao ko cần code tư vấn Adobe XD và Sketch với tính năng nhập một phím.

3. Rename it – Plugin đổi tên: Tạo layer Adobe XD của riêng bạn, đổi tên hàng loạt artboard theo thứ tự.

4. UI Faces – Plugin avatar: Có thể tự động điền avatar trong Adobe XD. Người tiêu dùng với thể thêm màu sắc, tuổi tác, giới tính, kiểu tóc, v.v…. vào avatar của mình.

5. Axhub Icons – Plugin tăng thêm biểu tượng: Thư viện biểu tượng vector Alibaba chỉ với một cú nhấp chuột, ko cần tải xuống, định dạng vector với thể chỉnh sửa được.

6. Protopie – Plugin tương tác: Đây là một công cụ tạo nguyên mẫu tương tác với độ chính xác cao. Protopie tư vấn Sketch và Adobe XD với tính năng nhập bằng một cú nhấp chuột. PSD cũng với thể được nhập với một cú nhấp chuột sau lúc mở bằng Adobe XD.

Bộ công cụ miễn phí Adobe XD

Dưới đây là 14 bộ công cụ Adobe XD UI miễn phí tốt nhất. Với những bộ công cụ này, bạn với thể nhanh chóng làm quen với những ứng dụng Adobe trong lúc tận dụng những tài nguyên thiết kế XD miễn phí của chúng.

1. Explord’s free Adobe XD UI toolkit: Bộ công cụ Explord UI này bao gồm mọi thứ bạn cần để thiết kế blog hoặc trang web portfolio.

2. Educational Web UI Toolkit for Adobe XD: Bộ công cụ UI này phù hợp để thiết kế trang web giáo dục và website cho trường học. Bộ công cụ này cũng hoạt động với Adobe Photoshop.

3. Dashboard UI Toolkit for Adobe XD: Bộ công cụ UI với bảng điều lúcển quản lý 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 Home, đăng nhập, email, trò chuyện, lịch và hóa đơn).

4. Pawtastic e-commerce UI toolkit for Adobe XD: Bộ công cụ UI này tiêu dùng để thiết kế trang web thương mại điện tử hoặc tiếp thị. Ngoài 35 thành phần UI, nó đi kèm với 15 template wireframe miễn phí.

5. Cactus Free Web UI Toolkit: Có thể được sử dụng để xây dựng bất kỳ loại trang web nào, thiết kế của nó rất mới mẻ và đẹp mắt.

6. Free Dark Adob e XD Styleguide: Template hướng dẫn kiểu Adobe XD miễn phí này giúp người tiêu dùng dễ dàng bắt đầu thiết kế web.

7. Adobe XD Free UI Style Guide: Template này với sẵn ở cả phiên bản sáng và tối màu, chứa nhiều yếu tố web và được xây dựng với Bootstrap.

8. Wireless Wireframe Suite for Adobe XD: Các template wireframe Adobe XD miễn phí này đã được tạo để nhanh chóng xây dựng những nguyên mẫu cho trang web hoặc ứng dụng mobile. Có tổng cùng 170 template cho mobile, 90 template cho web, 240 yếu tố và 178 biểu tượng.

9. Free mobile app wireframe kit for Adobe XD: Bộ dụng cụ đơn thuần giúp nhanh chóng biến ý tưởng ứng dụng mobile thành hiện thực.

10. Adobe XD desktop thread template: Trang web thương mại điện tử và bảng điều lúcển quản lý.

11. WebKit Wareframes for Adobe XD: Bộ công cụ này giúp dễ dàng và nhanh chóng xây dựng những nguyên mẫu bố cục trang web.

12. Mini Wireframe for Adobe XD: Một template vi mô miễn phí tuyệt vời cho Adobe XD và Sketch.

13. Adobe XD Material Design UI toolkit: Bộ công cụ UI mobile Material Design miễn phí với thể được sử dụng trong Adobe XD, Phác thảo hoặc Photoshop.

14. Cooin Crypto Free UI Toolkit: Thiết kế trang web hoặc ứng dụng mobile với theme tiền điện tử, bao gồm tất cả những yếu tố hình thức phổ biến, đồ họa, biểu đồ, v.v…

Xem thêm: