Thiết kế giao diện người dùng đồ họa. Thêm chức năng vào nút "Xóa". Motif có các công cụ không chỉ để làm việc với các dòng văn bản được hiển thị bằng một phông chữ duy nhất mà còn cho phép bạn làm việc với các đối tượng như “dòng tổng hợp”
Chú thích: Chúng tôi nghiên cứu các tiện ích - các thành phần trực quan tạo nên giao diện đồ họa người dùng, bố cục, chính sách kích thước, kết nối khe tín hiệu, thành phần giao diện đồ họa và cách sử dụng chúng.
13.1 Tiện ích
Widget là các thành phần trực quan tạo nên giao diện đồ họa cho người dùng.
Ví dụ về các widget:
- Nút (lớp QPushButton);
- Nhãn (lớp QLabel);
- Trường đầu vào (lớp QLineEdit);
- Trường bộ đếm số (lớp QSpinBox);
- Thanh cuộn (lớp QScrollBar ).
Qt có khoảng 50 lớp phần tử đồ họa được tạo sẵn để sử dụng. Lớp cha của tất cả các widget là lớp QWidget. Tất cả các thuộc tính chính của các yếu tố hình ảnh đều được kế thừa từ nó, điều này chúng tôi sẽ xem xét cẩn thận. Hãy bắt đầu khám phá các cách phát triển chương trình có giao diện đồ họa bằng một ví dụ.
Hãy tạo một tệp dự án trống. Hãy khởi chạy trình hướng dẫn dự án và chọn mục trong phần Dự án Dự án khác. Tiếp theo, chọn loại dự án Dự án Qt trống. Hãy thêm nội dung vào tệp dự án:
TEMPLATE = app #Qt module mà chúng ta sẽ sử dụng QT += widgets #Thêm mô-đun widget để hoạt động với các widget (cần thiết cho Qt5). MỤC TIÊU = widget#Tên của tệp thực thi NGUỒN += \ main.cpp
Bây giờ hãy tạo một chương trình đơn giản với một cửa sổ trong đó chúng ta sẽ hiển thị dòng chữ. Hãy đặt kích thước của cửa sổ và văn bản tiêu đề của nó, đồng thời đặt phông chữ cho dòng chữ. Để thực hiện việc này, hãy tạo một tệp main.cpp với nội dung sau:
#bao gồm
Như chúng ta có thể thấy, các phần tử tạo nên giao diện trong Qt có vị trí và kích thước riêng - cái gọi là "hình học" - và do đó chiếm một diện tích hình chữ nhật tương ứng trên màn hình (xem Hình 13.1). Ngoài ra, mỗi thành phần đều có cài đặt xác định hành vi và diện mạo của nó.
Cơm. 13.1.
Để tạo cấu trúc, các widget được sắp xếp thành một hệ thống phân cấp theo nguyên tắc “một phần - toàn bộ”. Mỗi widget có thể chứa các widget khác. Phần tử trực quan này trở thành "cha" (tiện ích gốc) của các phần tử mà nó chứa. Lưu ý rằng không nên nhầm lẫn các mối quan hệ như vậy với tính kế thừa trong C++ - mối quan hệ giữa các lớp trong một chương trình. Mối quan hệ giữa các widget là mối quan hệ giữa các đối tượng. Những mối quan hệ như vậy dẫn đến một số hậu quả:
- phần tử cha sẽ chịu trách nhiệm xóa phần tử con: nếu widget cha bị xóa, nó sẽ tự động xóa tất cả các phần tử con;
- tiện ích con mẹ đặt các tiện ích con bên trong chính nó, các phần của tiện ích con vượt ra ngoài cha mẹ sẽ ẩn đi;
- một phần trạng thái của tiện ích gốc được chuyển sang tiện ích con của nó - điều này áp dụng cho một số thuộc tính (khả năng hiển thị, hoạt động) và kiểu được áp dụng cho thành phần trực quan.
Các tiện ích con không có cha mẹ (các tiện ích con cấp cao nhất) xuất hiện dưới dạng các cửa sổ riêng biệt trong chương trình. Hãy xem một ví dụ. Hãy đặt tên cho dự án mới là ParentExample. Tệp dự án sẽ chứa các cài đặt thông thường cho dự án GUI:
MẪU = ứng dụng MỤC TIÊU = ParentExample QT += widget
Đối với tiện ích mà chúng ta sẽ sử dụng làm cửa sổ chính, chúng ta sẽ tạo một lớp mới. Đối với điều này trong danh mục Tập tin và lớp học Hãy chọn phần C++ và chọn Lớp C++ (xem Hình 13.2).
Bước tiếp theo là tạo một số phần tử trên cửa sổ. Để thực hiện việc này, hãy mở tệp parentwidget.cpp và thay đổi mã hàm tạo lớp. Để hiển thị các phần tử, chỉ cần tạo chúng trong hàm tạo của lớp và đặt ParentWidget làm phần tử gốc cho chúng. Mã parentwidget.cpp trông như thế này:
#include " parentwidget.h " #include
Vì phần tử gốc là ParentWidget nên nhãn (QLabel), nút (QPushButton) và trường văn bản (QLineEdit) đều nằm trong đó. Vị trí của các widget con được đặt tương ứng với góc trên bên trái của bố. Bạn có thể dễ dàng xác minh điều này bằng cách thay đổi kích thước và vị trí của cửa sổ chương trình của chúng tôi. Lưu ý cách chúng tôi tạo các phần tử giao diện người dùng trên vùng nhớ heap bằng cách sử dụng toán tử mới. Điều này đảm bảo rằng các phần tử không bị xóa sau khi hàm tạo ParentWidget hoàn tất.
yadobr Tháng Một 14, 2014 lúc 09:10
Thiết kế giao diện người dùng đồ họa
- Giao diện
Giới thiệu
Có hàng tỷ thiết bị điện toán trong thế giới hiện đại. Thậm chí nhiều chương trình hơn cho họ. Và mỗi cái đều có giao diện riêng, là “đòn bẩy” tương tác giữa người dùng và mã máy. Không có gì ngạc nhiên khi giao diện càng đẹp thì tương tác càng hiệu quả.Tuy nhiên, không phải tất cả các nhà phát triển và thậm chí cả nhà thiết kế đều nghĩ đến việc tạo ra một giao diện đồ họa thuận tiện và dễ hiểu cho người dùng.
Đối với bản thân tôi, tôi bắt đầu bằng việc đặt câu hỏi: những nguyên tắc chung, cái gì phần tử giao diện (EI) tạo ra thiết kế mà chúng nên có, nơi chúng nên được đặt chính xác và cách chúng hoạt động.
Dưới đây tôi sẽ cố gắng trả lời những câu hỏi này.
Nguyên tắc chung
Tôi nên tạo EI gì?
Thiết kế EI nên như thế nào?
Trên thực tế, thiết kế EI là chủ đề của một bài viết riêng. Ở đây bạn cần phải tính đến mọi thứ: từ màu sắc, hình dạng, tỷ lệ cho đến tâm lý nhận thức. Tuy nhiên vẫn có một số nguyên tắc cần lưu ý:Làm thế nào để định vị chính xác EI trên màn hình?
EI nên hành xử như thế nào?
Bị giam giữ
Bài viết này không tự nhận là hướng dẫn toàn diện nhất về các nguyên tắc thiết kế giao diện. Giao diện đồ họa người dùng là một chủ đề rộng lớn, gắn bó chặt chẽ với tâm lý học, chiếm lĩnh tâm trí của các nhà khoa học và hàng trăm trang sách, nghiên cứu. Với hình thức nhỏ như vậy, không có cách nào thể hiện được hết chủ đề được nêu ra. Tuy nhiên, việc tuân theo các nguyên tắc cơ bản sẽ giúp xây dựng các giao diện thân thiện với người dùng hơn, cũng như đơn giản hóa quá trình thiết kế.Cám ơn vì sự quan tâm của bạn.
Văn học
Jeff Raskin, “Giao diện: hướng đi mới trong thiết kế hệ thống máy tính”Alan Cooper, “Về giao diện. Nguyên tắc cơ bản của thiết kế tương tác"
Alan Cooper, “Bệnh viện tâm thần trong tay bệnh nhân”
Ngày 09 tháng 7 năm 2003
Với sự ra đời của nhiều công cụ phát triển ứng dụng trực quan khác nhau, việc viết giao diện đồ họa cho các chương trình đã trở thành một thứ giống như trò chơi của trẻ con. Tôi dùng chuột chọc vào nó và một biểu mẫu xuất hiện; tôi chọc vào nó lần thứ hai và một nút xuất hiện. Đối với tôi, có vẻ như hiện nay nhiều người không nghĩ đến một cách lập trình khác trong môi trường đồ họa. Tất nhiên, bạn không thể phản đối sự tiến bộ; khi viết các dự án lớn, tất cả những tiện ích này đều rất hữu ích. Nhưng đó không phải là chủ đề của cuộc trò chuyện này. Đôi khi điều này trở nên vô lý: một ứng dụng nguyên thủy được viết bằng MFC, VCL, v.v. Những chương trình như vậy ngấu nghiến bộ nhớ như lũ mối và với thân hình mập mạp của chúng, chúng chiếm thêm dung lượng đĩa. Theo quy định, các chất tương tự MFC/VCL “nặng” hơn từ 10 đến 20 lần so với các chương trình được viết trên API thuần túy. Và Visual Basic (xin Chúa tha thứ cho tôi vì cụm từ này) với msvbvmXX.dll của nó? Và nhiều tài nguyên hệ thống hơn được tiêu thụ (vài lần). Người dùng nghèo, từ chối bia, tiết kiệm tiền để mua phần cứng mới. Chẳng phải là đáng tiếc cho những điều nghèo nàn sao? Không chỉ lập trình viên mới uống bia? Có một khía cạnh tích cực khác của mã hóa API: lập trình viên trở nên gần gũi hơn với hệ điều hành. Theo đó, anh ấy hiểu và kiểm soát nó tốt hơn. Và thật đơn giản - đó là một hoạt động rất thú vị. Tôi nhắc lại, tất cả những điều trên áp dụng cụ thể cho các chương trình nhỏ, đơn giản; trong các dự án lớn, mọi thứ hoàn toàn khác.
Tôi hy vọng tôi đã thuyết phục được bạn. Đi.
Chúng ta sẽ xem xét việc tạo một giao diện cửa sổ đơn giản với chức năng tối thiểu. Đây sẽ là một cửa sổ đơn giản với hai trường nhập và hai nút. Khi bạn nhấp vào nút "Sao chép", văn bản từ trường nhập đầu tiên sẽ được sao chép sang trường nhập thứ hai. Khi bạn nhấp vào nút "Đóng", chương trình sẽ hoàn thành công việc của nó. Trong tương lai, nó có thể dùng làm mẫu để viết các ứng dụng khác phức tạp hơn. Chúng tôi sẽ giao tiếp bằng C/C++, mặc dù chúng tôi cũng sẽ không xúc phạm Delphi. Nguyên tắc chung là giống nhau, chỉ có cú pháp là khác nhau. Để làm việc với các thông báo hệ thống và chức năng API, bạn cần đưa các tệp tiêu đề vào dự án của mình; trong C/C++ đây là windows.h, trong Delphi đây là các mô-đun cửa sổ và tin nhắn.
Bất kỳ chương trình nào trong hệ điều hành Windows đều bao gồm ba phần chính: chức năng chính, vòng lặp thông báo và chức năng cửa sổ, xử lý tất cả các thông báo được gửi đến cửa sổ.
Chương trình của chúng ta bắt đầu thực thi với hàm WinMain(). Đây là chức năng chính. Hàm WinMain() thường thực hiện các tác vụ sau:
- Định nghĩa lớp cửa sổ. Đừng nhầm lẫn với lớp OOP.
- Đăng ký lớp này trong hệ thống.
- Tạo cửa sổ ứng dụng chính và các điều khiển khác.
- Hiển thị một cửa sổ trên màn hình.
- Bắt đầu vòng lặp xử lý tin nhắn.
- Nó được khai báo theo cách này: int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) Hãy xem các tham số:
- hInstance là một điều khiển cho phiên bản ứng dụng hiện tại.
- hPrevInstance là một phần điều khiển cho phiên bản trước của ứng dụng, nếu nó đang chạy.
- lpCmdLine - con trỏ tới dòng chứa các tham số được truyền cho chương trình khi khởi động.
- nCmdShow - hằng số xác định cách hiển thị cửa sổ. (Xem hằng số SW_).
Ở Delphi, chúng ta sẽ không nhìn thấy hình ảnh như vậy; trong môi trường phát triển này, hàm chính bị trình biên dịch ẩn khỏi người lập trình. Tất nhiên, mặc dù nó có trong mã cuối cùng. Để đăng ký một lớp cửa sổ, bạn cần điền vào các trường có cấu trúc kiểu WNDCLASS (trong Delphi TWNDCLASS). Với mục đích này, chúng tôi đã khai báo biến wcl. wcl.hInstance = hInstance; Để xử lý phiên bản ứng dụng hiện tại, biến hInstance được khởi tạo bởi hàm WinMain(). Trong Delphi nó được khởi tạo ngầm. wcl.lpszClassName = szWinName; Tên lớp. Chúng tôi đã tạo và khởi tạo trước biến chuỗi szWinName. wcl.lpfnWndProc = WindowFunc; Một con trỏ tới một hàm cửa sổ. wcl.style = 0; Một hằng số xác định kiểu cửa sổ. Cờ CS_ được sử dụng cho việc này, tôi vừa xóa chúng về 0. Bạn có thể chỉ định tổ hợp các cờ bằng thao tác "hoặc" theo bit. wcl.hIcon = LoadIcon(NULL, IDI_ASTERISK); Một điều khiển cho biểu tượng ứng dụng, được trả về bởi hàm LoadIcon(). Tôi đã tải lên một biểu tượng tiêu chuẩn. Xem hằng số IDI_. wcl.hCursor = LoadCursor(NULL,IDC_ARROW); Một điều khiển cho con trỏ ứng dụng, được trả về bởi LoadCursor(). Tôi đã tải mũi tên tiêu chuẩn. Xem hằng số IDC_. wcl.lpszMenuName = NULL; Con trỏ tới một chuỗi xác định tên của tài nguyên menu cho lớp cửa sổ này. Không có thực đơn, không có dấu hiệu. wcl.cbClsExtra = 0; Trường dự trữ. Hãy thiết lập lại. wcl.cbWndExtra = 0; Trường dự trữ. Hãy thiết lập lại. wcl.hbrBackground = (HBRUSH)COLOR_WINDOW; Màu cửa sổ. Hằng số COLOR_WINDOW được chuyển thành kiểu HBRUSH (ở Delphi không cần chuyển). Ngoài ra, bằng cách sử dụng hàm GetStockObject(), bạn có thể đặt màu cọ hoặc hình nền cho cửa sổ. Bây giờ, hãy thoải mái đăng ký lớp cửa sổ.
RegisterClass(&wcl); Một con trỏ tới cấu trúc wcl được truyền dưới dạng tham số cho hàm RegisterClass.
Dòng tiếp theo chúng ta tạo cửa sổ.
|
- Tham số đầu tiên là tên của lớp cửa sổ.
- Tham số thứ hai là tiêu đề cửa sổ.
- Tham số thứ ba là kiểu cửa sổ. Từ WS_OVERLAPPEDWINDOW tiêu chuẩn, bằng cách sử dụng thao tác xor, tôi đã loại bỏ khả năng chia tỷ lệ cửa sổ và tắt nút phóng to.
- Thứ tư và thứ năm là vị trí của cửa sổ tính từ bên trái, góc trên của màn hình. Tôi có CW_USEDEFAULT, với giá trị này hệ thống sẽ tự động chọn vị trí cửa sổ.
- Tham số thứ sáu và thứ bảy lần lượt là chiều rộng và chiều cao của cửa sổ.
- Tham số thứ tám là cửa sổ chủ sở hữu. Tại cửa sổ chính, chủ sở hữu là desktop (0). Các điều khiển có một cửa sổ chính.
- Thứ chín là một con trỏ tới phần điều khiển menu. Không có thực đơn, không có dấu hiệu.
- Tham số thứ mười là một điều khiển cho phiên bản ứng dụng hiện tại.
- Thứ mười một - Được sử dụng khi tạo ứng dụng có giao diện MDI. Chúng tôi không cần.
Tay cầm cửa sổ là một số duy nhất trong hệ thống xác định cửa sổ hoặc điều khiển.
Tiếp theo chúng ta sẽ tạo các điều khiển cần thiết. Tất cả các điều khiển đều là các cửa sổ giống nhau, chúng chỉ có tên lớp khác nhau. Không cần phải đăng ký các lớp điều khiển; chúng đã được xác định trước trong hệ thống. Nút - lớp nút. Trường đầu vào - chỉnh sửa lớp. Chú thích - lớp ststic. Có nhiều lớp tương ứng với các điều khiển tiêu chuẩn. Chúng ta tạo các điều khiển bằng hàm CreateWindow() quen thuộc và hàm CreateWindowEx() lạ. CreateWindowEx() cho phép bạn tạo một cửa sổ với kiểu dáng nâng cao. Chúng tôi sử dụng nó để tạo các trường đầu vào. Hàm này đã thêm tham số đầu tiên, thiết lập kiểu cao cấp nhất này, các tham số còn lại giống như CreateWindow(). Điều khiển là cửa sổ con, chủ sở hữu của chúng là cửa sổ chính.
Khi tạo điều khiển, trong tham số hàm, bạn phải chỉ định bộ mô tả của cửa sổ chính, cũng như kiểu cửa sổ WS_CHILD. Hình thức và chức năng của các điều khiển có thể được điều khiển bằng cách sử dụng các cờ: WS_, ES_, BS_, SS_, kết hợp chúng với thao tác “hoặc” theo bit. Khi tạo các điều khiển, chúng ta khởi tạo các biến tương ứng với các bộ mô tả của chúng, được trả về bởi các hàm CreateWindow() và CreateWindowEx(). Chúng ta sẽ cần những bộ mô tả này để tiếp tục làm việc với các điều khiển. Chúng ta hiển thị cửa sổ đã tạo lên màn hình và vẽ lại.
Hàm GetMessage chọn tin nhắn tiếp theo từ hàng đợi tin nhắn của ứng dụng và gửi nó đến cửa sổ.- Tham số đầu tiên là cấu trúc kiểu MSG (trong Delphi kiểu TMSG)
- Tham số thứ hai là một điều khiển cho cửa sổ mà thông báo được gửi tới. Nếu NULL hoặc 0 thì tất cả các cửa sổ ứng dụng.
- Thứ ba và thứ tư - cho phép bạn đặt phạm vi tin nhắn nhận được. Nếu là 0 thì tất cả các tin nhắn được gửi đến cửa sổ.
Chức năng cửa sổ cung cấp chức năng của chương trình bằng cách xử lý các thông báo hệ thống. Hàm cửa sổ là hàm CALLBACK, tức là. được hệ điều hành gọi để phản hồi một tin nhắn mới đến. Hàm cửa sổ được khai báo như sau:
LRESULT GỌI LẠI WindowFunc(HWND hMainWnd, UINT iMsg, WPARAM wParam, LPARAM lParam)
- HMainWnd - xử lý cửa sổ chính.
- iMsg - số tin nhắn. Xem hằng số WM_.
- lParam và wParam là các tham số của tin nhắn.
Khi một thông báo xuất hiện, chúng ta có thể so sánh tham số iMsg với một trong các hằng số WM_ và lập trình cho chương trình phản ứng tương ứng.
Ví dụ: Khi nhấn chuột trái trong khi con trỏ chuột đang ở trên vùng client của cửa sổ thì sự kiện WM_LBUTTONDOWN được phát sinh. Hàm cửa sổ được gọi, giá trị của hằng số WM_LBUTTONDOWN được nhập vào tham số iMsg, chúng ta có thể kiểm tra điều kiện và lập trình phản ứng của chương trình mà chúng ta cần.
Bên trong hàm cửa sổ là toán tử lựa chọn thực hiện tác vụ được mô tả ở trên. Toán tử lựa chọn phải có trình xử lý mặc định, được triển khai bởi hàm DefWindowProc(hMainWnd, iMsg, wParam, lParam);
Nếu điều này không được thực hiện, chương trình của chúng ta sẽ chết mà không thể phục hồi. Nhiều thông báo được hệ thống tự xử lý, chẳng hạn như: thay đổi kích thước cửa sổ, thu nhỏ/phóng to cửa sổ, gọi menu hệ thống, v.v. Đây chính là mục đích của DefWindowProc().
Khi làm việc với các điều khiển cửa sổ, một thông báo WM_COMMAND được gửi đến chủ sở hữu cửa sổ, với lParam chứa phần điều khiển của điều khiển và byte cao của tham số wParam là mã định danh của sự kiện được đưa ra trên điều khiển. Ví dụ: khi bạn nhấp vào nút - BN_CLICKED. Xem các hằng số BN_, WM_. Chúng ta có thể đóng chương trình bằng hàm PostQuitMessage(0). Hàm này gửi thông báo WM_QUIT tới cửa sổ.
Một vài lời về cách viết các chương trình như vậy trong Delphi. Tạo một dự án mới, khởi chạy Trình quản lý dự án, xóa Unit1 cùng với biểu mẫu. Nhấn Ctrl + F12 và mở tệp dự án. Chúng tôi xóa mô-đun biểu mẫu khỏi mục sử dụng, thêm cửa sổ và tin nhắn vào đó. Chúng tôi xóa mọi thứ giữa đầu và cuối. Phôi đã sẵn sàng. Bạn có thể viết mã. Không thể viết chương trình bằng API thuần túy mà không có sự trợ giúp, điều này luôn có sẵn. Nếu bạn là Gates, bạn sẽ không nhớ được mọi thứ. Tôi khuyên bạn nên:
- trước hết - MSDN;
- Hệ thống trợ giúp Delphi (tệp MSTOOLS.HLP);
- Có trợ giúp bằng tiếng Nga về API Win32 trên trang web http://www.soobcha.ru/rushelp.
Chúc may mắn.
Bobachenko Maxim Tải xuống: CreateWnd.zip(2.6K)
kho lưu trữ chứa các tệp windows.cpp và windows.dpr
Việc tạo ra một giao diện đồ họa người dùng, bao gồm việc sắp xếp các thành phần đồ họa và chọn cấu trúc tổng thể cũng như luồng ứng dụng, buộc người lập trình phải trở thành một nghệ sĩ. Không có quy tắc chuẩn nào giúp tạo bản trình bày, sắp xếp các yếu tố và tổ chức cấu trúc. Một giao diện người dùng đồ họa thành công được coi là một tác phẩm nghệ thuật. Vì việc tạo giao diện là một nghệ thuật chứ không phải là khoa học nên không có quy tắc cứng nhắc nào phải tuân theo trong lĩnh vực này. Quá nhiều tham số được xác định bởi bản chất của ứng dụng, người dùng và ngữ cảnh.
Tuy nhiên, có một số nguyên tắc thực tế mà các nhà phát triển nên tuân theo để giúp việc thiết kế giao diện trở nên dễ dàng hơn.
¦ Nên tránh các cấu trúc phức tạp (như cây) để liên kết các menu khác nhau. Tốt nhất là không nên đưa quá sáu menu vào một dòng menu, mỗi menu sẽ chứa không quá sáu tùy chọn.
¦ Các đối tượng phải có ý nghĩa nhất quán. Ví dụ: để kích hoạt tất cả các biểu tượng, hãy nhấp đúp chuột. Một số giao diện hiện đại không đáp ứng khuyến nghị này và chứa các biểu tượng chỉ có hiệu lực sau khi người dùng kéo
phản đối họ. Thanh cuộn chỉ nên được sử dụng để cuộn và nếu sử dụng các biểu tượng thư viện được tạo sẵn, bạn nên kiểm tra cẩn thận để đảm bảo rằng, ví dụ, biểu tượng máy in luôn được sử dụng để in.
¦ Khi kích hoạt tất cả các biểu tượng, như đã lưu ý ở trên, bạn nên nhấp đúp chuột. Và để có được kết quả tương tự đối với các biểu tượng đối tượng được kích hoạt chỉ bằng một cú nhấp chuột, bạn cũng nên lập trình nhấp đúp. Nhiều tùy chọn, chẳng hạn như những tùy chọn được tìm thấy trong menu Control Panel, trông giống như các biểu tượng nhưng là những đối tượng có thể được kích hoạt chỉ bằng một cú nhấp chuột. Bạn nên dự đoán cách người dùng có thể hành xử khi làm việc với các đối tượng đó (tức là mong đợi họ nhấp đúp vào chúng) và giúp họ đạt được kết quả mong muốn.
¦ Các menu giao diện phải phản ánh trạng thái hiện tại của hệ thống. Một trong những nguyên tắc cơ bản hướng dẫn hầu hết các nhà thiết kế giao diện người dùng đồ họa là đảm bảo rằng tất cả các tính năng giao diện đều có thể truy cập được bất kể hành động của người dùng. Quy tắc dưới cùng phù hợp với các ứng dụng đơn giản nhưng ít hữu ích hơn đối với các ứng dụng phức tạp hơn.
¦ Các thành phần chung cho các menu khác nhau nên được đặt ở một nơi. Nhưng ví dụ, các nút OK và Cancel phải luôn được đặt ở vị trí tương đối giống nhau và chiếm cùng một vị trí trong các hộp thoại khác nhau.
¦ Bạn không nên cố gắng đảm bảo tính nhất quán của các thành phần trong menu nếu điều này không phù hợp với quan điểm của người dùng. Ví dụ: người dùng tin rằng việc kéo tệp từ thư mục này sang thư mục khác trên cùng một thiết bị sẽ khiến tệp bị chuyển sang thư mục thứ hai.
Họ cũng tin rằng việc kéo tệp sang thiết bị khác sẽ tạo ra bản sao của tệp gốc ở đó. Từ đó dẫn đến việc thực hiện chức năng kéo sẽ không nhất quán, tức là. khác nhau trong những trường hợp khác nhau. Tuy nhiên, đây là mong muốn của người dùng cần được tính đến. Phấn đấu đạt được sự nhất quán chỉ là một khuyến nghị chứ không phải là một quy tắc cứng rắn và nhanh chóng.
Các yêu cầu công thái học đối với giao diện người dùng đồ họa rõ ràng là không đủ với sự phát triển của “đa phương tiện” - hệ thống tương tác cung cấp công việc với hình ảnh tĩnh và video chuyển động, đồ họa máy tính hoạt hình và văn bản, giọng nói và âm thanh chất lượng cao. Nghiên cứu và phát triển công thái học của các hệ thống này đặt ra một thách thức đầy thách thức và thú vị về mặt chuyên môn.
B. Tognazzini lưu ý rằng hầu hết những người quản lý dự án phát triển ứng dụng đều đợi cho đến khi kết thúc dự án mới bắt đầu làm việc trên giao diện. Điều này gợi nhớ đến việc xây dựng một ngôi nhà, khi một kiến trúc sư được mời đến sau khi xây dựng phần khung của tòa nhà. Tất cả các nhà phát triển đều có những cách tiếp cận khác nhau để tổ chức quá trình tạo giao diện. Tuy nhiên, có những điểm chung mà tất cả các nhà phát triển nên tuân thủ:
1) hiểu rõ từng chi tiết mục đích của sản phẩm phần mềm thông qua giao tiếp chặt chẽ với người dùng, thường dành cả ngày làm việc với họ để hiểu rõ hơn về phong cách làm việc và thói quen cá nhân của họ;
2) tạo giao diện không phải là công việc của một người mà là của đại diện của ba lĩnh vực: một chuyên gia tìm hiểu ý kiến của người dùng về các thành phần chính của giao diện và mô tả chúng; nhà phát triển giao diện và người tạo đồ họa;
3) một nhân viên có kinh nghiệm phải được chỉ định làm chuyên gia về giao diện và là người liên lạc giữa nhóm làm việc và người dùng;
4) thử nghiệm, tạo bố cục và thử nghiệm lại, vì ngay cả khi hiểu rõ mục đích của sản phẩm phần mềm thì cũng không thể cung cấp cho mọi nhu cầu của người dùng.
D. Norman tin rằng các giao diện nên được tạo ra bởi những người không tham gia vào quá trình phát triển ứng dụng, vì các nhà phát triển biết quá nhiều về các nguyên tắc của chương trình và điều này chỉ cản trở việc tạo ra giao diện. Ưu điểm của giao diện đồ họa người dùng nhìn chung được thừa nhận và có lẽ
Vì vậy, anh không trở thành đối tượng phân tích nghiêm túc. Quy tắc truyền thống của nhà phát triển chương trình, theo đó việc dễ học thường ngăn cản người dùng sau đó sử dụng đầy đủ tất cả các khả năng của chương trình, cũng áp dụng cho giao diện đồ họa. Một ví dụ là việc phát triển một dự án cho một công ty bảo hiểm của Mỹ, trong đó họ sử dụng một ứng dụng bảo hiểm cho Macintosh, được trang bị một giao diện tuyệt vời và rất dễ học. Tuy nhiên, sau hai năm hoạt động, người dùng cuối đã trở nên thành thạo các tính năng khác nhau của ứng dụng đến nỗi giao diện đồ họa người dùng chỉ làm họ chậm lại. Việc lựa chọn giao diện đồ họa phải được xác định theo tính chất nhiệm vụ của người dùng.
Quy tắc 2: Giảm gánh nặng cho người dùng
Quy tắc 3: Làm cho giao diện tương thích
Hướng dẫn
Chương trình Start Menu gọn gàng
Phần kết luận
Văn học
Giới thiệu
“Quy tắc vàng của thiết kế là: “Đừng bao giờ làm với người khác những gì họ đã làm với bạn.” Hãy nhớ những điều bạn không thích ở phần mềm bạn sử dụng. Và đừng làm điều tương tự trong chương trình bạn đang làm. ”
Tracy Leonard
Tại sao bạn nên tuân theo các nguyên tắc thiết kế giao diện người dùng?
Phần mềm phải được phát triển có tính đến yêu cầu và mong muốn của người dùng - hệ thống phải thích ứng với người dùng. Đây là lý do tại sao các nguyên tắc thiết kế lại rất quan trọng.
Người dùng máy tính có thể có những trải nghiệm thành công giúp họ tự tin hơn vào khả năng của mình và xây dựng lòng tự trọng cao khi làm việc với máy tính. Hành động của họ với máy tính có thể được mô tả là "thành công nối tiếp thành công". Mỗi trải nghiệm tích cực với chương trình cho phép người dùng mở rộng mức độ làm quen với phần mềm và nâng cao trình độ năng lực của họ. Giao diện được thiết kế tốt, giống như một giáo viên giỏi và sách giáo khoa, đảm bảo sự tương tác hiệu quả giữa người dùng và máy tính. Các giao diện thành công thậm chí có thể giúp một người thoát khỏi phạm vi chương trình thông thường mà anh ta sử dụng và khám phá những chương trình mới, giúp anh ta hiểu sâu hơn về cách hoạt động của giao diện và máy tính.
Nguyên tắc thiết kế giao diện là các khái niệm và quan điểm cấp cao có thể được sử dụng trong thiết kế phần mềm. Bạn cần xác định nguyên tắc nào là quan trọng nhất và có thể chấp nhận được đối với hệ thống của bạn.
Khi bắt đầu thiết kế, cần nêu bật nguyên tắc quan trọng nhất sẽ mang tính quyết định khi tìm kiếm sự thỏa hiệp. Cố gắng tuân theo tất cả các nguyên tắc thiết kế có thể dẫn đến thực tế là trong một số trường hợp, nó không mang lại hiệu quả và có tác động tiêu cực đến kết quả cuối cùng. Nguyên tắc là kim chỉ nam cho hành động.
Ba nguyên tắc thiết kế giao diện người dùng được xây dựng như sau:
1)người dùng kiểm soát giao diện;
2) giảm tải bộ nhớ người dùng;
3) tính nhất quán của giao diện người dùng.
Tìm nguyên tắc thiết kế giao diện người dùng ở đâu
Hansen trình bày danh sách nguyên tắc thiết kế đầu tiên. Các nguyên tắc là:
1) biết người dùng;
2) giảm khả năng ghi nhớ;
3) tối ưu hóa hoạt động;
4) loại bỏ lỗi.
Nhiều nhà sản xuất hệ điều hành lớn xuất bản các sách hướng dẫn và hướng dẫn liên quan khi họ phát hành sản phẩm mới của mình ra thị trường. Những ấn phẩm này tiết lộ các nguyên tắc của cách tiếp cận thiết kế giao diện. Sách hướng dẫn được sản xuất bởi Apple Computer, Inc. (1992), Tập đoàn IBM (1992), Tập đoàn Microsoft (1995) và UNIX OSF/Motif (1993).
Người đọc có thể sử dụng những ấn phẩm này như một công cụ hỗ trợ giảng dạy. Thuật ngữ giao diện có thể khác nhau giữa các sách hướng dẫn, nhưng trọng tâm của tài liệu, mức độ phức tạp và nguyên tắc giao diện người dùng được mô tả đều giống nhau đối với tất cả các cuốn sách.
Tầm quan trọng của các nguyên tắc sau
"Sự không tương thích về giao diện có thể khiến một công ty lớn mất hàng triệu đô la do mất năng suất và tăng chi phí hỗ trợ." - Jessie Briest.
Những nguyên tắc này áp dụng cho tất cả phần mềm và phần cứng, ở mọi loại và kiểu giao diện. Chúng được phát triển trong một thời gian khá dài: nghiên cứu được thực hiện trong lĩnh vực giao diện phần mềm, quá trình phát triển được thực hiện và người dùng của nhiều nền tảng máy tính, bao gồm cả Macintosh và PC, đã được khảo sát.
Những nguyên tắc này đã đứng vững trước thử thách của thời gian và sự ra đời của các công nghệ máy tính mới. Jakob Nielsen lưu ý: “Các nguyên tắc sẽ vẫn cơ bản ngay cả khi chương trình có thiết kế 3D tương lai với DataGlove cho đầu vào, nhận dạng chuyển động và hình ảnh video trực tiếp. Chúng sẽ phù hợp vì chúng thể hiện ý tưởng cơ bản về đối thoại với máy bằng cách sử dụng. lệnh.”
Việc giải thích các nguyên tắc này sẽ phụ thuộc vào phần cứng, hệ điều hành, các thành phần của giao diện người dùng và nhiệm vụ của nó. Thông thường các quyết định kinh doanh sẽ ảnh hưởng tới việc sử dụng các nguyên tắc của người thiết kế. Mô hình người dùng và nhà thiết kế cũng khác nhau và ảnh hưởng đến cách áp dụng các nguyên tắc. Ở một số giai đoạn quan trọng trong quá trình phát triển dự án, câu hỏi có thể được đặt ra: “Điều gì xảy ra tiếp theo?” Câu trả lời nên là: “Bất cứ điều gì người dùng muốn!”
Quyết định lựa chọn nguyên tắc thiết kế giao diện tối ưu cần được tất cả các thành viên trong nhóm thiết kế cùng nhau đưa ra. Những giải pháp này sẽ giúp cải thiện khả năng mua và phát triển các sản phẩm phần mềm.
Quy tắc thiết kế giao diện người dùng
"Làm cho nó đơn giản hơn, nhưng không thô sơ hơn."
Albert Einstein
Quy tắc 1: Trao quyền kiểm soát cho người dùng
Các nhà thiết kế có kinh nghiệm cho phép người dùng giải quyết một số vấn đề theo ý riêng của họ. Các kiến trúc sư, sau khi hoàn thành việc xây dựng một khu phức hợp các tòa nhà, phải bố trí lối đi cho người đi bộ giữa chúng. Họ vẫn chưa biết chính xác nơi mọi người sẽ đi qua các trang web. Vì vậy, các lối đi không bao giờ được đặt đồng thời với việc xây dựng các tòa nhà. Các biển báo được đặt ở khu vực giữa các ngôi nhà với dòng chữ: “Hãy đi trên cỏ”. Sau một thời gian, những người xây dựng quay trở lại và chỉ bây giờ, theo “ý chí” của người dân, mới lấp đầy những con đường mòn bằng nhựa đường.
Nguyên tắc cung cấp cho người dùng quyền kiểm soát hệ thống:
1) sử dụng các chế độ một cách khôn ngoan;
2) cung cấp cho người dùng cơ hội lựa chọn: làm việc bằng chuột hoặc bàn phím hoặc kết hợp cả hai;
3) cho phép người dùng tập trung sự chú ý;
4) hiển thị những thông điệp sẽ giúp ích cho anh ấy trong công việc;
5) tạo điều kiện cho các hành động ngay lập tức và có thể đảo ngược cũng như phản hồi;
6) cung cấp các lối đi và lối thoát thích hợp;
7) điều chỉnh hệ thống cho phù hợp với người dùng có trình độ đào tạo khác nhau;
8) làm cho giao diện người dùng dễ hiểu hơn;
9) cho người dùng cơ hội tùy chỉnh giao diện theo ý thích của họ;
10) cho phép người dùng thao tác trực tiếp với các đối tượng giao diện;
Sử dụng các chế độ một cách khôn ngoan
Các chế độ không phải lúc nào cũng xấu. Cần phải cho phép một người chọn các chế độ mà anh ta cần. Giao diện phải tự nhiên đến mức người dùng cảm thấy thoải mái khi làm việc với chúng. Người dùng không nghĩ đến việc chuyển sang chế độ chèn hoặc viết lại khi làm việc trong trình xử lý văn bản - điều này khá hợp lý và tự nhiên.
Cho phép một người sử dụng chuột và bàn phím
Khả năng làm việc với bàn phím bằng bàn phím thay vì chuột. Điều này có nghĩa là người dùng sẽ làm việc dễ dàng hơn, chỉ là anh ta không thể sử dụng hoặc không có nó. Thanh công cụ được thiết kế để tăng tốc công việc của bạn khi sử dụng chuột. Tuy nhiên, khi làm việc với bàn phím, chúng không thể truy cập được - trong những trường hợp như vậy, các menu "thả xuống" được cung cấp.
Cho phép người dùng chuyển sự chú ý
Đừng buộc người dùng phải hoàn thành chuỗi hành động đã bắt đầu. Cho họ lựa chọn - hủy hoặc lưu dữ liệu và quay lại nơi họ đã dừng lại. Để người dùng có cơ hội kiểm soát quá trình làm việc trong chương trình.
Hiển thị tin nhắn và văn bản giải thích
Sử dụng các thuật ngữ thân thiện với người dùng trong toàn bộ giao diện. Họ không cần phải biết về bit và byte!
Bạn nên chọn tông màu phù hợp trong tin nhắn và lời mời. Điều quan trọng không kém là phải bảo đảm bản thân khỏi các vấn đề và sai sót. Thuật ngữ kém và giọng điệu không chính xác sẽ khiến người dùng tự trách mình về những lỗi xảy ra.
Cung cấp hành động và phản hồi ngay lập tức và có thể đảo ngược
Mỗi sản phẩm phần mềm phải có chức năng UNDO và REDO. Người dùng phải được thông báo rằng hành động đó không thể hoàn tác và nếu có thể, hãy cho phép thực hiện hành động thay thế. Liên tục thông báo cho một người về những gì đang xảy ra vào lúc này.
Cung cấp đường dẫn và lối thoát rõ ràng
Người dùng nên thích làm việc với giao diện của bất kỳ sản phẩm phần mềm nào. Ngay cả các giao diện được sử dụng trong ngành cũng không được khiến người dùng sợ hãi; họ không nên ngại nhấn nút hoặc chuyển sang màn hình khác. Cuộc xâm lược của Internet cho thấy điều hướng là kỹ thuật tương tác chính trên Internet. Nếu người dùng hiểu cách truy cập trang mong muốn trên WWW thì có 80% khả năng anh ta sẽ hiểu được giao diện. Mọi người học các kỹ thuật trình duyệt rất nhanh.
Hỗ trợ người dùng với các cấp độ kỹ năng khác nhau
Đừng “hy sinh” người dùng có kinh nghiệm vì lợi ích của người dùng bình thường. Cần phải cung cấp cho họ quyền truy cập nhanh vào các chức năng của chương trình. Đừng làm họ nhàm chán với nhiều bước để thực hiện một hành động nếu họ đã quen sử dụng một lệnh macro.
Làm cho giao diện người dùng "trong suốt"
Giao diện người dùng là phần “huyền thoại” của sản phẩm phần mềm. Với một dự án tốt, người dùng thậm chí không cảm nhận được “sự hiện diện” của nó. Nếu thiết kế kém, người dùng sẽ phải tốn rất nhiều công sức để sử dụng sản phẩm phần mềm một cách hiệu quả. Mục đích của giao diện là giúp mọi người có cảm giác như đang ở “bên trong” máy tính và có thể tự do thao tác, làm việc với các đồ vật. Đây được gọi là giao diện “trong suốt”!
