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

(tiếp theo)

Trong bài viết phần 3, chúng ta sẽ tiếp tục đến với các bước tạo Wireframe. Chỉ cần sử dụng Adobe XD cùng hỗ trợ của Experience, việc này thật dễ dàng. Như đã thấy, hướng dẫn chúng tôi đưa ra rất ngắn gọn, đơn giản. Mong rằng với chúng, bạn sẽ thực hành hiệu quả hơn.

4. Nhân đôi bảng vẽ cho Wireframe

Rất nhiều màn hình trong app sẽ giữ nguyên ổn định tài nguyên qua tất cả các wireframe màn hình. Ví dụ, thanh menu và tiêu đề sẽ giữ nguyên qua phần lớn màn hình của Dishy.

Thay vì vẽ lại chúng mỗi lần mở bảng vẽ mới, hãy vẽ một bản và nhân đôi chúng liên tục. App Dishy mẫu có hai màn hình ( Welcome Screen và My Stuff). Chúng luôn có thanh menu ở phía cuối. Vì chúng tôi đã tạo Welcome Screen, hãy tạo ra màn hình My Stuff.

1. Nhấn vào tiêu đề bảng vẽ Welcome Screeen. Giữ phím OTP. Kéo chúng về bên phải để nhân đôi bảng vẽ.

2. Click hai lần vào tiêu đề và thay đổi chúng thành My Stuff.

3. Sử dụng công cụ Select. Kéo và chọn tìm kiếm bằng text, voice search và văn bản điều chỉnh. Chúng nằm ở màn hình Search Results mới. Nhấn Delete (xem ảnh 6).

Thành phần duy nhất còn lại là hình chữ nhật phía cuối trang. Nó được coi như thanh menu.

Sáu màn hình sẽ có tiêu đề phía trên cũng như thanh menu phía dưới.

1. Tạo một bản nhân đôi của bảng vẽ My Stuff ở bên phải. Đặt tên cho bảng vẽ mới là Set Location.

2. Vẽ một hình chữ nhật dọc theo phần trên và để nó duỗi theo chiều rộng bảng vẽ. Nó được coi như nút điều chỉnh cho thanh tiêu đề.

3. Click biểu tượng Align Top để căn chỉnh hình chữ nhật với phần đầu bảng vẽ. Đảm bảo hình chữ nhật vẫn được chọn (xem hình thứ 7).

4. Nhân đôi bảng vẽ Set Location thành 5 bảng vẽ nữa. Chúng cũng cần có tiêu đề trên đầu và thanh menu ở cuối.

5. Đặt tên các bảng vẽ lần lượt là: Search Results, Customize Order, Your Order, Foodies và Check-out (xem ảnh 8).

5. Thiết kế Wireframe với Repeat Grid

Công cụ Repeat Grid thường được sử dụng để lặp lại các nhóm đồ vật trên màn hình. Với thiết kế lo-fi trên Adobe XD, bạn cũng cần tới Repeat Grid. Nó sẽ giúp bạn tiết kiệm thời gian căn chỉnh hình ảnh wireframe. Hoặc bạn cũng có thể đặt lưới lặp lại bên trong lưới lặp lại khác.

Màn hình Search Results bao gồm một nhóm đồ vật lặp lại dưới màn hình. Mỗi nhóm bao gồm một ảnh về bữa ăn, mô tả, giá, khoảng cách và biểu tượng rating, Biểu tượng rating, 5 ngôi sao, có thể coi như lưới lặp lại để căn chỉnh dễ dàng hơn.

Hãy tạo ra môt nhóm đồ vật đại diện hàng đầu.

1. Click vào tiêu đề Search Results để chọn bảng vẽ đó. Sử dụng CMD+ để phóng to giúp xem bảng vẽ rõ hơn.

2. Vẽ điều chỉnh phía dưới của bảng vẽ Search Results để nối dài. Thao tác này sẽ giúp thiết kế có tính năng cuộn để xem nội dung bên dưới cạnh bình thường của bảng vẽ.

Một đường nét xuất hiện cho thấy nội dung sẽ cuộn đến xa hơn phần có thể nhìn thấy được.

3. Vẽ một hình chữ nhật ngay dưới thanh tiêu đề. Nó nên trải dài theo chiều rộng bản vẽ và cao gấp 4 lần thanh tiêu đề (xem ảnh 10).

4. Chọn công cụ Text. Thêm văn bản chỉnh sửa (ví dụ: Meal 1) ở góc trên bên phải hình chữ nhật.

5. Thêm text vào góc trên bên phải hình chữ nhật. Và thêm một giá điều chỉnh (ví dụ: $12).

6. Vẽ hình vuông nhỏ phía dưới text điều chỉnh món ăn. Giữ Shift trong khi vẽ để có được hình vuông hoàn hảo. Bạn có thể xem lại W và H trong Property Inspector để xác nhận kích thước. Đây sẽ là đại diện cho ngôi sao đầu tiên trong phần rating (xem ảnh 11).

7. Click Repeat Grid trong khi hình vuông vẫn đang được chọn.

8. Kéo nút điều chỉnh màu xanh ở bên phải cho đến khi 5 hình vuông được tạo. Xem hình 12.

9. Đặt trỏ chuột giữa hai hộp. Dừng lại khi chúng được kéo gần nhau (xem ảnh 13).

10. Kéo trỏ chuột để chọn nhóm các hình chữ nhật, năm hình vuông và text. Đảm bảo bạn không gom cả thanh tiêu đề phía trên chúng.

11. Chọn Object > Group (CMD+G) để nhóm các thành phần.

12. Nhấn Repeat Grid.

13. Kéo nút điều chỉnh màu xanh xuống dưới chiều dài bảng vẽ.

14. Đặt trỏ chuột giữa hai nhóm đồ vật. Kéo để điều chỉnh khoảng cách giữa các lưới đồ vật (xem ảnh 14).

(còn nữa)