[Mẹo Adobe XD Free] Review Wireframe/mockup Dễ Hơn Với Tool ...

Menu

Toggle

• Giới thiệu
• Tình huống review wireframe/mockup mà Business Analyst thường dùng.
• Mẹo mà Hoàng hay sài
  • Đặc điểm:
  • Cách cài đặt và sử dụng:
  • Cách comment
  • Áp dụng cho chia sẻ Wireframe từ Balsamiq.
• Kết luận

Giới thiệu

Mình là một user của Adobe XD, phải nói là cực kỳ thích sài ẻm. Bắt đầu sử dụng từ phiên bản Beta đầu tiên tên ”Adobe Experience Design CC” vào tháng 03/2016, và còn sài đến hiện tại với tên chính thức là Adobe XD.

Mình sài Adobe XD từ việc làm đồ án thời sinh viên, đến khi đi làm thì sài ẻm trong công việc hằng ngày, đặc biệt là với công việc Business Analyst. Và ngay cả những lúc làm freelancer với anh em cũng mang XD ra để thiết kế dạng product design cho các dự án của team. Và cái hay của Adobe XD là được sử dụng miễn phí với phiên bản Starter Plan.

Nên khi đi làm việc mình sử dụng quen và thích sài XD là một chuyện thường tình. Trong lúc làm dự án với anh em trong công ty, mọi người thì sài Axure, mình thì sài XD nên không đồng bộ được, nên mình lên chị google tìm cách đồng bộ các source từ 2 bên với nhau – chưa kịp tìm được cách đồng bộ source, thì vô tình mình lượm được mẹo review wireframe/mockup dễ hơn khi kết nối XD và Axure Cloud.

Lưu ý là bài viết này dành cho những bạn thích sài XD (miễn phí) và muốn sử dụng thêm mẹo này, thay vì sài những công cụ có sẵn như Figma (miễn phí và trả phí), Axure (trả phí),…hoặc chính bản gốc Axure XD Share (bị giới hạn cho phiên bản Starter)

Tình huống review wireframe/mockup mà Business Analyst thường dùng.

Dưới đây là những tình huống review wireframe/mockup hay gặp:

• Gặp khách hàng/đồng nghiệp (KH/ĐN) trực tiếp, mở file lên để review
• Gửi nguyên file source cho KH/ĐN để họ mở trên phần mềm của họ và xem (điều không được hay đó là có thể khách hàng có thể không sài chung phần mềm với mình, do đó họ không mở được luôn, nên sẽ có trường hợp sài cách thứ 3 và thứ 4 dưới đây)
• Export file hình ảnh/pdf và gửi cho khách hàng để họ xem và đánh giá trên hình ảnh, có thể là note comment ngay trên hình ảnh luôn.
• Copy hình bỏ vô file word offline hoặc docs online cho khách hàng xem và review với tính năng comment trên word/docs (hoặc tool công cụ như excel,…).
• Export ảnh ra và copy ảnh lên phần mềm cho phép review online (Ví dụ như Axure, Invision,…)
• Sử dụng tính năng sharing and reviewing của công cụ đó (Ví dụ như Adobe XD Share designs and collaborate, Balsamiq sharing and collaborating) – nhưng công cụ này sài nhiều có trả phí.

Đối với bản thân mình thì từng sử dụng tất cả các cách trên, và mình dần dần chuyển đổi dần qua cách mới tốt hơn. Và mẹo mình chia sẻ ở bài viết này chính là cái mình thấy tiện và dễ sử dụng nhất, do đó chia sẻ cho anh em để dùng thử, biết đâu lại thích như mình.

Note: Bạn đọc nào chưa sài 1 trong 6 cách trên thì comment ở dưới, mình viết hướng dẫn cụ thể cho nhé.

Mẹo mà Hoàng hay sài

Đây là một tính năng trên Axure Cloud – gọi là Publishing Artboard Projects, tính năng này giúp user publish source từ các phần mềm khác: Sketch, Adobe XD, Figma, lên Axure Cloud và chia sẻ cho những thành viên khác, và có cả chia sẻ public – được comment không cần tài khoản Axure Cloud (Đây là điểm khác so với Figma).

Đặc điểm:

• Hoàn toàn miễn phí (adobe XD starter + Axure Cloud)
• Được sài XD theo mong muốn của bạn (giống mình, thay vì sài các tool tương tự)
• Chia sẻ wireframe/mockup dễ dàng, dễ review/comment trực tuyến
• Không bắt buộc đăng nhập để comment
• Dễ quản lý source (vì gửi qua gửi lại, nhiều khi lộn giữa các file source)
• Không bị giới hạn sharing của Adobe XD Starter- Share Links: 1 active shared link

Cách cài đặt và sử dụng:

• Bước 1: Cài đặt Adobe XD phiên bản Starter (miễn phí) – tải tại đây
• Bước 2: Cài Axure Cloud Desktop (miễn phí) – tải tại đây
• Bước 3: Đăng nhập XD và Axure Cloud (chưa có tài khoản thì tự tạo nhé)
• Bước 4: Tải plugin the Axure plugin for XD
• Bước 5: Trong XD, chọn artboard muốn chia sẻ để publish lên Axure Cloud.

• Bước 6: Trên top menu, chọn Plugins > Axure > Export Selection to Axure Cloud. (Lưu ý là phải mở app Axure Cloud trước nha, không mở nhiều khi lỗi không hoạt động được)

• Bước 7: Trong Axure Cloud App, bạn chọn workspace và artboard project mà muốn publish lên. Nếu chưa có sẵn thì bạn tạo mới “Create New Project” và đặt tên dự án “Project Name” – và lưu ý bạn chọn Project size cho phù hợp nhé, ví dụ thiết kế ở size Iphone 12 thì chọn iPhone 12 (390 x 844)
• Bước 8: Nhấn Upload, sau đó chia sẻ cho KH/ĐN để comment – và ở đây bạn cũng có thể chia sẻ với mật khẩu (Access Code) hoặc dạng private cho tài khoản cụ thể.

Bạn có thể test project mình share ở đây: https://nnsbdq.axshare.com/start.html – mật khẩu là “hoangphan”

Cách comment

Làm theo như hình:

Bước 1: Nhấn vào icon comment

Bước 2: Nhấn Add comment

Bước 3: Chấm 1 điểm bằng click chuột trái vào vị trí muốn comment

Bước 4: Add comment

Bước 5: Nhấn Post

Bước 6: Bạn có thể comment bởi đăng nhập hoặc a guest (điền email bất kỳ)

Bước 7: Team review tất cả, sau đó BA hoặc các bên khác có thể update lại wireframe/mockup

Bước 8: Mark Resolved các comment nào đã được giải quyết, hoặc delete comment.

Áp dụng cho chia sẻ Wireframe từ Balsamiq.

Cơ bản thì mình copy image từ Basamiq qua XD, rồi share lên Axshare để mọi người có thể thảo luận và comment trên đó. Các bước mình thường thực hiện như sau:

• Bước 1: Chọn vùng cần copy trên balsamiq

• Bước 2: Nhấn Command + C (trên MacOS) để copy vùng chọn. (Đọc thêm phần hướng dẫn export/copy image ở hướng dẫn ở balsamiq để biết thao tác trên Windows nhé, xưa mình nhớ phím tắt nó phải 3 nút lận mới copy được)
• Bước 3: Nhấn Command + V (trên MacOS) để paste hình ảnh lên XD

Mình trình bày ở XD như sau:

• Bước 4: Share lên Axure Cloud như hướng dẫn ở trên (Project Size thì chọn Auto Web), sau đó copy link gửi cho KH/ĐN

Tham khảo mình share project demo từ Balsamiq lên Axshare: https://50wmtz.axshare.com/start.html#g=14

Đọc thêm về sử dụng Balsamiq Mockup 3 miễn phí (dùng key – không cần crack)

Đọc thêm Balsamiq Wireframe miễn phí - công cụ cho Business Analyst

Kết luận

Phía trên là mẹo sử dụng Axure Cloud để chia sẻ wireframe/mockup đến ĐN/KH để dễ dàng review và comment cho một Business Analyst. Giảm thiểu chi phí cho cá nhân người sử dụng khi được sử dụng miễn phí cả Adobe XD Starter và Axure Cloud, khi mà công ty các bạn không/chưa hỗ trợ trả phí cho việc sử dụng phần mềm trả phí.

Dĩ nhiên có nhiều công cụ, tính năng tương tự nhưng đây là mẹo dành riêng cho Adobe XD Starter, đặc biệt là đối với các bạn thích dùng Adobe XD Starter giống mình.

Alternative app:

• Adobe XD – sharing (9.99$/mo)
• Figma (Free or 12$/mo)
• Axure (25$/mo)
• Sketch (9$/mo)
• Invisionapp (Free or 7.95$/mo)
• Balsamiq Mockup

Post Views: 361