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

(tiếp theo)

Trong bài viết phần 5, ta sẽ tiếp tục tìm hiểu về Wireframe va Propotype. Đây là kĩ thuật quan trọng của các designer theo đuổi thiết kế web. Hi vọng các hướng dẫn ngắn gọn chúng tôi đưa ra sẽ hữu dụng cho bạn!

9. Kết hợp chỉnh sửa các hình khối trong Wireframe

Nhiều thành phần thuộc các bảng vẽ có những đặc điểm giống nhau. Ví dụ: góc tròn, background giữ nguyên, màu chữ. Chúng đều có cạnh hình tròn.

1. Click để mở chế độ Design.

2. Shift+click để chọn hình chữ nhật đứng một mình. Hình này được coi như thành menu ở phía dưới màn hình. Chúng còn là nút Order trong bảng vẽ Your Order và Checkout. Xem hình 22.

3. Đảm bảo biểu tượng Same radius for all corner được chọn. Chỉnh giá trị đến 22 (xem hình 23).

4. Click ra ngoài để bỏ chọn các hình chữ nhật.

5. Shift+click để chọn các hình chữ nhật đại diện cho thanh công cụ ở hầu hết màn hình.

6. Nhấn biểu tượng Fill trong Properties Inspector. Cài đặt giá trị Hex đến #F6F6F6 và bỏ check hộp kiểm tra Border. Xem ảnh 24.

7. Cài đặt giá trị Hex đến #F1323B cho các mục khác là màn hình Your Order và Checkout. Ngừng tính năng Border (xem ảnh 25).

8. Shift+click để chọn nhãn trên các nút. Đặt màu Fill đến #FFFFFF để đổi màu chữ thành trắng (xem ảnh 26).

10. Vận hành chỉnh sửa Wireframe trên Repeat Grid

Thao tác với các thành phần qua Repeat Grid có thể tiết kiệm thời gian khi chỉnh sửa thiết kế lo-fi. Bất cứ chỉnh sửa phong cách nào với Repeat Grid đều được thực hiện toàn cầu.

1. CMD+click bên trong Repeat Grid trên bảng vẽ My Stuff. Chọn hình chữ nhật Rate.

2. Cài đặt Border Radius đến 22. Chú ý rằng các hình chữ nhật trong Repeat Grid đến giờ sẽ có góc tròn. Xem ảnh 27.

3. Cài đặt màu hình nền thành #F1323B và màu chữ thành #FFFFFF. Xem ảnh 28.

4. Áp dụng thay đổi này với tất cả hình chữ nhật trển các bảng vẽ. Xem ảnh 29.

(còn nữa)