Wireframe - bí quyết tạo Propotype với độ chuẩn xác cao (P6) - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Wireframe – bí quyết tạo Propotype với độ chuẩn xác cao (P6)

(tiếp theo)

Trong phần 6, cũng là phần cuối, ta sẽ cùng hoàn thành Wireframe. Như các bạn đã thấy, Adobe Experience và Adobe XD vô cùng tiện ích cho thiết kế web. Qua đó, bạn được hỗ trợ để tạo ra sản phẩm dễ dàng, chuyên nghiệp. Mong rằng với các tip sau đây, bạn sẽ đủ tự tin chinh phục các dự án trong tương lai.

11. Sử dụng hình khối làm công cụ điều chỉnh ảnh trong Wireframe

Hình khối căn bản như hình tròn hay chữ nhật có thể được coi như nút chỉnh sửa của ảnh. Kéo và thả hình ảnh từ Finder vào từng hình khối riêng lẻ. Bạn cũng có thể thả chúng vào các hình khối được nhóm bằng Repeat Grid để chỉnh sửa thiết kế.

Bạn có thể kéo một ảnh đơn vào một hình khối và nó sẽ làm đầy hình khối. Mở Finder và điều hướng thư mục bài tập bạn vừa lưu vào máy tính. Kéo các hình ảnh sau từ Finder:

 map1.png đến bảng vẽ Set Location (xem hình 30).

CustomizedOrder_page.png đến bảng vẽ Customize Order.

profileImage đến bảng vẽ My Stuff.

6_bbqschrimp đến bảng vẽ Foodies (xem bảng 31).

Bạn có thể copy và paste hình ảnh svg, ví dụ như sao rating, từ Illustrator:

1. Mở file icons_all.ai trong Illustrator. Sử dụng CMD+A, sau đó là CMD+C để chọn tất cả các biểu tượng. Sau đó, bạn có thể copy chúng lên trình chiếu.

2. Trở lại Adobe XD. Sử dụng CMD+V để dán biểu tượng lên bảng dán (vùng trống màu xám xung quanh bảng vẽ). Xem hình 32.

3. Click vào bộ biểu tượng. Nhấn CMD+C để copy chúng.

4. Click hình vuông nhỏ trong Repeat Grid trên màn hình Search Results. Sử dụng CMD+V để paste chúng (xem hình 33).

5. Giữ Shift và kéo nút điều chỉnh để thay đổi kích thước ngôi sao. Trong khi đó, hãy căn chỉnh cho ngôi sao vừa với hình vuông nhỏ. Xem ảnh 34.

6. Sử dụng phím mũi tên để di chuyển biểu tượng nếu cần (xem hình 35).

7. Chọn Repeat Grid quản lí kết quả khảo sát và nhấn Ungroup Grid.

8. Xóa tất cả trừ nhóm đầu tiên với các ngôi sao được cập nhật.

9. Nhóm lại các thành phần. Nhấn Repeat Grid và kéo để tạo danh sách với biểu tượng được cập nhật. Xem ảnh 36.

Bạn có thấy thư mục SearchResults_page trong file luyện tập của Finder? Kéo cùng lúc nhiều ảnh từ đó đến Repeat Grid trên bảng Search Results. Xem ảnh 37.

Thêm các ảnh được lặp lại liên tục vào bảng vẽ sau. Xem ảnh 38.

  • Your Order.
  • My Stuff.
  • Foodies.
  • Rating stars.

Chú ý: Trong một số trường hợp, tôi không muốn phong cách lưới lặp lại áp dụng toàn cầu. Ví dụ, sao rating ở bảng vẽ Filter Selected sẽ có màu khác. Vì vậy, việc đầu tiên là bỏ nhóm Repeat Grid. Và sau đó, chọn một màu mới cho ngôi sao nếu cần. Xem ảnh 39.

12. Hoàn thành thiết kế Wireframe của bạn

Rất nhiều kĩ thuật bạn cần để tạo thiết kế chuẩn xác cao đã được nhắc tới. Tạo phần mềm cho mobile sẽ chỉ cho bạn nhiều thao tác hơn, bao gồm:

  • Tạo kiểu văn bản.
  • Sử dụng Boolean Operation để vẽ biểu tượng.
  • Copy và paste ảnh từ Photoshop hay Illustrator.

13. Cập nhật các tương tác cho Wireframe

Mặc dù tương tác trong Propotype có thể không bị ảnh hưởng, bạn sẽ cần cập nhật một số thứ. Ví dụ, thay vì viết ở mức macro, bạn có thể tạo tương tác từ thành phần đơn lẻ. Ví dụ: kết nối từ thanh tìm kiếm hay nút nào đó đến bảng vẽ khác.

Chú ý: Xem clip trong Tạo Propotype tương tác để có nhiều tip hơn cho tương tác của sản phẩm. Xem ảnh 40.

Kết luận

Thông tin trong bài viết dựa chủ yếu theo bài báo  Going from Lo-fi to Hi-fi in Adobe XD’s Preview Release của Elaine Chao Finnell. Bài báo của Elaine sẽ có nhiều hơn các thông tin. Bạn có thể xem để tham khảo!

Chúc các bạn thành công!