Giấy sáng. Mực đậm. Giao diện rõ ràng.
Paper & Ink là ngôn ngữ giao diện cho sản phẩm cần rõ ràng và tập trung vào nội dung: nền sáng, chữ có thứ bậc, số liệu dễ quét và khoảng trắng được dùng có chủ đích. Hệ này làm điểm xuất phát cho trang web mới; bố cục và thành phần sẽ được điều chỉnh theo nhiệm vụ thật của từng sản phẩm.
Tác giả: tuanvungtau · Bản guideline 1.0
Tải skill MarkdownNguyên tắc
Mỗi màn hình cần giúp người dùng đọc, so sánh hoặc thao tác nhanh. Thứ bậc đến từ nội dung, cỡ chữ và căn chỉnh; không cần nhiều lớp trang trí.
Tiêu đề, nội dung, số liệu và hành động có vai trò thị giác riêng.
Nhóm liên quan gần nhau; nội dung dùng hết bề ngang hợp lý.
Nền giấy, một bề mặt phụ và đường kẻ mảnh là đủ để phân nhóm.
Giấy & mực
Tông trung tính giữ cho nội dung nổi bật. Màu trạng thái chỉ xuất hiện khi nó giúp nhận biết một việc cần chú ý.
#FFFFFF#F5F5F5#E8E8E8#181818#454545#626262#D6D6D6#FCEAEA · #8A3030Chữ dễ đọc
Hanken Grotesk tạo giọng giao diện gần gũi, gọn; Chivo Mono dành cho số liệu cần so sánh. Luôn kiểm tra font và dấu tiếng Việt sau khi tải thật.
Ặng Ữ Ỗ Ợ Ẫ Ẹ Ỷ Ỵ
Chữ có nhịp rõ ở cả tiêu đề lẫn mô tả. Giữ heading vừa phải và cho đoạn văn dùng hết chiều ngang của vùng nội dung.
Số dùng tabular numerals khi cần quét theo cột.
Không gian làm việc
Căn trái phần đọc và chia cột theo nhiệm vụ. Với công cụ nhập liệu, sidebar sáng nhạt có thể trải sát lề cạnh vùng kết quả trắng; trên màn hẹp, các vùng xếp thành cột tự nhiên.
HỒ SƠ / ĐIỀU KHIỂN
VÙNG KẾT QUẢ
Nội dung đứng trên khung
Mô tả sử dụng toàn chiều rộng khả dụng. Lưới co theo nội dung, không giữ cột desktop khi màn hình hẹp.
SPACING THAM CHIẾU · 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64
Điều khiển
Dùng một nút chính cho hành động quan trọng. Liên kết gạch chân làm nhiệm vụ phụ; lựa chọn đã chọn đảo nền sang mực để thấy trạng thái ngay.
Phản hồi nhẹ
Motion báo hiệu trạng thái và đưa mắt tới nội dung mới. Chuyển động không được làm layout nhảy, che chữ hoặc cản thao tác; giảm motion theo cài đặt thiết bị.
Hover và phản hồi điều khiển
Reveal nội dung nhẹ
Khi bật reduced motion
Giữ tinh thần Paper & Ink; điều chỉnh màu, lưới và thành phần theo brand cùng nhiệm vụ thật của mỗi sản phẩm.
Tải file skill