CRAP Principles
Which is better? Why?
Why?
• Contrast (tương phản)• Repetitive (Lặp lại)• Alignment (Căn lề)• Proximity (Nhóm)
Proximity
Proximity
Proximity
Proximity
Proximity
Proximity
• Proximity là việc nhóm các đối tượng liên quan lại gần nhau khiến giao diện có bố cục chặt chẽ (organized), tạo ra nhiều không gian hơn (white space). Từ đó, người dùng dễ theo dõi và ghi nhớ.
Proximity – How to get it?
• 3 – 5 nhóm (tùy độ phức tạp). Nếu nhiều hơn, cần nhóm tiếp 2 nhóm liên quan.
• Khoảng cách giữa các group > khoảng cách giữa cách thành phần của group.
• 2 yếu tố gần nhau nghĩa là có quan hệ với nhau.• Cần tránh– Không chia nhỏ giao diện thành quá nhiều phần
(nhóm)– Không đặt 2 yếu tố không liên quan cạnh nhau
Proximity – Ứng dụng
Proximity – Ứng dụng
Proximity – Ứng dụng
Proximity – Ứng dụng
• Hỗ trợ của Vatgia
Alignment
Alignment
Alignment
• Alignment là phương pháp căn lề giúp bố cục giao diện chặt chẽ và thống nhất giúp người dùng giảm thời gian duyệt thông tin và gợi cảm giác thoải mái.
Alignment
Alignment
Alignment
Alignment
Alignment – How to get it?
• Không đặt một item mới vào giao diện tùy tiện, tìm một item nào khác để là mốc căn lề.
• Tránh dùng nhiều điều kiện căn lề trên 1 trang. Nếu cần dùng thì phải trành dùng cùng “căn lề giữa”.
• Tránh dùng căn lề giữa, trừ trường hợp thiết kế các mẫu formal dùng trong các trường hợp đặc biệt như: present, thiệp cưới,…
Alignment – Ứng dụng
Alignment – Ứng dụng
Alignment – Ứng dụng
• Grid-based design
Repetitive
Repetitive
Repetitive
• Repetitive là cách sử dụng lặp lại các yếu tố: font chữ, bố cục, icon, cách thể hiện hình khối (shape, texture)… khiến các giao diện trở nên thống nhất, tăng tính nhận diện thương hiệu.
Contrast
Contrast
• Contrast là thủ thuật thể hiện khác nhau các item trên giao diện, khiến giao diện bố cục tốt hơn và gợi cảm giác thú vị khi duyệt trang.
• Font: độ dày, màu, shapes, size, space,…• Thường designer rất ngại thể hiện contrast• Nguyên tắc: 2 item “khác nhau” hãy thể hiện
chúng khác nhau.
Contrast - ứng dụng
Contrast - ứng dụng
Contrast - ứng dụng
• Sản phẩm Vatgia• Sản phẩm Bảo Kim
Thao khảo
• Non-designer’s design book• Từ khóa: CRAP Principles
Cont…
• Webform design• Gamification• Storytelling
Thuật ngữ
• Fold-line• Liquid-layout vs Fixed layout• Bread-crumb• Navigation: megamenu, multi-line menu.
Thank you
Trần Quang KiênSkype: TrqkienEmail: [email protected]