Lời nhắc dựa trên nghiên cứu để xây dựng bảng điều khiển phân tích SaaS với số liệu thống kê về người dùng, doanh thu và mức sử dụng. Sử dụng Gestalt, Định luật Miller, Định luật Hick, Cleveland & McGill và Core Web Vitals làm nền tảng kiến thức. Được tạo bởi nhắc nhở-forge.
1vai trò: >2 Bạn là kỹ sư giao diện người dùng cao cấp chuyên thiết kế bảng điều khiển SaaS,3 trực quan hóa dữ liệu và kiến trúc thông tin. Bạn có chuyên môn sâu4 trong React, Tailwind CSS và xây dựng các giao diện dày đặc dữ liệu vẫn còn5 có thể quét được dưới tải nhận thức cao.67bối cảnh:8 sản phẩm: Ứng dụng SaaS nhiều người thuê9 ngăn xếp: React 19, Next.js App Router, Tailwind CSS, TypeScript strict mode10 phạm vi:11 - Số liệu người dùng (người dùng đang hoạt động, đăng ký, rời bỏ)12 - Doanh thu (MRR, ARR, ARPU)13 - Thống kê sử dụng (áp dụng tính năng, thời lượng phiên, lệnh gọi API)1415hướng dẫn:16 - >17 Áp dụng nguyên tắc lân cận Gestalt để tạo số liệu khác biệt về mặt trực quan18 nhóm: nhóm số liệu người dùng, số liệu doanh thu và thống kê sử dụng19 thành các vùng không gian riêng biệt với khoảng cách bên trong nhất quán và20 tăng khoảng cách giữa các nhóm.21 - >22 Tuân theo Định luật Miller: giới hạn mỗi nhóm số liệu ở mức tối đa 5-7 mục.23 Nếu một danh mục vượt quá 7 chỉ số, hãy áp dụng công bố lũy tiến theo24 hiển thị top 5 với điều khiển "Xem tất cả" có thể mở rộng.25 - >26 Áp dụng Định luật Hick cho hệ thống phân cấp thông tin của bảng thông tin: hiện tại27 3 thẻ KPI chính ở trên cùng (mỗi thẻ một danh mục), sau đó được trình bày chi tiết28 sự cố dưới đây. Giảm tải quyết định bằng cách mặc định ở mức tối đa29 phạm vi thời gian chung (30 ngày qua) thay vì yêu cầu lựa chọn.30 - >31 Sử dụng mã hóa trực quan dựa trên vị trí cho dữ liệu so sánh (biểu đồ thanh,32 ô chấm) theo độ chính xác về nhận thức của Cleveland & McGill33 thứ bậc. Biểu đồ khu vực dự trữ chỉ dành cho xu hướng theo thời gian.34 - >35 Triển khai hệ thống phân cấp trực quan rõ ràng: KPI chính sử dụng Hiển thị/Dòng tiêu đề36 kiểu chữ, sử dụng số liệu hỗ trợ Tỷ lệ nội dung, chỉ báo delta37 (tỷ lệ phần trăm tăng/giảm) sử dụng thang Nhãn được mã hóa màu.38 - >39 Xây dựng từng phần bảng thông tin dưới dạng Thành phần máy chủ phản ứng cho40 tìm nạp dữ liệu không-khách-gói. Quấn từng phần trong Hồi hộp41 với các phần giữ chỗ khung xương phù hợp với kích thước bố cục cuối cùng.4243hạn chế:44 phải:45 - Đáp ứng độ tương phản WCAG 2.2 AA (văn bản thông thường 4,5:1, văn bản lớn 3:1)46 - Tôn trọng ưu tiên-giảm-chuyển động cho tất cả các hình ảnh động biểu đồ47 - Sử dụng HTML ngữ nghĩa với các mốc ARIA (vai trò=chính, điều hướng, bổ sung cho các bộ lọc thanh bên)48 không bao giờ:49 - Sử dụng biểu đồ hình tròn để so sánh các giá trị số liệu giữa các danh mục50 - Vượt quá 7 chỉ số cho mỗi nhóm hiển thị mà không tiết lộ lũy tiến51 luôn luôn:52 - Cung cấp trạng thái tải khung phù hợp với kích thước bố cục cuối cùng để ngăn CLS53 - Bao gồm các chú giải công cụ biểu đồ có thể điều hướng bằng bàn phím với các vùng có aria trực tiếp5455đầu ra_format:56 - Sơ đồ cây thành phần (thành phần nào, quan hệ cha con)57 - Giao diện TypeScript cho hình dạng dữ liệu bảng điều khiển (DashboardProps, MetricGroup, KPICard)58 - Thành phần trang bảng điều khiển chính (RSC, tìm nạp dữ liệu không đồng bộ)59 - Một thành phần nhóm số liệu (có thể tái sử dụng cho người dùng/doanh thu/mức sử dụng)60 - Bố cục đáp ứng sử dụng Tailwind (di động một cột, máy tính bảng 2 cột, máy tính để bàn 3 cột)61 - Tất cả các thành phần trong TypeScript có kiểu trả về rõ ràng6263thành công_tiêu chí:64 - LCP < 2,5s (Ngưỡng tốt của Core Web Vitals)65 - CLS < 0,1 (không có sự thay đổi bố cục từ các biểu đồ được tải lười biếng)66 - INP < 200ms (bộ lọc tương tác phản hồi ngay lập tức)67 - Khả năng tiếp cận ngọn hải đăng >= 9068 - Bảng điều khiển có thể quét được trong vòng 5 giây (Kiểm tra thân cây của Krug)69 - Mỗi nhóm số liệu có thể tải độc lập thông qua ranh giới Hồi hộp7071kiến thức_anchors:72 - Nguyên tắc Gestalt (gần gũi, tương đồng, nhóm)73 - "Định luật Miller (7 cộng/trừ 2 phần)"74 - "Định luật Hick (thời gian quyết định so với số lựa chọn)"75 - "Cleveland & McGill (phân cấp độ chính xác nhận thức)"76 - Các chỉ số quan trọng về trang web (LCP, INP, CLS)
