18-06-2020 bởi timqian Mặc dù tính năng tùy chỉnh giao diện của Feeds.Pub đã được phát triển từ một thời gian trước, nhưng vì gần đây tôi nhận thêm một dự án bên ngoài khá bận rộn, nên chưa có thời gian viết bài tổng kết về nó. Cuối cùng, tối nay tôi đã dành ra vài giờ đồng hồ để chia win88 nổ hũ sẻ một cách ngắn gọn về ý tưởng này.
Câu chuyện bắt đầu khi thỉnh thoảng có người dùng đến và đưa ra một số đề xuất về giao diện UI - “Liệu việc tăng kích thước chữ ở đây có tốt hơn không? Hay đổi màu sắc kia xem sao?” Sau khi lắng nghe phản hồi và thực hiện một số thay đổi hoặc từ chối một số yêu cầu, tôi tự hỏi: Tại sao không để chính người dùng quyết định ứng dụng sẽ trông như thế nào?
[Tự do trong tùy chỉnh]
Tùy chỉnh có nhiều mức độ khác nhau. Mức độ thấp nhất là cung cấp một vài tùy chọn thiết kế sẵn cho người dùng, ví dụ như chế độ “dark mode” mà rất nhiều trang web đang áp dụng ngày nay.
Nếu nâng cao mức độ tự do hơn nữa, chúng ta có thể cho phép người dùng lựa chọn màu sắc, kiểu chữ, thậm chí là bố cục của các phần giao diện. Loại tự do chi tiết này thường thấy trong các trình soạn thảo mã nguồn. Các lập trình viên phải làm việc với trình soạn thảo trong thời gian dài, vì vậy họ thường mong muốn giao diện đáp ứng đúng nhu cầu cá nhân. Hầu hết các trình soạn thảo phổ biến đều hỗ trợ tùy chỉnh màu sắc và phông chữ.
Mặc dù tần suất sử dụng không bằng các trình soạn thảo mã, nhưng đối với những người dùng coi RSS là nguồn thông tin chính, việc mở Feeds.Pub hai hoặc ba lần mỗi ngày là điều hoàn toàn bình thường. Vì vậy, tôi quyết định học hỏi từ các trình soạn thảo và cung cấp mức độ tự do cao nhất có thể cho người dùng.
Vậy tôi nên cung cấp những tùy chọn cấu hình nào cho người dùng?
Đây là một công việc đòi hỏi sự cân bằng: Tôi hy vọng có thể cung cấp ít nhất các tùy chọn cấu hình, nhưng vẫn đảm bảo sự linh hoạt tối đa cho người dùng.
Các tùy chọn cấu hình cần giống như các định luật vật lý - càng đơn giản càng tốt, nhưng không thể đơn giản hơn nữa – Albert Einstein & Tim Qian
Thực tế lại không dễ dàng như lời nói, mất khoảng hơn một tháng để tôi có thể tách biệt và sắp xếp các cấu hình của Feeds.Pub thành bảng sau:
| Phần giao diện | Cấu hình hỗ trợ |
|---|---|
| Header (Thanh điều hướng trên cùng) | Màu nền và chữ |
| Body (Trừ Header) | Màu nền, màu chữ chính, màu chữ phụ, trạng thái đã truy cập |
| Side Bar (Thanh điều hướng feeds bên trái) | Màu chữ mặc định, màu chữ khi được chọn, khi di chuột qua và màu nền tương ứng |
| Separator (Dòng phân cách) | Màu sắc win 911 của dòng phân cách (ví dụ: giữa các khu game nhà cái tặng tiền cược miễn phí vực trái-phải, hoặc phân cách trang người dùng) |
| Button (Nút bấm) | Màu viền, nền và chữ của nút |
| Input (Khung nhập liệu) | Màu viền và chữ của khung nhập |
| Tag | Màu chữ và nền của tag |
| Dropdown (Menu thả xuống) | Màu nền và chữ của menu thả xuống |
Link trải nghiệm: feeds.pub/themes
[Những lợi ích đạt được]
- Giao diện trở nên logic hơn. Trước đây, các nút, kích thước chữ, màu sắc ở các vị trí khác nhau không tuân theo quy tắc cụ thể. Giờ đây, mọi thứ đã được chuẩn hóa, giúp giao diện nhìn gọn gàng hơn và thuận tiện cho tôi trong việc đồng bộ hóa các thay đổi.
- Bằng cách trao quyền tự do lớn hơn cho người dùng, có khả năng khám phá ra những thiết kế mới mẻ hơn và tích hợp vào feeds.pub.
Cuối cùng, nếu bạn quan tâm đến việc tự thiết kế giao diện, hãy chia sẻ thiết kế của bạn trên nhóm Telegram hoặc Twitter ❤️