Các phòng có mục đích khác nhau, nhưng ảnh đại diện chỉ thể hiện loại phòng
Trong DocSpace, phòng là không gian cùng làm việc với các tệp. Vai trò xác định những gì mỗi người tham gia có thể thực hiện trong phòng.
Trước đây, người dùng có thể tải lên hình ảnh riêng. Nếu không có, hệ thống hiển thị ảnh mặc định với biểu tượng loại phòng. Các phòng cùng loại chưa có ảnh đại diện riêng cho đến khi người dùng tìm và tải lên một hình ảnh.
Nhiệm vụ xuất phát từ yêu cầu của người dùng và các đề xuất cải thiện sản phẩm. Một mục tiêu là giúp các phòng khác biệt về hình thức. Tôi đề xuất tạo ảnh đại diện tự động từ tên và thêm tùy chỉnh màu, biểu tượng ngay trong quy trình tạo phòng.
Chỉ cần nhập tên để có ảnh đại diện
Khi người dùng nhập tên phòng, hệ thống lấy chữ từ tên và chọn ngẫu nhiên một màu nền trong bảng màu. Ảnh đại diện xuất hiện ngay bên cạnh trường tên.
Nhờ vậy, phòng có hình thức riêng mà không cần tải lên hình ảnh. Người dùng nhìn thấy trước khi tạo phòng và có thể giữ phương án được đề xuất hoặc tùy chỉnh.
Chọn màu và biểu tượng theo mục đích của phòng
Trong trình chỉnh sửa, người dùng có thể đổi màu nền hoặc thay chữ bằng biểu tượng theo chủ đề. Điều này cho phép thể hiện mục đích của phòng và sử dụng hệ thống phân biệt riêng, chẳng hạn dùng cùng màu hoặc biểu tượng cho những không gian liên quan.
Tôi vẽ bộ biểu tượng và thiết kế các trạng thái lựa chọn. Thay đổi xuất hiện ngay trong bản xem trước, giúp người dùng đánh giá màu và biểu tượng trước khi áp dụng. Bỏ chọn biểu tượng sẽ khôi phục phần chữ.
Ngoài bảng màu có sẵn, người dùng có thể đặt một màu riêng. Màu này được lưu trong trình chỉnh sửa và đánh dấu bằng bút chì để có thể chọn lại hoặc thay đổi.
Hình ảnh tải lên là một lựa chọn khác cho ảnh đại diện
Để tải lên hình ảnh, tôi thiết kế cả chọn tệp từ thiết bị và kéo thả vào bảng. Sau khi tải lên, trình cắt ảnh mở ra để người dùng chọn phần cần dùng và áp dụng cho phòng.
Sau khi tạo phòng, người dùng vẫn có thể tùy chỉnh qua bảng chỉnh sửa và bảng thông tin. Hình ảnh có thể được thay thế hoặc xóa. Khi xóa, phòng trở lại ảnh đại diện bằng chữ với màu ngẫu nhiên.
Quy tắc bao gồm kích thước, độ tương phản và các loại màn hình
Ảnh đại diện xuất hiện ở ba kích thước: 32, 64 và 96 pixel. Tôi mô tả quy tắc thay đổi kích thước biểu tượng mà vẫn giữ tỷ lệ để biểu tượng được dùng nhất quán trong các phần của giao diện.
Người dùng không chọn màu chữ hoặc biểu tượng. Hệ thống tự xác định theo nền: màu đen trên nền sáng và màu trắng trên nền tối. Tôi mô tả logic này cho đội phát triển để khả năng đọc không phụ thuộc vào màu người dùng chọn.
Tôi chuẩn bị giao diện sáng và tối cho máy tính, máy tính bảng và điện thoại. Trên điện thoại, trình chỉnh sửa hoạt động như một bảng với vùng chạm biểu tượng lớn hơn. Bản xem trước được giữ cố định khi cuộn, nên ảnh đại diện đang chọn luôn hiển thị trong quá trình tùy chỉnh.
32 px64 px96 pxGiải pháp đã được phát hành đầy đủ
Tất cả các quy trình đã thiết kế đều được triển khai và phát hành: ảnh đại diện tự động, chọn màu và biểu tượng, tải lên, kéo thả, cắt ảnh và chỉnh sửa sau đó.
Tôi theo sát việc triển khai và cùng các lập trình viên điều chỉnh giải pháp sau khi kiểm tra trên các cổng thử nghiệm. Tôi cũng thiết kế việc tải lên và cắt hình ảnh cho ảnh hồ sơ người dùng.
Người dùng có thể tạo hình thức riêng cho phòng mà không cần chuẩn bị hình ảnh. Phương án tự động xuất hiện khi nhập tên, và tùy chỉnh chi tiết có thể thực hiện khi tạo phòng hoặc sau đó.
