Tài liệu Thiết kế thông báo bằng CSS ppt

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.