Thiết kế thông báo bằng CSS. Cập nhật: 19/8/2008 với no comments Xếp trong: Lập trình, CSS Đôi khi làm việc thiết kế các dòng sự kiện xảy ra, các lập trình viên hay bỏ qua việc đưa ra các lời thông báo cho người dùng. Điều này làm cho người sử dụng có thể bối rối và lầm tưởng về quy trình hoạt động của ứng dụng. Thêm vào đó, nếu việc đưa ra . Đôi khi làm việc thiết kế các dòng sự kiện xảy ra, các lập trình viên hay bỏ qua việc đưa ra các lời thông báo cho người dùng. Điều này làm cho người sử dụng có thể bối rối và lầm tưởng về quy trình hoạt động của ứng dụng. Thêm vào đó, nếu việc đưa ra thông báo không hợp lệ cũng có thể gây ra những sai lệch không thể ngờ được. Ví dụ, khi bạn đến ngân hàng để kiểm tra lại tài khoản. Nhân viên ngân hàng nhập thông tin cá nhân của bạn và gửi yêu cầu cho ứng dụng. Ứng dụng web sẽ trả lời bằng việc hiển thị một hộp thông báo màu vàng với một icon dấu chấm than nói rằng việc xử lý dữ liệu vẫn đang xảy ra. Người nhân viên có thể sẽ phải check một vài lần lại nếu không thấy hiện ra ngay dòng thông báo "Account avaiable". Nhưng hộp thông báo thì không thay đổi gì cả. Anh ấy tiếp tục check thêm một vài lần và cuối cùng anh ta nhận ra rằng yêu cầu đã thực hiện thành công. Tôi sẽ chỉ cho bạn thấy các loại CSS message box mà tôi dùng cho các project mới nhất của tôi ở đây. Tôi đã thay đổi một chút để cho nó đơn giản hơn cho các ví dụ này. Nào chúng ta hãy duyệt qua một loạt các kiểu message này: 1. Information messages Mục đích của các information message là để thông báo đến người sử dụng một điều gì đó liên quan. Điều này nên trình bày ở dạng màu xanh da trời bởi vì người ta thường kết hợp màu sắc này với thông tin bất kể là nội dung gì. Điều này cũng có thể tương ứng với thông tin một hành động nào của người dùng. Ví dụ, hộp thông báo thông tin có thể chỉ ra một vài trợ giúp đối với hành động người dùng hiện tại hoặc là một vài gợi ý nào đó. 2. Success message Các thông báo thành công nên được đưa vào sau khi người dùng thực hiện thành công một thao tác nào đó. Ở đây là trường hợp thao tác hoàn chỉnh - không phải là một một thao tác chia nhỏ và không phát sinh lỗi nào. Ví dụ, thông báo có thể nói: "Thông tin hồ sơ của bạn đã được lưu thành công và việc xác nhận email đã được tới địa chỉ email mà bạn đã cung cấp cho chúng tôi!". Điều này nghĩa là mỗi thao tác trong tiến trình (lưu thông tin hồ sơ và gửi email) đã được thực hiện thành công. Tôi cũng nhận thấy nhiều lập trình viên băn khoăn loại thông báo này giống như là kiểu thông báo thông tin, nhưng tôi ưa dùng nó để chỉ kiểu thông báo thành công bằng cách dùng thêm màu sắc và icon của nó - màu nền xanh có icon được đánh dấu. 3. Warning messages Hộp thoại cảnh báo nên được dùng để hiển thị tới người dùng khi một thao tác không thể hoàn tất. Ví dụ:" Hồ sơ của bạn đã lưu thành công, nhưng việc xác nhận email có thể không được gửi đến địa chỉ email mà bạn đã cung cấp!". Hay là: "Nếu bạn không hoàn thành hồ sơ của bạn bây giờ, bạn sẽ không thể tìm kiếm được việc làm". Màu sắc cảnh báo thường là vàng với biểu tượng icon là dấu than. 4. Error messages Thông báo lỗi nên được đưa ra khi một thao tác không thể được hoàn tất. Ví dụ: "Hồ sơ của bạn không thể lưu lại được". Màu đỏ rất phù hợp cho loại thông báo này. Quy trình thiết kế Bây giờ là lúc chúng ta học cách trình bày các thông báo đến người dùng, hãy xem xét cách thực hiện nó bằng cách sử dụng CSS, dưới đây là toàn bộ quy trình làm việc đó: Tôi sẽ dùng ngay ví dụ đơn giản này. Mục đích là để có thẻ DIV có thực thi một class đơn CSS. Vì thế đoạn mã HTML có dạng như thế này: view plain print ? 1. <div class="info">Info message</div> 2. <div class="success">Successful operation message</div> 3. <div class="warning">Warning message</div> 4. <div class="error">Error message</div> CSS class sẽ được thêm một ảnh nền vào DIV ở vị trí top-left. Nó cũng sẽ tạo ra một vùng đệm bên trong DIV để đoạn text có thể có đủ khoảng trắng xung quanh nó. Chú ý là vùng đệm bên trái phải được để rộng hơn để ngăn việc đoạn text chồng lên ảnh nền Và đây là các class CSS cho cả 4 kiểu thông báo khác nhau (5 cho thông báo validation) view plain print ? 1. 2. body{ 3. font-family:Arial, Helvetica, sans-serif; 4. font-size:13px; 5. }.info, .success, .warning, .error, .validation { 6. border: 1px solid; 7. margin: 10px 0px; 8. padding:15px 10px 15px 50px; 9. background-repeat: no-repeat; 10. background-position: 10px center; 11. } 12. .info { 13. color: #00529B; 14. background-color: #BDE5F8; 15. background-image: url('info.png'); 16. } 17. .success { 18. color: #4F8A10; 19. background-color: #DFF2BF; 20. background-image:url('success.png'); 21. } 22. .warning { 23. color: #9F6000; 24. background-color: #FEEFB3; 25. background-image: url('warning.png'); 26. } 27. .error { 28. color: #D8000C; 29. background-color: #FFBABA; 30. background-image: url('error.png'); Validation message Tôi nhận thấy nhiều lập trình viên không phân biệt được giữa kiểu thông báo validation với các kiểu thông báo khác (như thông báo lỗi và cảnh báo). Tôi đã xem nhiều lần thông báo validation đó được hiển thị như là thông báo lỗi và gây ra nhầm lẫn cho tâm trí người dùng. Validation là tất cả những gì thuộc về người dùng nhập và được xem xét theo cách đó. ASP.NET đã xây dựng sẵn các control cho phép điều khiển hoàn toàn tất cả những gì người dùng nhập. Mục đích của validation là bắt người dùng nhập các trường dữ liệu yêu cầu hoặc nhập các trường theo một định dạng đúng. Do đó, nếu các quy tắc này không phù hợp thì biểu mẫu sẽ không được submit. Vì thế mà tôi thích sử dụng style cho các thông báo validation bằng màu sắc đỏ nhạt hơn thông báo lỗi và icon chấm than đỏ. CSS class cho thông báo validation cũng giống như như các loại thông báo khác (chú ý là một vài thuộc tính được định nghĩa trong ví dụ trước). Kết luận: Các thông báo đưa ra đóng vai trò rất quan trọng đối với kinh nghiệm người dùng không thể bỏ qua được. Có nhiều bài viết chỉ ra cách tạo ra những hộp thông báo có phong cách rất đẹp nhưng nó không thể hiện được tính chuyên nghiệp trong thiết kế. Chúng ta nên cung cấp cho người dùng những thông tin có ngữ nghĩa rõ ràng và trực quan. . kiểu thông báo validation với các kiểu thông báo khác (như thông báo lỗi và cảnh báo) . Tôi đã xem nhiều lần thông báo validation đó được hiển thị như là thông. Thiết kế thông báo bằng CSS. Cập nhật: 19/8/2008 với no comments Xếp trong: Lập trình, CSS Đôi khi làm việc thiết kế các dòng sự kiện