好用與能用的差別

消費(fèi)電子有著巨大的用戶潛力，“易用性”成為必

須，否則，品牌將由于極高的用戶學(xué)習(xí)阻礙其被市場(chǎng)認(rèn)可，進(jìn)而無(wú)法獲得規(guī)模而無(wú)法獲得經(jīng)濟(jì)性。而工業(yè)產(chǎn)品， 如機(jī)器裝備，通常大家認(rèn)為功能性才是核心，像HMI設(shè)計(jì)只是“錦上添花”的事情。然而，我們必須改變這種思想，因?yàn)槿绻倏貜?fù)雜那么同樣影響用戶的使用而被市場(chǎng)拒絕，這是現(xiàn)實(shí)的訴求。而另一方面，卓越，是從每個(gè)細(xì)節(jié)中體現(xiàn)的，關(guān)注用戶的體驗(yàn)，精心打磨的產(chǎn)品，必然為市場(chǎng)所接受，如圖1所示。

為什么要重視HMI設(shè)計(jì)

1.操作人員不是工程師

機(jī)器操作員不是工程師，他們并不需要掌握復(fù)雜的專業(yè)知識(shí)和技能，他們需要的是簡(jiǎn)單的操作機(jī)器，否則，用戶需要為操作工支付工程師的薪水。

• 頁(yè)面數(shù)量越少越好，理想的就是只有1個(gè)畫面；

• 按鍵越少越好，最好就1個(gè)開、1個(gè)關(guān)。

2.追求精致是一種品質(zhì)

一葉知秋，管中窺豹說的就是一種場(chǎng)景，一個(gè)工程師，如果能夠在一個(gè)細(xì)微間精益雕琢，他所呈現(xiàn)的那種精益求精的態(tài)度是可以被信任的。同樣道理，一個(gè)在HMI 細(xì)節(jié)處不斷精雕細(xì)琢的機(jī)器制造商，也能被用戶從這些細(xì)節(jié)中把握到“專業(yè)”&“職業(yè)”，贏得信任，就在點(diǎn)滴之間。

用戶想要什么樣的HMI設(shè)計(jì)

1.終端用戶關(guān)注點(diǎn)

• 簡(jiǎn)單：能一個(gè)頁(yè)面，就不要兩個(gè)；

• 高大上：不是愛慕虛榮-而是卓越追求；

• 流暢：不要出現(xiàn) “卡頓”現(xiàn)象，我的耐心是有限

的；

• 
  

• 直觀：不能讓我猜這個(gè)按鈕干什么用的，也不要讓我去聯(lián)想。

2.機(jī)器開發(fā)者關(guān)注點(diǎn)

• 
  

• 術(shù)業(yè)有專攻，我是否可以能夠設(shè)計(jì)專業(yè)的HMI？

• 是否花費(fèi)太多時(shí)間在UI上不值得？

• 會(huì)不會(huì)喧賓奪主？

HMI設(shè)計(jì)思想

在機(jī) 器 設(shè)計(jì) 中， 貝 加萊 積累 了 大量 U I （U s er

Interface）設(shè)計(jì)的經(jīng)驗(yàn)與準(zhǔn)則，概括起來(lái)包括以下幾個(gè)要點(diǎn)：

1.布局一致性（Consistency）

對(duì)機(jī)器制造商而言，其機(jī)器需要具有一致性的布局設(shè)計(jì)，尤其是有多產(chǎn)品線的制藥、鋰電、光伏設(shè)備領(lǐng)域， UI設(shè)計(jì)必須體現(xiàn)“品牌”的一致性，以及操控一致性。品牌一致性是企業(yè)的形象，而操控一致性則是用戶學(xué)習(xí)成本的考量。如圖2所示，通常在頂部形成基本的語(yǔ)言、日期與時(shí)間的顯示。左側(cè)規(guī)劃核心操作按鈕與整體機(jī)器數(shù)據(jù)顯示，中間則由多個(gè)標(biāo)簽構(gòu)成不同的切換頁(yè)面，右側(cè)可以形成主要頁(yè)面切換。圖2僅是一個(gè)布局的手動(dòng)設(shè)計(jì)參考，可以在Visio或其它畫圖軟件中預(yù)先進(jìn)行規(guī)劃，并形成企業(yè)的統(tǒng)一風(fēng)格。

一致性不僅指布局，當(dāng)然也體現(xiàn)在配置的字體、色彩組合、圖標(biāo)的一致性。

2.切換合理性（Rationality）

在HMI設(shè)計(jì)中，由于往往存在多的頁(yè)面，在初期設(shè)計(jì)中，必須通盤考慮，避免讓操作人員往返于各個(gè)頁(yè)面。相近的如狀態(tài)顯示類、參數(shù)設(shè)置類、維護(hù)類都需要分類，避免在不同頁(yè)面間的切換帶來(lái)的不必要的時(shí)間消耗。

例如圖3是一個(gè)資產(chǎn)管理類的頁(yè)面，可以像文件夾一樣進(jìn)入，然后針對(duì)不同的獨(dú)立頁(yè)面訪問，并可以隨時(shí)回到Home，就像智能手機(jī)的操作一樣簡(jiǎn)便。

1. 顯示直觀性（Intuitiveness）

在工業(yè)裝備的UI設(shè)計(jì)中，不能像消費(fèi)電子產(chǎn)品那樣過于追求“炫酷”的效果，不能影響操作的直觀性，不能讓操作人員在炫酷中無(wú)所適從，而是直接明了，不會(huì)困惑于選擇。圖標(biāo)必須簡(jiǎn)約，易于理解，不能讓操作人員產(chǎn)生歧義。

1. 設(shè)計(jì)簡(jiǎn)約性（Simplicity）

就像我們?cè)谠O(shè)計(jì)PPT所要遵循的原則一樣，Less is More，顏色遵循最多不超過3個(gè)，避免采用與報(bào)警（黃色）、警告（紅色）這樣的顏色沖突，使得操作人員誤判斷。字體：盡量避免多的字體選擇，字體大小、加粗、下劃線、顏色、斜體這些可選中盡量避免多的設(shè)置。

在圖4的灌裝設(shè)計(jì)中，就是比較簡(jiǎn)單的規(guī)劃，簡(jiǎn)約性主要體現(xiàn)在每個(gè)頁(yè)面元素盡量少，避免過多的“重點(diǎn)”出現(xiàn)在頁(yè)面上，如果過多的重點(diǎn)就相當(dāng)于沒有重點(diǎn)，關(guān)鍵數(shù)據(jù)呈現(xiàn)即可。

1. 操作安全性（Safety）

在工業(yè)UI設(shè)計(jì)中，必須避免一些不應(yīng)該出現(xiàn)的情況，

影響機(jī)器的安全性，必須與功能性設(shè)計(jì)緊密結(jié)合，需要注意以下幾點(diǎn)：

• 
  

• 避免出現(xiàn)誤操作，當(dāng)然這也需要硬件保障；

• 對(duì)于造成危險(xiǎn)后果的，必須有手動(dòng)確認(rèn)環(huán)節(jié)；

• 數(shù)據(jù)的安全保護(hù)。

工欲善其事必先利其器——mappVIEW

mappVIEW是貝加萊Automation Studio平臺(tái)內(nèi)嵌

的HMI設(shè)計(jì)組件，它提供了高效的HMI設(shè)計(jì)支持能力。

1.Web技術(shù)與自動(dòng)化融合

mappVIEW是貝加萊Automation Studio平臺(tái)內(nèi)嵌的HMI設(shè)計(jì)組件，它是Web技術(shù)與自動(dòng)化技術(shù)融合的產(chǎn)物， 采用模塊化軟件設(shè)計(jì)思想，通過OPC UA將數(shù)據(jù)規(guī)

范化訪問并呈現(xiàn)于HMI端，任意支持HTML/Javascript/ CSS的終端均可訪問來(lái)自PLC上的數(shù)據(jù)。

如圖5所示，mappVIEW實(shí)際上借助于IT技術(shù)的豐富呈現(xiàn)能力，與自動(dòng)化的控制技術(shù)融合。

2.支持多媒體訪問

mappVIEW可以使得傳統(tǒng)嵌入式系統(tǒng)開發(fā)的HMI脫離其原有的有限資源能力，如圖6所示，可以將音視頻、動(dòng)畫、PDF文件等PC端的技術(shù)融入到HMI中，可以讓機(jī)器的功能性更強(qiáng)大，例如動(dòng)畫體現(xiàn)機(jī)器的運(yùn)行狀態(tài)、PDF 在線文檔，或采用視頻的機(jī)器維修指南，這都使得機(jī)器賦予更為強(qiáng)大的現(xiàn)場(chǎng)運(yùn)營(yíng)能力。

3.豐富的控件

在mapp VIEW中有數(shù)百個(gè)各種控件，采用直觀而易于理解的方式， 通過“ 拖拽” 的方式在屏幕上布局、配置，這降低了普通工程師對(duì)于專業(yè)的UI設(shè)計(jì)的學(xué)習(xí)，即使是新手也可以設(shè)計(jì)出令人耳目一新的UI。

圖7所示為其控件庫(kù)（左側(cè)），而且，自適應(yīng)技術(shù)使得這些畫面可以被不同規(guī)格的手機(jī)、面板訪問。

4.功能性設(shè)計(jì)，簡(jiǎn)化工程師工作

通過內(nèi)部的OPC UA數(shù)據(jù)模型支持能力、智能變量映射，讓HMI與程序間建立關(guān)聯(lián)，使得工程師可以快速的配置出可用的HMI，降低工作時(shí)間消耗。

圖8為顯示器功能性設(shè)計(jì)，不僅局限于控件的畫面設(shè)計(jì)，還提供機(jī)器本身的各種功能性支撐。

硬件支撐

在貝加萊，有多種精美設(shè)計(jì)的HMI支持mappVIEW

畫面呈現(xiàn)，Panel PC各個(gè)系列都采用Intel X86 高性能CPU，像Intel Apollo Lake、Core i多核處理器。另外，隨著LCD/LED等制造成本的不斷下降，大尺寸的工業(yè)面板也不新鮮，且價(jià)格也較之以往下降，因此，可以在同一個(gè)頁(yè)面中獲得更大的表達(dá)，減少頁(yè)面數(shù)量，圖9所顯示的尺寸從5.7英寸到24英寸，運(yùn)行Windows 10級(jí)操作系統(tǒng)。

設(shè)計(jì)實(shí)例

注塑機(jī)行業(yè)普遍的操作習(xí)慣是豎屏結(jié)構(gòu)，由于要顯示

的內(nèi)容眾多，并且針對(duì)開合模、鎖模、射膠等流程，這個(gè)行業(yè)的操作習(xí)慣是很多按鍵，也被設(shè)計(jì)為二級(jí)目錄布局于底部。圖10顯示了針對(duì)注塑機(jī)的精美畫面設(shè)計(jì)。

HMI設(shè)計(jì)看上去是一個(gè)“錦上添花”的事情，在過去很長(zhǎng)一段時(shí)間不為機(jī)器制造商所重視，然而，當(dāng)我們明白， 一切的細(xì)節(jié)雕琢都是工匠品質(zhì)的體現(xiàn)，一個(gè)人、一個(gè)企業(yè)要想贏得信任，就必須具備這種為用戶不斷打磨自己產(chǎn)品的精神。