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

Adobe đã đưa tuyệt kỹ thiết kế đồ họa huyền thoại của tôi vào không gian UX, với thiết kế Adobe Experience Design hoàn toàn mới – được biết đến nhiều hơn thế nữa với tên gọi Adobe XD.

Nhiều người tiêu dùng Creative Cloud rất có thể đã thiết kế UX trong những ứng dụng khác, như Illustrator hoặc thậm chí là Photoshop. Và giờ đâ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à không rất 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 gọn tạo wireframe (xương sống) và nguyên mẫu cho ứng dụng, website.

Thiết kế giao diện web với Adobe XD cho người mới

  • Bắt đầu với Adobe XD
  • những tính năng mạnh mẽ
  • Bộ dụng cụ UX
  • Repeat Grid
  • những hình tượng
  • Thư viện Creative Cloud
  • Prototype
  • Preview (Xem trước)
  • Xuất nội dung
  • Hướng dẫn Adobe XD nâng cao

    • 1. Adobe XD official tutorial
    • 2. “Learning Adobe XD”
    • 3. “Designing Websites with Adobe XD”
    • 4. “Designing Mobile Applications with Adobe XD”
    • 5. “Responsive Layout Grid”
  • những plugin tốt nhất cho Adobe XD
  • Bộ công cụ miễn phí Adobe XD

Bắt đầu với Adobe XD

Bắt đầu vơi Adobe XD

Điều trước tiên những bạn sẽ thấy khi 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 đó, những bạn sẽ được mang đến một màn hình với những bảng giải thích quy trình làm việc với XD.

Thông tin nhanh gọn hướng dẫn bạn những nguyên tắc cơ bản của ứng dụng. những bạn sẽ tìm hiểu cách hoàn thành những tác vụ quan trọng như tạo artboard, nhập hình ảnh, sử dụng lưới lặp lại và cách link 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.

Các yếu tố trong Adobe XD

Khi bạn đã xem xong phần hướng dẫn, đang đi đến lúc tạo một dự án công trình mới. bạn cũng rất có thể làm điều này bằng phương pháp chọn File > New. Thao tác này sẽ đưa bạn quay về màn hình giống như như Welcome Screen lúc đầu. Tại đây, bạn cũng rất có thể nhanh gọn 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 website hoặc nhập giá trị cho kích thước tùy chỉnh.

Sau khi chọn kích thước cho dự án công trình, những bạn sẽ được mang đến 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, những bạn sẽ xây dựng toàn bộ 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ông giống nhau. XD cũng cung ứng một số công cụ vẽ để tạo khối hình cơ bản hoặc bạn cũng rất có thể thêm artboard có sẵn vào ứng dụng.

những tính năng mạnh mẽ

Adobe XD cung ứng 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 để hỗ trợ thiết kế UX tốt nhất. Ví dụ, những bạn sẽ tìm thấy những công cụ vẽ hoạt động giống như với những ứng dụng khác của Adobe. Mặt khác, những layer có một chút khác lạ, cũng để thích hợp với cách thiết kế UX hoạt động.

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

nhữ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ó. những layer chứa những hình 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 gọn hiểu được những gì tồn tại trong những layer. Tất nhiên, bạn cũng rất có thể kéo những layer để thay đổi thứ tự của chúng, và chuyển đổi cơ chế hiển thị bằng phương pháp nhấp vào hình tượng con mắt.

Bộ dụng cụ UX

Adobe XD kèm theo 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ỉ việc chọn File > Open UI Kits.

Bộ công cụ UX

những bộ công cụ này cung ứng 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ẽ được chấp nhận bạn hình dung ứng dụng của bạn trông ra sao trong môi trường gốc của nó. Bạn cũng rất có 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 khi tạo mẫu thiết kế của tôi.

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 đối tượng một lần, sau đó chọn những đối tượng và kích hoạt Repeat Grid. giờ đây những bạn sẽ rất có thể lặp lại những đối tượng trên cả trục x và trục y. Bạn thậm chí rất có thể điều chỉnh khoảng cách giữa những đối tượng và điều chỉnh giao diện của những đối tượng dưới dạng nhóm hoặc riêng lẻ.

Repeat Grid

chỉ việc suy nghĩ về toàn bộ những kịch bản không giống 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 ra một bộ sưu tập. những loại tác vụ trước đây yêu cầu rất nhiều nỗ lực thủ công để có được giao diện mong muốn. Sự dễ dàng của Repeat Grid lại được chấp nhận bạn dành nhiều thời gian hơn để khám phá những tùy chọn bố cục và để xem bố cục của những bạn sẽ hoạt động ra sao khi có nhiều dữ liệu hơn.

những hình tượng

những hình tượng trong Adobe XD hoạt động theo cách rất giống với những ứ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 artboard, dù điều này không phổ biến, bạn cũng rất có thể biến đối tượng đó trở thành một hình tượng. Mọi thay đổi áp dụng cho đối tượng 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 đối tượng, chỉ việc triển khai thay đổi một lần. toàn bộ những phiên bản sẽ được update trong suốt thiết kế.

Thư viện Creative Cloud

Là người tiêu dùng Creative Cloud, bạn cũng rất có thể đã san 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 toàn bộ những ứng dụng Adobe Creative của tôi. Vào tháng 8 năm 2017 Adobe đã được chấp nhận Adobe XD truy cập vào những asset đó. Điều này rất có 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 công trình Adobe XD của tôi.

Thư viện Creative Cloud

Prototype

Khi bạn đã thiết kế xong toàn bộ những bản vẽ của tôi, rất có thể những bạn sẽ muốn xem ứng dụng của tôi sẽ hoạt động ra sao. Nhấp vào tab Prototype ở góc trên cùng bên trái, và bạn cũng rất có thể bắt đầu tạo link 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 cực kỳ đơn giản nhưng vô giá và rất mạnh mẽ, để xem những ứng dụng của những bạn sẽ hoạt động ra sao trong thực tại.

Để tạo link giữa những 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 của hộp giới hạn. bạn cũng rất có thể kéo và thả mũi tên này vào một artboard khác để link nó, hoặc nhấp vào nó và chọn từ menu xuất hiện.

Propotype

Preview (Xem trước)

Khi bạn link những đối tượng với những bản vẽ khác, bạn cũng rất có thể chọn chuyển đổi vào hoặc ra rất đơn giản dàng. Sau đó, khi bạn đã link mọi thứ, bạn cũng rất có 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 cũng rất có thể tải xuống ứng dụng XD dành riêng cho iPhone/Android và xem trước thiết kế của bạn trên thiết bị thực tại trong thời gian thực, bằng USB hoặc qua Creative Cloud.

sau cùng, bạn cũng rất có thể dễ dàng san sẻ những nguyên mẫu của tôi bằng phương pháp tạo link trực tiếp từ ứng dụng. Một khi bạn triển khai điều này, những đồng nghiệp và những bên liên quan khác sẽ rất có thể thêm ý kiến cho thiết kế của bạn.

Xuất nội dung

Xuất nội dung

Nếu bạn đang thiết kế một ứng dụng gốc, rất rất có thể những bạn sẽ cần phải xuất nội dung của tôi để bàn giao cho nhà phát triển. Miễn là bạn sử dụng những đối tượng vector, bạn cũng rất có thể thiết kế theo tỷ lệ 1:1 và công cụ sẽ tự động cung ứng 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 chọn xuất của bạn.

Hướng dẫn Adobe XD nâng cao

giờ đây, 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 nâng cao. tiếp sau này là một loạt những hướng dẫn XD tuyệt vời!

1. Adobe XD official tutorial

Link xem thêm: 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): gồm có những phần Tìm hiểu về Adobe XD, Bố trí và thiết kế ứng dụng hoặc website, Tạo và xem trước những nguyên mẫu tương tác, san sẻ nguyên mẫu để đánh giá, 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 công trình): gồm có những phần Bắt đầu một dự án công trình XD, Khởi động những dự án công trình 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 rất có thể cuộn.
  • XD Tutorials for Photoshop users (Hướng dẫn XD cho người tiêu dùng Photoshop): gồm có 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 di động với Adobe XD và Photoshop.
  • Beginner projects (dự án công trình cho người mới bắt đầu): gồm có những phần Tạo lưới cho thiết kế web, Tạo lớp phủ tương tác, Tạo hình 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 viên): gồm có 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 công trình UX ra sao?…

Adobe XD official tutorial

2. “Learning Adobe XD”

Link xem thêm: 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 công trình
  • Xuất nội dung
  • san sẻ tác phẩm

3. “Designing Websites with Adobe XD”

Link xem thêm: https://www.lynda.com/Experience-Design-tutorials/Designing-Prototyping-website-Adobe-XD/586674-2.html

Mức độ khó: ***

Nội dung:

  • Sử dụng không 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 di động
  • 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ộ website
  • Quay video tương tác
  • Nguyên mẫu dùng chung
  • Xuất artboard

"Designing Websites with Adobe XD"

4. “Designing Mobile Applications with Adobe XD”

Link xem thêm: 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 có kích thước không giống 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
  • san sẻ và nhận phản hồi
  • Xuất artboard

"Designing Mobile Applications with Adobe XD"

5. “Responsive Layout Grid”

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

Nội dung: Tạo bố cục đáp ứng trong Adobe XD

những plugin tốt nhất cho Adobe XD

Adobe XD đã ra mắt API plugin vào tháng 10 và không lâu sau đó, một số plugin tuyệt vời khác cũng được phát triển, rất có thể giúp thiết kế tốt và kết 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 riêng 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 rất có 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 có độ chính xác cao không cần code hỗ trợ 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: rất có thể tự động điền avatar trong Adobe XD. người tiêu dùng rất có 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 tôi.

5. Axhub Icons – Plugin mở rộng hình tượng: Thư viện hình tượng vector Alibaba chỉ với một cú nhấp chuột, không cần tải xuống, định dạng vector rất có 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 có độ chính xác cao. Protopie hỗ trợ Sketch và Adobe XD với tính năng nhập bằng một cú nhấp chuột. PSD cũng rất có thể được nhập với một cú nhấp chuột sau khi 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 cũng rất có thể nhanh gọn làm quen với những ứng dụng Adobe trong những 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 không tính tiền Adobe XD UI toolkit: Bộ công cụ Explord UI này gồm có mọi thứ bạn cần để thiết kế blog hoặc website portfolio.

2. Educational Web UI Toolkit for Adobe XD: Bộ công cụ UI này thích hợp để thiết kế website 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 có bảng điều khiể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 (gồm có trang Trang chủ, đă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 dùng để thiết kế website thương mại điện tử hoặc tiếp thị. Ngoài 35 thành phần UI, nó kèm theo với 15 template wireframe miễn phí.

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

6. không tính tiền 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 không tính tiền UI Style Guide: Template này có 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: những template wireframe Adobe XD miễn phí này đã được tạo để nhanh gọn xây dựng những nguyên mẫu cho website hoặc ứng dụng di động. Có tổng số 170 template cho di động, 90 template cho web, 240 yếu tố và 178 hình tượng.

9. không tính tiền mobile app wireframe kit for Adobe XD: Bộ dụng cụ đơn giản giúp nhanh gọn biến ý tưởng phát minh ứng dụng di động thành hiện thực.

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

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

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 di động Material Design miễn phí rất có thể được sử dụng trong Adobe XD, Phác thảo hoặc Photoshop.

14. Cooin Crypto không tính tiền UI Toolkit: Thiết kế website hoặc ứng dụng di động với theme tiền điện tử, gồm có toàn bộ những yếu tố hình thức phổ biến, đồ họa, biểu đồ, v.v…

Xem thêm:

  • Thiết kế website động với mã nguồn Drupal 7
  • 12 mẫu HTML5 tuyệt đẹp những nhà thiết kế web không nên bỏ qua
  • Thiết kế website bằng phần mềm Adobe Dreamweaver CS5
  • UI UX là gì? Sự khác lạ giữa thiết kế UI và UX
  • Đánh giá bộ dụng cụ vặn ốc vít đa năng Bosch 46 chi tiết 2607019504
  • Hướng dẫn tạo một website cho người mới bắt đầu
  • Thiết kế website bằng phần mềm Adobe Dreamweaver CS5 – Phần 1
Thứ Tư, 27/03/2019 19:21
4,416 👨 41.117
0 comment

Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
xem thêm thêm
  • Hướng dẫn sử dụng hệ điều hành Windows XP cho người mới bắt đầu
  • Hướng dẫn thiết lập LAMP trên Ubuntu cho người mới bắt đầu
  • Cách chơi cờ Tướng cơ bản
  • Hướng dẫn sử dụng Google Wallet cho người mới bắt đầu
  • Hướng dẫn đào Bitcoin cho người mới bắt đầu
  • Hướng dẫn tạo một website cho người mới bắt đầu
  • Hướng dẫn vào Deep Web cho người mới
Bài viết mới nhất
  • Tết Đoan Ngọ là ngày nào? Cúng Tết Đoan Ngọ gồm những gì? Tết Đoan Ngọ là ngày nào? Cúng Tết Đoan Ngọ gồm những gì?
  • Nước nào đăng cai Euro 2021? EURO 2021 tổ chức ở đâu? Nước nào đăng cai Euro 2021? EURO 2021 tổ chức ở đâu?
  • File JPG (JPEG) là gì? File JPG (JPEG) là gì?
  • 4 cách thay đổi loại tài khoản người dùng trong Windows 10 4 cách thay đổi loại tài khoản người tiêu dùng trong Windows 10
  • Những sự thật thú vị về Malaysia có thể bạn chưa biết Những thực sự thú vị về Malaysia rất có thể bạn không không chắc chắn
  • Những câu cổ vũ bóng đá, stt cổ vũ bóng đá hay nhất dành tặng đội tuyển Việt Nam Những câu cổ vũ bóng đá, stt cổ vũ bóng đá hay nhất dành tặng đội tuyển Việt Nam
Thiết kế – Đồ họa
  • 11 công cụ miễn phí hỗ trợ việc tạo Infographic đơn giản hơn 11 công cụ miễn phí hỗ trợ việc tạo Infographic đơn giản hơn
  • Làm chữ lửa cháy, chữ bốc lửa trên website Làm chữ lửa cháy, chữ bốc lửa trên website
  • Adobe Systems trình làng Photoshop Elements 8 Adobe Systems trình làng Photoshop Elements 8
  • Quản lý ảnh với phần mềm ACDSee Pro Quản lý ảnh với phần mềm ACDSee Pro
  • Tạo các đường viền nghệ thuật cho ảnh Tạo những đường viền nghệ thuật cho ảnh
  • Học Photoshop bằng tiếng Việt Học Photoshop bằng tiếng Việt
  • Cách thêm website WordPress vào Adobe Dreamweaver CS6 Cách thêm website WordPress vào Adobe Dreamweaver CS6
  • Chỉnh sửa ảnh nhanh gọn và miễn phí Chỉnh sửa ảnh nhanh gọn và miễn phí
  • Chuyển định dạng flash thành gif dùng trong website với magic swf2gif Chuyển định dạng flash thành gif dùng trong website với magic swf2gif

Xem thêm