Hướng dẫn viết giao diện HMI WEINTEK

Hướng dẫn lập trình màn hình cảm ứng HMI nói chung và Weintek nói riêng:

Tất các các phòng điều khiển hệ thống hiện đại đều sử dụng các giao diện đồ họa để truyền tải thông tin tới vận hành viên. Nhìn chung, đây chính là đầu mối trọng yếu hiển thị dữ liệu vận hành. Sự rõ ràng của màn hình hiển thị có thể quyết định chất lượng hoạt động của nhà máy. Thông tin hiển thị không đầy đủ sẽ gây kém hiệu quả trong hoạt động, và thâm chí có thể gây nguy hiểm cho toàn nhà máy.

Mức độ rõ ràng trong hiển thị có tầm quan trọng gấp đôi khi vận hành viên phải quản lý nhiều màn hình và mỗi màn hình có chức năng, nhiệm vụ khác nhau và các màn hình đó không phải của một nhà cung cấp.

Một vấn đề khác cũng cần chú ý là vận hành viên quan sát màn hình không giống như người thiết kế ngồi trực tiếp trước màn hình, mà trái lại họ quan sát nó từ xa, thậm chí từ phòng này sang phòng khác.

Vậy, làm thế nào để có được các HMI thân thiện với người sử dụng và mang lại hiệu quả hoạt động? Đó chính là mục đích của bài viết này.

Bố cục màn hình

Trước khi thiết kế bất kỳ giao diện nào bạn cần phải hiểu rõ nhu cầu sử dụng của vận hành viên. Bước này rất hữu ích cho việc thiết kế. Nhìn chung, cách người sử dụng lướt màn hình giống như cách họ đọc một trang báo. Họ sẽ lướt từ trái sang phải và xuống dưới màn hình

Do vậy, người thiết kế cần phải đảm bảo thiết kế các hạng mục quan trọng phải ở trong “tầm quét” của nhân viên vận hành. Các nút biểu tượng cảnh báo nên được đặt lên đầu trang, các nút dữ liệu ở giữa và các nút điều khiển ở thấp hơn, còn các logo của công ty nên đặt ở phía cuối bên trái màn hình.

Chọn màu

Trước khi quyết định đặt các nút lên màn hình, bạn cần hiểu rõ về màu sắc cho từng loại nút. Màu sắc là công cụ hữu ích giúp vận hành viên tăng khả năng quan sát đối với các dữ liệu quan trọng. Nếu sử dụng màu quá nhạt đối với các nút biểu tượng cho trường hợp khẩn cấp, sẽ không thu hút được sự chú ý của vận hành viên. Còn nếu sử dụng màu sắc sặc sỡ cho nhiều loại nút sẽ gây ra tình trạng lộn xộn hoặc quá tải thông tin.

Thông thường, màu cho các nút trên màn hình thường là 3 màu: đỏ, xanh và xanh da trời hoặc màu thứ sinh (do hai màu cơ bản trộn vào tạo ra).

Vòng tròn màu sắc: Mục đích của vòng tròn màu sắc là để diễn tả mối quan hệ giữa các màu. Ví dụ tạo độ sáng cho màu bằng cách kết hợp màu thứ sinh với màu đối diện trong vòng màu sắc.

Mức độ tương phản do các cặp màu thứ sinh (lục nam, vàng, đỏ tươi) kết hợp với nhau cao hơn các cặp màu gốc (đỏ, xanh, xanh lục).

Ví dụ như hình dưới

Chọn màu hiển thị phù hợp

Thị giác của chúng ta rất nhạy cảm với các màu gốc như đỏ, xanh và xanh sáng, còn các màu xanh còn lại ít nhạy cảm hơn. Đó là lý do tại sao những đường kẻ mảnh màu xanh lại khó quan sát. Nên tránh dùng màu xanh cho các nút/ biểu tượng nhỏ, nhưng nó lại rất tốt nếu sử dụng làm màu nền.

Điều quan trọng trong quá trình chọn màu là làm sao phối hợp giữa màu trạng thái của nhà máy và màu trạng thái cảnh báo. Một số quy chuẩn màu sử dụng trong thiết kế HMI:

Đỏ = Dừng lại, cấm, nguy hiểm

Vàng = Cẩn thận

Xanh lá cây = An toàn

Xanh đậm = Hành đồng bắt buộc

Mọi giao diện hiển thị cần phải đảm bảo được thiết kế sao cho các nút hiển thị về an toàn có mức độ rõ nét cao, và màu này không được sử dụng quá nhiều cho các nút khác. Tránh tình trạng sử dụng cả khối màu gốc lớn (như màu đỏ) vì nó sẽ gây ra tình trạng lưu màu lâu trên võng mạc, dẫn đến việc khó cảm nhận các màu khác trên màn hình. Bạn có thể thử kiểm tra hiện tượng này bằng cách nhìn vào một vùng màu đỏ lớn, ngay sau đó chuyển sang nhìn vào bức tường màu trắng, bạn sẽ thấy bức tường đó là màu xanh.

Ngoài ra, khi thiết kế cũng phải chú ý rằng cứ 12 người lại có 1 người có vấn đề về màu sắc. Như vậy, khi thiết kế không nên chỉ dựa vào màu sắc để hiển thị trạng thái nhà máy.

Màu đen trắng cung cấp độ tương phản cho các text, nhưng chúng lại không phù hợp làm nền cho nhiều loại màu khác. Một số màu phù hợp làm nền như xám, nâu và xanh. Chúng tạo độ tương phản tốt cho những màu sử dụng cho các nút/biểu tượng như đỏ, vàng, xanh da trời, đỏ tươi và trắng.

Có thể sử dụng màu nền khác nhau nhằm tạo hiệu ứng để dễ phân biệt các nhóm màn hình. Chẳng hạn như màu xám sáng sử dụng cho nhà máy chính, màu nâu sáng cho khu vực tank, và màu xanh sáng cho nhà máy nước.

Màn hình hiển thị thường trình bày toàn bộ quá trình nhà máy. Nếu được thiết kế tốt, nhìn vào đó vận hành viên có thể quan sát lập tức toàn bộ nhà máy và vị trí của thiết bị đó. Tuy nhiên, nếu nhồi nhét quá nhiều thông tin lên đó lại có tác dụng ngược lại — rất khó tìm được dữ liệu theo ý muốn. Do vậy, hay thiết kế HMI sao cho đơn giản, thuận tiện.

Đôi khi ảnh của nhà máy được sử dụng làm ảnh nền. Những ảnh như vậy có mức độ tương phản kém, có nhiều chi tiết và không phù hợp làm ảnh nền. Nếu cứ vẫn muốn sử dụng, bạn nên chọn một bức ảnh có chất lượng thật tốt.

Chúng ta cũng có thể sử dụng các ảnh đồ họa trong thư viện ảnh đồ họa làm nền. Tuy nhiên cũng không nên lấy các ảnh quá phức tạp hay màu mè rối rắm.

Giá trị dữ liệu và text

Có lẽ các đoạn text thường là nhân tố gây phàn nàn nhiều nhất vì nó khó đọc. Điều này thật tệ vì text chính là cách truyền tải thông tin hiệu quả nhất tới vận hành viên.

Chọn font

Có hàng trăm loại font, nhưng chỉ có một vài trong đó phù hợp. Nên chọn loại font thông dụng mà nhiều máy tính đều hỗ trợ như Arial, Helvetica, System… Nếu bạn đang thiết kế HMI trên hệ điều hành Windows và sử dụng font không thông dụng thì khi bạn copy kết quả thiết kế từ máy này sang máy khác có thể sẽ xảy ra hiện tượng lỗi font không mong muốn. Do vậy, không nên dùng những loại font thông dụng.

Sau việc chọn font là đến chọn cỡ chữ. Đối với HMI, vận hành viên phải đọc được thông tin dù có cách đó vài mét. Font Arial với cỡ 16 là phù hợp nhất cho những loại chữ thông thường. Đối với tiêu đề nên tăng lên 2 cỡ. Một điều cần chú ý là nên sử dụng 1 loại font đồng nhất và không nên sử dụng quá 3 cỡ font. Trong trường hợp cần miêu tả chi tiết ứng dụng bằng text, nên sử dụng pop-up.

Tránh sử dụng quá nhiều chữ in hoa vì nó có thể gây khó đọc và nhức mắt, đặc biệt là sử dụng gạch chân. Chữ in hoa chỉ nên sử dụng cho tiêu đề lớn. Còn các đoạn text chỉ nên dùng chữ thường.

Giá trị dữ liệu text

Nên nhóm text, và đặc biệt là giá trị dữ liệu vào cùng khu vực trên màn hình. Nếu đặt giá trị dữ liệu tùy tiện cạnh các ảnh/biểu tượng sẽ gây khó quan sát. Nếu bạn muốn người sử dụng so sánh dữ liệu, thì nên nhóm chúng vào một bảng. Nếu bạn có nhiều bảng có loại dữ liệu giống nhau ví dụ như nhiệt độ, áp suất, tốc độ, thì bạn bố trí chúng sao cho dễ tìm kiếm và theo dõi.

Cảnh báo và trạng thái nhà máy động

Một yếu tố quan trọng của HMI là dữ liệu nhà máy động. Có 2 loại dữ liệu động cơ bản: dữ liệu trạng thái nhà máy và cảnh báo.

Cảnh báo.

Trạng thái cảnh cáo của toàn bộ nhà máy nên luôn để hiện thị trường trực trên màn hình và nên có chỉ dẫn đơn giản tới nội dung chi tiết của cảnh báo. Màu của các biểu tượng cảnh báo dựa theo quy chuẩn:

Đỏ = Dừng lại, cấm, nguy hiểm

Vàng = Cẩn thận

Xanh lá cây = An toàn

Xanh đậm = Hành đồng bắt buộc

Vì cứ 12 người lại có 1 người có vấn đề về cảm nhận màu sắc, vậy để phòng tránh không nên chỉ sử dụng màu để hiển thị cảnh báo mà nên kết hợp với hình ảnh, hoặc trong trường hợp quan trọng ta kết hợp với cả âm thanh.

Hiển thị cảnh báo bằng hình ảnh gồm thay đổi kích cỡ nút/biểu tượng, thay đổi vị trí hiển thị, xuất hiện text hoặc vật nếu có cảnh báo. Hiển thị âm thanh là phương pháp rất hữu ích, đặc biệt nếu hệ thống được trang bị những âm vực cao thấp khác nhau. Âm vực truyền tải mức độ khẩn cấp của các trường hợp cảnh báo.

Dù chọn hình thức thể hiện cảnh báo nào đi nữa thì các biểu tượng này cần được đặt những nơi dễ quan sát nhất. Một vị trí đề nghị đó là trên đầu màn hình.

Điều hướng và điều khiển

Điều hướng

Để giám sát các màn hình, vận hành viên phải chuyển từ trang này sang trang khác dễ dàng và nhanh chóng. Với sự phổ biến của Microsoft Windows, thiết bị điều khiển chính cho vận hành viên là chuột và bàn phím. Bên cạnh đó, màn hình cảm ứng đang được ưa chuộng.

Dù đó là công cụ nào đi nữa thì các “điểm nóng” trên màn hình cũng phải rõ ràng và đủ lớn để có thể kích chuột dễ dàng. Có hai cách thường được dùng để hiển thị “điểm nóng”, đó là sử dụng nút và hình ảnh. Với cách sử dụng hình ảnh, khi vận hành viên “di chuột” qua khu vực hình ảnh, thì nó sẽ hiện ra một màn hình chi tiết.

Sự điều hướng giữa các màn hình nên được thiết kế đơn giản, rõ ràng và thuận tiện. Có thể thiết kế theo kiểu cấu trúc hình cây. Giữa các bước chuyển tiếp nên đặt nút “next step” ở phía dưới bên phải màn hình. Tất cả các trang trong màn hình nên bố trí nút “Overview” — tương đương nút “Trang chủ” trong các trình duyệt web. Nút này nên đặt vị trí dễ quan sát và tại cùng một vị trí ở các trang khác nhau.

Nếu có thể, nên nhóm các nút điều hướng lại để vận hành viên thuận tiện trong thao tác, không phải di chuột nhiều. Nếu người sử dụng có nhu cầu chuyển đổi giữa các trang liên tục trong quá trình sử dụng, nên đặt các nút như “Next page” ở cùng một vị trí giúp họ dễ dàng click hơn mà không phải di chuột nhiều.

Điều khiển. Đối với các nút điều khiển, nên có pop-up như kiểu “Khởi động bơm cấp liêu — OK or Cancel” nhằm tránh sai sót vô tình, và giúp những nhân viên mới tiếp cận hệ thống mà không lo sợ gây thiệt hại hay hỏng hóc cho nhà máy.

Kết luận

Không có một quy chuẩn chi tiết nào cho việt thiết kế HMI. Mỗi người có cách thiết kế riêng của mình. Sau đây chúng ta cùng tham khảo giao 2 diện HMI của cùng một nhà máy. Giao diện tốt là có bố cục tốt, chọn màu phù hợp và các nút điều hướng phù hợp, vị trí nút cảnh báo đặt trên đầu giao diện.

Giao diện tốt

Giao diện kém có bố cục kém, không logic nên việc tìm kiếm dữ liệu, thông tin gặp nhiều khó khăn. Chọn màu kém, sử dụng nhiều chữ hoa, các nút điều hướng không mạch lạc, khó quan sát thông tin từ xa và đặc biệt là thiếu cẩn thận trong thiết kế các nút hiển thị.

Giao diện kém

Mong rằng qua bài viết này, những nhà thiết kế HMI có thể tránh được những lỗi thông dụng. Dù bí quyết thiết kế HMI của bạn là gì, thì bạn cũng cần ghi nhớ đó là giao diện bạn thiết kế phải đồng bộ cho toàn bộ các màn hình trong nhà máy. Các màn hình cần phải giống nhau, các nút điều hướng đặt cùng vị trí. Giao diện thiết kế cần rõ ràng, dễ sử dụng.