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

(tiếp theo)

Trong bài viết phần hai, chúng ta sẽ tiếp tục tao Propotype chuẩn xác. Trước hết bạn cần nghiên cứu tạo ra mẫu Wireframe hữu dụng. Các tip chúng tôi đưa ra sẽ hỗ trợ bạn thực hiện tốt điều đó.

2. Tạo Propotype chuẩn xác với Wireframe

Bây giờ, chúng ta đã nhận diện các bước nói chung. Chúng ta có thể bắt đầu tạo một thiết kế chuẩn xác cao. Quá trình này sẽ diễn ra thuận lợi trên Adobe XD.

Ở bước này, chúng ta lập kệ hoạch cho ứng dụng ở mức macro. Điều đó có nghĩa là hãy nghĩ về tiến trình bao quát. Cụ thể là từ màn hình đến màn hình hay kết nối micro giữa các thành phần riêng lẻ.

Adobe XD bao gồm nhiều UI Kits có thể đưa cho bạn nút khởi động. Với ứng dụng Dishy, chúng ta bắt đầu từ bản nháp để tạo thiết kế và propotype chuẩn thấp. Trong mục này, chúng ta thiết kế Welcome Screen và Search Results. Kiểu màn hình này sẽ tạo ấn tượng đầu tiên cho cả tiến trình. Cuối cùng, ta sẽ có bản chuẩn xác thấp của propotype.

3. Tạo Wireframe với các hình khối cơ bản

Welcome Screen bao gồm tên app, công cụ tìm kiếm text, biểu tượng tìm kiếm giọng nói. Ngoài ra, ta còn cần văn bản giới thiệu, thanh menu ở dưới. Bạn có thể tạo thiết kế lo-fi (chuẩn thấp) bằng cách dùng hình khối cơ bản. Bạn cũng hãy sử dụng text điều chỉnh.

1. Mở Adobe Experience Design  CC.

2. Chọn kích cỡ thiết bị phù hợp từ Welcome Screen. Hoặc gõ một Custom Size.

Chú ý: Phần mẫu trong bài thực hiện trên IPhone 6.

3. Click hai lần vào bảng vẽ mặc định. Đặt tên chúng là Welcome Screen. Nhấn Return (xem ảnh mình họa 3).

 

 

 

4. Chọn công cụ Rectangle trên bảng công cụ phía bên trái. Click và kéo để đặt chúng chính xác ở giữa bảng vẽ. Đây sẽ là nút điều chỉnh cho phần tìm kiếm.

5. Chọn hình chữ nhật với công cụ Selection (V). Sử dụng CMD+D để nhân đôi hình chữ nhật. Sau đó, kéo xuống phía cuối trang để làm nút điều chỉnh cho bảng menu. Giữ Shift khi kéo để giữ sự cân đối (xem ảnh 4).

6. Vẽ một hình vuông/vòng tròn nhỏ cho biểu tượng voice search phía bên cạnh thanh tìm kiếm.

7. Copy văn bản điều chỉnh từ web và dán chúng vào Welcome Screen. Đặt đoạn text giữa công cụ search và thanh menu.

Chú ý: Adobe XD sẽ thêm đoạn text được sao chép. Phần text này bạn hoàn toàn có thể chỉnh sửa kích thước và vị trí nếu cần. Xem ảnh 5 để biết chi tiết.

8. Chọn File > Save để đặt tên và lưu file vào máy tính.

(còn nữa)