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

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

2礦山重型裝備國(guó)家重點(diǎn)實(shí)驗(yàn)室 河南洛陽(yáng) 471039

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

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

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

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

1 UI 設(shè)計(jì)原則

1.1 簡(jiǎn)單

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

1.2 清晰

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

1.3 一致

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

1.4 層次

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

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

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

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

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

2.1 環(huán)境與尺寸

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

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

2.2 品牌與色彩

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

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

考慮色彩以及明度對(duì)使用者視覺神經(jīng)的影響以及色彩搭配平衡原則，摒棄了一代、二代人機(jī)交互界面存在的問題，結(jié)合兩者的優(yōu)點(diǎn)，將三代人機(jī)交互界面整體色調(diào)定為藍(lán)色系。藍(lán)色中加入黑色或白色形成明度變化，再加入藍(lán)色的對(duì)比色或互補(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)色，深色背景可減小顯示器光線對(duì)人眼的刺激；

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

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

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

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

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

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

2.3 形式與布局

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

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

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

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

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

圖4 中信重工一、二、三代礦用磨機(jī)趨勢(shì)圖、參數(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è)計(jì)。從首頁(yè)到一級(jí)界面、二級(jí)界面，在視覺上達(dá)到整體的連貫性。按鍵形式設(shè)計(jì)為開放式邊框與封閉式邊框 2 種，形狀都為切角四邊形。其中開放式邊框按鍵只用于觸發(fā)，不彈出或切換界面；封閉式邊框按鍵可彈出界面或切換一級(jí)、二級(jí)界面。

3 結(jié)語(yǔ)

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