Hướng dẫn design

Trong bài viết này chúng mình sẽ đi qua về design guidelines

Màu sắc

• Màu xanh dương BL300 được sử dụng cho các liên kết
• Màu xanh lá cây GL300 cho các hành động đã thực hiện thành công
• Màu cam OL300 cho các cảnh báo
• Màu đỏ RL300 cho các lỗi

Font

• Đối với các text thông thường ta có các thông số font size - line height tương ứng như sau
  • xxxsmall:10px - 14px
  • xxsmall: 11px - 16px
  • xsmall: 12px - 16px
  • small: 14px - 18px
  • normal: 15px - 20px
  • large: 16px - 22px
  • xlarge: 18px - 24px
• Đối với tiêu đề cần được in đậm, các thông số font size - line height lần lượt là
  • xsmall: 15px - 22px
  • small: 16px - 22px
  • normal: 20px - 26px
  • large: 24px - 30px
  • xlarge: 27px -34px
• Trên đây là tham khảo kích thước chữ cho đầu mục, mô tả của nút bấm, văn bản thông thường, văn bản nhỏ, và phụ đề.

Font color

• Sử dụng NL300 cho nội dung chính
• NL700 cho nội dung phụ, ghi chú, thời gian
• Sử dụng NL500 cho các đoạn lớn của văn bản mô tả tạo thành một phần của nội dung chính.

Button

• Button hành động bậc 1 (Primary Action) mang một vẻ ngoài nổi bật để hướng người dùng thực hiện hành động quan trọng nhất.
• Button hành động bậc 2 (Secondary Action) là button thứ cấp của Primary Button, nó kém nổi bật hơn và thường đi cùng để làm nổi bật button hành động bậc 1.
• Button hành động bậc 3T (Tertiary Action), đúng như số thứ tự, đây là nút điều hướng với vẻ ngoài kém nổi bật và ít quan trọng nhất, dùng để điều hướng những thứ “bình thường” ít quan trọng.

Thanh điều hướng phía dưới

Bạn có thể thêm bottom bar vào Mini App của mình để dễ dàng điều hướng giữa các chức năng và trang chính. Bạn nên xem xét và cân nhắc số lượng tab sử dụng ở bottom bar không nên vượt quá 4 để không rơi vào trường hợp khó nhận dạng được icon hoặc khó nhấn vào vùng chọn mong muốn.

Icon

• Kích thước icon phổ biến là 16, 24, 32, 40 và 48 (pt).
• Sử dụng màu LG300 đối với các icon bình thường.
• Sử dụng màu BL300 đối với các icon được lựa chọn.
• Màu LG700 được sử dụng đối với các icon bị vô hiệu.

Input components

• Chiều cao của các input components là 48px
• Tiêu đề của các input components có font size 15px và line height 20px

Tham khảo