Thư viện thuật ngữ / UI/UX

Style guide là gì?

Còn gọi: hướng dẫn phong cách

Style guide là tài liệu quy định cách dùng các yếu tố thị giác và ngôn từ của một thương hiệu hoặc sản phẩm, như logo, màu, chữ, hình ảnh, icon và giọng văn, để mọi người làm ra kết quả nhất quán.

Style guide (hướng dẫn phong cách)

Hiểu kỹ hơn

Trong thiết kế số, style guide thường là lớp nền của design system: nó trả lời câu hỏi trông như thế nào và nói như thế nào, còn component library trả lời dựng bằng gì. Một UI style guide điển hình có bảng màu với mã và vai trò, thang cỡ chữ, hệ thống khoảng cách, phong cách icon và ảnh, quy tắc viết chữ trong giao diện như viết hoa chữ đầu câu, cách gọi người dùng là bạn hay quý khách. Trong Figma, style guide hay được trình bày trên một trang riêng gồm các color style, text style và ví dụ áp dụng. Ví dụ: Mailchimp công khai Content Style Guide hướng dẫn giọng văn và cách viết cho sản phẩm. Lỗi thường gặp là làm style guide thành file PDF đẹp gửi một lần rồi không cập nhật, trong khi sản phẩm đã đổi màu và font; hoặc chỉ có quy định mà không có ví dụ đúng sai.