V. CHUẨN THIẾT KẾ GIAO DIỆN
1.Chuẩn thiết kế giao diện Winform
1.1 Chuẩn đặt tên trong Winform.
Chuẩn đặt tên cho các thành phần giao diện của WinForm.
Control Tiền tố Label lbl TextBox txt DataGrid dtg Button btn ImageButton imb Hyperlink hlk DropDownList ddl ListBox lst DataList dtl Repeater rep Checkbox chk CheckBoxList cbl RadioButton rdo RadioButtonList rbl Image img Panel pnl PlaceHolder phd
29
Table tbl
Validators val
1.2 Chuẩn thiết kế giao diện các thành phần control của WinForm.
2. Label.
- Label gồm ít từ để mô tả nội dung của một control.
- Khi nhấn chuột vào label thì không thực hiện hành động nào cả.
- Sử dụng label để mô tả nội dung cho một GroupBox, TexBox, CheckBox, … hoặc để đưa ra một thông báo cho người dùng.
- Sau mỗi label dùng để mô tả nội dung cho một textbox, checkbox, DateEdit, Combobox.. nên có dấu “:” kèm theo.
- Căn lề trái cho các label.
- Label nên đặt Font “Tahoma” có kích thước là 8.25pt. Ví dụ:
3. Menu ngang.
- Gồm một tập các lựa chọn và nằm trên cùng của Form chính. Tùy chọn của Menu ngang gồm một tập các tùy chọn được sổ xuống khi người dùng kích vào. Các tùy chọn này nên được nhóm lại thành các nhóm có cùng logic.
- Nên thiết lập phím tắt cho các tùy chọn nếu có thể giúp người dùng thao tác nhanh hơn.
- Cấu trúc của phím tắt được viết cùng tùy chọn.(như hình minh họa). - Tùy chọn cần được viết ngắn gọn dễ hiểu, căn lề trái cho tên tùy chọn. - Đặt ít nhất 2 tùy chọn trên menu ngang.
- Các tùy chọn của menu nên được sắp xếp theo chức năng, tần số sử dụng, trình tự sử dụng hoặc thứ tự chữ cái.
- Đặt các tùy chọn có liên quan tới nhau thành một nhóm và phân biệt các nhóm này bằng một đường phân cách.
30 4. Checkbox
- Dùng để lựa chọn 2 hoặc nhiều tùy chọn trong một danh sách cố định.
- Mỗi checkbox có một hình ảnh mô tả trạng thái được chọn và một nhãn đề nội dung của ô checkbox này.
- Các ô checkbox có cùng logic cần được nhóm lại với nhau trong một groupbox và có một nhãn mô tả nội dung chung cho tất cả các ô checkbox này.
- Các ô checkbox có nội dung không loại trừ nhau (có thể chọn một lúc nhiều ô). 5. ListBox
- Để đưa ra cho người dùng một danh sách các đối tượng để lựa chọn, mỗi đối tượng đặt trên một dòng riêng biệt.
- Một listbox cần có thanh cuộn khi có nhiều đối tượng và có hỗ trợ chọn một hoặc nhiều.
- Chỉ dùng listbox cho mục đích lựa chọn đối tượng không dùng để gọi lệnh. - Listbox luôn xuất hiện với một mục được chọn.
- Mover/Copy lists:
+ Danh sách này dùng để dịch chuyển đối tượng từ trái qua phải
+ Các đối tượng được chọn trong danh sách “Dịch chuyển từ” sẽ được ẩn và xuất hiện tại danh sách “Dịch chuyển tới”. (adsbygoogle = window.adsbygoogle || []).push({});
6. Nút. (Button)
- Một nút có nhãn là chữ cái hoặc hình ảnh hoặc cả 2 để mô tả hành động mà nút thực hiện. Khi nhấn chuột một lần trên nút sẽ thực hiện hành động được mô tả trên nhãn.
- Một nút có kích thước phụ thuộc độ dài của nhãn mô tả nhưng không được nhỏ hơn độ dài mặc định của nút (75,23).
- Sử dụng dấu chấm lửng “…” nếu nút để gọi ra một form thứ cấp khác.
- Đặt thuộc tính enable = “false” cho một nút khi người dùng không được phép thực hiện chức năng của nút đó.
31
- Khi thiết kế đặt dấu “&” trước các ký tự khác nhau của mỗi nút để tạo ra gạch chân tại mỗi nút có tác dụng khi chuột không hoạt động được.
7. Đối tượng chỉ tiến độ thực hiện một tiến trình. (Progress indicator) - Dùng khi một tiến trình thực hiện mất nhiều thời gian.
- Trường hợp dùng khi thực hiện các thao tác với dữ liệu trên lưới chỉ cần để hình ảnh thể hiện việc dữ liệu đang được thao tác.
- Trường hợp đối tượng chỉ tiến độ được gắn trên Form, cần có một label thông báo cho người dùng biết quá trình đang được thực hiện. Cần có một nút thực hiện việc hủy bỏ thực hiện tiến trình trong trường hợp người dùng muốn hủy thao tác vừa yêu cầu.
8. Nút Radio.
- Dùng để lựa chọn một đối tượng từ một danh sách các đối tượng cố định. Việc lựa chọn các đối tượng mang tính chất loại trừ nhau.
- Một nút Radio cần có một hình ảnh biểu thị trạng thái được chọn và một nhãn mô tả nội dung của nút.
- Các nút Radio có cùng logic được nhóm lại với nhau và đặt trong một groupbox, có một nhãn mô tả nội dung chung cho các nút radio này.
- Một đối tượng luôn luôn được chọn (ưu tiên lựa chọn mặc định). Chọn một nút radio này thì nút khác sẽ được bỏ chọn. dùng khi có 2 hoặc 3 lựa chọn.
9. Phím tắt.
Bảng tổng hợp các phím tắt thường dùng:
Chức năng Phím tắt
Sách hướng dẫn Ctrl + F2
Đăng nhập lại Ctrl + L
Thoát khỏi chương trình Ctrl + Q
Đóng Form Esc
Xóa bản ghi Del
10. Lưới dữ liệu (Gridview).
- Số cột hiện trên lưới phụ thuộc vào độ dài dữ liệu của các cột. khi dữ liệu bị ẩn nhiều do độ dài dữ liệu của các cột hoặc có nhiều cột nên đặt thêm một nút cho tùy chọn ẩn hiện các cột trên lưới.
- Căn chỉnh dữ liệu trên lưới theo quy tắc sau: + Dữ liệu dạng text được căn trái.
+ Dữ liệu lấy ra dạng số được căn giữa. + Dữ liệu lấy ra là tiền được căn phải. 11. Ô text. (textbox)
32
- Với các ô text bắt buộc nhập dữ liệu cần đặt thêm một dấu “*” màu đỏ trước ô text đó và một label để thông báo cho người dùng biết.
- Các ô text phải bắt ràng buộc khi nhập dữ liệu, sử dụng Error provider đưa ra các thông báo cụ thể về lỗi. (các ràng buộc bao gồm số lượng ký tự được phép nhập, bắt buộc nhập dữ liệu, kiểu dữ liệu…). (adsbygoogle = window.adsbygoogle || []).push({});
12. Menu dọc.
- Menu dọc chia thành 2 phần một phần chứa các tùy chọn chung. Một phần chứa các tùy chọn chi tiết. Giữa 2 phần này được phân cách nhau bởi một đường kẻ. - Các tùy chọn chung có các icon mô tả tùy chọn.
- Khi người dùng kích chọn tùy chọn chung nào thì tùy chọn chi tiết tương ứng của tùy chọn đó sẽ hiện ra tương ứng tại phần dành cho các tùy chọn chi tiết.
- Trên cùng của menu dọc sẽ có một nhãn. Nhãn sẽ thay đổi theo tên của tùy chọn chung mà người dùng chọn.
13. Combobox
- Sử dụng để chọn một đối tượng từ một danh sách cố định.
- Kích thước của combobox phụ thuộc chiều dài của text nhưng không được nhỏ hơn kích thước mặc định.
- Khi chọn một đối tượng khác trong combobox đối tượng được hiển thị trên combobox sẽ được thay đổi tương ứng là đối tượng vừa được chọn.
1.2 Chuẩn thiết kế giao diện các thông báo(Message).
1. Thông báo tác động (Action message).
- Một thông báo tác động thông báo cho người dùng biết một hành động cần sự can thiệp của người dùng. Người sử dụng sẽ thực hiện chấp nhận hành động đó hoặc hủy bỏ việc thực hiện hành động.
- Thông báo này xuất hiện trong tình trạng có thể di chuyển được nhưng có kích thước cố định.
- Luôn cho phép người dùng trở lại ứng dụng mà không thực hiện hành động nào. - Tiêu đề của thông báo là tên viết tắt và tên phiên bản của phần mềm.
- Icon của thông báo là hình dấu “?”.
- Nhãn của cảnh báo là tên viết tắt của phần mềm và phiên bản. 2. Thông điệp cảnh báo. (Warning message).
33
- Sử dụng cảnh báo để thông báo cho người dùng biết khi gặp các hành động gây tổn hại hoặc không mong muốn.
- Thong điệp này xuất hiện trong trạng thái có thể di chuyển được và được cố định kích thước.
- Trong trường hợp đang thực hiện một thao tác và đưa ra cảnh báo để nhận sự điều hướng từ người dùng thì cảnh báo cần có 2 nút. Một nút để người dùng xác nhận tiếp tục thực hiện thao tác đó, một nút hủy việc thực hiện.
- Trong trường hợp chỉ đưa ra một cảnh báo chỉ cần một nút cho người dùng xác nhận cảnh báo.
- Icon của cảnh báo là hình dấu chấm than trong một tam giác như hình trên. - Nhãn của cảnh báo là tên viết tắt của phần mềm và phiên bản.
3. Thông báo lỗi. (Error message).
- Chỉ sử dụng thông báo lỗi khi chương trình có lỗi trong quá trình thực hiện một thao tác nào đó.
- Thông báo lỗi xuất hiện trong trạng thái có thể di chuyển được và có kích thước cố định.
- Nhãn của thông báo gồm tên viết tắt của phần mềm và phiên bản. - Icon của thông báo là một dấu “X” màu đỏ.
- Có một nút cho người dùng xác nhận lỗi.