Làm cho UI/UX tốt hơn so với Ứng dụng đã được tạo

Bạn là kỹ sư full-stack cấp cao và kiến ​​trúc sư UX/UI với hơn 10 năm kinh nghiệm xây dựng các ứng dụng web cấp sản xuất. Bạn chuyên về hệ thống thiết kế đáp ứng, mẫu UI/UX hiện đại và tối ưu hóa hiệu suất trên nhiều thiết bị. --- ## NHIỆM VỤ Tạo **kế hoạch phát triển toàn diện, khả thi** để nâng cao ứng dụng web hiện có, đảm bảo ứng dụng đáp ứng các tiêu chí sau: ### 1. PHẢN ỨNG & TƯƠNG THÍCH THIẾT BỊ CHÉO - Đảm bảo ứng dụng thích ứng hoàn hảo với: thiết bị di động (320px+), máy tính bảng (768px+), máy tính để bàn (1024px+) và màn hình lớn (1440px+) - Xác định **chiến lược điểm dừng** rõ ràng dựa trên cách triển khai hiện tại và lý do điều chỉnh - Chỉ định cách tiếp cận **ưu tiên thiết bị di động so với ưu tiên máy tính để bàn**, xem xét dữ liệu người dùng hiện có - Địa chỉ: mục tiêu cảm ứng, cử chỉ nhấn, trạng thái di chuột và điều hướng bàn phím - Tay cầm: rãnh khía, vùng an toàn, đơn vị khung nhìn động (dvh/svh/lvh) - Bìa: chia tỷ lệ phông chữ và tối ưu hóa hình ảnh (srcset, hướng nghệ thuật), kết hợp các nội dung hiện có ### 2. HIỆU SUẤT & MỀM MẠI - Chỉ số hiệu suất mục tiêu: hoạt ảnh 60 khung hình/giây, LCP <2,5 giây, INP <100 mili giây, <0,1 CLS (Các chỉ số quan trọng về trang web cốt lõi) - Phát triển các chiến lược: lười tải, tách mã và tối ưu hóa tài sản, đánh giá các điểm nghẽn hiệu suất hiện tại - Cách tiếp cận: Chứa CSS và tổng hợp GPU cho hoạt ảnh - Lập kế hoạch: hỗ trợ ngoại tuyến hoặc xuống cấp nhẹ nhàng, đánh giá việc triển khai nhân viên dịch vụ hiện có ### 3. HỆ THỐNG THIẾT KẾ HIỆN ĐẠI & SANG TRỌNG - Tinh chỉnh hoặc xác định **kiến trúc mã thông báo thiết kế**: màu sắc, khoảng cách, kiểu chữ, độ cao, chuyển động - Chỉ định chiến lược bảng màu phù hợp với cả chế độ sáng và tối - Bao gồm thang đo khoảng cách, triết lý bán kính đường viền và hệ thống bóng phù hợp với các kiểu hiện có - Bìa: phong cách biểu tượng và minh họa, đảm bảo sự phù hợp với các yếu tố thiết kế hiện tại - Chi tiết: các quy tắc và điều chỉnh về tính nhất quán trực quan ở cấp thành phần cho các thành phần cũ ### 4. CÁC PHƯƠNG PHÁP TỐT NHẤT về UX/UI HIỆN ĐẠI Áp dụng và lập kế hoạch cho các nguyên tắc UX/UI sau, điều chỉnh chúng cho phù hợp với ứng dụng hiện tại: - **Phân cấp & Khả năng quét**: Đảm bảo sử dụng hiệu quả trọng lượng hình ảnh và khoảng trắng - **Phản hồi & Khả năng chi trả**: Triển khai trạng thái tải, màn hình khung và tương tác vi mô - **Mẫu điều hướng**: Tăng cường điều hướng phản hồi nhanh (hamburger, điều hướng phía dưới, thanh bên), bao gồm cả đường dẫn và tìm đường - **Khả năng truy cập (tối thiểu WCAG 2.1 AA)**: Phân tích khả năng truy cập hiện tại và đề xuất cải tiến (tỷ lệ tương phản, vai trò ARIA) - **Biểu mẫu & Đầu vào**: Xác thực và nâng cao UX cho biểu mẫu, bao gồm lỗi nội tuyến và loại đầu vào trên mỗi thiết bị - **Thiết kế chuyển động**: Tích hợp các hoạt ảnh có mục đích, xem xét các tùy chọn giảm chuyển động - **Trạng thái trống & Trường hợp biên**: Xử lý một cách chiến lược không có dữ liệu, lỗi và quyền ### 5. PHƯƠNG ÁN KIẾN TRÚC KỸ THUẬT - Đề xuất các bản cập nhật cho **ngăn xếp công nghệ** (nếu cần) với lý do chính đáng, có tính đến việc sử dụng công nghệ hiện tại - Định nghĩa: cải tiến kiến trúc thành phần, cải tiến cấu trúc thư mục - Chỉ định: triển khai hệ thống theo chủ đề và chiến lược CSS (mô-đun, tiện ích đầu tiên, CSS-in-JS) - Bao gồm: chiến lược thử nghiệm về khả năng đáp ứng nhằm giải quyết các khoảng trống hiện tại (công cụ, điểm dừng để kiểm tra, thiết bị) --- ## ĐỊNH DẠNG ĐẦU RA Cấu trúc kế hoạch của bạn trong các phần sau: 1. **Tóm tắt** – Tổng quan một đoạn văn về phương pháp tiếp cận 2. **Chiến lược đáp ứng** – Điểm dừng, sửa đổi hệ thống bố cục, phương pháp mở rộng quy mô linh hoạt 3. **Kế hoạch chi tiết về hiệu suất** – Mục tiêu, kỹ thuật, đánh giá các số liệu hiện tại 4. **Đặc tả hệ thống thiết kế** – Mã thông báo, bảng màu, kiểu chữ, điều chỉnh thành phần 5. **Gói thư viện mẫu UX/UI** – Các mẫu chính, tương tác và danh sách kiểm tra khả năng truy cập được cập nhật 6. **Kiến trúc kỹ thuật** – Điều chỉnh ngăn xếp, cấu trúc và cách triển khai 7. **Kế hoạch triển khai theo từng giai đoạn** – Các mốc quan trọng ưu tiên cho việc tích hợp (MVP → đánh bóng → tối ưu hóa) 8. **Danh sách kiểm tra chất lượng** – Xác minh trước khi ra mắt về khả năng phản hồi và chất lượng trên tất cả các thiết bị --- ## Ràng buộc & PHONG CÁCH - Hãy **cụ thể và có thể hành động** — tránh những đề xuất mơ hồ - Cung cấp **giá trị cụ thể** nếu có (ví dụ: "tỷ lệ khoảng cách cơ sở 8px", "dễ dàng giảm 400ms cho các phương thức") - Gắn cờ **những cạm bẫy thường gặp** khi tích hợp các thay đổi và cách tránh chúng - Khi có nhiều cách tiếp cận, **đề xuất một cách có lý luận** thay vì liệt kê các lựa chọn - Giả sử mục tiêu là **** - Người dùng mục tiêu là **[]** --- Bắt đầu với phần Tóm tắt, sau đó tiến hành từng phần.