Download pptx - Crap principles

Transcript
Page 1: Crap principles

CRAP Principles

Page 2: Crap principles

Which is better? Why?

Page 3: Crap principles

Why?

• Contrast (tương phản)• Repetitive (Lặp lại)• Alignment (Căn lề)• Proximity (Nhóm)

Page 4: Crap principles

Proximity

Page 5: Crap principles

Proximity

Page 6: Crap principles

Proximity

Page 7: Crap principles

Proximity

Page 8: Crap principles

Proximity

Page 9: Crap principles

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ớ.

Page 10: Crap principles

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

Page 11: Crap principles

Proximity – Ứng dụng

Page 12: Crap principles

Proximity – Ứng dụng

Page 13: Crap principles

Proximity – Ứng dụng

Page 14: Crap principles

Proximity – Ứng dụng

• Hỗ trợ của Vatgia

Page 15: Crap principles

Alignment

Page 16: Crap principles

Alignment

Page 17: Crap principles

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.

Page 18: Crap principles

Alignment

Page 19: Crap principles

Alignment

Page 20: Crap principles

Alignment

Page 21: Crap principles

Alignment

Page 22: Crap principles

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,…

Page 23: Crap principles

Alignment – Ứng dụng

Page 24: Crap principles

Alignment – Ứng dụng

Page 25: Crap principles

Alignment – Ứng dụng

• Grid-based design

Page 26: Crap principles

Repetitive

Page 27: Crap principles

Repetitive

Page 28: Crap principles

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.

Page 29: Crap principles

Contrast

Page 30: Crap principles

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.

Page 31: Crap principles

Contrast - ứng dụng

Page 32: Crap principles

Contrast - ứng dụng

Page 33: Crap principles

Contrast - ứng dụng

• Sản phẩm Vatgia• Sản phẩm Bảo Kim

Page 34: Crap principles

Thao khảo

• Non-designer’s design book• Từ khóa: CRAP Principles

Page 35: Crap principles

Cont…

• Webform design• Gamification• Storytelling

Page 36: Crap principles

Thuật ngữ

• Fold-line• Liquid-layout vs Fixed layout• Bread-crumb• Navigation: megamenu, multi-line menu.

Page 37: Crap principles

Thank you

Trần Quang KiênSkype: TrqkienEmail: [email protected]