UI 設(shè)計在礦用磨機(jī)工業(yè)設(shè)計中的研究及應(yīng)用

王靜婕，孫 薛，程 波，劉 秀，胡雅晴，楊柳松

1洛陽礦山機(jī)械工程設(shè)計研究院有限責(zé)任公司 河南洛陽 471039

2礦山重型裝備國家重點實驗室 河南洛陽 471039

工 業(yè)設(shè)計主要研究產(chǎn)品的實用、美感與環(huán)境，強(qiáng)調(diào)技術(shù)與藝術(shù)的結(jié)合。隨著人機(jī)工程學(xué)的加入，工業(yè)設(shè)計已從純形式的審美設(shè)計發(fā)展成為方式設(shè)計和產(chǎn)品文化設(shè)計[1]。人機(jī)工程學(xué)主要研究人-機(jī)-環(huán)境相互之間的關(guān)系、作用和影響。工業(yè)設(shè)計師作為人機(jī)工程學(xué)的應(yīng)用者，推動了這一獨立的學(xué)科在工業(yè)設(shè)計發(fā)展過程中的廣泛應(yīng)用。在研究產(chǎn)品性能的基礎(chǔ)上，人機(jī)工程學(xué)的應(yīng)用讓工業(yè)設(shè)計師通過合理的造型手段，使產(chǎn)品具備時代特性，符合產(chǎn)品性能和協(xié)調(diào)環(huán)境的形態(tài)，使人們得到美的享受。通過對產(chǎn)品的合理性規(guī)劃，讓人們能更方便地使用產(chǎn)品，使其更好地發(fā)揮效力，為人類創(chuàng)造一種更為合理的生活方式和形態(tài)，從而達(dá)到人-機(jī)-環(huán)境相互和諧的創(chuàng)造性活動[2]。

工業(yè)設(shè)計研究的人機(jī)系統(tǒng)主要為人機(jī)交互和人機(jī)界面。在人機(jī)的相互作用中信息的交互最為重要。信息的交互是以人機(jī)界面為渠道，信息的輸入、輸出是通過界面進(jìn)行轉(zhuǎn)換和傳遞。界面既包括硬件界面，即傳統(tǒng)意義上為人們的身體及四肢服務(wù)的界面，如儀表、信號燈、物理按鍵、把手、手柄等，也包括軟件界面，即互聯(lián)網(wǎng)日趨發(fā)達(dá)的當(dāng)今時代，在顯示器上出現(xiàn)的一切界面，如網(wǎng)頁、車載設(shè)備、智能硬件、APP 等[3]。在軟件界面的設(shè)計過程中，UI 設(shè)計是其視覺傳達(dá)的一部分，其中圖形化或可視化部分都是由 UI 設(shè)計完成的。筆者所研究的對象便是工業(yè)設(shè)計人機(jī)系統(tǒng)軟件界面中的 UI 設(shè)計，也就是用戶界面設(shè)計。UI 設(shè)計主要以視覺化的方式呈現(xiàn)，其設(shè)計過程中不但要考慮配色、字體、排版布局、按鍵形狀、視覺風(fēng)格等，更需要研究如何根據(jù)人的因素進(jìn)行界面設(shè)計，使界面控制系統(tǒng)與人的感官特性相匹配，達(dá)到人、機(jī)、環(huán)境三者交互的最佳狀態(tài)。

隨著礦山機(jī)械行業(yè)工業(yè)設(shè)計的發(fā)展，UI 設(shè)計正逐步進(jìn)入人機(jī)交互系統(tǒng)控制界面 (以下簡稱“人機(jī)交互界面”) 的設(shè)計中。傳統(tǒng)軟件界面的設(shè)計需要產(chǎn)品經(jīng)理提出用戶需求、UI 設(shè)計做出形象規(guī)劃、研發(fā)工程完成后臺搭建。而目前國內(nèi)礦山機(jī)械類產(chǎn)品的人機(jī)交互界面設(shè)計存在界面布局繁瑣、色彩雜亂、層次結(jié)構(gòu)不清晰等問題，造成人機(jī)交互不暢。導(dǎo)致該問題的主要原因是由于目前該類人機(jī)交互界面的設(shè)計者大多為研發(fā)工程師，偏重功能的實現(xiàn)，缺乏對 UI 設(shè)計 (規(guī)劃布局及視覺傳達(dá)) 的正確理解。若要改變此現(xiàn)狀，需要研發(fā)工程師與 UI 設(shè)計師相互配合。先由 UI 設(shè)計師負(fù)責(zé)可視化部分，包括界面規(guī)劃、界面風(fēng)格、動效設(shè)計、圖標(biāo)設(shè)計、控件元素、視覺設(shè)計規(guī)范等，最后由工程師完成 UI 設(shè)計師所作出的可視化部分與后臺控制系統(tǒng)的搭建。筆者針對中信重工機(jī)械股份有限公司 (以下簡稱“中信重工”) 所生產(chǎn)的礦用磨機(jī)人機(jī)交互界面所存在的一系列問題進(jìn)行 UI 設(shè)計研究。

在研究國外礦山機(jī)械行業(yè)產(chǎn)品人機(jī)交互界面的基礎(chǔ)上，中信重工近些年對礦用磨機(jī)人機(jī)交互界面從布局、層次結(jié)構(gòu)、企業(yè)品牌等方面進(jìn)行了逐步改進(jìn)。筆者通過研究傳統(tǒng) UI 設(shè)計網(wǎng)頁、車載設(shè)備、智能硬件、APP，從使用環(huán)境、色彩心理、人機(jī)工程、品牌塑造等方面出發(fā)，結(jié)合礦山機(jī)械行業(yè)產(chǎn)品人機(jī)交互界面現(xiàn)狀，進(jìn)行人機(jī)交互界面的 UI 設(shè)計，完成中信重工礦用磨機(jī)人機(jī)交互界面的統(tǒng)一形象策劃，并形成品牌，打造出特色鮮明、識別度高、美觀大方的礦用磨機(jī)人機(jī)交互界面，并進(jìn)一步提升了產(chǎn)品競爭力[4]。

1 UI 設(shè)計原則

1.1 簡單

優(yōu)秀的用戶界面是簡潔的。簡單直接的頁面邏輯和直觀必要的元素可帶給用戶好的體驗。

1.2 清晰

清晰是所有用戶界面都具備的基本屬性。用戶界面存在的目的是讓用戶能夠便捷地與系統(tǒng)進(jìn)行交互，并清晰地進(jìn)行溝通。設(shè)計過程中要保證按鈕和操作的文字指向性明確，保持清晰的信息傳遞，讓用戶能夠快速弄明白交互的指向性。

1.3 一致

一致的設(shè)計能夠讓用戶對界面模式更快認(rèn)知、熟悉，并在此基礎(chǔ)上快速適應(yīng)整體的體驗。在整個 UI 設(shè)計中保持一致的語言、布局和設(shè)計規(guī)律，謹(jǐn)慎調(diào)節(jié)位置、布局，保證要素之間的視覺交互整齊、對稱、呼應(yīng)，使整個用戶體驗更加順暢。

1.4 層次

層次結(jié)構(gòu)是按項目的重要性或權(quán)重在屏幕上進(jìn)行順序排列。視覺上更具分量的元素易引起用戶的注意。因此，在進(jìn)行界面設(shè)計時，衡量設(shè)計布局成為重要的步驟：①在設(shè)計內(nèi)容與元素之間建立視覺上的聯(lián)系；② 為每個設(shè)計元素添加不同的視覺權(quán)重；③最終創(chuàng)造出平衡的視覺層次，引導(dǎo)用戶的視線。

2 人機(jī)交互系統(tǒng)設(shè)計

人機(jī)交互界面是用戶與產(chǎn)品之間的媒介，人機(jī)交互界面的 UI 設(shè)計需要與產(chǎn)品設(shè)計本身相結(jié)合，其通過界面中感性的設(shè)計元素詮釋產(chǎn)品的設(shè)計內(nèi)涵；通過刺激用戶的感官達(dá)到刺激消費的目的；通過獨特的 UI 設(shè)計創(chuàng)造獨特的用戶感受，從而樹立牢固的品牌形象。中信重工礦用磨機(jī)啟動界面如圖 1 所示。

圖1 中信重工礦用磨機(jī)啟動界面Fig.1 Starting interface of mine-used mill produced by CITIC Heavy Industries

磨機(jī)人機(jī)交互界面的 UI 設(shè)計工作主要從以下幾方面進(jìn)行。

2.1 環(huán)境與尺寸

由于礦山機(jī)械行業(yè)的特殊性，磨機(jī)人機(jī)交互界面的設(shè)計過程中還需考慮其使用環(huán)境對人們心理的影響，使用環(huán)境包括界面的色彩、亮度和對比度等因素。人機(jī)交互界面的背景越亮，對人眼的刺激越大，越不利于眼睛的精準(zhǔn)聚焦。無論在廠房嘈雜的環(huán)境 (工人工作心理易產(chǎn)生煩躁感)，還是在中控室安靜的環(huán)境中 (技術(shù)人員長時間注視顯示屏幕易產(chǎn)生疲勞感)，都需要冷色系界面使用戶在操作過程中時刻保持冷靜，降低誤判的概率。

礦山機(jī)械類產(chǎn)品用戶操作界面的顯示方式分為中控室電腦顯示屏和廠房電控箱觸摸屏 2 種。目前市場中所使用電腦顯示屏多為 29 英寸，分辨率為 1 920× 1 080；電控箱觸摸屏大多為 10、12、15 英寸，分辨率為 1 280×800。設(shè)計者首先應(yīng)確定使用環(huán)境，再決定顯示字符的大小、顏色和權(quán)重等。

2.2 品牌與色彩

索尼公司前總裁盛田昭夫曾說過，我們相信今后的競爭對手將會擁有和我們相同的技術(shù)、類似的產(chǎn)品性能乃至價格，而唯有設(shè)計才能使我們區(qū)別于競爭對手。市場發(fā)展造就了工業(yè)設(shè)計，工業(yè)設(shè)計增強(qiáng)了企業(yè)競爭。視覺呈現(xiàn)的結(jié)果是人們最易接受信息的形式。UI 設(shè)計作為工業(yè)設(shè)計中極為重要的一部分，通過其形象的表現(xiàn)形式，能更直接地塑造、提升企業(yè)品牌形象，凸顯品牌獨特性。優(yōu)秀的 UI 設(shè)計在人機(jī)交互界面中能起到指引和推動的作用，能與用戶之間產(chǎn)生最直接的互動，并使其快速掌握產(chǎn)品實時狀態(tài)，拉近用戶與產(chǎn)品之間的距離，為企業(yè)創(chuàng)造價值。

一代磨機(jī)人機(jī)交互界面整體明暗對比度較強(qiáng)，對操作人員眼部刺激較大。二代磨機(jī)人機(jī)交互界面雖然在一代界面的基礎(chǔ)上優(yōu)化后，品牌凸顯、分區(qū)布局、色彩搭配等方面都有所改進(jìn)，但長期面對淺色背景的操作系統(tǒng)，會造成操作人員視覺疲勞，從而導(dǎo)致操作失誤概率的提高。

考慮色彩以及明度對使用者視覺神經(jīng)的影響以及色彩搭配平衡原則，摒棄了一代、二代人機(jī)交互界面存在的問題，結(jié)合兩者的優(yōu)點，將三代人機(jī)交互界面整體色調(diào)定為藍(lán)色系。藍(lán)色中加入黑色或白色形成明度變化，再加入藍(lán)色的對比色或互補(bǔ)色形成彩度變化，最終達(dá)到豐富又統(tǒng)一的色彩層次感。中信重工礦用磨機(jī)系統(tǒng)界面如圖 2 所示。

圖2 中信重礦用磨機(jī)系統(tǒng)界面Fig.2 Interface of mine-used mill system produced by CITIC Heavy Industries

(1) 控制系統(tǒng)背景色采用含一定比例紅 (藍(lán)的互補(bǔ)色) 的深藍(lán)色，深色背景可減小顯示器光線對人眼的刺激；

(2) 主體色彩采用含一定比例黃 (藍(lán)的對比色) 的藍(lán)綠色，藍(lán)綠色有令人鎮(zhèn)定、緩解緊張的作用，并且會起到降低眼壓、緩解視覺疲勞的作用，對人的視覺神經(jīng)最為適宜；

(3) 標(biāo)題類文字采用淺藍(lán)色，醒目但不突兀且對眼部刺激較??；

(4) 數(shù)據(jù)類文字采用白色，其背景框采用深藍(lán)色，局部明暗對比能突出重點；

(5) 按鍵采用帶有漸變效果的 75% 透明度的藍(lán)綠色與背景色透疊產(chǎn)生層次感；

(6) 指示性引導(dǎo)線采用淺藍(lán)色，醒目且指示性更強(qiáng)；

(7) 提示色采用帶有背光效果的淺藍(lán)色 (正常運行)、預(yù)警色采用帶有背光效果的紅色 (非正常運行)，既整體又醒目。

2.3 形式與布局

優(yōu)秀的用戶界面設(shè)計可以利用清晰、統(tǒng)一的視覺層次和內(nèi)容結(jié)構(gòu)來引導(dǎo)用戶完成任務(wù)，并減少非必要的內(nèi)容和元素，使用戶在界面上完成一項操作或獲取一項信息時，覺得易懂、易用，盡可能地使用戶與界面的交互簡單、高效。

首先，以中信重工礦用磨機(jī)系統(tǒng)界面為例，如圖 2 所示。一代、二代人機(jī)交互界面磨機(jī)系統(tǒng)界面同時顯示數(shù)據(jù)過多，布局繁雜，指示引導(dǎo)線不夠明確，用戶不易快速讀取可用數(shù)據(jù)。三代人機(jī)交互界面將界面數(shù)據(jù)根據(jù)磨機(jī)部件分為 5 個并行二級界面，可保證用戶在使用過程中能迅速有效地準(zhǔn)確掌握數(shù)據(jù)，界面更具層次感。

其次，以中信重工礦用磨機(jī)潤滑系統(tǒng)界面為例，如圖 3 所示。二代人機(jī)交互界面設(shè)計時就已將界面數(shù)據(jù)根據(jù)磨機(jī)部件分為 3 個并行二級界面，但布局不具有延續(xù)性。三代人機(jī)交互界面延續(xù)一級界面磨機(jī)系統(tǒng)控鍵的布局方式，這種延續(xù)布局形式的主次分明，使用戶更易操作。潤滑站、泵的展現(xiàn)形式采用近年流行的扁平化風(fēng)格，與界面整體風(fēng)格更統(tǒng)一、更形象。

圖3 中信重工礦用磨機(jī)潤滑系統(tǒng)界面Fig.3 Interface of lubrication system of mine-used mill produced by CITIC Heavy Industries

再次，以中信重工礦用磨機(jī)趨勢圖、參數(shù)設(shè)定界面為例，如圖 4 所示。三代人機(jī)交互界面將整個界面分為控鍵欄與展示欄 2 部分，功能分區(qū)更明確，數(shù)據(jù)展示更清晰，用戶讀取更精準(zhǔn)。

圖4 中信重工一、二、三代礦用磨機(jī)趨勢圖、參數(shù)設(shè)定界面Fig.4 Trend chart and parameter setting interface of mine-used mill produced by CITIC Heavy Industries

最后，三代磨機(jī)人機(jī)交互界面整體布局繼續(xù)沿用二代上下分欄 (系統(tǒng)標(biāo)題欄、界面導(dǎo)示欄) 設(shè)計。從首頁到一級界面、二級界面，在視覺上達(dá)到整體的連貫性。按鍵形式設(shè)計為開放式邊框與封閉式邊框 2 種，形狀都為切角四邊形。其中開放式邊框按鍵只用于觸發(fā)，不彈出或切換界面；封閉式邊框按鍵可彈出界面或切換一級、二級界面。

3 結(jié)語

視覺呈現(xiàn)的結(jié)果是人們最易接受信息的形式，友好的人機(jī)交互界面為用戶營造舒適的操作環(huán)境。筆者從礦山機(jī)械類產(chǎn)品人機(jī)交互系統(tǒng)人機(jī)交互界面出發(fā)，以礦用磨機(jī)人機(jī)交互界面為例，研究 UI 設(shè)計在礦山機(jī)械類產(chǎn)品工業(yè)設(shè)計中的應(yīng)用。從使用環(huán)境、人機(jī)界面、UI 設(shè)計原理、色彩心理學(xué)等方面著手，設(shè)計出有利于用戶操作的人機(jī)友好界面，并通過界面的視覺傳達(dá)手法提升企業(yè)品牌形象，對企業(yè)形象的構(gòu)建具有重要意義。