Wireframe - bí quyết tạo Propotype với độ chuẩn xác cao (P4) - 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 (P4)

(tiếp theo)

Trong phần 4, chúng ta tiếp tục tìm hiểu thao tác tạo Propotype với Wireframe. Sử dụng Adobe Experience, bạn sẽ thấy các bước vô cùng đơn giản. Phần mềm cung cấp cho bạn đủ tiện ích để tạo ra sản phẩm chuẩn xác nhất!

6. Hoàn thành thiết kế lo-fi của Wireframe

Sử dụng các thao tác ở phần trước để hoàn thành thiết kế lo-fi. Các thiết kế này nhằm phục vụ các bảng vẽ vẫn được duy trì của ứng dụng. Hoặc, bạn có thể mở Step6.xd từ file thiết kế. Trong đó bao gồm tất cả các thiết kế lo-fi hoàn chỉnh cho phần mềm Dishy. Xem ảnh 15 để hình dung rõ hơn.

7. Cài đặt các tương tác căn bản cho Wireframe

Bạn đã hoàn thành tất cả thiết kế lo-fi cho toàn bộ bảng vẽ? Bạn có thể báo cho ứng dụng để mô phỏng tương tác giữa các màn hình.

Bạn có thể chọn đường bao (chọn kéo chuột) hoặc Shift+select. Thao tác này sẽ giúp bạn chọn nhiều bảng vẽ cùng lúc và di chuyển chúng. Ngoài ra, bạn nên nhấn nút Arrange hoặc chọn trên menu để sắp xếp các bảng vẽ được chọn.

Bạn cũng được phép dùng file Step7.xd. Hình minh họa 16 là một cách sắp xếp hợp lí.

8. Vận hành thay đổi các kiểu Wireframe

Một lần nữa, chúng ta lại nghĩ về khoảng thời gian ở mức macro. Hãy cài đặt điều hướng chung từ màn hình sang màn hình, từ hot spot sang màn hình tiếp theo. Bằng cách này, bạn có thể kiểm tra sự vận hành chung của ứng dụng. Đặc biệt, bạn không cần quá nặng nề về các chi tiết nhỏ.

Chú ý: Một lợi ích nữa của việc sử dụng Repeat Grid qua thiết kế lo-fi là tạo nhóm thành phần. Điều này được thực hiện thay cho việc thao tác trên từng thành phần riêng lẻ. Bạn sẽ tiết kiệm được thời gian khi kiểm tra tiến trình chung của phần mềm.

Adobe XD cho phép bạn lựa chọn 5 kiểu tương tác giữa các màn hình:

  • Slide Left.
  • Slide Right.
  • Slide Up.
  • Slide Down.
  • Dissolve.

Bạn cũng có thể điều chỉnh độ dễ và quá trình chuyển đổi. Adobe XD sẽ cài đặt mặc định tới lựa chọn bạn sử dụng nhiều gần nhất. Vì vậy, ứng dụng có thể được viết nhanh hơn nếu bạn vận hành cùng lúc nhiều chuyển đổi của cùng loại.

Ví dụ, nếu bạn có 5 tương tác cần thực hiện Slide Up và Ease In For. Chỉ cần 4 giây, bạn có thể thực hiện chúng tuần tự.

1. Click Propotype (hay Ctrl+Tab) để vào chế độ Propotype.

2. Click vào hình chữ nhật lớn ở phía trên bảng vẽ Welcome Screen.

3. Click mũi tên xanh ở bên phải. Kéo đến khi bạn kết nối được với bảng vẽ Search Results.

4. Cài đặt các giá trị Slide Up, Ease In và 4s. Xem hình 17.

5. Chọn bảng vẽ Customize Order.

6. Click mũi tên xanh và kéo đến khi kết nối với bảng vẽ Your Order. Cài đặt hiện tại sẽ giống với lựa chọn gần nhất của bạn (xem ảnh 18).

7. Tạo các tương tác giống nhau giữa các bảng vẽ dưới đây:

  • Welcome Screen (thanh menu) đến My Stuff.
  • My Stuff (lưới lặp lại món ăn) đến Foodies.
  • Foodies (lưới lặp lại nhà hàng) đến Rate.

8. Chọn Edit > Select All (hoặc CMD+A). Qua đó, tất cả các lựa chọn được đưa ra sẽ hiện lên màn hình (xem ảnh 19).

9. Kết hợp tất cả bảng vẽ như bạn mong muốn.

10. Nhân Preview. Click vào tất cả màn hình để kiểm tra Propotype.

Nếu cần sửa lỗi, bạn có thể làm mà không cần đóng cửa sổ Preview. Hãy cứ thực hiện thay đổi cần thiết với Propotype. Cập nhật sẽ lập tức có tác dụng trên bản xem thử.

Chú ý: Hãy đảm bảo đã kiểm tra hướng dẫn Tạo liên kết giữa các propotype.Bạn sẽ hình dung rõ hơn các thao tác tạo, kiểm tra, chia sẻ Propotype trên Adobe XD.

Thêm các chi tiết cuối cùng cho Wireframe

Thiết kế bây giờ nhìn có vẻ rất căn bản. Song, Adobe XD có rất nhiều hiệu ứng thẩm mĩ để nhanh chóng tạo ra sản phẩm độ chuẩn cao.

(còn nữa)